/* ========================================================================== LEGAL PAGE STYLES ========================================================================== Shared between privacy.html and terms.html — these two pages need an identical layout (a sticky table-of-contents sidebar next to long-form reading content), so the pattern lives in its own shared file rather than being duplicated in two page-specific files. This is the same "promote once a second page needs it" reasoning we used earlier for .page-hero, just applied to a smaller family of two pages instead of the whole site — hence its own file instead of living in components.css, which is reserved for truly global pieces (nav, footer, buttons) used by every page. NO JAVASCRIPT IS USED ON THESE PAGES. The sidebar links are plain anchors — clicking one jumps to that section using the browser's native anchor scrolling, smoothed by the "scroll-behavior: smooth" rule already set on in base.css. No scroll-tracking, no active-link highlighting — those would need JavaScript, and for two documents someone reads once, that complexity isn't earning its keep. ========================================================================== */ /* ========================================================================== TWO-COLUMN LAYOUT — sidebar + content, side by side on desktop, stacked (sidebar hidden) on mobile ========================================================================== */ .legal-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); padding-block: var(--space-2xl) var(--space-5xl); } .legal-sidebar { display: none; /* hidden on mobile — see the plan-proposal note: section jump nav is a desktop-only convenience. On a small screen, a long sticky sidebar would eat the space the reader needs for the actual content. */ } .legal-content { min-width: 0; /* prevents long unbroken strings (like a URL in a placeholder note) from stretching the grid column wider than intended */ } @media (min-width: 1024px) { .legal-layout { grid-template-columns: 240px 1fr; align-items: start; /* stops the sidebar from stretching to match the height of the much taller content column */ } .legal-sidebar { display: block; position: sticky; top: calc(var(--space-3xl) + 64px); /* clears the sticky site header */ } } .legal-toc-title { font-size: var(--text-body-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: var(--space-lg); } .legal-toc-list { display: flex; flex-direction: column; gap: var(--space-sm); border-left: 2px solid var(--color-border); } .legal-toc-list a { display: block; padding: var(--space-xs) var(--space-lg); font-size: var(--text-body-sm); color: var(--color-text-secondary); border-left: 2px solid transparent; margin-left: -2px; /* sits exactly on top of the list's own left border */ transition: color var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth); } .legal-toc-list a:hover { color: var(--color-brand-blue); border-left-color: var(--color-brand-blue); } /* ========================================================================== LAST UPDATED BADGE ========================================================================== */ .legal-updated { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-body-sm); color: var(--color-text-muted); margin-bottom: var(--space-2xl); } .legal-updated::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); } /* ========================================================================== PLAIN-ENGLISH SUMMARY BOX — a scannable "the short version" callout at the top of each document, before the formal section-by-section text. This directly serves the "avoid overly legal language" brief: most readers want the two-minute version, and the full document below is there for anyone who wants the complete detail. ========================================================================== */ .policy-summary { background: var(--color-sky-soft); border-radius: var(--radius-lg); padding: var(--space-2xl); margin-bottom: var(--space-4xl); } .policy-summary-title { font-size: var(--text-heading-sm); margin-bottom: var(--space-lg); } .policy-summary-list { display: flex; flex-direction: column; gap: var(--space-md); } .policy-summary-item { display: flex; align-items: flex-start; gap: var(--space-md); } .policy-summary-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-brand-blue); margin-top: 2px; } .policy-summary-item p { font-size: var(--text-body-md); color: var(--color-text-primary); } /* ========================================================================== LEGAL SECTION — each numbered/titled section of the document ========================================================================== */ .legal-section { padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-border); /* scroll-margin-top ensures that when a sidebar link jumps to this section, the heading doesn't end up hidden underneath the sticky site header — the browser stops scrolling this many pixels early. */ scroll-margin-top: calc(var(--space-2xl) + 72px); } .legal-section:last-child { border-bottom: none; } .legal-section h2 { font-size: var(--text-heading-md); margin-bottom: var(--space-lg); } .legal-section h3 { font-size: var(--text-heading-sm); margin-top: var(--space-xl); margin-bottom: var(--space-md); } .legal-section p { font-size: var(--text-body-md); margin-bottom: var(--space-lg); max-width: 680px; /* same reasoning as .prose-column on the About page — caps line length for comfortable reading */ } .legal-section ul { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); max-width: 680px; } .legal-section li { font-size: var(--text-body-md); color: var(--color-text-secondary); padding-left: var(--space-lg); position: relative; } .legal-section li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-border-strong); } .legal-section strong { color: var(--color-text-primary); font-weight: 600; }