, donc le hook vit sur ). Aucune autre page n'est touchée. * CHARGER APRÈS styles.css + final-nav.css, AVANT le CSS spécifique de page. * MOTION : couleur / bordure / ombre / filtre / fond uniquement. * * Levier : la page pilote ses couleurs par tokens CSS — on les redéfinit sur * body.rl-silver, ce qui silver-ise tous les consommateurs var() (textes, * dégradés-texte, bordures) sans bataille de spécificité (body = ancêtre plus * proche que :root pour l'héritage des custom properties). */ /* ────────────────────────────────────────────────────────────────── TOKENS — redéfinis sur la page (cascade à tous les consommateurs var()) ────────────────────────────────────────────────────────────────── */ body.rl-silver { /* Palette silver-white (cold cosmic library) */ --ink: #f4f6f8; /* titres / texte fort */ --muted: #c8d0da; /* texte secondaire */ --soft: #8e98a6; /* texte tertiaire / placeholders / dates */ --line: rgba(220, 230, 245, 0.18); /* hairlines / borders */ /* Dégradé signature → silver perle (sert aux TEXTES dégradés + fills boutons) */ --gradient: linear-gradient(115deg, #f2f6fa 0%, #d9e1ea 45%, #9faabc 100%); /* Accents ponctuels (eyebrow sparkles, lock) → silver */ --orange: #f2f6fa; --pink: #9faabc; --blue: #9faabc; /* Nav (final-nav.css) : anneau dégradé + glow */ --lab-grad: linear-gradient(115deg, #f2f6fa 0%, #d9e1ea 40%, #9faabc 100%); --lab-glow: rgba(220, 235, 255, 0.42); } /* Fond de page froid (bat le littéral dark #07080b posé sur ). */ :root[data-theme="dark"] body.rl-silver { background: #000000; } /* ────────────────────────────────────────────────────────────────── FOOTER ────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] body.rl-silver .site-footer { color: #8e98a6; background: rgba(0, 0, 0, 0.82); border-top-color: rgba(220, 230, 245, 0.18); } :root[data-theme="dark"] body.rl-silver .footer-brand { color: #f4f6f8; } body.rl-silver .site-footer nav a { color: #c8d0da; } /* ────────────────────────────────────────────────────────────────── LOGO — plume silver-white (swap via content + glow froid). header + footer. ────────────────────────────────────────────────────────────────── */ body.rl-silver .brand-mark { content: url("./assets/riwa-logo-silver-white.png"); filter: drop-shadow(0 0 8px rgba(230, 240, 255, 0.28)) drop-shadow(0 0 18px rgba(180, 205, 240, 0.12)); } /* ────────────────────────────────────────────────────────────────── NAV finale (final-nav.css) — anneau/glow chauds → silver ────────────────────────────────────────────────────────────────── */ /* Panneaux dropdown + menu plateforme : anneau dégradé chaud + glow magenta (LITTÉRAUX, pas via --lab-grad) → silver/acier + glow froid. */ body.rl-silver .lab-nav__panel, body.rl-silver .lab-dl__menu { background: linear-gradient(#0a0d12, #0a0d12) padding-box, linear-gradient( 135deg, rgba(240, 246, 255, 0.42), rgba(159, 170, 188, 0.32) 50%, rgba(86, 97, 112, 0.28) ) border-box; box-shadow: 0 24px 54px -14px rgba(0, 0, 0, 0.8), 0 10px 44px -10px rgba(220, 235, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Pills de la nav (dropdown onglets + langue) : les fills gris-bleus d'origine (#101116 / rgba(8,7,12,.45)) tranchaient sur le near-black du fond. On les met à la COULEUR DU FOND (#000000) → ils se fondent, seule la fine bordure silver reste (pills outline, façon mockup). */ body.rl-silver .lab-nav__button, body.rl-silver .header-actions .language-switch__button { background: #000000; border-color: rgba(220, 230, 245, 0.16); } /* Split button download : face gris-bleu (#15161c→#0e0f14) → fond #000000 ; anneau via var(--lab-grad) déjà silver ; glow magenta littéral → froid. */ body.rl-silver .lab-dl { background: linear-gradient(#000000, #000000) padding-box, var(--lab-grad) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 20px -8px rgba(220, 235, 255, 0.42), 0 12px 28px -16px rgba(0, 0, 0, 0.9); } body.rl-silver .lab-dl:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 28px -6px rgba(220, 235, 255, 0.5), 0 16px 34px -16px rgba(0, 0, 0, 0.9); } /* Onglet actif (dégradé-texte chaud → silver). */ body.rl-silver .lab-nav__panel .nav-link.active { background: linear-gradient(90deg, #f2f6fa, #d9e1ea 50%, #9faabc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Hover items (wash chaud → froid). */ body.rl-silver .lab-nav__panel .nav-link:hover, body.rl-silver .lab-dl__option:hover { color: #f4f6f8; background: linear-gradient( 90deg, rgba(220, 230, 245, 0.1), rgba(159, 170, 188, 0.12) 50%, rgba(220, 235, 255, 0.1) ); } /* Focus rings (magenta → silver). */ body.rl-silver .lab-dl__main:focus-visible, body.rl-silver .lab-dl__caret:focus-visible, body.rl-silver .lab-dl__option:focus-visible { outline-color: rgba(240, 246, 255, 0.7); } /* Menu de langue : check rose + actif cream → silver. */ body.rl-silver .language-menu { background: #0a0d12; border-color: rgba(220, 230, 245, 0.18); } body.rl-silver .language-menu__check { color: #d9e1ea; } :root[data-theme="dark"] body.rl-silver .language-menu__item.is-active { color: #f4f6f8; }