/* ════════════════════════════════════════════════════════════════════════ MicSer — legal / trust page chrome ──────────────────────────────────────────────────────────────────────── Shared stylesheet for the public, server-rendered legal & trust pages (templates/terms.html, privacy.html, cookie_policy.html, trust_center.html, etc.). Pulls its colors, type scale and spacing exclusively from prototype/tokens.css (linked separately in each page's ) — no values are redeclared here, only composed. This is the same dark, institutional "mining-tech" visual language as the main app shell (prototype/app.css), cherry-picked for a single-column document layout rather than the app's sidebar/panel shell, which doesn't apply here. Do NOT add new color/type/spacing values in this file — extend tokens.css instead if the design system itself needs to grow. ────────── */ * { box-sizing: border-box; } body { margin: 0; padding: 0; background: var(--earth-1); color: var(--fg-2); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--brand-green-3); } a:focus-visible { outline: 2px solid var(--data-cyan); outline-offset: 2px; border-radius: 2px; } /* ── Site header — a normal, full-width website header, not part of the document column below. Border-only separation, no elevated panel. ──── */ .site-header { border-bottom: 1px solid var(--border-hairline); } .site-header-inner { max-width: 760px; margin: 0 auto; padding: var(--s-4) var(--s-5); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .brand-mark { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; display: block; } .brand b { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #fff; } /* ── Document column ───────────────────────────────────────────────────── */ /* Deliberately not a card: no background fill, no border, no shadow, no radius. The document sits directly on the page canvas, like a normal website legal page — only a max-width and padding for a readable column, the same treatment as .site-header-inner/.site-footer-inner. */ .legal-doc { max-width: 720px; margin: 0 auto; padding: var(--s-9) var(--s-5) var(--s-10); } h1 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--t-h1); line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; } .meta { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--fg-4); margin-bottom: var(--s-6); } .meta strong { color: var(--fg-2); font-weight: var(--w-medium); } h2 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--t-h4); color: #fff; letter-spacing: -0.003em; margin: var(--s-7) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--border-faint); } h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } p { font-family: var(--font-body); font-size: var(--t-body); color: var(--fg-2); margin: 0 0 var(--s-3); } ul, ol { margin: 0 0 var(--s-3); padding-left: 20px; } li { font-family: var(--font-body); font-size: var(--t-body); color: var(--fg-2); margin-bottom: 6px; } strong { color: #fff; font-weight: var(--w-semibold); } code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-1); background: var(--earth-4); padding: 1px 6px; border-radius: var(--r-sm); } .contact { font-family: var(--font-body); font-size: var(--t-body); color: var(--fg-2); } /* ── Callouts ──────────────────────────────────────────────────────────── */ /* Applied semantically around specific existing passages (never around the whole document) — see templates/legal/_*.html for exactly which. Three variants only, matching the app's own .banner-* palette in app.css: neutral "info", amber "important", red "critical". */ .callout { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-4) 0; padding: var(--s-4); border-radius: var(--r-lg); } .callout-icon { flex-shrink: 0; margin-top: 2px; } .callout-label { font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: var(--w-semibold); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; opacity: 0.9; } .callout p { margin: 0; color: inherit; } .callout p + p { margin-top: 8px; } .callout strong { color: inherit; } .callout-info { background: var(--earth-3); border: 1px solid var(--border); } .callout-info, .callout-info p { color: var(--fg-2); } .callout-info .callout-icon { color: var(--fg-3); } .callout-important { background: rgba(240,168,48,0.08); border: 1px solid rgba(240,168,48,0.3); } .callout-important, .callout-important p { color: #F4C46B; } .callout-important .callout-icon { color: var(--data-amber); } .callout-critical { background: rgba(225,29,72,0.08); border: 1px solid rgba(225,29,72,0.3); } .callout-critical, .callout-critical p { color: #FB9BAB; } .callout-critical .callout-icon { color: var(--data-red); } /* ── Table (Cookie Notice's cookie/storage tables) ────────────────────── */ .table-scroll { overflow-x: auto; margin: var(--s-3) 0 var(--s-5); border: 1px solid var(--border-faint); border-radius: var(--r-lg); } table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--t-body-sm); } caption { text-align: left; font-size: var(--t-caption); color: var(--fg-4); padding: 10px 14px 0; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-faint); vertical-align: top; } th { background: var(--earth-3); color: var(--fg-4); font-weight: var(--w-semibold); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; } td { color: var(--fg-2); } td.mono, th.mono { font-family: var(--font-mono); } tr:last-child td { border-bottom: none; } .pill { display: inline-block; font-size: 10.5px; font-family: var(--font-mono); font-weight: var(--w-semibold); padding: 2px 10px; border-radius: var(--r-full); } .pill-necessary { background: rgba(34,197,94,0.12); color: #22C55E; border: 1px solid rgba(34,197,94,0.4); } /* ── Trust Center link grid ───────────────────────────────────────────── */ .group-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .group-item { border: 1px solid var(--border-faint); border-radius: var(--r-lg); padding: var(--s-4); background: var(--earth-3); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .group-item:hover { background: var(--earth-4); border-color: var(--border); } .group-item a { display: block; font-family: var(--font-display); font-size: 14px; font-weight: var(--w-semibold); color: #fff; text-decoration: none; margin-bottom: 4px; } .group-item a:hover { color: var(--accent-on-dark); text-decoration: underline; } .group-item p { font-size: var(--t-caption); color: var(--fg-3); margin: 0; } /* ── Site footer — a normal, full-width website footer to match the header above, border-only separation, no elevated panel. ───────────── */ .site-footer { border-top: 1px solid var(--border-hairline); margin-top: var(--s-9); } .site-footer-inner { max-width: 760px; margin: 0 auto; padding: var(--s-6) var(--s-5); text-align: center; font-size: var(--t-caption); color: var(--fg-4); line-height: 1.6; } .site-footer-inner a { color: var(--fg-3); text-decoration: none; } .site-footer-inner a:hover { color: var(--accent-on-dark); text-decoration: underline; } @media (max-width: 520px) { .legal-doc { padding: var(--s-7) var(--s-4) var(--s-8); } .site-header-inner, .site-footer-inner { padding-left: var(--s-4); padding-right: var(--s-4); } h1 { font-size: 24px; } .group-list { grid-template-columns: 1fr; } } @media print { .site-header, .site-footer { display: none; } .legal-doc { max-width: none; padding: 0; } body { background: #fff; color: #000; } a { color: #000; text-decoration: underline; } }