/* PageCraft — style.css ===================== Sections: 1. Custom Properties (Color Tokens) 2. Reset 3. Base / Typography 4. Layout 5. Skip Link & Visually Hidden 6. Header & Navigation 7. Theme Toggle Button 8. Code Blocks & Syntax Highlighting 9. Cards 10. Hero (homepage) 11. Section Intro 12. Footer 13. Content Page Typography 14. Breadcrumb 15. Blockquotes & Callouts 16. Success Criteria Boxes 17. WCAG Principle Sections 18. Definition Lists (Level A / AA / AAA) 19. Resource Lists 20. Footnotes */ /* ============================================================ 1. CUSTOM PROPERTIES — COLOR TOKENS ============================================================ All colors live here as CSS custom properties (also called CSS variables). Nothing in this file uses a raw color value — every color references a token like var(--color-text). Why? Because dark/light mode switching is then a single operation: redefine the tokens on , and every element on the page updates instantly. No JavaScript touching individual elements, no class toggling on hundreds of nodes. Tokens are defined in four blocks: a) :root — dark mode, our default b) prefers-color-scheme: light — light mode when the system prefers it AND the user hasn't made a manual choice yet c) [data-theme="dark"] — manual override: always dark d) [data-theme="light"] — manual override: always light Blocks (c) and (d) appear after (b) in source order. When specificity is equal — and [data-theme] and :root inside a media query have the same specificity — later declarations win. So the attribute blocks always override the media query. This is how the JS toggle works. All color pairs pass WCAG AA (4.5:1 minimum for normal text). ============================================================ */ :root { /* dark mode — default */ --color-bg: #1a1714; --color-surface: #221f1a; --color-text: #e8e2d9; --color-text-secondary: #9b9188; --color-accent: #7fcba0; --color-accent-secondary: #e8a060; --color-link: #85b5d6; --color-string: #c4a0d6; --color-comment: #918b88; --color-border: #3a342c; --color-accent-border: #7fcba0; } @media (prefers-color-scheme: light) { /* Applied when: - the system/browser reports a light preference, AND - no data-theme attribute has been set on by JavaScript If JavaScript is disabled, this block handles system-light users entirely. If JS is enabled, the head script sets data-theme before the page paints, and blocks (c)/(d) below take over. */ :root { --color-bg: #faf7f0; --color-surface: #f0ece2; --color-text: #1c1914; --color-text-secondary: #6b6158; --color-accent: #246947; --color-accent-secondary: #964f20; --color-link: #1a538a; --color-string: #7a3a8a; --color-comment: #6b6158; --color-border: #d4cec4; --color-accent-border: #246947; } } [data-theme="dark"] { /* manual override: user clicked the toggle → always dark */ --color-bg: #1a1714; --color-surface: #221f1a; --color-text: #e8e2d9; --color-text-secondary: #9b9188; --color-accent: #7fcba0; --color-accent-secondary: #e8a060; --color-link: #85b5d6; --color-string: #c4a0d6; --color-comment: #918b88; --color-border: #3a342c; --color-accent-border: #7fcba0; } [data-theme="light"] { /* manual override: user clicked the toggle → always light */ --color-bg: #faf7f0; --color-surface: #f0ece2; --color-text: #1c1914; --color-text-secondary: #6b6158; --color-accent: #246947; --color-accent-secondary: #964f20; --color-link: #1a538a; --color-string: #7a3a8a; --color-comment: #6b6158; --color-border: #d4cec4; --color-accent-border: #246947; } /* ============================================================ 2. RESET ============================================================ A minimal reset — we're not zeroing everything, just correcting the browser defaults that consistently cause problems. box-sizing: border-box — padding and border are included in the element's stated width. Without this, adding padding to a 100%-wide element makes it overflow its container. The default (content-box) is almost never what you want. margin: 0 on body — browsers add a default margin to . We'll add spacing explicitly where we want it. max-width + display: block on images — prevents images from overflowing their containers and removes the baseline gap that appears under inline images (a consequence of images being inline elements by default). ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img, video { max-width: 100%; display: block; } ul, ol { /* Remove default padding so we can control list indentation ourselves */ padding-inline-start: 1.25rem; } /* ============================================================ 3. BASE / TYPOGRAPHY ============================================================ Both fonts are loaded via in each page's — look for the Google Fonts preconnect and stylesheet links there. We reference them here by name only. Space Mono for headings — monospace signals technical context without feeling cold. It also reads differently from body text, giving the site a distinct voice. Atkinson Hyperlegible for body — designed specifically for low-vision readers. Letterforms are highly distinct: 1, l, I are clearly different; 0 and O don't blur together. Courier New, Courier, monospace for code — the system fallback chain. No web font needed for code; the monospace system fonts are universally available. font-size: 1rem (16px) — browser default, and the accessibility minimum. Never set a base font size below 16px. line-height: 1.67 — generous leading. Research consistently shows that line heights between 1.5 and 1.7 are easiest to read for long-form text. ============================================================ */ body { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 1rem; line-height: 1.67; color: var(--color-text); background-color: var(--color-bg); } h1, h2, h3, h4, h5, h6 { font-family: 'Space Mono', monospace; color: var(--color-accent); line-height: 1.25; font-weight: 700; margin-block-start: 0; } p { margin-block-start: 0; } a { /* Links are always underlined — color alone must never be the only indicator that something is a link. This is a WCAG 1.4.1 requirement (Use of Color). Many users have color vision deficiencies, and even those who don't can find link boundaries ambiguous in dense text. Underlining is also just the old-web convention. We're honoring it because it's correct, not just nostalgic. */ color: var(--color-link); text-decoration: underline; } a:hover { text-decoration-thickness: 2px; } a:focus-visible { /* :focus-visible shows an outline for keyboard users but not mouse users. This is preferable to :focus (which shows on click too) and much better than outline: none (which removes focus rings entirely — a common accessibility mistake). */ outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } code, kbd, samp { font-family: 'Courier New', Courier, monospace; } /* ============================================================ 4. LAYOUT ============================================================ A single centered container with a max-width keeps long lines readable. Lines longer than ~75 characters are harder to read — the eye has to travel farther to find the start of the next line. padding-inline is the logical-property version of padding-left and padding-right. Logical properties work with writing direction, so they're the right choice for any site that might support right-to-left text in the future. ============================================================ */ .container { max-width: 60rem; margin-inline: auto; padding-inline: 1.5rem; } main { padding-block: 3rem 4rem; } /* ============================================================ 5. SKIP LINK & VISUALLY HIDDEN ============================================================ The skip link is the first focusable element on every page. It lets keyboard users jump directly to the main content, bypassing the navigation. Without it, someone tabbing through the page must hit every nav link on every page load before reaching the content. It's visually hidden until focused — then it appears at the top of the viewport. This approach serves keyboard users without cluttering the visual design for mouse users. The .visually-hidden class is a standard pattern for content that should be available to screen readers but invisible on screen. Never use display: none or visibility: hidden for this purpose — those remove the content from the accessibility tree entirely. ============================================================ */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 999; padding: 0.5rem 1rem; background-color: var(--color-accent); color: var(--color-bg); font-family: 'Space Mono', monospace; font-size: 0.875rem; font-weight: 700; text-decoration: none; border-radius: 0 0 4px 4px; } .skip-link:focus { top: 0; } .visually-hidden { /* Moves the element off-screen without hiding it from assistive tech. The specific values (1px dimensions, negative margin, clip) are the result of years of cross-browser and cross-screen-reader testing. Don't simplify this — each property is doing something. clip: rect() is the legacy form and is deprecated in CSS. clip-path: inset(50%) is the modern replacement and does the same job. Both are included here for broadest compatibility — older browsers use clip, modern browsers use clip-path. */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================ 6. HEADER & NAVIGATION ============================================================ The 3px top border on the header is the primary retro gesture — it echoes the thick colored horizontal rules and header bars of early web design. One line, high contrast, applied to the
wrapper rather than the