/* site-fixes.css — accessibility and layout repairs to the original design. * * Loaded last in by tools/postprocess.mjs so it overrides the Bricks * theme's inline styles without editing them (a re-scrape would wipe those). * * The rule for this file: fix what the verify gates catch, change nothing else. * Every rule below exists because `npm run gate` failed on the site as the * client's WordPress build shipped it. */ /* ── AA contrast: the brand primary ─────────────────────────────────────────── * #6868e5 fails WCAG AA by a hair, in both directions and everywhere it is * used: white text on it reaches 4.47:1 (buttons, the CTA band, the nav pill), * and it as text reaches 4.47:1 on white and 4.12:1 on the #f5f5ff section * tint (breadcrumbs, "#Palvelut" eyebrows, the WP-isäntä credit). One token * accounted for 33 of the 37 contrast failures. * * #5d5dde is the same hue, darkened as little as the threshold allows: * 5.14:1 on white and 4.75:1 on the tint, so it clears AA with margin instead * of sitting on the line. The shift is barely perceptible side by side, which * is the point — the brief is to keep the original design. * * Redefining the Bricks token catches every use at once; the theme's own * :root block is earlier in the cascade, so this wins on order alone. The * lighter companion (--bricks-color-irbcik #8181e9) is left untouched: it only * appears in fills, never as text, and it passed. */ :root { --bricks-color-hedxvx: #5d5dde; } /* ── 320 px overflow: "Jätä yhteydenottopyyntö" ─────────────────────────────── * On /contact-us/ that heading is 307 px of unbreakable Finnish compound in a * 280 px column, pushing the page 7 px wide at the 320 px floor. Finnish * hyphenation splits it cleanly (yhteydenotto-pyyntö) and only ever engages * when a word genuinely cannot fit, so nothing else re-flows. * * Scoped to ≤360 px on purpose: the heading fits from 361 px up, and this way * every width the gate and the pixel-diff cover from 390 px is provably * untouched. is already set, which is what lets the browser * pick Finnish hyphenation patterns; overflow-wrap is the fallback for engines * that ship no fi dictionary. */ @media (max-width: 360px) { h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; } } /* ── 404 page ───────────────────────────────────────────────────────────────── * The two elements tools/fetch-404.mjs adds to the template's title block: an * explanatory line and a row of links to where the visitor was probably going. * The Bricks template has no class for either — everything else in that panel * is a heading or a button — so they are styled here rather than borrowed from * a component that means something else. * * White on the panel's navy, which is what the heading beside them already * uses; the contrast gate checks these like any other text. */ /* The topbar was a logo on the left and social icons on the right, spaced * apart. With the redundant logo gone the lone icon slid to the left edge; * keep it where the template put it. This class exists only on the 404. */ .coming-soon-page__content-topbar-wrapper { justify-content: flex-end; } .error-404__body { color: var(--bricks-color-lbxbdf); max-width: 46ch; margin-bottom: 4px; } .error-404__links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 28px; } .error-404__links a { color: var(--bricks-color-lbxbdf); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .error-404__links a:hover, .error-404__links a:focus-visible { text-decoration-thickness: 2px; }