/* ========================================================================== 3Technics — design tokens Direction: "Werkblad" (see docs/huisstijl.md) Load this file before any other stylesheet: All values are declared on :root as CSS custom properties. Nothing here produces output on its own; components consume these tokens by name. Never hard-code a hex value, size or duration in a component. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. BRAND COLOURS The three colours that come from the logo. These are identity values, not usage values — see section 4 for the roles they are allowed to play. ---------------------------------------------------------------------- */ --brand-green: #599D16; /* oak leaf in the logo */ --brand-ink: #141E24; /* wordmark, near-black with a blue cast */ --brand-white: #FFFFFF; /* ------------------------------------------------------------------------ 2. GREEN RAMP #599D16 only reaches 3.36:1 on white, so it can never carry body text or sit under white button text. The ramp below keeps the hue and moves the lightness until the contrast is safe. Measured ratios in the comments. ---------------------------------------------------------------------- */ --green-100: #EDF4E4; /* tint for quiet fills; decorative only */ --green-500: #599D16; /* brand. 3.36 on white · 5.04 on ink */ --green-600: #4A8412; /* 4.56 on white — large text only */ --green-700: #3F7010; /* 5.94 on white · 5.40 on paper — misses the 7:1 */ --green-800: #2F540C; /* 8.77 on white · 7.98 on paper — links, buttons */ --green-900: #26440A; /* 9.98 on paper · 10.97 on white — hover */ --green-950: #1E3507; /* 12.19 on paper · 13.40 on white — active/pressed */ --green-300: #7CC22B; /* 7.74 on ink — the green for dark surfaces */ /* ------------------------------------------------------------------------ 3. NEUTRALS Warm paper against a cool near-black. The warmth matches the brick, sawdust and winter light in the photo archive. ---------------------------------------------------------------------- */ --neutral-000: #FFFFFF; /* card and field backgrounds */ --neutral-050: #F6F4EF; /* paper — the page background */ --neutral-100: #EFECE5; /* quiet fill, disabled surfaces */ --neutral-200: #DFDBD3; /* hairline rules and card borders (decorative) */ --neutral-400: #8C8779; /* 3.59 on white — form field borders (AA 1.4.11) */ --neutral-600: #3D4B53; /* 9.01 on white — secondary text */ --neutral-900: #141E24; /* 16.92 on white — body text */ /* Neutrals for the dark band (footer, collaboration section) */ --dark-surface: #141E24; /* base of the dark band */ --dark-surface-raised:#1E2A31; /* panel inside the dark band */ --dark-line: #5F6F78; /* 3.25 on the dark base (AA 1.4.11) */ --dark-text-muted: #C6CDD1; /* 10.52 on the dark base */ /* Feedback */ --red-700: #98261B; /* 7.99 on white — form errors */ /* ------------------------------------------------------------------------ 4. SEMANTIC ROLES Components reference these, never the raw ramps above. ---------------------------------------------------------------------- */ /* Surfaces */ --color-page: var(--neutral-050); --color-surface: var(--neutral-000); --color-surface-quiet: var(--neutral-100); --color-surface-dark: var(--dark-surface); --color-surface-dark-raised: var(--dark-surface-raised); /* Text */ --color-text: var(--neutral-900); --color-text-muted: var(--neutral-600); --color-text-on-dark: var(--brand-white); --color-text-muted-on-dark: var(--dark-text-muted); --color-text-on-accent: var(--brand-white); --color-text-error: var(--red-700); /* Lines */ --color-line: var(--neutral-200); /* decorative hairline */ --color-line-strong: var(--neutral-400); /* field borders, dividers */ --color-line-contrast: var(--neutral-900); /* hover/selected boundary */ --color-line-on-dark: var(--dark-line); /* Interactive */ /* green-700 reaches only 5.40 on paper, below the 7:1 floor this project sets for itself in huisstijl.md 2.1. green-800 clears it at 7.98 on paper, 8.77 on white, and 8.77 for white text on the filled button. */ --color-accent: var(--green-800); --color-accent-hover: var(--green-900); --color-accent-active: var(--green-950); --color-accent-on-dark: var(--green-300); --color-accent-graphic: var(--green-500); /* rules, marks — never text */ /* Only the glyph on the WhatsApp button, so people recognise it at a glance. Never text: the button label next to it carries the meaning. */ --color-whatsapp: #1DA851; /* Focus */ --color-focus: var(--neutral-900); --color-focus-on-dark: var(--brand-white); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ------------------------------------------------------------------------ 5. TYPOGRAPHY Two families, both free and variable on Google Fonts. Archivo — headings, buttons, labels, captions (grotesque, sturdy, closest free match to the logo wordmark) Source Sans 3 — running text (humanist, large x-height, open apertures) Beide worden zelf gehost als variabele woff2 in letters/; de @font-face- regels staan bovenaan styles.css. De fallbackstacks hieronder houden de bladspiegel bruikbaar als een fontbestand niet laadt. ---------------------------------------------------------------------- */ --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Scale: mobile first, fluid between a 360px and an 840px viewport. Body starts at 18px because the audience is 35–70 years old. */ --font-size-meta: 0.8125rem; /* 13 */ --font-size-xs: 0.875rem; /* 14 */ --font-size-sm: 0.9375rem; /* 15 */ --font-size-base: clamp(1.125rem, 1.08rem + 0.22vw, 1.1875rem); /* 18–19 */ --font-size-md: clamp(1.1875rem, 1.09rem + 0.42vw, 1.3125rem); /* 19–21 */ --font-size-lead: clamp(1.1875rem, 1.02rem + 0.75vw, 1.375rem); /* 19–22 */ --font-size-lg: clamp(1.3125rem, 1.13rem + 0.85vw, 1.5rem); /* 21–24 */ --font-size-xl: clamp(1.625rem, 1.33rem + 1.40vw, 2rem); /* 26–32 */ --font-size-2xl: clamp(2rem, 1.50rem + 2.40vw, 2.75rem); /* 32–44 */ --leading-tight: 1.12; /* --font-size-xl and up */ --leading-snug: 1.25; /* --font-size-md / lg */ --leading-normal: 1.45; /* lead paragraph */ --leading-body: 1.65; /* running text — do not lower */ --leading-meta: 1.4; --tracking-tight: -0.015em; /* large headings only */ --tracking-normal: 0; --tracking-wide: 0.02em; /* buttons */ --tracking-meta: 0.09em; /* uppercase captions and labels */ /* One ch is the advance of "0" (0.497em), while the average character in this Dutch copy measures 0.427em — a factor of 1.16. Measured in the browser with the loaded Source Sans 3: 62ch rendered 72 characters per line, not 62. These values deliver the 62 and 48 that huisstijl.md 2.2 actually asks for. */ --measure: 53ch; /* 62 characters of running text */ --measure-narrow: 42ch; /* 48 characters — leads, card copy */ /* ------------------------------------------------------------------------ 6. SPACING — 4px base ---------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-section: clamp(3rem, 2rem + 5vw, 6rem); /* vertical rhythm */ --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); /* page side padding */ /* ------------------------------------------------------------------------ 7. LAYOUT ---------------------------------------------------------------------- */ --container-narrow: 40rem; /* 640 — forms, single column text */ --container: 68rem; /* 1088 — default page width */ --container-wide: 82rem; /* 1312 — service card grid */ --header-height: 64px; --header-height-wide: 76px; --tap-target-min: 48px; /* generous; WCAG asks 24, iOS 44 */ --z-header: 100; /* ------------------------------------------------------------------------ 8. BORDERS AND RADII Corners stay almost square: this is a document, not an app. ---------------------------------------------------------------------- */ --border-width-hairline: 1px; --border-width-strong: 2px; --border-width-band: 4px; /* the green rule above the footer */ --radius-xs: 2px; /* buttons, fields, cards */ --radius-sm: 3px; /* images inside a frame */ /* No elevation tokens exist. Shadows are not part of this system. */ /* ------------------------------------------------------------------------ 9. MEDIA Fixed frames make a set of phone photos of mixed origin sit on one line. ---------------------------------------------------------------------- */ --ratio-portrait: 4 / 5; /* default frame — most of the archive */ --ratio-portrait-tall: 3 / 4; /* hero on a phone */ --ratio-landscape: 3 / 2; /* widest frame allowed; never wider */ --ratio-square: 1 / 1; /* thumbnails, portrait of Aram */ --image-max-portrait: 720px; /* never display a phone photo larger */ --image-max-landscape: 960px; /* A whisper, not a look: takes the edge off oversaturated summer frames so they do not fight the brand green, and lifts flat grey skies. */ --image-filter: saturate(0.92) contrast(1.03); /* ------------------------------------------------------------------------ 10. MOTION Colour and border transitions only. No movement, no fades, no reveals. ---------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 180ms; --easing: cubic-bezier(0.2, 0, 0.2, 1); --transition-interactive: color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), text-decoration-color var(--duration-fast) var(--easing); } /* Honour the operating system setting. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; } }