/* Theme Name: AHOD Author: AHoD Author URI: https://ahod.be Template: Divi Version: 1.0 */ /* ========================================================================= AHOD — KIT D'EFFETS (Divi 5) ------------------------------------------------------------------------- Même arborescence que effects.js. Chaque bloc est repéré par SA CLASSE : un Ctrl+F sur `.fx-hscroll` donne le CSS ici et le JS là-bas. Rien à synchroniser, aucune numérotation à tenir à jour. SÉQUENCES ÉPINGLÉES (pin + scrub) .fx-zoom / .fx-zoom-hero galerie : la grille entière dézoome .fx-hscroll / -view / -track bande de panneaux qui défile latéralement .fx-wipe / .fx-wipe-text transition par zoom de lettre RÉVÉLATIONS AU SCROLL (sans pin) .fx-img-drt / .fx-img-gch découpe clip-path .fx-text (+ .fx-hero) fondu + montée .fx-lines / .fx-line ligne par ligne (SplitText) BOUCLES AUTONOMES (ni scroll, ni pin) .fx-marquee / -track bandeau infini (logos, mentions presse) CONTRAT ANTI-FOUC — la règle qui gouverne tout le fichier : rien n'est masqué en dur. Le masquage est TOUJOURS conditionné à `.fx-js`, posée sur par ahod_fx_guard() avant peinture. Si effects.js ne tourne pas (404, erreur JS, JS coupé), la classe saute et tout redevient visible. Aucun effet ne peut rendre du contenu définitivement inatteignable. ========================================================================= */ /* ========================================================================= SÉQUENCES ÉPINGLÉES (pin + scrub) ========================================================================= */ /* -------------------------------------------------------------------------- .fx-zoom / .fx-zoom-hero — GALERIE QUI DÉZOOME Rien n'est masqué ici : sans JS, la grille s'affiche normalement. Le centrage vertical est ce qui place la cellule pilote au centre de l'écran au moment du pin — c'est lui qui rend la géométrie JS triviale. -------------------------------------------------------------------------- */ .fx-zoom { min-height: 100vh; display: flex; flex-direction: column; /* CORRECTIF : en 'row', la Ligne Divi ne s'étirait pas -> grille rétrécie et collée à gauche */ justify-content: center; /* centrage vertical */ align-items: center; /* la Ligne reste centrée horizontalement */ /* Garde-fou : l'image agrandie ne peut jamais sortir de sa section */ overflow: clip; } .fx-zoom-hero { position: relative; z-index: 5; } /* -------------------------------------------------------------------------- .fx-hscroll / .fx-hscroll-view / .fx-hscroll-track — SCROLL HORIZONTAL TROIS NIVEAUX À CÂBLER DANS DIVI : Section .fx-hscroll épinglée, hauteur d'écran Row .fx-hscroll-view fenêtre visible -> fixe la largeur utile Module Group .fx-hscroll-track piste, width: max-content Colonnes/modules du groupe = les panneaux L'ÉTAT PAR DÉFAUT EST LE REPLI, pas l'effet. Sans JS, sous 768px ou en reduced-motion, la fenêtre reste un scroll horizontal natif avec snap : la bande se parcourt au doigt et au trackpad. effects.js ajoute `.fx-hs-on` seulement quand il prend la main, et c'est ça qui coupe le natif. -------------------------------------------------------------------------- */ .fx-hscroll { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* La fenêtre — état de repli */ .fx-hscroll-view { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; /* le geste latéral ne remonte pas au navigateur -> pas de "swipe back" intempestif (iOS, Chrome) */ scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } .fx-hscroll-view::-webkit-scrollbar { display: none; } /* La piste : une seule ligne, largeur dictée par le contenu */ .fx-hscroll-track { display: flex; flex-wrap: nowrap; width: max-content; max-width: none; /* neutralise la max-width que Divi pose sur les Rows */ } .fx-hscroll-track > * { flex: 0 0 auto; /* les panneaux ne se compressent jamais */ scroll-snap-align: start; } /* Effet actif (classe posée par effects.js) : GSAP pilote, on coupe le natif */ .fx-hs-on { overflow: clip; } .fx-hs-on .fx-hscroll-view { overflow: clip; scroll-snap-type: none; } /* Le focus clavier est ramené dans le champ par effects.js (onFocusIn). On lui donne de l'air pour qu'il reste lisible sur un panneau photo. */ .fx-hscroll-track :focus-visible { outline-offset: 4px; } /* -------------------------------------------------------------------------- .fx-wipe / .fx-wipe-text — TRANSITION PAR ZOOM DE LETTRE Une lettre grossit jusqu'à remplir l'écran de sa couleur — qui est celle de la section SUIVANTE. Le raccord devient invisible. Sans JS : texte normal, aucune casse. Portable : les 2 couleurs sont des variables, surchargeables par projet dans le champ "Élément principal" de la Section. -------------------------------------------------------------------------- */ .fx-wipe { min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: clip; /* le texte géant ne sort jamais */ background-color: var(--fx-wipe-from, #F4F1EA); /* couleur de DÉPART */ } .fx-wipe .fx-wipe-text { /* Sélecteur à 2 classes : passe devant le `.et_pb_text_N h2` que Divi génère dès qu'on touche aux réglages de titre du module. */ width: max-content; /* CLÉ : le bloc épouse le mot -> ox/oy = fractions du MOT, stables partout */ margin: 0 auto; /* annule la marge de titre Divi, recentre */ padding: 0; /* Divi met un padding FIXE sous les titres : fixe sur une boîte qui varie -> oy dériverait */ font-size: min(11rem, 11vw); /* pas de plancher : le mot tient toujours */ line-height: 1; /* cale l'encre au centre de la boîte */ font-variation-settings: 'opsz' 144, 'wght' 700, 'SOFT' 0, 'WONK' 1; white-space: nowrap; /* Volontairement PAS de will-change : le navigateur re-pixellise à chaque échelle -> le texte reste net. Avec will-change, il flouterait. */ } /* Le .pin-spacer (créé par ScrollTrigger) s'intercale entre cette section et la suivante. Sa hauteur fractionnaire laisse un arrondi sub-pixel -> liseré clair. 1px de chevauchement le supprime. !important OBLIGATOIRE : ScrollTrigger pose ses marges en style INLINE sur le spacer, et l'inline bat toute feuille de style. */ .pin-spacer:has(.fx-wipe) { margin-bottom: -1px !important; } /* ========================================================================= RÉVÉLATIONS AU SCROLL (sans pin) ========================================================================= */ /* -------------------------------------------------------------------------- .fx-img-drt — RÉVÉLATION D'IMAGE VERS LA DROITE L'image est découpée (clip-path) au lieu d'être masquée par un voile : le fond réel apparaît, quelle que soit sa couleur (ou son dégradé/photo). -------------------------------------------------------------------------- */ .fx-img-drt { position: relative !important; overflow: hidden !important; display: block !important; line-height: 0; transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1); } .fx-img-drt img { width: 100%; height: auto; display: block !important; transform: scale(1.1); transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); } /* Découpée SEULEMENT si le JS tourne. Si effects.js tombe -> .fx-js saute -> image visible. */ .fx-js .fx-img-drt { clip-path: inset(0 0 0 100%); } /* découpe collée au bord droit */ .fx-img-drt.is-revealed { clip-path: inset(0 0 0 0); } /* s'ouvre vers la gauche */ .fx-img-drt.is-revealed img { transform: scale(1); } /* -------------------------------------------------------------------------- .fx-img-gch — RÉVÉLATION D'IMAGE VERS LA GAUCHE -------------------------------------------------------------------------- */ .fx-img-gch { position: relative !important; overflow: hidden !important; display: block !important; line-height: 0; transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1); } .fx-img-gch img { width: 100%; height: auto; display: block !important; transform: scale(1.1); transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); } .fx-js .fx-img-gch { clip-path: inset(0 100% 0 0); } /* découpe collée au bord gauche */ .fx-img-gch.is-revealed { clip-path: inset(0 0 0 0); } /* s'ouvre vers la droite */ .fx-img-gch.is-revealed img { transform: scale(1); } /* -------------------------------------------------------------------------- .fx-text / .fx-hero — RÉVÉLATION DE TEXTE (fondu + montée), piloté par GSAP Le CSS ne fait que masquer avant l'exécution du JS (anti-FOUC). Durée / easing / distance : réglés dans effects.js. -------------------------------------------------------------------------- */ .fx-js .fx-text:not(.fx-hero) { visibility: hidden; } .fx-text.is-revealed { visibility: visible; } /* Hero : peint immédiatement (LCP sain), déjà décalé de 24px -> GSAP le remonte sans à-coup */ .fx-js .fx-hero { visibility: visible; transform: translateY(24px); } /* -------------------------------------------------------------------------- .fx-lines / .fx-line — RÉVÉLATION LIGNE PAR LIGNE (GSAP + SplitText) Réservé aux TITRES et phrases courtes (jamais les paragraphes). -------------------------------------------------------------------------- */ .fx-js .fx-lines { visibility: hidden; } .fx-lines.is-revealed { visibility: visible; } /* Petit padding : évite que le masque rogne les jambages (g, j, p, y) */ .fx-line { padding-bottom: 0.08em; } /* ========================================================================= BOUCLES AUTONOMES (ni scroll, ni pin) ========================================================================= */ /* -------------------------------------------------------------------------- .fx-marquee / .fx-marquee-track — BANDEAU INFINI DEUX NIVEAUX À CÂBLER DANS DIVI : Row .fx-marquee fenêtre (masquage, survol) Module Group .fx-marquee-track piste, width: max-content Modules du groupe = les items. effects.js les clone automatiquement. Comme .fx-hscroll, L'ÉTAT PAR DÉFAUT EST LE REPLI : sans JS ou en reduced-motion, la fenêtre reste un scroll horizontal natif. effects.js ajoute `.fx-mq-on` seulement quand il prend la main. Pas de scroll-snap ici, contrairement à .fx-hscroll : une bande de logos n'a ni début ni fin, aimanter un item n'aurait aucun sens. -------------------------------------------------------------------------- */ .fx-marquee { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .fx-marquee::-webkit-scrollbar { display: none; } .fx-marquee-track { display: flex; flex-wrap: nowrap; width: max-content; max-width: none; /* neutralise la max-width que Divi pose sur les Rows */ align-items: center; /* logos de hauteurs inégales alignés sur leur axe */ } .fx-marquee-track > * { flex: 0 0 auto; } /* Boucle active (classe posée par effects.js) : GSAP pilote, on coupe le natif */ .fx-mq-on { overflow: clip; } /* Dégradé de bord — OPTIONNEL : ajouter la classe .fx-marquee-fade à la Row. Évite que les logos soient tranchés net sur les côtés. Coût : mask-image crée une couche composite. Sur une bande qui tourne en permanence c'est acceptable, mais ne jamais l'empiler avec un backdrop-filter ou un mix-blend-mode (cf. REF Standards §7). */ .fx-marquee-fade { --fx-mq-fade: 6rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fx-mq-fade), #000 calc(100% - var(--fx-mq-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fx-mq-fade), #000 calc(100% - var(--fx-mq-fade)), transparent); } /* ========================================================================= ACCESSIBILITÉ — mouvement refusé : tout visible, aucune animation ------------------------------------------------------------------------- .fx-hscroll et .fx-marquee n'apparaissent pas ici : leur état par défaut EST déjà l'état accessible (scroll horizontal natif). effects.js n'ajoute .fx-hs-on / .fx-mq-on que hors reduced-motion — rien à annuler. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .fx-js .fx-text, .fx-js .fx-hero, .fx-js .fx-lines { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; } /* Images : affichées d'emblée, sans découpe ni zoom */ .fx-js .fx-img-drt, .fx-js .fx-img-gch { clip-path: none !important; transition: none !important; } .fx-img-drt img, .fx-img-gch img { transform: none !important; transition: none !important; } /* Wipe : texte figé (le JS ne crée déjà rien, ceci est une ceinture) */ .fx-wipe-text { transform: none !important; } } /* ========================================================================= MICRO-EFFETS ========================================================================= */ ::selection { background: rgba(43, 40, 48, 0.9); color: #F0EEF1; } /* scroll-behavior conditionné à l'ABSENCE de Lenis. Lenis est initialisé avec anchors:true et anime scrollTop lui-même. Si le navigateur applique EN PLUS son propre lissage natif, deux moteurs se disputent la même valeur -> saccade ou ancre ratée. Lenis pose les classes `lenis` / `lenis-smooth` sur quand il tourne : on ne garde le smooth natif que dans les cas où Lenis se désactive volontairement (tactile, reduced-motion, lib absente). */ html:not(.lenis):not(.lenis-smooth) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } a, button { transition: color 0.5s ease, opacity 0.5s ease, border-color 0.5s ease; } /* ============================================================================ Kit FX ahod_ — Chips, fx-count, fx-swap · CSS · v8 Remplace intégralement l'ancien bloc « fx-count » de style.css ---------------------------------------------------------------------------- ⚠ La version doit correspondre à celle de effects-non-gsap.js (v8.0), affichée dans chaque message console. ORGANISATION §1 variables partagées ← SEUL BLOC À PERSONNALISER §2 chips — communes à fx-count et fx-swap §3 fx-count — carrés d'occupation §4 utilitaires opt-in §5 réduction de mouvement PARTAGE AVEC DIVI Divi rend et style tout ce qui est visible dans le builder : colonnes, grilles, textes, chips. Ne subsistent ici que les choses hors de sa portée : les carrés (créés par le JS), l'état SÉLECTIONNÉ (Divi n'a pas d'état équivalent), et l'anneau de focus clavier. fx-swap n'a besoin d'AUCUN style propre : il ne fait que remplacer du texte dans des modules que tu as déjà stylés. ========================================================================== */ /* --- 1. Variables · SEUL BLOC À PERSONNALISER ------------------------------- Portées sur :root, car les chips servent à DEUX composants. Branchées sur les couleurs globales de Divi 5 : tu changes la couleur dans le Variable Manager, chips et carrés suivent. Le 2ᵉ argument de var() est un repli littéral — si la variable Divi disparaissait, rien ne devient invisible. */ :root { /* État sélectionné des chips */ --fxc-on-bg: var(--gcid-heading-color, #1e2224); --fxc-on-text: var(--gcid-primary-color, #f4f1ea); --fxc-on-border: var(--gcid-heading-color, #1e2224); } .fx-count { /* Carrés d'occupation. --fxc-mark DOIT différer de --fxc-fill : c'est le seul signal qui distingue un couchage libre d'un couchage occupé. */ --fxc-fill: var(--gcid-heading-color, #1e2224); --fxc-mark: var(--gcid-secondary-color, #8e988a); --fxc-bed-w: 1rem; --fxc-bed-h: 1rem; --fxc-bed-gap: 6px; --fxc-bed-stag: 0.04s; /* décalage de transition entre deux carrés */ } /* --- 2. Chips — communes à fx-count et fx-swap ------------------------------ La classe .fx-chip est posée par le JS sur le contrôle réel. Elle n'existe donc que là où un composant l'a mise : inutile de la scoper à une racine. ÉTAT SÉLECTIONNÉ — pourquoi la couleur de texte passe par une variable : Divi préfixe ses règles de bouton par `body #page-container`, donc par un ID. Aucune addition de classes ne peut les battre, et !important ne départage qu'à spécificité égale. Mais la règle de Divi LIT une variable (`color: var(--gcid-link-color)`). On redéfinit donc cette variable uniquement sur la chip active : la règle de Divi reste gagnante, elle résout simplement une autre valeur. Portée strictement locale — les chips inactives et tous les liens du site gardent la valeur de :root. */ .fx-chip { cursor: pointer; } .fx-chip.is-active.is-active { background-color: var(--fxc-on-bg) !important; border-color: var(--fxc-on-border) !important; --gcid-link-color: var(--fxc-on-text); } /* Filet de sécurité : n'entre en jeu QUE si une couleur de texte littérale est fixée dans le preset Divi — auquel cas la redéfinition ci-dessus n'aurait plus rien à intercepter. On reprend alors l'ID de Divi pour être à armes égales. Si `#page-container` n'existe pas dans le DOM, la règle est inerte. */ body #page-container .fx-chip.is-active.is-active, body #page-container .fx-chip.is-active.is-active * { color: var(--fxc-on-text) !important; } /* `currentColor` : aucune couleur imposée, l'anneau suit le texte réglé dans Divi. Ne pas supprimer — sans lui, la navigation clavier devient aveugle. */ .fx-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* --- 3. fx-count · Marques d'occupation ------------------------------------- Creux = couchage disponible · plein = couchage occupé. La rangée est intrinsèque au composant : les carrés sont toujours côte à côte. Tout le reste du placement appartient au Group Divi parent. */ .fx-count .fx-beds { display: flex; flex-wrap: wrap; gap: var(--fxc-bed-gap); } .fx-count .fx-bed { width: var(--fxc-bed-w); height: var(--fxc-bed-h); flex: 0 0 auto; box-sizing: border-box; /* Déclarations séparées, jamais le raccourci `border` : si une valeur devenait invalide, le raccourci effacerait aussi le style et l'épaisseur, et le carré disparaîtrait sans un mot. */ border-width: 1px; border-style: solid; border-color: var(--fxc-mark); border-radius: 3px; background-color: transparent; transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1); /* --fxc-i est posé à la création par le JS. Un :nth-child casserait dès que les carrés ne sont plus les premiers enfants de leur conteneur — ce qui est le cas, l'étiquette les précède. */ transition-delay: calc(var(--fxc-i, 0) * var(--fxc-bed-stag)); } .fx-count .fx-bed[data-on="1"] { background-color: var(--fxc-fill); border-color: var(--fxc-fill); } /* --- 4. Utilitaires opt-in -------------------------------------------------- À poser en CSS Class dans Divi, là où tu en as besoin. Aucun composant ne les impose. */ /* Pousse un élément au pied de sa colonne flex, si le champ Margin Top de Divi refuse la valeur `auto`. */ .fx-push-bottom { margin-top: auto; } /* Chiffres à chasse fixe. Sur un tableau de prix dont les valeurs changent au clic, des chiffres proportionnels font danser les colonnes d'une saison à l'autre — « 850 » et « 1 020 » n'occupent pas la même largeur. À poser sur toutes les cellules de prix. */ .fx-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- 5. Réduction de mouvement ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .fx-count .fx-bed { transition: none; transition-delay: 0s; } } /****************************** /* ===== fx-glass — surface translucide ====== */ .fx-glass{ --fx-glass-radius: 40px; /* Teinte unique, en composantes RGB séparées par des espaces pour pouvoir moduler l'alpha sans redéclarer la couleur. */ --fx-glass-tint: linear-gradient( 135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 100% ); --fx-glass-alpha-solid: 1; /* sans blur : porte seule la lisibilité */ --fx-glass-alpha-blur: .4; /* avec blur : le flou fait le travail */ --fx-glass-border: rgb(255 255 255 / .2); position: relative; isolation: isolate; /* borne le stacking context du contenu */ background-color: rgb(var(--fx-glass-tint) / var(--fx-glass-alpha-solid)); border: 1px solid var(--fx-glass-border); border-radius: var(--fx-glass-radius); box-shadow: 0 12px 40px rgb(0 0 0 / .28); overflow: hidden; } /* --------------------------------------------------------------------------- Voile de profondeur — indépendant de backdrop-filter. Léger reflet en haut à gauche, assombrissement en bas : c'est lui qui empêche le bloc de paraître « plat » quand le flou n'est pas rendu. z-index négatif + isolation sur le parent : passe derrière le contenu sans sortir du composant. ------------------------------------------------------------------------- */ .fx-glass::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(155deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / 0) 42%), linear-gradient(to top, rgb(var(--fx-glass-tint) / .30) 0%, rgb(var(--fx-glass-tint) / 0) 60%); } /* --------------------------------------------------------------------------- Amélioration : blur uniquement si déclaré supporté. On allège l'alpha DANS cette règle, jamais en dehors : les deux vont toujours ensemble.------------------------------------------------------------------------- */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .fx-glass{ background-color: rgb(var(--fx-glass-tint) / var(--fx-glass-alpha-blur)); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); } } /* --------------------------------------------------------------------------- Mobile : rayon réduit et flou allégé. Le backdrop-filter est recomposé à chaque frame de scroll ; 22px sur un mobile milieu de gamme dégrade l'INP de façon mesurable.------------------------------------------------------------------------- */ @media (max-width: 767px){ .fx-glass{ --fx-glass-radius: 24px; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .fx-glass{ -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } } /* --------------------------------------------------------------------------- Préférence système : transparence réduite. On coupe le flou ET on remonte l'opacité — les deux, sinon le blonc devient illisible.------------------------------------------------------------------------- */ @media (prefers-reduced-transparency: reduce){ .fx-glass{ background-color: rgb(var(--fx-glass-tint) / .96) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .fx-glass::before{ display: none; } }