/* ========================================================================== * css/core/base.css * SPX Moves — Base layer (typography defaults, page container, resets) * * WHAT THIS IS * Baseline typography and layout primitives that every unified page uses. * Only affects elements that OPT IN via the .spx-page wrapper (or the * .spx-container helper) — we intentionally do NOT restyle bare , *

, etc. because WordPress theme + admin bar rely on their own rules. * * SISTER FILES * tokens.css — the vars this file consumes (must load first) * components.css — the .spx-card / .spx-btn / ... classes (loads after) * * LOAD ORDER * tokens.css → BASE.CSS → components.css → [page-specific CSS] * * STATUS * Phase 1 — created, NOT yet wp_enqueue_style()'d. See docs/style-unification.md * ========================================================================== */ /* -------------------------------------------------------------------------- * Page wrapper * Add class="spx-page" to the outermost
of a template. Everything * inside inherits canonical UI font, primary text color, and box-sizing. * -------------------------------------------------------------------------- */ .spx-page { color: var(--spx-text-primary); font-family: var(--spx-font-ui); font-size: var(--spx-text-base); line-height: var(--spx-leading-normal); } .spx-page *, .spx-page *::before, .spx-page *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- * Container widths * Pick one modifier — default is .spx-container-wide (1200px). Use * .spx-container by itself only if the page already sets its own max-width. * -------------------------------------------------------------------------- */ .spx-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--spx-container-pad); padding-right: var(--spx-container-pad); } .spx-container-narrow { max-width: var(--spx-container-narrow); } .spx-container-md { max-width: var(--spx-container-md); } .spx-container-wide { max-width: var(--spx-container-wide); } .spx-container-xwide { max-width: var(--spx-container-xwide); } /* -------------------------------------------------------------------------- * Page header (h1 + optional subtitle) * Use on centered hero rows above a card grid. Opt-in via class, does * NOT restyle bare

. * -------------------------------------------------------------------------- */ .spx-page-header { text-align: center; margin-bottom: var(--spx-space-10); } .spx-page-header h1, .spx-page-title { color: var(--spx-text-primary); font-family: var(--spx-font-ui); font-size: var(--spx-text-4xl); font-weight: 600; line-height: var(--spx-leading-tight); margin: 0 0 var(--spx-space-3) 0; } .spx-page-header p, .spx-page-subtitle { color: var(--spx-text-muted); font-size: var(--spx-text-xl); line-height: var(--spx-leading-relaxed); max-width: 900px; margin: 0 auto; } /* -------------------------------------------------------------------------- * Section headings inside cards / prose * -------------------------------------------------------------------------- */ .spx-page .spx-h2, .spx-page h2.spx-h2 { color: var(--spx-amber); font-size: var(--spx-text-2xl); font-weight: 600; line-height: var(--spx-leading-tight); margin: 0 0 var(--spx-space-5) 0; padding-bottom: var(--spx-space-2); border-bottom: 1px solid var(--spx-border-amber-soft); } .spx-page .spx-h3, .spx-page h3.spx-h3 { color: var(--spx-text-primary); font-size: var(--spx-text-xl); font-weight: 600; line-height: var(--spx-leading-tight); margin: var(--spx-space-5) 0 var(--spx-space-2) 0; } /* -------------------------------------------------------------------------- * Prose defaults * Only apply inside a .spx-prose wrapper so we don't accidentally restyle * marketing pages or admin screens. * -------------------------------------------------------------------------- */ .spx-prose { color: var(--spx-text-body-alt); line-height: var(--spx-leading-relaxed); font-size: var(--spx-text-md); } .spx-prose p { margin: 0 0 var(--spx-space-4) 0; } .spx-prose a { color: var(--spx-amber); text-decoration: underline; transition: color var(--spx-transition-slow); } .spx-prose a:hover { color: var(--spx-amber-hover); } .spx-prose ul, .spx-prose ol { margin: 0 0 var(--spx-space-5) var(--spx-space-5); padding: 0; } .spx-prose li { margin-bottom: var(--spx-space-2); position: relative; padding-left: var(--spx-space-4); } .spx-prose ul li::before { content: "•"; color: var(--spx-amber); position: absolute; left: 0; } .spx-prose li strong { color: var(--spx-amber); } .spx-prose code { font-family: var(--spx-font-mono); background: var(--spx-amber-soft); color: var(--spx-amber); padding: 2px 6px; border-radius: var(--spx-radius-sm); font-size: 0.92em; } /* -------------------------------------------------------------------------- * Utility helpers * -------------------------------------------------------------------------- */ .spx-mono { font-family: var(--spx-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .spx-txt-primary { color: var(--spx-text-primary); } .spx-txt-muted { color: var(--spx-text-muted); } .spx-txt-dim { color: var(--spx-text-dim); } .spx-txt-amber { color: var(--spx-amber); } .spx-txt-success { color: var(--spx-success-bright); } .spx-txt-danger { color: var(--spx-danger-soft); } .spx-center-text { text-align: center; } /* Visually hidden but accessible to screen readers */ .spx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- * Mobile tuning — narrow phones * -------------------------------------------------------------------------- */ @media (max-width: 768px) { .spx-page-header { margin-bottom: var(--spx-space-6); } .spx-page-header h1, .spx-page-title { font-size: var(--spx-text-3xl); } .spx-page-header p, .spx-page-subtitle { font-size: var(--spx-text-lg); } .spx-page .spx-h2, .spx-page h2.spx-h2 { font-size: var(--spx-text-xl); } } @media (max-width: 400px) { .spx-container { padding-left: var(--spx-space-2); padding-right: var(--spx-space-2); } }