/* ========================================================================== KIBI LABEL — FEUILLE DE STYLE V2 -------------------------------------------------------------------------- Interface sobre et glamour (hero plein écran, typographie Bodoni, angles nets, beaucoup d'air) avec la PALETTE TERRACOTTA D'ORIGINE. · Pas de mode sombre. · Sur ordinateur : menu latéral permanent, aucun menu hamburger. · Sur mobile/tablette : barre supérieure + menu déroulant. Feuille alternative autonome : elle remplace entièrement style.css. Pour revenir au design d'origine, remettre `style.css` dans le . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&display=swap'); /* --- PALETTE (identique à l'origine) --- */ :root { --terracotta: #bd6a59; --terracotta-fonce: #91483a; --peche-clair: #f3dcd6; --creme: #fcf9f8; --noir-profond: #4a2822; --brun-nuit: #1a0f0d; /* dégradé du hero, pied de page */ --taupe: #9b7c73; /* texte secondaire */ --sable: #e0c4bc; /* filets et contours */ --bg-navbar: rgba(252, 249, 248, 0.86); --bg-carte: #ffffff; --bg-input: #fbf8f7; --border-input: #e8d9d4; --ombre-douce: rgba(74, 40, 34, 0.08); --sidebar-w: 296px; --r-sm: 2px; --r-md: 8px; --r-lg: 12px; --font-titre: 'Bodoni Moda', 'Playfair Display', Georgia, serif; --font-texte: 'Montserrat', system-ui, sans-serif; } /* --- RESET --- */ * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { font-family: var(--font-texte); background-color: var(--creme); color: var(--noir-profond); font-weight: 300; display: flex; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* --- APPARITION AU DÉFILEMENT --- */ .reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.25,1,.5,1), transform .9s cubic-bezier(.25,1,.5,1); will-change: transform, opacity; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @keyframes fadeInGlamour { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes riseIn { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .hero-section, .page-section { animation: fadeInGlamour .9s cubic-bezier(.25,1,.5,1) forwards; } .page-transition-overlay { position: fixed; inset: 0; background-color: var(--brun-nuit); z-index: 99999; pointer-events: none; opacity: 0; } .page-transition-overlay.is-leaving { opacity: 1; pointer-events: all; transition: opacity .35s ease; } .page-transition-overlay.is-loaded { opacity: 0; transition: opacity .4s ease; } /* --- BARRE SUPÉRIEURE (mobile / tablette uniquement) --- */ .top-navbar { width: 100%; height: 84px; position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(18px, 4vw, 40px); background-color: var(--bg-navbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-input); z-index: 100; } .navbar-left { display: flex; align-items: center; gap: 22px; } .navbar-right { display: flex; align-items: center; } .menu-toggle, .menu-close { background: none; border: none; font-family: inherit; line-height: 1; } .menu-toggle:focus-visible, .menu-close:focus-visible, .nav-links a:focus-visible, .cta-button:focus-visible, .service-btn:focus-visible { outline: 1px solid var(--terracotta); outline-offset: 4px; border-radius: var(--r-sm); } .menu-toggle { font-size: 22px; color: var(--noir-profond); cursor: pointer; transition: color .3s ease; } .menu-toggle:hover { color: var(--terracotta); } .logo-container { text-align: left; } .logo { font-family: var(--font-titre); font-size: 25px; font-weight: 400; color: var(--terracotta); text-transform: uppercase; line-height: 1; display: flex; flex-direction: column; align-items: center; letter-spacing: .06em; } .logo span { font-family: var(--font-texte); font-weight: 400; font-size: 9px; letter-spacing: .42em; margin-top: 6px; margin-left: .42em; color: var(--taupe); } /* --- MENU LATÉRAL --- */ .sidebar-offcanvas { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background-color: rgba(252, 249, 248, 0.72); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); z-index: 1000; padding: 44px 32px; border-right: 1px solid rgba(232, 217, 212, 0.6); transform: translateX(-100%); transition: transform .5s cubic-bezier(.25,.46,.45,.94); display: flex; flex-direction: column; } .sidebar-offcanvas.active { transform: translateX(0); } /* Accueil uniquement : le fond de la barre latérale reprend la photo principale, floutée, sous un voile crème qui préserve la lisibilité. `--hero-img` est renseignée par script.js avec l'URL déjà chargée pour le hero : aucune image supplémentaire n'est téléchargée. */ body.home .sidebar-offcanvas { overflow: hidden; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } body.home .sidebar-offcanvas::before, body.home .sidebar-offcanvas::after { content: ''; position: absolute; pointer-events: none; } body.home .sidebar-offcanvas::before { inset: -60px; z-index: 0; background-image: var(--hero-img); background-size: cover; background-position: center 28%; filter: blur(30px) saturate(115%); } body.home .sidebar-offcanvas::after { inset: 0; z-index: 1; background-color: rgba(252, 249, 248, 0.80); } body.home .sidebar-offcanvas > * { position: relative; z-index: 2; } .sidebar-offcanvas-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 52px; } .menu-close { font-size: 24px; color: var(--noir-profond); cursor: pointer; transition: color .3s ease; } .menu-close:hover { color: var(--terracotta); } .nav-links { list-style-type: none !important; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .nav-links a { text-decoration: none; color: var(--noir-profond); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; display: block; padding: 15px 4px; border-bottom: 1px solid var(--border-input); transition: color .3s ease, padding-left .3s ease; } .nav-links a:hover { color: var(--terracotta); padding-left: 10px; } .nav-links a.active { color: var(--terracotta); } .nav-links a.active::before { content: '— '; } .page-overlay { position: fixed; inset: 0; background-color: rgba(26,15,13,.7); z-index: 900; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .page-overlay.active { opacity: 1; pointer-events: all; } /* --- CONTENU --- */ .main-content { margin-left: 0; padding-top: 84px; width: 100%; display: flex; flex-direction: column; min-height: 100vh; } /* ========================================================================== HERO — PHOTO PLEIN ÉCRAN + DÉGRADÉ EN BAS ========================================================================== */ /* La page d'accueil tient exactement dans un écran : pas de défilement. Le hero occupe tout l'espace restant au-dessus du pied de page. */ body.home .main-content { height: 100svh; } .hero-section { position: relative; display: block; flex: 1; min-height: 0; margin-top: -84px; overflow: hidden; background-color: var(--noir-profond); } .hero-image-side { position: absolute; inset: 0; width: 100%; padding: 0; display: block; z-index: 1; } .image-wrapper { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; animation: none; } .image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; border-radius: 0; display: block; /* Apparition en fondu : la photo n'est posée qu'une fois reçue de Sanity. */ opacity: 0; transition: opacity .7s ease; } .image-wrapper img.is-loaded { opacity: 1; } /* Voile haut : lisibilité de la barre */ .hero-section::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(26,15,13,.42) 0%, rgba(26,15,13,0) 22%); } /* Dégradé bas : signature de la direction */ .hero-section::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(26,15,13,0) 40%, rgba(26,15,13,.55) 72%, rgba(26,15,13,.94) 100%); } .hero-text-side { position: relative; z-index: 3; background: none; background-image: none; margin-left: 0; border-radius: 0; box-shadow: none; display: flex; align-items: flex-end; justify-content: flex-start; height: 100%; color: #fff; text-align: left; padding: 120px clamp(24px, 6vw, 72px) clamp(36px, 6vh, 68px); } /* Deux colonnes sur grand écran : marque + accroche + bouton à gauche, prestations + engagement à droite. Tout se regroupe sur petit écran. */ .hero-content { display: grid; width: 100%; max-width: 1400px; margin-inline: auto; text-align: left; grid-template-columns: minmax(0, 1fr) minmax(260px, 470px); grid-template-areas: "main aside" "cta aside"; align-items: end; column-gap: clamp(40px, 9vw, 170px); row-gap: 28px; animation: riseIn 1s cubic-bezier(.25,1,.5,1) both; animation-delay: .15s; } .hero-main { grid-area: main; } .hero-aside { grid-area: aside; text-align: right; } .hero-content > .cta-button { grid-area: cta; justify-self: start; } .hero-logo-icon { margin-bottom: 0; display: block; } .hero-logo-icon h2, .hero-subtitle-brand { font-family: var(--font-titre); font-weight: 400; color: #fff; font-size: clamp(40px, 7.4vw, 110px); line-height: .94; letter-spacing: .02em; text-transform: uppercase; margin: 0; } /* Sommaire des prestations (repris des catégories publiées dans Sanity) */ .hero-services { position: relative; font-size: clamp(11px, 1.35vw, 16px); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.96); margin: 0 0 20px; line-height: 2; padding-bottom: 20px; } .hero-services::after { content: ''; position: absolute; bottom: 0; right: 0; width: 72px; height: 1px; background: rgba(255,255,255,.45); } .hero-services:empty { display: none; } .hero-title { position: relative; font-family: var(--font-titre); font-weight: 400; font-size: clamp(16px, 2.3vw, 28px); line-height: 1.4; color: rgba(255,255,255,.94); margin: 0; padding-top: 28px; } .hero-title::before { content: ''; position: absolute; top: 10px; left: 0; width: 88px; height: 1px; background: rgba(255,255,255,.55); } /* Engagement Kibi Label */ .hero-pledge { font-size: clamp(13px, 1.5vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.86); margin: 0; max-width: 46ch; } .hero-aside .hero-pledge { margin-left: auto; } .hero-text-side .cta-button { margin-top: 0; background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff; } .hero-text-side .cta-button:hover { background: var(--creme); color: var(--noir-profond); border-color: var(--creme); } /* --- BOUTONS --- */ .cta-button, .service-btn { display: inline-block; text-align: center; padding: 15px 32px; background: var(--terracotta); color: #fff; border: 1px solid var(--terracotta); border-radius: var(--r-sm); text-decoration: none; font-family: var(--font-texte); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; box-shadow: none; transition: background-color .35s ease, color .35s ease, border-color .35s ease; } .cta-button::after, .service-btn::after { display: none; } .cta-button:hover, .service-btn:hover { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); color: #fff; } .service-btn-small { padding: 9px 18px; font-size: 10px; letter-spacing: .18em; white-space: nowrap; } .back-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; background: transparent; color: var(--noir-profond); font-family: var(--font-texte); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--sable); border-radius: var(--r-sm); cursor: pointer; margin-bottom: 28px; text-decoration: none; transition: color .3s ease, border-color .3s ease; } .back-btn:hover { color: var(--terracotta); border-color: var(--terracotta); } .back-btn i { transition: transform .3s ease; } .back-btn:hover i { transform: translateX(-3px); } .cta-button:disabled, .service-btn:disabled, #policy-next-btn:disabled { opacity: .4; cursor: not-allowed; } .cta-button:disabled:hover, .service-btn:disabled:hover, #policy-next-btn:disabled:hover { background: var(--terracotta); border-color: var(--terracotta); } /* --- WIDGET AVANT / APRÈS (posé sur la photo) --- */ .before-after-widget { background: rgba(26,15,13,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md); box-shadow: none; width: 252px; margin-top: 32px; } .widget-title { font-size: 9.5px; font-weight: 500; letter-spacing: .24em; margin-bottom: 10px; color: rgba(255,255,255,.85); text-transform: uppercase; } .ba-slider-container { position: relative; width: 100%; height: 112px; border-radius: var(--r-sm); overflow: hidden; } .ba-slider-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .img-background { z-index: 1; } .img-foreground-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; z-index: 2; } .img-foreground { width: 100%; max-width: none; } .slider-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 10; } .slider-visual-line { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: rgba(255,255,255,.9); transform: translateX(-50%); pointer-events: none; z-index: 5; } .slider-visual-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; gap: 6px; color: #fff; font-size: 13px; text-shadow: 0 2px 6px rgba(0,0,0,.7); transition: transform .3s ease; pointer-events: none; z-index: 6; } .ba-slider-container:hover .slider-visual-button { transform: translate(-50%,-50%) scale(1.15); } /* ========================================================================== SECTIONS INTÉRIEURES ========================================================================== */ .page-section { padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); flex: 1; display: flex; flex-direction: column; background: transparent; border-radius: 0; box-shadow: none; margin: 0 auto; width: 100%; max-width: 1240px; } .page-header { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); } .page-title { font-family: var(--font-titre); font-weight: 400; font-size: clamp(30px, 5vw, 52px); line-height: 1.12; color: var(--terracotta); margin-bottom: 14px; letter-spacing: .01em; } .page-subtitle { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .24em; color: var(--taupe); opacity: 1; } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .sub-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; width: 100%; } .service-card { border-radius: var(--r-md); padding: 34px; display: flex; flex-direction: column; transition: transform .4s ease, box-shadow .4s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px var(--ombre-douce); } .light-card { background-color: var(--peche-clair); color: var(--noir-profond); border: 1px solid var(--border-input); } .dark-card { background-color: var(--terracotta); color: #fff; border: 1px solid var(--terracotta); } .price-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; flex: 1; } .price-row { display: grid; grid-template-columns: minmax(0, auto) minmax(12px, 1fr) auto; grid-template-areas: "name dots price" "btn btn btn"; align-items: end; column-gap: 10px; row-gap: 14px; font-size: 14px; font-weight: 300; line-height: 1.4; width: 100%; } .service-name { grid-area: name; min-width: 0; overflow-wrap: break-word; text-wrap: pretty; } .dots { grid-area: dots; border-bottom: 1px dotted currentColor; opacity: .35; margin-bottom: 5px; } .price-amount { grid-area: price; font-weight: 500; white-space: nowrap; letter-spacing: .04em; } .price-row .service-btn-small { grid-area: btn; justify-self: end; } .sub-sub-list-container { background-color: rgba(74,40,34,.05); border-radius: var(--r-md); padding: 20px; margin-top: 16px; display: flex; flex-direction: column; gap: 16px; width: 100%; } .dark-card .sub-sub-list-container { background-color: rgba(255,255,255,.1); } .light-card .service-btn { background: var(--terracotta); color: #fff; border-color: var(--terracotta); } .light-card .service-btn:hover { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); } .dark-card .service-btn { background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; } .dark-card .service-btn:hover { background: #fff; color: var(--terracotta); border-color: #fff; } .loading-error, .empty-state { text-align: center; width: 100%; padding: 48px 20px; font-family: var(--font-texte); font-size: 14px; line-height: 1.8; color: var(--taupe); } .loading-error { color: var(--terracotta-fonce); } /* --- RÉALISATIONS --- */ .portfolio-category { margin-bottom: 64px; } .portfolio-category h3 { font-family: var(--font-titre); font-weight: 400; color: var(--terracotta); font-size: clamp(22px, 3vw, 30px); margin-bottom: 26px; border-bottom: 1px solid var(--border-input); padding-bottom: 14px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .gallery-item { border-radius: var(--r-md); overflow: hidden; box-shadow: none; aspect-ratio: 4 / 5; border: 1px solid var(--border-input); cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.25,1,.5,1); } .gallery-item:hover img { transform: scale(1.04); } .lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(26,15,13,.95); backdrop-filter: blur(10px); z-index: 100000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .lightbox.active { opacity: 1; pointer-events: all; } .lightbox img { max-width: 90%; max-height: 85vh; border-radius: var(--r-md); border: none; box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: scale(.94); transition: transform .5s cubic-bezier(.25,1,.5,1); } .lightbox.active img { transform: scale(1); } .lightbox-close { position: absolute; top: 30px; right: 40px; font-size: 30px; color: #fff; cursor: pointer; transition: color .3s ease; } .lightbox-close:hover { color: var(--peche-clair); } /* --- À PROPOS --- */ .about-container { display: flex; gap: clamp(32px, 5vw, 64px); align-items: center; } .about-image-wrapper { width: 45%; } .about-image-wrapper img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 620px; border-radius: var(--r-md); border: none; box-shadow: 0 24px 70px var(--ombre-douce); animation: riseIn .9s cubic-bezier(.25,1,.5,1) both; } .about-text { width: 55%; text-align: left; } .about-text h3 { font-family: var(--font-titre); font-weight: 400; font-size: clamp(24px, 3.2vw, 34px); color: var(--terracotta); margin-bottom: 22px; } .about-text p { font-size: 15px; line-height: 1.9; color: var(--noir-profond); margin-bottom: 16px; max-width: 62ch; } /* --- FORMULAIRES --- */ .form-container { max-width: 620px; margin: 0 auto; background: var(--bg-carte); padding: clamp(26px, 4vw, 44px); border-radius: var(--r-md); box-shadow: 0 20px 60px var(--ombre-douce); border: 1px solid var(--border-input); width: 100%; } .form-group { margin-bottom: 22px; text-align: left; } .form-group label { display: block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: var(--taupe); margin-bottom: 10px; } .form-control { width: 100%; padding: 15px; border: 1px solid var(--border-input); border-radius: var(--r-sm); font-family: var(--font-texte); font-weight: 300; font-size: 14px; background-color: var(--bg-input); color: var(--noir-profond); transition: border-color .3s ease; } .form-control:focus { outline: none; border-color: var(--terracotta); background-color: var(--bg-carte); } /* --- PIED DE PAGE --- */ .bottom-footer { background-color: var(--brun-nuit); color: var(--creme); padding: 30px clamp(20px, 4vw, 44px); display: flex; justify-content: space-between; align-items: center; margin-top: auto; width: 100%; position: relative; z-index: 105; } .contact-item { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgba(252,249,248,.85); text-decoration: none; transition: color .3s ease; } .contact-item:hover { color: var(--peche-clair); } .contact-item i { font-size: 14px; color: var(--terracotta); } /* ========================================================================== ORDINATEUR — MENU LATÉRAL PERMANENT, AUCUN HAMBURGER ========================================================================== */ @media (min-width: 1025px) { .top-navbar { display: none; } .menu-toggle, .menu-close, .page-overlay { display: none !important; } .sidebar-offcanvas { transform: none !important; box-shadow: none; padding: 52px 34px; } .sidebar-offcanvas-header { justify-content: center; margin-bottom: 56px; } .main-content { margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); padding-top: 0; } .hero-section { margin-top: 0; } .hero-text-side { padding-top: 90px; } /* Textes plus présents sur grand écran */ .hero-text-side .cta-button { font-size: 12.5px; padding: 18px 40px; } .nav-links a { font-size: 13.5px; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { /* Une seule colonne : marque, accroche, prestations, engagement, bouton. */ .hero-content { grid-template-columns: 1fr; grid-template-areas: "main" "aside" "cta"; row-gap: 20px; } .hero-aside { text-align: left; } .hero-aside .hero-pledge { margin-left: 0; } .hero-services { margin-bottom: 14px; padding-bottom: 14px; } .hero-services::after { right: auto; left: 0; } .bottom-footer { flex-wrap: wrap; gap: 18px; justify-content: center; } .services-grid { grid-template-columns: 1fr; } .about-container { flex-direction: column; } .about-image-wrapper, .about-text { width: 100%; } .about-text p { max-width: none; } } @media (max-width: 768px) { .hero-text-side { padding: 110px clamp(22px, 6vw, 40px) clamp(30px, 5vh, 52px); } .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .sidebar-offcanvas { width: 290px; padding: 36px 26px; } .bottom-footer { padding: 20px 16px; gap: 12px; } .contact-item { font-size: 10px; } } /* Écran très bas (mobile en paysage, petits portables) : on autorise le défilement plutôt que de tronquer le contenu. */ @media (max-height: 620px) { body.home .main-content { height: auto; min-height: 100svh; } .hero-section { min-height: 480px; } } @media (max-width: 480px) { .logo { font-size: 21px; } .logo span { font-size: 8px; letter-spacing: .34em; } .gallery-grid { grid-template-columns: 1fr; } .service-card { padding: 24px 20px; } .sub-sub-list-container { padding: 16px 14px; } .sub-services-grid, .services-grid { gap: 18px; } .price-row { grid-template-columns: minmax(0, auto) minmax(10px, 1fr) auto; column-gap: 6px; font-size: 13.5px; } .hero-title { font-size: 15px; padding-top: 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal-on-scroll { opacity: 1; transform: none; } }