/* ============================================================ STYLES.CSS Stylesheet for the "De Gewone Gids" guide site. This file is organised in sections, top to bottom: 1. Design tokens (colors, fonts, spacing) — change these to re-theme the whole site from one place. 2. Reset / base rules 3. Layout (header, main, footer) 4. Components (category tiles, step cards, buttons) 5. Accessibility helpers (font-size control, print styles) DESIGN NOTE: this site is built for people who find most websites hard to read or navigate. Every choice below is made with that first: big text, high contrast, few colors, generous spacing, large clickable areas. Resist the urge to make things smaller or busier later — that's the whole point of the site. ============================================================ */ /* ------------------------------------------------------------ 1. DESIGN TOKENS All colors and sizes are defined once here as CSS variables (the --name: value; lines below). Every other rule in this file reads from these variables instead of hard-coding colors, so you can reskin the whole site by editing only this block. ------------------------------------------------------------ */ :root { /* --- Colors --- Background is a warm off-white rather than pure white: pure white can glare/vibrate for older or low-vision eyes. Text is near-black (not pure black) for the same reason — slightly softer contrast is more comfortable to read for long stretches, while still meeting accessibility contrast ratios (AAA, checked against the background below). */ --color-bg: #FAF6EF; /* page background, warm off-white */ --color-bg-card: #FFFFFF; /* cards sit on white so they "lift" off the page */ --color-text: #1B1B1B; /* main reading text, near-black */ --color-text-muted: #55524B; /* secondary text, still high contrast */ /* Accent colors: a muted gold and a muted brick red, a quiet nod to the Belgian flag without being loud or "flaggy". Gold = primary actions / highlights. Red = warnings / "let op" (careful) notes only, never decorative. */ --color-accent: #B8860B; /* muted gold — buttons, links, current step */ --color-accent-dark: #8C6708; /* darker gold, for hover/focus states */ --color-warning-bg: #FBEAE7; /* pale red background for warning boxes */ --color-warning-border: #B23A2E;/* brick red border/icon for warning boxes */ --color-success: #2F6B4F; /* used sparingly, e.g. "klaar!" confirmations */ --color-border: #E4DFD3; /* soft border color for cards/dividers */ /* --- Fonts --- Atkinson Hyperlegible was designed by the Braille Institute specifically to be easier to read for people with low vision. That's not a stylistic pick — it's the single most relevant typeface choice for this audience. We load it from Google Fonts in index.html / each guide page's . If the font fails to load (no internet), the fallback stack below still gives a clean, legible system font. */ --font-body: 'Atkinson Hyperlegible', -apple-system, 'Segoe UI', Roboto, sans-serif; /* --- Type scale --- Deliberately large. A "normal" website body text is ~16px; we start almost 30% bigger, and the font-size toggle (see script.js) can scale everything up further from here. */ --text-base: 20px; --text-lg: 24px; --text-xl: 32px; --text-xxl: 40px; /* --- Spacing scale --- Generous spacing = fewer accidental mis-taps on touchscreens, and less visual clutter per screen. */ --space-sm: 12px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; /* Minimum size for any clickable button/link area, per accessibility guidance for users with reduced dexterity. */ --tap-target-min: 56px; } /* ------------------------------------------------------------ 2. RESET / BASE ------------------------------------------------------------ */ * { box-sizing: border-box; /* padding/border included in element width, avoids layout surprises */ } html { /* Respect the user's own browser zoom/font-size settings on top of ours, rather than fighting them. */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; /* generous line height = easier to track lines while reading */ color: var(--color-text); background-color: var(--color-bg); } h1, h2, h3 { line-height: 1.25; margin-top: 0; } a { color: var(--color-accent-dark); text-decoration: underline; /* always underline links — color alone isn't enough for everyone to notice them */ } a:hover, a:focus { color: var(--color-accent); } /* Visible keyboard focus outline on every interactive element. Never remove this — some visitors navigate by keyboard only. */ :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; } img { max-width: 100%; display: block; } /* ------------------------------------------------------------ 3. LAYOUT ------------------------------------------------------------ */ /* Top bar: site name + the font-size / print controls. Sticky, so the "make text bigger" control is always reachable, not just at the top of a long guide page. */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background-color: var(--color-bg-card); border-bottom: 2px solid var(--color-border); } .topbar__title { font-size: var(--text-lg); font-weight: 700; margin: 0; color: var(--color-text); text-decoration: none; } /* Group of accessibility controls (A- / A+ / print) top right */ .topbar__tools { display: flex; gap: var(--space-sm); } main { max-width: 1000px; /* wide enough for 3 tiles per row on the tile grid; see the p/li rule below for why guide TEXT doesn't also stretch this wide */ margin: 0 auto; padding: var(--space-lg) var(--space-md); } /* Widening main (above) to fit 3 tiles per row would make ordinary paragraph text stretch uncomfortably wide too — long lines are genuinely harder to read. This caps just the text elements (not headings, not the tile grid) back down to a comfortable reading width, so the page can be wide for tiles AND narrow for reading at the same time. */ main p, main li { max-width: 70ch; } footer { text-align: center; padding: var(--space-lg) var(--space-md); color: var(--color-text-muted); font-size: var(--text-base); } /* ------------------------------------------------------------ 4. COMPONENTS ------------------------------------------------------------ */ /* --- Buttons --- Used for the font-size toggle, print button, and any call-to- action. Always at least --tap-target-min tall/wide. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-target-min); min-width: var(--tap-target-min); padding: var(--space-sm) var(--space-md); font-family: inherit; font-size: var(--text-base); font-weight: 700; color: #FFFFFF; background-color: var(--color-accent); border: none; border-radius: 8px; cursor: pointer; text-decoration: none; } .btn:hover, .btn:focus-visible { background-color: var(--color-accent-dark); } /* Secondary/quiet button, e.g. A- / A+ controls */ .btn--quiet { background-color: transparent; color: var(--color-text); border: 2px solid var(--color-border); } .btn--quiet:hover, .btn--quiet:focus-visible { background-color: var(--color-bg); border-color: var(--color-accent); } /* Used when A- or A+ is already at its limit (smallest/largest text size) — visually shows the button won't do anything right now, instead of it looking clickable but silently doing nothing. */ .btn:disabled, .btn--quiet:disabled { opacity: 0.4; cursor: not-allowed; } /* --- Zoekvak (homepage) --- Deliberately big and plain: one label, one input, results appear directly below as a simple list. No autocomplete dropdown tricks that could confuse — just "type, see matches, tap one". */ .search-box { margin: var(--space-lg) 0; } .search-box label { display: block; font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-sm); } #site-search { width: 100%; font-family: inherit; font-size: var(--text-lg); padding: 16px; min-height: var(--tap-target-min); border: 2px solid var(--color-border); border-radius: 10px; background-color: var(--color-bg-card); color: var(--color-text); } #site-search:focus { outline: 3px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); } .search-results { list-style: none; margin: var(--space-sm) 0 0 0; padding: 0; } .search-results li { border-bottom: 2px solid var(--color-border); } .search-results li:first-child { border-top: 2px solid var(--color-border); } .search-results a { display: block; padding: 14px 8px; font-size: var(--text-lg); text-decoration: none; color: var(--color-text); min-height: var(--tap-target-min); } .search-results a:hover, .search-results a:focus-visible { background-color: var(--color-bg); } /* Shown only when a search was typed but nothing matched. */ .search-empty { font-size: var(--text-base); color: var(--color-text-muted); margin-top: var(--space-sm); } /* --- Category tiles (homepage) --- Big, simple, one clear label each. Grid collapses to a single column on narrow screens automatically (see media query below). */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-lg) 0; } .tile { display: block; padding: var(--space-md); background-color: var(--color-bg-card); border: 2px solid var(--color-border); border-radius: 12px; text-decoration: none; color: var(--color-text); } .tile:hover, .tile:focus-visible { border-color: var(--color-accent); } .tile__title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 4px 0; } .tile__desc { font-size: var(--text-base); color: var(--color-text-muted); margin: 0; } /* --- Step cards (guide pages) --- One step = one card. The number is large and sits in its own circle so the reader can visually count "where am I" at a glance, even before reading any text. */ .step { display: grid; grid-template-columns: 64px 1fr; /* number circle | content */ gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 2px solid var(--color-border); } .step:last-child { border-bottom: none; } .step__number { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background-color: var(--color-accent); color: #FFFFFF; font-size: var(--text-lg); font-weight: 700; } .step__title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-sm) 0; } .step__text { margin: 0 0 var(--space-sm) 0; } /* Placeholder box for a screenshot. Replace the
in the HTML with a real once you have the actual screenshot — this placeholder just keeps the layout visible while you write guides. */ .screenshot { display: flex; align-items: center; justify-content: center; min-height: 180px; border: 2px dashed var(--color-border); border-radius: 8px; color: var(--color-text-muted); background-color: var(--color-bg); font-size: var(--text-base); text-align: center; padding: var(--space-md); } /* --- Warning / "let op" box --- Use for anything where a wrong tap could cost money or delete something — e.g. "don't share this code with anyone". */ .warning { display: flex; gap: var(--space-sm); padding: var(--space-md); margin: var(--space-md) 0; background-color: var(--color-warning-bg); border-left: 6px solid var(--color-warning-border); border-radius: 4px; } .warning__title { font-weight: 700; margin: 0 0 4px 0; color: var(--color-warning-border); } /* ------------------------------------------------------------ 5. ACCESSIBILITY HELPERS ------------------------------------------------------------ */ /* The font-size toggle (script.js) adds this class to to scale text up site-wide, on top of the base --text-* sizes. */ /* The font-size toggle (script.js) adds one of these classes to to scale text up site-wide. IMPORTANT: this overrides the --text-* variables themselves (not html's own font-size as a percentage) — every heading, paragraph, and button on the site reads its size from these variables (var(--text-base) etc), in fixed px, so scaling html's root font-size alone would do nothing; the variables are what actually need to change. */ html.text-large { --text-base: 24px; --text-lg: 28px; --text-xl: 38px; --text-xxl: 46px; } html.text-larger { --text-base: 28px; --text-lg: 32px; --text-xl: 44px; --text-xxl: 52px; } /* Respect users who have asked their OS/browser to reduce motion. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Print styles: guides are meant to be printable, since many visitors prefer a paper copy next to their computer. Hides the sticky topbar/footer and forces high-contrast black-on-white. */ @media print { .topbar, footer, .no-print { display: none !important; } body { background: #FFFFFF; color: #000000; } .step { break-inside: avoid; /* don't split a step awkwardly across a page break */ } } /* Small screens: stack the step number above the content instead of side-by-side, so text doesn't get squeezed too narrow. */ @media (max-width: 480px) { .step { grid-template-columns: 1fr; } .step__number { margin-bottom: var(--space-sm); } }