/* Phillan Limited - shared stylesheet Design direction: "Refined Ink". Swiss-minimal, monochrome with a single quiet navy used as punctuation. Generous whitespace, large calm headings, precise hairline rules and mono detail labels. System fonts only. No web fonts, no external assets, no tracking. Light and dark appearance via a data-theme attribute on : auto -> follow the operating system (the default) light -> forced light dark -> forced dark The single header control toggles between light and dark; with scripting off the page stays in "auto" and follows the operating system. */ /* =================================================================== Design tokens =================================================================== */ :root { --paper: #fcfcfd; --surface: #f4f6f8; --surface-2: #eef1f5; --ink: #14181d; --ink-soft: #3f454e; --ink-faint: #5c636e; --line: #e4e7ec; --line-strong: #d3d8df; --accent: #1c4f86; --accent-strong: #163d68; --accent-tint: rgba(28, 79, 134, 0.06); --accent-line: rgba(28, 79, 134, 0.28); --on-accent: #ffffff; --shadow: 0 1px 2px rgba(20, 24, 29, 0.05), 0 18px 40px -20px rgba(20, 24, 29, 0.22); --shadow-sm: 0 1px 2px rgba(20, 24, 29, 0.05), 0 10px 24px -16px rgba(20, 24, 29, 0.2); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace; --wrap: 64rem; --pad-x: clamp(20px, 5vw, 48px); --sec-y: clamp(52px, 8vw, 104px); } /* Explicit dark selection wins in both directions. */ [data-theme="dark"] { --paper: #101317; --surface: #171b21; --surface-2: #1d222a; --ink: #e9ecf1; --ink-soft: #aeb6c0; --ink-faint: #838b97; --line: #262c34; --line-strong: #333a43; --accent: #7fa9dd; --accent-strong: #a8c7ec; --accent-tint: rgba(127, 169, 221, 0.1); --accent-line: rgba(127, 169, 221, 0.32); --on-accent: #0d1015; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px -24px rgba(0, 0, 0, 0.7); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px -20px rgba(0, 0, 0, 0.6); } /* Auto: follow the operating system. */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --paper: #101317; --surface: #171b21; --surface-2: #1d222a; --ink: #e9ecf1; --ink-soft: #aeb6c0; --ink-faint: #838b97; --line: #262c34; --line-strong: #333a43; --accent: #7fa9dd; --accent-strong: #a8c7ec; --accent-tint: rgba(127, 169, 221, 0.1); --accent-line: rgba(127, 169, 221, 0.32); --on-accent: #0d1015; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px -24px rgba(0, 0, 0, 0.7); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px -20px rgba(0, 0, 0, 0.6); } } /* When a choice is forced, native surfaces (scrollbars, form controls, the text caret) should track it too, not the operating-system preference. */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* =================================================================== Base =================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light dark; font-variant-numeric: tabular-nums; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; } img { height: auto; } a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--accent-line); transition: color 180ms ease, text-decoration-color 180ms ease; } a:hover { color: var(--accent-strong); text-decoration-color: currentColor; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* Screenshot appearance swap: both variants are in the markup as elements (WebP with a JPG fallback); CSS shows the one that matches the appearance. The display:none rule must come after the base rule. */ [data-shot] { display: block; } [data-shot="dark"] { display: none; } [data-theme="dark"] [data-shot="dark"] { display: block; } [data-theme="dark"] [data-shot="light"] { display: none; } @media (prefers-color-scheme: dark) { [data-theme="auto"] [data-shot="dark"] { display: block; } [data-theme="auto"] [data-shot="light"] { display: none; } } /* =================================================================== Skip link =================================================================== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 0.65rem 1.1rem; border-radius: 0 0 6px 0; text-decoration: none; font-weight: 600; } .skip-link:focus { left: 0; } /* =================================================================== Layout primitives =================================================================== */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); } .sec { border-top: 1px solid var(--line); } .sec:first-of-type { border-top: 0; } .sec__inner { padding-block: var(--sec-y); } /* Section overline: mono index, short accent rule, kicker label. */ .sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; } .sec-index { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); } .sec-rule { width: 26px; height: 1px; background: var(--accent-line); flex: none; } .sec-kicker { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink-faint); } /* =================================================================== Header =================================================================== */ .site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--paper); } } .site-header__bar { max-width: var(--wrap); margin-inline: auto; padding: 15px var(--pad-x); display: flex; align-items: center; gap: 20px; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; } .brand:hover { color: var(--ink); text-decoration: none; } .brand svg { display: block; flex: none; color: var(--ink); } .wordmark { display: inline-flex; align-items: baseline; gap: 7px; } .wordmark__name { font-size: 15px; font-weight: 660; letter-spacing: 0.16em; color: var(--ink); } .wordmark__suffix { font-size: 15px; font-weight: 500; letter-spacing: 0.16em; color: var(--ink-faint); } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; } .site-nav a { display: block; padding: 7px 12px; border-radius: 7px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 180ms ease, background-color 180ms ease; } .site-nav a:hover { color: var(--ink); background: var(--surface); text-decoration: none; } .site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; background: var(--accent-tint); } /* Appearance toggle: a single light/dark button. Hidden until theme.js marks the document as scripted, so no dead control appears when scripting is off (the page then follows the system). */ .appearance { display: none; flex: none; } .has-js .appearance { display: inline-flex; } .theme-toggle { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink-soft); cursor: pointer; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); background: var(--surface); } .theme-toggle svg { display: block; } /* Show the icon of the appearance you would switch TO. Default (light, and auto+light system): offer dark -> show the moon. */ .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } [data-theme="dark"] .theme-toggle .i-sun { display: block; } [data-theme="dark"] .theme-toggle .i-moon { display: none; } @media (prefers-color-scheme: dark) { [data-theme="auto"] .theme-toggle .i-sun { display: block; } [data-theme="auto"] .theme-toggle .i-moon { display: none; } } /* =================================================================== Hero =================================================================== */ .hero__inner { padding-block: clamp(60px, 10vw, 120px) var(--sec-y); } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 32px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--ink-faint); } .hero__meta .page { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink); } .hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); } .eyebrow { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--accent); } .display { margin: 18px 0 0; font-size: clamp(2.4rem, 1.7rem + 3.1vw, 3.9rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.04; color: var(--ink); max-width: 20ch; } .lead { margin: 28px 0 0; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); font-weight: 400; line-height: 1.5; color: var(--ink-soft); max-width: none; } /* =================================================================== Headings and prose =================================================================== */ .h2 { margin: 0; font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.1rem); font-weight: 660; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); max-width: 32ch; } .h3 { margin: 0; font-size: 1.2rem; font-weight: 620; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); } .prose { display: flex; flex-direction: column; gap: 18px; max-width: none; } .prose--indent { margin-top: 24px; } .prose p { margin: 0; font-size: 17px; line-height: 1.72; color: var(--ink-soft); } .prose strong { color: var(--ink); font-weight: 640; } .measure { max-width: none; } /* Lead paragraph specific to a product block. */ .product-lead { margin: 16px 0 0; font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem); line-height: 1.45; color: var(--ink-soft); max-width: none; } /* Pull-quote: large, light, calm. */ .pullquote { margin: 44px 0 0; padding: 8px 0 8px 26px; border-left: 2px solid var(--accent); max-width: none; } .pullquote p { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); font-weight: 460; line-height: 1.34; letter-spacing: -0.015em; color: var(--ink); } /* =================================================================== Status chip =================================================================== */ .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px 4px 8px; background: var(--paper); } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } /* A standalone status chip sitting above a heading needs breathing room. */ .chip + .h2 { margin-top: 14px; } /* =================================================================== Home: product index rows =================================================================== */ .products { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); } .product { display: grid; grid-template-columns: 1fr 168px; gap: 48px; align-items: start; border-bottom: 1px solid var(--line); padding: 30px 12px 32px; margin-inline: -12px; border-radius: 12px; transition: background-color 180ms ease; } .product:hover { background: var(--accent-tint); } /* A small numbered marker stacked above the product name, so the product text shares the same left edge as the prose in the text-only sections. */ .product__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint); } .product__main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } .product__main .product__num + .product__head { margin-top: -2px; } .product__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .product__desc { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: none; } .link-arrow { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 550; text-decoration: none; color: var(--accent); } .link-arrow::after { content: "\2192"; transition: transform 180ms ease; } .link-arrow:hover { text-decoration: none; color: var(--accent-strong); } .link-arrow:hover::after { transform: translateX(3px); } .product__shot { margin: 0; justify-self: end; width: 100%; max-width: 200px; } .product__shot .frame { border-radius: 14px; padding: 8px 8px 10px; } .product__shot .frame img { border-radius: 8px; max-height: 208px; object-fit: cover; object-position: top; } .product__shot figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-faint); text-align: center; } /* =================================================================== Device frame plate (screenshots) =================================================================== */ .frame { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 16px; box-shadow: var(--shadow-sm); } .frame__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .frame img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 10px; } /* Generated iPhone product renders include their own bezel and need no card. */ .frame--phone, .product__shot .frame--phone, .figure-block .frame--phone { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .frame--phone img, .product__shot .frame--phone img { border: 0; border-radius: 0; } .product__shot .frame--phone img { max-height: none; object-fit: contain; object-position: center; } /* =================================================================== Products: figure + legend, feature list, note =================================================================== */ .figure-block { margin-top: 44px; display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px, 5vw, 52px); align-items: start; } .figure-block .plate { margin: 0; max-width: 320px; } .figure-block .frame:not(.frame--phone) { box-shadow: var(--shadow); } .plate figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-faint); } .legend-label { margin: 0 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink-faint); } .legend { margin: 0; display: grid; grid-template-columns: 120px 1fr; border-top: 1px solid var(--line-strong); } .legend dt { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--ink-faint); line-height: 1.5; } .legend dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .legend dt:last-of-type, .legend dd:last-of-type { border-bottom: 0; } /* Compact meta shown on narrow screens in place of the legend. */ .meta-line { display: none; margin-top: 26px; border-block: 1px solid var(--line-strong); padding: 11px 0; flex-wrap: wrap; gap: 4px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); } .meta-line .sep { color: var(--ink-faint); } /* Feature list */ .list-block { margin-top: 44px; } .subhead { margin: 0 0 18px; font-size: 1.05rem; font-weight: 620; letter-spacing: -0.01em; color: var(--ink); } .feature-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: none; } .feature-list li { display: grid; grid-template-columns: 24px 1fr; gap: 4px; border-bottom: 1px solid var(--line); padding: 13px 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); } .tick { display: inline-block; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); margin-top: 9px; } /* Note callout */ .note { margin-top: 44px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); padding: 22px 26px; border-radius: 0 10px 10px 0; max-width: none; display: flex; flex-direction: column; gap: 12px; } .note p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); } .note strong { color: var(--ink); font-weight: 640; } /* =================================================================== Panels =================================================================== */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(24px, 4vw, 38px); max-width: 72ch; } .panel > .h2 { margin: 0; } .panel-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .panel-stack p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); } /* =================================================================== Placeholder tokens and mono values =================================================================== */ .token { font-family: var(--font-mono); color: var(--accent-strong); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 4px; padding: 1px 6px; font-size: 12.5px; } .token--nowrap { white-space: nowrap; } .token--14 { font-size: 13.5px; padding: 2px 7px; } .token--15 { font-size: 14px; padding: 3px 8px; } .token--rail { font-size: 11.5px; padding: 2px 6px; align-self: flex-start; } .mono-soft { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-soft); } .mono-soft-sm { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); } /* Email / post token link */ .token-link { display: inline-block; font-family: var(--font-mono); font-size: 14.5px; color: var(--accent-strong); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 5px; padding: 6px 11px; text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease; white-space: nowrap; } .token-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-tint) 60%, var(--surface)); color: var(--accent-strong); text-decoration: none; } /* =================================================================== Registration colophon and definition lists =================================================================== */ .colophon__name { margin: 0 0 3px; font-size: 16.5px; font-weight: 660; letter-spacing: -0.01em; color: var(--ink); } .colophon__reg { margin: 0 0 18px; font-size: 14px; color: var(--ink-faint); } .reg-dl { margin: 0; display: grid; grid-template-columns: 172px 1fr; border-top: 1px solid var(--line-strong); } .reg-dl dt { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--ink-faint); line-height: 1.5; } .reg-dl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.5; } .reg-dl dt:last-of-type, .reg-dl dd:last-of-type { border-bottom: 0; } .reg-dl--200 { grid-template-columns: 200px 1fr; column-gap: 24px; } .reg-dl--230 { grid-template-columns: 230px 1fr; } .reg-dl--260 { grid-template-columns: 260px 1fr; } .reg-dl--260 dt, .reg-dl--260 dd { padding: 12px 0; } .reg-dl--260 dt { font-size: 11px; } .colophon--imprint .colophon__name { font-size: 22px; letter-spacing: -0.015em; margin-bottom: 4px; } .colophon--imprint .colophon__reg { font-size: 15px; margin-bottom: 24px; } /* Document control */ .doc-dl { margin: 0; display: grid; grid-template-columns: 176px 1fr; border-top: 1px solid var(--line-strong); } .doc-dl dt { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); } .doc-dl dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); } .doc-dl dt:last-of-type, .doc-dl dd:last-of-type { border-bottom: 0; } .doc-panel { margin-top: 36px; max-width: 70ch; } .doc-panel__label { margin: 0 0 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink-faint); } /* =================================================================== Privacy: contents index + clauses =================================================================== */ .toc { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 22px; } .toc__label { margin: 0 0 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink-faint); } .toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; } .toc li { border-bottom: 1px solid var(--line); } .toc a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 9px 0; font-size: 14px; color: var(--ink-soft); text-decoration: none; transition: color 180ms ease; } .toc a:hover { color: var(--accent); text-decoration: none; } .toc a .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .clauses { list-style: none; margin: 0; padding: 0; } .clause { display: grid; grid-template-columns: 56px 1fr; gap: clamp(16px, 4vw, 44px); align-items: start; border-top: 1px solid var(--line); padding: 40px 0; scroll-margin-top: 96px; } .clause:first-child { border-top: 0; } .clause__no { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; font-weight: 600; color: var(--accent); padding-top: 6px; } .clause__body { min-width: 0; } .clause__body > * + * { margin-top: 16px; } .clause__body h2 { margin: 0; font-size: 1.35rem; font-weight: 640; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); } .clause__body p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: none; } .clause__body .rights, .clause__body .feature-list, .clause__body .note { margin-top: 16px; } /* Controller card */ .controller-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px 28px; max-width: 62ch; } .controller-card .colophon__name { font-size: 16.5px; } /* GDPR rights ledger list */ .rights { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: none; } .rights li { display: grid; grid-template-columns: 42px 1fr; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); } .rights__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); padding-top: 4px; } .rights strong { color: var(--ink); font-weight: 640; } /* =================================================================== Contact =================================================================== */ .reach { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .reach__col { padding: 32px 44px 34px 0; } .reach__col + .reach__col { padding: 32px 0 34px 44px; border-left: 1px solid var(--line); } .reach h3 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 620; color: var(--ink); } .reach p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); } .post-address { font-style: normal; margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .post-address__name { font-size: 16px; font-weight: 660; color: var(--ink); } .imprint-intro { margin: 16px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: none; } .imprint-panel { margin-top: 28px; } /* =================================================================== Footer =================================================================== */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); } .site-footer__inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(48px, 7vw, 72px) var(--pad-x) 44px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(32px, 6vw, 64px); align-items: start; } .footer-h { margin: 0 0 18px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink-faint); } .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; } .footer-brand svg { color: var(--ink); } .footer-brand .wordmark__name, .footer-brand .wordmark__suffix { font-size: 13px; } .footer-pages ul { list-style: none; margin: 0; padding: 0; } .footer-pages li { border-top: 1px solid var(--line); } .footer-pages li:last-child { border-bottom: 1px solid var(--line); } .footer-pages a { display: block; padding: 10px 0; font-size: 15px; color: var(--ink-soft); text-decoration: none; transition: color 180ms ease; } .footer-pages a:hover { color: var(--accent); text-decoration: none; } .footer-legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); } .footer-legal p { margin: 0; font-size: 13.5px; color: var(--ink-faint); } /* =================================================================== Responsive =================================================================== */ @media (max-width: 52rem) { body { font-size: 16px; } /* The header wraps to two rows here, so anchor jumps need a taller offset. */ html { scroll-padding-top: 120px; } /* Header: brand + toggle on row one, nav wraps to row two. */ .site-header__bar { flex-wrap: wrap; padding: 12px var(--pad-x); row-gap: 10px; } .site-nav { order: 3; flex: 0 0 100%; } .site-nav ul { gap: 4px; margin-inline: -10px; } .appearance { margin-left: auto; } /* Product index rows stack; thumbnail leads. */ .product { grid-template-columns: 1fr; gap: 14px; padding: 24px 12px 26px; } .product__num { padding-top: 0; } .product__shot { order: -1; justify-self: start; max-width: 180px; } /* Products figure block stacks; legend gives way to a meta line. */ .figure-block { grid-template-columns: 1fr; gap: 0; margin-top: 30px; } .figure-block .plate { max-width: 340px; } .legend-label, .legend { display: none; } .meta-line { display: flex; } /* Clauses stack. */ .clause { grid-template-columns: 1fr; gap: 0; padding: 30px 0; scroll-margin-top: 120px; } .clause__no { padding-top: 0; margin-bottom: 8px; } .clause__body h2 { font-size: 1.2rem; } .rights li { grid-template-columns: 34px 1fr; font-size: 15.5px; } /* Contents index to a single column. */ .toc ol { grid-template-columns: 1fr; } /* Definition lists: key above value. */ .reg-dl, .reg-dl--200, .reg-dl--230, .reg-dl--260, .doc-dl { grid-template-columns: 1fr; } .reg-dl dt, .doc-dl dt { border-bottom: 0; padding-bottom: 2px; } .reg-dl dd, .doc-dl dd { padding-top: 0; } /* Contact reach stacks. */ .reach { grid-template-columns: 1fr; } .reach__col { padding: 28px 0; border-bottom: 1px solid var(--line); } .reach__col + .reach__col { padding: 28px 0; border-left: 0; border-bottom: 0; } /* Footer single column. */ .footer-grid { grid-template-columns: 1fr; gap: 34px; } } @media (max-width: 34rem) { .feature-list li { grid-template-columns: 20px 1fr; font-size: 15.5px; } } /* =================================================================== Motion guard =================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }