2211 lines
42 KiB
CSS
2211 lines
42 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
/* Couleurs du logo OKI */
|
|
--or-oki: #FDB813; /* Or plus vibrant et chaud */
|
|
--noir-oki: #0D0D0D; /* Noir profond avec nuance chaude */
|
|
--vert-oki: #00D66C; /* Vert émeraude plus saturé */
|
|
--rouge-oki: #FF1654; /* Rouge corail plus vif */
|
|
--blanc-creme: #FFF8E7; /* Blanc crème plus chaud */
|
|
|
|
/* Palette Afrofuturiste Caribéenne */
|
|
--turquoise-caraibes: #00CED1; /* Bleu turquoise des Caraïbes */
|
|
--jaune-soleil: #FFD700; /* Jaune soleil éclatant */
|
|
--orange-flamme: #FF6B35; /* Orange chaleureux */
|
|
--violet-nuit: #6B2D5C; /* Violet nuit tropicale */
|
|
--bleu-ocean: #0077BE; /* Bleu océan profond */
|
|
|
|
/* Couleurs dérivées pour le design */
|
|
--noir-profond: #1A0F1A; /* Noir avec nuance violette */
|
|
--gris-sombre: #2D1B2E; /* Gris avec nuance chaude */
|
|
--or-clair: #FFE066; /* Or lumineux */
|
|
--vert-clair: #66FFAA; /* Vert lime vibrant */
|
|
--rouge-clair: #FF6B9D; /* Rose corail */
|
|
|
|
/* Système graphique : angles nets, pas de formes "organiques" */
|
|
--radius-sm: 3px;
|
|
--radius-md: 6px;
|
|
--line: rgba(255, 255, 255, 0.1);
|
|
|
|
--font-display: 'Archivo', 'Arial Black', sans-serif;
|
|
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
/* Thème Clair */
|
|
html.light-theme,
|
|
html.light-theme body {
|
|
/* Couleurs inversées pour le mode clair */
|
|
--noir-oki: #FFF8E7; /* Fond clair */
|
|
--blanc-creme: #0D0D0D; /* Texte sombre */
|
|
|
|
/* Ajustements pour la lisibilité */
|
|
--noir-profond: #F5F0E8; /* Fond de section clair */
|
|
--gris-sombre: #E8DDD0; /* Gris clair */
|
|
|
|
/* Couleurs vives assombries pour WCAG AA (contraste 4.5:1 minimum) */
|
|
--or-oki: #B87A00; /* Or assombri pour contraste suffisant */
|
|
--vert-oki: #006B3D; /* Vert assombri */
|
|
--rouge-oki: #A01030; /* Rouge assombri */
|
|
--turquoise-caraibes: #006B75; /* Turquoise assombri */
|
|
--violet-nuit: #6B2D5C; /* Violet ok */
|
|
--bleu-ocean: #004B7F; /* Bleu assombri */
|
|
|
|
/* Couleurs dérivées plus claires pour bordures/décorations */
|
|
--or-clair: #D99000; /* Or clair pour éléments secondaires */
|
|
--vert-clair: #008C4F; /* Vert clair */
|
|
--rouge-clair: #C01545; /* Rouge clair */
|
|
|
|
/* Couleurs d'accentuation */
|
|
--jaune-soleil: #B87A00; /* Aligné avec l'or */
|
|
--orange-flamme: #C85000; /* Orange assombri */
|
|
|
|
--line: rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--noir-oki);
|
|
color: var(--blanc-creme);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: var(--font-display);
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Signature graphique OKI : le bandeau 4 couleurs (le drapeau, pas un dégradé) */
|
|
.flag-bar {
|
|
height: 6px;
|
|
width: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--noir-oki) 0%, var(--noir-oki) 25%,
|
|
var(--or-oki) 25%, var(--or-oki) 50%,
|
|
var(--vert-oki) 50%, var(--vert-oki) 75%,
|
|
var(--rouge-oki) 75%, var(--rouge-oki) 100%
|
|
);
|
|
}
|
|
|
|
html.light-theme .flag-bar {
|
|
background: linear-gradient(
|
|
to right,
|
|
#000 0%, #000 25%,
|
|
var(--or-oki) 25%, var(--or-oki) 50%,
|
|
var(--vert-oki) 50%, var(--vert-oki) 75%,
|
|
var(--rouge-oki) 75%, var(--rouge-oki) 100%
|
|
);
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: 1rem 2rem 0.85rem;
|
|
background: var(--noir-oki);
|
|
z-index: 1000;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
nav .flag-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
html.light-theme nav {
|
|
box-shadow: 0 1px 0 var(--line);
|
|
}
|
|
|
|
html.light-theme .nav-links a {
|
|
color: #0D0D0D;
|
|
}
|
|
|
|
html.light-theme .nav-links a:hover {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
html.light-theme .lang-switch {
|
|
color: #0D0D0D;
|
|
}
|
|
|
|
html.light-theme .lang-switch:hover {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
/* Ajustements de contraste pour le thème clair (WCAG 2 AA) */
|
|
html.light-theme .tag {
|
|
background: rgba(184, 122, 0, 0.08);
|
|
border-color: var(--or-oki);
|
|
}
|
|
|
|
html.light-theme .value-card,
|
|
html.light-theme .service-card,
|
|
html.light-theme .project-card,
|
|
html.light-theme .public-card,
|
|
html.light-theme .partner-card,
|
|
html.light-theme .engagement-card,
|
|
html.light-theme .faq-item,
|
|
html.light-theme .djangokam-fact-card,
|
|
html.light-theme .offer-card,
|
|
html.light-theme .hosting-banner,
|
|
html.light-theme .hosting-note,
|
|
html.light-theme .support-panel,
|
|
html.light-theme .alt-donation-card {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
html.light-theme .donation-amount {
|
|
background: rgba(184, 122, 0, 0.1);
|
|
}
|
|
|
|
html.light-theme .donation-amount.monthly {
|
|
background: rgba(0, 107, 61, 0.1);
|
|
}
|
|
|
|
html.light-theme .public-benefits,
|
|
html.light-theme .publics-footer {
|
|
background: rgba(184, 122, 0, 0.08);
|
|
border-color: var(--or-oki);
|
|
}
|
|
|
|
html.light-theme .contact {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
html.light-theme .contact-links a {
|
|
color: #0D0D0D;
|
|
}
|
|
|
|
html.light-theme .contact-links a:hover {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
font-family: var(--font-display);
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--or-oki);
|
|
text-decoration: none;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.logo-image {
|
|
height: 2.5rem;
|
|
width: auto;
|
|
background: #fff;
|
|
padding: 0.25rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--blanc-creme);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
/* Language Switch */
|
|
.lang-switch {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.5rem 0.7rem;
|
|
color: var(--blanc-creme);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.04em;
|
|
transition: border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.lang-switch:hover {
|
|
border-color: var(--or-oki);
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
/* Theme Toggle Button */
|
|
.theme-toggle {
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.5rem 0.7rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: border-color 0.2s ease;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
border-color: var(--or-oki);
|
|
}
|
|
|
|
.theme-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.theme-icon-light {
|
|
display: none;
|
|
}
|
|
|
|
html.light-theme .theme-icon-dark {
|
|
display: none;
|
|
}
|
|
|
|
html.light-theme .theme-icon-light {
|
|
display: inline-block;
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: none;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
gap: 5px;
|
|
}
|
|
|
|
.menu-toggle span {
|
|
width: 24px;
|
|
height: 2px;
|
|
background: var(--or-oki);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* Nav dropdown ("Ressources") */
|
|
.has-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-dropdown-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-family: inherit;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
color: var(--blanc-creme);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-dropdown-trigger:hover {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.dropdown-caret {
|
|
font-size: 0.7em;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.nav-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: 1rem;
|
|
min-width: 200px;
|
|
list-style: none;
|
|
background: var(--noir-oki);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.4rem 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-6px);
|
|
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
|
}
|
|
|
|
.has-dropdown:hover .nav-dropdown,
|
|
.has-dropdown.open .nav-dropdown,
|
|
.nav-dropdown-trigger:focus-visible + .nav-dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.has-dropdown:hover .dropdown-caret,
|
|
.has-dropdown.open .dropdown-caret {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.nav-dropdown a {
|
|
display: block;
|
|
padding: 0.55rem 1.1rem;
|
|
white-space: nowrap;
|
|
font-size: 0.9rem;
|
|
color: var(--blanc-creme);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
padding: 9rem 2rem 5rem;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: -5%;
|
|
width: 55%;
|
|
height: 100%;
|
|
background: url('https://organisationka.b-cdn.net/assets/images/logo-512x512.png') center / contain no-repeat;
|
|
opacity: 0.05;
|
|
pointer-events: none;
|
|
}
|
|
|
|
html.light-theme .hero::before {
|
|
opacity: 0.06;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.2rem, 6vw, 4rem);
|
|
font-weight: 900;
|
|
margin-bottom: 0.4rem;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: clamp(1.4rem, 4vw, 2.2rem);
|
|
font-weight: 700;
|
|
margin-bottom: 1.25rem;
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--or-oki);
|
|
font-weight: 600;
|
|
font-family: var(--font-body);
|
|
text-transform: none;
|
|
}
|
|
|
|
.accent-text {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 2rem;
|
|
opacity: 0.85;
|
|
max-width: 680px;
|
|
font-family: var(--font-body);
|
|
text-transform: none;
|
|
}
|
|
|
|
.hero-tags {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.tag {
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(253, 184, 19, 0.08);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9rem;
|
|
border: 1px solid var(--or-oki);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.9rem 1.8rem;
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
font-family: var(--font-display);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--or-oki);
|
|
color: var(--noir-oki);
|
|
border-color: var(--or-oki);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
background: var(--or-clair);
|
|
border-color: var(--or-clair);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--or-oki);
|
|
border-color: var(--or-oki);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
transform: translateY(-2px);
|
|
background: var(--or-oki);
|
|
color: var(--noir-oki);
|
|
}
|
|
|
|
/* Bloc icône : aplat net, pas de mascotte flottante */
|
|
.icon-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
font-size: 1.5rem;
|
|
border-radius: var(--radius-sm);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid var(--line);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Fediverse Services Section */
|
|
.fediverse {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.section-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.fediverse h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.section-subtitle {
|
|
text-align: center;
|
|
font-size: 1.15rem;
|
|
opacity: 0.85;
|
|
margin-bottom: 3rem;
|
|
font-family: var(--font-body);
|
|
text-transform: none;
|
|
}
|
|
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.service-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-left: 4px solid var(--vert-oki);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--vert-oki);
|
|
}
|
|
|
|
.service-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.service-card h3 {
|
|
color: var(--or-oki);
|
|
margin: 0.75rem 0 0.25rem;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.service-platform {
|
|
color: var(--vert-oki);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
font-family: var(--font-body);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.service-description {
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.6;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.service-link {
|
|
color: var(--or-oki);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-family: var(--font-body);
|
|
transition: gap 0.2s ease;
|
|
}
|
|
|
|
.service-link:hover {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.project-card-link {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Web Projects Section */
|
|
.projects {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-oki);
|
|
}
|
|
|
|
.projects h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.project-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.project-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
|
border: 1px solid var(--line);
|
|
border-top: 4px solid var(--or-oki);
|
|
text-align: center;
|
|
display: block;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.project-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--or-oki);
|
|
}
|
|
|
|
.project-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.project-domain {
|
|
color: var(--rouge-oki);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1rem;
|
|
font-family: monospace;
|
|
text-transform: none;
|
|
}
|
|
|
|
.project-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Mission Section */
|
|
.mission {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
text-align: center;
|
|
}
|
|
|
|
.mission h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mission-text {
|
|
font-size: 1.2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem;
|
|
line-height: 1.8;
|
|
font-family: var(--font-body);
|
|
text-transform: none;
|
|
}
|
|
|
|
.mission-text--secondary {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.values-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
max-width: 1000px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.value-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
padding: 2rem;
|
|
border-radius: var(--radius-md);
|
|
text-align: center;
|
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
|
border: 1px solid var(--line);
|
|
border-top: 3px solid var(--or-oki);
|
|
}
|
|
|
|
.value-card:hover {
|
|
transform: translateY(-4px);
|
|
border-top-color: var(--vert-oki);
|
|
}
|
|
|
|
.value-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.value-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/* Hosting Services Section */
|
|
.hosting {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-oki);
|
|
}
|
|
|
|
.hosting h2 {
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hosting-banner {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-top: 4px solid var(--or-oki);
|
|
border-radius: var(--radius-md);
|
|
padding: 2.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hosting-banner h3 {
|
|
color: var(--or-oki);
|
|
font-size: 1.6rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hosting-banner p {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.hosting-features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.25rem;
|
|
margin: 2rem 0;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.hosting-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.hosting-feature span {
|
|
color: var(--vert-oki);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.services-offerings h3 {
|
|
text-align: center;
|
|
color: var(--or-oki);
|
|
margin: 3rem 0 2rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.offer-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.offer-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-left: 4px solid var(--vert-oki);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
}
|
|
|
|
.offer-card--hosting {
|
|
border-left-color: var(--rouge-oki);
|
|
}
|
|
|
|
.offer-card--fediverse {
|
|
border-left-color: var(--or-oki);
|
|
}
|
|
|
|
.offer-card h4 {
|
|
color: var(--vert-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.offer-card--hosting h4 {
|
|
color: var(--rouge-oki);
|
|
}
|
|
|
|
.offer-card--fediverse h4 {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.offer-card p {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.offer-intro {
|
|
margin-bottom: 1rem;
|
|
font-size: 0.95rem;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.offer-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-bottom: 1.5rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.offer-list li {
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.offer-list li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.55em;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--vert-oki);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.offer-card--hosting .offer-list li::before {
|
|
background: var(--rouge-oki);
|
|
}
|
|
|
|
.offer-card--fediverse .offer-list li::before {
|
|
background: var(--or-oki);
|
|
}
|
|
|
|
.offer-tagline {
|
|
color: var(--or-oki);
|
|
font-weight: bold;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.hosting-note {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-left: 4px solid var(--or-oki);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.hosting-note h4 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.hosting-note ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.hosting-note li {
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.hosting-note li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.55em;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--or-oki);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.hosting-why {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.hosting-why h4 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.hosting-why p {
|
|
max-width: 800px;
|
|
margin: 0 auto 2rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Partners Section */
|
|
.partners {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.partners h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.partners-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
max-width: 900px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.partner-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-top: 4px solid var(--turquoise-caraibes);
|
|
border-radius: var(--radius-md);
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.partner-card:hover {
|
|
transform: translateY(-4px);
|
|
border-top-color: var(--or-oki);
|
|
}
|
|
|
|
.partner-logo-container {
|
|
width: 130px;
|
|
height: 130px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-radius: var(--radius-md);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.partner-logo {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.partner-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.partner-description {
|
|
line-height: 1.6;
|
|
margin-bottom: 1.5rem;
|
|
flex-grow: 1;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.partner-link {
|
|
color: var(--or-oki);
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-family: var(--font-body);
|
|
transition: gap 0.2s ease;
|
|
}
|
|
|
|
.partner-card:hover .partner-link {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Support Section */
|
|
.support {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
text-align: center;
|
|
}
|
|
|
|
.support h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.support-lede {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 1rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.support-lede-secondary {
|
|
font-size: 1.05rem;
|
|
margin-bottom: 3rem;
|
|
opacity: 0.85;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.donation-panels {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.support-panel {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.support-panel h3 {
|
|
margin-bottom: 1.5rem;
|
|
text-align: center;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.support-panel--primary {
|
|
border-top: 4px solid var(--or-oki);
|
|
}
|
|
|
|
.support-panel--primary h3 {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.support-panel--secondary {
|
|
border-top: 4px solid var(--vert-oki);
|
|
}
|
|
|
|
.support-panel--secondary h3 {
|
|
color: var(--vert-oki);
|
|
}
|
|
|
|
.donation-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.donation-form-label {
|
|
display: block;
|
|
margin-bottom: 1rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.alt-donation-section {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.alt-donation-title {
|
|
text-align: center;
|
|
color: var(--or-oki);
|
|
margin-bottom: 2rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.alt-donation-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.alt-donation-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 2rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-top: 3px solid var(--card-accent, var(--or-oki));
|
|
border-radius: var(--radius-md);
|
|
text-decoration: none;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.alt-donation-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.alt-donation-card--liberapay {
|
|
--card-accent: #F2B336;
|
|
}
|
|
|
|
.alt-donation-card--kofi {
|
|
--card-accent: #FF5E5B;
|
|
}
|
|
|
|
.alt-donation-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.alt-donation-card h4 {
|
|
color: var(--card-accent, var(--or-oki));
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.alt-donation-card p {
|
|
color: var(--blanc-creme);
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.security-note {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
padding: 1.5rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.security-note p {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.security-note a {
|
|
color: var(--or-oki);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Contact Section */
|
|
.contact {
|
|
padding: 4rem 2rem;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.contact h2 {
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
color: var(--or-oki);
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.contact-lede {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.contact-lede a {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.contact-card {
|
|
text-align: center;
|
|
}
|
|
|
|
.contact-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.contact-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.contact-links a {
|
|
color: var(--blanc-creme);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.contact-links a:hover {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 2.5rem 2rem;
|
|
background: var(--noir-oki);
|
|
text-align: center;
|
|
border-top: 1px solid var(--line);
|
|
position: relative;
|
|
}
|
|
|
|
footer .flag-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.footer-name {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
font-family: var(--font-display);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-content p {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-meta {
|
|
margin-top: 1rem;
|
|
font-size: 0.9rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.footer-legal {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.footer-legal a {
|
|
color: var(--or-oki);
|
|
text-decoration: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.footer-legal a:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.footer-socials {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.social-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
color: var(--or-oki);
|
|
text-decoration: none;
|
|
transition: transform 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
.social-link svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.social-link:hover {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.footer-socials {
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.social-link {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
}
|
|
}
|
|
|
|
/* Donation Styles */
|
|
.donation-amount {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1.1rem;
|
|
background: rgba(253, 184, 19, 0.08);
|
|
border: 2px solid var(--or-oki);
|
|
color: var(--blanc-creme);
|
|
text-decoration: none;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 700;
|
|
font-size: 1.05rem;
|
|
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
|
|
cursor: pointer;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.donation-amount:hover {
|
|
background: var(--or-oki);
|
|
color: var(--noir-oki);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.donation-amount.monthly {
|
|
background: rgba(0, 214, 108, 0.08);
|
|
border-color: var(--vert-oki);
|
|
}
|
|
|
|
.donation-amount.monthly:hover {
|
|
background: var(--vert-oki);
|
|
color: var(--blanc-creme);
|
|
}
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input[type="number"]:focus {
|
|
outline: none;
|
|
border-color: var(--or-oki);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Custom Donation Form */
|
|
.custom-donation-form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
max-width: 350px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.custom-amount-input {
|
|
padding: 0.8rem;
|
|
border: 2px solid var(--or-oki);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--blanc-creme);
|
|
border-radius: var(--radius-sm);
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.custom-amount-input-monthly {
|
|
border-color: var(--vert-oki);
|
|
}
|
|
|
|
.currency-symbol {
|
|
color: var(--blanc-creme);
|
|
font-size: 1rem;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.custom-donation-btn {
|
|
padding: 0.8rem 1.2rem;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.custom-donation-btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.custom-donation-btn-primary {
|
|
background: var(--or-oki);
|
|
color: var(--noir-oki);
|
|
}
|
|
|
|
.custom-donation-btn-secondary {
|
|
background: var(--vert-oki);
|
|
color: var(--blanc-creme);
|
|
}
|
|
|
|
/* Scroll Animations */
|
|
.fade-in-element {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
|
|
.fade-in-element.animate-in {
|
|
animation: fadeInUp 0.6s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.nav-container {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.theme-toggle {
|
|
padding: 0.4rem 0.6rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-dropdown-trigger {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.dropdown-caret {
|
|
display: none;
|
|
}
|
|
|
|
.nav-dropdown {
|
|
position: static;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: none;
|
|
margin: 0.25rem 0 0.5rem 1rem;
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-dropdown a {
|
|
padding: 0.4rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.services-grid,
|
|
.project-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Custom Donation Form Mobile */
|
|
.custom-donation-form {
|
|
gap: 0.4rem;
|
|
padding: 0 0.5rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.custom-amount-input {
|
|
padding: 0.6rem 0.5rem;
|
|
font-size: 0.9rem;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.currency-symbol {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.custom-donation-btn {
|
|
padding: 0.6rem 0.8rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 380px) {
|
|
/* Very small screens */
|
|
.custom-donation-form {
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.custom-amount-input {
|
|
padding: 0.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.custom-donation-btn {
|
|
padding: 0.5rem 0.6rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
/* Publics Section */
|
|
.publics {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-oki);
|
|
}
|
|
|
|
.publics h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.publics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.public-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-top: 4px solid var(--turquoise-caraibes);
|
|
border-radius: var(--radius-md);
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.public-card:hover {
|
|
transform: translateY(-4px);
|
|
border-top-color: var(--or-oki);
|
|
}
|
|
|
|
.public-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.public-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.public-description {
|
|
margin-bottom: 2rem;
|
|
line-height: 1.6;
|
|
flex-grow: 1;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.public-benefits {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: var(--radius-sm);
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
text-align: left;
|
|
border: 1px solid var(--line);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.public-benefits h4 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.public-benefits ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.public-benefits li {
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.public-cta {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.publics-footer {
|
|
text-align: center;
|
|
margin-top: 4rem;
|
|
padding: 2.5rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--line);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.publics-footer p:first-child {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.publics-footer p:last-child {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* FAQ Section */
|
|
.faq {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.faq h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.faq-container {
|
|
max-width: 800px;
|
|
margin: 3rem auto;
|
|
}
|
|
|
|
.faq-item {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-left: 3px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.faq-item:hover {
|
|
border-left-color: var(--or-oki);
|
|
}
|
|
|
|
.faq-item.active {
|
|
border-left-color: var(--or-oki);
|
|
}
|
|
|
|
.faq-question {
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
color: var(--blanc-creme);
|
|
padding: 1.5rem;
|
|
text-align: left;
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.faq-question:hover {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.faq-icon {
|
|
font-size: 1.4rem;
|
|
color: var(--or-oki);
|
|
transition: transform 0.2s ease;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.faq-item.active .faq-icon {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.faq-answer {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.faq-item.active .faq-answer {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.faq-answer p {
|
|
padding: 0 1.5rem 1.5rem 1.5rem;
|
|
line-height: 1.8;
|
|
opacity: 0.85;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.faq-footer {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.faq-footer p {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Engagement Section */
|
|
.engagement {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-oki);
|
|
}
|
|
|
|
.engagement h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.engagement-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
.engagement-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-top: 4px solid var(--or-oki);
|
|
border-radius: var(--radius-md);
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.engagement-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.engagement-icon {
|
|
font-size: 2.25rem;
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.engagement-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.engagement-card p {
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.6;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
/* Responsive adjustments for new sections */
|
|
@media (max-width: 768px) {
|
|
.publics-grid,
|
|
.engagement-options {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.publics h2,
|
|
.faq h2,
|
|
.engagement h2 {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
/* DJANGOKAM Section */
|
|
.djangokam {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
text-align: center;
|
|
}
|
|
|
|
.djangokam-surtitre {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--vert-oki);
|
|
margin-bottom: 0.5rem;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.djangokam h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.djangokam-portrait {
|
|
width: 220px;
|
|
height: 220px;
|
|
object-fit: cover;
|
|
border-radius: var(--radius-md);
|
|
border: 3px solid var(--or-oki);
|
|
margin: 1rem auto 2rem;
|
|
display: block;
|
|
}
|
|
|
|
.djangokam-highlight {
|
|
max-width: 800px;
|
|
margin: 2rem auto;
|
|
padding: 2rem;
|
|
text-align: left;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
font-family: var(--font-body);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-left: 4px solid var(--or-oki);
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
}
|
|
|
|
.djangokam-histoire-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 2.5rem;
|
|
align-items: center;
|
|
max-width: 1000px;
|
|
margin: 0 auto 3rem;
|
|
}
|
|
|
|
.djangokam-histoire {
|
|
text-align: left;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.djangokam-histoire p {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.djangokam-duo,
|
|
.djangokam-clip {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.djangokam-duo a,
|
|
.djangokam-clip a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: inline-block;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.djangokam-duo a:hover,
|
|
.djangokam-clip a:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.djangokam-duo img,
|
|
.djangokam-clip img {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
border-radius: var(--radius-md);
|
|
border: 2px solid var(--or-oki);
|
|
}
|
|
|
|
.djangokam-duo figcaption,
|
|
.djangokam-clip figcaption {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.djangokam-duo a:hover figcaption,
|
|
.djangokam-clip a:hover figcaption {
|
|
opacity: 1;
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.djangokam-clips {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 2.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.djangokam-facts {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.djangokam-fact-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-left: 3px solid var(--vert-oki);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.djangokam-fact-card:nth-child(2n) {
|
|
border-left-color: var(--rouge-oki);
|
|
}
|
|
|
|
.djangokam-fact-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.djangokam-fact-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.djangokam-fact-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.djangokam-instrument {
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
opacity: 0.85;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.djangokam-instrument a,
|
|
.djangokam-fact-card p a {
|
|
color: var(--or-oki);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.djangokam-instrument a:hover,
|
|
.djangokam-fact-card p a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.djangokam-buttons {
|
|
justify-content: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.djangokam-presse {
|
|
font-size: 0.9rem;
|
|
opacity: 0.7;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.djangokam-presse a {
|
|
color: var(--or-oki);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.djangokam-presse a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.djangokam h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.djangokam-portrait {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
|
|
.djangokam-histoire-wrapper {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.djangokam-duo img,
|
|
.djangokam-clip img {
|
|
max-width: 220px;
|
|
}
|
|
|
|
.djangokam-facts {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.djangokam-buttons {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* Press page */
|
|
.press-hero {
|
|
padding: 9rem 2rem 3rem;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.press-hero h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.press-lede {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
opacity: 0.85;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.press-facts {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.press-facts h2,
|
|
.press-visuals h2,
|
|
.press-links h2,
|
|
.press-contact h2 {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.press-facts-list {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.press-fact {
|
|
display: grid;
|
|
grid-template-columns: 160px 1fr;
|
|
gap: 1rem;
|
|
padding: 1rem 0;
|
|
border-bottom: 1px solid var(--line);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.press-fact-label {
|
|
color: var(--or-oki);
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.press-visuals {
|
|
padding: 4rem 2rem;
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.press-visuals-intro {
|
|
text-align: center;
|
|
max-width: 700px;
|
|
margin: 0 auto 2.5rem;
|
|
opacity: 0.85;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.press-visual-grid {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.press-visual a {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.press-visual img {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.press-visual-caption {
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.85rem;
|
|
opacity: 0.75;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.press-visual-pdf-link {
|
|
display: inline-block;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.8rem;
|
|
font-family: var(--font-body);
|
|
text-decoration: none;
|
|
color: var(--or-oki);
|
|
border-bottom: 1px solid currentColor;
|
|
}
|
|
|
|
.press-visuals-pdf {
|
|
text-align: center;
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.press-links {
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.press-links-list {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.press-links-list a {
|
|
display: block;
|
|
color: var(--blanc-creme);
|
|
text-decoration: none;
|
|
padding: 0.9rem 1.25rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--line);
|
|
border-left: 4px solid var(--vert-oki);
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-body);
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.press-links-list a:hover {
|
|
border-color: var(--vert-oki);
|
|
}
|
|
|
|
.press-contact {
|
|
padding: 4rem 2rem 6rem;
|
|
text-align: center;
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.press-contact-text {
|
|
max-width: 600px;
|
|
margin: 0 auto 1.5rem;
|
|
opacity: 0.85;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.press-fact {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.25rem;
|
|
}
|
|
}
|