/* ============================================================ BASEBALL FIELD NOTES — legal.css Styles for /terms and /privacy pages. Requires: site.css loaded first (provides tokens + reset). Usage in PHP: 1. Add to 2. Wrap all content between nav and footer in:
...
============================================================ */ /* ── Page wrapper ─────────────────────────────────────────── */ .legal-page { min-height: 100dvh; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-primary); } /* ── Content container ────────────────────────────────────── */ .legal-container { max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; } /* ── Page title (h1) ──────────────────────────────────────── */ .legal-container h1 { font-size: clamp(28px, 6vw, 42px); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-primary); line-height: 1.05; margin-bottom: 12px; } /* ── Meta line (site name + last updated) ─────────────────── */ .legal-container .meta { font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } /* ── Section headings (h2) ────────────────────────────────── */ .legal-container h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 40px; margin-bottom: 12px; } /* ── Body text ────────────────────────────────────────────── */ .legal-container p { font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--text-secondary); margin-bottom: 14px; } .legal-container p strong { font-weight: 600; color: var(--text-primary); } /* ── Lists ────────────────────────────────────────────────── */ .legal-container ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding-left: 0; } .legal-container ul li { font-family: 'Barlow', sans-serif; font-size: 15px; line-height: 1.65; color: var(--text-secondary); display: flex; align-items: baseline; gap: 10px; } .legal-container ul li::before { content: '—'; color: var(--text-dim); font-size: 13px; flex-shrink: 0; } .legal-container ul li strong { color: var(--text-primary); font-weight: 600; } /* ── Links ────────────────────────────────────────────────── */ .legal-container a { color: var(--accent); text-decoration: none; } .legal-container a:hover { text-decoration: underline; } /* ── Responsive ───────────────────────────────────────────── */ @media (min-width: 600px) { .legal-container { padding: 56px 24px 96px; } }