/** * Cookie policy page — long-form legal styling. Inherits the site's * design system from ../../styles.css for tokens (colours, fonts, * radius); only adds layout + table treatments specific to long * legal documents. * * Goals: high readability for ~12-screen scrolling articles, a calm * light-cream background that signals "legal page" vs. the marketing * pages, sticky table of contents on desktop, source-code-quality * tables for cookie disclosures. */ /* Page-level. .legal-body class on opts the page into the slightly off-white legal-page background. */ .legal-body { background: var(--ds-canvas); color: var(--ds-text); font-family: var(--ds-sans); } .legal-main { max-width: 820px; margin: 0 auto; padding: 0 24px 80px 24px; } /* ----- Hero (matches pricing-hero / docs-hero pattern but calmer) */ .legal-hero { padding: 80px 0 32px 0; } .legal-hero-inner { display: flex; flex-direction: column; gap: 18px; } .legal-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ds-muted); } .legal-eyebrow-pill { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ds-accent-soft, #ffe9df); color: var(--ds-accent-strong, #c2421a); } .legal-hero h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--ds-text); } .legal-lead { font-size: 16px; line-height: 1.6; color: var(--ds-text-soft, #2c2825); max-width: 720px; margin: 0; } .legal-lead a { color: var(--ds-accent-strong, #c2421a); border-bottom: 1px solid currentColor; text-decoration: none; } /* ----- Table of contents */ .legal-toc-wrap { margin: 32px 0 24px 0; } .legal-toc { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 18px 24px; box-shadow: var(--ds-shadow-sm); } .legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; } .legal-toc li { font-size: 13.5px; line-height: 1.5; } .legal-toc a { color: var(--ds-text-soft, #2c2825); text-decoration: none; } .legal-toc a:hover { color: var(--ds-accent-strong, #c2421a); text-decoration: underline; } /* ----- Article body */ .legal-article { padding-top: 12px; } .legal-section { padding: 32px 0; border-top: 1px solid var(--ds-divider); } .legal-section:first-of-type { border-top: 0; } .legal-section h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px 0; color: var(--ds-text); } .legal-section h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; margin: 22px 0 10px 0; color: var(--ds-text); } .legal-section p { font-size: 15px; line-height: 1.7; margin: 0 0 14px 0; color: var(--ds-text-soft, #2c2825); } .legal-section ul, .legal-section ol { margin: 0 0 14px 0; padding-left: 22px; } .legal-section li { font-size: 15px; line-height: 1.7; color: var(--ds-text-soft, #2c2825); margin-bottom: 4px; } .legal-section a { color: var(--ds-accent-strong, #c2421a); text-decoration: none; border-bottom: 1px solid rgba(194, 66, 26, 0.25); } .legal-section a:hover { border-bottom-color: var(--ds-accent-strong, #c2421a); } .legal-section code { font-family: var(--ds-mono); font-size: 13px; background: var(--ds-surface); border: 1px solid var(--ds-border); padding: 1px 6px; border-radius: 4px; color: var(--ds-text); word-break: break-all; } .legal-section em { font-style: italic; } .legal-section strong { font-weight: 600; color: var(--ds-text); } /* ----- Cookie tables */ .cookie-table-wrap { margin: 14px 0 18px 0; overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); } .cookie-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; } .cookie-table th { text-align: left; padding: 10px 14px; background: var(--ds-canvas); border-bottom: 1px solid var(--ds-border); font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-muted); } .cookie-table td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--ds-divider); line-height: 1.55; color: var(--ds-text-soft, #2c2825); word-wrap: break-word; } .cookie-table tr:last-child td { border-bottom: 0; } .cookie-table td:first-child { width: 28%; } .cookie-table td code { font-size: 12px; background: transparent; border: 0; padding: 0; color: var(--ds-text); } .cookie-row-tech { display: block; margin-top: 4px; font-size: 11px; color: var(--ds-muted-soft); font-weight: 500; } .cookie-row-aside { display: inline-block; margin-left: 6px; font-size: 11.5px; color: var(--ds-muted-soft); } /* ----- Callouts */ .legal-callout { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 14px 0; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); font-size: 13.5px; line-height: 1.6; color: var(--ds-text-soft, #2c2825); } .legal-callout-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-canvas); color: var(--ds-muted); flex-shrink: 0; } .legal-callout-icon svg { width: 13px; height: 13px; } .legal-callout-info { background: var(--ds-info-soft, #eef4ff); border-color: var(--ds-info-strong, #b8cfee); color: #1f3863; } .legal-callout-info .legal-callout-icon { background: rgba(31, 56, 99, 0.08); color: var(--ds-info-strong, #1f4eb3); } /* ----- Footer */ .legal-footer { margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--ds-divider); display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ds-muted); } .legal-footer a { color: var(--ds-muted); text-decoration: none; } .legal-footer a:hover { color: var(--ds-text); text-decoration: underline; } .legal-footer span { color: var(--ds-muted-soft); } /* ----- Responsive */ @media (max-width: 720px) { .legal-hero { padding: 50px 0 24px 0; } .legal-hero h1 { font-size: 32px; } .legal-toc ol { grid-template-columns: 1fr; } .cookie-table th, .cookie-table td { padding: 9px 10px; font-size: 12.5px; } .cookie-table td:first-child { width: 36%; } }