/* ========================================================================== home-motion.css — chargé uniquement sur la homepage ({{ if .IsHome }}). Contient : le correctif sticky, les tokens du design system Skribi qui manquaient à style.css, et les styles des deux sections narratives (récit au scroll, citation révélée mot par mot). Rien ici ne s'applique aux autres pages. Retirer le dans head.html remet la homepage dans son état antérieur exact. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Correctif sticky — indispensable, à lire avant de toucher au reste. style.css:35-38 déclare `body, html { overflow-x: hidden }`. Quand porte un overflow non-visible, l'overflow de cesse d'être propagé au viewport : devient lui-même un conteneur de défilement, et tout position:sticky descendant colle à ce scrollport-là, qui ne défile jamais. Le récit se réduirait alors à 250vh de vide. `clip` bloque le débordement horizontal comme `hidden` mais ne crée aucun conteneur de défilement. Le moteur JS vérifie que la valeur calculée vaut bien `clip` avant de démarrer le scrub, et bascule sinon sur l'état final lisible (Safari < 16). -------------------------------------------------------------------------- */ @supports (overflow-x: clip) { html, body { overflow-x: clip; } } /* -------------------------------------------------------------------------- 2. Tokens du design system Seuls les tokens ABSENTS de style.css:240-266 sont repris ici. Volontairement exclus : - les 11 couleurs de base (--skribi-orange … --skribi-teal-light), déjà définies à valeurs identiques dans style.css ; - l'échelle --fs-small|dense|btn|body|lead|h1|h2|h3 du design system, qui est en px : la reprendre convertirait l'échelle rem du site en px et supprimerait le scaling avec la taille de police du navigateur ; - tokens/fonts.css, qui n'est qu'un @import de l'URL Google Fonts déjà présente dans head.html (un @import CSS crée une chaîne bloquante). -------------------------------------------------------------------------- */ :root { /* Couleurs complémentaires */ --skribi-cream-card: #fff8f3; --skribi-cream-top: #fcecd8; --skribi-cream-bottom: #fef6ee; --skribi-border-warm: #f0e6de; --skribi-border-peach: #f8cdb5; --skribi-border-grey: #e0e0e0; --skribi-green: #2f9d4b; --skribi-muted: #666; --skribi-white: #fff; --skribi-orange-a10: rgba(231, 86, 35, .1); --skribi-orange-a25: rgba(231, 86, 35, .25); --skribi-orange-a35: rgba(231, 86, 35, .35); --skribi-brown-a08: rgba(84, 46, 42, .08); --skribi-brown-a10: rgba(84, 46, 42, .1); --skribi-brown-a15: rgba(84, 46, 42, .15); --skribi-brown-a22: rgba(84, 46, 42, .22); /* Alias sémantiques */ --surface-card: var(--skribi-white); --surface-card-cream: var(--skribi-cream-card); --border-card: var(--skribi-border-warm); --text-on-dark: var(--skribi-white); --text-on-dark-muted: rgba(255, 255, 255, .72); /* Typographie : uniquement les rôles absents de style.css */ --fs-hero: 60px; --fs-step-num: 55px; --fs-badge: 11px; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.15; --lh-heading: 1.2; --lh-body: 1.6; --ls-press-label: .08em; --ls-step-num: -.04em; /* Rayons — la signature Skribi est le rayon asymétrique */ --radius-btn: 0 25px 0 25px; --radius-chip: 50px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 15px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 25px; /* Ombres — chaudes, larges, douces. Les boutons n'en portent jamais. */ --shadow-card: 0 6px 18px rgba(0, 0, 0, .06); --shadow-card-hover: 0 15px 36px rgba(0, 0, 0, .12); --shadow-soft-warm: 0 4px 24px var(--skribi-brown-a10); --shadow-tile: 0 12px 48px var(--skribi-brown-a15); --shadow-tile-hover: 0 24px 64px var(--skribi-brown-a22); --shadow-hero-media: 0 12px 28px rgba(0, 0, 0, .15); --shadow-story-frag: 0 18px 50px rgba(28, 15, 12, .42); --shadow-story-book: 0 48px 90px -26px rgba(12, 6, 4, .72); /* Mouvement */ --dur-fast: .2s; --dur-base: .25s; --dur-slow: .3s; --dur-reveal: .5s; --t-card: transform .25s ease, box-shadow .25s ease, border-color .25s ease; --lift-card: translateY(-8px); --lift-tile: translateY(-10px) scale(1.02); /* Mesures */ --container-max: 1200px; --content-max: 1000px; --prose-max: 800px; } /* -------------------------------------------------------------------------- 3. Récit au scroll La hauteur est déclarée ICI et non assignée par le JS (contrairement à la maquette d'origine) : sinon toutes les ancres situées sous la section se décalent de 150vh entre le premier paint et l'exécution du script, ce qui fausse le scroll sur hash et dégrade le CLS. flex: 0 0 auto est nécessaire parce que style.css:27-28 met en display:flex / flex-direction:column — sans ça la section serait comprimée. -------------------------------------------------------------------------- */ .skribi-story { position: relative; height: 250vh; flex: 0 0 auto; } .skribi-story__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; } .skribi-story__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 52% 45%; } .skribi-story__vignette { position: absolute; inset: 0; opacity: 0; background: linear-gradient(rgba(45, 27, 23, .58), rgba(45, 27, 23, .66)); } /* Fragments de souvenirs. La rotation au repos est portée par data-rot et relue par le JS : elle ne peut pas rester dans l'attribut style, que le minifier réécrit. */ .skribi-story__frag { position: absolute; background: var(--skribi-cream-card); border-radius: var(--radius-btn); padding: 14px 28px; box-shadow: var(--shadow-story-frag); } .skribi-story__frag span { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 36px); font-weight: var(--fw-bold); color: var(--skribi-text); } .skribi-story__frag--1 { top: 16%; left: 7%; transform: rotate(-3deg); } .skribi-story__frag--2 { top: 29%; left: 56%; transform: rotate(2.5deg); } .skribi-story__frag--3 { top: 61%; left: 11%; transform: rotate(1.5deg); } .skribi-story__frag--4 { top: 74%; left: 48%; transform: rotate(-2deg); } .skribi-story__frag--4 span { font-size: clamp(20px, 2.1vw, 30px); } .skribi-story__chapter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 7vw; text-align: center; } .skribi-story__eyebrow { margin: 0 0 16px; font-size: 1.2rem; font-weight: var(--fw-semibold); letter-spacing: .22em; text-transform: uppercase; color: var(--text-on-dark-muted); } .skribi-story__title { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 4vw, 60px); font-weight: var(--fw-bold); line-height: 1.14; color: var(--skribi-cream-card); text-shadow: 0 4px 30px rgba(28, 15, 12, .5); text-wrap: pretty; } .skribi-story__book { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4vh 5vw 20vh; } .skribi-story__book figure { margin: 0; width: min(940px, 90vw); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px; } .skribi-story__book img { width: 100%; height: min(54vh, 520px); object-fit: cover; border-radius: var(--radius-2xl); box-shadow: var(--shadow-story-book); } .skribi-story__book figcaption { margin: 0; font-family: var(--font-display); font-size: clamp(18px, 2vw, 28px); font-weight: var(--fw-bold); color: var(--skribi-cream-card); text-align: center; text-shadow: 0 3px 22px rgba(28, 15, 12, .6); } .skribi-story__caption { position: absolute; bottom: 56px; left: 0; right: 0; margin: 0 auto; max-width: min(620px, 86vw); text-align: center; font-size: clamp(15px, 1.6vw, 17px); line-height: var(--lh-body); color: rgba(255, 248, 243, .92); } /* Rail de progression : les 4 temps du récit */ .skribi-story__rail { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; width: 92%; } .skribi-story__step { display: flex; align-items: center; gap: 9px; opacity: .32; } .skribi-story__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--skribi-orange); transition: transform var(--dur-slow) ease; } .skribi-story__step span:last-child { font-size: 1.1rem; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 248, 243, .88); } /* -------------------------------------------------------------------------- 4. Citation révélée mot par mot -------------------------------------------------------------------------- */ .skribi-quote-section { padding: 0 0 clamp(40px, 6vw, 72px); } .skribi-quote { width: min(92%, var(--prose-max)); margin: 0 auto; background: var(--surface-card-cream); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-soft-warm); border-left: 3px solid var(--skribi-orange); } .skribi-quote p { margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.7; color: var(--skribi-text); } .skribi-quote footer { margin-top: 18px; font-size: clamp(14px, 1.5vw, 16px); font-weight: var(--fw-semibold); color: var(--skribi-text-light); } /* -------------------------------------------------------------------------- 5. Responsive Ce que les valeurs fluides ne peuvent pas exprimer : le ré-ancrage des fragments, qui déborderaient sinon horizontalement sur mobile. -------------------------------------------------------------------------- */ @media (max-width: 760px) { .skribi-story__frag { left: 50% !important; right: auto; translate: -50% 0; max-width: min(86vw, 340px); text-align: center; padding: 12px 20px; } /* Les fragments se rapprochent quand la scène rétrécit : on resserre les positions extrêmes pour qu'aucun ne sorte par le haut ou par le bas. */ .skribi-story__frag--1 { top: 18%; } .skribi-story__frag--2 { top: 34%; } .skribi-story__frag--3 { top: 54%; } .skribi-story__frag--4 { top: 70%; } .skribi-story__frag span { font-size: clamp(18px, 5vw, 26px); } .skribi-story__frag--4 span { font-size: clamp(16px, 4.4vw, 22px); } /* Le livre doit laisser la place à la légende et au rail sous lui. */ .skribi-story__book { padding: 6vh 5vw 22vh; } .skribi-story__book img { height: min(42vh, 340px); } .skribi-story__book figure { gap: 14px; } .skribi-story__caption { bottom: 88px; font-size: 14px; } .skribi-story__rail { gap: 10px 14px; } .skribi-story__step span:last-child { font-size: 1rem; letter-spacing: .08em; } } /* Très petits écrans : le rail passerait sur trois lignes et mangerait la légende. On réduit les libellés plutôt que de masquer des étapes. */ @media (max-width: 400px) { .skribi-story__rail { gap: 8px 10px; } .skribi-story__step { gap: 6px; } .skribi-story__step span:last-child { font-size: .9rem; letter-spacing: .04em; } .skribi-story__caption { bottom: 92px; } } /* -------------------------------------------------------------------------- 6. Reduced motion Le JS peint l'état final lisible du récit (voir paintReduced dans home-motion.js). Le CSS se contente de couper les keyframes ; il ne doit surtout rien masquer, sous peine de laisser une section vide. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .skribi-story__dot { transition: none; } }