/* ============================================================ RRCHNM Games — Shared Design System Direction D: Broadside body + editorial header GMU brand fonts: Figtree · Noto Serif · Open Sans ============================================================ */ /* ── Custom properties (set per-site in ) ── */ :root { --primary: #C32A26; --primary-dark: #A02220; --primary-deep: #761815; --primary-soft: #F7E7E6; --primary-on-dark: var(--primary); --ink: #1A1A1A; --deep: #004F71; --page-bg: #FFFDF8; --dark-bg: #0F0E0C; --sans: 'Figtree', 'Open Sans', 'Franklin Gothic', system-ui, sans-serif; --serif: 'Noto Serif', 'Cambria', Georgia, serif; --body: 'Open Sans', 'Figtree', 'Franklin Gothic', system-ui, sans-serif; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img { max-width: 100%; display: block; } a { text-decoration: none; } ul, ol { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0; } /* ── Base ── */ body { font-family: var(--body); color: var(--dark-bg); background: var(--page-bg); font-size: 16px; line-height: 1.6; } /* ── Skip link ── */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary); color: #fff; padding: 8px 16px; z-index: 999; font-family: var(--sans); font-size: 13px; } .skip-link:focus { top: 0; } /* ============================================================ SITE HEADER ============================================================ */ .site-header { background: #1F1B16; color: #F4EFE6; border-bottom: 4px solid var(--primary); } .site-header__inner { max-width: 1280px; margin: 0 auto; padding: 20px 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; } /* ── Brand ── */ .brand { display: flex; align-items: center; gap: 14px; color: inherit; } .brand__text { display: flex; flex-direction: column; } .brand__name { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; /* WCAG 1.4.3 logotype exception: brand wordmark is exempt from the contrast minimum, so we use the canonical brand color. */ color: var(--primary); line-height: 1; } .brand__tagline { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #A8A095; font-weight: 600; margin-top: 5px; } /* ── Navigation ── */ .site-nav { display: flex; gap: 28px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .site-nav__link { color: #F4EFE6; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .site-nav__link:hover, .site-nav__link--active { /* Text stays cream (high contrast); the brand-color underline is the visual indicator. SC 1.4.11 (3:1) governs the underline as a non-text UI component. Defaults to --primary; sites whose primary fails 3:1 on the dark header (e.g. shipping's GMU Navy) override --primary-on-dark with a brand-approved colour that clears it. */ border-bottom-color: var(--primary-on-dark); } /* ── Hamburger toggle (hidden on desktop) ── */ .site-nav__toggle { display: none; background: transparent; border: 2px solid #F4EFE6; border-radius: 6px; width: 44px; height: 44px; padding: 0; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: inherit; } .site-nav__toggle:focus-visible { outline: 2px solid var(--primary-on-dark); outline-offset: 2px; } .site-nav__toggle-bar { display: block; width: 22px; height: 2px; background: #F4EFE6; transition: transform 0.2s, opacity 0.2s; } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) { opacity: 0; } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; border-bottom: 3px double var(--dark-bg); overflow: hidden; background: #1F1B16; } .hero__img { width: 100%; height: 460px; object-fit: cover; object-position: center 30%; display: block; filter: sepia(0.18) contrast(1.05); } .hero__img--tall { height: 520px; } .hero__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,14,12,0.15) 0%, rgba(15,14,12,0.78) 100%); } .hero__gradient--dark { background: linear-gradient(180deg, rgba(15,14,12,0.2) 0%, rgba(15,14,12,0.82) 100%); } .hero__content { position: absolute; left: 48px; right: 48px; bottom: 36px; max-width: 760px; } .hero__content--plague { bottom: 44px; max-width: 860px; } .hero__title { font-family: var(--serif); font-size: 64px; line-height: 1.04; font-weight: 700; color: #FFFDF8; letter-spacing: -0.018em; } .hero__title--plague { font-size: 88px; line-height: 0.98; letter-spacing: -0.022em; } .hero__title-accent { color: var(--primary); font-style: italic; } /* ============================================================ CTA BAR (below plague hero) ============================================================ */ .cta-bar { background: #FBF7EE; border-bottom: 1px solid var(--dark-bg); padding: 32px 48px; } .cta-bar__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; padding: 18px 36px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; cursor: pointer; border: none; } .btn--primary { background: var(--primary); color: #FFFDF8; box-shadow: 4px 4px 0 var(--dark-bg); } .btn--ghost { background: transparent; color: var(--dark-bg); border: 2px solid var(--dark-bg); } .btn--inverse { background: #FFFDF8; color: var(--primary); box-shadow: 4px 4px 0 var(--dark-bg); } .btn--contact { background: var(--primary); color: #FFFDF8; padding: 10px 18px; font-size: 11px; box-shadow: none; } .btn--download { background: var(--primary); color: #FFFDF8; padding: 12px 20px; font-size: 11px; letter-spacing: 0.22em; box-shadow: 3px 3px 0 var(--dark-bg); text-align: center; } /* Group of two CTAs side by side (used inside featured-game blocks) */ .btn-row { display: flex; flex-wrap: wrap; gap: 16px; } /* ============================================================ PAGE BODY WRAPPER ============================================================ */ .page-body { max-width: 1280px; margin: 0 auto; padding: 0 48px; } /* ============================================================ DROP CAP INTRO ============================================================ */ .drop-cap-section { padding: 64px 0; } .drop-cap-section p { font-size: 22px; line-height: 1.55; font-family: var(--body); } .drop-cap-section p::first-letter { float: left; font-family: var(--serif); font-size: 80px; line-height: 0.85; padding-right: 12px; padding-top: 8px; color: var(--primary); font-weight: 700; } .drop-cap-section--plague { max-width: 880px; margin-left: auto; margin-right: auto; } .drop-cap-section--plague p::first-letter { font-size: 84px; padding-right: 14px; } /* ============================================================ HISTORICAL IMAGE COMPONENT ============================================================ */ .hist-img { position: relative; overflow: hidden; background: #1F1B16; } .hist-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.18) contrast(1.05); } /* Game cover art: square image slot, no sepia, centered in its column. */ .hist-img--cover { background: transparent; width: 280px; max-width: 100%; margin-left: auto; margin-right: auto; } .hist-img--cover img { filter: none; /* image is square; container is square; cover = no crop, no letterbox */ } /* ============================================================ FEATURED GAME BLOCK (hub home) ============================================================ */ .featured-game { background: var(--primary); color: #FFFDF8; padding: 56px; margin-bottom: 64px; position: relative; } .featured-game__badge { position: absolute; top: -20px; left: 56px; background: #FFFDF8; padding: 6px 16px; border: 2px solid var(--dark-bg); font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--dark-bg); white-space: nowrap; } .featured-game__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; } /* When a game has no image yet, the block goes single-column */ .featured-game__grid--solo { grid-template-columns: 1fr; max-width: 760px; } .featured-game__title { font-family: var(--serif); font-size: 50px; font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; } .featured-game__meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-top: 12px; opacity: 0.9; } .featured-game__desc { font-size: 17px; line-height: 1.6; margin: 20px 0 24px; font-family: var(--body); } .featured-game__img-caption { font-family: var(--body); font-size: 11px; color: #FFFDF8; opacity: 0.85; margin-top: 8px; font-style: italic; } /* ============================================================ ORNAMENTAL RULE ============================================================ */ .orn-rule { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--primary); margin-bottom: 32px; } .orn-rule__line { flex: 1; height: 1px; background: var(--dark-bg); opacity: 0.4; } /* ============================================================ IN-DEVELOPMENT CARDS (hub home) ============================================================ */ /* Margin (not padding) so the trailing .card-section's bottom space collapses with .site-footer's 80px margin-top — otherwise we'd add to the footer gap rather than overlap it. Inter-section spacing on the games list is unaffected (collapsed margins between siblings still resolve to 32px). */ .card-section { margin-bottom: 32px; } .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .card { border: 2px solid var(--dark-bg); padding: 28px; background: var(--page-bg); } .card__meta { font-family: var(--sans); font-size: 11px; color: var(--primary); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; } .card__title { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.1; } .card__desc { margin-top: 12px; font-size: 15px; line-height: 1.55; color: #3A3530; font-family: var(--body); } /* Card variant with Play / For Teachers CTAs (Other Games) */ .card--with-cta { padding: 32px; display: flex; flex-direction: column; } .card--with-cta .card__desc { flex: 1; } .card__btn-row { margin-top: 24px; } .btn--card { padding: 14px 24px; font-size: 12px; box-shadow: 3px 3px 0 var(--dark-bg); } /* ============================================================ PERIOD IMAGE BLOCK (plague home — runaways) ============================================================ */ .period-block { margin-bottom: 56px; border: 2px solid var(--dark-bg); background: #FBF7EE; } .period-block__caption-bar { padding: 16px 24px; border-top: 1px solid var(--dark-bg); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; } .period-block__title { font-family: var(--serif); font-size: 18px; font-style: italic; } .period-block__source { font-family: var(--sans); font-size: 11px; color: #5A5648; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } /* ============================================================ THREE PILLARS (plague home) ============================================================ */ .pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 2px solid var(--dark-bg); margin-bottom: 64px; } .pillar { padding: 36px; border-right: 2px solid var(--dark-bg); background: var(--page-bg); } .pillar:last-child { border-right: none; } .pillar--alt { background: var(--primary-soft); } .pillar__accent { width: 40px; height: 4px; background: var(--primary); margin-bottom: 20px; } .pillar__title { font-family: var(--serif); font-size: 30px; font-weight: 700; margin-bottom: 12px; } .pillar__desc { font-size: 15px; line-height: 1.55; font-family: var(--body); } /* ============================================================ BANNER IMAGE (plague home — london bridge strip) ============================================================ */ .banner-img { height: 180px; margin-bottom: 64px; position: relative; overflow: hidden; background: #1F1B16; } .banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.18) contrast(1.05); } .banner-img__caption { position: absolute; left: 24px; bottom: 12px; font-family: var(--body); font-size: 11px; color: #FFFDF8; letter-spacing: 0.06em; font-style: italic; text-shadow: 0 1px 4px rgba(0,0,0,0.7); } /* ============================================================ ABOUT PAGE ============================================================ */ .about-inner { padding: 64px 0 0; max-width: 880px; margin: 0 auto; } .page-title { font-family: var(--serif); font-size: 60px; font-weight: 700; line-height: 1.05; text-align: center; letter-spacing: -0.015em; } .page-intro { font-size: 21px; line-height: 1.55; margin-top: 32px; font-family: var(--body); text-align: center; color: #3A3530; } .page-rule { display: block; border: 0; border-top: 1px solid var(--dark-bg); height: 0; /* Generous gap on both sides — the colored .featured-game block that follows on the games page has heavy visual weight, and the smaller gaps that read airy on the text-only bibliography / about pages read cramped against it. */ margin: 80px 0 56px; } .about-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--dark-bg); } .about-section__label { font-family: var(--sans); font-size: 18px; color: var(--primary); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; } .about-section__body { font-size: 18px; line-height: 1.65; font-family: var(--body); } .about-section__body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ============================================================ BIBLIOGRAPHY PAGE ============================================================ */ .bib-inner { padding: 64px 0 0; max-width: 980px; margin: 0 auto; } .bib-list { /* No top/bottom borders — the surrounding .about-section supplies the section-divider line above; the list ends naturally. */ margin: 0; } .bib-entry { padding: 8px 0 8px 28px; position: relative; } .bib-entry::before { content: ''; position: absolute; left: 4px; top: 15px; width: 10px; height: 10px; background: var(--primary); } .bib-entry__text { font-size: 17px; line-height: 1.5; font-family: var(--body); } .bib-entry__author { font-weight: 700; } .bib-entry__place { color: #5A5648; } .bib-entry__url { display: inline-block; margin-top: 4px; word-break: break-word; overflow-wrap: anywhere; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ============================================================ QUICK FACTS LIST (hub home — red-square bullets, sibling of .bib-list) ============================================================ */ .quick-facts { margin: 0; } .quick-facts__item { padding: 10px 0 10px 28px; position: relative; font-size: 17px; line-height: 1.5; } .quick-facts__item::before { content: ''; position: absolute; left: 4px; top: 17px; width: 10px; height: 10px; background: var(--primary); } .quick-facts__item a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ============================================================ GAMES LIST PAGE (hub) ============================================================ */ .games-inner { padding: 64px 0 0; } .games-list { margin-top: 56px; margin-bottom: 32px; } /* ============================================================ PEDAGOGICAL MATERIALS PAGE ============================================================ */ .pedagogy-inner { padding: 64px 0 0; max-width: 1080px; margin: 0 auto; } .page-subtitle { font-size: 19px; line-height: 1.55; margin-top: 24px; font-family: var(--body); text-align: center; color: #3A3530; max-width: 720px; margin-left: auto; margin-right: auto; } .lessons { margin-top: 56px; } .lesson { display: grid; grid-template-columns: 1fr 160px 140px; gap: 32px; padding: 28px; border-top: 1px solid var(--dark-bg); align-items: center; background: var(--page-bg); } .lesson:first-child { border-top: 3px double var(--dark-bg); } .lesson:last-child { border-bottom: 3px double var(--dark-bg); } .lesson--alt { background: var(--primary-soft); } .lesson__title { font-family: var(--serif); font-size: 26px; font-weight: 700; margin-bottom: 6px; line-height: 1.15; } .lesson__desc { font-size: 15px; line-height: 1.55; color: #3A3530; font-family: var(--body); } .lesson__meta { font-family: var(--sans); font-size: 11px; color: #5A5648; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } /* ============================================================ ARTICLE / DETAIL PAGE (prose-style content with optional PDF) ============================================================ */ .article-page { /* Standardised to the .bib-inner width (980px) for text-heavy content pages. Three site-wide widths: about-inner 880, bib-inner / article-page 980, pedagogy-inner (list) 1080. */ max-width: 980px; margin: 0 auto; /* Match the 64px top gap between site header and h1 used by the bib-inner / about-inner / pedagogy-inner wrappers. */ padding-top: 64px; } .article-page__pdf { text-align: center; /* 56px above (gap from .page-intro to button) — paired with the .page-rule margin-top override below to centre the button between the subtitle text and the rule. */ margin: 56px 0 0; } /* Pull the page-rule closer than its 80px default so the Download PDF button sits visually centred between the subtitle and the rule. */ .article-page .page-rule { margin: 56px 0 56px; } .article-page__body { font-size: 17px; line-height: 1.65; color: var(--dark-bg); } .article-page__body > * + * { margin-top: 18px; } .article-page__body h2 { font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 48px; margin-bottom: 8px; } .article-page__body h3 { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.2; margin-top: 32px; margin-bottom: 4px; } .article-page__body p { margin-top: 16px; } .article-page__body strong { font-weight: 700; } .article-page__body ol, .article-page__body ul { /* Override the global list-style: none reset for prose content. */ list-style: revert; padding-left: 28px; margin-top: 16px; } .article-page__body ol ol, .article-page__body ol ul, .article-page__body ul ol, .article-page__body ul ul { margin-top: 8px; } .article-page__body li { margin-bottom: 8px; } .article-page__body li::marker { color: var(--primary); } .article-page__body img { max-width: 100%; margin: 32px auto; border: 2px solid var(--dark-bg); background: var(--page-bg); } .article-page__body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Glossary-style definition list */ .article-page__body dl { margin-top: 24px; } .article-page__body dt { font-family: var(--serif); font-size: 19px; font-weight: 700; margin-top: 24px; } .article-page__body dd { margin-left: 0; margin-top: 4px; } /* ============================================================ SITE FOOTER ============================================================ */ .site-footer { background: var(--dark-bg); color: #D5CDB8; margin-top: 80px; border-top: 8px solid var(--primary); } .site-footer__inner { padding: 16px 48px; max-width: 1280px; margin: 0 auto; font-family: var(--sans); font-size: 11px; color: #969080; display: flex; justify-content: space-between; align-items: center; } /* ============================================================ RESPONSIVE — TABLET (≤ 960px) ============================================================ */ @media (max-width: 960px) { .site-header__inner, .page-body, .cta-bar, .site-footer__inner { padding-left: 32px; padding-right: 32px; } .hero__content { left: 32px; right: 32px; bottom: 28px; } .hero__title { font-size: 48px; } .hero__title--plague { font-size: 64px; } .hero__img { height: 380px; } .hero__img--tall { height: 420px; } .featured-game { padding: 40px; } .featured-game__grid { grid-template-columns: 1fr; gap: 32px; } .featured-game__title { font-size: 40px; } .pillars { grid-template-columns: 1fr 1fr; } .pillar:nth-child(2) { border-right: none; } .pillar:last-child { grid-column: 1 / -1; border-top: 2px solid var(--dark-bg); } .lesson { grid-template-columns: 1fr 140px; } .lesson__meta { grid-column: 2; } .lesson .btn--download { grid-column: 1 / -1; justify-self: start; } .page-title { font-size: 48px; } } /* ============================================================ RESPONSIVE — MOBILE (≤ 720px) ============================================================ */ @media (max-width: 720px) { body { font-size: 15px; } /* ── Header reorients: brand stays left, hamburger to the right ── */ .site-header__inner { grid-template-columns: 1fr auto; padding: 14px 16px; gap: 12px; } .brand { gap: 10px; min-width: 0; } .brand__name { font-size: 22px; /* keep desktop family, weight, color (var(--primary)) */ } .brand__tagline { display: none; } .site-nav__toggle { display: inline-flex; justify-self: end; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #1F1B16; border-bottom: 4px solid var(--primary); padding: 8px 0; z-index: 50; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); } .site-nav.is-open { display: flex; } .site-header { position: relative; } .site-nav__link { padding: 14px 24px; border-bottom: 1px solid rgba(244, 239, 230, 0.08); font-size: 14px; } .site-nav__link:last-child { border-bottom: none; } .site-nav__link:hover, .site-nav__link--active { background: rgba(195, 42, 38, 0.12); border-bottom-color: rgba(244, 239, 230, 0.08); } /* ── Page padding ── */ .page-body, .cta-bar, .site-footer__inner { padding-left: 20px; padding-right: 20px; } /* ── Hero ── */ .hero__img { height: 280px; } .hero__img--tall { height: 320px; } .hero__content { left: 20px; right: 20px; bottom: 20px; } .hero__title { font-size: 32px; } .hero__title--plague { font-size: 44px; } /* ── Drop cap ── */ .drop-cap-section { padding: 40px 0; } .drop-cap-section p { font-size: 18px; } .drop-cap-section p::first-letter { font-size: 60px; } .drop-cap-section--plague p::first-letter { font-size: 64px; } /* ── Featured game ── */ .featured-game { padding: 32px 24px; margin-bottom: 48px; } .featured-game__grid > * { min-width: 0; } .featured-game__badge { left: 24px; font-size: 10px; } .featured-game__title { font-size: 30px; } .featured-game__desc { font-size: 16px; } .hist-img--cover { width: 100%; max-width: 280px; } .btn { padding: 14px 24px; font-size: 12px; } .btn--primary, .btn--inverse { box-shadow: 3px 3px 0 var(--dark-bg); } .btn-row { gap: 12px; } /* ── Cards / pillars / lessons ── */ .card-grid { grid-template-columns: 1fr; gap: 20px; } .card { padding: 24px; } .card--with-cta { padding: 28px; } .card__title { font-size: 24px; } .pillars { grid-template-columns: 1fr; } .pillar { border-right: none; border-bottom: 2px solid var(--dark-bg); } .pillar:last-child { border-bottom: none; border-top: none; } .pillar__title { font-size: 24px; } .lesson { grid-template-columns: 1fr; gap: 12px; padding: 20px; } .lesson__meta, .lesson .btn--download { grid-column: 1; } .lesson__title { font-size: 22px; } /* ── Page sections ── */ .page-title { font-size: 36px; } .page-intro { font-size: 17px; } .page-subtitle { font-size: 16px; } .about-inner, .bib-inner, .games-inner, .pedagogy-inner { padding: 40px 0 0; } .about-section { margin-top: 32px; padding-top: 24px; } .about-section__label { font-size: 16px; } .about-section__body { font-size: 16px; } .orn-rule { font-size: 16px; } .bib-entry__text { font-size: 15px; } /* ── Banner / period ── */ .banner-img { height: 120px; margin-bottom: 48px; } .period-block { margin-bottom: 40px; } .period-block__caption-bar { padding: 12px 16px; } /* ── Footer ── */ .site-footer { margin-top: 56px; } .site-footer__inner { flex-direction: column; gap: 12px; text-align: center; padding-top: 20px; padding-bottom: 20px; } } /* ============================================================ RESPONSIVE — SMALL MOBILE (≤ 400px) ============================================================ */ @media (max-width: 400px) { .hero__title { font-size: 28px; } .hero__title--plague { font-size: 36px; } .featured-game__title { font-size: 26px; } .page-title { font-size: 30px; } .brand__name { font-size: 16px; } } /* ============================================================ REDUCED MOTION (WCAG 2.3.3 Animation from Interactions) ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }