/* ===================================================== TAG ONE — Accueil v2 (page /accueil-v2) Slater CSS : fichier de page, à coller dans Slater v1.9 — session 62 (§5 Pilotes : la légende numéro/nom/rôle fait un fondu sortant au survol, le voile ne se superpose plus au texte) Historique v1.8 — session 50 (§9 simplifié : 2 gros logos statiques, règles nth-child du Logo Wall Cycle RETIRÉES avec lui) Historique v1.7 — session 50 (§9 look Osmo : 8 visibles, cases transparentes, logos blancs côté styles Webflow) Historique v1.6 — session 50 (§9 Partenaires : nb de logos visibles du Logo Wall Cycle — nth-child impossible en Webflow) Historique v1.5 — session 50 (purge des galeries A/B rejetées ; §3 Dernière course : mise en page COMPLÈTE des lignes de résultats déplacée ici — Webflow avait purgé les styles Designer t1-home-res-row/pos/who/cat, portés par aucun élément du canevas) Historique v1.4 — session 49 (§6 pièces odometer · §7 galerie collage horizontal + lightbox) ⚠️ Le CSS Slater publie, mais le est à ajouter soi-même : Réglages de la page Accueil v2 → Inside tag → (même méthode que la fiche pilote). Contenu : uniquement ce que le panneau Webflow ne sait pas faire (backdrop-filter + mask). La structure et le reste des styles vivent dans le Designer (t1-home-*). ===================================================== */ /* ---------- Progressive Blur (recette Osmo, adaptée) ---------- Structure Webflow : .t1-home-blur > 5 × .t1-home-blur-layer Chaque couche = flou croissant + masque dégradé décalé. Différenciation par nth-child : aucune classe de variante. */ .t1-home-blur-layer:nth-child(1) { -webkit-backdrop-filter: blur(.09375em); backdrop-filter: blur(.09375em); -webkit-mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%); mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%); } .t1-home-blur-layer:nth-child(2) { -webkit-backdrop-filter: blur(.1875em); backdrop-filter: blur(.1875em); -webkit-mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%); mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%); } .t1-home-blur-layer:nth-child(3) { -webkit-backdrop-filter: blur(.375em); backdrop-filter: blur(.375em); -webkit-mask: linear-gradient(#0000 75%, #000 87.5% 100%); mask: linear-gradient(#0000 75%, #000 87.5% 100%); } .t1-home-blur-layer:nth-child(4) { -webkit-backdrop-filter: blur(.75em); backdrop-filter: blur(.75em); -webkit-mask: linear-gradient(#0000 82%, #000 92% 100%); mask: linear-gradient(#0000 82%, #000 92% 100%); } .t1-home-blur-layer:nth-child(5) { -webkit-backdrop-filter: blur(1.5em); backdrop-filter: blur(1.5em); -webkit-mask: linear-gradient(#0000 88%, #000 100%); mask: linear-gradient(#0000 88%, #000 100%); } /* ---------- Countdown du widget « Prochaine course » ---------- */ .t1-home-cd-num { font-variant-numeric: tabular-nums; /* chiffres à chasse fixe, zéro tressautement */ } /* ---------- Section « Dernière course » : lignes construites par initLast ---------- ⚠️ TOUTE la mise en page vit ici (règle session 49) : ces classes ne sont portées par AUCUN élément du canevas (lignes créées en JS) et Webflow a purgé les styles Designer équivalents (session 48). */ .t1-home-res-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; column-gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); } .t1-home-res-pos { font-size: 18px; font-weight: 600; color: var(--globals--accent-color, #D2B461); font-variant-numeric: tabular-nums; } .t1-home-res-pos.is-off { color: var(--core--colors--neutral--500, #7c818d); } /* hors podium */ .t1-home-res-who { font-size: 16px; color: var(--core--colors--neutral--800, #ffffff); } .t1-home-res-cat { font-size: 13px; color: var(--core--colors--neutral--500, #7c818d); text-align: right; } /* ---------- Section « Les pilotes » : zoom photo au survol (photo, pas la carte) ---------- */ .t1-home-driver-img { transition: transform .45s cubic-bezier(.22, .61, .36, 1); } .t1-home-driver:hover .t1-home-driver-img { transform: scale(1.03); } .t1-home-driver-num { font-variant-numeric: tabular-nums; } /* ---------- Directional Hover des cartes pilotes (recette Osmo) ---------- L'état caché (translateY(-101%)) vit dans le style Webflow de .t1-home-driver-veil : sans ce fichier, le voile reste invisible. */ .t1-home-driver-veil { transition: transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform; /* ⚠️ Safari n'applique le flou d'arrière-plan QUE sous le préfixe -webkit-, et l'API de styles Webflow REFUSE les propriétés préfixées (erreur 500). Le `backdrop-filter` non préfixé vit donc dans Webflow, et son jumeau préfixé ici — sans lui, les usagers Safari voient un simple noir à 70 % sans aucun flou. Garder les deux valeurs identiques. */ -webkit-backdrop-filter: blur(12px); } /* ⚠️ Session 62 — les réglages de fond du voile vivent dans WEBFLOW (classe `t1-home-driver-veil`), PAS ici, pour garder une source unique : · `background-color: rgba(5,5,5,.7)` + `backdrop-filter: blur(12px)`. Le fond d'origine `#050505e6` (noir à 90 %) laissait transparaître la photo de façon inégale : très visible sur les cartes à photo CLAIRE, invisible sur les photos sombres. Le flou rend cette translucidité VOULUE et uniforme au lieu de subie — et il adoucit le passage du voile pendant sa course de 0,5 s, moment où la carte se découvre du côté d'où le voile arrive (c'est ce qu'on prenait pour un défaut de couverture ; le voile couvre bien `inset: 0`). · `padding: 22px 18px` (le `padding-bottom: 62px` était la réserve creusée pour ne pas tomber sur la légende — inutile depuis qu'elle s'efface). · `row-gap: 6px`. */ /* Bio courte bornée à 4 lignes dans le voile */ .t1-home-driver-veil-bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Numéro + nom repris en tête du voile (demande Simon, session 62) ---------- Le voile s'ouvre sur « 63 / ANTOINE SÉNÉCHAL », puis série, ville, bio, CTA. On ne perd plus de vue quel pilote on regarde pendant le survol. ⚠️ La STRUCTURE et les styles vivent dans WEBFLOW : bloc `t1-home-driver-veil-id` (prepend dans le voile) > `t1-home-driver-veil-num` (bindé CMS « Numéro de voiture ») + `t1-home-driver-veil-name` (bindé « Name »). `margin-bottom: auto` sur le bloc le pousse EN HAUT du voile, pendant que le reste du contenu reste calé en bas par le `justify-content: flex-end`. Seule la chasse fixe reste ici : le panneau Webflow n'expose pas `font-variant-numeric`, et sans elle le numéro tressaute entre les cartes. */ .t1-home-driver-veil-num { font-variant-numeric: tabular-nums; } /* ---------- Légende (numéro + nom + rôle) : fondu sortant au survol ---------- Sans ça, la légende reste en z-index 2 AU-DESSUS du voile pendant tout le survol : deux blocs de texte concurrents sur la même carte (constaté par Simon sur la carte de John Benoualid). Le voile monte, la légende s'efface ; au retrait, l'inverse. Rien d'autre ne bouge : positions, tailles et `padding-bottom: 62px` du voile restent tels quels. ⚠️ Borné à (hover: hover) — même garde que le JS Directional Hover : sur tactile un `:hover` reste « collé » après un tap et la légende resterait invisible. Sous 767px le voile est de toute façon retiré (règle plus bas). `visibility` accompagne l'opacité pour que la légende ne reste pas cliquable/lisible par un lecteur d'écran pendant qu'elle est invisible. */ @media (hover: hover) { .t1-home-driver-tag { transition: opacity .35s ease, visibility .35s; } .t1-home-driver:hover .t1-home-driver-tag { opacity: 0; visibility: hidden; } } /* Mobile : PAS de voile (demande Simon session 51). Le Directional Hover est déjà réservé aux appareils à survol côté JS ; ici on le retire du DOM rendu pour qu'il n'intercepte aucun tap — la carte mène directement à la fiche. */ @media (max-width: 767px) { .t1-home-driver-veil { display: none; } } /* ---------- Section « La saison » : états des manches (posés par initSeason) ---------- */ .t1-home-round.is-done .t1-home-round-name { color: var(--core--colors--neutral--500, #7c818d); } /* ⚠️ Contraste WCAG : #4c515c donnait 2,64:1 sur noir (échec Lighthouse ; minimum 4,5:1 pour du 13px). #747982 = 4,80:1, conforme, ET reste plus sombre que le #7c818d (5,38:1) des manches à venir — la hiérarchie « terminée plus terne qu'à venir » est préservée. Fenêtre utile étroite : entre #72777F (4,66:1, plancher) et #7A7F89 (5,22:1, au-delà duquel on rejoint la teinte des manches à venir et l'état ne se distingue plus). */ .t1-home-round.is-done .t1-home-round-place, .t1-home-round.is-done .t1-home-round-date { color: #747982; } .t1-home-round.is-next .t1-home-round-n, .t1-home-round.is-next .t1-home-round-date { color: var(--globals--accent-color, #D2B461); } .t1-home-round-n, .t1-home-round-date { font-variant-numeric: tabular-nums; } /* ---------- Lightbox de la galerie (clic photo → plein écran) ---------- Overlay construit par initReelLightbox. Idiome fiche course : flèches or fantômes, compteur tabulaire, fond noir profond. */ .t1-reel-lb { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.94); display: none; align-items: center; justify-content: center; } .t1-reel-lb.is-open { display: flex; } .t1-reel-lb-img { max-width: 90vw; max-height: 84vh; object-fit: contain; border-radius: 16px; } .t1-reel-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; background: none; border: 1px solid rgba(210, 180, 97, 0.5); border-radius: 50%; color: #D2B461; font-size: 22px; line-height: 1; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; } .t1-reel-lb-btn:hover { border-color: #D2B461; background-color: rgba(210, 180, 97, 0.1); } .t1-reel-lb-prev { left: 24px; } .t1-reel-lb-next { right: 24px; } .t1-reel-lb-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #D2B461; font-size: 30px; line-height: 1; cursor: pointer; } .t1-reel-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #D2B461; font-size: 14px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .t1-reel-lb-btn { width: 44px; height: 44px; font-size: 18px; } .t1-reel-lb-prev { left: 10px; } .t1-reel-lb-next { right: 10px; } .t1-reel-lb-img { max-width: 96vw; border-radius: 8px; } } /* ---------- §7 Galerie — Collage horizontal (choix final, façon landonorris.com) ---------- Sticky CSS + scrub maison (aucun pin). Le JS pose .is-light sur la section quand le fond passe au clair : les eyebrows suivent. */ .t1-hgal-sec.is-light .t1-hgal-eyebrow { color: #4c515c; } /* Mobile : MOSAÏQUE VERTICALE (décision Simon session 51). Le collage horizontal reste DESKTOP : son pilotage au scroll exige que Lenis prenne le tactile (`syncTouch`), option qui rend iOS saccadé — essayée et annulée. Et au doigt seul, 6 photos sur 8 restaient cachées. ⭐ DYNAMIQUE : `column-count` range les photos à la file dans 2 colonnes, quel que soit leur NOMBRE (8, 12, 20…) et leurs proportions. Ajouter des fiches à la collection « Galerie accueil » suffit, aucun code à toucher. On neutralise la mécanique desktop (sticky, transform, décalages de colonne) pour que le flux typographique reprenne la main. */ @media (max-width: 767px) { .t1-hgal-sec { height: auto !important; background-color: #000 !important; padding: 60px 0; } .t1-hgal-sticky { position: static; height: auto; overflow: visible; } .t1-hgal-track { display: block; /* annule le flex desktop */ width: auto; padding: 0 20px; transform: none !important; column-count: 2; column-gap: 10px; } /* Chaque colonne du collage desktop devient un simple bloc du flux ; les décalages verticaux (is-high / is-low) n'ont plus lieu d'être. ⚠️ Les variantes portent leur propre `margin-top`/`transform` : sans les neutraliser NOMMÉMENT, la 1re tuile de la colonne de droite remonte de quelques pixels et se fait rogner par le haut du cadre — ça se lit comme une fine ligne claire au-dessus de la légende (signalé par Simon). */ .t1-hgal-col, .t1-hgal-col.is-high, .t1-hgal-col.is-low { display: block; width: auto; margin-top: 0 !important; padding-top: 0 !important; transform: none !important; top: auto !important; } /* `break-inside: avoid` empêche une photo d'être coupée en deux colonnes. */ .t1-hgal-item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 10px; } /* Hauteur libre = chaque photo garde ses proportions réelles (portrait ou paysage), ce qui produit l'imbrication naturelle de la mosaïque. */ .t1-hgal-img, .t1-hgal-img.is-lg { width: 100%; height: auto; display: block; border-radius: 10px; } /* ⚠️ PAS de `margin-top` sur la légende en mosaïque : en multi-colonnes, la marge du 1er élément est absorbée en haut d'une colonne mais pas de l'autre, ce qui décalait les deux colonnes de 6px et laissait apparaître un liseré clair au-dessus de la légende de droite (signalé par Simon). On utilise `padding-top` sur la tuile, qui ne s'effondre jamais. */ .t1-hgal-eyebrow { font-size: 10px; margin-top: 0; margin-bottom: 8px; } .t1-hgal-item > .t1-hgal-eyebrow:first-child { padding-top: 2px; } } /* ---------- Image Preview Cursor Follower (recette Osmo, palette inversée) ---------- Structure Webflow : .t1-home-follower[data-follower-cursor] > .t1-home-follower-inner[data-follower-cursor-inner] > .t1-home-follower-label > .t1-home-follower-tag Le JS clone [data-follower-visual] (masqué dans chaque ligne) dans le curseur. */ .t1-home-follower-inner { opacity: 0; transform: scale(0); transition: opacity .1s ease, transform .6s cubic-bezier(.65, .1, 0, 1); } .t1-home-follower-label { opacity: 0; transform: translate(0, 100%); transition: opacity .1s ease, transform .6s cubic-bezier(.65, .1, 0, 1); } /* Le visuel cloné dans le curseur redevient visible et couvre la carte */ .t1-home-follower [data-follower-visual] { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .t1-home-follower [data-follower-visual] img { object-fit: cover; width: 100%; height: 100%; } /* Lignes non survolées atténuées pendant le survol de la liste */ [data-follower-item] { transition: opacity .2s; } @media (hover: hover) and (min-width: 992px) { body:has([data-follower-collection]:hover) .t1-home-follower-inner { opacity: 1; transform: scale(1); } body:has([data-follower-collection]:hover) .t1-home-follower-label { opacity: 1; transform: translate(0, 0); } body:has([data-follower-item]:hover) [data-follower-item]:not(:hover) { opacity: .5; } } /* Sous 992px : pas de follower (tactile), la liste reste dense et sobre */ @media (max-width: 991px) { .t1-home-follower { display: none; } } /* ============================================================ §6 La voiture — Number Odometer (recette Osmo), session 49 Pièces construites par le JS dans [data-odometer-element]. Copié tel quel de slater-lecurie.css (v1.0 session 24). ============================================================ */ [data-odometer-element] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; } [data-odometer-part="mask"], [data-odometer-part="static"] { display: inline-block; overflow: clip; padding: 0.05em; margin: -0.05em; } [data-odometer-part="roller"] { display: block; white-space: pre; text-align: center; will-change: transform; } [data-odometer-part="static"] { display: inline-block; }