/** * YEP'S Scroll Background : variables et transitions globales. * * Toutes les valeurs viennent désormais de theme.json du thème actif via les * CSS custom properties auto-générées par WordPress (--wp--preset--*, --wp--custom--*). */ :root { --yeps-text-color: var(--wp--custom--yeps--color--text--dark); --yeps-heading-color: var(--wp--custom--yeps--color--heading--on-light); --yeps-link-color: var(--wp--custom--yeps--color--heading--on-light); --yeps-current-bg: var(--wp--preset--color--creme, #F7F6F2); --yeps-transition: color var(--wp--custom--yeps--motion--duration--base, 240ms) var(--wp--custom--yeps--motion--easing--scroll-bg, cubic-bezier(0.4, 0, 0.2, 1)); } html[data-yeps-theme="dark"] { --yeps-text-color: var(--wp--custom--yeps--color--text--light); --yeps-heading-color: var(--wp--custom--yeps--color--heading--on-dark); --yeps-link-color: var(--wp--custom--yeps--color--heading--on-dark); } /* Exposition de la couleur de fond ambiante courante pour permettre aux * composants (ex. format highlight) de calculer leur négatif visuel. * `data-yeps-bg` est posé sur par scroll-bg-frontend.js à chaque * bascule de section dominante. */ html[data-yeps-bg="#F7F6F2"] { --yeps-current-bg: #F7F6F2; } html[data-yeps-bg="#FFD100"] { --yeps-current-bg: #FFD100; } html[data-yeps-bg="#2B2D6E"] { --yeps-current-bg: #2B2D6E; } html[data-yeps-bg="#1A1A2E"] { --yeps-current-bg: #1A1A2E; } html[data-yeps-bg="#76BC8A"] { --yeps-current-bg: #76BC8A; } html[data-yeps-bg="#77B528"] { --yeps-current-bg: #77B528; } html[data-yeps-bg="#44B7EA"] { --yeps-current-bg: #44B7EA; } html[data-yeps-bg="#E46591"] { --yeps-current-bg: #E46591; } html[data-yeps-bg="#2EB1B3"] { --yeps-current-bg: #2EB1B3; } html[data-yeps-bg="#F2A300"] { --yeps-current-bg: #F2A300; } html[data-yeps-bg="#B39AC7"] { --yeps-current-bg: #B39AC7; } /* Exceptions ambiance sombre : titres et liens en blanc plutôt que jaune. * Source de vérité : yeps_forced_dark_ambients() dans * includes/design-system/functions-color.php (consommée par le PHP de rendu * et par window.yepsAmbients.forcedDark côté éditeur). Si une couleur y est * ajoutée, dupliquer le sélecteur ci-dessous (le CSS ne peut pas lire la * liste PHP sans un pipeline supplémentaire, jugé démesuré pour 2 valeurs). * Le bleu YEP'S (#2B2D6E), lui, garde sa couleur de marque jaune. */ html[data-yeps-bg="#1A1A2E"], html[data-yeps-bg="#2EB1B3"] { --yeps-heading-color: #FFFFFF; --yeps-link-color: #FFFFFF; } body { color: var(--yeps-text-color); transition: var(--yeps-transition); } /* Exclusion `.yeps-surface` : l'ambiance s'arrête à tout sous-conteneur qui peint son propre fond (cartes, etc.), sous-arbre compris. */ .yeps-scroll-section:not(.yeps-surface):not(.yeps-surface *), .yeps-scroll-section p:not(.yeps-surface *), .yeps-scroll-section li:not(.yeps-surface *), .yeps-scroll-section blockquote:not(.yeps-surface *), .yeps-scroll-section figcaption:not(.yeps-surface *), .yeps-scroll-section span:not(.yeps-surface *) { color: var(--yeps-text-color); transition: var(--yeps-transition); } .yeps-scroll-section h1:not(.yeps-surface *), .yeps-scroll-section h2:not(.yeps-surface *), .yeps-scroll-section h3:not(.yeps-surface *), .yeps-scroll-section h4:not(.yeps-surface *), .yeps-scroll-section h5:not(.yeps-surface *), .yeps-scroll-section h6:not(.yeps-surface *) { color: var(--yeps-heading-color); transition: var(--yeps-transition); } .yeps-scroll-section a:not(.yeps-surface *) { color: var(--yeps-link-color); transition: var(--yeps-transition); } @media (prefers-reduced-motion: reduce) { body, .yeps-scroll-section, .yeps-scroll-section *, .yeps-scroll-section h1, .yeps-scroll-section h2, .yeps-scroll-section h3, .yeps-scroll-section h4, .yeps-scroll-section h5, .yeps-scroll-section h6, .yeps-scroll-section a { transition: none !important; } }