/* v3 reset + base typography — replaces the legacy 2341-line application.css.
---------------------------------------------------------------------------
Audited: v3 used ZERO of that file's component/grid/testimonial CSS — every
one of its 132 classes was either absent from v3 HTML or already redefined in
the v3 layer. What v3 DID sit on was this base: the HTML5-Boilerplate reset
plus a layer of base element typography (heading family/sizes, body text
size, link defaults, the focus ring). That base is ported here faithfully so
the swap is pixel-identical; the ~2200 lines of dead component CSS are gone.
The v3 component layer (v3-*.css) still overrides specifics on top of this
(e.g. .v3-prose / .v3-band headings, left-aligned titles). Tailwind Preflight
stays OFF (tailwind.config.js) — THIS file is the reset. Loaded first. */
/* ── HTML5-Boilerplate reset ─────────────────────────────────────────────── */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*, *::before, *::after { box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
pre { white-space: pre-wrap; word-wrap: break-word; }
pre, code, kbd, samp { font-family: monospace; }
/* ── Base ────────────────────────────────────────────────────────────────── */
html { overflow-y: scroll; } /* scrollbar always present — no width jump; the nav scroll-lock targets */
body { font: 16px sans-serif; } /* base; page bg + ink live in v3-components.css, components set real sizes */
/* ── Headings — display serif; sizes are the v1 base that bare/ancestor-styled
headings fall back to. v3 components (.v3-band__title, .v3-prose h2…) override.
NOTE: no `text-align` here — it inherits, so a centered band centers its own
title and normal sections read left, with no per-page counter rule needed. */
h1, h2, h3, h4, h5, h6 { font-family: "Newsreader", Georgia, serif; }
h1 { font-weight: 700; font-size: 4.1875rem; line-height: 1.09; letter-spacing: -0.0875rem; }
h2 { font-weight: 300; font-size: 2rem; line-height: 1.3; color: #264068; padding-bottom: 1rem; }
h3 { font-weight: 400; font-size: 2rem; line-height: 1.3; padding-bottom: 1rem; }
h4 { font-weight: 300; font-size: 1.75rem; line-height: 1.33; padding-bottom: 0.5rem; }
h5 { font-weight: 400; font-size: 2rem; line-height: 1.3; padding-bottom: 0.5rem; }
h6 { font-weight: 300; font-size: 2rem; line-height: 1.3; font-style: italic; padding-bottom: 0.5rem; }
/* ── Body text — bare at a comfortable reading size + a default paragraph
bottom space. Contexts that space paragraphs with margins instead zero this
padding-bottom (prose, cards, footer). Deliberately scoped to
only — the
old broad `div, p { font-size }` and `section div { padding-bottom: 8px }`
rules styled unrelated container
s and bred subtle layout traps. */
p { font-size: var(--text-body); line-height: 1.7; padding-bottom: 2rem; }
/* ── Links — undecorated by default. An
may be a button, a card, a nav
item, or a real text link, so there is NO global underline (and no
border-bottom — text-decoration doesn't affect layout, so nothing to
"collapse" or defend against). Components therefore stay bare with zero
opt-out. TEXT links underline on hover within the few contexts that hold body
text — .v3-prose (prose.css), the footer (v3-components.css), .v3-contact-grid
and .v3-faq__a (v3-pages.css). A link outside those reads bare, which is the
safe default: a new button never has to be remembered into an exclusion list
to avoid looking like a link. ── */
a { text-decoration: none; color: inherit; cursor: pointer; }
/* Keyboard focus ring (a11y) — was a global rule in application.css. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 3px solid #264068;
outline-offset: 2px;
}
/* ── Lists / inline / forms ─────────────────────────────────────────────── */
ul, ol { margin-left: 0; }
ul { list-style: circle inside; }
ol { list-style: decimal inside; }
nav ul, nav li { margin: 0; list-style: none; }
small { font-size: 85%; }
strong, th { font-weight: 700; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.2em; }
sub { bottom: -0.25em; }
button, input, select, textarea { margin: 0; font: 99% sans-serif; }
button { width: auto; overflow: visible; cursor: pointer; }
label, input[type="button"], input[type="submit"], input[type="image"] { cursor: pointer; }
/* ── A101: reduced motion, globally ──────────────────────────────────────────
If someone has asked their OS for less motion, honour it everywhere — not just
where a component author remembered to. We were doing this per-component (13
hand-written opt-outs against ~45 animated rules), which meant .btn's own hover
lift and shadow-slide were never covered: the only rule for it targeted .btn::after,
the arrow. This makes reduced-motion the default for anything that animates, now and
for anything added later.
Durations, not `none`: 0.01ms still fires `transitionend`/`animationend`, so any code
waiting on those doesn't hang. `!important` also beats Alpine's inline x-transition
styles, which are what animate the nav dropdown.
This does NOT replace the per-component rules — several null out *static* transforms
(a permanent skew, an offset polaroid), and a duration-only guard can't see those. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}