/** * Skin: go2sport-sport (preset slug: go2sport-sport) * * Surcharge editoriale sportive dynamique go2sport : teal petrole + lime energie * + vert sauge sur fond clair, navbar/footer teal-ink profond. Applique PAR-DESSUS * les primitives editoriales (ui-*, ed-*) deja chargees par le bundle Vite editorial. * Le rendu public unifie pose deux classes sur : theme-go2sport-sport * (anti-FOUC, server-side via getBodyClass) + theme-editorial (EditorialLayout.vue * au mount). La structure (layout navbar/footer/grille) vient des regles * body.theme-editorial ; ce fichier ne fait que reteinter les surfaces, couleurs, * ombres et formes (boutons coupe diagonale, eyebrow slash lime, footer wordmark). * * Mecanique de surcharge (zero duplication de structure) : * - les tokens --editorial-* (palette consommee par les regles .ed-*) sont * redefinis sous body.theme-go2sport-sport -> tout le chrome editorial bascule * sur la palette go2sport sans recopier une regle structurelle ; * - les tokens derives --theme-* (surface/text/border/radius/shadow/feedback, * design-tokens.css) sont redefinis -> toutes les primitives ui-* basculent ; * - seules les decorations specifiques (navbar/footer teal-ink, boutons clip-path * diagonal, soulign nav skew lime, wordmark footer) sont ajoutees explicitement. * * Les 10 tokens --theme-primary/secondary/accent/navbar-bg/navbar-text/body-bg/ * card-bg (+ -rgb) sont injectes server-side par toCssVars()/buildEditorialThemeHead() * depuis les colonnes SQL du preset : ne PAS les redeclarer ici en :root (double * source). Leur miroir est REQUIS uniquement sous body.theme-go2sport-sport (le * :root du bundle SPA, charge apres l injection, ecrase sinon le :root injecte). * * Contrainte compat : PAS de color-mix() (Safari<15.4 / Firefox<113). Toute * variante derivee (hover, light, gradient) est declaree en VALEUR LITTERALE en * :root puis consommee. Source visuelle : lookbook skin.css (20260618-go2sport-accueil). * * Palette (identite logo go2sport) : * - primary (teal petrole) : #0F6E87 (token SQL) * - secondary (teal fonce) : #0A4D5F (token SQL) * - accent (lime energie) : #A4C639 (token SQL) * - navbar/footer (teal-ink) : #0B2E38 (token SQL navbar_bg) * - fond clair (cloud) : #F4F7F6 (token SQL body_bg) * - surface carte : #FFFFFF (token SQL card_bg) * - vert sauge : #8FC79A (accent doux) * - texte courant (ink) : #14232A (ratio ~13:1 sur #F4F7F6, WCAG AAA) * - typo titres : Oswald (font SQL, condense uppercase) * - typo corps : Barlow (font SQL) * * Contraste (WCAG AA) : accent lime #A4C639 sur fond clair insuffisant pour texte * courant -> reserve aux fills de boutons (sur texte ink), accents, borders. Le * texte courant utilise #14232A ; les liens portent une couleur teal-deep ; les * boutons primaires lime ont un texte ink (#14232A), les boutons teal un texte * #FFFFFF ; navbar/footer teal-ink portent un texte #FFFFFF. */ /* ============================================ 1. Variables go2sport-specifiques (NON couvertes par toCssVars) Limite a :root par contrat : les --theme-* injectes restent seule source. Variantes derivees en VALEUR LITTERALE (pas de color-mix). Source : lookbook. ============================================ */ :root { --g2s-teal-deep: #0A4D5F; --g2s-teal-ink: #0B2E38; --g2s-teal-btn: #0C5E73; --g2s-teal-hover: #0D5F73; --g2s-sage: #8FC79A; --g2s-sage-soft: #C9E6CE; --g2s-lime: #A4C639; --g2s-lime-bright: #B8DC3C; --g2s-ink: #14232A; --g2s-ink-soft: #3C4D54; --g2s-cloud: #F4F7F6; --g2s-mist: #E7EEEC; --g2s-btn-clip-offset: 14px; --g2s-teal-rgb: 15, 110, 135; --g2s-lime-rgb: 164, 198, 57; --g2s-sage-rgb: 143, 199, 154; } /* ============================================ 2. Override des tokens editoriaux (--editorial-*) + coeur (--theme-*) Reteinte tout le chrome .ed-* (navbar/footer/hero/contenu/tables) sur la palette go2sport. Les variantes -rgb sont redefinies car les regles editoriales les consomment en rgba(var(--editorial-X-rgb), a). Le selecteur double body.theme-editorial.theme-go2sport-sport (0,2,1) est requis : le bundle SPA importe theme-editorial.css (tokens :root) et pose la classe theme-editorial sur le body apres coup ; ses overrides body.theme-editorial (0,1,1) chargent apres ce fichier et gagneraient a specificite egale. Les 10 tokens injectes par buildEditorialThemeHead sont redeclares ici (memes valeurs que theme_presets en DB) car le :root du bundle ecrase le :root injecte par ordre de chargement. ============================================ */ body.theme-go2sport-sport, body.theme-editorial.theme-go2sport-sport { /* Tokens coeur (miroir V107 - skin_go2sport-sport_activation.sql) */ --theme-primary: #0F6E87; --theme-secondary: #0A4D5F; --theme-accent: #A4C639; --theme-navbar-bg: #0B2E38; --theme-navbar-text: #FFFFFF; --theme-body-bg: #F4F7F6; --theme-card-bg: #FFFFFF; --theme-primary-rgb: 15, 110, 135; --theme-secondary-rgb: 10, 77, 95; --theme-accent-rgb: 164, 198, 57; --theme-primary-light: #3D8FA3; --editorial-ink: #14232A; --editorial-ink-muted: #3C4D54; --editorial-bone: #F4F7F6; --editorial-sand: #FFFFFF; --editorial-clay: var(--theme-primary); --editorial-moss: var(--theme-accent); --editorial-stone: #5C6D74; --editorial-lime: var(--theme-accent); --editorial-danger: #c0392b; --editorial-surface-hover: var(--g2s-mist); --editorial-on-dark: #FFFFFF; --editorial-ink-rgb: 20, 35, 42; --editorial-bone-rgb: 244, 247, 246; --editorial-sand-rgb: 255, 255, 255; --editorial-clay-rgb: var(--theme-primary-rgb); --editorial-moss-rgb: var(--theme-accent-rgb); --editorial-stone-rgb: 92, 109, 116; --editorial-lime-rgb: var(--theme-accent-rgb); /* Alias legacy editoriaux (--blue/--blue-dk/--blue-hi declares :root dans theme-editorial.css sous la forme var(--editorial-X, fallback)). Sur :root, --editorial-clay n'existe PAS (defini sur body.theme-editorial) : --blue y reste donc bloque sur son fallback #1E88E5 (bleu Material) et herite ENSUITE partout -> accent bleu hors-marque sur les heros .a-hero (eyebrow + du titre), la perso et les data-tables, alors que la home (.ed-hero__accent, qui lit var(--editorial-clay) directement) est bien teal. On reteinte ces alias au scope body go2sport : isolation warfaaz totale (son --blue conserve son comportement actuel). */ --blue: var(--theme-primary); --blue-dk: var(--g2s-teal-deep); --blue-hi: var(--theme-primary-light); --surface: var(--theme-card-bg); --rule: rgba(var(--theme-secondary-rgb), 0.12); /* Derives --theme-* (design-tokens.css) : basculent toutes les primitives ui-* */ --theme-surface: var(--theme-card-bg); --theme-surface-muted: var(--g2s-mist); --theme-border: rgba(var(--theme-secondary-rgb), 0.16); --theme-text: #14232A; --theme-text-muted: #3C4D54; --theme-text-inverse: #FFFFFF; --theme-danger: #c0392b; --theme-danger-rgb: 192, 57, 43; --theme-success: #2f8f4e; --theme-success-rgb: 47, 143, 78; --theme-warning: #d99a16; --theme-warning-rgb: 217, 154, 22; /* Variantes -soft resolues au scope de declaration : redeclarees apres l override des -rgb pour suivre la palette go2sport (cf design-tokens.css). */ --theme-danger-soft: rgba(192, 57, 43, 0.12); --theme-success-soft: rgba(47, 143, 78, 0.12); --theme-warning-soft: rgba(217, 154, 22, 0.16); --theme-radius-sm: 0.375rem; --theme-radius-md: 0.875rem; --theme-radius-lg: 1.375rem; --theme-shadow-sm: 0 6px 22px rgba(11, 46, 56, 0.1); --theme-shadow-md: 0 14px 40px rgba(11, 46, 56, 0.16); --theme-shadow-lg: 0 22px 60px rgba(11, 46, 56, 0.22); --theme-focus-ring: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.25); /* Typographie (override tokens --serif/--sans non couverts par toCssVars) --serif/--sans sont definis :root dans tokens.css (Fraunces/Inter) et NE sont PAS injectes par buildEditorialThemeHead(). Les ~70 classes .ed-* de widget consomment var(--serif)/var(--sans) via des regles body.theme-editorial .ed-X (specificite 0,2,0) qui battent l override de balise h1-h6 du skin (0,1,1). On reteinte donc le TOKEN ici : le double-selecteur (0,2,1) gagne sur :root et sur body.theme-editorial, et tout consommateur de var(--serif)/var(--sans) bascule en Oswald/Barlow quelle que soit sa specificite. */ --serif: 'Oswald', 'Arial Narrow', system-ui, sans-serif; --sans: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Opt-out du "mode sombre force" (Chrome/WebView Android "Forcer le mode sombre" ou theme auto). go2sport est un skin CLAIR : sans color-scheme declaree (root/body = normal), le navigateur s'autorise a inverser algorithmiquement les surfaces claires. Le .ed-topbar (fond --editorial-bone clair, texte --editorial-stone gris moyen) devenait alors gris-sur-fonce illisible. En declarant que ce sous-arbre ne supporte QUE le clair, on desactive l'auto-dark sur toute la page go2sport (topbar, navbar, drawer, contenu sont tous descendants de body). Scope body go2sport : warfaaz totalement inchange. */ color-scheme: only light; background-color: var(--theme-body-bg); color: #14232A; } /* ============================================ 3. Typographie : Oswald (display, uppercase) pour les titres, Barlow pour le corps ============================================ */ body.theme-go2sport-sport { font-family: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body.theme-go2sport-sport h1, body.theme-go2sport-sport h2, body.theme-go2sport-sport h3, body.theme-go2sport-sport h4, body.theme-go2sport-sport h5, body.theme-go2sport-sport h6, body.theme-go2sport-sport .h1, body.theme-go2sport-sport .h2, body.theme-go2sport-sport .h3, body.theme-go2sport-sport .h4, body.theme-go2sport-sport .h5, body.theme-go2sport-sport .h6, body.theme-go2sport-sport .font-display { font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; color: #14232A; } body.theme-go2sport-sport p { color: var(--g2s-ink-soft); } /* ============================================ 4. Navbar editoriale - teal-ink profond, soulign lime skew ============================================ */ /* Double-classe (0,3,x) : bat la base body.theme-editorial .ed-nav (0,2,x) quel que soit l'ordre de chargement CSS. Indispensable pour que le rendu dev (Vite injecte le bundle de base APRES le skin) soit identique a la prod. */ body.theme-editorial.theme-go2sport-sport .ed-nav { background-color: rgba(11, 46, 56, 0.95); border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.28); box-shadow: 0 1px 12px rgba(11, 46, 56, 0.24); } body.theme-editorial.theme-go2sport-sport .ed-nav__link, body.theme-editorial.theme-go2sport-sport .ed-nav__login { color: #D6E1E0; position: relative; } body.theme-editorial.theme-go2sport-sport .ed-nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; background: var(--theme-accent); transform: skewX(-20deg); transition: width 0.2s ease; } body.theme-editorial.theme-go2sport-sport .ed-nav__link:hover, body.theme-editorial.theme-go2sport-sport .ed-nav__login:hover { color: var(--g2s-lime-bright); } body.theme-editorial.theme-go2sport-sport .ed-nav__link:hover::after { width: 100%; } /* Bouton burger (label "MENU" + barres de l'icone + bordure) : visible seulement en layout burger, et TOUJOURS pose sur la navbar teal-ink sombre (jamais dans le drawer clair - le drawer a son propre bouton close). La base les colore en --editorial-ink (#14232A sur go2sport) -> ink sombre sur teal sombre = quasi invisible ("MENU" fantome, hamburger noyé). On les eclaircit comme les liens de la navbar (#D6E1E0) + bordure blanc translucide. Double-selecteur (0,3,0) bat la base (0,2,0) quel que soit l'ordre. Scope go2sport : la navbar CLAIRE de warfaaz garde son burger ink (correct sur fond clair). */ body.theme-editorial.theme-go2sport-sport .ed-nav__burger-label { color: #D6E1E0; } body.theme-editorial.theme-go2sport-sport .ed-nav__burger-bar { background-color: #D6E1E0; } body.theme-editorial.theme-go2sport-sport .ed-nav__burger { border-color: rgba(255, 255, 255, 0.28); } /* Panneau mobile / compact : liens en ink sombre (sinon invisibles). Le #D6E1E0 ci-dessus est concu pour la navbar HORIZONTALE teal-ink sombre. Sous 1024px (et en mode compact JS), .ed-nav__menu devient un drawer slide-in sur fond clair var(--editorial-bone) (#F4F7F6, cf. navbar.css) : ce gris pale sur fond clair est illisible. Les items a sous-menu portent .ed-nav__link ET .ed-nav__link--button (NavSubmenuItem.vue), donc la regle #D6E1E0 (0,3,1) les teinte aussi -> tout le menu du drawer disparait. On repasse les liens du PANNEAU en ink sombre. Selecteurs .ed-nav__menu .ed-nav__link : (0,3,2) en media / (0,4,2) en compact, battent le #D6E1E0 (0,3,1) par specificite quel que soit l'ordre de chargement. La navbar horizontale desktop (hors media, hors compact) garde #D6E1E0 sur son fond teal. Scope go2sport : zero warfaaz. */ @media (max-width: 1023.98px) { body.theme-editorial.theme-go2sport-sport .ed-nav__menu .ed-nav__link { color: var(--g2s-ink); } body.theme-editorial.theme-go2sport-sport .ed-nav__menu .ed-nav__link:hover { color: var(--g2s-teal-deep); } } body.theme-editorial.theme-go2sport-sport .ed-nav--compact .ed-nav__menu .ed-nav__link { color: var(--g2s-ink); } body.theme-editorial.theme-go2sport-sport .ed-nav--compact .ed-nav__menu .ed-nav__link:hover { color: var(--g2s-teal-deep); } /* Bandeau de marque blanc, pleine largeur, en haut de la sidebar verticale. Le logo PNG go2sport est en couleurs concues pour un fond clair : sur le teal-ink, "SPORT" + la silhouette se noyaient. Le bandeau blanc redonne au logo couleur son fond clair d'origine. Full-bleed via marges negatives qui annulent le padding de .ed-nav__inner (1.5rem haut / 1rem cotes), donc le rectangle blanc touche le haut et les deux bords du rail. Selecteur (0,6,0) : bat la regle brand verticale de base (0,5,0) quel que soit l'ordre de chargement (parite dev/prod). Scope min-width:1024px = uniquement le rail desktop. */ @media (min-width: 1024px) { /* Supprime le liseré accent du rail go2sport. Le brand blanc est clippe au padding-box (overflow-x:hidden) donc s'arrete a 272px, mais le rail fait 273px a cause de ce border-right 1px : il restait une fine ligne (le border lime translucide par-dessus le contenu sombre = lecture "ligne sombre") a droite du bandeau. Le contraste teal / contenu clair separe deja le rail. */ body.theme-editorial.layout-vertical.theme-go2sport-sport .ed-nav.ed-nav--vertical { border-right: 0; } body.theme-editorial.layout-vertical.theme-go2sport-sport .ed-nav.ed-nav--vertical .ed-nav__brand { background-color: #ffffff; box-sizing: border-box; margin: -1.5rem -1rem 1.25rem; padding: 1.25rem 1rem; border-bottom: 1px solid rgba(20, 35, 42, 0.10); } } body.theme-go2sport-sport .btn-ed-cta { background: var(--theme-accent); border-color: transparent; color: var(--g2s-ink); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif; clip-path: polygon(0 0, 100% 0, calc(100% - var(--g2s-btn-clip-offset)) 100%, 0 100%); box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.3); } body.theme-go2sport-sport .btn-ed-cta:hover { background: var(--g2s-lime-bright); border-color: transparent; color: var(--g2s-ink); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(var(--theme-accent-rgb), 0.42); } /* ============================================ 4b. Toolbar admin - items uniformes (gras comme les onglets simples) La regle globale `body.theme-go2sport-sport a { font-weight: 600 }` (section 7) epaissit les items SANS sous-menu (rendus en ), mais pas ceux a chevron (rendus en