/* Klikin väritokenit (väriuudistus 6.10.2026, Mikaelin päätös). Ladataan jokaisella sivulla ENSIMMÄISENÄ tyylitiedostona (src/chrome.mjs: tokenLink; render.mjs shell(), arkisto- ja content/pages-sivut, tietopankki). Teema valitaan -attribuutilla (src/chrome.mjs themeOf): tenant = suunta A "Klikin sininen pääosassa": sininen ylänauha, sininen heropeitto ja valkoinen teksti. landlord = suunta B "Raikas ja valoisa": vaalea ylänauha, vaalea heroverho ja tumma teksti. Ilman attribuuttia (esim. upotettu CRM-lomake) käytetään vuokralaisteemaa (:root). Tokenit nimetään roolin mukaan. Sivujen vanhat muuttujat (--kc-*, --kp-*, --pk-*, --yt-*, site.css:n --brand-blue jne. ja content/pages-sivujen --ku-*) ovat näiden aliaksia. Komponenttien rakenteelliset erot (paneelit, hinnan otsakkeet, askelnumerot, huomiolaatikot, herot) on ilmaistu omilla roolitokeneillaan, jotta sama sivukohtainen CSS toimii kummassakin teemassa. Pienet teemakohtaiset komponenttisäännöt, joita ei voi ilmaista tokeneilla, ovat tiedostossa public/klik-theme.css (ladataan sivun CSS:n jälkeen). */ /* ---------- Yhteiset perustokenit ---------- */ :root { --klik-brand: #0033cc; /* logon sininen neliö (#03c) */ --klik-brand-yellow: #ffeb00; /* logon keltainen rengas */ --klik-success: #1d7a46; --klik-success-bg: #e9f6ee; --klik-success-line: #b5dfc5; --klik-success-ink: #133d26; --klik-warn: #8a5300; --klik-error: #b42318; --klik-error-bg: #fdecea; --klik-error-line: #f4c3bd; --klik-error-ink: #5c1610; --klik-white: #fff; --klik-radius: 12px; --klik-radius-lg: 16px; } /* ---------- Välistys (väljennys 6.10.2026, Mikaelin pyyntö: "vähän ilmavampi asu") ---------- Perusaskeleet --klik-space-1…9 ja roolitokenit. Roolitokenit kasvavat näytön leveyden mukana (clamp), joten 375 px:n puhelimella välit ovat lähes ennallaan ja työpöydällä väljemmät. Arvot leveyksillä 375 → 1280 px. */ :root { --klik-space-1: 4px; --klik-space-2: 8px; --klik-space-3: 12px; --klik-space-4: 16px; --klik-space-5: 24px; --klik-space-6: 32px; --klik-space-7: 48px; --klik-space-8: 64px; --klik-space-9: 96px; --klik-section-y: clamp(52px, 4.5vw + 36px, 96px); /* osioiden väli: 53 → 94 */ --klik-section-y-tight: clamp(44px, 2.5vw + 36px, 72px); /* taustakaistat ja tiiviimmät osiot: 45 → 68 */ --klik-hero-y: clamp(36px, 2.5vw + 28px, 60px); /* heron alareuna: 37 → 60 */ --klik-hero-inset: clamp(0px, 3vw - 16px, 24px); /* heron sisällön lisäväli yläreunaan: 0 → 22 */ --klik-card-pad: clamp(20px, 1vw + 16px, 28px); /* kortit: 20 → 28 */ --klik-card-pad-sm: clamp(14px, .5vw + 12px, 18px); /* tiheät kortit, huomiolaatikot ja rivit: 14 → 18 */ --klik-card-pad-lg: clamp(24px, 1vw + 20px, 32px); /* isommat kortit: 24 → 32 */ --klik-panel-pad: clamp(28px, 2vw + 20px, 44px); /* paneelit ja CTA-laatikot: 28 → 44 */ --klik-gap: clamp(16px, 1vw + 12px, 26px); /* korttiruudukot: 16 → 25 */ --klik-gap-sm: clamp(10px, .4vw + 9px, 14px); /* listat ja tiheät ruudukot: 10 → 14 */ --klik-gap-md: clamp(20px, 1vw + 16px, 30px); /* väljemmät ruudukot: 20 → 29 */ --klik-gap-lg: clamp(28px, 3.2vw + 16px, 64px); /* kaksipalstaiset osiot: 28 → 57 */ --klik-stack: clamp(24px, 1.2vw + 18px, 34px); /* lohkojen väli osion sisällä: 24 → 33 */ --klik-stack-lg: clamp(36px, 1.6vw + 30px, 52px); /* isompi lohkoväli: 36 → 50 */ --klik-heading-gap: clamp(14px, .5vw + 12px, 20px); /* osio-otsikon alla: 14 → 18 */ --klik-measure: 68ch; /* leipätekstin rivin enimmäispituus */ --klik-lh-body: 1.65; /* leipätekstin riviväli */ } /* ---------- Suunta A: vuokralaiset (myös oletus) ---------- */ :root, [data-klik-theme="tenant"] { /* Brändi ja toiminnot */ --klik-primary: #0033cc; --klik-primary-hover: #0029a3; --klik-primary-deep: #001f7a; --klik-primary-rgb: 0 51 204; --klik-on-primary: #fff; --klik-on-primary-muted: #dbe4ff; /* Teksti */ --klik-ink: #1a2b52; /* otsikot (navy vain tekstinä) */ --klik-text: #1e2833; /* leipäteksti */ --klik-muted: #4a5563; /* aputeksti */ /* Pinnat */ --klik-surface: #fff; --klik-tint-1: #f4f7fe; --klik-tint-2: #e8eefc; --klik-tint-3: #c5d3f6; --klik-surface-alt: var(--klik-tint-1); /* Viivat */ --klik-line: #dfe6f3; /* koriste- ja korttiviivat */ --klik-line-strong: #c5d3f6; --klik-field-border: #7d8aa6; /* lomakekentät, 3,5:1 valkoisella (WCAG 1.4.11) */ /* Korostus */ --klik-accent: #ffeb00; --klik-accent-soft: #fffbd6; --klik-on-accent: #1a2b52; --klik-focus: #0033cc; --klik-focus-on-primary: #ffeb00; /* Syvyys */ --klik-shadow-rgb: 0 41 163; --klik-shadow: 0 6px 20px rgb(0 41 163 / .07); --klik-shadow-md: 0 8px 24px rgb(0 41 163 / .08); --klik-shadow-lg: 0 18px 44px rgb(0 20 90 / .35); --klik-shadow-hover: 0 10px 26px rgb(0 51 204 / .14); /* Header: sininen ylänauha jatkaa logon sinistä neliötä */ --klik-topbar-bg: var(--klik-primary); --klik-topbar-text: #fff; --klik-topbar-muted: var(--klik-on-primary-muted); --klik-topbar-icon: var(--klik-accent); --klik-topbar-hover-bg: rgb(255 255 255 / .14); --klik-topbar-hover-text: #fff; --klik-topbar-line: transparent; --klik-topbar-focus: var(--klik-accent); --klik-tab-active-text: var(--klik-primary); --klik-tab-active-mark: transparent; --klik-bar-shadow: 0 6px 20px rgb(0 41 163 / .06); /* Footer */ --klik-footer-bg: var(--klik-tint-1); --klik-footer-curve: #e3eafb; --klik-footer-btn-bg: var(--klik-accent); --klik-footer-btn-text: var(--klik-ink); --klik-footer-bottom-bg: var(--klik-primary); --klik-footer-bottom-text: var(--klik-on-primary-muted); --klik-footer-bottom-line: transparent; /* Herot: kuvan päälle sininen brändipeitto, valkoinen teksti */ --klik-hero-overlay: linear-gradient(90deg, rgb(0 24 110 / .32), rgb(0 24 110 / 0) 60%), linear-gradient(rgb(0 46 184 / .84), rgb(0 46 184 / .84)); --klik-hero-overlay-even: linear-gradient(rgb(0 46 184 / .84), rgb(0 46 184 / .84)); /* Arkiston Webflow-herot: kuvan päällä on jo Webflow'n tumma kerros, joten peitto on hieman ohuempi (.76 riittää keltaiselle tekstille AA:han vaaleimmankin kuvan päällä). */ --klik-hero-wash: linear-gradient(90deg, rgb(0 24 110 / .3), rgb(0 24 110 / 0) 60%), linear-gradient(rgb(0 46 184 / .76), rgb(0 46 184 / .76)); --klik-hero-filter: none; --klik-hero-solid: linear-gradient(135deg, var(--klik-primary) 0%, #002db8 60%, var(--klik-primary-hover) 100%); --klik-hero-line: transparent; --klik-on-hero: #fff; --klik-on-hero-text: #fff; --klik-on-hero-muted: var(--klik-on-primary-muted); --klik-hero-accent: var(--klik-accent); --klik-hero-focus: var(--klik-accent); --klik-hero-btn-bg: var(--klik-accent); --klik-hero-btn-text: var(--klik-ink); --klik-hero-btn-hover-bg: #fff; --klik-hero-btn-hover-text: var(--klik-ink); --klik-hero-ghost-bg: transparent; --klik-hero-ghost-line: rgb(255 255 255 / .85); --klik-hero-ghost-text: #fff; --klik-hero-ghost-hover-bg: #fff; --klik-hero-ghost-hover-text: var(--klik-primary); /* Sinisellä herolla pillerit ja laskuri tummentavat (ei vaalenna) taustaa, jotta pieni valkoinen ja keltainen teksti täyttää AA:n myös vaaleimman kuvan kohdalla. */ --klik-hero-chip-bg: rgb(0 24 110 / .32); --klik-hero-chip-line: rgb(255 255 255 / .45); --klik-hero-chip-text: #fff; /* Tietopankin artikkelihero */ --klik-article-hero-bg: radial-gradient(circle at 88% -30%, rgb(255 255 255 / .16) 0, rgb(255 255 255 / 0) 55%), var(--klik-hero-solid); --klik-hero-mark: var(--klik-accent); --klik-hero-mark-width: 100%; --klik-hero-mark-height: 4px; --klik-hero-mark-left: 0px; /* Lopetus-CTA:t ja tietopankkinauhat (sininen pinta kummassakin teemassa) */ --klik-cta-bg: linear-gradient(135deg, var(--klik-primary) 0%, var(--klik-primary-hover) 100%); --klik-cta-shadow: 0 10px 30px rgb(0 41 163 / .16); /* Muut entiset navy-paneelit (A: sininen, B: vaalea) */ --klik-panel-bg: linear-gradient(135deg, var(--klik-primary) 0%, var(--klik-primary-hover) 100%); --klik-panel-line: transparent; --klik-panel-shadow: none; --klik-on-panel: #fff; --klik-on-panel-text: var(--klik-on-primary-muted); --klik-panel-accent: var(--klik-accent); --klik-panel-link: #fff; --klik-panel-focus: var(--klik-accent); --klik-panel-chip-bg: rgb(255 255 255 / .1); --klik-panel-chip-line: rgb(255 255 255 / .25); --klik-panel-btn-bg: var(--klik-accent); --klik-panel-btn-text: var(--klik-ink); --klik-panel-btn-hover-bg: #fff; --klik-panel-btn-hover-text: var(--klik-ink); /* Hinta- ja taulukko-otsakkeet */ --klik-head-bg: var(--klik-primary); --klik-on-head: #fff; --klik-head-muted: var(--klik-on-primary-muted); --klik-head-accent: var(--klik-accent); --klik-head-rule: transparent; /* Pienet merkit, askelnumerot, huomiolaatikot */ --klik-badge-bg: var(--klik-tint-2); --klik-badge-strong-bg: var(--klik-primary); --klik-badge-strong-ico: var(--klik-accent); --klik-step-bg: var(--klik-accent); --klik-step-text: var(--klik-ink); --klik-tag-bg: var(--klik-accent); --klik-tag-text: var(--klik-ink); --klik-highlight: var(--klik-accent); --klik-ol-bg: var(--klik-primary); --klik-ol-text: #fff; --klik-ol-ring: transparent; --klik-callout-bg: var(--klik-accent-soft); --klik-callout-rule: 6px solid var(--klik-accent); --klik-callout-rule-color: var(--klik-accent); --klik-callout-ico: var(--klik-ink); } /* ---------- Suunta B: vuokranantajat ---------- */ [data-klik-theme="landlord"] { --klik-primary: #0033cc; --klik-primary-hover: #0029a3; --klik-primary-deep: #001f7a; --klik-primary-rgb: 0 51 204; --klik-on-primary: #fff; --klik-on-primary-muted: #eef2ff; --klik-ink: #0d2167; /* syvä Klik-sininen, vain tekstinä */ --klik-text: #2a3651; --klik-muted: #56627c; --klik-surface: #fff; --klik-tint-1: #f5f7ff; --klik-tint-2: #e8eeff; --klik-tint-3: #d3ddff; --klik-surface-alt: var(--klik-tint-1); --klik-line: #dfe5f4; --klik-line-strong: #c3cde6; --klik-field-border: #7d8aab; --klik-accent: #ffeb00; /* yksi keltainen korostus näkymää kohden */ --klik-accent-soft: #fff8c2; --klik-on-accent: #0d2167; --klik-focus: #0033cc; --klik-focus-on-primary: #ffeb00; --klik-shadow-rgb: 13 33 103; --klik-shadow: 0 1px 2px rgb(13 33 103 / .06); --klik-shadow-md: 0 1px 2px rgb(13 33 103 / .05), 0 10px 28px rgb(13 33 103 / .07); --klik-shadow-lg: 0 2px 4px rgb(13 33 103 / .05), 0 22px 48px rgb(13 33 103 / .12); --klik-shadow-hover: 0 8px 22px rgb(0 51 204 / .1); /* Header: vaalea ylänauha, aktiivinen välilehti valkoinen ja yläreunassa sininen viiva */ --klik-topbar-bg: var(--klik-tint-1); --klik-topbar-text: var(--klik-text); --klik-topbar-muted: var(--klik-muted); --klik-topbar-icon: var(--klik-primary); --klik-topbar-hover-bg: rgb(0 51 204 / .06); --klik-topbar-hover-text: var(--klik-primary); --klik-topbar-line: var(--klik-line); --klik-topbar-focus: var(--klik-primary); --klik-tab-active-text: var(--klik-ink); --klik-tab-active-mark: var(--klik-primary); --klik-bar-shadow: 0 1px 0 var(--klik-line), 0 8px 24px rgb(13 33 103 / .04); --klik-footer-bg: var(--klik-tint-1); --klik-footer-curve: #ebf0fd; --klik-footer-btn-bg: var(--klik-primary); --klik-footer-btn-text: #fff; --klik-footer-bottom-bg: transparent; --klik-footer-bottom-text: var(--klik-muted); --klik-footer-bottom-line: var(--klik-line); /* Herot: vaalea verho kuvan päällä, tumma teksti. Verho on tekstialueella ≥ .93, joten AA täyttyy kuvasta riippumatta; oikealla se ohenee, jotta kuva näkyy. */ --klik-hero-overlay: linear-gradient(90deg, rgb(245 247 255 / .97) 0%, rgb(245 247 255 / .93) 46%, rgb(232 238 255 / .62) 76%, rgb(232 238 255 / .38) 100%); --klik-hero-overlay-even: linear-gradient(180deg, rgb(245 247 255 / .95), rgb(236 241 255 / .92)); /* Arkiston Webflow-herot: kuvan alla on Webflow'n tumma peitto. Läpikuultava verho ja harmaannus tekivät kuvasta sameanliilan (Mikael 6.10.2026), joten B:ssä verho on peittävä vaalea pinta ilman kuvaa, kuten kaupunkisivuilla. */ --klik-hero-wash: radial-gradient(ellipse at 85% 0%, rgb(0 51 204 / .09), rgb(0 51 204 / 0) 55%), linear-gradient(180deg, var(--klik-tint-1), #fff); --klik-hero-filter: none; --klik-hero-solid: linear-gradient(180deg, var(--klik-tint-1), #fff); --klik-hero-line: var(--klik-line); --klik-on-hero: var(--klik-ink); --klik-on-hero-text: var(--klik-text); --klik-on-hero-muted: var(--klik-muted); --klik-hero-accent: var(--klik-primary); --klik-hero-focus: var(--klik-primary); --klik-hero-btn-bg: var(--klik-primary); --klik-hero-btn-text: #fff; --klik-hero-btn-hover-bg: var(--klik-primary-hover); --klik-hero-btn-hover-text: #fff; --klik-hero-ghost-bg: #fff; --klik-hero-ghost-line: var(--klik-primary); --klik-hero-ghost-text: var(--klik-primary); --klik-hero-ghost-hover-bg: var(--klik-tint-2); --klik-hero-ghost-hover-text: var(--klik-primary-hover); --klik-hero-chip-bg: rgb(255 255 255 / .85); --klik-hero-chip-line: var(--klik-line-strong); --klik-hero-chip-text: var(--klik-ink); --klik-article-hero-bg: radial-gradient(circle at 96% -30%, rgb(0 51 204 / .1) 0, rgb(0 51 204 / 0) 55%), var(--klik-hero-solid); --klik-hero-mark: var(--klik-primary); --klik-hero-mark-width: 72px; --klik-hero-mark-height: 3px; --klik-hero-mark-left: max(24px, calc(50% - 368px)); /* artikkelin otsikon kohdalle (.kp-wrap 784 px) */ --klik-cta-bg: var(--klik-primary); --klik-cta-shadow: 0 18px 40px rgb(0 51 204 / .18); --klik-panel-bg: var(--klik-tint-1); --klik-panel-line: var(--klik-line); --klik-panel-shadow: var(--klik-shadow); --klik-on-panel: var(--klik-ink); --klik-on-panel-text: var(--klik-text); --klik-panel-accent: var(--klik-primary); --klik-panel-link: var(--klik-primary); --klik-panel-focus: var(--klik-primary); --klik-panel-chip-bg: #fff; --klik-panel-chip-line: var(--klik-line); --klik-panel-btn-bg: var(--klik-primary); --klik-panel-btn-text: #fff; --klik-panel-btn-hover-bg: var(--klik-primary-hover); --klik-panel-btn-hover-text: #fff; --klik-head-bg: var(--klik-tint-2); --klik-on-head: var(--klik-ink); --klik-head-muted: var(--klik-text); --klik-head-accent: var(--klik-primary); --klik-head-rule: var(--klik-primary); --klik-badge-bg: var(--klik-tint-2); --klik-badge-strong-bg: var(--klik-primary); --klik-badge-strong-ico: #fff; --klik-step-bg: var(--klik-primary); --klik-step-text: #fff; --klik-tag-bg: var(--klik-tint-2); --klik-tag-text: var(--klik-primary); --klik-highlight: var(--klik-primary); --klik-ol-bg: var(--klik-tint-2); --klik-ol-text: var(--klik-primary); --klik-ol-ring: var(--klik-line-strong); --klik-callout-bg: var(--klik-tint-1); --klik-callout-rule: 3px solid var(--klik-primary); --klik-callout-rule-color: var(--klik-primary); --klik-callout-ico: var(--klik-primary); } /* Mobiilissa vaalea verho on tasainen, koska teksti peittää koko leveyden. */ @media (max-width: 767px) { [data-klik-theme="landlord"] { --klik-hero-overlay: var(--klik-hero-overlay-even); } } /* ---------- Uudistettujen sivujen (content/pages, .klik-uusi) vanhat nimet ---------- */ :root { --ku-navy: var(--klik-ink); /* tekstinä; navy-pinnat käyttävät roolitokeneita (--klik-panel-bg ym.) */ --ku-blue: var(--klik-primary); --ku-text: var(--klik-text); --ku-muted: var(--klik-muted); --ku-bg: var(--klik-tint-1); --ku-bg2: var(--klik-surface-alt); --ku-yellow: var(--klik-accent); --ku-line: var(--klik-line); }