/* ============================================================================= Dain Sevigne — SAP Fiori / SAPUI5 Developer Design system + layout. Mobile-first, no dependencies. Structure: 1. Design tokens (custom properties) 2. Reset & base 3. Typography 4. Layout primitives (container, sections) 5. Background grid 6. Header & language switch 7. Logo 8. Hero 9. Focus (Schwerpunkte) 10. Profile 11. Contact 12. Footer 13. Legal pages (Impressum / Datenschutz) 14. Reveal animations & reduced-motion ============================================================================= */ /* ----------------------------------------------------------------------------- 1. DESIGN TOKENS A deliberately small palette: deep anthracite base, warm off-white, one signal green. Spacing follows a consistent modular scale. ----------------------------------------------------------------------------- */ :root { /* Brand accent — the single signal colour */ --accent: #39B54A; --accent-soft: rgba(57, 181, 74, 0.14); --accent-line: rgba(57, 181, 74, 0.32); /* Accent used for *text*: matches the brand on dark, darkens on light so small labels/links stay readable (overridden in the light theme). */ --accent-text: var(--accent); /* Base palette — dark ground so the green resonates */ --ink-900: #0e0f10; /* deepest background */ --ink-850: #131517; /* section background */ --ink-800: #16181a; /* primary background */ --ink-700: #1d2023; /* raised surface */ --ink-600: #262a2e; /* borders, hairlines (raised) */ --line: rgba(244, 241, 234, 0.10); /* hairline on dark */ --line-strong: rgba(244, 241, 234, 0.18); /* Foreground — warm off-white, tuned to flatter the green */ --paper: #f4f1ea; /* primary text */ --paper-dim: #b9b6ae; /* secondary text */ --paper-faint: #8b887f; /* tertiary / labels — tuned to clear WCAG AA on the dark ground */ /* Typography */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* System monospace — no extra web font, used for the dev-flavoured details */ --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; /* Fluid type scale (clamp: min, preferred, max) */ --fs-hero: clamp(2.3rem, 6.4vw, 5rem); --fs-h2: clamp(2rem, 4.5vw, 3.4rem); --fs-h3: clamp(1.15rem, 2.2vw, 1.5rem); --fs-lead: clamp(1rem, 1.5vw, 1.15rem); --fs-body: clamp(1rem, 1.4vw, 1.125rem); --fs-small: 0.8125rem; /* Spacing scale (8px base) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4.5rem; --sp-7: 7rem; --sp-8: 10rem; /* Layout */ --container: 1200px; --gutter: clamp(1.25rem, 5vw, 4rem); --radius: 4px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.6s; } /* ---- LIGHT THEME --------------------------------------------------------- Same palette inverted: warm off-white ground, deep anthracite text. The bright accent stays for lines/fills; text-accent darkens for contrast. Toggled by data-theme="light" on (set in JS, in-memory only). */ :root[data-theme="light"] { --ink-900: #ffffff; --ink-850: #efece4; --ink-800: #f4f1ea; /* page background */ --ink-700: #e7e3d9; /* raised surface / hover */ --ink-600: #d9d4c8; --line: rgba(20, 22, 24, 0.12); --line-strong: rgba(20, 22, 24, 0.20); --paper: #16181a; /* primary text */ --paper-dim: #44474a; /* secondary text */ --paper-faint: #5f6266; /* labels — AA on the light ground */ --accent-text: #1f8a32; /* darker green for readable text on light */ --accent-line: rgba(57, 181, 74, 0.45); } /* ----------------------------------------------------------------------------- 2. RESET & BASE ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--ink-800); color: var(--paper); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } /* Visible focus for keyboard users — never remove the outline */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--ink-900); } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--ink-900); padding: var(--sp-1) var(--sp-2); font-weight: 600; font-family: var(--font-display); } .skip-link:focus { left: var(--sp-2); top: var(--sp-2); } /* ----------------------------------------------------------------------------- 3. TYPOGRAPHY ----------------------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; } em { font-style: normal; color: var(--accent-text); } /* ----------------------------------------------------------------------------- 4. LAYOUT PRIMITIVES ----------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--sp-6); border-top: 1px solid var(--line); position: relative; } @media (min-width: 768px) { .section { padding-block: var(--sp-7); } } /* Section header: index number + title, with a thin rule */ .section-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-5); } .section-index { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; color: var(--accent-text); letter-spacing: 0.15em; font-variant-numeric: tabular-nums; padding-top: 0.4em; } .section-title { font-size: var(--fs-h2); } /* ----------------------------------------------------------------------------- 5. BACKGROUND GRID — subtle raster, fixed, decorative ----------------------------------------------------------------------------- */ .bg-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: clamp(48px, 9vw, 96px) clamp(48px, 9vw, 96px); opacity: 0.5; /* fade the grid toward the edges for a controlled, premium feel */ -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 90%); mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 90%); } /* ----------------------------------------------------------------------------- 5b. UNDER-CONSTRUCTION BANNER (temporary — delete the markup when done) ----------------------------------------------------------------------------- */ .construction-banner { position: relative; z-index: 101; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.01em; } .construction-inner { display: flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 34px; padding-block: 0.45em; text-align: center; } .construction-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.6s ease-out infinite; } /* ----------------------------------------------------------------------------- 6. HEADER & LANGUAGE SWITCH ----------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--ink-800) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } /* Right-hand cluster: theme toggle + language switch */ .header-tools { display: inline-flex; align-items: center; gap: var(--sp-2); } /* Theme toggle — a moon glyph. Always the inverse of the current mode: on dark it is a light button, on light it is a dark button. This is achieved by painting it with the foreground/background tokens swapped. */ .theme-toggle { appearance: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--paper); /* inverse of page background */ color: var(--ink-800); /* inverse of page text */ transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); } /* Icon swap: sun in dark mode, moon in light mode */ .theme-toggle .icon { display: none; width: 18px; height: 18px; } .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } .theme-toggle:hover { transform: rotate(-12deg); box-shadow: 0 0 0 4px var(--accent-soft); } /* Language switcher — dezent, but clearly interactive */ .lang-switch { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.04em; } .lang-btn { appearance: none; background: none; border: 0; color: var(--paper-faint); font: inherit; cursor: pointer; padding: 0.35em 0.5em; position: relative; transition: color 0.25s var(--ease); } .lang-btn:hover { color: var(--paper); } .lang-btn.is-active { color: var(--paper); } /* Accent underline on the active language */ .lang-btn.is-active::after { content: ""; position: absolute; left: 0.5em; right: 0.5em; bottom: 0.1em; height: 2px; background: var(--accent); } .lang-divider { color: var(--paper-faint); opacity: 0.5; } /* ----------------------------------------------------------------------------- 7. LOGO — PNG with typographic fallback ----------------------------------------------------------------------------- */ .logo { display: inline-flex; align-items: center; gap: 0.6em; line-height: 1; } /* The PNG icon mark */ .logo-img { height: 34px; width: auto; display: block; } /* Typographic fallback (only visible until the PNG loads) */ .logo-fallback { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--paper); border-left: 2px solid var(--accent); padding-left: 0.4em; } /* Wordmark stays beside the icon */ .logo-word { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--paper); } @media (max-width: 420px) { .logo-word { display: none; } } /* ----------------------------------------------------------------------------- 8. HERO ----------------------------------------------------------------------------- */ .hero { /* Deliberately compact: the hero should occupy roughly the upper half of the viewport so the Schwerpunkte section already peeks in below it. */ padding-block: clamp(1.75rem, 5vh, 3rem) clamp(2.25rem, 5vh, 3.5rem); position: relative; } .hero-eyebrow { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-2); } .hero-statement { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; max-width: 16ch; } .hero-statement span { display: block; } /* Asymmetric break: indent the middle lines for tension */ .hero-statement span:nth-child(2) { padding-left: 0.6em; } .hero-statement span:nth-child(3) { padding-left: 1.4em; } @media (max-width: 600px) { .hero-statement span:nth-child(2), .hero-statement span:nth-child(3) { padding-left: 0; } } .hero-meta { margin-top: var(--sp-4); max-width: 52ch; } .hero-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.4em; } .hero-subline { color: var(--paper-dim); font-size: var(--fs-body); margin-bottom: var(--sp-2); } .hero-location { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.04em; color: var(--paper-faint); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-line); animation: pulse 2.6s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-line); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* A small monospace code chip — a deliberate developer fingerprint */ .hero-code { margin-top: var(--sp-3); } .hero-code code { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 0.45em 0.65em; letter-spacing: 0; } /* ----------------------------------------------------------------------------- 9. FOCUS (Schwerpunkte) — asymmetric, controlled grid ----------------------------------------------------------------------------- */ /* 8 tiles. With the first tile spanning two columns, 2 + 7×1 = 9 units fill a clean 3×3 grid — no empty cell. align-items:start lets a single tile expand its detail panel without stretching its row neighbours; the tiles below simply shift down. */ .focus-grid { display: grid; grid-template-columns: 1fr; gap: clamp(0.6rem, 1.1vw, 0.9rem); align-items: start; } @media (min-width: 560px) { .focus-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .focus-grid { grid-template-columns: repeat(3, 1fr); } /* Deliberate break in the rhythm: first tile spans two columns */ .focus-card:first-child { grid-column: span 2; } } .focus-card { position: relative; background: var(--ink-800); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); } .focus-card:hover { border-color: var(--line-strong); } .focus-card.is-open { border-color: var(--accent-line); } /* Accent top line, grows on hover and stays while open */ .focus-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); z-index: 1; } .focus-card:hover::before, .focus-card.is-open::before { transform: scaleX(1); } /* The clickable header of each tile */ .focus-toggle { appearance: none; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: var(--sp-2); padding: clamp(1.3rem, 2.6vw, 2.1rem); min-height: clamp(130px, 19vw, 180px); transition: background 0.4s var(--ease); } .focus-toggle:hover { background: var(--ink-700); } .focus-num { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.15em; color: var(--paper-faint); font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease); } .focus-name { grid-column: 1 / -1; grid-row: 2; align-self: end; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.1; } /* + indicator that collapses to a − when the tile is open */ .focus-plus { grid-column: 2; grid-row: 1; justify-self: end; position: relative; width: 16px; height: 16px; color: var(--paper-faint); transition: color 0.4s var(--ease), transform 0.4s var(--ease); } .focus-plus::before, .focus-plus::after { content: ""; position: absolute; background: currentColor; } .focus-plus::before { /* horizontal bar */ left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); } .focus-plus::after { /* vertical bar — hidden when open → becomes a minus */ left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%) scaleY(1); transition: transform 0.4s var(--ease); } .focus-card.is-open .focus-plus::after { transform: translateX(-50%) scaleY(0); } .focus-card.is-open .focus-plus, .focus-toggle:hover .focus-plus { color: var(--accent-text); } /* Expanding detail panel — animated via grid-template-rows 0fr → 1fr, so the real content height drives the open size with no JS measuring. */ .focus-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); } .focus-card.is-open .focus-detail { grid-template-rows: 1fr; } .focus-detail p { overflow: hidden; min-height: 0; margin: 0; color: var(--paper-dim); font-size: var(--fs-body); line-height: 1.55; /* padding lives on an inner pseudo so it doesn't show while collapsed */ padding: 0 clamp(1.3rem, 2.6vw, 2.1rem); } .focus-card.is-open .focus-detail p { padding-top: var(--sp-2); padding-bottom: clamp(1.3rem, 2.6vw, 2.1rem); border-top: 1px solid var(--line); } /* ----------------------------------------------------------------------------- 10. PROFILE ----------------------------------------------------------------------------- */ .profile-inner { } .profile-body { display: grid; gap: var(--sp-5); } @media (min-width: 880px) { .profile-body { grid-template-columns: 1.1fr 0.9fr; grid-template-areas: "lead facts" "quote facts" "langs langs"; gap: var(--sp-5) var(--sp-6); align-items: start; } .profile-lead { grid-area: lead; } .profile-facts { grid-area: facts; } .profile-quote { grid-area: quote; } .profile-langs { grid-area: langs; } } .profile-lead { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 400; line-height: 1.6; color: var(--paper); max-width: 46ch; } .profile-facts { display: grid; gap: 0; border-top: 1px solid var(--line); } .profile-fact { display: grid; gap: 0.25em; padding-block: var(--sp-2); border-bottom: 1px solid var(--line); } @media (min-width: 480px) { .profile-fact { grid-template-columns: 8.5rem 1fr; gap: var(--sp-2); align-items: baseline; } } .fact-key { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper-faint); } .fact-val { color: var(--paper-dim); } .profile-quote { border-left: 2px solid var(--accent); padding-left: var(--sp-3); } .profile-quote p { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; color: var(--paper); } /* Languages — a fine typographic line picking up the page's rhythm, deliberately understated next to the tech tiles. */ .profile-langs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .profile-langs .lang-row { display: inline-flex; align-items: baseline; gap: 0.6em; position: relative; padding-left: 0.9em; } /* small accent tick before each language */ .profile-langs .lang-row::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; background: var(--accent); } .lang-label { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--paper); } .lang-level { margin: 0; color: var(--paper-dim); font-size: var(--fs-small); letter-spacing: 0.02em; } .lang-cert { color: var(--paper-faint); } /* ----------------------------------------------------------------------------- 10b. REFERENCES — dense, CV-like list ----------------------------------------------------------------------------- */ .refs-lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.6; color: var(--paper-dim); max-width: 58ch; margin-bottom: var(--sp-5); } .ref-group + .ref-group { margin-top: var(--sp-5); } .ref-group-title { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); padding-bottom: var(--sp-1); margin-bottom: var(--sp-1); border-bottom: 1px solid var(--line-strong); } .ref-item { display: grid; grid-template-columns: 1fr; gap: 0.3em; padding-block: var(--sp-2); border-bottom: 1px solid var(--line); } /* On wider screens: period in a fixed mono column, details beside it */ @media (min-width: 720px) { .ref-item { grid-template-columns: 10.5rem 1fr; gap: var(--sp-3); align-items: baseline; } } .ref-period { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--paper-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .ref-body { display: grid; gap: 0.2em; } /* Context + role on one line where they fit, wrapping to two if not */ .ref-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.7em; } .ref-context { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--paper); } .ref-role { color: var(--paper-dim); font-size: 0.95rem; } .ref-tags { font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.5; letter-spacing: 0.01em; color: var(--paper-faint); margin-top: 0.15em; } /* Slightly tighter second block */ .ref-list--dense .ref-item { padding-block: calc(var(--sp-2) * 0.8); } .ref-prefiori { color: var(--paper-dim); font-size: var(--fs-body); line-height: 1.6; max-width: 70ch; padding-top: var(--sp-1); } /* ----------------------------------------------------------------------------- 11. CONTACT ----------------------------------------------------------------------------- */ .contact-lead { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 400; line-height: 1.6; color: var(--paper-dim); max-width: 58ch; margin-bottom: var(--sp-5); } .contact-list { border-top: 1px solid var(--line); } .contact-item { display: grid; gap: 0.25em; padding-block: var(--sp-3); border-bottom: 1px solid var(--line); } @media (min-width: 560px) { .contact-item { grid-template-columns: 10rem 1fr; gap: var(--sp-3); align-items: baseline; } } .contact-label { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper-faint); } .contact-link { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; color: var(--paper); width: fit-content; position: relative; transition: color 0.3s var(--ease); } a.contact-link::after { content: ""; position: absolute; left: 0; bottom: -0.05em; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } a.contact-link:hover { color: var(--accent-text); } a.contact-link:hover::after { transform: scaleX(1); } .contact-static { color: var(--paper-dim); cursor: default; } /* ----------------------------------------------------------------------------- 12. FOOTER ----------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding-block: var(--sp-5); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); } .footer-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .footer-nav { display: flex; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; } .footer-nav a { color: var(--paper-dim); position: relative; transition: color 0.25s var(--ease); } .footer-nav a:hover { color: var(--accent-text); } .footer-copy { font-size: var(--fs-small); color: var(--paper-faint); font-variant-numeric: tabular-nums; } /* Colophon line — monospace, like a comment left in the source */ .footer-note { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .footer-note code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--paper-faint); letter-spacing: 0; } /* ----------------------------------------------------------------------------- 13. LEGAL PAGES (Impressum / Datenschutz) Shares the same shell; this is the readable long-form content style. ----------------------------------------------------------------------------- */ .legal { padding-block: var(--sp-6) var(--sp-7); min-height: 70vh; } .legal .back-link { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; color: var(--paper-faint); margin-bottom: var(--sp-4); transition: color 0.25s var(--ease); } .legal .back-link:hover { color: var(--accent-text); } .legal-title { font-size: var(--fs-h2); margin-bottom: var(--sp-5); } .legal-content { max-width: 70ch; } .legal-content h2 { font-size: var(--fs-h3); margin-top: var(--sp-5); margin-bottom: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .legal-content h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .legal-content p, .legal-content address { color: var(--paper-dim); margin-bottom: var(--sp-2); font-style: normal; } .legal-content a { color: var(--accent-text); } .legal-content a:hover { text-decoration: underline; } .legal-content strong { color: var(--paper); font-weight: 600; } /* ----------------------------------------------------------------------------- 14. REVEAL ANIMATIONS & REDUCED MOTION ----------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); /* tiny stagger handled per-element via inline --i in JS-free fallback */ } .reveal.is-visible { opacity: 1; transform: none; } /* Respect users who prefer reduced motion: no transforms, no smooth scroll, no pulsing — everything is instantly visible. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } .dot, .construction-dot { animation: none; } }