/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 * macrostructure: Bento Grid · nav: N5 Floating pill · footer: Ft5 Statement * tone: technical-confident · genre: modern-minimal * theme: studied-DNA (source: image, référence Pinterest « Experience the future of Solar Power ») * paper oklch(99% 0.002 268) · light band, neutral-cool * accent oklch(68.8% 0.159 152) · green, footprint ≤5% (jamais en aplat de bouton) * ink oklch(33% 0.094 268) · navy, porte les actions, comme le quasi-noir de la source * display + body: Plus Jakarta Sans (split par graisse) · labels: JetBrains Mono * axes: light / soft-geometric-sans / chromatic-green * studied: yes · brand-override: #35B668 + #213165 (couleurs de marque 4M Solar) */ :root { /* ── Marque ──────────────────────────────────────────────────────────── Les deux seules couleurs venues du logo. Tout le reste en dérive. */ --brand-green: oklch(68.8% 0.159 152.3); /* #35B668 */ --brand-navy: oklch(33.0% 0.094 268.3); /* #213165 */ /* ── Surfaces ─────────────────────────────────────────────────────── */ --color-paper: oklch(99.2% 0.002 268); --color-paper-2: oklch(96.6% 0.004 268); /* bande de section alternée */ --color-paper-3: oklch(93.4% 0.006 268); /* survol, séparateurs pleins */ --color-paper-sunk: oklch(90.5% 0.008 268); /* creux, skeletons */ /* ── Encre ────────────────────────────────────────────────────────── */ --color-ink: var(--brand-navy); --color-ink-2: oklch(46.0% 0.048 268); /* texte secondaire, 7.2:1 sur paper */ --color-ink-3: oklch(57.5% 0.030 268); /* légendes, 4.6:1 sur paper */ --color-ink-on-dark: oklch(99.0% 0.002 268); --color-ink-on-dark-2: oklch(82.0% 0.020 268); /* ── Accent ─────────────────────────────────────────────────────────── --color-accent est décoratif (jauges, badges verre, pastilles). --color-accent-text est le seul autorisé pour du texte sur fond clair. */ --color-accent: var(--brand-green); --color-accent-text: oklch(51.5% 0.140 152.3); /* 4.7:1 sur paper */ --color-accent-soft: oklch(94.5% 0.045 152.3); --color-accent-line: oklch(84.0% 0.090 152.3); /* ── Sémantique ───────────────────────────────────────────────────── */ --color-success: oklch(51.5% 0.140 152.3); --color-success-soft: oklch(94.5% 0.045 152.3); --color-danger: oklch(52.0% 0.180 27); --color-danger-soft: oklch(95.0% 0.035 27); --color-warning: oklch(58.0% 0.140 75); --color-warning-soft: oklch(95.5% 0.045 75); /* ── Traits ───────────────────────────────────────────────────────── */ --color-rule: oklch(89.0% 0.008 268); --color-rule-strong: oklch(80.0% 0.014 268); --rule-hairline: 1px; --rule-medium: 2px; /* ── Verre, le traitement signature de la référence ──────────────── */ /* Une surface se lit comme du verre à trois conditions, pas une seule : 1. elle laisse passer, donc l'alpha reste bas (à 0,82 on voit du blanc) ; 2. elle floute et sature ce qui est derrière ; 3. elle porte un LISERÉ CLAIR sur son bord haut, la réfraction. C'est le point 3 qui fait basculer la perception. Sans lui, on a juste un rectangle translucide. */ --glass-bg: oklch(99% 0.002 268 / 0.58); --glass-bg-strong: oklch(99% 0.002 268 / 0.70); /* commandes : contraste du libellé */ --glass-bg-dark: oklch(30% 0.094 268 / 0.52); --glass-border: oklch(100% 0 0 / 0.42); --glass-blur: 22px; --glass-saturate: 1.8; /* Réfraction : ligne claire en haut, ombre portée courte en bas. */ --glass-highlight: inset 0 1px 0 oklch(100% 0 0 / 0.65); --glass-shadow: var(--glass-highlight), 0 8px 30px oklch(30% 0.09 268 / 0.20); /* Variantes posées sur du PAPIER et non sur une photo. Le blanc translucide seul n'y produit rien : il faut un liseré encré et une ombre courte pour que la surface se détache. Le flou ne prend son sens que lorsque du contenu passe dessous, d'où son usage sur la nav collante. */ --glass-bg-paper: oklch(99% 0.002 268 / 0.62); --glass-bg-paper-alt: oklch(99% 0.002 268 / 0.50); --glass-border-ink: oklch(33% 0.094 268 / 0.10); --glass-shadow-soft: var(--glass-highlight), 0 2px 14px oklch(33% 0.094 268 / 0.10); /* ── Focus ────────────────────────────────────────────────────────── */ --color-focus: oklch(51.5% 0.140 152.3); --focus-ring: 3px; --focus-gap: 2px; /* ── Typographie ──────────────────────────────────────────────────── */ /* Montserrat porte les titres : géométrique, large, ses capitales et ses chiffres ont une assise que Jakarta n'a pas. Jakarta reste sur le corps de texte, plus humaniste donc plus lisible en petit corps. Le contraste entre les deux tient à la largeur et à l'axe, pas au style : c'est ce qui évite l'effet « deux polices qui se ressemblent ». */ --font-display: 'Montserrat', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-display: 800; --text-display: clamp(2.5rem, 1.35rem + 5.1vw, 4.75rem); --text-display-s: clamp(2.05rem, 1.25rem + 3.6vw, 3.5rem); --text-4xl: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); --text-3xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); --text-2xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.625rem); --text-xl: 1.1875rem; --text-lg: 1.0625rem; --text-base: 1rem; --text-sm: 0.9375rem; --text-xs: 0.8125rem; --text-2xs: 0.75rem; --leading-tight: 1.06; --leading-snug: 1.22; --leading-normal: 1.5; --leading-relaxed: 1.68; --tracking-display: -0.035em; --tracking-tight: -0.018em; --tracking-normal: 0; --tracking-label: 0.02em; --tracking-caps: 0.08em; --measure: 66ch; --measure-tight: 46ch; /* ── Espacement, échelle 4 pt ────────────────────────────────────── */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 8rem; /* 128 */ /* Rythme vertical ASYMÉTRIQUE : plus d'air au-dessus d'une section qu'en dessous. Deux sections qui se suivent additionnent leurs rembourrages ; avec 7rem de chaque côté, cela faisait 14rem (224 px) de vide entre deux blocs. Un rembourrage identique partout aplatit aussi le rythme : la page ne dit plus ce qui commence et ce qui se termine. */ /* Calibrage : ~96 px de haut et ~76 px de bas au maximum, soit environ 172 px entre deux sections sur grand écran. Les 112 px symétriques du départ en faisaient 224, un trou. Descendre à 52+64 collait les blocs. L'écart utile est là, et c'est l'asymétrie, pas la valeur absolue, qui donne le rythme : on entre dans une section, on en sort plus vite. */ --section-y-top: clamp(3.5rem, 2rem + 4.6vw, 6rem); --section-y-bottom: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem); /* Version resserrée, pour les sections qui prolongent la précédente plutôt que d'ouvrir un nouveau sujet. */ --section-y-tight-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); --section-y-tight-bottom: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); --shell-max: 84rem; /* 1344 */ --shell-pad: clamp(1.125rem, 0.5rem + 2.6vw, 2.5rem); --prose-max: 44rem; /* ── Rayons, la référence est très arrondie ──────────────────────── */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; /* ── Ombres ───────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px oklch(33% 0.094 268 / 0.06); --shadow-sm: 0 2px 8px oklch(33% 0.094 268 / 0.07); --shadow-md: 0 6px 20px oklch(33% 0.094 268 / 0.09); --shadow-lg: 0 14px 44px oklch(33% 0.094 268 / 0.13); /* ── Mouvement ────────────────────────────────────────────────────── */ --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-reveal: 760ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --reveal-shift: 22px; --reveal-step: 70ms; /* ── Empilement ───────────────────────────────────────────────────── */ --z-base: 1; --z-sticky: 50; --z-nav: 100; --z-overlay: 200; --z-drawer: 300; --z-toast: 400; }