/* KaaKau site styles — the ONLY stylesheet (Webflow CSS fully removed 2026-06-08). Semantic kaakau-* classes + design tokens, no !important. */ /* Base reset — Webflow's CSS used to provide these; restored here after dropping it. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--kaakau-font, Geist, system-ui, sans-serif); color: var(--kaakau-text, #1a1925); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Sticky footer: short pages stretch their main so the footer meets the viewport bottom on tall displays (Joona 2026-07-11). Pages that wrap content in a div (homepage .kaakau-page) are long anyway and flex:1 is inert on a main that isn't a flex child. */ body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } img { max-width: 100%; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* hide donkey announcement banners */ .banner, .banner-hide { display: none; } /* footer logo: white on the dark footer */ .footer2_logo { filter: brightness(0) invert(1); } /* ── Fluid root scale (Donkey's real formula). The whole site is sized in rem, so this single rule scales every page with viewport width (~16px at 1440w, ~18px at 1920w). It lived only in the frontpage's inline styles until 2026-07-16, which made every OTHER page render ~4-5% smaller on wide screens. Canonical here; do not re-add per-page copies. ─────────────────── */ html { font-size: calc(0.625rem + 0.4166666666666667vw); } @media screen and (max-width: 1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } } @media screen and (max-width: 479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } } /* ── Design tokens (captured from donkey.bike as the visual reference, NOT imported from it) ──── */ :root { /* Orange = the CTA accent only (Lataa sovellus / Vuokraa pyörä). */ --kaakau-orange: #ff6400; --kaakau-orange-dark: #e65a00; --kaakau-orange-tint: #fff4ee; /* Blue = the KaaKau brand/identity colour (kaakau.fi's real header/footer navy #2d3545). Drives the header, footer, section surfaces and product cards. */ --kaakau-blue: #2d3545; --kaakau-blue-deep: #232a37; /* hover / depth */ --kaakau-blue-tint: #dbe3ee; /* light blue chips & icon backers (replaces the orange tint) */ --kaakau-navy: #1a1925; --kaakau-grey: #989797; /* donkey's secondary-button grey (--grey-title) */ --kaakau-grey-dark: #7d7c7c; --kaakau-radius: 0.675rem; /* donkey's --_ui-styles---radius--large */ --kaakau-radius-sm: 0.625rem; --kaakau-radius-card: 1.25rem; /* donkey hero/card corner radius */ --kaakau-surface: #eaeef4; /* pale blue (was warm grey #f6f4f1) — cooler, less clinical */ --kaakau-surface-light: #f4f6fa; /* section-background tint: lighter than surface so grey cards still read on it */ --kaakau-text: #1a1925; --kaakau-font: Geist, system-ui, sans-serif; /* Hero photo (CMS Hero-kuva) greyed treatment: grayscale + low opacity on the grey surface. 0.25 made the hero paragraph too hard to read against busy photos (Joona 2026-07-08). */ --kaakau-heroimg-opacity: 0.18; --kaakau-heroimg-filter: grayscale(1); } /* ── Layout primitives (migrated from donkey's container-large / padding-global / section padding). Own classes, so sections built on these no longer touch the Webflow CSS. ───────────────────── */ .kaakau-container { width: 100%; max-width: 80rem; margin-inline: auto; } .kaakau-section { padding-block: 4rem; } .kaakau-section-pad { padding-inline: 5%; } /* ── KaaKau buttons ────────────────────────────────────────────────────────────────────────── Our own classes, modelled on donkey's button look but defined from scratch so nothing is overridden and no !important is needed. Apply these instead of donkey's .button/.w-button. */ .kaakau-btn { display: inline-block; background: var(--kaakau-orange); color: #fff; border: 1px solid transparent; border-radius: var(--kaakau-radius); padding: 0.5rem 1rem; font: 500 0.9375rem/1.333 var(--kaakau-font); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s, transform 0.2s; } .kaakau-btn:hover { background: var(--kaakau-orange-dark); color: #fff; transform: translateY(-1px); } .kaakau-btn--secondary { background: var(--kaakau-grey); color: #fff; } .kaakau-btn--secondary:hover { background: var(--kaakau-grey-dark); color: #fff; } .kaakau-btn--outline { background: transparent; color: var(--kaakau-orange); border-color: var(--kaakau-orange); } .kaakau-btn--outline:hover { background: var(--kaakau-orange-tint); color: var(--kaakau-orange); transform: none; } .kaakau-btn--ghost { background: transparent; color: var(--kaakau-orange); border-color: var(--kaakau-orange); } .kaakau-btn--ghost:hover { background: var(--kaakau-orange-tint); color: var(--kaakau-orange); transform: none; } .kaakau-btn--sm { padding: 0.4rem 0.85rem; font-size: 0.875rem; } /* responsive show/hide (donkey used is-mobile / is-desktop for the dual app-store links) */ .kaakau-btn--mobile { display: none; } @media (max-width: 767px) { .kaakau-btn--desktop { display: none; } .kaakau-btn--mobile { display: inline-block; } } /* Language toggle (the "FI" selector) — sized to sit level with the header buttons (donkey made it a tiny aspect-ratio:1 square, which is why it looked off). Own class; w-dropdown JS unchanged. */ .kaakau-langtoggle { display: inline-flex; align-items: center; justify-content: center; background: var(--kaakau-orange); color: #fff; border: 1px solid var(--kaakau-orange); border-radius: var(--kaakau-radius); padding: 0.4rem 0.85rem; min-width: 2.5rem; font: 500 0.875rem/1.333 var(--kaakau-font); cursor: pointer; } /* ── Hero (migrated from donkey section_header1 / header1_content). Own classes. ─────────────── */ .kaakau-hero { padding: 6.5rem 5% 2.5rem; } .kaakau-hero__card { background: var(--kaakau-surface); border-radius: var(--kaakau-radius-card); display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 36.25rem; /* NO overflow:clip here — the phone is taller than the card (38rem vs 36.25rem) and is bottom-anchored, so its top intentionally spills ~1.75rem above the box, mirroring donkey.bike's .header1_content / .header1_image. Re-clipped at mobile below. */ } /* Hero photo variant (Helsinki's Hero-kuva from the CMS): greyed grayscale/faded background on the grey card. ::before carries its own border-radius because the card is deliberately NOT clipped (phone breakout); children get z-index so text/phone stay above the photo. Knobs: --kaakau-heroimg-* in the :root token block. */ .kaakau-hero__card--img { position: relative; } .kaakau-hero__card--img::before { content: ""; position: absolute; inset: 0; border-radius: var(--kaakau-radius-card); background-image: var(--hero-img); background-size: cover; background-position: center; filter: var(--kaakau-heroimg-filter); opacity: var(--kaakau-heroimg-opacity); } .kaakau-hero__card--img > * { position: relative; z-index: 1; } .kaakau-hero__content { display: flex; flex-direction: column; align-items: flex-start; padding: 3rem; } .kaakau-hero__media { position: relative; align-self: stretch; min-height: 36.25rem; } /* Sized by max-height (not height:100%) so it can exceed the card and break out, like donkey's .header1_image: object-fit:contain, max-height:38rem, anchored bottom-right. */ .kaakau-hero__phone { position: absolute; inset: auto 0 0 auto; max-width: none; max-height: 38rem; object-fit: contain; border-bottom-right-radius: var(--kaakau-radius-card); } /* Dark DR logo above the hero heading (Santtu 2026-07-11). Fixed w/h attrs are fine here: height is set in CSS and width:auto follows — no object-fit sizing in play (cf. the phone img). */ .kaakau-hero__drlogo { height: 2.275rem; width: auto; margin-bottom: 1.5rem; } /* 1.3x (Joona 2026-07-11) */ .kaakau-h1 { margin: 0 0 2rem; font: 500 3.9375rem/1.063 var(--kaakau-font); letter-spacing: -0.04em; color: var(--kaakau-text); } .kaakau-lead { margin: 0 0 2rem; max-width: 38ch; font: 300 1.0625rem/1.45 var(--kaakau-font); color: var(--kaakau-text); } .kaakau-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } @media (max-width: 991px) { /* NOTE: the mobile .kaakau-main padding-top lives in the later @media block below, so it wins over the 14rem desktop base rule (which is declared after this block). */ .kaakau-hero { padding-top: 0.5rem; } .kaakau-hero__card { grid-template-columns: 1fr; min-height: 0; overflow: clip; } .kaakau-hero__content { padding: 2rem 1.5rem; order: 1; } .kaakau-hero__media { min-height: 22rem; order: 2; } .kaakau-hero__phone { max-height: 22rem; } /* contained in the stacked layout, no spill */ .kaakau-h1 { font-size: 2.6rem; } } /* ── Ratings strip (migrated from donkey section_logo1 / logo1_list). ───────────────────────── */ .kaakau-ratings { padding: 1rem 5% 1.5rem; } .kaakau-ratings__inner { background: var(--kaakau-surface); border-radius: var(--kaakau-radius); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.2rem 4rem; } .kaakau-rating { display: flex; align-items: center; gap: 1rem; filter: saturate(0); font-size: 0.9375rem; color: var(--kaakau-text); } .kaakau-rating img { height: 1.5625rem; width: auto; display: block; } @media (max-width: 767px) { .kaakau-ratings__inner { justify-content: center; padding: 1.2rem 1.5rem; } } /* ── How-it-works (migrated from donkey section_layout495 / grid-image-center-icons-sides). ──── */ .kaakau-howto { padding: 4rem 5%; } .kaakau-howto__title { text-align: center; margin: 0 0 2.5rem; font: 500 2.6875rem/0.95 var(--kaakau-font); color: var(--kaakau-blue); } .kaakau-howto__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px 75px; align-items: center; } .kaakau-howto__col { display: grid; gap: 3.75rem; } .kaakau-howto__step { background: var(--kaakau-surface); border-radius: 10px; padding: 1.25rem 1.5rem; } .kaakau-howto__step h3 { margin: 0 0 0.75rem; font: 500 1.25rem/1.1 var(--kaakau-font); color: var(--kaakau-text); } .kaakau-howto__step p { margin: 0; font: 400 1.0625rem/1.5 var(--kaakau-font); color: #303544; } /* How-it-works phone: fading carousel of KaaKau's Finnish app screenshots (replaces the Donkey lottie animation; cycled by an inline script, respects prefers-reduced-motion). */ .kaakau-hiw-slider { position: relative; height: 30rem; display: flex; align-items: center; justify-content: center; } .kaakau-hiw-slide { position: absolute; max-height: 100%; max-width: 100%; width: auto; opacity: 0; transition: opacity .6s ease; } .kaakau-hiw-slide.is-active { opacity: 1; } @media (max-width: 991px) { .kaakau-howto__grid { grid-template-columns: 1fr; gap: 2.5rem; justify-items: center; text-align: center; } #kaakau-hiw { order: -1; } } /* ── Map section + value-prop features (migrated from donkey section_map / map_card). ───────── */ .kaakau-mapsec { padding: 4rem 5%; } .kaakau-mapsec__card { background: var(--kaakau-surface); border-radius: var(--kaakau-radius); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; } .kaakau-mapsec__map { display: flex; } .kaakau-mapsec__canvas { height: 100%; min-height: 26rem; width: 100%; border-radius: 0; } .kaakau-mapsec__content { display: flex; flex-direction: column; justify-content: center; padding: 3rem; } /* overflow-wrap + hyphens so the long compound word "Kaupunkipyöräverkosto" wraps/hyphenates instead of overflowing narrow screens (html lang="fi" enables Finnish hyphenation). */ .kaakau-mapsec__content h2 { margin: 0 0 1.5rem; font: 500 2.6875rem/0.95 var(--kaakau-font); color: var(--kaakau-blue); overflow-wrap: break-word; hyphens: auto; } .kaakau-mapsec__content p { margin: 0 0 2rem; font: 300 1.0625rem/1.45 var(--kaakau-font); color: var(--kaakau-text); } /* Four value facts — own section under the hero (moved out of the map section 2026-07-09, Santtu change-list #6). */ .kaakau-factsec { padding: 0 5% 1rem; } .kaakau-factsec .kaakau-features { margin-top: 0; } .kaakau-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.0625rem; margin-top: 2rem; } .kaakau-feature { display: flex; align-items: center; gap: 1.25rem; background: var(--kaakau-surface); border-radius: var(--kaakau-radius); padding: 0.5625rem 1.5625rem 0.5625rem 0.5625rem; font: 300 1rem/1.35 var(--kaakau-font); color: var(--kaakau-text); } /* Icon accent: orange to match the Lataa sovellus / Vuokraa pyörä buttons (change-list item 6). */ /* Icon chip: KaaKau blue background, white icon (Joona 2026-07-09: orange was pulling attention from the Lataa sovellus CTA; orange stays reserved for actions). SVGs draw with currentColor. */ .kaakau-feature__icon { flex: none; width: 3.875rem; height: 3.875rem; display: flex; align-items: center; justify-content: center; border-radius: var(--kaakau-radius-sm); background: var(--kaakau-blue); color: #fff; } .kaakau-feature__icon svg { width: 1.5rem; height: 1.75rem; } @media (max-width: 991px) { .kaakau-mapsec__card { grid-template-columns: 1fr; } .kaakau-mapsec__canvas { min-height: 22rem; } .kaakau-features { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .kaakau-features { grid-template-columns: 1fr; } .kaakau-mapsec__content { padding: 2rem 1.5rem; } /* tighter padding gives the title more room */ .kaakau-mapsec__content h2 { font-size: 2rem; } /* smaller so the long title fits the phone */ } /* ── Image marquee (migrated from donkey section_banner16; donkey scrolled it via the Webflow runtime we removed, so this is now a pure-CSS scroll — each row's images are duplicated once so translateX(-50%) loops seamlessly). ──────────────────────────────────────────────────────── */ .kaakau-marquee { padding: 4rem 0; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; } .kaakau-marquee__row { display: flex; width: max-content; } .kaakau-marquee__row--a { animation: kaakau-marquee-l 60s linear infinite; } .kaakau-marquee__row--b { animation: kaakau-marquee-r 60s linear infinite; } /* each image owns its trailing gap (margin, not flex gap) so one duplicated set == exactly 50% of the track width -> translateX(-50%) loops with no jump. */ .kaakau-marquee__img { flex: none; width: 16.625rem; height: 13.6875rem; margin-right: 1rem; border-radius: var(--kaakau-radius-sm); object-fit: cover; } @keyframes kaakau-marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes kaakau-marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .kaakau-marquee__row { animation: none; } } /* ── Tabs: advertise / company membership (migrated from donkey section_feature / w-tabs). ───── */ .kaakau-tabs { padding: 4rem 5%; background: var(--kaakau-surface); } /* Tabless variant of the same band: one kaakau-tabs__card on the light surface (/yritysjasenyydet, /kaupungeille). Roomier than .kaakau-tabs because there is no tab nav above the card. NOT .kaakau-feature — that name is taken by the homepage fact chips. */ .kaakau-band { padding: 7rem 5%; background: var(--kaakau-surface); } @media (max-width: 991px) { .kaakau-band { padding: 3.5rem 5%; } } .kaakau-tabs__nav { max-width: 30rem; margin: 0 auto 3rem; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid #edeef1; border-radius: 100px; padding: 6px; } .kaakau-tabs__tab { background: none; border: 0; cursor: pointer; padding: 0.6rem 1rem; border-radius: 100px; font: 500 0.95rem/1.2 var(--kaakau-font); color: var(--kaakau-text); transition: background-color 0.2s, color 0.2s; } .kaakau-tabs__tab.is-active { background: var(--kaakau-blue-tint); color: var(--kaakau-blue); } .kaakau-tabs__pane { display: none; } .kaakau-tabs__pane.is-active { display: block; } /* Tab cards: text half on WHITE (focus, Joona 2026-07-09), image fills the other half. Columns stretch (not center) so the white panel spans the full card height; the body flexbox recenters its content. Image side alternates by source order (tab 1: body+img, tab 2: img+body). */ .kaakau-tabs__card { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: transparent; border-radius: var(--kaakau-radius); overflow: hidden; } .kaakau-tabs__card--noimg { grid-template-columns: 1fr; } /* no usage image for this city: text only, never a photo from elsewhere */ /* /hinnat page: city picker above the pricing grids. */ .kaakau-hinnat__picker { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; } .kaakau-hinnat__picker label { font: 500 1rem/1.2 var(--kaakau-font); color: var(--kaakau-text); } /* Own chevron (appearance:none): the native arrow differs per browser and the frontpage's inherited Donkey normalize strips it entirely (select{-webkit-appearance:none}), so the class draws its own. */ .kaakau-hinnat__select { font: 500 1rem/1.2 var(--kaakau-font); color: var(--kaakau-text); padding: 0.6rem 2.6rem 0.6rem 1rem; border-radius: var(--kaakau-radius); border: 1px solid #d8dde6; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231a1925' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 0.75rem auto; cursor: pointer; appearance: none; -webkit-appearance: none; } /* Usage rules inside the tab card (old two-col style): stacked title/text blocks in the body. */ .kaakau-usage__block { margin: 0 0 1.5rem; } .kaakau-usage__block h3 { margin: 0 0 0.5rem; font: 500 1.25rem/1.25 var(--kaakau-font); color: var(--kaakau-blue); } .kaakau-usage__block p { margin: 0; font: 300 1.0625rem/1.5 var(--kaakau-font); color: var(--kaakau-text); } /* City usage rules (Pyörien käyttö): step cards on the CITY pages. auto-fit handles 2-4 steps gracefully; image per step optional. */ /* (The plain city usage-step grid is gone since 2026-09-07: city pages use the UsageTabs card.) */ .kaakau-tabs__body { padding: 3rem; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .kaakau-tabs__body h2 { margin: 0 0 1rem; font: 500 2.2rem/1.05 var(--kaakau-font); color: var(--kaakau-blue); } .kaakau-tabs__body p { margin: 0 0 2rem; font: 300 1.0625rem/1.5 var(--kaakau-font); color: var(--kaakau-text); } .kaakau-tabs__img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; display: block; } @media (max-width: 991px) { .kaakau-tabs__card { grid-template-columns: 1fr; } .kaakau-tabs__img { min-height: 16rem; order: -1; } } /* ── Footer (migrated from donkey footer_wrapper / footer2_*). ──────────────────────────────── */ .kaakau-footer { background: var(--kaakau-blue); color: #fff; padding: 4rem 5% 2rem; } .kaakau-footer__inner { max-width: 80rem; margin-inline: auto; } .kaakau-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 2.5rem; } .kaakau-footer__brand img { height: 2.25rem; width: auto; display: block; filter: brightness(0) invert(1); margin-bottom: 1.5rem; } /* Donkey Republic logo under the KaaKau logo (already white; skip the invert filter). Wide wordmark, so shorter than the KaaKau logo. */ .kaakau-footer__brand img.kaakau-footer__drlogo { height: 2.25rem; filter: none; } /* 1.5x (Joona 2026-07-11) */ /* "yhteistyössä" lockup: inline-flex wrapper shrinks to the widest logo, the coop line stretches to that width and centers on it (block itself stays left-aligned). Visual gaps 1rem above / 1.5rem below (Joona 2026-07-16); the -0.5rem top offsets the KaaKau logo's 1.5rem bottom margin. */ .kaakau-footer__brandlock { display: inline-flex; flex-direction: column; align-items: flex-start; } .kaakau-footer__coop { align-self: stretch; text-align: center; margin: -0.5rem 0 1.5rem; font: 300 0.8rem/1 var(--kaakau-font); color: rgba(255,255,255,0.65); } .kaakau-footer__col h4 { color: var(--kaakau-orange); font: 600 0.95rem/1.3 var(--kaakau-font); margin: 0 0 1rem; } .kaakau-footer__col a { display: block; color: #fff; text-decoration: none; padding: 0.3rem 0; font-size: 0.95rem; } .kaakau-footer__col a:hover { color: var(--kaakau-orange); } .kaakau-footer__divider { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: 2.5rem 0 1.5rem; } .kaakau-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: #fff; } .kaakau-footer__social { display: flex; gap: 1rem; } .kaakau-footer__social img { width: 1.5rem; height: 1.5rem; display: block; } @media (max-width: 991px) { .kaakau-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .kaakau-footer__top { grid-template-columns: 1fr; } } /* ── Pre-footer contact band (content imported from kaakau.fi), shown on every page. ────────── */ .kaakau-prefooter { background: var(--kaakau-surface); padding: 3rem 5%; } .kaakau-prefooter__grid { max-width: 80rem; margin-inline: auto; display: grid; grid-template-columns: 1.7fr 1fr; gap: 2.5rem; align-items: center; } .kaakau-prefooter h3 { margin: 0 0 0.75rem; font: 500 1.6rem/1.15 var(--kaakau-font); color: var(--kaakau-text); } .kaakau-prefooter p { margin: 0; max-width: 56ch; font: 300 1.0625rem/1.5 var(--kaakau-font); color: var(--kaakau-text); } .kaakau-prefooter__contact { display: flex; flex-direction: column; gap: 0.35rem; } .kaakau-prefooter__label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6d767e; } .kaakau-prefooter__phone { font: 600 1.9rem/1 var(--kaakau-font); color: var(--kaakau-orange); text-decoration: none; } .kaakau-prefooter__phone:hover { color: var(--kaakau-orange-dark); } .kaakau-prefooter__contact a:not(.kaakau-prefooter__phone) { color: var(--kaakau-text); text-decoration: none; } .kaakau-prefooter__contact a:not(.kaakau-prefooter__phone):hover { color: var(--kaakau-orange); } @media (max-width: 767px) { .kaakau-prefooter__grid { grid-template-columns: 1fr; gap: 1.25rem; } } /* Header: 1rem breathing space above the navbar (requested). The donkey navbar is position:fixed, so this offsets it from the top edge. */ .navbar13_component { top: 1rem; } /* station map */ #kaakau-map { height: 520px; width: 100%; border-radius: 16px; overflow: hidden; background: #edeef1; } .sm-marker { width: 16px; height: 16px; border-radius: 50%; background: #ff6400; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; } .sm-marker--empty { background: #9197a7; } .sm-marker--bike { width: 11px; height: 11px; border-width: 1.5px; } /* a free-floating bike (free_bike_status), smaller than a station */ .maplibregl-popup-content { border-radius: 10px; font-family: Geist, system-ui, sans-serif; } /* Cities-overview map popup: opens on hover/tap, the city name IS the link (cities-map.js). */ .kaakau-mappop .maplibregl-popup-content { padding: 0.5rem 0.875rem; font-size: 0.9375rem; } .kaakau-mappop__link { color: var(--kaakau-orange); text-decoration: none; font-weight: 600; } .kaakau-mappop__link:hover { text-decoration: underline; } /* ── Header / navbar — fully migrated to KaaKau classes (no Webflow navbar). A centered bar with a 2rem gap above it on desktop (1rem on mobile, below); cities + language dropdowns and the mobile menu are toggled by nav.js. ──── */ .kaakau-nav { position: fixed; top: 2rem; left: 0; right: 0; z-index: 100; padding-inline: 5%; } .kaakau-nav__bar { position: relative; max-width: 80rem; margin-inline: auto; background: var(--kaakau-blue); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--kaakau-radius); box-shadow: 0 8px 28px rgba(45,53,69,0.22); display: flex; align-items: center; gap: 1.5rem; padding: 0.6rem 1.25rem; min-height: 64px; } .kaakau-nav__logo img { height: 34px; width: auto; display: block; } .kaakau-nav__menu { display: flex; align-items: center; justify-content: center; gap: 1.75rem; flex: 1; } /* white on the blue bar (desktop); re-darkened inside the white mobile menu panel below */ .kaakau-nav__link { color: #fff; text-decoration: none; font: 500 0.95rem/1 var(--kaakau-font); background: none; border: 0; cursor: pointer; padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.35rem; } .kaakau-nav__link:hover { color: var(--kaakau-orange); } /* "Tuki" ghost button reads as a quiet light outline on the blue bar (orange reserved for the CTA) */ .kaakau-nav .kaakau-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.45); } .kaakau-nav .kaakau-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; } .kaakau-nav__right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } .kaakau-nav__menu-cta { display: none; } .kaakau-dropdown { position: relative; } .kaakau-dropdown__panel { display: none; } .kaakau-dropdown__chev { font-size: 0.7em; transition: transform 0.2s; } .kaakau-dropdown.is-open .kaakau-dropdown__chev { transform: rotate(180deg); } /* Cities mega-panel spans the full bar width */ .kaakau-citydrop { position: static; } /* left/right -1px: the bar has a 1px border and absolute children position from its padding box, so at 0 the panel sat 1px inside the bar's outer edge (and the hero card's, which shares the 80rem container width). Pull it out by the border width so the three edges coincide. */ .kaakau-citydrop > .kaakau-dropdown__panel { position: absolute; left: -1px; right: -1px; top: 100%; margin-top: 0.75rem; background: #fff; border: 1px solid #edeef1; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.1); grid-template-columns: 3fr 1fr; gap: 1.5rem; padding: 1.5rem; } .kaakau-citydrop.is-open > .kaakau-dropdown__panel { display: grid; } .kaakau-cities-menu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 22px; align-content: start; } .kaakau-cities-title { grid-column: 1 / -1; font-weight: 700; color: var(--kaakau-text); margin-bottom: 6px; font-family: var(--kaakau-font); text-decoration: none; } /* a link to /kaupungit since 2026-09-07 */ .kaakau-cities-title:hover { color: var(--kaakau-orange); } .kaakau-city { color: var(--kaakau-text); text-decoration: none; padding: 5px 0; font-size: 15px; font-family: var(--kaakau-font); } .kaakau-city:hover { color: var(--kaakau-orange); } .kaakau-citycard { display: flex; flex-direction: column; gap: 0.5rem; background: var(--kaakau-surface); border-radius: 12px; padding: 1rem; text-decoration: none; } .kaakau-citycard img { width: 100%; height: auto; border-radius: 8px; } .kaakau-citycard__body { display: flex; flex-direction: column; } .kaakau-citycard__body strong { color: var(--kaakau-text); } .kaakau-citycard__body span { color: #6d767e; font-size: 0.9rem; } /* Language dropdown */ .kaakau-langselect > .kaakau-dropdown__panel { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; min-width: 5rem; background: #fff; border: 1px solid #edeef1; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); padding: 0.4rem; } .kaakau-langselect.is-open > .kaakau-dropdown__panel { display: block; } .kaakau-langselect__panel a { display: block; padding: 0.4rem 0.75rem; color: var(--kaakau-text); text-decoration: none; border-radius: 6px; } .kaakau-langselect__panel a:hover { background: var(--kaakau-surface); color: var(--kaakau-orange); } .kaakau-langtoggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; } /* Hamburger */ .kaakau-nav__burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; cursor: pointer; } .kaakau-nav__burger span { display: block; width: 20px; height: 2px; background: #fff; transition: transform 0.2s, opacity 0.2s; } .kaakau-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .kaakau-nav__burger.is-open span:nth-child(2) { opacity: 0; } .kaakau-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Homepage still uses donkey's page-wrapper/main-wrapper; neutralise their fixed-navbar clearance now that the header is an in-flow KaaKau component. */ /* Page + main shells (migrated from donkey page-wrapper / main-wrapper). main is a white card with a rounded bottom over the dark footer; top padding clears the fixed header (~5.5rem). */ .kaakau-page { overflow-x: clip; } /* Airy top space below the fixed header (desktop): ~6.5rem to clear the header (which sits 2rem from the top) + ~7.5rem of Donkey-style breathing room. The generous gap is the "airy look" and also gives the hero phone plenty of room to break out above its card. Mobile resets this. */ .kaakau-main { position: relative; background: #fff; padding-top: 14rem; border-bottom-left-radius: var(--kaakau-radius); border-bottom-right-radius: var(--kaakau-radius); } .kaakau-hero { padding-top: 0.5rem; } /* City page: hero + station map. Hero = frontpage-style split card (2026-07-19 redesign): text left, crisp city photo right — replaced the greyed photo faded behind the text, which washed out both, and gave photo-less cities a bare unstyled headline block. */ /* Hero card variants (refined plan 2026-09-07, HeroCard.astro). --phone: the frontpage look, the phone spills above the card (no clip). --photo: the city's own crisp photo fills the right column (clipped). --single: no right column, text on the greyed background. */ .kaakau-hero__card--photo { overflow: clip; } .kaakau-hero__media--photo { position: relative; align-self: stretch; } .kaakau-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kaakau-hero__card--single { grid-template-columns: 1fr; min-height: 0; } .kaakau-hero__card--single .kaakau-hero__content { max-width: 44rem; padding: 4rem 3rem; } /* City pages: the layout's main already clears the header (no top padding), a smaller h1, and the photo variant at the city height. */ .kaakau-cityhero { padding: 0 5% 1.5rem; } .kaakau-cityhero .kaakau-h1 { font-size: 3rem; } .kaakau-cityhero .kaakau-hero__card--photo, .kaakau-cityhero .kaakau-hero__media--photo { min-height: 28rem; } @media (max-width: 991px) { .kaakau-cityhero .kaakau-hero__media--photo { min-height: 16rem; order: 2; } } .kaakau-citymap { padding: 2.5rem 5% 4rem; } .kaakau-citymap h2 { margin: 0 0 1rem; font: 500 2rem/1 var(--kaakau-font); color: var(--kaakau-blue); text-align: center; } .kaakau-citymap p { margin: 0 auto 1.5rem; max-width: 60ch; font: 300 1.0625rem/1.5 var(--kaakau-font); color: var(--kaakau-text); text-align: center; } /* Unified centered section heads on city pages (matches the pricing head; was mixed left/center) */ /* General H2 (e.g. /ohjeet/ landing) */ .kaakau-h2 { margin: 0 0 1rem; font: 500 2rem/1.1 var(--kaakau-font); color: var(--kaakau-blue); } @media (max-width: 991px) { .kaakau-nav { top: 1rem; } /* the 2rem above-header margin is desktop-only */ .kaakau-main { padding-top: 9rem; } /* desktop's airy 14rem is too big on phones; ~half the gap. After the base rule, so this wins. */ .kaakau-nav__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.5rem; flex-direction: column; align-items: stretch; gap: 0.25rem; background: #fff; border: 1px solid #edeef1; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.1); padding: 1rem; max-height: calc(100dvh - 6rem); overflow-y: auto; } .kaakau-nav__menu.is-open { display: flex; } .kaakau-nav__menu .kaakau-nav__link { color: var(--kaakau-text); } /* dark on the white mobile panel */ .kaakau-nav__burger { display: inline-flex; } .kaakau-nav__desktop { display: none; } .kaakau-nav__menu-cta { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .kaakau-citydrop > .kaakau-dropdown__panel { position: static; box-shadow: none; border: 0; padding: 0; margin-top: 0.5rem; grid-template-columns: 1fr; } .kaakau-cities-menu { grid-template-columns: repeat(2, 1fr); } .kaakau-citycard { display: none; } } /* ── Pricing section (real kaakau.fi plans: paivapassi / kausipassi / kuukausijasenyys) ───────── */ .kaakau-pricing { padding: 4rem 5%; } /* section stays white; card shades carry the grouping (2026-07-11) */ .kaakau-pricing__head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; } .kaakau-pricing__title { margin: 0 0 1rem; font: 500 2.6875rem/0.95 var(--kaakau-font); color: var(--kaakau-blue); } .kaakau-pricing__lead { margin: 0; font: 300 1.0625rem/1.5 var(--kaakau-font); color: #303544; } .kaakau-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .kaakau-plan { position: relative; display: flex; flex-direction: column; background: var(--kaakau-surface); border: 1px solid transparent; border-radius: var(--kaakau-radius-card); padding: 2rem; } .kaakau-plan--featured { background: #fff; border-color: var(--kaakau-blue); box-shadow: 0 18px 44px rgba(45, 53, 69, 0.18); } /* Explicit card backgrounds (Helsinki pricing design 2026-07-10): white = pay-per-use family (subtle border, no featured drama), gray = the .kaakau-plan default. Orange only via __name--accent on the base product. */ /* One shade per purchase type (2026-07-11): white = base product, lightest blue = päiväpassit, subtle gradient = jäsenyys (deepest without losing text contrast — Joona/Santtu test-reader round). 'harmaa' legacy value keeps the .kaakau-plan default surface. */ .kaakau-plan--white { background: #fff; border-color: #edeef1; } .kaakau-plan--blue-light { background: var(--kaakau-surface-light); } .kaakau-plan--blue { background: linear-gradient(160deg, var(--kaakau-blue-tint) 0%, #c9d7ea 100%); } .kaakau-plan--orange { background: linear-gradient(160deg, var(--kaakau-orange-tint) 0%, #ffe6d6 100%); } /* pale orange for jäsenyys (2026-07-11, blue read too dark) */ /* Base product (titleAccent): thicker orange border so it stands out from the white family. */ .kaakau-plan--base { border: 2px solid var(--kaakau-orange); } .kaakau-plan__name.kaakau-plan__name--accent { color: var(--kaakau-orange); } .kaakau-pricing__footnote { margin: 2rem 0 0; text-align: center; font: 400 1.0625rem/1.6 var(--kaakau-font); color: #4a5160; } .kaakau-pricing__footnote a { color: var(--kaakau-blue); text-decoration: underline; text-underline-offset: 0.15em; } .kaakau-pricing__footnote a:hover { color: var(--kaakau-orange); } .kaakau-plan__badge { position: absolute; top: -0.85rem; left: 2rem; background: var(--kaakau-blue); color: #fff; font: 500 0.8125rem/1 var(--kaakau-font); padding: 0.45rem 0.85rem; border-radius: 999px; } .kaakau-plan__name { margin: 0 0 0.75rem; font: 500 1.5rem/1.05 var(--kaakau-font); color: var(--kaakau-text); } .kaakau-plan__price { margin: 0 0 0.75rem; display: flex; align-items: baseline; gap: 0.4rem; } .kaakau-plan__amount { font: 600 2.25rem/1 var(--kaakau-font); color: var(--kaakau-blue); } .kaakau-plan__period { font: 400 1rem/1 var(--kaakau-font); color: var(--kaakau-grey-dark); } .kaakau-plan__tagline { margin: 0 0 1.25rem; font: 300 1rem/1.45 var(--kaakau-font); color: #303544; } .kaakau-plan__features { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; } .kaakau-plan__features li { position: relative; padding-left: 1.6rem; font: 400 0.9875rem/1.4 var(--kaakau-font); color: var(--kaakau-text); } /* Translucent black circle + white check: neutral on every card colour (white/blue/orange) — the old blue-tint circle clashed with the pale orange jäsenyys card (Joona 2026-07-11). */ .kaakau-plan__features li::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: rgba(0, 0, 0, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3 5 8.6l4.5-5'/%3E%3C/svg%3E") center/0.72rem no-repeat; } .kaakau-plan__features strong { font-weight: 600; } .kaakau-plan__cta { margin-top: auto; align-self: flex-start; } .kaakau-payg { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.75rem; } .kaakau-payg__label { margin: 0; font: 500 1rem/1 var(--kaakau-font); color: var(--kaakau-text); } .kaakau-payg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .kaakau-payg__list li { display: flex; align-items: baseline; gap: 0.4rem; background: var(--kaakau-surface); border-radius: 999px; padding: 0.45rem 0.95rem; font: 400 0.9rem/1 var(--kaakau-font); color: #303544; } .kaakau-payg__list strong { font-weight: 600; color: var(--kaakau-text); } @media (max-width: 991px) { .kaakau-pricing__grid { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } } /* ── Tuki (help center: /tuki) — Donkey-style: centered search band + sections in columns ──────── */ /* Search band: its own section, contents centered (mirrors Donkey Republic's help-center search hero). */ .kaakau-tuki__searchband { background: var(--kaakau-surface); border-radius: var(--kaakau-radius-card); padding: 3.5rem 2rem; text-align: center; margin-bottom: 3rem; } .kaakau-tuki__searchband h1 { margin: 0 0 0.75rem; } .kaakau-tuki__intro { max-width: 40rem; margin: 0 auto 1.75rem; color: #303544; line-height: 1.6; } .kaakau-tuki__search { max-width: 34rem; margin: 0 auto; } .kaakau-tuki__search input { width: 100%; box-sizing: border-box; font: 400 1.05rem/1.4 var(--kaakau-font); color: var(--kaakau-text); padding: 0.95rem 1.15rem; border: 1px solid #d7dbe2; border-radius: var(--kaakau-radius); background: #fff; transition: border-color .15s, box-shadow .15s; } .kaakau-tuki__search input::placeholder { color: #9197a7; } .kaakau-tuki__search input:focus { outline: none; border-color: var(--kaakau-orange); box-shadow: 0 0 0 3px var(--kaakau-orange-tint); } /* Sections in columns (left-aligned, not centered) — like DR's category grid; cards kept intact. */ .kaakau-tuki__cols { columns: 3; column-gap: 3rem; } .kaakau-tuki__card { break-inside: avoid; margin: 0 0 2.5rem; display: block; } @media (max-width: 991px) { .kaakau-tuki__cols { columns: 2; } } @media (max-width: 600px) { .kaakau-tuki__cols { columns: 1; } } .kaakau-tuki__section-title { font: 600 1.25rem/1.3 var(--kaakau-font); color: var(--kaakau-text); margin: 0 0 0.25rem; } /* /ohjeet/ pages: slotted-content styling. InstructionLayout's SCOPED styles never reach the slotted route markup, so .oh-list/.oh-breadcrumb rendered unstyled until 2026-07-09 — these global rules are the real ones. Card grid per Joona ("more inviting, grid-like"). */ .oh-breadcrumb { font-size: 0.85rem; color: #6d767e; margin-bottom: 2em; } .oh-breadcrumb a { color: #6d767e; text-decoration: none; } .oh-breadcrumb a:hover { color: var(--kaakau-orange); } .oh-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; } .oh-list a { display: flex; align-items: center; min-height: 4.5rem; padding: 1.1rem 1.25rem; background: var(--kaakau-surface); border-radius: var(--kaakau-radius); text-decoration: none; color: var(--kaakau-text); font: 500 1rem/1.35 var(--kaakau-font); transition: background-color .15s, color .15s; } .oh-list a:hover { background: var(--kaakau-blue-tint); color: var(--kaakau-blue); } /* --large: roomier, centered tiles for use ON a tinted or photo card (first use: the /kaupungit city grid inside the greyed hero card). The base surface tint is too low-contrast there, so the tiles are translucent white (0.95, Joona) letting a hint of the photo through; hover unchanged. */ .oh-list--large { gap: 1rem 1.25rem; } .oh-list--large a { min-height: 6rem; padding: 1.5rem 1.75rem; justify-content: center; text-align: center; font-size: 1.125rem; background: rgba(255, 255, 255, 0.95); } .oh-list--large a:hover { background: var(--kaakau-orange); color: #fff; } /* orange + white on hover (Joona), unlike the base blue tint */ /* Category intro (jäsenyys benefits, adapted from donkey.bike/membership). */ .oh-intro-lead { max-width: 60ch; font: 300 1.0625rem/1.55 var(--kaakau-font); margin: 0 0 0.5rem; color: var(--kaakau-text); } .oh-benefits { list-style: none; padding: 0; margin: 1.5rem 0 0.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; } .oh-benefit { background: var(--kaakau-surface); border-radius: var(--kaakau-radius); padding: 1.75rem; } .oh-benefit h3 { margin: 0 0 0.5rem; font: 500 1.15rem/1.3 var(--kaakau-font); color: var(--kaakau-blue); } .oh-benefit p { margin: 0; font: 300 1rem/1.5 var(--kaakau-font); color: var(--kaakau-text); } .oh-cta-row { margin: 1.5rem 0 1rem; } .oh-section-title { font: 500 1.4rem/1.2 var(--kaakau-font); margin: 2.5rem 0 0; color: var(--kaakau-text); } /* Jäsenyys hero: frontpage-style card inside the /ohjeet/ container. Photo slideshow fills the media half (slow crossfade, script in the route); card clipped (no breakout needed here). */ .kaakau-jhero { padding: 0 0 1.5rem; } .kaakau-jhero .kaakau-hero__card { overflow: clip; min-height: 28rem; } .kaakau-jhero .kaakau-hero__media { min-height: 28rem; } .kaakau-jhero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; } .kaakau-jhero__slide.is-active { opacity: 1; } @media (max-width: 991px) { .kaakau-jhero .kaakau-hero__media { min-height: 16rem; order: 2; } } /* Tuki-style article list on category landings. 3-up card grid matching the benefit cards above (Joona 2026-07-16: the old single 46rem column read as an odd ~60% row, visible on hover). */ .oh-tuki-list { margin-top: 1.5rem; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .oh-tuki-list li { display: grid; } .oh-tuki-list a { background: var(--kaakau-surface); padding: 1rem 1.25rem; border-radius: var(--kaakau-radius); } @media (max-width: 991px) { .oh-tuki-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .oh-tuki-list { grid-template-columns: 1fr; } } /* Self-contained list styling (InstructionLayout's scoped .oh-list does not reach slotted content). */ .kaakau-tuki__list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.15rem; } .kaakau-tuki__list li { margin: 0; } .kaakau-tuki__list a { display: block; padding: 0.7rem 0.9rem; border-radius: 10px; text-decoration: none; color: var(--kaakau-text); font-weight: 500; line-height: 1.4; transition: background-color .15s, color .15s; } .kaakau-tuki__list a:hover { background: var(--kaakau-orange-tint); color: var(--kaakau-orange-dark); } /* EN notice band on /en/tuki pages: articles shown in Finnish (browsers auto-translate), Donkey's official English help one click away (Joona 2026-07-17). */ .kaakau-tuki__ennote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; background: var(--kaakau-surface); border-radius: var(--kaakau-radius); padding: 1.25rem 1.5rem; margin-bottom: 2rem; } .kaakau-tuki__ennote p { margin: 0; font: 300 1rem/1.5 var(--kaakau-font); color: var(--kaakau-text); max-width: 60ch; } .kaakau-tuki__results { display: grid; gap: 0.75rem; } .kaakau-tuki__result { display: grid; gap: 0.2rem; padding: 1rem 1.25rem; border: 1px solid #edeef1; border-radius: 12px; text-decoration: none; color: var(--kaakau-text); transition: border-color .2s; } .kaakau-tuki__result:hover { border-color: var(--kaakau-orange); } .kaakau-tuki__result-title { font-weight: 600; } .kaakau-tuki__result-sec { font-size: 0.78rem; color: var(--kaakau-orange); text-transform: uppercase; letter-spacing: 0.03em; } .kaakau-tuki__result-snip { font-size: 0.9rem; color: #6d767e; line-height: 1.5; } .kaakau-tuki__empty { color: #6d767e; } /* Article body typography (set:html content from the translated FAQ) */ .kaakau-tuki__title { margin-top: 3rem; } .kaakau-tuki__article { max-width: 720px; } .kaakau-tuki__article h2 { font: 600 1.2rem/1.35 var(--kaakau-font); color: var(--kaakau-text); margin: 1.75rem 0 0.5rem; } .kaakau-tuki__article p { color: #303544; line-height: 1.65; margin: 0.75rem 0; } .kaakau-tuki__article ul, .kaakau-tuki__article ol { color: #303544; line-height: 1.65; padding-left: 1.25rem; } .kaakau-tuki__article li { margin: 0.35rem 0; } .kaakau-tuki__article a { color: var(--kaakau-orange); text-decoration: underline; } .kaakau-tuki__article img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e5e7eb; margin: 1.25rem 0; } /* markdown elements introduced by the content-collection conversion (h3/h4, tables, code, hr). */ .kaakau-tuki__article h3 { font: 600 1.05rem/1.35 var(--kaakau-font); color: var(--kaakau-text); margin: 1.5rem 0 0.4rem; } .kaakau-tuki__article h4 { font: 600 1rem/1.35 var(--kaakau-font); color: var(--kaakau-text); margin: 1.25rem 0 0.35rem; } .kaakau-tuki__article strong { color: var(--kaakau-text); } .kaakau-tuki__article code { background: var(--kaakau-surface); padding: 0.1em 0.35em; border-radius: 5px; font-size: 0.9em; } .kaakau-tuki__article hr { border: none; border-top: 1px solid #edeef1; margin: 1.75rem 0; } .kaakau-tuki__article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; } .kaakau-tuki__article th, .kaakau-tuki__article td { border: 1px solid #e3e7ee; padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; } .kaakau-tuki__article th { background: var(--kaakau-surface); } .kaakau-tuki__article tbody tr:nth-child(even) td { background: #fafbfc; } .kaakau-tuki__more { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #edeef1; } .kaakau-tuki__back { margin-top: 2rem; } .kaakau-tuki__back a { color: var(--kaakau-orange); text-decoration: none; font-weight: 500; } /* ── City pages (Payload-driven) ─────────────────────────────────────────────────────────────── */ /* (2026-07-19: the old greyed-background city hero — .kaakau-cityhero--img — was replaced by the split-card hero above. The frontpage hero keeps its greyed treatment: .kaakau-hero__card--img.) */ .kaakau-cityhero__from { margin: 0 0 1.5rem; font: 300 1.0625rem/1.4 var(--kaakau-font); } .kaakau-cityhero__from strong { font-weight: 600; } /* Sponsors strip — centered flex-wrap, height-normalized logos, size TIERED by count via the data-count attr the templates emit (Joona 2026-07-19): 1-2 logos double size (a lone sponsor deserves the attention — e.g. Kouvola), 3-4 mid, 5+ base (headroom; planned max ~7 per city). max-width caps protect against very wide wordmarks. The /yrityksille 18-logo wall uses the base tier. Current CMS max: 4 (Iisalmi). */ .kaakau-sponsors { padding: 2rem 5%; } .kaakau-sponsors__label { text-align: center; margin: 0 0 1.25rem; font: 500 0.8125rem/1 var(--kaakau-font); letter-spacing: 0.08em; text-transform: uppercase; color: #989797; } .kaakau-sponsors__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; } .kaakau-sponsors__item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .kaakau-sponsors__item img { display: block; height: 3.5rem; width: auto; max-width: 14rem; object-fit: contain; } .kaakau-sponsors__grid[data-count="1"] .kaakau-sponsors__item img, .kaakau-sponsors__grid[data-count="2"] .kaakau-sponsors__item img { height: 6rem; max-width: 24rem; } .kaakau-sponsors__grid[data-count="3"] .kaakau-sponsors__item img, .kaakau-sponsors__grid[data-count="4"] .kaakau-sponsors__item img { height: 4.5rem; max-width: 18rem; } @media (max-width: 600px) { .kaakau-sponsors__grid { gap: 1.5rem 2rem; } .kaakau-sponsors__item img { height: 2.5rem; max-width: 8rem; } .kaakau-sponsors__grid[data-count="1"] .kaakau-sponsors__item img, .kaakau-sponsors__grid[data-count="2"] .kaakau-sponsors__item img { height: 4rem; max-width: 16rem; } .kaakau-sponsors__grid[data-count="3"] .kaakau-sponsors__item img, .kaakau-sponsors__grid[data-count="4"] .kaakau-sponsors__item img { height: 3rem; max-width: 11rem; } } /* City intro (optional rich text, Kaupungit > intro). The facts strip + how-to on city pages are the frontpage components (.kaakau-factsec / .kaakau-howto above), since 2026-09-07. */ .kaakau-cityintro { padding: 2rem 5% 3rem; } /* ── Document pages (PageLayout.astro: legal + static info pages) ───────────────────────────── Global on purpose: layout-scoped styles never reach slotted MDX content (the /ohjeet lesson) — the prose rules below MUST live here, not in the layout's