/* ========================================================================= TAG ONE MOTORSPORT — Fiche pilote /pilotes/[slug] FEUILLE DE STYLE — Slater (fichier CSS de page) ------------------------------------------------------------------------- Chargement : <link> dans le head de la PAGE (pas du site), pour ne pas servir ces styles sur tout le site. Le pendant JS est slater-fiche-pilote.js. ⚠️ Ces règles complètent les classes Webflow natives (t1-pil-*) créées dans le Designer. On ne met ICI que ce que le Designer ne sait pas exprimer : pseudo-éléments (::before), pseudo-classes (:hover), enfants de Rich Text, et les media queries de mise en page fine. ========================================================================= */ /* Hooks CMS masqués */ .t1-pil-hidden{display:none !important;} [data-pil-data]{display:none !important;} [data-pil-gallery-section] .w-dyn-empty,[data-pil-spons-section] .w-dyn-empty{display:none !important;} /* ---------- Tableau saison ---------- ⚠️ Les LIGNES sont créées par le JS (renderSeason) : aucune classe Webflow native ne les couvre. TOUTE leur mise en page vit donc ICI, y compris le display:grid — miroir exact du header Webflow .t1-pil-rthead (64px 1.7fr 1fr 92px 92px 40px, gap 12px, padding 16px 22px). */ .t1-pil-rtrow{position:relative;display:grid; grid-template-columns:64px 1.7fr 1fr 92px 92px 40px;grid-column-gap:12px; align-items:center;padding:16px 22px;border-bottom:1px solid #26272b; transition:background .2s;text-decoration:none;color:#fff;} .t1-pil-rtrow:last-child{border-bottom:none;} .t1-pil-rt-round{font-family:'Saira',sans-serif;font-size:12px;font-weight:600; letter-spacing:.12em;color:#D2B461;} .t1-pil-rt-name{font-family:'Saira',sans-serif;font-size:16px;font-weight:600; color:#fff;line-height:1.3;} .t1-pil-rt-circuit{font-family:'Saira',sans-serif;font-size:13px;color:#7c818d; line-height:1.3;margin-top:2px;} .t1-pil-rt-date{font-family:'Saira',sans-serif;font-size:13px;color:#b6bcc9;} .t1-pil-rt-res{font-family:'Saira',sans-serif;font-size:15px;font-weight:600; color:#fff;text-align:center;font-variant-numeric:tabular-nums;} .t1-pil-rt-arrow{color:#7c818d;text-align:right;font-size:15px;} a.t1-pil-rtrow:hover{background:#111013;} a.t1-pil-rtrow:hover .t1-pil-rt-name{color:#D2B461;} a.t1-pil-rtrow:hover .t1-pil-rt-arrow{color:#D2B461;transform:translateX(3px);} .t1-pil-rt-arrow{transition:color .2s,transform .2s;} /* Podium : filet or à gauche */ .t1-pil-rtrow.is-podium::before{content:'';position:absolute;left:0;top:0;bottom:0; width:3px;background:#D2B461;} /* Course à venir : atténuée, non cliquable */ .t1-pil-rtrow.is-upcoming{opacity:.55;} .t1-pil-rt-res.is-pod{color:#D2B461;} .t1-pil-rt-res.is-out{color:#4a4b52;font-size:14px;font-weight:600;} .t1-pil-rt-res.is-none{color:#3a3b40;font-size:14px;font-weight:400;} .t1-pil-rt-legend i{width:10px;height:3px;background:#D2B461;display:inline-block; border-radius:2px;margin-right:7px;vertical-align:middle;} /* ---------- Bio / palmarès Rich Text ---------- */ .t1-pil-bio-rtx p{margin:0 0 20px;} .t1-pil-bio-rtx p:last-child{margin-bottom:0;} .t1-pil-bio-rtx ul{list-style:none;margin:0;padding:0;} .t1-pil-bio-rtx ul li{position:relative;padding-left:26px;margin-bottom:16px; line-height:1.6;color:#fff;font-size:17px;} .t1-pil-bio-rtx ul li::before{content:'';position:absolute;left:2px;top:11px; width:7px;height:7px;background:#D2B461;border-radius:50%;} .t1-pil-bio-rtx strong{color:#fff;font-weight:600;} .t1-pil-bio-rtx a{color:#D2B461;text-decoration:underline;text-underline-offset:3px;} /* ---------- Commanditaires : repli texte en pills ---------- */ [data-pil-spons-text] ul{list-style:none;margin:0;padding:0;display:flex; flex-wrap:wrap;justify-content:center;gap:12px;} [data-pil-spons-text] ul li{font-family:'Saira',sans-serif;font-size:13px; letter-spacing:.06em;border:1px solid #26272b;color:#d0d0d0;padding:11px 22px; border-radius:30px;background:#0d0d0f;transition:.2s;} [data-pil-spons-text] ul li:hover{border-color:#8a7539;color:#fff;} [data-pil-spons-text] p{margin:0;} /* ---------- Commanditaires ---------- ⚠️ Le FOND des cartes appartient au Designer (blanc 30 %, réglé par Simon). Aucune règle de background/border ici : pas de tuile blanche, pas de tuile foncée. On ne garde que le micro-mouvement au survol. */ .t1-pil-spons-link{overflow:hidden;} .t1-pil-spons-link img{transition:transform .25s ease;} .t1-pil-spons-link:hover img{transform:scale(1.04);} /* ---------- Galerie : rail premium (port de la fiche course) ---------- */ .t1-pil-gal-frac{position:absolute;top:-58px;right:0;display:flex;align-items:baseline; gap:6px;font-family:'Saira',sans-serif;font-weight:800;letter-spacing:-.01em; font-variant-numeric:tabular-nums;line-height:1;} .t1-pil-gal-frac .cur{font-size:clamp(30px,4vw,46px);color:#D2B461;} .t1-pil-gal-frac .sep,.t1-pil-gal-frac .tot{font-size:20px;color:#7c818d;font-weight:600;} /* Plafond 1440 centre + ancrage de la fraction (identique fiche course). */ .t1-pil-gal-wrap{position:relative;max-width:1440px;margin-left:auto;margin-right:auto; width:100%;} /* Rail : la structure (flex/overflow/gap) est portee ICI car la Collection List de la galerie pilote n'a pas de classes Webflow natives (creee via l'API). */ .t1-pil-gal-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden; padding-bottom:2px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; cursor:grab;touch-action:pan-x pan-y;scrollbar-width:none;overscroll-behavior:contain; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);} .t1-pil-gal-track::-webkit-scrollbar{display:none;} .t1-pil-gal-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;} .t1-pil-gal-slide{flex:0 0 auto;width:420px;height:280px;position:relative;overflow:hidden; border-radius:16px;scroll-snap-align:center;cursor:zoom-in;} .t1-pil-gal-img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); -webkit-user-drag:none;user-select:none;} .t1-pil-gal-slide:hover .t1-pil-gal-img{transform:scale(1.06);} .t1-pil-gal-slide::after{content:'';position:absolute;inset:0;border-radius:16px; box-shadow:inset 0 0 0 1px rgba(210,180,97,0);transition:box-shadow .3s;pointer-events:none;} .t1-pil-gal-slide:hover::after{box-shadow:inset 0 0 0 1px rgba(210,180,97,.4);} .t1-pil-gal-ctrl{display:flex;align-items:center;gap:20px;margin-top:24px; max-width:1440px;margin-left:auto;margin-right:auto;width:100%;} .t1-pil-gal-arrows{display:flex;gap:10px;flex:0 0 auto;} .t1-pil-gal-arrow{width:50px;height:50px;display:flex;align-items:center; justify-content:center;border:1px solid rgba(210,180,97,.4);background:transparent; border-radius:50%;cursor:pointer;color:#D2B461; transition:background .2s,border-color .2s,transform .1s,opacity .2s;} .t1-pil-gal-arrow:hover{background:#D2B461;color:#000;border-color:#D2B461;} .t1-pil-gal-arrow:active{transform:scale(.94);} .t1-pil-gal-arrow:disabled{opacity:.28;cursor:default;background:transparent; color:#D2B461;border-color:#26272b;} .t1-pil-gal-arrow svg{width:20px;height:20px;} .t1-pil-gal-prog{flex:1;height:2px;background:#26272b;position:relative; border-radius:2px;overflow:hidden;} .t1-pil-gal-prog .bar{position:absolute;inset:0;transform-origin:left; transform:scaleX(0);background:#D2B461;transition:transform .15s ease-out;} .t1-pil-gal-hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:#7c818d;display:flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;} .t1-pil-gal-hint svg{width:14px;height:14px;opacity:.7;} @media(max-width:640px){.t1-pil-gal-frac{top:-48px;}.t1-pil-gal-hint{display:none;}} /* ---------- Lightbox ---------- */ .t1-pl-lb{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none; align-items:center;justify-content:center;z-index:9999;opacity:0; transition:opacity .22s ease;touch-action:pan-y;} .t1-pl-lb.is-open{opacity:1;} .t1-pl-lb-stage{position:relative;width:100%;height:100%;display:flex; align-items:center;justify-content:center;padding:64px 72px;box-sizing:border-box;} .t1-pl-lb-img{max-width:100%;max-height:100%;border-radius:8px; box-shadow:0 24px 80px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none;} .t1-pl-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px; height:52px;display:flex;align-items:center;justify-content:center; border:1px solid rgba(210,180,97,.4);background:rgba(0,0,0,.45);border-radius:50%; cursor:pointer;z-index:3;transition:background .2s,border-color .2s;color:#D2B461;} .t1-pl-lb-arrow:hover{background:rgba(210,180,97,.15);border-color:#D2B461;} .t1-pl-lb-arrow svg{width:22px;height:22px;} .t1-pl-lb-prev{left:20px;}.t1-pl-lb-next{right:20px;} .t1-pl-lb-close{position:absolute;top:20px;right:22px;width:44px;height:44px; display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3; color:#e9e9e9;border:1px solid rgba(255,255,255,.16);border-radius:50%; background:rgba(0,0,0,.35);transition:.2s;} .t1-pl-lb-close:hover{color:#fff;border-color:rgba(255,255,255,.4);} .t1-pl-lb-close svg{width:18px;height:18px;} .t1-pl-lb-counter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%); font-family:'Saira',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em; color:#b6bcc9;background:rgba(0,0,0,.45);border:1px solid #26272b; padding:7px 16px;border-radius:30px;z-index:3;} .t1-pl-lb-counter b{color:#D2B461;font-weight:700;} @media(max-width:700px){.t1-pl-lb-stage{padding:56px 12px;} .t1-pl-lb-arrow{width:44px;height:44px;} .t1-pl-lb-prev{left:8px;}.t1-pl-lb-next{right:8px;}} /* ===================================================================== RESPONSIVE ⚠️ NE PAS imbriquer de commentaires ici : un « démembré » a déjà avalé tout le bloc @media 980px (règle CSS invalide → bloc entier ignoré). ===================================================================== */ @media(max-width:980px){ .t1-pil-bio-grid{grid-template-columns:1fr !important;} .t1-pil-port-grid{grid-template-columns:1fr !important;} .t1-pil-port-img{max-width:420px;} .t1-pil-stats-grid{grid-template-columns:1fr 1fr !important;} } @media(max-width:700px){ .t1-pil-hero{min-height:100dvh;} .t1-pil-hero-title{font-size:clamp(34px,10vw,52px) !important;line-height:1.05 !important; letter-spacing:-1px !important;} .t1-pil-rthead{display:none !important;} /* Ligne → carte compacte 2 niveaux (~60px), même esprit que la fiche course */ .t1-pil-rtrow{grid-template-columns:auto auto 1fr auto auto !important; column-gap:8px !important;row-gap:2px !important;padding:12px 18px !important; align-items:center !important;} .t1-pil-rtrow > *{padding-top:0 !important;padding-bottom:0 !important;} .t1-pil-rt-nameblock{grid-column:1 / 6;grid-row:1;} .t1-pil-rt-name{font-size:15px !important;line-height:1.2 !important;} .t1-pil-rt-circuit{display:none;} .t1-pil-rt-round{grid-column:1;grid-row:2;font-size:12px !important;line-height:1;} .t1-pil-rt-date{grid-column:2;grid-row:2;font-size:12px !important;line-height:1; justify-self:start;} .t1-pil-rt-date::before{content:'· ';color:#4a4b52;} .t1-pil-rt-res{grid-row:2;font-size:16px !important;line-height:1;align-self:center;} .t1-pil-rt-res.is-c1{grid-column:4;} .t1-pil-rt-res.is-c2{grid-column:5;} .t1-pil-rt-res.is-none{font-size:12px !important;} .t1-pil-rt-arrow{display:none !important;} /* Galerie mobile : masque de fondu retiré (repaint coûteux iOS) */ .t1-pil-gal-track{-webkit-mask-image:none;mask-image:none;} .t1-pil-gal-slide{width:300px !important;height:200px !important;} /* Nav pilote mobile : noms retirés, prev+next rangée 1 */ .t1-pil-nav-inner{grid-template-columns:1fr 1fr !important;grid-row-gap:20px !important;} .t1-pil-nav-side.is-prev{grid-column:1;grid-row:1;} .t1-pil-nav-side.t1-pil-nav-next{grid-column:2;grid-row:1;} .t1-pil-nav-mid{grid-column:1 / 3;grid-row:2;justify-self:center;} .t1-pil-nav-name{display:none;} /* Commanditaires mobile : grille 2 colonnes de tuiles, plus lisible qu'un flex libre (évite l'orpheline centrée en fin de rangée). */ .t1-pil-spons-track{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:10px !important;row-gap:10px !important;} .t1-pil-spons-link{width:100% !important;height:76px !important; padding:12px 14px !important;border-radius:10px !important;} /* Pas de zoom au survol sur mobile (pas de vrai hover, évite le jitter). */ .t1-pil-spons-link:hover img{transform:none;} }