/* ========================================================================== Wapixi · theme_d — « SaaS Product, dark accents & glow » tokens.css — source de vérité unique : couleurs, typo, espaces, motion. Aucune valeur brute ne doit apparaître ailleurs : tout passe par var(). ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. FONDS & SURFACES --------------------------------------------------------------------- */ --bg-light: #F5F8FD; /* fond clair, gris bleuté */ --bg-light-2: #EAF0FA; /* fond clair alternatif (bandes) */ --bg-dark: #060B18; /* bleu quasi-noir, sections sombres */ --bg-darkest: #03060F; /* footer, cran en dessous */ --surface-dark: #0C1526; /* card sombre — départ du dégradé */ --surface-dark-2: #111E36; /* card sombre — arrivée du dégradé */ --surface-dark-3: #16243F; /* état hover / surface surélevée */ --surface-light: #FFFFFF; /* card claire */ /* --------------------------------------------------------------------- 2. COULEURS DE MARQUE --------------------------------------------------------------------- */ --blue-500: #1B6EF3; /* bleu électrique, couleur signature */ --blue-400: #4A9BFF; --blue-300: #93C1FF; --blue-700: #0076DF; --indigo: #5B4BE8; /* violet-bleu, 2e point de dégradé */ --indigo-400: #7A6DF0; --cyan: #29D3F0; /* accent lumineux ponctuel, glow */ /* --------------------------------------------------------------------- 3. TEXTE Sur fond sombre : blanc pour les titres, bleu-gris pour le secondaire. Contrastes vérifiés sur --bg-dark (#060B18) : #FFFFFF ≈ 19.6:1 · #C9D6EA ≈ 13.1:1 · #93A4C0 ≈ 7.3:1 --------------------------------------------------------------------- */ --on-dark: #FFFFFF; --on-dark-2: #C9D6EA; --on-dark-3: #93A4C0; --on-dark-4: #6B7C99; /* décoratif uniquement, jamais < 16px */ /* Sur fond clair — #0B1220 sur #F5F8FD ≈ 16.8:1 · #41506A ≈ 7.6:1 */ --ink: #0B1220; --ink-2: #41506A; --ink-3: #64748F; /* --------------------------------------------------------------------- 4. BORDURES & TRAITS --------------------------------------------------------------------- */ --line-dark: rgba(255,255,255,.09); --line-dark-strong: rgba(255,255,255,.16); --line-light: rgba(11,18,32,.10); --line-light-strong: rgba(11,18,32,.18); /* --------------------------------------------------------------------- 5. DÉGRADÉS --gradient-text est le marqueur identitaire du site : réservé aux FONDS SOMBRES (le stop de départ #93c1ff est trop clair pour du blanc). Sur fond clair, on ne dégrade PAS le texte : voir la classe .accent dans base.css (aplat bleu + filet tiré). --------------------------------------------------------------------- */ --gradient-text: linear-gradient(96deg, #93c1ff 0%, #65a1ff 40%, #0076df 100%); /* Surfaces de marque — dégradé DANS LA FAMILLE BLEUE uniquement. Le bleu → violet a été retiré : sur du texte comme sur un bouton, c'est devenu la signature visuelle des interfaces générées automatiquement. Un dégradé bleu clair → bleu profond lit comme de la lumière sur une surface, pas comme un effet. L'indigo reste réservé aux orbes de fond, où il joue son rôle de profondeur atmosphérique. */ --gradient-brand: linear-gradient(140deg, #2E85FF 0%, #1B6EF3 46%, #114FBF 100%); --gradient-brand-hot: linear-gradient(140deg, #4A9BFF 0%, #2D7DFA 46%, #1B6EF3 100%); --gradient-cyan: linear-gradient(135deg, #29D3F0 0%, #1B6EF3 100%); /* Boutons primaires : aplat bleu + filet lumineux intérieur en haut. C'est le traitement des vrais produits SaaS — la profondeur vient de l'ombre et du liseré, pas d'un dégradé bicolore. */ --btn-primary: #1B6EF3; --btn-primary-hover: #2E85FF; --btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 1px 2px rgba(3,6,15,.34), 0 10px 26px -12px rgba(27,110,243,.9); /* Bordure 1px en dégradé (appliquée via masque sur pseudo-élément) */ --gradient-border: linear-gradient(160deg, rgba(147,193,255,.32) 0%, rgba(147,193,255,.05) 38%, rgba(91,75,232,.14) 100%); --gradient-border-hot: linear-gradient(160deg, rgba(74,155,255,.85) 0%, rgba(41,211,240,.30) 45%, rgba(91,75,232,.65) 100%); /* Séparateur lumineux horizontal */ --gradient-rule: linear-gradient(90deg, transparent 0%, rgba(74,155,255,.45) 50%, transparent 100%); /* --------------------------------------------------------------------- 6. GLOWS & OMBRES --------------------------------------------------------------------- */ --glow-blue-sm: 0 0 0 1px rgba(74,155,255,.18), 0 8px 26px -10px rgba(27,110,243,.55); --glow-blue: 0 10px 40px -12px rgba(27,110,243,.65); --glow-blue-lg: 0 24px 80px -24px rgba(27,110,243,.75); --glow-cyan: 0 0 34px -8px rgba(41,211,240,.60); --shadow-card: 0 1px 2px rgba(3,6,15,.40), 0 18px 48px -28px rgba(3,6,15,.90); --shadow-deep: 0 30px 90px -30px rgba(3,6,15,.95); --shadow-light: 0 1px 2px rgba(11,18,32,.05), 0 14px 40px -22px rgba(11,18,32,.22); /* Inner-glow discret en haut des cards sombres */ --inner-top: inset 0 1px 0 rgba(255,255,255,.06); /* --------------------------------------------------------------------- 7. TYPOGRAPHIE Display : Bricolage Grotesque (variable, axes opsz 12..96 / wght 400..800) → l'axe optique se règle tout seul via font-optical-sizing: auto, les gros titres gagnent des contreformes plus serrées. Corps : Instrument Sans · Technique : IBM Plex Mono --------------------------------------------------------------------- */ --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, sans-serif; --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Échelle fluide — clamp(min, préféré, max) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); --text-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.34rem + 0.80vw, 2rem); --text-3xl: clamp(1.875rem, 1.60rem + 1.35vw, 2.75rem); --text-4xl: clamp(2.25rem, 1.80rem + 2.25vw, 3.5rem); --text-display: clamp(2.75rem, 1.90rem + 4.10vw, 5.25rem); --text-mega: clamp(3.5rem, 2.10rem + 6.80vw, 8rem); /* gros chiffres */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.5; --lh-loose: 1.68; /* Bricolage Grotesque a des chasses plus généreuses que Space Grotesk : on relâche un peu l'approche négative pour ne pas coller les jambages. */ --ls-mega: -0.038em; --ls-display: -0.028em; --ls-tight: -0.02em; --ls-normal: -0.01em; --ls-wide: 0.02em; --ls-eyebrow: 0.14em; --measure: 66ch; --measure-sm: 52ch; /* --------------------------------------------------------------------- 8. ESPACES — échelle 4pt --------------------------------------------------------------------- */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4.5rem; /* 72px */ --space-4xl: 7rem; /* 112px */ /* Rythme vertical des sections (fluide) */ --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem); --section-y-sm: clamp(3rem, 2rem + 4vw, 5.5rem); --shell: 1240px; /* largeur max du contenu */ --shell-narrow: 900px; --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem); /* --------------------------------------------------------------------- 9. RAYONS --------------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; /* --------------------------------------------------------------------- 10. MOTION — trois easings nommés, jamais l'easing par défaut --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-slower: 700ms; --dur-morph: 560ms; /* transition barre → pilule du header */ /* --------------------------------------------------------------------- 11. EFFETS — orbes, grain, grille Les valeurs de blur sont surchargées en media query mobile. --------------------------------------------------------------------- */ --orb-blur: 120px; --orb-opacity: 0.42; --grain-opacity: 0.055; --grid-opacity: 0.055; --grid-size: 64px; /* Overlay de grain — feTurbulence encodé en data-URI, généré une fois */ --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"); /* --------------------------------------------------------------------- 12. DIVERS --------------------------------------------------------------------- */ --header-h: 74px; --z-grain: 2; --z-dock: 60; /* CTA flottant mobile — sous le header et le drawer */ --z-header: 70; --z-mega: 65; --z-drawer: 80; --z-modal: 90; --focus-ring: var(--cyan); /* --------------------------------------------------------------------- 13. ACCENT ÉCO — famille verte Ce n'est PAS une seconde couleur de marque : elle est réservée aux écrans « numérique responsable » (page éco-conception). Utilisée ailleurs, elle ferait perdre au bleu signature son statut de repère. Le vert choisi est un vert-émeraude froid, pas un vert « nature » : il cohabite avec le bleu #1B6EF3 sans jurer, et évite le cliché feuille-verte / recyclage. Contrastes sur --bg-dark (#060B18) : #B6F2DC ≈ 15:1 · #6FE3B6 ≈ 12:1 · #34D399 ≈ 10:1 Sur --bg-light (#F5F8FD) : #0B6E5A ≈ 5.8:1 --------------------------------------------------------------------- */ --eco-200: #B6F2DC; --eco-300: #6FE3B6; --eco-400: #34D399; --eco-500: #10B981; /* aplat de référence */ --eco-600: #0B6E5A; /* seule teinte lisible sur fond clair */ --eco-700: #08543F; /* Même mécanique que --gradient-text : réservé aux fonds sombres. */ --gradient-eco-text: linear-gradient(96deg, #B6F2DC 0%, #6FE3B6 40%, #10B981 100%); --gradient-eco: linear-gradient(140deg, #34D399 0%, #10B981 46%, #0A6A57 100%); /* Bouton éco — aplat + filet intérieur, comme --btn-primary. */ --btn-eco: #0E9E75; --btn-eco-hover: #12B489; --btn-eco-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(3,6,15,.34), 0 10px 26px -12px rgba(16,185,129,.9); --glow-eco: 0 10px 40px -12px rgba(16,185,129,.60); --line-eco: rgba(52,211,153,.30); --line-eco-strong: rgba(52,211,153,.55); --surface-eco: rgba(16,185,129,.10); } /* Allègement mobile : moins de blur, orbes plus discrets, grille plus dense. Les blurs de 120px sont le poste de coût n°1 sur GPU mobile. */ @media (max-width: 767px) { :root { --orb-blur: 64px; --orb-opacity: 0.34; --grain-opacity: 0.045; --grid-size: 44px; --header-h: 64px; } }