/* ───────────────────────────────────────────── Base & Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ───────────────────────────────────────────── Light theme (default) ───────────────────────────────────────────── */ :root { --color-bg: #ffffff; --color-surface: #ffffff; --color-text: #111111; --color-muted: #888888; --color-border: #e8e8e8; --color-item-bg: #f4f4f4; --color-lightbox: rgba(0, 0, 0, 0.92); --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --nav-height: 64px; --max-width: 1560px; --gutter: clamp(1.25rem, 4vw, 3rem); --grid-gap: clamp(0.5rem, 1.5vw, 1.25rem); color-scheme: light; } /* ───────────────────────────────────────────── Dark purple theme Applied when: a) system prefers dark (auto) b) (manual toggle) ───────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #130d1f; --color-surface: #1c1530; --color-text: #ede7fc; --color-muted: #9b84cc; --color-border: #2e2250; --color-item-bg: #1f1838; --color-lightbox: rgba(7, 4, 14, 0.95); color-scheme: dark; } } [data-theme="dark"] { --color-bg: #130d1f; --color-surface: #1c1530; --color-text: #ede7fc; --color-muted: #9b84cc; --color-border: #2e2250; --color-item-bg: #1f1838; --color-lightbox: rgba(7, 4, 14, 0.95); color-scheme: dark; } [data-theme="light"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-text: #111111; --color-muted: #888888; --color-border: #e8e8e8; --color-item-bg: #f4f4f4; --color-lightbox: rgba(0, 0, 0, 0.92); color-scheme: light; } /* ───────────────────────────────────────────── Global ───────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); min-height: 100dvh; display: flex; flex-direction: column; transition: background-color 0.4s ease, color 0.4s ease; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } address { font-style: normal; } /* ───────────────────────────────────────────── Header / Nav ───────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 100; background-color: var(--color-surface); border-bottom: none; transition: background-color 0.4s ease, border-color 0.4s ease; } nav { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; } .logo { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: 0.01em; transition: opacity 0.2s ease; } .logo:hover { opacity: 0.5; } /* Right-side nav group */ .nav-right { display: flex; align-items: center; gap: 1.25rem; } .nav-contact { font-size: clamp(0.85rem, 1.2vw, 0.95rem); font-weight: 400; letter-spacing: 0.04em; text-transform: lowercase; transition: opacity 0.2s ease; } .nav-contact:hover { opacity: 0.5; } /* ───────────────────────────────────────────── Language switcher NL / EN ───────────────────────────────────────────── */ .lang-switcher { display: flex; align-items: center; gap: 0.3rem; font-size: clamp(0.8rem, 1.1vw, 0.9rem); letter-spacing: 0.06em; } .lang-switcher a { color: var(--color-text); text-decoration: none; opacity: 0.45; transition: opacity 0.2s ease; } .lang-switcher a:hover { opacity: 0.8; } .lang-switcher a.lang-active { opacity: 1; font-weight: 500; } .lang-switcher span { opacity: 0.35; } /* ───────────────────────────────────────────── Theme toggle button ───────────────────────────────────────────── */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--color-text); padding: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s ease, color 0.4s ease; flex-shrink: 0; } .theme-toggle:hover { opacity: 1; } /* Show moon in light mode, sun in dark mode */ .icon-sun { display: none; } .icon-moon { display: block; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-sun { display: block; } :root:not([data-theme="light"]) .icon-moon { display: none; } } /* ───────────────────────────────────────────── Mobile hamburger ───────────────────────────────────────────── */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; color: var(--color-text); padding: 6px; } .nav-toggle span { display: block; width: 22px; height: 1.5px; background-color: var(--color-text); transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.4s ease; } /* ───────────────────────────────────────────── Main ───────────────────────────────────────────── */ main { flex: 1; max-width: var(--max-width); margin: 0 auto; width: 100%; padding: 0 var(--gutter); } /* ───────────────────────────────────────────── Contact page ───────────────────────────────────────────── */ .contact-page { max-width: var(--max-width); margin: 0 auto; width: 100%; padding: 0 var(--gutter); } .contact-center { min-height: calc(100dvh - var(--nav-height)); display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(3rem, 8vw, 7rem) 0; } .contact-email { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); transition: opacity 0.2s ease, color 0.4s ease; } .contact-email:hover { opacity: 0.6; } /* ───────────────────────────────────────────── Intro ───────────────────────────────────────────── */ .intro { padding: clamp(3rem, 8vw, 7rem) 0 clamp(3.5rem, 8vw, 8rem); } .intro p { font-size: clamp(0.95rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; max-width: 32em; text-align: center; margin: 0 auto; } /* ───────────────────────────────────────────── Portfolio Grid ───────────────────────────────────────────── */ .portfolio { padding-bottom: clamp(4rem, 8vw, 8rem); } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); } /* figure wrapper — carries the entrance animation */ .portfolio-item { cursor: pointer; margin: 0; /* Entrance state: invisible and zoomed slightly in */ opacity: 0; transform: scale(1.08); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Items not yet on screen get an extra 0.3s wait before animating */ .portfolio-item.has-delay { transition-delay: 0.3s; } /* Revealed state */ .portfolio-item.is-visible { opacity: 1; transform: scale(1); } /* Image container — clips the zoom hover and contains the overlay */ .portfolio-img { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background-color: var(--color-item-bg); transition: background-color 0.4s ease; } .portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .portfolio-item:hover img { transform: scale(1.04); } /* Hover overlay */ .portfolio-overlay { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 1.25rem; opacity: 0; transition: opacity 0.3s ease; } .portfolio-item:hover .portfolio-overlay { opacity: 1; } .portfolio-overlay span { font-family: var(--font-body); font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 700; color: #111111; text-align: center; line-height: 1.2; text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6); } .portfolio-overlay .overlay-sub { font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 400; } /* ───────────────────────────────────────────── Lightbox ───────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 200; background-color: var(--color-lightbox); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background-color 0.4s ease; } .lightbox.is-open { opacity: 1; pointer-events: all; } .lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 2px; } .lightbox-close { position: absolute; top: 1.25rem; right: 1.5rem; background: none; border: none; color: #ffffff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; padding: 0.25rem 0.5rem; } .lightbox-close:hover { opacity: 1; } /* ───────────────────────────────────────────── Footer ───────────────────────────────────────────── */ footer { border-top: 1px solid var(--color-border); padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter); transition: background-color 0.4s ease, border-color 0.4s ease; } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer-copy { font-size: 0.8rem; color: var(--color-muted); letter-spacing: 0.02em; } .footer-contact a { font-size: 0.8rem; color: var(--color-muted); letter-spacing: 0.02em; transition: color 0.2s ease; } .footer-contact a:hover { color: var(--color-text); } /* ───────────────────────────────────────────── Responsive ───────────────────────────────────────────── */ /* Two columns on tablet */ @media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } } /* Single column on mobile */ @media (max-width: 560px) { .portfolio-grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { .nav-toggle { display: flex; } .nav-contact { display: none; } .nav-contact.is-open { position: fixed; inset: 0; top: var(--nav-height); background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; z-index: 99; } .intro p { font-size: clamp(1.3rem, 6vw, 1.8rem); } .intro { padding-bottom: clamp(2rem, 5vw, 3rem); } } /* ───────────────────────────────────────────── Project page ───────────────────────────────────────────── */ .project-page { max-width: var(--max-width); margin: 0 auto; width: 100%; padding: 0 var(--gutter); } /* Breadcrumb */ .project-breadcrumb { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; } .project-breadcrumb a { font-size: 0.85rem; color: var(--color-muted); letter-spacing: 0.03em; transition: color 0.2s ease; } .project-breadcrumb a:hover { color: var(--color-text); } /* Hero */ .project-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 5rem); } /* Stacked hero: titel boven, beeld volledig breed eronder */ .project-hero--stacked { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 0; } /* Stacked hero zonder beeld: behoud dezelfde onderruimte als andere pages */ .project-hero--no-media { padding-bottom: clamp(3rem, 5vw, 5rem); } .project-label { font-size: 1.2rem; font-weight: 400; color: var(--color-text); letter-spacing: 0.01em; margin-top: 0.75rem; transition: color 0.4s ease; } .project-hero h1 { font-size: clamp(1.7rem, 3.8vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .project-hero-img { overflow: hidden; aspect-ratio: 1 / 1; background-color: var(--color-item-bg); transition: background-color 0.4s ease; } .project-hero-img img { width: 100%; height: 100%; object-fit: cover; } /* Intro text + credits row */ .project-intro-row { display: grid; grid-template-columns: minmax(0, 960px) auto; gap: 0; align-items: start; padding: clamp(2rem, 4vw, 3.5rem) 0; } .project-intro-text { font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 400; line-height: 1.7; color: var(--color-text); } .project-intro-credits { display: flex; flex-direction: column; gap: 0.3rem; max-width: 350px; padding-top: 0.35rem; justify-self: end; align-items: flex-start; text-align: left; } .project-intro-credits p { font-size: 0.95rem; color: var(--color-text); letter-spacing: 0.02em; } .credit-name { text-decoration: none; } /* Keizersrande credit linkkleur (iets donkerder/meer contrast) */ .keizersrande-credit-link { color: #005f6b; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; } .keizersrande-credit-link:hover { opacity: 0.75; } @media (max-width: 600px) { .project-intro-row { grid-template-columns: 1fr; } .project-intro-credits { padding-left: 0; margin-top: 1.5rem; } .project-intro-credits p { font-size: 0.95rem; color: var(--color-text); } } /* Media sections */ .project-media { padding-bottom: clamp(2rem, 4vw, 4rem); } .project-media--grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } /* Living Lab: 2 beelden kleiner (buiten/inner marge) */ .llv-grid { padding-left: 125px; padding-right: 125px; gap: 0; } .project-media.llv-grid { padding-bottom: 40px; } @media (max-width: 900px) { .llv-grid { padding-left: 0; padding-right: 0; gap: var(--grid-gap); } } /* Living Lab: mockup boekje in masker (max hoogte 550px) */ .llv-mockup .project-img-auto { background-color: #ffffff; overflow: hidden; height: 550px; width: calc(100% - 250px); margin-left: auto; margin-right: auto; } .llv-mockup .project-img-auto img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (max-width: 900px) { .llv-mockup .project-img-auto { height: 420px; width: 100%; } } .project-media--grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--grid-gap); align-items: start; } .project-fullbleed-inner { max-width: var(--max-width); margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) var(--gutter); } /* Filmbank Groningen credit link */ .fg-credit-link { color: #3aafa0; text-decoration: underline; transition: opacity 0.2s ease; } .fg-credit-link:hover { opacity: 0.7; } /* Filmbank Groningen hero beeld */ .fg-hero-img { margin-top: 70px; max-width: 1300px; margin-left: auto; margin-right: auto; } /* Groninger Landschap full-bleed foto banner */ .gl-foto-banner { width: 100vw; margin-left: calc(50% - 50vw); height: 500px; overflow: hidden; display: flex; align-items: center; } .gl-foto-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .gl-foto-credit { margin-top: calc(0.5rem + 10px); font-size: 0.8rem; color: var(--color-muted); text-align: center; } /* Living Lab full-bleed foto banner (600px) */ .llv-foto-banner { width: 100vw; margin-left: calc(50% - 50vw); height: 400px; overflow: hidden; display: flex; align-items: center; } .llv-foto-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center calc(50% - 100px); display: block; } @media (max-width: 900px) { .llv-foto-banner { height: 320px; } } /* Groninger Landschap grids */ .gl-grid-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); padding-top: 70px; padding-bottom: 0; } .gl-grid-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); } @media (max-width: 560px) { .gl-grid-top, .gl-grid-bottom { grid-template-columns: 1fr; } } /* Specht balk 1: achtergrond SVG */ .specht-band1-bg { background-image: url('images/Specht_Veren.svg'); background-repeat: no-repeat; background-position: center center; background-size: auto 100%; } /* Specht balk 1: twee beelden naast elkaar */ .specht-band1-grid { max-width: var(--max-width); margin: 0 auto; padding: clamp(2.5rem, 4vw, 4rem) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; } .specht-band1-grid .project-img-auto img { width: 100%; height: auto; max-height: 608px; object-fit: contain; display: block; } /* Specht balk 2: website mockup */ .specht-band2-inner { max-width: var(--max-width); margin: 0 auto; padding: clamp(2.5rem, 4vw, 4rem) var(--gutter); } .specht-band2-inner .project-img-auto img { width: 70%; height: auto; display: block; margin: 0 auto; } /* Specht credit link */ .specht-credit-link { color: #3a8a78; text-decoration: underline; transition: opacity 0.2s ease; } .specht-credit-link:hover { opacity: 0.7; } @media (max-width: 560px) { .specht-band1-grid { grid-template-columns: 1fr; } } /* NISCOPS tweede balk */ .niscops-band2-grid { max-width: var(--max-width); margin: 0 auto; padding: clamp(3rem, 5vw, 5rem) var(--gutter) clamp(1.5rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; } .niscops-band2-grid .project-img-auto { display: flex; justify-content: center; align-items: center; } .niscops-band2-grid .project-img-auto:first-child { padding: 1rem 7rem; } .niscops-band2-grid .project-img-auto img { width: 100%; height: auto; max-height: 608px; object-fit: contain; display: block; } @media (max-width: 560px) { .niscops-band2-grid { grid-template-columns: 1fr; } } /* NISCOPS link kleur */ .niscops-link { color: #e84b15; text-decoration: underline; transition: opacity 0.2s ease; } .niscops-link:hover { opacity: 0.7; } /* NISCOPS hero: decoratieve SVG achtergrond */ .niscops-hero-bg { position: relative; } .niscops-hero-bg::before { content: ''; position: absolute; inset: 0; background-image: url('images/NISCOPS_bunch_1.svg'); background-repeat: no-repeat; background-position: center center; background-size: auto 100%; opacity: 0.5; pointer-events: none; z-index: 0; } .niscops-hero-bg .project-fullbleed-inner { position: relative; z-index: 1; } /* NISCOPS hero: kolommen op maat, beelden verticaal gecentreerd */ .niscops-hero-grid { grid-template-columns: 1.1fr 1.05fr 1.5fr; align-items: center; } .niscops-hero-grid .project-img-auto { display: flex; justify-content: center; align-items: center; } .niscops-hero-grid .project-img-auto img { width: auto; max-width: 100%; max-height: 608px; height: auto; display: block; } /* Image containers */ .project-img-full, .project-img-half { position: relative; background-color: var(--color-item-bg); transition: background-color 0.4s ease; overflow: hidden; } .project-img-full { aspect-ratio: 16 / 9; } .project-img-half { aspect-ratio: 4 / 3; } .project-img-full img, .project-img-half img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Natural ratio — image displays at its own proportions, no cropping */ .project-img-auto { width: 100%; background-color: var(--color-item-bg); transition: background-color 0.4s ease; } .project-img-auto img { width: 100%; height: auto; display: block; } /* Placeholder label — shown when image is missing */ .placeholder-label { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--color-muted); letter-spacing: 0.04em; } .img-placeholder .placeholder-label { display: flex; } /* Blauwe achtergrond volledig breed, beeld blijft op normale breedte */ .project-fullbleed-bg { width: 100vw; margin-left: calc(50% - 50vw); } .project-fullbleed-bg .project-img-auto { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); background-color: transparent; } /* Legacy alias voor de hero */ .project-hero-fullbleed-bg { background-color: #e4ebf3; width: 100vw; margin-left: calc(50% - 50vw); } .project-hero-fullbleed-bg .project-img-auto { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); background-color: transparent; } /* Spacer */ .project-spacer { height: clamp(3rem, 6vw, 6rem); } /* Quote block */ .project-quote { padding: clamp(3rem, 7vw, 7rem) 0; max-width: 800px; } .project-quote h2 { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.75rem; } .project-quote p { font-size: clamp(0.95rem, 1.6vw, 1.1rem); font-weight: 300; line-height: 1.75; } /* Infographic */ .project-infographic { padding-bottom: clamp(3rem, 6vw, 6rem); } /* Keizersrande: laatste illustratie (SVG) gecentreerd */ .project-infographic .kr-infographic-illustration { display: block; margin: 0 auto; width: 100%; height: auto; max-width: var(--max-width); } .project-infographic-title { text-align: center; font-size: clamp(0.95rem, 1.6vw, 1.3rem); font-style: italic; font-weight: 300; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .project-section-header { margin-bottom: 1.5rem; } .project-section-header h2 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; margin-bottom: 0.35rem; } .project-section-header p { font-size: 0.85rem; color: var(--color-muted); transition: color 0.4s ease; } /* Body text */ .project-body { max-width: 680px; padding: clamp(2rem, 4vw, 4rem) 0; } .project-body p { font-size: clamp(0.95rem, 1.6vw, 1.1rem); font-weight: 300; line-height: 1.75; } /* News section */ .project-news { padding: clamp(2rem, 5vw, 5rem) 0; border-top: 1px solid var(--color-border); transition: border-color 0.4s ease; } .project-news h2 { font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 500; margin-bottom: 2rem; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } .news-item { display: flex; flex-direction: column; gap: 0.75rem; } .news-img { position: relative; aspect-ratio: 4 / 3; background-color: var(--color-item-bg); overflow: hidden; transition: background-color 0.4s ease; margin-bottom: 0.25rem; } .news-img img { width: 100%; height: 100%; object-fit: cover; } .news-label { font-size: 0.75rem; font-weight: 400; color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.4s ease; } .news-item h3 { font-size: clamp(0.9rem, 1.4vw, 1rem); font-weight: 400; line-height: 1.5; } /* Credits */ .project-credits { padding: clamp(2rem, 4vw, 4rem) 0; border-top: 1px solid var(--color-border); display: flex; gap: 2rem; flex-wrap: wrap; transition: border-color 0.4s ease; } .project-credits p { font-size: 0.8rem; color: var(--color-muted); letter-spacing: 0.02em; transition: color 0.4s ease; } /* Bottom navigation */ .project-nav { padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 8vw, 8rem); } .project-nav-back { font-size: 0.85rem; color: var(--color-muted); letter-spacing: 0.03em; transition: color 0.2s ease; } .project-nav-back:hover { color: var(--color-text); } /* Project page responsive */ @media (max-width: 900px) { .project-hero { grid-template-columns: 1fr; } .project-hero-img { aspect-ratio: 4 / 3; } .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .project-media--grid { grid-template-columns: 1fr; } .project-media--grid3 { grid-template-columns: 1fr; gap: 4rem; } .project-media--grid3 .project-img-auto:last-child { padding-bottom: 3rem; } .project-media--grid3 .project-img-auto:first-child { padding-top: 3rem; } .news-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────── Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-duration: 0.01ms !important; } html { scroll-behavior: auto; } }