/* ========================================================================== Van Dyke — base stylesheet Foundation for every page. Accessibility is baked in here, not bolted on. No framework, no build step: plain CSS with custom properties. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens (CSS custom properties) -------------------------------------------------------------------------- Placeholder palette. Every color below already meets WCAG 2.2 AA contrast against its intended background, so swapping in the real brand palette later is a matter of changing these values — as long as replacements keep the same contrast ratios (see the comment on each token), the site stays compliant. Contrast targets (WCAG 2.2 AA): - Body text vs background: >= 4.5:1 - Large text (>=24px, or >=18.66px bold) and UI/focus indicators: >= 3:1 -------------------------------------------------------------------------- */ :root { /* Monochrome placeholder palette — no color, "just technicality". Grayscale only; every value still meets its documented contrast ratio, so a real brand palette can drop in later without breaking WCAG. */ /* Surfaces */ --color-bg: #ffffff; /* page background */ --color-surface: #f4f4f4; /* subtle raised surface (cards, later) */ --color-border: #d6d6d6; /* hairline rules / borders — decorative only */ /* Text — verified against --color-bg (#ffffff) */ --color-text: #141414; /* body text ~18:1 (AAA) */ --color-text-muted: #595959; /* secondary ~7.0:1 (AA) */ /* Interactive — verified against --color-bg (#ffffff) */ --color-accent: #1a1a1a; /* links/buttons ~16:1 (AAA) */ --color-accent-hover: #000000; /* Focus indicator. Near-black ring, ~16:1 vs bg — far above the 3:1 minimum and independent of any future accent color. Override to a light value if a dark theme is added later. */ --color-focus: #1a1a1a; /* Spacing & sizing */ --space: 1rem; --measure: 60ch; /* max line length for readable body text */ --target-min: 44px; /* WCAG 2.5.8 minimum interactive target */ } /* -------------------------------------------------------------------------- 2. Minimal modern reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margins; we opt back in deliberately. */ * { margin: 0; } html { -webkit-text-size-adjust: 100%; /* stop iOS bumping font size on rotate */ } body { line-height: 1.6; /* WCAG 1.4.12: comfortable line spacing */ -webkit-font-smoothing: antialiased; /* Monospace stack drives the "technical" look. System fonts only — no downloads, no dependencies. */ font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color: var(--color-text); background: var(--color-bg); } /* Media elements behave predictably and never overflow their container. */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* Form controls should inherit typography instead of using tiny UA defaults. */ input, button, textarea, select { font: inherit; color: inherit; } /* Long words / URLs wrap instead of forcing horizontal scroll. */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Headings keep a sensible, readable line length. */ h1, h2, h3 { line-height: 1.2; max-width: var(--measure); } /* -------------------------------------------------------------------------- 3. Focus visibility (WCAG 2.4.7) -------------------------------------------------------------------------- We NEVER remove a focus outline without an equal-or-better replacement. :focus-visible shows a strong ring only for keyboard/AT users, so mouse clicks don't get a ring but keyboard navigation always does. The 2px offset and 3px width make the ring obvious against any adjacent color. */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; /* ring follows the element's corners a little */ } /* Belt-and-braces: browsers that lack :focus-visible still get a visible ring on plain :focus. Browsers that DO support it re-remove the ring for mouse users via the rule below. */ :focus { outline: 3px solid var(--color-focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- 4. Interactive targets (WCAG 2.5.8 — minimum 44x44px) -------------------------------------------------------------------------- */ a, button, input[type="button"], input[type="submit"], [role="button"] { cursor: pointer; } /* Buttons and button-styled links get a minimum hit area regardless of text size. Inline links inside body copy are exempt from the 44px rule per WCAG, so this is scoped to real buttons, the .button class, and the skip link. */ button, .target, .button, .skip-link { min-height: var(--target-min); min-width: var(--target-min); display: inline-flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------------- 5. Skip link (WCAG 2.4.1 — bypass blocks) -------------------------------------------------------------------------- First focusable element on the page. Visually hidden until focused, then it slides into the top-left corner so keyboard users can jump straight to
. It is never removed from the DOM, so it stays reachable by Tab. */ .skip-link { position: absolute; top: 0; left: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--color-accent); color: #ffffff; /* white on accent green ~7.9:1 (AAA) */ text-decoration: none; /* Pull it off-screen until focused. Not display:none, or it couldn't receive focus. */ transform: translateY(-120%); } .skip-link:focus { transform: translateY(0); /* reveal on focus */ } /* -------------------------------------------------------------------------- 6. Links & typography -------------------------------------------------------------------------- */ a { color: var(--color-accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; } a:hover { color: var(--color-accent-hover); } /* -------------------------------------------------------------------------- 7. Shared utilities -------------------------------------------------------------------------- */ /* Uppercase micro-label used above headings and in the footer. Purely typographic; muted color still meets AA (~7:1) for its small size. */ .eyebrow { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); } /* Hairline divider between sections. aria-hidden not needed —
already conveys a thematic break to assistive tech. Border, not background, so it stays crisp at any zoom. */ .rule { border: 0; border-top: 1px solid var(--color-border); margin-block: calc(var(--space) * 2.5); } /* -------------------------------------------------------------------------- 8. Button (bordered, uppercase, monochrome) -------------------------------------------------------------------------- Used for the Order links. Real /