/* ============================================================================= kodama-tokens.css — socle de tokens de l'interface KODAMA ----------------------------------------------------------------------------- Deux couches ici, figées, et une troisième ailleurs : COUCHE 1 · MARQUE reprise telle quelle du bloc :root de DESIGN.md §9. Ne rien y changer sans changer la charte. COUCHE 2 · APPLICATION surfaces, états, focus, densité de tableaux. Ne contient AUCUNE couleur littérale : tout référence la couche 1, sauf les quelques valeurs dérivées explicitement documentées (fonds creusés, variantes assombries pour contraste AA). COUCHE 3 · SOCLE FAMILLE ajoutée le 2026-09-02 (chantier « refonte socle », T1), DÉMÉNAGÉE le 2026-10-08 (chantier habillage, A3) dans assets/kodama-habillage.css, généré depuis la source commune des applis et jamais édité à la main. Les couches 1 et 2 ne changent pas : un nouvel habillage change QUEL jeton une règle lit, jamais la valeur d'un jeton de ces deux couches. Suivent les classes utilitaires, écrites à la main. Le fichier se lit avec kodama-habillage.css, qui porte les jetons de la couche 3 que ses classes citent. ============================================================================= */ /* ============================================================================= COUCHE 1 · MARQUE — DESIGN.md §9, verbatim ============================================================================= */ :root { /* Surfaces & neutres */ --kodama-cream: #FFFDF7; --kodama-white: #FFFFFF; --kodama-ink: #1B1B1B; --kodama-text: #5C5347; --kodama-muted: #A89D88; --kodama-border: #EFE7D6; --kodama-border-field: #E6DFCE; --kodama-border-input: #E3DCCB; /* Accents de marque */ --kodama-pink: #E2247A; /* signature */ --kodama-purple: #7B3F9E; --kodama-green: #4FA838; --kodama-green-bright: #6FC23F; --kodama-lime: #BCDC2E; --kodama-coral: #F0473F; --kodama-orange: #F47B34; --kodama-indigo: #4F5BC4; /* Pastels secondaires */ --kodama-pastel-pink: #FBDCE8; --kodama-pastel-green: #DEEDCF; --kodama-pastel-lavender: #E6DEF0; --kodama-pastel-peach: #F6E6CE; --kodama-pastel-blue: #D6E6F0; --kodama-pastel-lime: #EAF4C9; /* Dégradés signature */ --kodama-grad-rainbow: linear-gradient(95deg,#4F5BC4 0%,#7E4FA0 22%,#B0388F 44%,#E2247A 62%,#F0473F 82%,#F47B34 100%); --kodama-grad-lime: linear-gradient(135deg,#6FC23F 0%,#BCDC2E 100%); --kodama-grad-peach: linear-gradient(90deg,#FBE1EA 0%,#FDF4EE 50%,#FBEBDC 100%); /* Typo */ --kodama-font-display: "Fredoka", sans-serif; --kodama-font-body: "Hanken Grotesk", sans-serif; /* Arrondis */ --kodama-radius-panel: 32px; --kodama-radius-card: 24px; --kodama-radius-media: 16px; --kodama-radius-pill: 28px; --kodama-radius-input: 11px; /* Ombres */ --kodama-shadow-card: 0 6px 18px rgba(0,0,0,.06); --kodama-shadow-card-hover: 0 16px 32px rgba(0,0,0,.12); --kodama-shadow-spotlight: 0 22px 44px rgba(0,0,0,.22); /* Mouvement */ --kodama-ease: cubic-bezier(.22,.61,.36,1); --kodama-duration: .22s; /* Layout */ --kodama-max-width: 1200px; --kodama-gutter: 28px; } /* ============================================================================= COUCHE 2 · APPLICATION — outil de travail dense ----------------------------------------------------------------------------- La charte est écrite pour le site public. Cette couche l'adapte à un outil de travail : échelle typo resserrée, tableaux denses, couleurs d'état, focus clavier. Chaque écart au site public est justifié en commentaire. ============================================================================= */ :root { /* --------------------------------------------------------------------------- Surfaces Trois valeurs seulement sont dérivées et non reprises de la charte : les fonds creusés, obtenus en mélangeant le crème et la bordure chaude. Elles évitent d'introduire un gris froid dans une palette entièrement chaude. --------------------------------------------------------------------------- */ --k-surface-page: var(--kodama-cream); /* fond de page, partout */ --k-surface-card: var(--kodama-white); /* cartes, panneaux, lignes de tableau */ --k-surface-sunken: #FAF6ED; /* crème 70 % + bordure 30 % — zébrures, colonnes latérales, en-têtes de tableau */ --k-surface-hover: #FBF9F5; /* blanc 82 % + bordure 18 % — survol de ligne */ --k-surface-inverse: var(--kodama-ink); /* bandeaux sombres (logo blanc uniquement) */ --k-surface-navbar: rgba(255,253,247,.93); /* crème translucide — valeur littérale de la charte §5 */ --k-border: var(--kodama-border); --k-border-field: var(--kodama-border-field); --k-border-input: var(--kodama-border-input); --k-border-strong: var(--kodama-ink); /* état actif : filet 2 px encre (charte §4) */ /* --------------------------------------------------------------------------- Texte --k-text-muted remplace --kodama-muted partout où le texte doit être LU : #A89D88 plafonne à 2,63:1 sur crème, très en dessous du AA 4,5:1. --kodama-muted reste disponible pour le décoratif pur (filets, séparateurs). --------------------------------------------------------------------------- */ --k-ink: var(--kodama-ink); /* 16,9:1 sur crème */ --k-text: var(--kodama-text); /* 7,4:1 sur crème */ --k-text-muted: #7A6E58; /* 4,9:1 sur crème — métadonnées lisibles */ --k-text-decorative: var(--kodama-muted); /* 2,6:1 — JAMAIS de texte à lire */ --k-text-on-accent: var(--kodama-white); --k-pink-text: #D11C6E; /* rose signature assombri — 5,03:1 sur crème. Le #E2247A de la charte plafonne à 4,33:1 : il tient en filet, en soulignement actif et en gros titre, jamais en corps de texte. */ /* --------------------------------------------------------------------------- Typographie — échelle application L'échelle du site public (H1 66 px) ne s'applique pas ici. Titre de page 30 px, corps 14,5 px, tableaux 13,5 px : 8 crans qui absorbent les 28 valeurs de fontSize aujourd'hui codées en dur dans les vues. --------------------------------------------------------------------------- */ --k-font-display: var(--kodama-font-display); /* Fredoka — titres uniquement */ --k-font-body: var(--kodama-font-body); /* Hanken Grotesk — tout le reste */ --k-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --k-title-page: 30px; /* Fredoka 600 — titre d'écran */ --k-title-section: 23px; /* Fredoka 600 — titre de section */ --k-title-card: 19px; /* Fredoka 600 — titre de carte / de jeu */ --k-text-lead: 16.5px; /* Hanken 400 — chapô, phrase d'accroche */ --k-text-body: 14.5px; /* Hanken 400 — corps, formulaires */ --k-text-table: 13.5px; /* Hanken 400 — cellules de tableau */ --k-text-xs: 12px; /* Hanken 500 — libellés secondaires */ --k-text-micro: 11px; /* Hanken 700 — surtitres, compteurs, badges */ --k-lh-title: 1.15; --k-lh-body: 1.55; --k-lh-table: 1.35; --k-tracking-title: -0.015em; /* charte §3 */ --k-tracking-eyebrow: 0.14em; /* charte §3 — surtitres MAJUSCULES */ --k-weight-body: 400; --k-weight-medium: 500; --k-weight-strong: 700; --k-weight-eyebrow: 700; --k-weight-nav-active: 800; /* charte §5 */ /* --------------------------------------------------------------------------- Formes — application Les arrondis de la charte sont dimensionnés pour des cartes de catalogue. Un tableau dense ne peut pas porter 24 px d'arrondi : on garde l'échelle charte pour les panneaux et les pilules, on resserre pour les cellules. --------------------------------------------------------------------------- */ --k-radius-panel: var(--kodama-radius-panel); /* 32px — panneau plein écran */ --k-radius-card: var(--kodama-radius-card); /* 24px — carte de contenu */ --k-radius-card-sm: 16px; /* carte dense, bloc de tableau */ --k-radius-media: var(--kodama-radius-media); /* 16px */ --k-radius-pill: var(--kodama-radius-pill); /* 28px — bouton, pilule de nav */ --k-radius-badge: 20px; /* charte §4 */ --k-radius-input: var(--kodama-radius-input); /* 11px */ --k-shadow-card: var(--kodama-shadow-card); --k-shadow-card-hover: var(--kodama-shadow-card-hover); --k-shadow-sticky: 0 1px 0 var(--kodama-border); /* barre collante : filet, pas d'ombre portée */ /* --------------------------------------------------------------------------- Mouvement --------------------------------------------------------------------------- */ --k-ease: var(--kodama-ease); --k-duration: var(--kodama-duration); /* --------------------------------------------------------------------------- ÉTATS La charte ne définit pas de couleurs d'état : celles-ci sont dérivées de ses accents. Trois slots par état : -accent la couleur de marque pure — décor uniquement (filet, point, barre) -text variante assombrie à teinte constante, ≥ 5:1 sur crème ET sur blanc -bg pastel de la charte — fond de badge, texte en --k-ink (≥ 13:1) Le texte d'un badge est TOUJOURS --k-ink : les variantes -text ne tiennent pas le AA sur leur propre pastel (3,6 à 3,8:1). --------------------------------------------------------------------------- */ /* ok — validé, terminé, conforme */ --k-ok-accent: var(--kodama-green); /* #4FA838 */ --k-ok-text: #3A7C29; /* 5,04:1 crème · 5,13:1 blanc */ --k-ok-bg: var(--kodama-pastel-green); /* encre 14,0:1 */ /* attente — on attend un tiers, rien d'anormal */ --k-wait-accent: var(--kodama-orange); /* #F47B34 */ --k-wait-text: #BB4B0A; /* 5,01:1 crème · 5,09:1 blanc */ --k-wait-bg: var(--kodama-pastel-peach); /* encre 14,1:1 */ /* alerte — action requise */ --k-alert-accent: var(--kodama-coral); /* #F0473F */ --k-alert-text: #D6241C; /* 5,00:1 crème · 5,09:1 blanc */ --k-alert-bg: var(--kodama-pastel-pink); /* encre 13,5:1 */ /* erreur — échec dur (synchro KO, refus du proxy) : même teinte, cran plus grave */ --k-error-accent: #9C1A14; /* corail assombri */ --k-error-text: #9C1A14; /* 8,03:1 crème · 8,17:1 blanc */ --k-error-bg: var(--kodama-pastel-pink); --k-error-border: var(--kodama-coral); /* filet 1,5 px qui distingue erreur d'alerte */ /* information — neutre informatif */ --k-info-accent: var(--kodama-indigo); /* #4F5BC4 */ --k-info-text: var(--kodama-indigo); /* 5,69:1 crème — AA sans retouche */ --k-info-bg: var(--kodama-pastel-blue); /* encre 13,5:1 */ /* neutre — terminé/archivé, sans charge */ --k-neutral-accent: var(--kodama-muted); --k-neutral-text: var(--k-text-muted); --k-neutral-bg: var(--kodama-border); /* encre 14,0:1 */ /* --------------------------------------------------------------------------- États sur fond sombre Les variantes -text sont calculées pour le crème et le blanc : sur un bandeau sombre elles deviennent illisibles. Ces trois teintes claires, dérivées des mêmes accents, tiennent 7,7 à 9,7:1 sur un fond encre chaud. --------------------------------------------------------------------------- */ --k-on-dark-text: rgba(255,255,255,.72); --k-on-dark-wait: #F6D8C6; /* orange éclairci — 9,73:1 */ --k-on-dark-ok: #BADEB1; /* vert pomme éclairci — 8,87:1 */ --k-on-dark-alert: #F1B9B6; /* corail éclairci — 7,73:1 */ --k-on-dark-fill: rgba(255,255,255,.14); --k-surface-proto: #33302B; /* barre de prototype — encre réchauffée, hors production */ /* --------------------------------------------------------------------------- Accents métier — deux étapes de validation qui doivent rester distinguables des états. Repris de la charte, AA sans retouche. --------------------------------------------------------------------------- */ --k-eproofs-accent: var(--kodama-purple); /* #7B3F9E — 6,78:1 */ --k-eproofs-bg: var(--kodama-pastel-lavender); --k-mpc-accent: var(--kodama-indigo); /* #4F5BC4 — 5,69:1 */ --k-mpc-bg: var(--kodama-pastel-blue); /* --------------------------------------------------------------------------- Repère d'espace — pastille discrète dans l'en-tête, un seul aplat par espace. Ne compte pas dans la règle « une couleur vive par écran » : c'est un pastel. --------------------------------------------------------------------------- */ --k-space-admin-bg: var(--kodama-pastel-lime); --k-space-blackrock-bg: var(--kodama-pastel-lavender); --k-space-factory-bg: var(--kodama-pastel-blue); --k-space-partner-bg: var(--kodama-pastel-peach); /* --------------------------------------------------------------------------- FOCUS CLAVIER Aujourd'hui le portail n'a aucun :focus-visible et pose « outline: none » sur ses champs. Anneau rose signature : 4,33:1 sur crème et 4,41:1 sur blanc, au-dessus du seuil non-texte de 3:1. --------------------------------------------------------------------------- */ --k-focus-color: var(--kodama-pink); --k-focus-width: 2px; --k-focus-offset: 2px; --k-focus-ring: var(--k-focus-width) solid var(--k-focus-color); /* --------------------------------------------------------------------------- DENSITÉ — tableaux et formulaires Le portail affiche des tableaux de production de 10 à 40 lignes. Deux crans : « confort » par défaut, « dense » pour les tableaux larges. --------------------------------------------------------------------------- */ --k-row-py: 9px; /* padding vertical d'une cellule */ --k-row-py-dense: 6px; --k-cell-px: 12px; /* padding horizontal d'une cellule */ --k-cell-px-dense: 9px; --k-head-py: 7px; /* en-tête de tableau */ --k-field-py: 8px; /* champ de saisie */ --k-field-px: 11px; --k-gap-xs: 6px; --k-gap-sm: 10px; --k-gap-md: 16px; --k-gap-lg: 24px; --k-gap-xl: 36px; /* --------------------------------------------------------------------------- Layout — le portail est un outil plein écran, pas une page de catalogue : on ne borne pas à 1200 px, mais on garde la gouttière de la charte. --------------------------------------------------------------------------- */ --k-page-max: 1520px; --k-gutter: var(--kodama-gutter); --k-gutter-sm: 16px; /* La gouttière des PAGES, celle que chaque vue pose sur son conteneur .k-page. L'en-tête et la sous-nav la lisent pour tomber sur la même ligne que le contenu : avant, ils suivaient --k-gutter (28 px) quand les pages posaient 44, et le titre de l'en-tête arrivait 28 px trop à droite sur les vues larges. */ --k-page-pad: 44px; } /* ============================================================================= COUCHE 3 · SOCLE FAMILLE — déménagée le 2026-10-08 (chantier habillage, A3) ----------------------------------------------------------------------------- Elle ne s'écrit plus ici. assets/kodama-habillage.css la porte, GÉNÉRÉ par kodama-apps/brand/habillage/scripts/distribuer.mjs --ecrire=portail depuis la source unique des valeurs communes des applis (brand/habillage/valeurs.mjs), et chargé juste après ce fichier par les deux pages. Ses noms --k-* y sont des alias des noms communs (--fond, --encre-2, --rayon…), pour que K et le CSS existant suivent ; les valeurs de la grammaire commune y sont sous les noms de La Cabane et de Partenaires Export. Ne jamais l'éditer à la main : changer la source et relancer le script, dont --verifier refuse aussi qu'un de ses noms soit redéclaré dans ce fichier-ci. ============================================================================= */ /* ============================================================================= CLASSES UTILITAIRES Le portail style en `style={{…}}` inline. Ces classes couvrent ce que l'inline ne peut pas exprimer : pseudo-classes (:focus-visible, :hover), media queries. ============================================================================= */ /* --- Focus clavier : visible partout, invisible à la souris --------------- */ .k-focusable:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: var(--k-focus-ring); outline-offset: var(--k-focus-offset); border-radius: 4px; } /* --- Typographie ---------------------------------------------------------- */ .k-title-page { font-family: var(--k-font-display); font-size: var(--k-title-page); font-weight: 600; line-height: var(--k-lh-title); letter-spacing: var(--k-tracking-title); color: var(--k-ink); margin: 0; } .k-title-section { font-family: var(--k-font-display); font-size: var(--k-title-section); font-weight: 600; line-height: var(--k-lh-title); letter-spacing: var(--k-tracking-title); color: var(--k-ink); margin: 0; } .k-title-card { font-family: var(--k-font-display); font-size: var(--k-title-card); font-weight: 600; line-height: var(--k-lh-title); color: var(--k-ink); margin: 0; } .k-eyebrow { font-family: var(--k-font-body); font-size: var(--k-text-micro); font-weight: var(--k-weight-eyebrow); letter-spacing: var(--k-tracking-eyebrow); text-transform: uppercase; color: var(--k-text-muted); } .k-body { font-size: var(--k-text-body); line-height: var(--k-lh-body); color: var(--k-text); } .k-meta { font-size: var(--k-text-xs); color: var(--k-text-muted); } /* --- Tableaux ------------------------------------------------------------- */ .k-table { width: 100%; border-collapse: collapse; font-size: var(--k-text-table); line-height: var(--k-lh-table); } .k-table th { font-size: var(--k-text-micro); font-weight: var(--k-weight-eyebrow); letter-spacing: 0.07em; text-transform: uppercase; color: var(--k-text-muted); text-align: left; padding: var(--k-head-py) var(--k-cell-px); background: var(--k-surface-sunken); border-bottom: 1px solid var(--k-border); } .k-table td { padding: var(--k-row-py) var(--k-cell-px); border-bottom: 1px solid var(--k-border); color: var(--k-text); vertical-align: top; } .k-table tbody tr:hover td { background: var(--k-surface-hover); } .k-table-dense th, .k-table-dense td { padding: var(--k-row-py-dense) var(--k-cell-px-dense); } .k-table-zebra tbody tr:nth-child(even) td { background: var(--k-surface-sunken); } .k-table-scroll { overflow-x: auto; } /* --- Badges d'état -------------------------------------------------------- */ .k-badge { display: inline-flex; align-items: center; gap: var(--k-gap-xs); padding: 2px 10px; border-radius: var(--k-radius-badge); font-size: var(--k-text-micro); font-weight: var(--k-weight-strong); line-height: 1.5; white-space: nowrap; color: var(--k-ink); /* toujours l'encre : AA garanti sur tous les pastels */ background: var(--k-neutral-bg); } .k-badge-ok { background: var(--k-ok-bg); } .k-badge-wait { background: var(--k-wait-bg); } .k-badge-alert { background: var(--k-alert-bg); } .k-badge-error { background: var(--k-error-bg); box-shadow: inset 0 0 0 1.5px var(--k-error-border); } .k-badge-info { background: var(--k-info-bg); } .k-badge__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--k-neutral-accent); } .k-badge-ok .k-badge__dot { background: var(--k-ok-accent); } .k-badge-wait .k-badge__dot { background: var(--k-wait-accent); } .k-badge-alert .k-badge__dot { background: var(--k-alert-accent); } .k-badge-error .k-badge__dot { background: var(--k-error-accent); } .k-badge-info .k-badge__dot { background: var(--k-info-accent); } /* --- Texte d'état sur fond clair (hors badge) ----------------------------- */ .k-state-ok { color: var(--k-ok-text); font-weight: var(--k-weight-strong); } .k-state-wait { color: var(--k-wait-text); font-weight: var(--k-weight-strong); } .k-state-alert { color: var(--k-alert-text); font-weight: var(--k-weight-strong); } .k-state-error { color: var(--k-error-text); font-weight: var(--k-weight-strong); } .k-state-info { color: var(--k-info-text); font-weight: var(--k-weight-strong); } /* --- Navigation (charte §5) ----------------------------------------------- */ .k-navbar { position: sticky; top: 0; z-index: 40; background: var(--k-surface-navbar); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--k-border); } .k-navlink { font-size: var(--k-text-body); font-weight: var(--k-weight-medium); color: var(--k-text); text-decoration: none; padding: 10px 2px; border-bottom: 3px solid transparent; transition: color var(--k-duration) var(--k-ease); } .k-navlink:hover { color: var(--k-ink); } .k-navlink--active{ color: var(--k-ink); font-weight: var(--k-weight-nav-active); border-bottom-color: var(--kodama-pink); } /* --- Réduction de mouvement ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* --- Densité mobile -------------------------------------------------------- */ @media (max-width: 760px) { :root { --k-title-page: 24px; --k-title-section: 19px; --k-title-card: 17px; --k-gutter: var(--k-gutter-sm); --k-page-pad: 14px; /* la valeur que .k-page prend sous 760 px (portal-theme.jsx) */ } } /* ============================================================================= FOND ET GRAIN — chantier habillage (2026-10-08, HABILLAGE.md §2 ; P2 et P18 amendées) Deux couches FIXES sous le contenu, à la taille du GRAND viewport (100lvh : avec inset: 0, la couche suivrait la barre d'adresse de Safari et ses halos glisseraient pendant le repli) : le dégradé chaud et ses trois halos d'accent (--degrade-fond, le seul usage décoratif de l'accent) à z-index -2, le grain par-dessus à -1. body et les racines des vues restent transparents. html porte le repli (--fond). Tuile de bruit clairsemé 200x200 (cabane/scripts/gen-grain.mjs), opacité 0.04, multiply ; pas de feTurbulence (coût Safari mobile). Les ancres s'arrêtent sous le bandeau noir collant. La sélection prend le pâle d'accent : le rose ne reste qu'au focus. ============================================================================= */ html { background-color: var(--k-papier); scroll-padding-top: calc(var(--hauteur-bandeau) + 12px); } ::selection { background: var(--accent-pale-bas); } body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -2; background-image: var(--degrade-fond); pointer-events: none; } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; background-image: url("data:image/png;base64,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"); background-repeat: repeat; opacity: 0.04; mix-blend-mode: multiply; pointer-events: none; } /* ============================================================================= TRAME — chantier habillage (2026-10-09, demande d'Antoine : « un peu de texture, type halftone, uniquement pour le fond »). Une troisième couche FIXE, au-dessus du grain : une trame de points imprimée, sur une grille à 45° (deux réseaux décalés d'un demi-pas), dont les points GROSSISSENT là où les halos de l'accent sont les plus forts (en haut à droite, au milieu à droite, en bas à gauche) et disparaissent au centre de la page. La taille des points naît d'un seuil : chaque case porte un point flou, multiplié par le ton des halos, puis contrast() tranche net ; la couche se pose en multiply, très légère, comme une encre. Le fond seul : cartes, bandeau et contenus passent par-dessus, intacts. Aucune image, aucun script ; à la taille du grand viewport, comme les deux autres couches. AU BUREAU SEULEMENT (2026-10-09, Antoine : « sur Mac c'est parfait, sur téléphone on doit la retirer ») : la couche ne naît que sur un écran à souris ou à pavé tactile (hover: hover et pointer: fine). Sur un écran tactile, téléphone en portrait comme en paysage, et tablette, aucune trame : le fond garde ses halos et son grain. La largeur ne suffirait pas à dire « téléphone » : un iPhone en paysage dépasse 640 px. ============================================================================= */ @media (hover: hover) and (pointer: fine) { html::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; background: radial-gradient(closest-side, #8c8c8c, #fff) 0 0 / 7px 7px, radial-gradient(closest-side, #8c8c8c, #fff) 3.5px 3.5px / 7px 7px, radial-gradient(1200px 720px at 100% 0%, #b0b0b0, #fff 62%), radial-gradient(900px 760px at 100% 52%, #dcdcdc, #fff 70%), radial-gradient(1000px 680px at 0% 100%, #b8b8b8, #fff 66%), #fff; background-blend-mode: multiply; filter: contrast(14); mix-blend-mode: multiply; opacity: 0.08; pointer-events: none; } }