/* ========================================================= GNT — Galsen Next Technologies Design System — Brand Identity & Website Blueprint v1.0 ========================================================= */ :root{ /* --- Palette officielle (page 12 du blueprint) --- */ --c-white: #FFFFFF; --c-ink: #0F1B2D; /* Noir Ink — titres, signature */ --c-grey: #3B4658; /* Dark Grey — corps de texte */ --c-azure: #1E2E4A; /* Azure Blue — structure / UI / confiance */ --c-beige: #FBF7EF; /* Beige — fond éditorial, chaleur */ --c-gold: #C9A96E; /* Accent Gold — usage strict, 1-2 apparitions max */ --c-gold-dim: rgba(201,169,110,.14); /* WhatsApp */ --c-whatsapp: #25D366; --c-whatsapp-d: #1EBE59; /* Surfaces / texte (mode clair) */ --bg: var(--c-white); --bg-soft: var(--c-beige); --bg-dark: var(--c-ink); --bg-dark-2: var(--c-azure); --text: var(--c-ink); --text-soft: var(--c-grey); --text-invert: var(--c-white); --border: rgba(15,27,45,.10); --border-soft: rgba(15,27,45,.06); /* Typo (page 13) */ --font-primary: 'Manrope', sans-serif; /* titres, hero, chiffres clés */ --font-secondary: 'Inter', sans-serif; /* corps de texte, UI, formulaires */ /* Rythme / rayon */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --container: 1200px; /* Transitions "Apple-like" (page 19) */ --ease: cubic-bezier(.22,.61,.36,1); --dur-fast: .2s; --dur-med: .4s; --dur-slow: .7s; } /* Dark mode : bascule via classe .dark sur (page 19 — dark mode auto + manuel) */ html.dark{ --bg: var(--c-ink); --bg-soft: #16233A; --bg-dark: #070D16; --bg-dark-2: #0B1424; --text: var(--c-white); --text-soft: #AEB9CC; --text-invert: var(--c-ink); --border: rgba(255,255,255,.10); --border-soft: rgba(255,255,255,.06); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } html, body{ background:var(--bg); color:var(--text); } body{ font-family:var(--font-secondary); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease); overflow-x:hidden; } h1,h2,h3,h4,h5, .font-primary{ font-family:var(--font-primary); letter-spacing:-0.02em; font-weight:800; color:var(--text); } ::selection{ background:var(--c-gold); color:var(--c-ink); } /* Focus visible cohérent (accessibilité) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--c-gold); outline-offset:3px; border-radius:4px; } .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } @media (max-width:640px){ .container{ padding:0 20px; } } /* --- Reveal on scroll (page 19 : reveal sections à l'entrée du viewport) --- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); will-change:opacity, transform; } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal-stagger > * { transition-delay:calc(var(--stagger-i, 0) * 90ms); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } /* --- Accent gold souligné (jamais en remplissage) --- */ .dot-accent{ color:var(--c-gold); } .underline-accent{ position:relative; } .underline-accent::after{ content:""; position:absolute; left:0; bottom:-6px; width:56px; height:3px; background:var(--c-gold); border-radius:2px; } /* --- Boutons --- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.95rem 1.7rem; font-family:var(--font-secondary); font-weight:600; font-size:.95rem; border-radius:12px; border:1.5px solid transparent; cursor:pointer; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space:nowrap; text-decoration:none; } .btn:active{ transform:scale(.97); } .btn-primary{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); } html.dark .btn-primary{ background:#fff; color:var(--c-ink); border-color:#fff; } .btn-primary:hover{ box-shadow:0 10px 26px -8px rgba(15,27,45,.45); transform:translateY(-2px); } .btn-outline{ background:transparent; color:var(--text); border-color:var(--border); } .btn-outline:hover{ border-color:var(--c-ink); transform:translateY(-2px); } html.dark .btn-outline:hover{ border-color:#fff; } .btn-whatsapp{ background:var(--c-whatsapp); color:#fff; border-color:var(--c-whatsapp); } .btn-whatsapp:hover{ background:var(--c-whatsapp-d); box-shadow:0 10px 30px -8px rgba(37,211,102,.55); transform:translateY(-2px); } .btn-lg{ padding:1.15rem 2.1rem; font-size:1.02rem; } .btn-block{ width:100%; } /* --- Nav --- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid transparent; transition:border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease); } .site-header.scrolled{ border-bottom-color:var(--border); } /* --- Cards --- */ .card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px -18px rgba(15,27,45,.25); border-color:var(--c-gold); } /* --- Badge / eyebrow --- */ .eyebrow{ font-family:var(--font-secondary); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold); } /* --- WhatsApp Floating Button --- */ .wa-float{ position:fixed; right:20px; bottom:20px; z-index:90; width:60px; height:60px; border-radius:50%; background:var(--c-whatsapp); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); animation:wa-pulse 2.6s ease-in-out infinite; } .wa-float:hover{ transform:scale(1.08); box-shadow:0 16px 38px -6px rgba(37,211,102,.75); } .wa-float svg{ width:30px; height:30px; } @keyframes wa-pulse{ 0%,100%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); } 50%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 12px rgba(37,211,102,0); } } /* --- Accordion FAQ --- */ .faq-item{ border-bottom:1px solid var(--border); } .faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem 0; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--font-primary); font-weight:700; font-size:1.05rem; color:var(--text); } .faq-icon{ flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; transition:transform var(--dur-med) var(--ease), background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .faq-item[open] .faq-icon{ transform:rotate(45deg); background:var(--c-gold); border-color:var(--c-gold); } .faq-answer{ padding-bottom:1.5rem; color:var(--text-soft); max-width:70ch; } .faq-item summary{ list-style:none; } .faq-item summary::-webkit-details-marker{ display:none; } /* --- Skip link (accessibilité) --- */ .skip-link{ position:absolute; left:-999px; top:auto; background:var(--c-ink); color:#fff; padding:.85rem 1.4rem; border-radius:0 0 10px 0; z-index:200; font-weight:600; } .skip-link:focus{ left:0; top:0; } /* --- Marquee logos / marques inspirantes --- */ .marquee-track{ display:flex; gap:3rem; animation:marquee 26s linear infinite; width:max-content; } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* --- Utilities --- */ .text-soft{ color:var(--text-soft); } .bg-soft{ background:var(--bg-soft); } .bg-dark{ background:var(--bg-dark); color:#fff; } .bg-azure{ background:var(--bg-dark-2); color:#fff; } .divider{ height:1px; background:var(--border); border:none; } img{ max-width:100%; display:block; } /* Placeholder visuel pour contenu à confirmer */ .tbd{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-gold); background:var(--c-gold-dim); border:1px dashed var(--c-gold); border-radius:6px; padding:.15rem .55rem; } /* Scrollbar discrète */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; } ::-webkit-scrollbar-thumb:hover{ background:var(--c-gold); } /* Loader initial */ #page-loader{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .5s var(--ease), visibility .5s var(--ease); } #page-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; } .loader-logo{ font-family:var(--font-primary); font-weight:800; font-size:2rem; letter-spacing:.05em; color:var(--text); opacity:0; animation:loader-fade 1.1s var(--ease) forwards; } @keyframes loader-fade{ 0%{ opacity:0; letter-spacing:.3em; } 100%{ opacity:1; letter-spacing:.05em; } }