/* GearMotive — hand-written replacement for ~30 Kadence/plugin stylesheets. * * Structure mirrors the original's rendered anatomy (tools/measure.mjs), not * Kadence's class names. Anything that differs from the measured original is * marked FIX with the defect it repairs — see PROJECT.md's defect table. */ @import url("/assets/fonts/montserrat.css"); @import url("tokens.css"); /* ---- Design system tokens (E-SQ5 prototype, 2026-10-10) ---------------------- * The values shared by the site-wide button, the focus ring, the header link * and the E-SQ5 product page. Values used in one place stay literal. */ :root { /* Buttons: one red for the whole site. #c60000 is 6.17:1 under white. */ --btn-bg: #c60000; --btn-bg-hover: #a90000; --btn-radius: 2px; --btn-fs: 12px; --btn-pad: 13px 22px; --btn-minh: 46px; --btn-gap: 24px; /* Focus ring: see the global :focus-visible rule. */ --focus-ring: #e69a00; --focus-ring-edge: #101113; /* Product page (pp-*). */ --pp-ink: #202124; --pp-surface: #f3f3f3; --pp-surface-alt: #e4e4e4; --pp-card: #e5e5e5; --pp-frame: #ededed; --pp-dark: #101113; --pp-dark-line: #343638; --pp-table-line: #3b3d3f; --pp-ratio-line: #494b4d; --pp-red: #c60000; --pp-red-deep: #b50000; --pp-red-on-dark: #ff535b; --pp-icon-on-dark: #ff3845; --pp-use-on-dark: #ff6970; --pp-wrap: 1280px; --pp-gutter: 64px; --pp-gutter-sm: 36px; --pp-space-section: 48px; --pp-space-section-sm: 34px; --pp-radius: 2px; --pp-fs-body: 15px; --pp-lh-body: 1.55; --pp-fs-h1: clamp(30px, 3.3vw, 48px); --pp-fs-h2: clamp(26px, 2.8vw, 38px); --pp-fs-h2-sm: 22px; --pp-fs-h3: 18px; --pp-fs-small: 13px; --pp-fs-xs: 12px; } /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; height: auto; display: block; } img { border-radius: inherit; } h1, h2, h3, h4 { margin: 0 0 var(--space-tight); font-weight: var(--fw-bold); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } p { margin: 0 0 var(--space-tight); } p:last-child { margin-bottom: 0; } a { color: var(--link-text); } a:hover, a:focus-visible { text-decoration-thickness: 2px; } /* Global focus ring, two tones, so it shows on every surface the site uses. * The amber band (3px, hugging the element) is for dark surfaces; the * near-black edge (2px, outside the band) is for light ones. Contrast (WCAG * relative luminance): the edge against #fff 18.89, #f3f3f3 17.03, #e4e4e4 * 14.86; the amber against #101113 8.08, #191919 7.52, #2f2f2f 5.73. Amber * alone on light surfaces is 2.34 / 2.11 / 1.84, which was the old failure. * Every surface reaches at least 3:1. */ :focus-visible { outline: 2px solid var(--focus-ring-edge); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-ring); } /* The original's rule under every heading: a short red line, 280×1px, as * measured (`kt-divider`, rgb(255,0,0)). Left-aligned in content, centred in * the title band. It was a faint full-width grey line until 2026-08-26. */ hr { border: 0; border-top: 1px solid #ff0000; width: 280px; max-width: 100%; margin: var(--space-tight) 0 var(--space-block); } .hero hr { margin-inline: auto; } /* FIX: the original's skip link rendered at 2.91:1 and was positioned where it * could be seen. Standard visually-hidden-until-focus instead. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--footer); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0; } .skip-link:focus { left: 0; } /* ---- Layout ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); } /* ONE band treatment for the whole site: the shared photograph under a grey * overlay, white text. * * The original had five — 31 bands on #555555@0.90, 14 on #ffffff@0.90, and 13 * flat surface/mid/dark — which is why the blog and the archives read as a * different site. Collapsing them removed four modifier classes, the per-row * inline backgrounds, and the tone plumbing that produced them. * * The overlay was #555555 at 0.90 — the site's own Kadence palette6, which is * what 31 of the original's bands already used — and is now #000000 at 0.60. * ⚠ That is not a taste change, it is what the new photographs require: they * are near-black (median luminance 9-11 against the race car's 80), so 90% of * an #555555 overlay composited them to a flat 77-90 grey and NOTHING of the * picture reached the screen. Measured, not eyeballed. * * The worst-case guarantee is unchanged, and that is the point of picking these * two numbers: white body text is **5.74:1 even if the photo underneath were * pure white** — 0.4 x 255 = 102 — which is the only honest way to judge text * over an image. It is the same pair the hero band already carries. * ⚠ Keep any replacement pair at or under that composite. #555555 at 0.90 also * satisfies it (76.5 + 25.5 = 102); most looser pairs do not. */ /* THREE band photographs, one per page family. Chosen by the client 2026-08-25 * after seeing all three live; the trial is over and this is the design. * * The "main background" is the photograph under every dark content band. It was * `car-racing-4394450_1920.jpg`, a stock race car, deliberately different from * the hero's gearbox so a page had variety without per-row backgrounds. It is * now three frames from the 2026-08 product shoot: * * -106 the two front pages / and /fi/ * -110 everything else /faq/, /references/, the blog, archives * * Each page names its photograph in its , so nothing * depends on which rule comes last. */ :root { --band-photo: url("/assets/wp-content/uploads/2026/08/Gearmotive_tuotekuvat-110.jpg"); /* ⚠ These two travel WITH the photographs. Going back to the race car means * going back to #555555 / 0.9 in the same edit, or the band turns into a * black slab — and the three frames here are near-black, so raising the * opacity back to 0.9 makes all three vanish into flat grey. */ --band-overlay: #000000; --band-overlay-opacity: 0.6; } body[data-band="106"] { --band-photo: url("/assets/wp-content/uploads/2026/08/Gearmotive_tuotekuvat-106.jpg"); } body[data-band="110"] { --band-photo: url("/assets/wp-content/uploads/2026/08/Gearmotive_tuotekuvat-110.jpg"); } .section { position: relative; padding-block: var(--space-section); background-image: var(--band-photo); background-size: cover; background-position: center; background-attachment: fixed; color: #fff; } .section::before { content: ""; position: absolute; inset: 0; background: var(--band-overlay); opacity: var(--band-overlay-opacity); } .section > * { position: relative; } .section h1, .section h2, .section h3, .section h4 { color: #fff; } .section a { color: var(--link-text); } /* The alternate band: a DIFFERENT photograph under a near-white overlay, dark * text. Alternating is what stops a long page reading as one slab — and it is * the pairing the original used on the front page and /references/. * * Worst case (photo underneath pure black → surface #e6e6e6): --ink 8.02:1, * --link 7.88:1. --muted was 4.38:1 and is now #676767, 4.53:1. */ .section--light { background-image: url("/assets/wp-content/uploads/2020/11/koppalogolla-1536x864.jpg"); color: var(--ink); } /* The light band keeps its own pair: a near-white overlay at 0.9 over a * different, much brighter photograph. It is not on trial and does not follow * --band-overlay. */ .section--light::before { background: #ffffff; opacity: 0.9; } .section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: var(--ink); } .section--light a { color: var(--link-text-on-light); } /* ⚠ A component that paints its own light surface must restate BOTH its ink and * its link colour, in every band. Inheriting the band's is how 49 gallery * captions once shipped as white-on-white, and how they came back as pale * --link-on-dark on a white plate the moment the dark band grew links. * * One list, deliberately: every light-surface component belongs here, so adding * a new one is a single edit rather than a new rule. Must stay AFTER both band * rules — same specificity (0,1,1), so source order decides. */ .card, .gallery figcaption, .post-card, .form-field, .leaflet-container, .reseller-directory, .story-light { color: var(--ink); } /* Headings need saying separately: .section h2 sets #fff explicitly, so a * heading inside a card never inherits the card's colour. 19 "Features" h2s * shipped white-on-white on the product pages before this line existed. */ .card :is(h1, h2, h3, h4), .post-card :is(h1, h2, h3, h4), .reseller-directory :is(h1, h2, h3, h4), .story-light :is(h1, h2, h3, h4) { color: var(--ink); } /* .reseller-directory is the reseller list under the map (reseller-map.js, * tools/sync-reseller-map.mjs); its links are descendants, hence "a". */ .card a, .gallery figcaption a, .post-card a, .form-field a, .leaflet-container a, .reseller-directory a, .story-light a { color: var(--link-text-on-light); } /* .testimonial paints a DARK surface, so it is NOT in that list. Its only link * is the name chip, which states #fff on the red chip further down. */ .testimonial { color: var(--on-dark); } /* .btn paints the accent-red surface (the form submits, the CTAs), so it states * its own text colour — but NOT here. See "the last word on link colour", after * the hero rules at the bottom of this file. */ /* ⚠ iOS Safari cannot render a fixed background. */ @media (max-width: 1024px), (hover: none) { .section { background-attachment: scroll; } } /* A section whose background is a photograph. The scrim is the FIX for the * 128 undecidable-contrast occurrences: white text on an arbitrary image. */ .section--photo { position: relative; background-repeat: no-repeat; color: #fff; /* The design: content scrolls over a photograph held still behind it. Which * bands do this is measured per row, not assumed — see build.mjs. */ background-attachment: var(--bg-attachment, scroll); } .hero { background-attachment: var(--bg-attachment, scroll); } /* ⚠ iOS Safari cannot render a fixed background — it either janks badly or * scales the image to the document height. The original disables it with * exactly this query (and so must we, or phones get a broken hero). */ @media (max-width: 1024px), (hover: none) { .section--photo, .hero { background-attachment: scroll !important; } } /* The overlay is measured per row (colour + opacity) and passed in as custom * properties, because every band uses different values. --scrim-solid is only * the fallback for a band that had no overlay at all. */ .section--photo::before { content: ""; position: absolute; inset: 0; background: var(--overlay, var(--scrim-solid)); opacity: var(--overlay-opacity, 1); } .section--photo > * { position: relative; } /* ⚠ A component that paints its OWN light surface must state its own colour. * * `.section--photo` sets `color: #fff` for the text that sits directly on the * photograph — but an accordion panel or a card inside that band paints itself * white and the white text kept inheriting. That is 413 invisible words on the * product pages, and it looks fine in a screenshot of the band because the * band itself reads correctly. Anything with a light background belongs here. */ .card, .gallery figure, .gallery figcaption, .logos figcaption, .post-card, .post-card-body, .form, .form-status { color: var(--ink); } .section--photo .card a, .section--photo .post-card a { color: var(--link-text-on-light); } /* A band whose overlay is LIGHT keeps the normal dark ink — white text on a * white overlay is the exact defect this replaces. */ .section--photo-light { color: var(--ink); } .section--photo-light h1, .section--photo-light h2, .section--photo-light h3 { color: var(--ink); } .section--photo-light a { color: var(--link-text-on-light); } .hero--light, .hero--light h1 { color: var(--ink); } .grid { display: grid; gap: var(--space-block); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack > * + * { margin-top: var(--space-block); } /* ---- Two-column text-and-picture rows ---------------------------------- */ /* Order is normalised to text-left / picture-right in build.mjs; this only * lays them out. `align-items: center` because the picture and the paragraph * are rarely the same height and the original centres them. */ .cols { display: grid; gap: var(--space-block); align-items: center; } /* Two of these stacked run together otherwise — the second block's heading * sits hard against the last paragraph of the first and reads as part of it. */ .cols + .cols, .cols + .gallery, .gallery + .cols { margin-top: var(--space-section); } .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Data columns (the BMW guide's gear ratios and chassis lists) top-align; * centring is for a picture beside a paragraph. */ .cols--4, .cols--6, .cols--text { align-items: start; } /* Gear ratios: label above value in every cell, as the original wrapped them. */ .cols--6 strong { display: block; } /* Air around a column row and after a list — the original's row padding, * which the flattened version had lost. */ p + .cols, .cols + p, ul + p { margin-top: var(--space-block); } .col > * + * { margin-top: var(--space-tight); } .col .figure { margin: 0; } .col img { width: 100%; } /* Stacking early, and always text-then-picture: at this width a picture above * its own heading reads as belonging to the section before it. */ @media (max-width: 860px) { .cols--2, .cols--3 { grid-template-columns: 1fr; } .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 480px) { .cols--4 { grid-template-columns: 1fr; } .cols--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Header ------------------------------------------------------------ */ /* The original header is 90px, fully transparent, floating over the hero and * scrolling away with the page; when you scrolled it came back as a solid grey * bar. Two client changes to that (2026-08-25): it is 72px, and it now STAYS — * `position: fixed` — without ever turning grey. It stays transparent, over * whatever is behind it, at every scroll position. * * ⚠ Transparent-and-fixed is exactly the combination that breaks contrast, and * no gate can see it: every gate measures a page at rest, at scroll 0, where * the bar sits over the dark hero and reads 12:1. Scroll it 800px onto a * `.section--light` and the same white links are on #e6e6e6. That is what * `--header-scrim` is for — read its note in tokens.css before touching it. * * ⚠ Fixed, not sticky. `position: sticky` needs the header to be in flow, and * it is not: it is pulled out so the hero can start at y=0 and run underneath * it, which is the whole transparent-over-the-photograph design. */ .site-header { position: fixed; inset: 0 0 auto; height: var(--header-h); z-index: 20; color: #fff; } /* Solid header: used wherever nothing dark sits behind it — posts, archives, * the privacy pages. The original does exactly this; a transparent header over * a white section is white-on-white. */ /* Every page renders the same dark title band, so the header is transparent * everywhere — there is no solid variant any more. It existed for the three * articles, which used to have no band; giving them one made the whole * modifier dead code, and dead code in a header is exactly where per-page * drift creeps back in. */ .site-header::before { content: ""; position: absolute; inset: 0; height: calc(var(--header-h) * 1.6); background: var(--header-scrim); pointer-events: none; } .site-header .container { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-block); } .site-brand { display: flex; align-items: center; flex: 0 0 auto; } .site-brand img { width: 176px; max-height: 52px; object-fit: contain; } /* ⚠ The menu's own emphasis, and the ONLY action in the bar. A call-to-action * button lived here for a few hours on 2026-08-25 and was removed: on a desktop * it duplicated a menu that already offers Contact, and on a phone it took the * logo's corner. Emphasising the existing item says the same thing with one * element instead of two. * * ⚠ Marked by `highlight` in site.json, not by matching the label — the menu is * a CMS-managed region the client will edit, and a match on "Contact" would stop * working silently the day it is renamed. * * Contrast is unaffected: the text stays #fff on the header scrim, which is * guaranteed 4.74:1 at worst. The border is currentColor, so it cannot be a * colour-only signal that fails against a background nobody measured. */ .nav-highlight > a { border: 2px solid currentColor; border-radius: var(--btn-radius); padding-inline: 16px; } .nav-highlight > a:hover, .nav-highlight > a:focus-visible { /* --btn-bg is the site button red, #c60000 (6.17:1 under white), * so white-on-it is safe. Do not "brighten" it to --accent #ff0000: that is * 4.00:1 and was the original's own defect. */ background: var(--btn-bg); border-color: var(--btn-bg); } .nav { display: flex; } .nav-lang-list { list-style: none; margin: 0; padding: 0; display: flex; } .nav ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; } .nav li { position: relative; } .nav a { display: flex; align-items: center; height: 48px; padding-inline: 12px; color: #fff; text-decoration: none; white-space: nowrap; } .nav a:hover, .nav a:focus-visible { text-decoration: underline; } .nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; } /* Products submenu */ .nav .has-sub > button { display: flex; align-items: center; gap: 6px; height: 48px; padding-inline: 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; } .nav .has-sub > button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); } .nav .sub { display: none; position: absolute; z-index: 30; /* above the band below the header */ top: 100%; left: 0; min-width: 260px; background: var(--footer); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow-card); padding: 6px 0; } .nav .has-sub[aria-expanded="true"] .sub, .nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: block; } .nav .sub a { height: auto; padding: 10px 18px; } .nav-lang a { gap: 8px; } .nav-lang img { width: 18px; height: auto; display: inline-block; } /* Mobile menu. The original's was a Kadence off-canvas drawer; this is the * same behaviour with markup the responsive gate recognises. */ .nav-toggle { display: none; align-items: center; justify-content: center; gap: 8px; background: none; border: 0; color: inherit; font: inherit; padding: 10px; /* ⚠ The tap target must stay ≥48×48. Without the minima it measured 44×22 — * below even WCAG 2.5.8's 24px floor — and the dead strips above and below * the icon meant most thumb taps on a phone missed: reported as "hamburger * not clickable" on iOS (DuckDuckGo, 2026-08-24). An automated tap at the * exact centre still worked, so the responsive gate stayed green. The button * paints nothing, so the larger box is invisible. */ min-width: 48px; min-height: 48px; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; box-shadow: 0 7px currentColor, 0 -7px currentColor; } @media (max-width: 1100px) { .nav-toggle { display: flex; } .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--footer); padding: var(--space-tight) var(--gutter) var(--space-block); box-shadow: var(--shadow-card); /* ⚠ The header is `position: fixed` now, so the dropdown is fixed with it * and cannot be scrolled to. Ten menu items plus the language switcher * overflow a short phone in landscape, and the items past the fold were * simply unreachable. */ max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } .nav[data-open="true"] { display: block; } .nav ul { flex-direction: column; align-items: stretch; } .nav a, .nav .has-sub > button { height: auto; padding: 14px 0; width: 100%; } .nav .sub { position: static; display: block; background: none; box-shadow: none; padding: 0 0 0 18px; } /* In the dropdown the items are full-width rows, so the pill would stretch * across the whole panel and stop reading as a pill. */ .nav-highlight > a { display: inline-flex; width: auto; padding-block: 10px; } } /* ---- Hero -------------------------------------------------------------- */ /* ONE hero background for the whole site. * * Defined here rather than inline per page so the band, the header over it and * the Products dropdown behave identically everywhere — which is the point: * the dropdown always has the same dark photograph behind it, so its links are * always legible. Pages used to inherit whatever photo their first row happened * to carry, or none at all, and the header changed character page to page. */ .hero { background-image: url("/assets/wp-content/uploads/2022/11/Gearmotive_tuotekuvat-132_2-jpg.webp"); background-size: cover; background-position: center; --overlay: #000000; --overlay-opacity: 0.6; position: relative; min-height: 639px; display: grid; place-items: center; padding: calc(var(--header-h) + var(--space-block)) var(--gutter) var(--space-block); /* ⚠ background-COLOR, not the `background` shorthand. The shorthand resets * background-image to none, and sitting below the longhands above it silently * wiped the shared hero photograph — the band rendered flat #111 and looked * like the image had simply not been set. */ background-color: #111; background-repeat: no-repeat; color: #fff; text-align: center; border-bottom: 6px solid var(--accent); } .hero::before { content: ""; position: absolute; inset: 0; background: var(--overlay, var(--scrim-solid)); opacity: var(--overlay-opacity, 1); } .hero > * { position: relative; max-width: var(--content); } .hero img { margin-inline: auto; } /* A page that is not the front page has a short hero. */ .hero--page { min-height: 340px; } /* The call to action under the page title. `.hero` is `text-align: center` and * the button is inline-flex, so it centres itself. */ .hero-cta { margin-top: var(--space-tight); } /* ---- The front page's floating CTA (phones only) ----------------------- */ /* ⚠ Hidden by default and shown only in burger mode — `.btn.cta-float` is * (0,2,0) so it out-weighs `.btn`'s own `display: inline-flex` 400 lines below, * which a bare `.cta-float` would lose to on source order. That exact mistake * put the old header CTA on every phone page. * * The front page has no title band to hang a CTA under (it has a logo, not a * heading), and putting one in the bar took the logo's corner and read as a * misplaced button. Fixed to the bottom of the viewport instead: always * reachable, never in the brand's way. Client, 2026-08-25. */ .btn.cta-float { display: none; } @media (max-width: 1100px) { .btn.cta-float { display: inline-flex; position: fixed; left: var(--gutter); right: var(--gutter); /* ⚠ env() for the iPhone home indicator. Without it the button sits under * the system gesture bar, where roughly the bottom third of it cannot be * tapped — and it looks perfectly fine in every screenshot. */ bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30; /* over the header's 20 */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); } /* ⚠ The button floats over the page, so the last thing on it would otherwise * sit permanently underneath. The footer's bottom row is short, so this is * the button's height plus its offset plus a line of air. */ body.is-front { padding-bottom: 92px; } /* ⚠ One CTA per screen — and this one is on screen at ALL times, so the * front page's pre-footer band is a guaranteed duplicate rather than a * possible one. It stays in the markup (it is the `cms:cta` managed region, * identical across all 50 pages) and is hidden here. */ .is-front .cta-band { display: none; } } @media (max-width: 800px) { .hero { min-height: 420px; } .hero--page { min-height: 240px; } } /* ---- Cards, media ------------------------------------------------------ */ .card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-soft); padding: var(--space-block); } .figure { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-card); } .figure img { width: 100%; } /* ---- Gallery ----------------------------------------------------------- */ .gallery { display: grid; gap: var(--space-tight); grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-soft); } .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* FIX: gallery captions were #fff on #fff — 1.00:1, 49 occurrences, completely * invisible on /references/ and /fi/referenssit/. */ .gallery figcaption { padding: 10px 12px; font-size: var(--fs-xs); color: var(--ink); background: var(--surface); } @media (max-width: 1000px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Logo grid (resellers) --------------------------------------------- */ .logos { display: grid; gap: var(--space-block); grid-template-columns: repeat(4, minmax(0, 1fr)); } .logos figure { margin: 0; text-align: center; } .logos img { width: 100%; max-width: 200px; height: 120px; object-fit: contain; margin-inline: auto; background: var(--surface); border-radius: var(--r); padding: 12px; } .logos figcaption { margin-top: 10px; font-size: var(--fs-small); } @media (max-width: 1000px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Reseller map (client, 2026-09-01) ---------------------------------- */ /* Leaflet with a MapLibre GL base layer (OpenFreeMap vector, the self-hosted * style at /assets/map/style-en.json), on /resellers/ and /fi/jalleenmyyjat/ * only — see reseller-map.js. The map reads as one of the site's light plates * sitting on the dark band, like the gallery cards under it. * * ⚠ z-index: 0 is load-bearing. Leaflet's panes and controls run their own * z-indexes up to 1000; without a stacking context here they compete with the * page's — and the fixed header is z-index 20, so the zoom buttons would ride * OVER the transparent bar the moment the map scrolls under it. The same shape * as the dead-z-index dropdown bug this file already records. */ .reseller-map { position: relative; z-index: 0; margin-bottom: var(--space-block); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-soft); } .reseller-map-canvas { height: 480px; /* Positron's water fill (#c2c8ca, the style's "water" layer), not its land * background #f2f3f0 — at world zoom the canvas is wider than the world, and * the spill-over past the 180th meridian should read as sea, as the old OSM * sea colour did. Never transparent, or the band's photograph shows through. */ background: #c2c8ca; } @media (max-width: 700px) { .reseller-map-canvas { height: 360px; } } /* Shown in place of the map when WebGL or MapLibre is unavailable (see * reseller-map.js). It fills the canvas, so the message sits in the middle of * the plate. Colours are explicit: the canvas beneath has no map to take them * from. #424242 on #f2f3f0 is about 9:1. */ .map-fallback { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #f2f3f0; color: var(--ink); } /* The brand-red teardrop pin. Drawn on ::after, NOT on the icon element: * Leaflet positions each marker with an inline transform on the element * itself, so a rotate() there is silently overwritten. * * ⚠ No `position` here. The element is already absolute via leaflet.css's * `.leaflet-marker-icon` — same (0,1,0) specificity, and styles.css loads * later, so a `position: relative` on .map-pin WINS and puts every marker * back into document flow: each pin lands at its flow offset plus Leaflet's * transform — right longitude, scrambled latitude. It shipped that way for * about ten minutes; the ::after anchors to the marker without it. */ .map-pin::after { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #fc0000; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } /* Leaflet paints a zoom button at its range limit #bbb — 1.75:1, and the world * view STARTS at min zoom, so "−" ships disabled. Same selector as leaflet.css, * later in the cascade. Still reads as dimmed next to the red live buttons, but * clears 3:1 on every surface Leaflet puts behind it. */ .leaflet-bar a.leaflet-disabled { color: #6f6f6f; } .leaflet-popup-content-wrapper { border-radius: var(--r-sm); } .map-popup-name { margin: 0; font-weight: var(--fw-bold); } .map-popup-addr { margin: 4px 0 0; font-size: var(--fs-xs); } /* The map starts inert under this button — a full-width interactive map is a * scroll trap on a phone and a wheel trap on a desktop; see reseller-map.js. * The label reuses .btn so its contrast never depends on the tiles behind the * scrim. Above Leaflet's controls (z-index 1000), safely inside .reseller-map's * own stacking context. */ .map-unlock { position: absolute; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; width: 100%; border: 0; padding: 0; font: inherit; background: rgba(0, 0, 0, 0.25); cursor: pointer; } .map-unlock .btn { pointer-events: none; } .map-unlock:hover .btn { background: var(--btn-bg-hover); } /* ---- Reseller directory (2026-10-11, #27) ---- */ /* The list under the map. It sits on the light .pp-section below the dark map * band (the pp layout), so it is flat: no plate, no padding, no radius, no * shadow. Its ink, heading and link colours come from the three shared * light-surface lists above, which name this class. * Columns: 1 below 360px, 2 from 360px, 3 from 1000px. */ .reseller-directory { margin-bottom: var(--space-block); } .reseller-directory h3 { margin: 0 0 6px; } .reseller-directory-lead { margin: 0 0 18px; } .reseller-directory-groups { columns: 1; column-gap: 28px; } @media (min-width: 360px) { .reseller-directory-groups { columns: 2; } } @media (min-width: 1000px) { .reseller-directory-groups { columns: 3; } } /* A lone group (the Finnish page: one country) takes the full width at every * viewport; the column rules above are for many groups. :has() is already used * in this stylesheet (the pp-pricing rules). */ .reseller-directory-groups:has(> :only-child) { columns: 1; } .reseller-directory-group { break-inside: avoid; margin: 0 0 18px; } .reseller-directory-group h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; } .reseller-directory ul { list-style: none; margin: 0; padding: 0; } .reseller-directory li { margin: 0 0 10px; overflow-wrap: anywhere; } .reseller-directory-place { display: block; font-size: var(--pp-fs-small); } /* ---- Product pages: list bullets (the original's gear glyph) ---------- */ .is-product .section ul:not(.nav-lang-list) { list-style: none; padding-left: 0; } .is-product .section ul:not(.nav-lang-list) > li { position: relative; padding-left: 30px; margin-block: 10px; } .is-product .section ul:not(.nav-lang-list) > li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---- Testimonials ------------------------------------------------------ */ /* Dark cards on a photo band, as measured. ⚠ The original is a CAROUSEL * showing 3 of 8; this is a grid showing all 8. Deliberate deviation — it * needs no JS, hides nothing from crawlers, and is keyboard-reachable. * Noted in PROJECT.md; say so rather than letting it read as fidelity. */ .testimonials { display: grid; gap: var(--space-block); grid-template-columns: repeat(3, minmax(0, 1fr)); } .testimonial { background: var(--band-dark); color: var(--on-dark); border-radius: var(--r); box-shadow: var(--shadow-card); padding: var(--space-block); text-align: center; display: flex; flex-direction: column; gap: var(--space-tight); } .testimonial h3 { color: #fff; margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); } /* Gold on --band-dark is 8.3:1 — the original used icon images at the same * hue, so this keeps the look and gains a text alternative. */ .testimonial-stars { color: #ffc400; letter-spacing: 2px; margin: 0; } .testimonial-body { flex: 1; } .testimonial-meta { display: flex; align-items: center; justify-content: center; gap: var(--space-tight); text-align: left; } .testimonial-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-xs); background: var(--surface); flex: 0 0 auto; } /* FIX: name band was #fff on #ff0000 = 4.00:1. --accent-deep = 4.53:1. */ .testimonial-name { display: inline-block; background: var(--accent-deep); color: #fff; padding: 8px 14px; border-radius: var(--r-xs); font-weight: var(--fw-bold); font-size: var(--fs-small); margin: 0; } .testimonial-name a { color: #fff; } /* FIX: occupation was #696969 on #2f2f2f = 2.44:1; --muted-on-dark is 4.53:1. */ .testimonial-role { color: var(--muted-on-dark); font-size: var(--fs-small); margin: 6px 0 0; } @media (max-width: 1000px) { .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .testimonials { grid-template-columns: 1fr; } } /* ---- Video ------------------------------------------------------------- */ .video-grid { display: grid; gap: var(--space-block); grid-template-columns: repeat(3, minmax(0, 1fr)); } .video { background: var(--footer); border-radius: var(--r); overflow: hidden; } .video-frame { position: relative; aspect-ratio: 16 / 9; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Click-to-play facade — see build.mjs. Nothing loads from Google until this * button is pressed. */ .video-facade { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; } .video-facade img { width: 100%; height: 100%; object-fit: cover; } .video-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 12px; background: var(--accent-deep); } .video-play::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; } .video-facade:hover .video-play { background: #c40000; } .video-title { padding: 12px var(--space-tight); color: #fff; font-size: 13.6px; } @media (max-width: 1000px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } } /* ---- Article / blog ---------------------------------------------------- */ .article { max-width: 800px; margin-inline: auto; } .article img { border-radius: var(--r); } .article ul, .article ol { padding-left: 1.4em; } .article li + li { margin-top: 8px; } .entry-meta { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--space-block); } .post-list { display: grid; gap: var(--space-block); grid-template-columns: repeat(3, minmax(0, 1fr)); } .post-card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-soft); overflow: hidden; } .post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .post-card-body { padding: var(--space-block); } .post-card h2 { font-size: var(--fs-h2-card); line-height: var(--lh-h2-card); } @media (max-width: 1000px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .post-list { grid-template-columns: 1fr; } } /* The hashtag-style tag links under each article. These are deliberate SEO * structure — see CLAUDE.md. Do not remove because they look decorative. */ .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-block); } .tag-list a { font-size: var(--fs-tag); font-weight: var(--fw-bold); padding: 6px 14px; border-radius: var(--r-pill); background: var(--page); border: 1px solid var(--rule); text-decoration: none; } /* ---- Footer ------------------------------------------------------------ */ .site-footer { background: var(--footer); color: var(--on-dark); padding-block: var(--space-block); /* Client, 2026-09-01: smaller footer type. One step down from the 17px body * (still ≥ 4.5:1 for every colour in here — the AA threshold is the same). */ font-size: var(--fs-small); } .site-footer a { color: var(--link-on-dark); } /* Column 1 carries the logo, the address AND the contact details, so it gets * the extra width. Columns 2 and 3 are the two funding logos. */ .footer-grid { display: grid; gap: var(--space-block); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; } /* One class for BOTH funding logos — they link to the same page and must not * drift apart. inline-block so the link's hit area is the image, not the * full-width line box a bare inline would give it. */ .footer-logo { display: inline-block; margin-top: var(--space-tight); } .footer-logo img { display: block; } .footer-cols { display: grid; gap: var(--space-block); grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-title { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); text-transform: uppercase; color: var(--on-dark); } .site-footer img { max-width: 200px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: var(--space-block); padding-top: var(--space-block); display: flex; flex-wrap: wrap; gap: var(--space-tight); justify-content: space-between; align-items: center; font-size: var(--fs-xs); } /* FIX: "Created with ♥ by" was #696969 on #191919 = 3.20:1. */ .footer-credit { color: var(--muted-on-dark); } @media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .footer-grid, .footer-cols { grid-template-columns: 1fr; } } /* ---- Forms ------------------------------------------------------------- */ .form { display: grid; gap: var(--space-tight); } .form fieldset { border: 1px solid var(--rule); border-radius: var(--r); padding: var(--space-block); margin: 0; } .form legend { font-weight: var(--fw-bold); padding-inline: 8px; } .form-row { display: grid; gap: var(--space-tight); grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-field { display: grid; gap: 6px; } .form-field label { font-size: var(--fs-small); font-weight: var(--fw-bold); } .form-field .req { color: var(--accent-deep); } .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid #c9c9c9; border-radius: var(--r-sm); padding: 12px 14px; width: 100%; } .form textarea { min-height: 140px; resize: vertical; } .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--accent-deep); } .form-options { display: grid; gap: 10px; } .form-check { display: flex; gap: 10px; align-items: flex-start; } .form-check input { margin-top: 4px; flex: 0 0 auto; } /* The honeypot. Must be reachable by nothing a human uses, and invisible * without display:none (some bots skip display:none fields). */ .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* The site-wide button, from the E-SQ5 design (2026-10-10). Uppercase, one red * (#c60000, 6.17:1 under white; hover #a90000, 7.82:1). `a.btn` gets an arrow * from ::after; a