/* ÊTRE DANS LA PEAU — home, mise en page plein écran (« stages ») Noir & blanc éditorial, grandes images, très grands textes. Couleur réservée au nuage de lieux. Fonts : Nitti (titres, mono) Light/Regular/Bold ; Nitti Grotesk (corps). Prod : woff2 + licence webfont (Bold Monday). */ /* Fontes servies par Adobe Fonts (kit Typekit vup1gyx), chargé dans le de chaque page. Familles : "nitti" (400/700), "nitti-grotesk-light" (400/500), "nitti-grotesk-black" (400/700). Plus d'auto-hébergement des .otf/.ttf → licence webfont respectée. */ :root{ --ink:#15171c; --night:#101116; --paper:#ffffff; --grey:#6c6c74; --cloud-word:#6c6c74; /* mots du nuage au repos : assombri pour passer AA (≥4.5:1) jusqu'en taille mobile */ --hair:#e3e3e6; --header-h:60px; --maxw:1180px; --gut:clamp(22px,5vw,80px); --font-mono:"nitti",ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --font-grotesk:"nitti-grotesk-black",system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --accent:var(--ink); } *{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-grotesk);font-weight:400;font-synthesis:none; font-size:18px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } a{color:inherit;} /* ---------- Header ---------- */ .site-header{position:fixed;top:0;left:0;right:0;z-index:30;border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease;} .logo{display:block;text-align:center;text-decoration:none;padding:16px var(--gut); font-family:var(--font-mono);font-weight:700;font-size:clamp(1.05rem,2.4vw,1.45rem);letter-spacing:0;color:var(--paper);transition:color .3s ease;} .site-header.scrolled{background:var(--paper);border-bottom-color:var(--hair);} .site-header.scrolled .logo{color:var(--ink);} /* ---------- Sélecteur de langue (menu déroulant) ---------- */ .lang-menu{position:absolute;top:50%;transform:translateY(-50%); right:max(calc(var(--gut) - 10px),10px);z-index:31;} .lang-menu summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px; font-family:var(--font-mono);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.85);padding:7px 8px;transition:color .25s ease;} .lang-menu summary::-webkit-details-marker{display:none;} .lang-menu summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;} .lang-menu[open] summary::after{transform:translateY(1px) rotate(-135deg);} .site-header.scrolled .lang-menu summary{color:var(--ink);} .lang-menu summary:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px;} .lang-menu ul{position:absolute;top:calc(100% + 8px);right:0;margin:0;padding:6px;list-style:none;min-width:128px; background:var(--paper);border:1px solid var(--hair);box-shadow:0 14px 30px -16px rgba(16,17,22,.4);} .lang-menu li{margin:0;} .lang-menu ul a{display:block;text-decoration:none;padding:8px 12px; font-family:var(--font-mono);font-weight:400;font-size:.8rem;letter-spacing:.04em;color:var(--ink); transition:background-color .15s ease;} .lang-menu ul a[aria-current="true"]{font-weight:700;} .lang-menu ul a:hover,.lang-menu ul a:focus-visible{background:#f0eeec;outline:none;} @media (max-width:860px){ .lang-menu summary{font-size:.72rem;padding:7px 6px;} } /* ---------- Stage (section plein écran) ---------- */ .stage{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center; padding-block:clamp(90px,14vh,160px);overflow:hidden;} .stage-inner{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);} .stage-inner.wide{max-width:1340px;} .stage.dark{color:var(--paper);} .stage-bg{position:absolute;inset:0;z-index:0;background-color:var(--night); background-image: linear-gradient(rgba(8,8,10,.45),rgba(8,8,10,.45)), radial-gradient(circle, rgba(255,255,255,.07) 1.5px, transparent 1.7px); background-size:cover, 26px 26px;background-position:center;} .stage-bg.dots{background-size:cover, 16px 16px;} .stage-bg.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;} .stage-bg[data-ph]::after{content:attr(data-ph);position:absolute;left:var(--gut);bottom:26px; font-family:var(--font-mono);font-weight:300;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);} /* ---------- Très grands titres ---------- */ .mega{font-family:var(--font-mono);font-weight:700;text-transform:uppercase; line-height:.92;letter-spacing:-.012em;margin:0; font-size:clamp(1.85rem,4.4vw,3.5rem);color:var(--paper);} .mega.ink{color:var(--ink);} .mega.centered{text-align:center;} /* Sections de lecture (prose) */ .section{padding-block:clamp(84px,11vh,138px);} .prose{max-width:72ch;margin-top:1.6rem;} .prose p{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.72;margin:0 0 1.15rem;color:#2a2c33;} .sub-title{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:1.06;font-size:clamp(1.3rem,2.4vw,2rem);color:var(--ink);margin:2.4rem 0 .6rem;} /* Nom de marque dans le corps de texte, en Nitti bold (comme le logo) */ .brand{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;font-size:.9em;letter-spacing:.04em;} /* CTA intermédiaires dans la page */ .mid-cta{padding:clamp(46px,8vh,100px) var(--gut);text-align:center;} .text-cta{margin-top:clamp(1.8rem,3.5vw,2.8rem);} .section .object-grid{margin-top:clamp(2.2rem,4vw,3.6rem);} .hero-sub{margin:1.8rem 0 0;max-width:48ch;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.5;color:rgba(255,255,255,.82);} .proof-intro{text-align:center;max-width:50ch;margin:1.2rem auto 2.4rem;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.55;color:#2a2c33;} .kicker{font-family:var(--font-mono);font-weight:300;font-size:.82rem;letter-spacing:0;text-transform:uppercase;color:var(--grey);margin:0 0 1.8rem;} .kicker.light{color:rgba(255,255,255,.7);} /* paragraphes : plus grands et plus larges */ .lead-big{font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.36;max-width:42ch;margin:2rem 0 0;color:rgba(255,255,255,.84);} .lead-big.ink,.manifesto .lead-big{color:#34363d;} .overline{font-family:var(--font-mono);font-weight:300;font-size:.9rem;letter-spacing:0;text-transform:uppercase;color:var(--grey);margin:0 0 1.1rem;} .overline.centered{text-align:center;} .overline.light{color:rgba(255,255,255,.62);} /* ---------- Hero ---------- */ .hero .mega{font-size:clamp(2.2rem,6vw,5.2rem);max-width:24ch;} .hero .hero-sub{max-width:58ch;} .scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:1; text-decoration:none;font-size:1.4rem;color:rgba(255,255,255,.75); width:46px;height:46px;display:grid;place-items:center;border-radius:50%;animation:bob 2.4s ease-in-out infinite;} @keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}} /* ---------- Image pleine ---------- */ .image-full{justify-content:flex-end;} .stage-caption{font-family:var(--font-mono);font-weight:300;font-size:clamp(1.15rem,2.4vw,1.9rem);letter-spacing:.01em;color:var(--paper);margin:0;max-width:30ch;} /* ---------- Objets (grands visuels) ---------- */ .object-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,32px);} .object-grid.two{grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.2vw,52px);} .ph-img{position:relative;background:#f2f2f4;border:1px solid var(--hair);overflow:hidden;} .ph-img.tall{aspect-ratio:4/5;max-height:calc(100vh - 220px);} .ph-img[data-ph]::after{content:attr(data-ph);position:absolute;inset:auto 0 0 0;padding:16px 18px; font-family:var(--font-mono);font-weight:300;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);} .ph-img::before{content:"";position:absolute;inset:0; background-image:radial-gradient(circle, #dddde1 1.4px, transparent 1.6px);background-size:22px 22px;opacity:.7;} /* ---------- Cartes interactives (lévitation + reflet au survol) ---------- */ /* Compo « posée » : cartes plus grandes, disposées librement, légèrement pivotées au repos, redressées + en lévitation au survol. */ .object-grid.cards{ display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start; gap:clamp(34px,5vw,76px); } .holo-item{list-style:none;margin:0;display:flex;flex-direction:column;align-items:center;} .holo-card{ position:relative;display:block;margin:0;border-radius:0; background:var(--paper);padding:0; box-shadow:0 12px 30px -16px rgba(16,17,22,.34); transform:rotate(var(--rest,0deg)); transform-style:preserve-3d;will-change:transform; transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease; } /* Formats physiques (proche du 1:1) : carte postale 15×10, marque-page 17×6,5 */ .holo-card.format-cp{width:min(19cm,90vw);} .holo-card.format-mp{width:min(21.5cm,94vw);} .holo-card svg,.holo-card img{display:block;width:100%;height:auto;border-radius:0;} .holo-card:empty{aspect-ratio:3/2;}.holo-card.format-mp:empty{aspect-ratio:956/366;} /* Rotations douces au repos pour le côté « objets posés » */ .holo-item:nth-child(3n+1) .holo-card{--rest:-2.2deg;} .holo-item:nth-child(3n+2) .holo-card{--rest:1.6deg;} .holo-item:nth-child(3n+3) .holo-card{--rest:-1deg;} .holo-card.is-live{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04); box-shadow:0 40px 70px -26px rgba(16,17,22,.45); transition:transform .09s ease-out,box-shadow .2s ease;z-index:3; } /* Halo spéculaire : blanc sur transparent. Invisible sur le papier blanc, il n'éclaircit que le braille noir qu'il traverse → le relief « accroche » la lumière. */ .holo-sheen{ position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:2; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 24%, rgba(255,255,255,0) 56%); transition:opacity .35s ease; } .holo-card.is-live .holo-sheen{opacity:1;} .holo-cap{ margin-top:14px;font-family:var(--font-mono);font-weight:300;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--grey); } @media (hover:none),(prefers-reduced-motion:reduce){ .holo-card{transform:none!important;} .holo-sheen{display:none;} } /* ---------- Preuve : chiffres géants ---------- */ .proof .stats-big{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,5vw,60px);text-align:center;} .proof .stats-big li{display:flex;flex-direction:column;align-items:center;} .stat-num{font-family:var(--font-mono);font-weight:700;line-height:.9;font-size:clamp(4.5rem,15vw,12rem);} .stat-unit{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.4rem,3vw,2.4rem);margin-top:.1rem;} .stat-label{font-size:1.1rem;color:#34363d;margin-top:1.4rem;max-width:20ch;line-height:1.4;} .source{text-align:center;font-family:var(--font-mono);font-weight:300;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:clamp(2.4rem,5vw,4rem);} /* ---------- Section chiffres sur fond noir ---------- */ .proof.dark{background:var(--ink);color:var(--paper);} .proof.dark .overline{color:rgba(255,255,255,.6);} .proof.dark .proof-intro{color:rgba(255,255,255,.82);} .proof.dark .stat-num,.proof.dark .stat-unit{color:var(--paper);} .proof.dark .stat-label{color:rgba(255,255,255,.78);} .proof.dark .source{color:rgba(255,255,255,.5);} .proof.dark .mega{margin:0 auto 1.6rem;} /* ---------- Sections teintées + mise en page texte / produits ---------- */ .tint-red{background:#f8eeec;} .tint-blue{background:#eaf1f5;} .split{display:grid;grid-template-columns:0.9fr 1.3fr;gap:clamp(34px,5vw,76px);align-items:center;} .split.media-left{grid-template-columns:1.3fr 0.9fr;} .split-text{min-width:0;} .split-text .prose{margin-top:1.4rem;} .split-media{list-style:none;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vw,44px);} .split-media .holo-item{width:96%;} .split-media .holo-card{width:100%;} .split-media .holo-card.format-cp{max-width:19cm;} .split-media .holo-card.format-mp{max-width:21.5cm;} .split.media-left .split-text{order:2;} .split.media-left .split-media{order:1;} /* léger quinconce (CMN) */ .split-media.quinconce .holo-item{width:96%;} .split-media.quinconce .holo-item:nth-child(odd){align-self:flex-start;} .split-media.quinconce .holo-item:nth-child(even){align-self:flex-end;} @media (max-width:860px){ .split,.split.media-left{grid-template-columns:1fr;gap:clamp(28px,6vw,46px);} .split.media-left .split-text,.split.media-left .split-media{order:0;} .split-media.quinconce .holo-item{width:100%;align-self:center;} } /* Cartes flottantes dans la prose (section « mémoire du tactile ») */ .float-card{margin:0;width:min(44%,15cm);box-shadow:0 12px 30px -16px rgba(16,17,22,.34);transition:transform .4s ease;transform-style:preserve-3d;will-change:transform;} .float-card svg{display:block;width:100%;height:auto;} .float-card.float-right{float:right;margin:.3rem 0 1.4rem clamp(22px,3vw,52px);} .float-card.float-left{float:left;margin:.3rem clamp(22px,3vw,52px) 1.4rem 0;} .float-card.is-live{transform:perspective(820px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.02);} @media (max-width:760px){ .float-card,.float-card.float-right,.float-card.float-left{float:none;width:min(20cm,82%);margin:1.6rem auto;} } /* Section gamme : texte et objets centrés */ .section.centered{text-align:center;} .section.centered .prose{margin-left:auto;margin-right:auto;} /* Gamme : les deux produits neutres côte à côte sous le texte */ .gamme{list-style:none;margin:clamp(2.6rem,4.5vw,3.8rem) auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start;justify-items:center;} .gamme .holo-item{display:flex;flex-direction:column;align-items:center;width:100%;} .gamme .holo-card{width:min(100%,15cm);} @media (max-width:760px){.gamme{grid-template-columns:1fr;}} /* Bandeaux citations : bande régulière plutôt que plein écran */ .stage.quote{min-height:auto;padding-block:clamp(130px,22vh,240px);} /* « Mémoire du tactile » : carte centrée verticalement à côté du texte, plus d'air */ .projet-split{margin-top:clamp(2.8rem,5.5vw,4.8rem);align-items:center;grid-template-columns:1.3fr 1fr;} .projet-split.media-left{grid-template-columns:1fr 1.3fr;} .projet-card{width:min(100%,13cm);margin:0;justify-self:center;} .text-cta{margin-top:clamp(3rem,6vw,4.8rem);} /* ---------- Citation monumentale ---------- */ .quote{justify-content:center;} .mega-quote{margin:0;max-width:26ch;font-weight:300;line-height:1.1; font-size:clamp(2.1rem,5.6vw,4.8rem);color:var(--paper);} .mega-quote cite{display:block;margin-top:1.8rem;font-family:var(--font-mono);font-weight:300;font-style:normal; font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);} /* ---------- Sur-mesure détail ---------- */ .custom-detail .object-grid{margin-top:clamp(2.4rem,4vw,3.8rem);} .aside{color:var(--grey);font-size:1rem;border-top:1px solid var(--hair);padding-top:1.4rem;margin-top:3rem;max-width:70ch;} /* ---------- Nuage de lieux (mots + carte centrale) ---------- */ .cloud{transition:background-color .5s ease;padding-block:0;background-color:#f4f4f5;} /* La section tient dans l'écran, header compris : l'image prend l'espace restant */ .cloud > .stage-inner{display:flex;flex-direction:column;min-height:100vh;min-height:100svh; padding-top:calc(var(--header-h) + clamp(20px,3.5vh,46px));padding-bottom:clamp(44px,7vh,90px);gap:clamp(1.4rem,3vh,2.6rem);} .cloud .cloud-scene{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start; gap:clamp(.9rem,2vh,1.8rem);margin:0;width:100%;max-width:1100px;align-self:center;} .cloud .venue-center{flex:1;min-height:0;display:flex;flex-direction:column;} .cloud .venue-mockup{flex:1;min-height:180px;height:auto;} .cloud .venue-line{flex:0 0 auto;margin-top:clamp(.6rem,1.5vh,1.1rem);} .cloud .mega{margin-bottom:1.1rem;} .cloud-intro{text-align:center;color:#34363d;max-width:56ch;margin:0 auto;font-size:clamp(1.05rem,1.7vw,1.35rem);} .cloud-scene{display:flex;flex-direction:column;align-items:center;gap:clamp(1.6rem,3vw,2.6rem); max-width:1100px;margin:clamp(1.4rem,2.5vw,2.4rem) auto 0;} .venue-cloud{list-style:none;margin:0;padding:0;text-align:center;max-width:1000px;line-height:1.55;} .venue-cloud li{display:inline;} .venue-btn{appearance:none;background:none;border:none;cursor:pointer;display:inline-block; padding:6px 12px;margin:1px; font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.01em; font-size:clamp(1.05rem,1.9vw,1.7rem);line-height:1.35;color:var(--cloud-word);transition:color .2s ease;} .venue-btn:hover,.venue-btn:focus-visible,.venue-btn.is-active{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;} .venue-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .venue-center{width:100%;text-align:center;} .venue-mockup{position:relative;width:100%;height:clamp(340px,66vh,820px);display:grid;place-items:center;} .venue-mockup .ph-tag{font-family:var(--font-mono);font-weight:300;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; color:var(--grey);border:1px solid var(--hair);padding:6px 11px;background:var(--paper);} /* Carte du lieu affichée dans le nuage (SVG vectorisé + reflet vernis) */ .venue-card{width:min(19cm,86%);border-radius:0;background:var(--paper); box-shadow:0 18px 44px -20px rgba(16,17,22,.42); transform-style:preserve-3d;will-change:transform; animation:venueFloat 6s ease-in-out infinite;} .venue-card svg{display:block;width:100%;height:auto;border-radius:0;} .venue-card.is-live{animation:none; transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.02); box-shadow:0 40px 72px -26px rgba(16,17,22,.5); transition:transform .09s ease-out,box-shadow .2s ease;} @keyframes venueFloat{ 0%,100%{transform:perspective(950px) translateY(0) rotateZ(-.5deg);} 50%{transform:perspective(950px) translateY(-12px) rotateZ(.5deg);}} @media (hover:none),(prefers-reduced-motion:reduce){ .venue-card{animation:none;transform:none;}} .venue-line{margin:1.2rem 0 0;font-size:1.05rem;line-height:1.4;color:var(--ink);min-height:2.8em;} .cloud-cta{flex:0 0 auto;text-align:center;margin-top:clamp(1.8rem,3.5vh,3rem);} /* ---------- CTA (bloc noir) ---------- */ .cta{text-align:center;background:var(--ink);} .cta .mega{margin:0 auto 1.6rem;} .cta-lead{max-width:52ch;margin:0 auto 2.8rem;color:rgba(255,255,255,.8);font-size:clamp(1.1rem,1.9vw,1.4rem);} .cta-actions{display:flex;flex-direction:column;gap:18px;justify-content:center;align-items:center;} /* ---------- Boutons ---------- */ .btn{display:inline-block;text-decoration:none;padding:17px 34px;border:2px solid var(--ink);border-radius:2px; font-family:var(--font-mono);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase; transition:background-color .2s ease,color .2s ease;} .btn:hover{background:var(--ink);color:var(--paper);} .btn.light{border-color:var(--paper);color:var(--paper);} .btn.light:hover{background:var(--paper);color:var(--ink);} .tel{text-decoration:none;font-family:var(--font-mono);font-size:1rem;letter-spacing:.08em;color:#34363d;} .tel.light{color:rgba(255,255,255,.8);} /* ---------- Footer ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);} .site-footer{padding-block:clamp(56px,9vh,110px);} .baseline{font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;margin:0 0 2.8rem;} .foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;color:var(--grey);font-size:.9rem;line-height:1.7;} .foot-grid a{color:var(--grey);text-decoration:none;border-bottom:1px solid var(--hair);} .foot-grid a:hover{color:var(--ink);} .foot-legal{text-align:right;} /* ---------- Focus clavier ---------- */ a:focus-visible,.btn:focus-visible,.scroll-cue:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px;} .dark a:focus-visible,.btn.light:focus-visible{outline-color:var(--paper);} /* ---------- Reveal ---------- */ .js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;} .js [data-reveal].is-visible{opacity:1;transform:none;} /* ---------- Responsive ---------- */ @media (max-width:860px){ body{font-size:17px;} .logo{font-size:clamp(.66rem,3vw,1rem);padding-inline:14px;} .object-grid,.object-grid.two{grid-template-columns:1fr;} .ph-img.tall{aspect-ratio:16/11;} .proof .stats-big{grid-template-columns:1fr;gap:clamp(36px,9vw,60px);} .stat-num{font-size:clamp(5rem,34vw,11rem);} .cloud .venue-mockup{min-height:150px;} .foot-grid{grid-template-columns:1fr;} .foot-legal{text-align:left;} } /* ---------- Mouvement réduit ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important;} .js [data-reveal]{opacity:1;transform:none;transition:none;} }