/* ========================================================================== 03-BASE.CSS Default styling for bare HTML elements (body copy, headings, links, focus states). No classes here — this is what the page looks like before any component styling is applied. ========================================================================== */ /* Sets the root font-size so that 1rem = 18px at a visitor's default browser text size (18/16 = 112.5%). This is done as a percentage, not a fixed px value, specifically so that if a visitor has changed their browser's default font size for accessibility reasons, our whole rem-based type scale (see 01-variables.css) scales proportionally with it rather than overriding their preference. */ html { font-size: 112.5%; } body { font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-bg); } /* Lets
grow to fill any leftover vertical space in the flex-column body (set in 02-reset.css), which is what actually pushes the footer to the bottom of the viewport on short pages like Contact — not a margin-top:auto on the footer itself (see 05-components.css comment). */ main { flex: 1 0 auto; } /* The sticky site header (see .site-header in 05-components.css) sits on top of the page, so anything a visitor jumps straight to — the skip link's target, or a heading someone deep-links to — needs breathing room above it, or the header covers it. This offset applies broadly (main + all headings) since it's harmless on elements that are never actually scrolled to directly. */ main, h1, h2, h3, h4, h5, h6 { scroll-margin-top: 6rem; } /* Headings use the serif display face, per the style guide's brand personality (institutional, authoritative). */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--line-height-heading); font-weight: 700; color: var(--color-navy); /* Space below every heading before whatever follows it (a paragraph, a list, etc.) — comfortably more than one line of body text (1.6 x 18px ≈ 29px), since the reset removes all default margins and nothing was replacing this gap before. */ margin-bottom: var(--space-5); } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } p { max-width: 70ch; /* Keeps body copy readable — avoids full-bleed text lines. */ margin-bottom: var(--space-4); } /* Lists (used throughout the Privacy Policy) need the same breathing room below them as paragraphs get, for the same reason. */ ul, ol { margin-bottom: var(--space-4); } /* Inline links inside body content (not nav/buttons, which are styled as components). Underline-on-hover keeps links distinguishable without relying on colour alone (WCAG 1.4.1). */ a { color: var(--color-blue); text-underline-offset: 0.15em; } a:hover { /* --color-copper-hover, not --color-copper: plain copper text on this background measures ~3.5:1 contrast, failing WCAG AA (4.5:1) for normal text. The darker shade clears ~4.8:1. */ color: var(--color-copper-hover); text-decoration: underline; } /* Visible focus state for keyboard users — never remove this without replacing it with an equally visible alternative (WCAG 2.4.7). */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-copper); outline-offset: 2px; } /* Pullout quotes use the accent colour and serif face to stand apart from body copy — reused by the .pullout-quote component in 05-components.css, this just sets sane defaults for a bare
. font-weight is set explicitly to 700 because that's the only Merriweather weight actually requested from Google Fonts (see each page's ) — leaving it unset would ask the browser to fake a weight/style it never downloaded. */ blockquote { font-family: var(--font-heading); font-style: italic; font-weight: 700; color: var(--color-navy); } /* Text selection styled to match brand rather than default OS blue. */ ::selection { background-color: var(--color-copper); color: var(--color-white); }