/* ========================================================================== d7r Open Source — shared brand system (v1) Derived from the d7r v2 design contract (Concept C "terminal prompt"). Dark-first. Light theme adapts. Glossy glass, soft emerald glows, restrained motion. Drop this file into any d7r open source Pages site. Theme switching: . With no attribute, prefers-color-scheme decides. All colors flow through the tokens below. Hard brand rules carried from the v2 contract: - #10b981 emerald is a DARK-surface color. On light surfaces the accent is emerald-700 #047857. Never emerald-500 text on white. - Primary buttons are terminal chips: ink bg + emerald text; hover inverts. - JetBrains Mono for brand moments, eyebrows (auto ~/ prefix), numbers. - Inline SVG icons (Lucide-style, 24x24, stroke=currentColor). No emoji. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ---------- Tokens ---------- */ :root { /* Terminal core (constant across themes) */ --term: #0d1117; --term-2: #161b22; --term-3: #21262d; --term-green: #10b981; --term-green-dim: #34d399; /* Accent primitives — the per-site scheme. Emerald is the root (d7r.io). Spec sites override via . ac-dark: on-ink accent (chips, terminal, dark theme text accents) ac-light: light-surface accent (>= 4.5:1 on #f8fafc) */ --ac-dark: #10b981; --ac-dark-2: #34d399; --ac-light: #047857; --ac-light-2: #065f46; --ac-soft-light: #d1fae5; --ac-rgb: 16, 185, 129; /* The on-ink accent never changes with theme */ --accent-ink: var(--ac-dark); --accent-ink-2: var(--ac-dark-2); --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --radius: 10px; --radius-lg: 16px; --radius-xl: 22px; --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1); --dur-micro: 200ms; --dur-reveal: 550ms; } /* Dark theme (default) */ :root, :root[data-theme="dark"] { --bg: #0d1117; --bg-raise: #11161d; --ink: #e6edf3; --ink-soft: #9aa7b3; --ink-faint: #6b7683; --line: rgba(230, 237, 243, 0.09); --line-strong: rgba(230, 237, 243, 0.16); --accent: var(--ac-dark); --accent-strong: var(--ac-dark-2); --accent-soft: rgba(var(--ac-rgb), 0.12); --accent-line: rgba(var(--ac-rgb), 0.35); --glass: rgba(22, 27, 34, 0.66); --glass-strong: rgba(22, 27, 34, 0.88); --glass-line: rgba(230, 237, 243, 0.10); --glass-shine: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 38%, rgba(255,255,255,0) 60%); --glow-a: rgba(var(--ac-rgb), 0.16); --glow-b: rgba(var(--ac-rgb), 0.09); --card-glow: 0 0 0 1px var(--glass-line), 0 8px 40px rgba(0, 0, 0, 0.35); --card-glow-hover: 0 0 0 1px var(--accent-line), 0 10px 44px rgba(0, 0, 0, 0.4), 0 0 34px rgba(var(--ac-rgb), 0.10); --chip-ink: var(--term); --logo-ink: #e6edf3; --logo-em: var(--ac-dark); color-scheme: dark; } /* Light theme */ :root[data-theme="light"] { --bg: #f8fafc; --bg-raise: #ffffff; --ink: #0d1117; --ink-soft: #475569; --ink-faint: #64748b; --line: rgba(13, 17, 23, 0.10); --line-strong: rgba(13, 17, 23, 0.18); --accent: var(--ac-light); /* the light-surface contrast rule */ --accent-strong: var(--ac-light-2); --accent-soft: var(--ac-soft-light); --accent-line: rgba(var(--ac-rgb), 0.45); --glass: rgba(255, 255, 255, 0.82); --glass-strong: rgba(255, 255, 255, 0.94); --glass-line: rgba(13, 17, 23, 0.10); --glass-shine: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 38%, rgba(255,255,255,0) 60%); --glow-a: rgba(var(--ac-rgb), 0.14); --glow-b: rgba(var(--ac-rgb), 0.08); --card-glow: 0 1px 3px rgba(2, 6, 23, 0.07), 0 8px 30px rgba(2, 6, 23, 0.06); --card-glow-hover: 0 0 0 1px var(--accent-line), 0 10px 36px rgba(2, 6, 23, 0.10), 0 0 30px rgba(var(--ac-rgb), 0.12); --chip-ink: var(--term); --logo-ink: #0d1117; --logo-em: var(--ac-light); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f8fafc; --bg-raise: #ffffff; --ink: #0d1117; --ink-soft: #475569; --ink-faint: #64748b; --line: rgba(13,17,23,0.10); --line-strong: rgba(13,17,23,0.18); --accent: var(--ac-light); --accent-strong: var(--ac-light-2); --accent-soft: var(--ac-soft-light); --accent-line: rgba(var(--ac-rgb), 0.45); --glass: rgba(255,255,255,0.82); --glass-strong: rgba(255,255,255,0.94); --glass-line: rgba(13,17,23,0.10); --glass-shine: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 38%, rgba(255,255,255,0) 60%); --glow-a: rgba(var(--ac-rgb), 0.14); --glow-b: rgba(var(--ac-rgb), 0.08); --card-glow: 0 1px 3px rgba(2,6,23,0.07), 0 8px 30px rgba(2,6,23,0.06); --card-glow-hover: 0 0 0 1px rgba(var(--ac-rgb), 0.45), 0 10px 36px rgba(2,6,23,0.10), 0 0 30px rgba(var(--ac-rgb), 0.12); --logo-ink: #0d1117; --logo-em: var(--ac-light); color-scheme: light; } } /* ---------- Per-spec accent schemes ---------- The brand constant is the system: ink, glass, mono, motion. The accent is the one degree of freedom each spec owns. Site-wide: set data-accent on . Scoped preview (e.g. a card on the index): set data-accent on the element; the scoped blocks below re-derive the final tokens there. */ :root[data-accent="abr"], [data-accent="abr"].ac-scope { --ac-dark: #818cf8; --ac-dark-2: #a5b4fc; --ac-light: #4338ca; --ac-light-2: #3730a3; --ac-soft-light: #e0e7ff; --ac-rgb: 129, 140, 248; } :root[data-accent="derp"], [data-accent="derp"].ac-scope { --ac-dark: #fb923c; --ac-dark-2: #fdba74; --ac-light: #c2410c; --ac-light-2: #9a3412; --ac-soft-light: #ffedd5; --ac-rgb: 251, 146, 60; } :root[data-accent="saga"], [data-accent="saga"].ac-scope { --ac-dark: #22d3ee; --ac-dark-2: #67e8f9; --ac-light: #0e7490; --ac-light-2: #155e75; --ac-soft-light: #cffafe; --ac-rgb: 34, 211, 238; } :root[data-accent="ghost"], [data-accent="ghost"].ac-scope { --ac-dark: #c084fc; --ac-dark-2: #d8b4fe; --ac-light: #7e22ce; --ac-light-2: #6b21a8; --ac-soft-light: #f3e8ff; --ac-rgb: 192, 132, 252; } :root[data-accent="blueprint"], [data-accent="blueprint"].ac-scope { --ac-dark: #60a5fa; --ac-dark-2: #93c5fd; --ac-light: #1d4ed8; --ac-light-2: #1e40af; --ac-soft-light: #dbeafe; --ac-rgb: 96, 165, 250; } /* Scoped accent: re-derive the final tokens on the element itself, because custom properties resolve at the element that defines them. Theme-aware. */ .ac-scope { --accent: var(--ac-dark); --accent-strong: var(--ac-dark-2); --accent-soft: rgba(var(--ac-rgb), 0.12); --accent-line: rgba(var(--ac-rgb), 0.35); --accent-ink: var(--ac-dark); --accent-ink-2: var(--ac-dark-2); --logo-em: var(--ac-dark); --card-glow-hover: 0 0 0 1px var(--accent-line), 0 10px 44px rgba(0,0,0,0.4), 0 0 34px rgba(var(--ac-rgb), 0.10); } :root[data-theme="light"] .ac-scope { --accent: var(--ac-light); --accent-strong: var(--ac-light-2); --accent-soft: var(--ac-soft-light); --accent-line: rgba(var(--ac-rgb), 0.45); --logo-em: var(--ac-light); --card-glow-hover: 0 0 0 1px var(--accent-line), 0 10px 36px rgba(2,6,23,0.10), 0 0 30px rgba(var(--ac-rgb), 0.12); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .ac-scope { --accent: var(--ac-light); --accent-strong: var(--ac-light-2); --accent-soft: var(--ac-soft-light); --accent-line: rgba(var(--ac-rgb), 0.45); --logo-em: var(--ac-light); --card-glow-hover: 0 0 0 1px var(--accent-line), 0 10px 36px rgba(2,6,23,0.10), 0 0 30px rgba(var(--ac-rgb), 0.12); } } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--bg); } a { color: var(--accent); text-decoration: none; transition: color var(--dur-micro) ease; } a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; } .wrap { max-width: 66rem; margin: 0 auto; padding: 0 1.4rem; } /* ---------- Ambient aurora (soft glows) ---------- */ .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } .aurora::before { width: 52vw; height: 52vw; min-width: 480px; min-height: 480px; top: -18vw; right: -12vw; background: radial-gradient(circle, var(--glow-a) 0%, transparent 65%); animation: drift-a 26s ease-in-out infinite alternate; } .aurora::after { width: 44vw; height: 44vw; min-width: 400px; min-height: 400px; bottom: -16vw; left: -10vw; background: radial-gradient(circle, var(--glow-b) 0%, transparent 65%); animation: drift-b 32s ease-in-out infinite alternate; } @keyframes drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-6vw, 5vh, 0); } } @keyframes drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(5vw, -4vh, 0); } } /* Faint dot grid behind hero */ .gridfield { position: absolute; inset: 0 0 auto 0; height: 640px; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 72%); } /* ---------- Terminal-prompt logo ---------- */ .logo { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; color: var(--logo-ink); text-decoration: none !important; display: inline-flex; align-items: baseline; white-space: nowrap; } .logo:hover { color: var(--logo-ink); } .logo .em { color: var(--logo-em); } .logo .cursor { display: inline-block; width: 0.56em; height: 1.06em; background: var(--logo-em); margin-left: 0.18em; transform: translateY(0.16em); animation: blink 1.15s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---------- Eyebrow (mono, auto ~/ prefix) ---------- */ .eyebrow { font-family: var(--mono); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--accent); } .eyebrow::before { content: "~/"; opacity: 0.65; margin-right: 1px; } /* ---------- Masthead (floating glass) ---------- */ .masthead { position: sticky; top: 0.9rem; z-index: 50; margin: 0.9rem auto 0; max-width: 66rem; padding: 0 1.4rem; } .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.68rem 1.15rem; background: var(--glass); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--glass-line); border-radius: 14px; box-shadow: var(--card-glow); } .masthead nav { display: flex; align-items: center; gap: 0.35rem; } .masthead nav a { color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; padding: 0.45rem 0.75rem; border-radius: 8px; text-decoration: none !important; transition: color var(--dur-micro) ease, background-color var(--dur-micro) ease; } .masthead nav a:hover { color: var(--ink); background: var(--accent-soft); } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 0.3rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: color var(--dur-micro) ease, border-color var(--dur-micro) ease, background-color var(--dur-micro) ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .theme-toggle svg { width: 18px; height: 18px; } :root[data-theme="light"] .icon-sun, :root:not([data-theme]) .icon-sun { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .icon-sun { display: none; } :root:not([data-theme]) .icon-moon { display: block; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .icon-sun { display: block; } :root:not([data-theme]) .icon-moon { display: none; } } /* ---------- Buttons (terminal chips) ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.72rem 1.35rem; min-height: 44px; font-family: var(--font); font-weight: 700; font-size: 0.95rem; border-radius: 10px; border: 1px solid var(--line-strong); cursor: pointer; text-decoration: none !important; white-space: nowrap; color: var(--ink); transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease, border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease; } .btn-primary { font-family: var(--mono); font-weight: 700; background: var(--term); color: var(--accent-ink); border-color: rgba(var(--ac-rgb), 0.24); box-shadow: 0 0 22px rgba(var(--ac-rgb), 0.12); } .btn-primary:hover { background: var(--accent-ink); color: var(--term); border-color: var(--accent-ink); box-shadow: 0 0 30px rgba(var(--ac-rgb), 0.35); } .btn-secondary { background: transparent; color: var(--ink); } .btn-secondary:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); } .btn-sm { padding: 0.42rem 0.85rem; min-height: 36px; font-size: 0.84rem; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 5.2rem 0 3.6rem; } .hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 3.2rem; align-items: center; } .hero .hero-grid h1 { font-size: clamp(2.35rem, 3.6vw, 3.15rem); max-width: none; } @media (max-width: 58rem) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { font-size: clamp(2.6rem, 6vw, 4.1rem); margin: 0.9rem 0 0.4rem; max-width: 17ch; } .hero h1 .accent-word { color: var(--accent); } .hero .expansion { font-family: var(--mono); color: var(--ink-faint); font-size: 0.95rem; } .hero .thesis { font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); max-width: 44rem; margin: 1.3rem 0 1.6rem; } .hero .actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.7rem; } /* Status flag */ .status-flag { display: flex; gap: 0.7rem; align-items: flex-start; max-width: 44rem; padding: 0.85rem 1.05rem; background: var(--glass); border: 1px solid var(--glass-line); border-left: 3px solid var(--accent); border-radius: 10px; font-size: 0.92rem; color: var(--ink-soft); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .status-flag strong { color: var(--ink); } .status-flag svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 3px; } /* Terminal specimen card */ .termcard { background: var(--term); border: 1px solid rgba(var(--ac-rgb), 0.2); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px rgba(var(--ac-rgb), 0.08), 0 18px 60px rgba(0,0,0,0.45), 0 0 60px rgba(var(--ac-rgb), 0.07); overflow: hidden; font-family: var(--mono); font-size: 0.86rem; } .termcard-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 1rem; border-bottom: 1px solid #21262d; } .termcard-bar i { width: 11px; height: 11px; border-radius: 50%; background: #30363d; } .termcard-bar i:first-child { background: rgba(220, 38, 38, 0.55); } .termcard-bar i:nth-child(2) { background: rgba(202, 138, 4, 0.55); } .termcard-bar i:nth-child(3) { background: rgba(16, 185, 129, 0.55); } .termcard-bar span { margin-left: auto; color: #6b7683; font-size: 0.72rem; } .termcard-body { padding: 1.1rem 1.2rem 1.3rem; line-height: 1.85; color: #9aa7b3; overflow-x: auto; white-space: pre; } .termcard-body .blink { color: var(--accent-ink); animation: blink 1.15s steps(1) infinite; } .termcard-body .p { color: var(--accent-ink-2); } .termcard-body .k { color: #e6edf3; } .termcard-body .c { color: #6b7683; } /* ---------- Sections ---------- */ section { position: relative; padding: 4.2rem 0; } .section-head { margin-bottom: 2rem; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-top: 0.55rem; } .section-head p.lede { color: var(--ink-soft); max-width: 46rem; margin-top: 0.7rem; font-size: 1.05rem; } .rule { border: 0; border-top: 1px solid var(--line); } /* ---------- Stack diagram ---------- */ .families { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.6rem; } @media (max-width: 46rem) { .families { grid-template-columns: 1fr; } } .family { padding: 1.4rem; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--card-glow); background-image: var(--glass-shine); } .family h3 { font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.55rem; } .family h3 svg { width: 18px; height: 18px; color: var(--accent); } .family-note { font-size: 0.88rem; color: var(--ink-faint); margin-top: 0.95rem; } .stack { display: flex; flex-direction: column; gap: 0.55rem; } .layer { display: flex; align-items: baseline; gap: 0.85rem; padding: 0.72rem 0.95rem; background: var(--bg-raise); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; transition: border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease; } .layer:hover { border-color: var(--accent-line); box-shadow: 0 0 18px rgba(16, 185, 129, 0.10); } .layer-name { font-family: var(--mono); font-weight: 700; min-width: 6.2rem; font-size: 0.92rem; } .layer-what { color: var(--ink-soft); font-size: 0.92rem; } .layer-link { display: inline-block; width: 0; border-left: 1px dashed var(--line-strong); height: 0.55rem; margin-left: 3.2rem; } /* ---------- Spec cards (numbered, editorial) ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1.3rem; } .card { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.2rem; background: var(--glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--card-glow); background-image: var(--glass-shine); transition: box-shadow 280ms var(--ease-fluid), border-color 280ms var(--ease-fluid); } .card:hover { box-shadow: var(--card-glow-hover); border-color: var(--accent-line); } .card .num { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.04em; } .card header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: 0.55rem; padding-top: 0.7rem; border-top: 1px solid var(--line); } .card h3 { font-size: 1.3rem; } .role { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 0.18rem 0.6rem; white-space: nowrap; } .card .answers { font-weight: 700; margin: 0.7rem 0 0.35rem; } .card p { font-size: 0.94rem; color: var(--ink-soft); margin: 0.3rem 0; } .card footer { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .card footer .meta { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; } /* ---------- Registry strip ---------- */ .registry-strip { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; padding: 1.6rem 1.7rem; background: var(--term); border: 1px solid rgba(var(--ac-rgb), 0.2); border-radius: var(--radius-lg); box-shadow: 0 0 50px rgba(var(--ac-rgb), 0.07); } .registry-strip .rs-copy { max-width: 34rem; } .registry-strip h2 { color: #e6edf3; font-size: 1.35rem; } .registry-strip p { color: #9aa7b3; font-size: 0.94rem; margin-top: 0.45rem; } .registry-strip code { font-family: var(--mono); color: var(--accent-ink-2); font-size: 0.85em; } /* Ink strip is dark in both themes, so its eyebrow uses the on-ink accent */ .registry-strip .eyebrow { color: var(--accent-ink); } /* ---------- Footer ---------- */ .colophon { margin-top: 3rem; padding: 2.6rem 0 3rem; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 0.88rem; } .colophon .cols { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .colophon p { margin: 0.3rem 0; } .colophon a { color: var(--ink-soft); } .colophon a:hover { color: var(--accent); } /* ---------- Reveal-on-scroll ---------- */ /* Hidden state only when JS is running (html.js set by the boot script) */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-fluid), transform var(--dur-reveal) var(--ease-fluid); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .logo .cursor { animation: none; opacity: 1; } } /* ---------- Small screens ---------- */ @media (max-width: 640px) { .masthead { top: 0.55rem; padding: 0 0.7rem; } .masthead nav a:not(.btn) { display: none; } .hero { padding-top: 3.6rem; } .termcard-body { font-size: 0.78rem; } }