/* ============================================================
* user_ui — base / reset
* ============================================================
*
* Phase 7 Package B. Minimal reset, html/body defaults, the
* container class (`.wrap`), and the heading-family default.
* Anything that is global and not a token belongs here.
*
* Rules pulled verbatim from the landing mockup so the live
* site matches the mockup byte-for-byte where possible.
*
* The default theme is dark — Package D ships base.html with
* hardcoded. The theme toggle (Package
* C JS) flips the attribute, no body-class dance required.
* ============================================================ */
/* -------- Minimal reset -------- */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
/* -------- Replaced-element axis reset --------
* The safety net the intrinsic-dimensions convention depends on.
* Every ![]()
whose asset box is knowable when the template is
* written carries `width` / `height` attributes so the browser can
* reserve the box before a single image byte arrives (see
* DESIGN_SYSTEM.md §11). Those attributes are PRESENTATIONAL HINTS,
* and a hint applies PER AXIS: a rule that sets only `width` leaves
* the `height` hint governing, so the image renders at its CSS width
* and the asset's raw pixel height — stretched on exactly the axis
* nobody wrote a rule for. That shipped four times (`.hero-art
* .key-1` / `.key-2` / `.ticket` and `.feat-center .orbit`,
* width-only; `footer .brand img.brand-mark`, height-only;
* `.feat-center .emblem`, width + `aspect-ratio` with the attribute
* overriding the ratio) and is why this rule exists.
*
* Specificity (0,0,1) is the entire point: it is the weakest thing
* that still outranks a presentational hint, so every real rule in
* every stylesheet keeps winning on the axis IT sets, while the axis
* it leaves alone falls back to `auto` instead of to the attribute.
* Do not raise it, and do not add `!important` — either one starts
* overriding the page rules this exists to protect.
*
* It costs nothing in layout stability. `auto` on a replaced element
* means "derive from the intrinsic ratio", and the attributes are
* still what the browser derives that ratio from before the image
* loads — `width: 130px` plus this `height: auto` reserves a
* 130 x 130*(h/w) box pre-load exactly as intended. So never "fix" a
* stretched image by deleting its attributes: the attributes are the
* reservation, the missing axis was the bug. */
img {
width: auto;
height: auto;
}
/* -------- Body defaults --------
* Sticky-footer pass: the body is a min-viewport-height flex
* column and (below) grows to fill the slack, so on
* pages shorter than the screen the footer is pinned to the
* viewport bottom instead of floating mid-page (visible on
* phones, where several pages are shorter than the viewport).
* Out-of-flow chrome (the absolute background layer, the
* fixed help FAB / menus / modals) is untouched by the flex
* context. `100svh` refines `100vh` on mobile browsers with
* collapsing URL bars; the plain `100vh` line is the fallback
* for engines without svh support. */
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
font-weight: 500;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
}
/* soaks up the slack between header and footer. */
main {
flex: 1 0 auto;
}
/* -------- Heading family default --------
* Headings use the condensed display font; weights and sizes
* are set per-component. See DESIGN_SYSTEM.md §3 (Type Scale)
* for the canonical H1–H4 / Eyebrow / Body / Small / Mono
* specifications. */
h1, h2, h3, h4, h5 {
font-family: var(--font-head);
font-weight: 600;
}
/* -------- Container --------
* The `.wrap` element is the page-width clamp. Always used
* inside a full-bleed section so the section background
* (gradients, footer image, banner strips) reaches the viewport
* edges while content stays within `--container`. Padding uses
* --pad which shrinks at iPad and phone breakpoints (see
* tokens.css for the media-query overrides). */
.wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--pad);
position: relative;
z-index: 2;
}