/* --------------------------------------------------------------------------- Reneca marketing site — legal.css Rules `terms.html` and `privacy.html` need beyond site.css: the narrow reading column, the document head, the contents list, section headings, the company box, and tables. Loaded after tokens.css and site.css. Every colour, radius, shadow, border, font, tracking and duration below resolves to a token, exactly as site.css requires. The only raw numbers are the reading column's width (860px) and the one responsive breakpoint (640px), each commented where it appears. Padding, margin and gap figures are plain pixel values — site/tokens.css has no spacing scale for a static site with no build step, so these dimensions stay inline, matching site.css's own convention under design-system.md §3.9 ("a dimension only one surface depends on stays inline, not tokenised"). --------------------------------------------------------------------------- */ .doc { max-width: 860px; /* raw: the reading column's width */ margin: 0 auto; padding: calc(var(--site-nav-h) + 68px) var(--site-gutter) 90px; font-family: var(--font-serif); font-size: var(--text-body-lg); line-height: var(--text-body-lg--line-height); color: var(--color-ink-700); } .doc p, .doc ul, .doc ol { max-width: var(--measure-read); } .doc p { margin-bottom: 16px; } .doc ul, .doc ol { margin: 0 0 18px 26px; } .doc li { margin-bottom: 9px; } .doc strong { color: var(--color-ink-900); font-weight: 600; } .doc a { color: var(--color-accent-purpose); text-underline-offset: 4px; } /* --------------------------------------------------------------------------- Document head --------------------------------------------------------------------------- */ .doc-head { margin-bottom: 48px; padding-bottom: 36px; border-bottom: var(--border-hairline) solid var(--color-ink-200); } .doc-head h1 { margin-bottom: 18px; } /* The doc-meta line, the contents heading and table headers below all share one style: design-system.md §3.1's `label` token (12px, 600, uppercase, 0.08em tracking). */ .doc-meta { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-500); } .doc-meta b { color: var(--color-ink-700); font-weight: 600; } /* --------------------------------------------------------------------------- Contents — a §7.1 card. --------------------------------------------------------------------------- */ .toc { background-color: var(--color-surface); border-radius: var(--radius-xl); border: var(--border-hairline) solid var(--color-ink-200); box-shadow: var(--shadow-card); padding: 30px 34px; margin: 44px 0 56px; } .toc h2 { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-900); margin-bottom: 16px; } /* Two columns above 640px, per the responsive block at the foot of this file. */ .toc ol { margin-left: 22px; columns: 2; column-gap: 40px; max-width: none; } .toc li { padding: 3.5px 0; margin-bottom: 0; font-size: var(--text-body-sm); break-inside: avoid; } .toc a { color: var(--color-ink-500); text-decoration: none; } .toc a:hover { color: var(--color-accent-purpose); text-decoration: underline; } /* --------------------------------------------------------------------------- Section headings — Crimson Pro, design-system.md §3.1's title tokens. --------------------------------------------------------------------------- */ .doc h2.sec { font-family: var(--font-serif); font-size: var(--text-title-lg); line-height: var(--text-title-lg--line-height); font-weight: 400; letter-spacing: var(--tracking-tight); color: var(--color-ink-900); margin: 56px 0 18px; /* Clears the fixed nav on an in-page jump, matching site.css's own scroll-padding-top on . */ scroll-margin-top: calc(var(--site-nav-h) + 14px); } .doc h3 { font-family: var(--font-serif); font-size: var(--text-title-md); line-height: var(--text-title-md--line-height); font-weight: 500; color: var(--color-ink-900); margin: 30px 0 12px; } /* --------------------------------------------------------------------------- Company box — a §7.1 card. --------------------------------------------------------------------------- */ .company-box { background-color: var(--color-surface); border-radius: var(--radius-xl); border: var(--border-hairline) solid var(--color-ink-200); box-shadow: var(--shadow-card); padding: 26px 30px; margin: 24px 0; max-width: none; } .company-box p { margin-bottom: 6px; max-width: none; } /* --------------------------------------------------------------------------- Tables (privacy.html) --------------------------------------------------------------------------- */ .doc table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; } .doc th, .doc td { text-align: left; padding: 12px 14px; border: var(--border-hairline) solid var(--color-ink-200); vertical-align: top; } .doc th { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-900); background-color: var(--color-surface-sunken); } .doc td { font-family: var(--font-serif); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-ink-700); background-color: var(--color-surface); } /* --------------------------------------------------------------------------- Responsive — one breakpoint, matching the rest of the site's. --------------------------------------------------------------------------- */ @media (max-width: 640px) { /* raw: the one breakpoint this file uses */ .doc { padding: calc(var(--site-nav-h) + 38px) var(--site-gutter-sm) 90px; } .toc ol { columns: 1; } .doc th, .doc td { padding: 8px 9px; font-size: var(--text-label-sm); } }