/* FlatSix Intelligence โ€” legal page styles Loaded by privacy.html, terms.html, contact.html Assumes the main site's fonts are already imported via the links. Token spec mirrors lib/theme.js โ€” keep in sync. Legacy names retained (--fg / --fg-muted / --fg-dim / --accent) but values updated to match the canonical spec post-SEV1 #6 contrast audit: --fg = text-1 (17:1) --fg-muted = text-3 (7.7:1) in-content captions --fg-dim = text-nav (4.7:1) chrome (was 2.84:1 โ€” failed AA) */ :root { --bg: #08080a; --bg-raised: #121216; --fg: #ececef; --fg-muted: #a0a0a6; --fg-dim: #7a7a84; --accent: #c8b088; --border: #1e1e24; --border-raised: #2a2a32; --max-width: 720px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: 'Karla', system-ui, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } a:hover { border-bottom-color: var(--accent); } .legal-wrap { max-width: var(--max-width); margin: 0 auto; padding: 80px 24px 120px; } .legal-nav { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 48px; } .legal-nav a { color: var(--fg-muted); } .legal-nav a:hover { color: var(--accent); } .legal-nav .sep { margin: 0 12px; color: var(--fg-dim); } h1 { font-family: 'Cormorant Garamond', 'Cormorant', serif; font-weight: 400; font-size: 44px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; } .legal-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.05em; color: var(--fg-dim); text-transform: uppercase; margin-bottom: 56px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .legal-meta span + span::before { content: ' ยท '; margin: 0 6px; } h2 { font-family: 'Cormorant Garamond', 'Cormorant', serif; font-weight: 400; font-size: 28px; line-height: 1.25; margin: 56px 0 16px; letter-spacing: -0.005em; } h3 { font-family: 'Karla', sans-serif; font-weight: 600; font-size: 16px; margin: 32px 0 12px; color: var(--fg); } p, ul, ol { margin: 0 0 16px; } ul, ol { padding-left: 24px; } li { margin-bottom: 8px; } strong { color: var(--fg); font-weight: 600; } em { color: var(--fg-muted); font-style: italic; } .jurisdiction-tag { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: rgba(201, 169, 97, 0.08); padding: 2px 8px; border-radius: 2px; margin-right: 8px; vertical-align: 2px; } .callout { margin: 24px 0; padding: 20px 24px; background: var(--bg-raised); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; } .callout p:last-child { margin-bottom: 0; } .callout strong { color: var(--accent); } .contact-card { background: var(--bg-raised); border: 1px solid var(--border-raised); border-radius: 4px; padding: 32px; margin: 40px 0; } .contact-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0; } .contact-card dt { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); padding-top: 3px; } .contact-card dd { margin: 0; color: var(--fg); } .back-link { display: inline-block; margin-top: 64px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .back-link:hover { color: var(--accent); } .toc { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 24px 28px; margin-bottom: 48px; } .toc-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 12px; } .toc ol { margin: 0; padding-left: 20px; font-size: 15px; } .toc li { margin-bottom: 4px; } .toc a { color: var(--fg-muted); border: none; } .toc a:hover { color: var(--accent); } @media (max-width: 600px) { .legal-wrap { padding: 48px 20px 80px; } h1 { font-size: 34px; } h2 { font-size: 24px; margin-top: 40px; } .contact-card { padding: 24px; } .contact-card dl { grid-template-columns: 1fr; gap: 4px 0; } .contact-card dt { padding-top: 12px; } }