/* ============================================================ components.css — the light pages (/ and /teams). Page-specific scalars that differ between the two are handled by a .page-* class on rather than by duplicating the component. ============================================================ */ /* ── LOGO ──────────────────────────────────────────────────── */ .logo { font-family: var(--display); font-size: 24px; text-decoration: none; letter-spacing: .01em } .logo em { color: var(--wax) } .logo .teams { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); vertical-align: middle; margin-left: 8px; } /* ── BUTTONS ───────────────────────────────────────────────── */ .btn { display: inline-block; padding: 12px 24px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500; font-size: 15px; border-radius: 3px; border: 1px solid var(--ink); transition: background .18s, color .18s; } .btn:hover { background: transparent; color: var(--ink) } .btn-wax { background: var(--wax); border-color: var(--wax); color: #fff } .btn-wax:hover { background: transparent; color: var(--wax) } .btn-sm { padding: 8px 18px; font-size: 14px } /* PRESERVED INCONSISTENCY — do not "fix" without re-running parity. design/ettache-teams.html sets font-family + cursor on .btn; design/ettache-site.html does not. On elements this is invisible (font-family inherits, cursor is already pointer), but the CTA