/* ════════════════════════════════════════════════════════════ LEGAL PAGES — Privacy Policy & Terms of Service All classes are prefixed .legal- to avoid any conflict with the main site styles. ════════════════════════════════════════════════════════════ */ /* * SCROLL FIX FOR LEGAL PAGES * * The main style.css sets body { overflow: hidden } so the SPA * scrolls via only. That works for the single-page app * but clips content on multi-section legal pages. * * These overrides restore normal document scrolling: * - html → no forced overflow-y so height is determined by content * - body → overflow visible so nothing is clipped * - Both → height auto so the page grows with content naturally * * These rules are scoped to this file and only load on legal pages. */ html { overflow-y: auto !important; height: auto !important; min-height: 100% !important; } body { overflow: visible !important; height: auto !important; min-height: 100vh !important; position: static !important; } /* ── Legal Header (reuses #header visual but is static, not fixed) ── */ .legal-header { width: 100%; background: rgba(6,12,7,.96); border-bottom: 1px solid var(--clr-border-mid); height: var(--header-h); display: flex; align-items: center; /* Not fixed — page scrolls normally */ /* position: relative; */ position: sticky; top: 0; z-index: 10; } .legal-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } /* Reuse main .nav layout for the legal header nav */ .legal-header .nav { display: flex; align-items: center; gap: var(--sp-8); } /* ── Legal Page Hero Banner ──────────────────────────────── */ .legal-hero { background: var(--clr-surface-1); border-bottom: 1px solid var(--clr-border); padding-block: var(--sp-16) var(--sp-12); position: relative; overflow: hidden; } .legal-hero__inner { position: relative; z-index: 1; } .legal-hero__meta { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-5); flex-wrap: wrap; } .legal-hero__meta-item { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--clr-text-muted); letter-spacing: .08em; } .legal-hero__meta-item i { color: var(--clr-accent); font-size: .75rem; } .legal-hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--clr-accent-dim); border: 1px solid var(--clr-border-mid); border-radius: var(--r-pill); padding: 4px 14px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; color: var(--clr-accent); margin-bottom: var(--sp-6); } /* ── Legal Layout ─────────────────────────────────────────── */ .legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-16); align-items: start; padding-block: var(--sp-16) var(--sp-24); } /* ── Table of Contents (sticky sidebar) ──────────────────── */ .legal-toc { position: sticky; top: var(--sp-10); } .legal-toc__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-2); } .legal-toc__title::before { content: ''; display: block; width: 14px; height: 1.5px; background: var(--clr-accent); flex-shrink: 0; } .legal-toc__list { display: flex; flex-direction: column; gap: var(--sp-1); } .legal-toc__link { font-size: var(--text-xs); color: var(--clr-text-muted); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border-left: 2px solid transparent; line-height: 1.5; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); display: block; } .legal-toc__link:hover { color: var(--clr-accent); border-left-color: var(--clr-accent); background: var(--clr-accent-dim); } .legal-toc__link.is-active { color: var(--clr-accent); border-left-color: var(--clr-accent); background: var(--clr-accent-dim); } /* ── Legal Body (article content) ────────────────────────── */ .legal-body { min-width: 0; /* prevent grid blowout */ } /* Section blocks — each numbered section */ .legal-section { padding-block: var(--sp-10); border-bottom: 1px solid var(--clr-border); scroll-margin-top: var(--sp-10); } .legal-section:first-child { padding-top: 0; } .legal-section:last-child { border-bottom: none; padding-bottom: var(--sp-6); } /* Section number tag */ .legal-section__num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; color: var(--clr-text-dim); margin-bottom: var(--sp-3); display: block; } /* Section heading */ .legal-section h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.25; color: var(--clr-text-primary); margin-bottom: var(--sp-5); letter-spacing: -.012em; } .legal-section h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--clr-text-primary); margin-top: var(--sp-6); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .legal-section h3::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--clr-accent); flex-shrink: 0; display: block; } /* Body text inside legal sections */ .legal-section p { font-size: var(--text-sm); color: var(--clr-text-secondary); line-height: 1.85; margin-bottom: var(--sp-4); } .legal-section p:last-child { margin-bottom: 0; } /* Bullet lists — scoped to legal pages only */ .legal-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-block: var(--sp-3) var(--sp-4); } .legal-list li { font-size: var(--text-sm); color: var(--clr-text-secondary); line-height: 1.8; padding-left: var(--sp-6); position: relative; } .legal-list li::before { content: ''; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid var(--clr-accent); background: var(--clr-accent-dim); } /* Contact highlight box */ .legal-contact-box { background: var(--clr-surface-2); border: 1px solid var(--clr-border-mid); border-radius: var(--r-lg); padding: var(--sp-8); margin-top: var(--sp-6); display: flex; align-items: flex-start; gap: var(--sp-5); } .legal-contact-box__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--clr-accent-dim); border: 1px solid var(--clr-border-mid); display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: .9rem; } .legal-contact-box__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: var(--sp-1); } .legal-contact-box__value { font-size: var(--text-sm); color: var(--clr-accent); } /* ── Legal Footer Strip ───────────────────────────────────── */ .legal-footer { background: var(--clr-surface-1); border-top: 1px solid var(--clr-border); padding-block: var(--sp-8); } .legal-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); } .legal-footer__copy { font-size: var(--text-xs); color: var(--clr-text-dim); } .legal-footer__links { display: flex; gap: var(--sp-6); } .legal-footer__links a { font-size: var(--text-xs); color: var(--clr-text-muted); transition: color var(--t-fast); } .legal-footer__links a:hover { color: var(--clr-accent); } /* ── Legal Mobile Nav Drawer ──────────────────────────────── */ .legal-mobile-nav { position: fixed; top: var(--header-h); left: 0; right: 0; width: 100%; max-width: 100%; box-sizing: border-box; background: rgba(6,12,7,.97); border-bottom: 1px solid var(--clr-border); padding: var(--sp-6) clamp(20px,4vw,40px) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); z-index: 490; overflow: hidden; } .legal-mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: all; } /* ── Responsive — legal pages ─────────────────────────────── */ @media (max-width: 900px) { /* Hide desktop nav, show hamburger */ .legal-nav--desktop { display: none !important; } .hamburger { display: flex !important; } .legal-layout { grid-template-columns: 1fr; gap: var(--sp-10); } .legal-toc { position: static; /* On mobile, show ToC as a horizontal scrollable pill row */ display: flex; flex-direction: column; gap: var(--sp-2); } .legal-toc__list { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); } .legal-toc__link { border-left: none; border: 1px solid var(--clr-border); border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; } .legal-toc__link:hover, .legal-toc__link.is-active { border-color: var(--clr-accent); background: var(--clr-accent-dim); } } /* Keep hamburger hidden on desktop */ @media (min-width: 901px) { .hamburger { display: none !important; } .legal-nav--desktop { display: flex !important; } .legal-mobile-nav { display: none !important; } } @media (max-width: 640px) { .legal-hero { padding-block: var(--sp-10) var(--sp-8); } .legal-layout { padding-block: var(--sp-10) var(--sp-16); gap: var(--sp-8); } .legal-section h2 { font-size: var(--text-lg); } .legal-footer__inner { flex-direction: column; align-items: flex-start; } }