/*! * brand.css: the Tan Solutions design language, v1.3 (2026-09-25). * ONE source: design/brand.css in the venture repo. Every site copies this file * byte-for-byte and its verifier checks the SHA-256. Never edit a site's copy. * Served at /brand/brand.css with the fonts at /brand/fonts/ (URLs below are relative). * Product accent: put data-product="comeback" | "shipsane" on or any container. * Spec: design/DESIGN_LANGUAGE.md. Fonts: Schibsted Grotesk, SIL OFL 1.1 (fonts/SchibstedGrotesk-OFL.txt). * Italic is a static 400 instance (fonts/make_italic_400.py); bold italic is synthesised. */ /* ---------- 1. Fonts ---------- */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/schibsted-grotesk-latin-italic-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/schibsted-grotesk-latin-ext-italic-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Metric-matched fallbacks (measured from the font files against Arial), so a late font swap does not move the layout. Arimo / Liberation Sans share Arial's metrics. */ @font-face { font-family: "Schibsted Fallback"; font-weight: 400 650; src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"); size-adjust: 104.23%; ascent-override: 93.7%; descent-override: 24.74%; line-gap-override: 0%; } @font-face { font-family: "Schibsted Fallback"; font-weight: 651 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold"); size-adjust: 103.2%; ascent-override: 94.64%; descent-override: 24.98%; line-gap-override: 0%; } /* ---------- 2. Tokens ---------- */ :root { /* Master neutrals: ink on paper. The studio has no accent of its own. */ --ink: #1B2130; --ink-2: #454C5C; --ink-3: #5E6676; --paper: #FFFFFF; --paper-2: #F4F5F7; --paper-3: #E9EBEF; --line: #DCE0E6; --line-strong: #858D9C; --on-ink: #FFFFFF; --on-ink-2: #C9CDD6; /* Status (text + shape, never colour alone) */ --ok: #1D7A4C; --ok-tint: #E8F4EE; --warn: #8F5A00; --warn-tint: #FBF1E1; /* Product accents. One per product; colour means product. */ --cobalt: #315BE8; --cobalt-deep: #2344B8; --cobalt-tint: #EEF2FD; --berry: #C2255C; --berry-deep: #971D48; --berry-tint: #FAEEF2; /* The active accent. Default = master (ink). */ --accent: var(--ink); --accent-hover: #353C4E; --accent-deep: var(--ink); --accent-tint: var(--paper-2); --on-accent: #FFFFFF; --focus-outer: var(--ink); --focus-inner: #FFFFFF; /* Type */ --font: "Schibsted Grotesk", "Schibsted Fallback", ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: clamp(1.75rem, 1.25rem + 1.5vw, 2.375rem); --t-3xl: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); --t-4xl: clamp(2.625rem, 1.35rem + 4.4vw, 5.25rem); /* Space (4 px base) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --section: clamp(4rem, 2.6rem + 5.5vw, 7rem); --gutter: 1rem; --shell: 75rem; /* Shape: radius follows hierarchy */ --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-pill: 999px; /* Motion: only in answer to a person's action */ --dur: 160ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --header-h: 4rem; } @media (min-width: 48rem) { :root { --gutter: 2rem; --header-h: 4.5rem; } } [data-product="comeback"] { --accent: var(--berry); --accent-hover: var(--berry-deep); --accent-deep: var(--berry-deep); --accent-tint: var(--berry-tint); } [data-product="shipsane"] { --accent: var(--cobalt); --accent-hover: var(--cobalt-deep); --accent-deep: var(--cobalt-deep); --accent-tint: var(--cobalt-tint); } /* ---------- 3. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; } body { margin: 0; /* Column layout keeps the footer at the bottom of short pages (404, contact). */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-md); line-height: 1.55; font-kerning: normal; font-variant-numeric: proportional-nums lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } body > main { flex: 1 0 auto; } img, svg, video { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } h3 { font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } h4 { font-weight: 700; line-height: 1.3; letter-spacing: 0; } p, ul, ol, dl, dd, figure, blockquote { margin: 0; } p, li, dd { text-wrap: pretty; } :lang(de) :is(p, li, dd, td, h1, h2, h3) { hyphens: auto; } a { color: inherit; } strong, b { font-weight: 700; } small { font-size: var(--t-sm); } code, kbd { font-family: var(--mono); font-size: 0.9em; background: var(--paper-2); border-radius: var(--r-sm); padding: 0.1em 0.35em; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; } :focus-visible { outline: 3px solid var(--focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--accent-tint); color: var(--ink); } ::marker { font-variant-numeric: proportional-nums; } /* ---------- 4. Layout ---------- */ .shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; } .section { padding-block: var(--section); } .section:not(.band) + .section:not(.band), .hero + .section:not(.band) { padding-top: 0; } .band { padding-block: var(--section); } .band-soft { background: var(--paper-2); } .band-ink { background: var(--ink); color: var(--on-ink); --focus-outer: #FFFFFF; --focus-inner: var(--ink); } .section-head { display: grid; gap: var(--s-4); max-width: 46rem; margin-bottom: var(--s-7); } .section-head h2 { font-size: var(--t-2xl); } .section-head p { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.45; } .band-ink .section-head p { color: var(--on-ink-2); } .section-head .fine { font-size: var(--t-sm); color: var(--ink-3); } .stack > * + * { margin-top: var(--s-4); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .grid { display: grid; gap: var(--s-5); } @media (min-width: 40rem) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: var(--s-4); top: -4rem; z-index: 100; background: var(--ink); color: var(--on-ink); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-weight: 700; text-decoration: none; --focus-outer: var(--ink); --focus-inner: #FFFFFF; } .skip:focus { top: var(--s-3); } .muted { color: var(--ink-2); } .fine { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; } .lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 40rem; } .subhead { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; } /* ---------- 5. Links and buttons ---------- */ .link, .prose a, .fine a, .crumbs a, .site-footer a:not(.lockup):not(.btn) { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .site-footer a:not(.lockup):not(.btn), .crumbs a, .fine a { color: inherit; } .link:hover, .prose a:hover, .fine a:hover, .crumbs a:hover, .site-footer a:not(.lockup):not(.btn):hover { text-decoration-thickness: 2px; } .band-ink .link { color: var(--on-ink); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 2.75rem; padding: 0.625rem 1.25rem; border: 1.5px solid transparent; border-radius: var(--r-md); font: inherit; font-weight: 700; font-size: var(--t-md); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-secondary:hover { background: var(--paper-2); } .btn-quiet { background: var(--paper-2); color: var(--ink); } .btn-quiet:hover { background: var(--paper-3); } .band-ink .btn-primary { background: var(--on-ink); color: var(--ink); } .band-ink .btn-primary:hover { background: var(--paper-3); } .band-ink .btn-secondary { color: var(--on-ink); border-color: var(--on-ink); } .band-ink .btn-secondary:hover { background: rgb(255 255 255 / 0.1); } .btn-sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: var(--t-sm); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .actions-note { font-size: var(--t-sm); color: var(--ink-3); flex-basis: 100%; } .band-ink .actions-note, .band-ink .fine { color: var(--on-ink-2); } /* ---------- 6. Marks and lockups ---------- */ .tile { display: block; flex: none; width: 2rem; height: 2rem; } .tile-sm { width: 1.25rem; height: 1.25rem; } .tile-lg { width: 3rem; height: 3rem; } .lockup { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ink); text-decoration: none; } .lockup-text { display: grid; line-height: 1.05; } .lockup-name { font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; } .lockup-by { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 0.15rem; } /* ---------- 7. Header and menu ---------- */ .site-header { border-bottom: 1px solid var(--line); background: var(--paper); } .header-bar { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); } .header-bar .lockup { margin-right: auto; } .nav ul { display: flex; gap: var(--s-1); margin: 0; padding: 0; list-style: none; } .nav a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--r-md); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; } .nav a:hover { color: var(--ink); background: var(--paper-2); } .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; } .header-end { display: flex; align-items: center; gap: var(--s-3); } @media (max-width: 30rem) { .header-bar { gap: var(--s-3); } .header-end { gap: var(--s-2); } } .lang { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 0.5rem; border-radius: var(--r-md); } .lang:hover { color: var(--ink); background: var(--paper-2); } .menu-button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0 0.875rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; } .menu-button::after { content: ""; width: 0.875rem; height: 0.625rem; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; } .menu { position: fixed; inset: var(--header-h) 0 auto 0; margin: 0; width: auto; max-width: none; max-height: calc(100dvh - var(--header-h)); overflow: auto; border: 0; border-bottom: 1px solid var(--line); padding: var(--s-3) var(--gutter) var(--s-6); background: var(--paper); color: var(--ink); } .menu::backdrop { background: rgb(27 33 48 / 0.4); } .menu ul { margin: 0; padding: 0; list-style: none; } .menu li + li { border-top: 1px solid var(--line); } .menu a:not(.btn) { display: flex; align-items: center; gap: var(--s-3); min-height: 3rem; font-size: var(--t-lg); font-weight: 700; text-decoration: none; color: var(--ink); } .menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; } .menu .actions { margin-top: var(--s-5); } .menu .btn { flex: 1 1 100%; } .nav, .header-cta { display: none; } .nav a, .header-cta, .lockup-name, .lockup-by { white-space: nowrap; } @media (min-width: 64rem) { .nav { display: block; } .header-cta { display: inline-flex; } .menu-button { display: none; } .menu:popover-open { display: none; } } /* A long nav (six items in German) keeps the menu button up to 70rem, so the bar never wraps. */ @media (min-width: 64rem) and (max-width: 69.99rem) { .site-header-long .nav, .site-header-long .header-cta { display: none; } .site-header-long .menu-button { display: inline-flex; } .site-header-long .menu:popover-open { display: block; } } /* 320-360 px: the product lockup ("Comeback / von Tan Solutions"), language and menu must share one row. */ @media (max-width: 22.5rem) { .header-bar { gap: var(--s-2); } .header-end { gap: var(--s-1); } .lang { padding-inline: 0.375rem; } .menu-button { padding-inline: 0.625rem; } } /* ---------- 8. Hero and page heads ---------- */ .hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3rem, 2rem + 3vw, 5rem); } .hero h1 { font-size: var(--t-4xl); line-height: 1.02; letter-spacing: -0.035em; max-width: 13ch; } .hero-grid { display: grid; gap: var(--s-7); align-items: center; } .hero-copy { display: grid; gap: var(--s-5); justify-items: start; } .hero-copy .lead { max-width: 36rem; } .hero-meta { font-size: var(--t-md); color: var(--ink-2); max-width: 36rem; } .hero-split { display: grid; gap: var(--s-5); align-items: end; } @media (min-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } .hero-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } .hero-split .lead { padding-bottom: 0.4rem; } .hero-grid .field { min-height: 26rem; } .hero-grid .tag { min-height: 10.5rem; padding-top: 2.75rem; } .hero-grid .tag b { font-size: var(--t-3xl); } } .page-head { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--s-7); border-bottom: 1px solid var(--line); } .page-head h1 { font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; } .page-head .lead { margin-top: var(--s-4); } .page-head .lockup { margin-bottom: var(--s-5); } .page-head + .section:not(.band) { padding-top: var(--s-8); } .page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); } .crumbs { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-4); } .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; } .crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); } /* ---------- 9. Status, evidence and small pieces ---------- */ .status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem 0.3rem 0.625rem; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; } .status::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--warn); } .status-soon::before { background: var(--accent); } .status-live::before { background: var(--ok); } .band-ink .status { background: rgb(255 255 255 / 0.12); color: var(--on-ink); } .checked { font-size: var(--t-sm); color: var(--ink-3); } .checked time { color: var(--ink-2); font-weight: 600; } .tabular { font-variant-numeric: tabular-nums; } .evidence-rule { border: 0; border-top: 1.5px dashed var(--line-strong); margin: var(--s-4) 0; } .chip { display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; } /* Facts strip */ .facts ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .facts li { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-1); align-content: start; } .facts strong { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; } .facts span { color: var(--ink-2); font-size: var(--t-sm); } @media (min-width: 40rem) { .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } } @media (min-width: 64rem) { .facts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); } .facts li { border-bottom: 0; } } /* ---------- 10. Lists: ticks, limits, sequences ---------- */ .ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); } .ticks li { position: relative; padding-left: 1.75rem; } .ticks li::before { content: ""; position: absolute; left: 0.2rem; top: 0.42em; width: 0.45rem; height: 0.8rem; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); } .ticks small { display: block; color: var(--ink-3); margin-top: 0.15rem; } .limits { background: var(--paper-2); border-radius: var(--r-lg); padding: var(--s-5) var(--s-5) var(--s-6); } .limits h3 { font-size: var(--t-lg); margin-bottom: var(--s-4); } .limits ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s-3); color: var(--ink-2); } .limits li::marker { content: "– "; color: var(--ink-3); } @media (min-width: 48rem) { .limits { padding: var(--s-6); } .limits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } } /* A numbered sequence: only for content that IS an order (steps, the option order). */ .sequence { margin: 0; padding: 0; list-style: none; counter-reset: seq; display: grid; gap: var(--s-6); } .sequence > li { counter-increment: seq; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--ink); } .sequence > li::before { content: counter(seq); font-size: var(--t-2xl); font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -0.02em; margin-bottom: var(--s-2); } .sequence h3 { font-size: var(--t-lg); } .sequence p { color: var(--ink-2); } @media (min-width: 48rem) { .sequence-3, .sequence-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .sequence-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sequence-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Vertical flow with a connector (e.g. the 5 steps of the EU withdrawal form) */ .flow { margin: 0; padding: 0; list-style: none; counter-reset: flow; } .flow > li { counter-increment: flow; position: relative; padding: 0 0 var(--s-5) 3rem; } .flow > li::before { content: counter(flow); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: var(--t-sm); } .flow > li::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.25rem; bottom: 0.25rem; border-left: 2px dashed var(--line-strong); } .flow > li:last-child::after { display: none; } .flow strong { display: block; font-size: var(--t-md); } .flow span { color: var(--ink-2); } /* Exact interface labels under a step, as chips (e.g. the EN and DE button labels) */ .flow .cluster { margin-top: var(--s-2); } .flow .chip { color: var(--ink); } .flow q { quotes: "\201C" "\201D"; font-weight: 600; color: var(--ink); } .flow q:lang(de) { quotes: "\201E" "\201C"; } /* ---------- 11. Build track (evidence) ---------- */ .track { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .track > li { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--s-3); padding-bottom: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); } .track > li::before { content: ""; grid-row: 1 / span 2; width: 1rem; height: 1rem; margin-top: 0.2rem; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--paper); position: relative; z-index: 1; } .track > li::after { content: ""; position: absolute; left: calc(0.5rem - 1px); top: 1.3rem; bottom: 0.1rem; border-left: 2px dashed var(--line-strong); } .track > li:last-child { padding-bottom: 0; } .track > li:last-child::after { display: none; } .track > li.is-done { color: var(--ink-2); } .track > li.is-done::before { background: var(--accent); border-color: var(--accent); } .track > li.is-done::after { border-left-style: solid; border-left-color: var(--accent); } .track > li.is-now { color: var(--ink); font-weight: 700; } .track > li.is-now::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 34%, var(--paper) 40%); } .track-note { grid-column: 2; font-weight: 400; color: var(--ink-2); } /* ---------- 12. Cards, product card and the family ---------- */ .card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); background: var(--paper); } .card h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); } .card p { color: var(--ink-2); } .product-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); overflow: hidden; } .product-card-body { display: grid; gap: var(--s-5); align-content: start; padding: var(--s-5); } @media (min-width: 48rem) { .product-card-body { padding: var(--s-6); } } .product-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); } .product-card-head .tile { width: 3rem; height: 3rem; } .product-card-head h3 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; } .product-card-head h3 a { text-decoration: none; } .product-card-head h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; } .product-job { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; } .product-summary { font-size: var(--t-lg); line-height: 1.45; } .product-now { font-size: var(--t-sm); color: var(--ink-2); border-top: 1.5px dashed var(--line-strong); padding-top: var(--s-4); } .product-now b { color: var(--ink); } @media (max-width: 30rem) { .product-card-head { grid-template-columns: auto minmax(0, 1fr); } .product-card-head .status { grid-column: 1 / -1; justify-self: start; } } .router { display: grid; gap: var(--s-5); } @media (min-width: 60rem) { .router { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } /* Cards in a row share their field and body heights, so names, tracks and actions line up. */ .router > .product-card { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; } } /* ---------- 13. Illustration system: paper objects on the product field ---------- */ .field { position: relative; background: var(--accent); color: var(--ink); border-radius: var(--r-lg); padding: var(--s-7) var(--s-5) var(--s-6); display: grid; place-items: center; min-height: 13rem; overflow: hidden; } .product-card > .field { border-radius: 0; } @media (max-width: 30rem) { .field { padding-inline: var(--s-3); } } .field-label { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--t-xs); font-weight: 700; line-height: 1.4; } .figure-caption { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); max-width: 34rem; } /* Hang tags (Comeback): all four drawn at equal weight, the refund never de-emphasised. */ .tag-rail { position: relative; width: 100%; max-width: 30rem; padding-top: 1.25rem; } .tag-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.4rem; border-radius: var(--r-pill); background: var(--paper); } .tag-rail ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } .tag-rail li { --drop: 2.25rem; position: relative; padding-top: var(--drop); transform-origin: 50% -1rem; } .tag-rail li::before { content: ""; position: absolute; left: calc(50% - 1px); top: -0.95rem; height: calc(var(--drop) + 2.15rem); border-left: 2px solid var(--paper); } .tag-rail li:nth-child(1) { transform: rotate(-3deg); } .tag-rail li:nth-child(2) { --drop: 3rem; transform: rotate(2deg); } .tag-rail li:nth-child(3) { --drop: 1.75rem; transform: rotate(-1.5deg); } .tag-rail li:nth-child(4) { --drop: 2.6rem; transform: rotate(2.5deg); } .tag { display: grid; justify-items: center; align-content: start; gap: 0.35rem; min-height: 8.5rem; padding: 2.4rem 0.4rem 0.9rem; background: var(--paper); color: var(--ink); text-align: center; clip-path: polygon(25% 0, 75% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); -webkit-mask: radial-gradient(circle at 50% 1.2rem, transparent 0.42rem, #000 0.47rem); mask: radial-gradient(circle at 50% 1.2rem, transparent 0.42rem, #000 0.47rem); } .tag b { font-size: var(--t-2xl); font-weight: 800; line-height: 1; color: var(--accent); } .tag span { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; } @media (min-width: 30rem) { .tag span { font-size: var(--t-sm); } } /* Narrow phones: every tag word fits whole ("Erstattung", "Another"); an engine without hyphenation would clip it otherwise. */ @media (max-width: 27.5rem) { .tag-rail ol { gap: var(--s-2); } .tag { padding-inline: 0.125rem; } .tag span { font-size: 0.6875rem; letter-spacing: -0.01em; } } @media (max-width: 22.5rem) { .field { padding-inline: var(--s-2); } } /* Two-column hero on smaller laptops: the figure column is at its narrowest. */ @media (min-width: 64rem) and (max-width: 79.99rem) { .hero-grid .tag-rail ol { gap: var(--s-2); } .hero-grid .tag { padding-inline: 0.2rem; } .hero-grid .tag span { font-size: var(--t-xs); letter-spacing: -0.01em; } } /* Receipt (ShipSane): a paper receipt with a torn edge; one highlighted row. */ .receipt { width: 100%; max-width: 21rem; background: var(--paper); color: var(--ink); padding: var(--s-5) var(--s-5) var(--s-6); font-size: var(--t-xs); line-height: 1.45; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.9rem 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.9rem 100%; } .receipt-head { display: grid; gap: 0.1rem; } .receipt-head b { font-size: var(--t-sm); font-weight: 800; letter-spacing: 0.02em; } .receipt table { width: 100%; border-collapse: collapse; margin-block: var(--s-3); } .receipt th { font-weight: 600; color: var(--ink-3); text-align: left; padding: 0.3rem 0.25rem; border-bottom: 1.5px dashed var(--line-strong); } .receipt td { padding: 0.3rem 0.25rem; } .receipt td:first-child { white-space: nowrap; } .receipt th:not(:first-child), .receipt td:not(:first-child) { text-align: right; } .receipt tr.is-flag td { background: var(--accent-tint); font-weight: 700; } .receipt-sum { border-top: 1.5px dashed var(--line-strong); padding-top: var(--s-2); display: grid; gap: 0.1rem; } /* The full-size receipt for a product page (the card uses the compact one). */ .receipt-lg { max-width: 32rem; font-size: var(--t-sm); padding: var(--s-6) var(--s-6) var(--s-7); } .receipt-lg .receipt-head b { font-size: var(--t-md); } .receipt-lg td[colspan] { color: var(--ink-2); padding-top: 0; } @media (min-width: 48rem) { .receipt-lg th { white-space: nowrap; } } /* After the receipt rules, so the narrow-screen padding wins. Below 30rem the four columns only fit the field (320-375 px screens) with tighter cells, the small type and SKUs that may wrap at their hyphen; otherwise the field's overflow clips the right-hand column. */ @media (max-width: 30rem) { .receipt, .receipt-lg { padding-inline: var(--s-4); } .receipt th, .receipt td { padding-inline: 0.15rem; } .receipt td:first-child { white-space: normal; } .receipt-lg { font-size: var(--t-xs); } .receipt-lg .receipt-head b { font-size: var(--t-sm); } } /* UI specimen: for product-UI mocks until real screenshots exist. Always carries .field-label. */ .specimen { width: 100%; max-width: 24rem; background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-3); font-size: var(--t-sm); } .specimen-title { font-weight: 800; font-size: var(--t-md); } .specimen-option { display: flex; align-items: center; gap: var(--s-3); padding: 0.6rem 0.75rem; border: 1.5px solid var(--line); border-radius: var(--r-md); } .specimen-option::before { content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); } /* ---------- 14. Pricing ---------- */ .billing { display: inline-flex; padding: 0.25rem; border-radius: var(--r-pill); background: var(--paper-2); border: 0; margin: 0 0 var(--s-6); } .billing legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .billing input { position: absolute; opacity: 0; width: 1px; height: 1px; } .billing label { padding: 0.5rem 1rem; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); cursor: pointer; } .billing input:checked + label { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); } .billing input:focus-visible + label { outline: 3px solid var(--focus-outer); outline-offset: 2px; } .price-y { display: none; } .pricing:has(.billing input[value="y"]:checked) .price-y { display: inline; } .pricing:has(.billing input[value="y"]:checked) .price-m { display: none; } .plans { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 40rem) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72rem) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .plan { display: flex; flex-direction: column; gap: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); background: var(--paper); } .plan h3 { font-size: var(--t-lg); } .plan-price { display: flex; align-items: baseline; gap: 0.25rem; } .plan-price b { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .plan-price small { color: var(--ink-3); } .plan-price b + small { margin-left: 0.2rem; } .plan-cap { font-weight: 700; } .plan-cap small { display: block; font-weight: 400; color: var(--ink-3); } .plan .ticks { font-size: var(--t-sm); } .plan-foot { font-size: var(--t-sm); color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: auto; } .standing { font-size: var(--t-lg); font-weight: 700; max-width: 40rem; } /* The bill: evidence of the charges we don't make */ .bill { max-width: 26rem; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); background: var(--paper); } .bill-head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1.5px dashed var(--line-strong); } .bill-head div { display: grid; } .bill-head span { font-size: var(--t-sm); color: var(--ink-3); } .bill dl { margin: 0; } .bill-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); } .bill-row dt { color: var(--ink-2); } .bill-row dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; } .bill-total { display: flex; justify-content: space-between; padding-top: var(--s-4); border-top: 1.5px dashed var(--line-strong); margin-top: -1px; font-weight: 800; font-size: var(--t-lg); } /* Full comparison table */ /* position: relative makes the scroller the containing block, so .sr-only text inside a cell cannot escape the clip. */ .table-wrap { position: relative; overflow-x: auto; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); } .table-wrap:focus-visible { outline-offset: 2px; } .compare { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: var(--t-sm); } .compare caption { text-align: left; padding: var(--s-4); font-weight: 700; } .compare th, .compare td { padding: 0.75rem var(--s-4); border-top: 1px solid var(--line); text-align: left; vertical-align: top; } .compare thead th { background: var(--paper-2); font-weight: 700; } .compare tbody th { font-weight: 600; } .compare th small { display: block; font-weight: 400; color: var(--ink-3); } .compare thead th small { color: var(--ink-2); } /* Shown only while the table is wider than its column */ .scroll-hint { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-3); } @media (min-width: 48rem) { .scroll-hint { display: none; } } .yes { font-weight: 700; color: var(--accent); } .yes svg { display: inline-block; width: 1.125rem; height: 1.125rem; vertical-align: -0.2em; } .no { color: var(--ink-3); } /* ---------- 15. FAQ, callouts ---------- */ .faq { display: grid; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); list-style: none; cursor: pointer; padding: var(--s-4) 0; font-size: var(--t-lg); font-weight: 700; line-height: 1.35; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); font-weight: 700; transition: transform var(--dur) var(--ease); } .faq details[open] summary::after { content: "\2212"; } .faq summary:hover { color: var(--accent-deep); } .faq-answer { padding: 0 0 var(--s-5); color: var(--ink-2); max-width: 44rem; display: grid; gap: var(--s-3); } @media (min-width: 64rem) { .faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); } } .callout { border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-4) var(--s-5); color: var(--ink); } .callout > * + * { margin-top: var(--s-2); } .callout-neutral { border-left-color: var(--ink-3); background: var(--paper-2); } .disclaimer { font-size: var(--t-sm); color: var(--ink-3); max-width: 44rem; } /* ---------- 16. Prose (guides, help center, legal) ---------- */ .prose { max-width: 42rem; font-size: var(--t-md); line-height: 1.65; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: var(--t-xl); letter-spacing: -0.015em; margin-top: 2.2em; scroll-margin-top: 1.5rem; } .prose h3 { font-size: var(--t-lg); margin-top: 1.8em; } .prose h2 + *, .prose h3 + * { margin-top: 0.6em; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: 0.4em; } .prose li::marker { color: var(--ink-3); } .prose blockquote { border-left: 3px solid var(--accent); padding: 0.2em 0 0.2em 1em; color: var(--ink-2); } .prose table { position: relative; width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.5; display: block; overflow-x: auto; } .prose th, .prose td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); } .prose thead > tr > * { border-bottom: 2px solid var(--ink); } /* A table in a scroll region: the region scrolls and draws the frame, the table stays a table. */ .prose .table-wrap table { display: table; overflow: visible; } .prose .table-wrap thead > tr > * { background: var(--paper-2); } .prose .table-wrap tbody > tr:last-child > * { border-bottom: 0; } /* A comparison table (3+ columns) keeps a readable label column; the region scrolls instead. */ .prose .table-wrap tr:has(> :nth-child(3)) > :first-child { min-width: 10rem; } .prose hr { border-top: 1.5px dashed var(--line-strong); margin: 2em 0; } .prose img { border-radius: var(--r-lg); border: 1px solid var(--line); } /* A paraphrased rule, one requirement per item: its name, then what it asks */ .prose .statute { list-style: none; padding-left: 0; display: grid; gap: var(--s-4); } .prose .statute > li { margin: 0; padding-left: var(--s-4); border-left: 3px solid var(--accent); } .prose .statute strong { display: block; color: var(--ink); } /* Previous / next article */ .pager { display: grid; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); } @media (min-width: 40rem) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .prose .pager a, .pager a { display: grid; gap: 0.2rem; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-weight: 700; line-height: 1.35; text-decoration: none; } .pager a:hover { border-color: var(--ink); } .pager a span { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); } .pager a[rel="next"] { text-align: right; grid-column: -2; } .explainer { display: grid; gap: var(--s-7); padding-block: var(--s-7) var(--section); } /* Grid items may shrink below their content, so a wide table scrolls inside the prose, not the page. */ .explainer > * { min-width: 0; } @media (min-width: 64rem) { .explainer { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s-9); } .explainer aside { position: sticky; top: var(--s-5); align-self: start; } } .toc { border-top: 2px solid var(--ink); padding-top: var(--s-3); font-size: var(--t-sm); } .toc h2 { font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s-3); letter-spacing: 0; } .toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); color: var(--ink-3); } .toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover { color: var(--ink); text-decoration: underline; } .toc a[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .aside-cta { margin-top: var(--s-6); display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--paper-2); } .aside-cta p { font-size: var(--t-sm); color: var(--ink-2); } .link-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .link-list li { border-bottom: 1px solid var(--line); } .link-list a { display: grid; gap: 0.2rem; padding: var(--s-4) 0; text-decoration: none; } .link-list a strong { font-size: var(--t-lg); } .link-list a span { color: var(--ink-2); font-size: var(--t-sm); } .link-list a:hover strong { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; } /* ---------- 17. Log (dated progress) ---------- */ .log { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .log li { display: grid; grid-template-columns: 1fr; gap: var(--s-1) var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); } .log time { font-size: var(--t-sm); color: var(--ink-3); font-weight: 600; } .log-product { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t-sm); } .log-product .tile { width: 1.25rem; height: 1.25rem; } @media (min-width: 48rem) { .log li { grid-template-columns: 10rem 9rem minmax(0, 1fr); align-items: baseline; } } /* ---------- 18. Forms ---------- */ .field-group { display: grid; gap: var(--s-2); } .field-group label { font-weight: 700; font-size: var(--t-sm); } .field-hint { font-size: var(--t-sm); color: var(--ink-3); } .input, .select, .textarea { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: inherit; } .textarea { min-height: 7rem; } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--ink); } .field-error { font-size: var(--t-sm); color: var(--berry-deep); font-weight: 600; } /* ---------- 19. Closing band and footer ---------- */ .closing-inner { display: grid; gap: var(--s-6); } .closing h2 { font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -0.03em; max-width: 16ch; } .closing p:not(.status) { color: var(--on-ink-2); font-size: var(--t-lg); max-width: 34rem; margin-top: var(--s-4); } .closing .fine { color: var(--on-ink-2); } @media (min-width: 64rem) { .closing-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } .closing .actions { justify-content: flex-end; } } .site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-6); font-size: var(--t-sm); color: var(--ink-2); } .footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } .footer-brand { display: grid; gap: var(--s-3); max-width: 20rem; } .footer-col h2 { font-size: var(--t-sm); font-weight: 700; color: var(--ink); letter-spacing: 0; margin-bottom: var(--s-3); } .footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); } /* Wide screens: the brand column, then one equal column per footer-col, however many there are. */ @media (min-width: 64rem) { .footer-grid { grid-auto-flow: column; grid-template-columns: minmax(0, 2fr); grid-auto-columns: minmax(0, 1fr); } .footer-brand { grid-column: auto; } } .family { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-7); padding-block: var(--s-4); border-block: 1px solid var(--line); } .family-title { font-weight: 700; color: var(--ink); } .family ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; } .family a { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; } .family .tile { width: 1.25rem; height: 1.25rem; } /* Two short lines share a row, ends apart; a line too long for that wraps onto its own row, left-aligned (never squeezed into a sliver). */ .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); color: var(--ink-3); } .footer-base > * { max-width: 100%; } /* ---------- 20. Misc page patterns ---------- */ .contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); } .contact-card h2 { font-size: var(--t-xl); } /* Cards in a row line up their buttons at the bottom. */ .contact-card > .actions:last-child { margin-top: auto; } .nf { padding-block: var(--s-9); display: grid; gap: var(--s-5); justify-items: start; } .nf h1 { font-size: var(--t-3xl); } .summary-panel { display: grid; gap: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); background: var(--paper); } .summary-panel .btn, .summary-panel .status { justify-self: start; } .kv { margin: 0; display: grid; } .kv div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); } .kv dt { color: var(--ink-2); } .kv dd { font-weight: 700; text-align: right; } /* Spacing utilities: last in the cascade so they win over component margins. */ .mt-md { margin-top: var(--s-5); } .mt-lg { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); } /* ---------- 21. Motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .tag-rail li { transform: none !important; } } @media (forced-colors: active) { .status::before, .track > li::before, .flow > li::before { forced-color-adjust: none; } .btn { border-color: ButtonText; } }