/* ============================================================ legal-polish.css — premium presentation pass for the legal & utility pages: terms.html, privacy.html, seller-agreement.html and 404.html. Additive, CSS-only. Loaded AFTER styles.css. Scoping: - The three legal pages have a bare but each contains a unique ".legal-updated" node, so every legal rule is scoped to body:has(.legal-updated) — this never matches support.html (which reuses .legal-content) or any other page. - 404.html uses body.page-marketplace (shared with sell/checkout/ listing), so its rules are scoped to body.page-marketplace:has(.empty-state-icon) — only 404 pairs that body class with an .empty-state-icon. Reuses existing design tokens only. No markup/JS changes. ============================================================ */ /* ================= LONG-FORM LEGAL PROSE ==================== */ /* Page rhythm: comfortable measure + generous tail whitespace */ body:has(.legal-updated) main.wrap { padding-bottom: 96px; } /* --- Header: heavier, tighter title + lit gold accent rule --- */ body:has(.legal-updated) .page-header { padding: 68px 0 30px; } body:has(.legal-updated) .page-header h1 { font-weight: 850; letter-spacing: -0.038em; } body:has(.legal-updated) .page-header .new-tag { vertical-align: middle; transform: translateY(-2px); } body:has(.legal-updated) .page-header::after { width: 72px; box-shadow: 0 0 22px -2px rgba(201,162,39,0.5); } /* --- Content column: optimal reading measure --------------- */ body:has(.legal-updated) .legal-content { max-width: 68ch; animation: legalFadeUp .55s var(--ease-out) both; } /* --- "Last updated" → refined uppercase mono eyebrow -------- */ body:has(.legal-updated) .legal-updated { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); background: rgba(201,162,39,0.10); border: 1px solid rgba(201,162,39,0.26); border-radius: 999px; padding: 5px 12px 5px 11px; margin: 0 0 6px; } body:has(.legal-updated) .legal-updated::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 8px 1px rgba(201,162,39,0.7); } /* Lit divider that separates the meta line from the body copy */ body:has(.legal-updated) .legal-content .legal-updated { position: relative; } body:has(.legal-updated) .legal-content > .legal-updated::after { content: ""; position: absolute; left: 0; right: -40vw; bottom: -22px; height: 1px; max-width: 100vw; background: linear-gradient(90deg, var(--glass-border), rgba(255,255,255,0.14) 20%, transparent 82%); } /* --- Section headings: hierarchy + gold marker ------------- */ body:has(.legal-updated) .legal-content h2 { position: relative; margin: 46px 0 14px; padding-left: 16px; font-size: 21px; font-weight: 750; letter-spacing: -0.018em; color: var(--ink); scroll-margin-top: 90px; } body:has(.legal-updated) .legal-content h2::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--gold-light), var(--gold)); } /* First heading sits close under the meta eyebrow divider */ body:has(.legal-updated) .legal-content h2:first-of-type { margin-top: 40px; } /* --- Body copy: better measure, rhythm, contrast ---------- */ body:has(.legal-updated) .legal-content p { font-size: 15px; line-height: 1.78; color: var(--ink-soft); margin-bottom: 16px; } /* Lead sentence of each clause reads a touch stronger */ body:has(.legal-updated) .legal-content h2 + p { color: var(--ink); } body:has(.legal-updated) .legal-content h2 + p::first-line { color: var(--ink); } /* ================= 404 / UTILITY STATE ===================== */ body.page-marketplace:has(.empty-state-icon) main.wrap { position: relative; overflow: hidden; } /* Soft centred glow so the state feels intentional, not empty */ body.page-marketplace:has(.empty-state-icon) main.wrap::before { content: ""; position: absolute; left: 50%; top: 42%; width: 620px; height: 620px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(201,162,39,0.10), rgba(201,162,39,0.03) 42%, transparent 68%); pointer-events: none; z-index: 0; } body.page-marketplace:has(.empty-state-icon) .empty-state { position: relative; z-index: 1; animation: legalFadeUp .6s var(--ease-out) both; } /* Icon → glass medallion with lit top edge + gold cast */ body.page-marketplace:has(.empty-state-icon) .empty-state-icon { box-sizing: content-box; width: 56px; height: 56px; padding: 22px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 50%; color: var(--gold-light); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%), var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), 0 20px 50px rgba(201,162,39,0.10); } body.page-marketplace:has(.empty-state-icon) .empty-state-icon svg { width: 56px; height: 56px; } /* Title: heavier, tighter (font-size stays inline) */ body.page-marketplace:has(.empty-state-icon) .empty-state h1 { font-weight: 850; letter-spacing: -0.03em; } /* Intro copy: lift to soft ink + comfortable measure */ body.page-marketplace:has(.empty-state-icon) .empty-state p { color: var(--ink-soft); line-height: 1.65; } /* Primary/secondary CTAs: unified premium hover */ body.page-marketplace:has(.empty-state-icon) .empty-state .btn { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); } body.page-marketplace:has(.empty-state-icon) .empty-state .btn:hover { transform: translateY(-3px); } body.page-marketplace:has(.empty-state-icon) .empty-state .btn-secondary:hover { border-color: var(--border-hover); box-shadow: var(--shadow-hover); } body.page-marketplace:has(.empty-state-icon) .empty-state .btn:active { transform: translateY(-1px); } /* Quiet tertiary "Help Center" line beneath the CTAs */ body.page-marketplace:has(.empty-state-icon) .bc-404-help { margin-top: 2px; font-size: 13.5px; color: var(--ink-muted); } body.page-marketplace:has(.empty-state-icon) .bc-404-help a { color: var(--ink-soft); transition: color .18s var(--ease-out); } body.page-marketplace:has(.empty-state-icon) .bc-404-help a:hover { color: var(--gold-light); } /* ================= MOTION + RESPONSIVE ===================== */ @keyframes legalFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { body:has(.legal-updated) .page-header { padding-top: 52px; } body:has(.legal-updated) .legal-content h2 { font-size: 19px; margin-top: 38px; } body:has(.legal-updated) .legal-content > .legal-updated::after { right: -18vw; } body.page-marketplace:has(.empty-state-icon) main.wrap::before { width: 420px; height: 420px; } } @media (prefers-reduced-motion: reduce) { body:has(.legal-updated) .legal-content, body.page-marketplace:has(.empty-state-icon) .empty-state { animation: none; } body.page-marketplace:has(.empty-state-icon) .empty-state .btn, body.page-marketplace:has(.empty-state-icon) .empty-state .btn:hover, body.page-marketplace:has(.empty-state-icon) .empty-state .btn:active { transition: none; transform: none; } } /* ---------------- Typographic finishing --------------------------- Orphan/widow control on legal headings + long-form prose so a lone word never wraps alone. Additive; old browsers ignore it safely. */ body:has(.legal-updated) .page-header h1, body:has(.legal-updated) .legal-content h2 { text-wrap: balance; } body:has(.legal-updated) .legal-content p { text-wrap: pretty; } /* 404 centred state — orphans are most visible on centred copy */ body.page-marketplace:has(.empty-state-icon) .empty-state h1 { text-wrap: balance; } body.page-marketplace:has(.empty-state-icon) .empty-state p { text-wrap: pretty; }