/* ============================================================ FONTS: self-hosted Fjalla One (400) and Source Sans 3 (variable 400 to 700), latin and latin-ext subsets as woff2 in assets/fonts/. Saves a DNS lookup and two external requests on the critical path; no Google request from the visitor. font-display: swap so text shows in the fallback at once. ============================================================ */ @font-face { font-family: 'Fjalla One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/fjalla-one-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fjalla One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/fjalla-one-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/source-sans-3-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/source-sans-3-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ BOX-SIZING RESET Without it the padding-inline on .l-container adds to max-width (content-box is the browser default) and the page overflows horizontally by exactly 2 x --container-pad on desktop. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ ELEMENT RESET The UA stylesheet and WordPress core styles (see the dequeue in functions.php) give h1-h6/p/ul/ol/a/button/form fields their own margin/padding. main.css only spaces through component classes and the --space-* tokens; a class selector always beats a bare tag selector, so this block sits early and never overrides intended component margins. Without it any bare tag (WYSIWYG content via the_content(), a forgotten .c-* on an

) visibly breaks the design. ============================================================ */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* Browser-default h2 is bold; component classes set their own weight, this baseline stops a bare

(e.g. via the_content()) from looking heavier than the design intends. */ h2 { font-weight: var(--fw-regular); } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } img, svg, video { display: block; max-width: 100%; } /* ============================================================ SUSSEX EXTERIORS: design tokens One :root block. This file is the compiled build for this client, not the shared library source (component-systeem/design-system/ tokens.css), so there is no generic layer plus override layer here. ============================================================ */ :root { /* ── PALETTE (primitives) ── */ --palette-primitive-ink: oklch(0.22 0.01 90); --palette-primitive-surface: oklch(1 0 0); --palette-primitive-surface-raised: oklch(0.96 0.004 90); --palette-primitive-accent: oklch(0.32 0.045 155); --palette-primitive-accent-dim: oklch(0.32 0.045 155 / 0.4); /* Body text on light surfaces is a soft dark grey, not near-black. --color-ink below carries the same raw value. */ --palette-primitive-text: rgb(56 56 57); --palette-primitive-muted: oklch(0.48 0.01 90); --palette-primitive-subtle: oklch(0.48 0.01 90 / 0.4); --palette-primitive-border: oklch(0.90 0.006 90); /* ── BRAND RAW VALUES ── */ --color-bg: oklch(0.99 0.002 90); --color-green: oklch(0.32 0.045 155); --color-green-dark: oklch(0.24 0.04 155); --color-green-tint: oklch(0.94 0.02 155); --color-green-deep: oklch(0.20 0.035 156); --color-ink: rgb(56 56 57); --color-ink-muted: oklch(0.48 0.01 90); /* ── SEMANTIC ALIASES ── */ --color-surface: var(--palette-primitive-surface); --color-surface-raised: var(--palette-primitive-surface-raised); --color-on-surface: var(--palette-primitive-text); --color-on-surface-muted: var(--palette-primitive-muted); --color-primary: var(--color-green); --color-on-primary: oklch(1 0 0); --color-primary-tint: var(--color-green-tint); --color-primary-dark: var(--color-green-dark); --color-footer-bg: var(--color-green-deep); --color-on-footer-bg: oklch(1 0 0); --color-on-footer-bg-muted: oklch(0.9 0.012 156 / 0.8); --color-on-footer-bg-subtle: oklch(0.9 0.012 156 / 0.55); --color-on-footer-bg-accent: oklch(1 0 0); --color-nav-overlay-bg: var(--color-green-deep); --color-on-nav-overlay-bg: oklch(1 0 0); /* Google's own brand yellow (#FBBC05, same as the "G" logo in reviews.php), not color-mix() with the theme green: star ratings read as Google's rating colour, not a themed tint. */ --color-rating: #fbbc05; --color-on-nav-overlay-bg-border: oklch(1 0 0 / 0.14); --color-on-scrim: oklch(1 0 0); --color-border: var(--palette-primitive-border); --color-error: oklch(0.60 0.19 25); /* ── FONTS ── */ --font-display: 'Fjalla One', sans-serif; --font-body: 'Source Sans 3', system-ui, sans-serif; /* ── TYPOGRAPHY SCALE ── */ --text-hero: clamp(2.2rem, 5.2vw, 4rem); --text-h1: clamp(2.5rem, 5.5vw, 4rem); --text-h2: clamp(1.75rem, 4vw, 2.75rem); --text-h3: clamp(1.375rem, 2.5vw, 1.75rem); --text-lg: 1.25rem; --text-md: 1.125rem; /* 18px: in-between size for stars, counters, readouts */ --text-body: 1rem; --text-sm: 0.875rem; --text-label: 0.8125rem; --text-fine: 10px; --text-micro: 9px; --leading-tight: 1.15; --leading-body: 1.65; --tracking-wide: 0.12em; --tracking-label: 0.14em; --tracking-tight: 0.01em; /* ── FONT WEIGHTS ── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── SPACING (8px base grid) ── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px; /* Half steps for inline and component-internal space (chips, icons, label distance). Beyond these three, no loose px/rem in main.css. */ --space-0-5: 4px; --space-1-5: 12px; --space-2-5: 20px; /* Fluid component space, defined once so head-to-content, card padding and column gaps breathe the same site-wide. */ --space-head: clamp(2rem, 4vw, 3rem); /* section head to content */ --space-head-lg: clamp(2.25rem, 4.5vw, 3.5rem); /* roomier variant */ --space-card-pad: clamp(1.25rem, 2vw, 1.75rem); /* card padding */ --space-card-pad-lg: clamp(1.5rem, 2.5vw, 2rem); --gap-split: clamp(2rem, 5vw, 4.5rem); /* two-column gap */ --gap-grid: clamp(1.5rem, 3vw, 2.5rem); /* card grid */ /* ── GRID & CONTAINER ── */ --container-max: 1280px; --container-pad: clamp(24px, 5vw, 80px); /* Fixed copy for the nav (c-nav__bar): body.home overrides --container-max and --container-pad for the content, the nav must not follow. */ --container-max-fixed: 1280px; --container-pad-fixed: clamp(24px, 5vw, 80px); /* Section rhythm in three steps, site-wide. body.home only overrides --section-y (see below); tight and loose are the same everywhere. */ --section-y-tight: clamp(2.5rem, 4vw, 4rem); --section-y: clamp(4.5rem, 7.5vw, 7rem); --section-y-loose: clamp(6rem, 10vw, 10rem); /* Two rows: logo row (--nav-logo-row-h) above, links row (--nav-bar-row-h) below, so the logo can be a lot larger. --nav-h is the sum and is the value hero-display, benefits-list and the sticky calculations use. */ --nav-logo-row-h: 68px; --nav-bar-row-h: 56px; --nav-h: calc(var(--nav-logo-row-h) + var(--nav-bar-row-h)); --nav-bar-gap: clamp(1rem, 2vw, 1.75rem); --nav-link-gap: clamp(0.8rem, 1.4vw, 1.5rem); /* ── BORDER RADIUS ── */ --radius-xs: 6px; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 100px; --radius-full: 9999px; /* ── SHADOWS ── */ --shadow-sm: 0 1px 2px oklch(0.22 0.01 90 / 0.06); --shadow-md: 0 4px 16px oklch(0.22 0.01 90 / 0.08); --shadow-lg: 0 12px 32px oklch(0.22 0.01 90 / 0.10); /* ── MOTION ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 600ms; /* Reveal animations (scroll and load). Softer than --ease-out: the last 20% of the movement takes long, which reads as "landing" rather than "stopping". */ --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); --duration-reveal: 900ms; --duration-reveal-slow: 1400ms; --duration-hover-image: 1100ms; /* slow image zoom on hover (bento, showcase, about) */ --duration-kenburns: 18s; /* Ken Burns on image-band and intro: there and back */ --kenburns-scale: 1.08; --parallax-range: 48px; /* image shifts at most this far against the scroll direction */ --reveal-y: 20px; --stagger: 80ms; /* ── FOCUS (WCAG) ── */ --focus-ring: 0 0 0 2px var(--color-green); /* ── FORM / INPUT ── */ --input-placeholder: var(--palette-primitive-subtle); /* ── OVERLAY TINT ── */ /* Fixed value rather than color-mix() with --color-primary: that looked too dark once the primary moved to a deeper green. */ --overlay-tint: oklch(0.45 0.06 156 / 0.55); /* Scrim colour over images (hero-display, colour-teaser, product-cards). */ --color-scrim: oklch(0.18 0.02 155); /* ── Z-INDEX ── */ --z-sticky: 200; /* Breakpoints are not tokens: CSS variables do not work in media queries. main.css uses 640, 768 and 1024px. */ } /* ============================================================ HOMEPAGE: token overrides, body.home only variables.css and main.css are loaded by every page. The homepage has its own scale, so it lives as an override on body.home rather than in :root; the other pages keep the :root values above unchanged. ============================================================ */ body.home { /* Hero to section heading ratio is 2.18 instead of 1.45. The vw term is 6.9 so the hero binds on its maximum at 1280px instead of shrinking with the viewport. Capped at 72px: at 88px the heading pushed the rest of the hero off a 13 inch screen; at 72px the title stays on three lines with body text and buttons still in view. */ --text-hero: clamp(2.5rem, 6.9vw, 4.5rem); /* 40 to 72px */ --text-h2: clamp(1.75rem, 3.8vw, 3rem); /* 28 to 48px */ /* The vw term binds at 1280px (88px); the 6rem maximum only kicks in on wider screens so it never pinches. */ --text-h2-lead: clamp(1.75rem, 6.875vw, 6rem); /* 28 to 96px, 88px at 1280px */ --text-h3: clamp(1.25rem, 1.8vw, 1.5rem); /* 20 to 24px */ --text-label: 0.8625rem; /* 13.8px */ --tracking-label: 0.16em; /* All body text on the homepage at 16px. Separate from --text-body: most components use --text-lg for their intro and lead text, so that token is the knob that actually drives body copy. */ --text-lg: 1rem; /* 16px */ /* Labels all share one size (13.8px), no exception for the intro label: a larger intro label read as a second heading next to the 64px lead. Section headings are 48px uppercase; hierarchy comes from the distance to the hero (88px) and to the labels (13.8px). Fjalla One has one weight (400), so hierarchy within display text can only come from size, capitalisation, colour and whitespace. Tracking is slightly positive: condensed capitals run close at negative tracking. */ --leading-display: 1; --tracking-display: 0.01em; /* Section rhythm. One step on every section made everything read as equally important. Three steps give variety: at 1280px they come out at 51, 77 and 128px, a ratio of 1 : 1.5 : 2.5. The vw term binds well before the maximum in all three cases; the maximum is the ceiling for 1600px and wider, not the intended desktop value. tight and loose live in :root so all pages share the same three-step rhythm. */ --section-y: clamp(4rem, 6vw, 6rem); /* 64 to 96px */ /* The content column is 89.3% of the viewport at every width (1286px on 1440, 1714 on 1920), with no upper bound: --container-max is 100% and only the gutter does the work. 5.35vw is 77/1440. Only on mobile does the 24px floor bind. The calc formulas in main.css that compute the column's left edge, (100% - --container-max) / 2 + --container-pad, still hold: with --container-max at 100% the first term drops out and the gutter remains, which is the column edge. */ --container-max: 100%; --container-pad: max(24px, 5.35vw); /* Two surfaces on the homepage and no more: warm white and dark green. Page background and raised blocks share the same slightly warmer tint so there is no visible seam between two kinds of white. Mint green is gone; --color-primary-tint only drives the hero label and the trust pill, which sit on photography where near-white reads better. */ --color-bg: oklch(0.978 0.009 83); --color-surface: oklch(0.978 0.009 83); --color-primary-tint: oklch(0.97 0.006 88); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-reveal: 0ms; --duration-reveal-slow: 0ms; --duration-hover-image: 0ms; --parallax-range: 0px; --reveal-y: 0px; --stagger: 0ms; } }