/* Hallmark · tokens v4 · theme: custom (JIT-sininen, Packhelp-henkinen) · paper-band: white · display-style: grotesk-sans 500 · accent-hue: cool * vibe: "valkoinen myymälä, vaaleanharmaat tuotelaatat, mustasininen teksti ja yksi kirkas sininen" * v4 = v2:n teema palautettuna (asiakkaan valinta 22.10.) + leveämpi sivu (1440 px) ja kuvakehyksen reunavara. * Pohja: JIT-sininen ja mustasininen v1:stä. Muodot, painikkeet, kortit ja valikot Packhelpin mallin mukaan. * 23.10. (brief): JIT-sininen ja vaalea siniharmaa perussävyinä. Lasipinnat poistettu asiakkaan pyynnöstä (umpinaiset pinnat). */ :root { /* Väri — pinnat */ --color-paper: oklch(100% 0 0); /* sivun pohja: puhdas valkoinen */ --color-card: var(--color-mist); /* vaaleat pinnat (footer, hakuehdotukset) samaa siniharmaata kuin tuotelaatat */ --color-card-2: oklch(92.6% 0.009 259); /* hakukenttä: vaalea siniharmaa astetta tummempana */ --color-rule: oklch(91% 0.009 258); --color-rule-strong: oklch(83% 0.013 258); --color-muted: oklch(46% 0.02 256); /* pienet harmaat tekstit, selkeämpi kuin ennen */ --color-ink-2: oklch(30% 0.03 257); /* leipäteksti */ --color-ink: oklch(21% 0.036 258); --color-night: oklch(17.5% 0.038 258); --color-night-2: oklch(24% 0.044 257); /* Väri — JIT-sininen (≤ 5 % näkymästä) */ --color-accent: oklch(52% 0.185 258); --color-accent-hover: oklch(46% 0.175 258); --color-accent-tint: oklch(95.6% 0.024 256); /* vaaleansininen paneeli, #eaf2ff-henkinen */ --color-accent-tint-2: oklch(91.5% 0.045 256); --color-accent-soft: oklch(84% 0.075 245); /* korostus tummalla pohjalla */ --color-on-dark: oklch(99% 0.003 250); --color-on-dark-2: oklch(87% 0.016 252); --color-focus: oklch(56% 0.2 258); --color-line: oklch(21% 0.036 258 / 0.16); /* ääriviivapainikkeen reuna */ --color-compare: oklch(19% 0.045 258 / 0.92); /* luonnoksen vertailupaneeli */ --color-success: oklch(62% 0.15 155); --color-error-ink: oklch(50% 0.19 25); /* Vaalea siniharmaa JIT-sinisen rinnalla (brief 23.10.): tuotelaatat, verkkokaupan pohja, haku ja valitsimet */ --color-mist: oklch(95.13% 0.0074 260.7); /* #ECEFF5: tuotelaatat, haku ja valitsimet */ --color-tile-line: oklch(21% 0.036 258 / 0.07); /* tuotelaatan ja kuvakortin hento reuna */ --color-sticker-back: oklch(92.5% 0.008 255); /* irtoavan tarrankulman nurja puoli */ /* Päällysteet kuvien päällä */ --color-dim: oklch(17% 0.04 258 / 0.42); /* sivun himmennys megavalikon alla */ --color-line-on-dark: oklch(100% 0 0 / 0.2); /* ohut viiva tumman kuvan päällä */ --color-photo-light: var(--color-mist); /* tuotekuvien vaalea tausta: kuvat sävytetty samaan sävyyn */ --color-photo-bed: oklch(30% 0.02 258); /* kuvan paikka ennen latautumista, samaa sinisävyä kuin tumma */ --scrim-top: linear-gradient(to bottom, oklch(15% 0.05 260 / 0.5), oklch(15% 0.05 260 / 0)); --hero-calm: linear-gradient(90deg, oklch(13% 0.055 260 / 0.86), oklch(13% 0.055 260 / 0.7) 32%, oklch(13% 0.055 260 / 0.44) 56%, oklch(13% 0.055 260 / 0.2) 78%, oklch(13% 0.055 260 / 0.08) 100%), linear-gradient(0deg, oklch(13% 0.055 260 / 0.55), oklch(13% 0.055 260 / 0) 45%); /* heron teksti suoraan kuvan päällä */ --hero-calm-v: linear-gradient(0deg, oklch(13% 0.055 260 / 0.92), oklch(13% 0.055 260 / 0.7) 45%, oklch(13% 0.055 260 / 0) 80%); /* sama mobiilissa */ /* Heron valo hiiren kohdalla (screen-sekoitus taustan päällä, tekstin tummennuksen alla) ja hento rae taustassa */ --hero-glow: oklch(68% 0.16 252 / 0.5); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* Aukeavat kuvapaneelit (toimialat ja palvelut): tumma liukuväri tekstin alla ja kiinni olevien paneelien himmennys */ --panel-shade: linear-gradient(to top, oklch(13% 0.055 260 / 0.92), oklch(13% 0.055 260 / 0.62) 24%, oklch(13% 0.055 260 / 0.18) 46%, oklch(13% 0.055 260 / 0) 60%); --panel-dim: oklch(13% 0.055 260 / 0.3); --hero-text-shadow: 0 2px 28px oklch(13% 0.055 260 / 0.5); /* Tarjouspyynnön kuva: tekstin puoli tummempi kuin herossa, koska kuvan kirkas hintalappu osuu tekstin taakse */ /* Valokuvien yhteinen sävy: värit hillitymmin ja hieman kirkkaampina, jotta eriväriset kuvat ovat yhtenäinen sarja */ --photo-grade: saturate(0.74) contrast(1.04) brightness(1.03); --shadow-float: 0 12px 40px oklch(21% 0.036 258 / 0.14); --shadow-panel: 0 30px 70px oklch(12% 0.04 258 / 0.3); --ring: 0 0 0 3px oklch(52% 0.185 258 / 0.18); /* kentän kohdistus */ --shadow-tile: 0 1px 2px oklch(21% 0.036 258 / 0.05), 0 8px 18px -14px oklch(21% 0.036 258 / 0.22); /* tuotelaatta ja kuvakortti */ --shadow-peel: -6px 6px 14px -8px oklch(21% 0.036 258 / 0.4); /* irtoava tarrankulma */ --shadow-tile-hover: 0 2px 4px oklch(24% 0.075 260 / 0.06), 0 22px 34px -18px oklch(24% 0.075 260 / 0.38); /* laatta kohoaa */ --shadow-bar: 0 12px 30px -24px oklch(21% 0.036 258 / 0.45); /* navigaatio vieritettäessä */ --shadow-bar-up: 0 -14px 30px -24px oklch(21% 0.036 258 / 0.4); /* mobiilin alapalkki */ --shadow-cutout: drop-shadow(0 16px 14px oklch(21% 0.036 258 / 0.14)) drop-shadow(0 2px 3px oklch(21% 0.036 258 / 0.1)); /* läpinäkyvä tuotekuva */ /* Typografia — Geist kaikessa, otsikot 500 ja tiivis välistys */ --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --text-xs: 0.8125rem; /* 13 px sirut ja tunnisteet */ --text-sm: 0.875rem; /* 14 px korttien nimet */ --text-base: 1rem; /* 16 px */ --text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* ingressit */ --text-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* korttiotsikot */ --text-xl: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); --text-2xl: clamp(2.125rem, 1.45rem + 2.5vw, 3.375rem); /* osio-otsikot, 54 px */ --text-display: clamp(2.875rem, 0.9rem + 6.4vw, 7.25rem); /* hero, 116 px */ /* Tila — 4 pt asteikko */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; /* Muodot — Packhelpin pyöreä linja. Terävä vaihtoehto: html[data-kulmat="terava"] */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; /* kortit, tuotelaatat, haitarit */ --radius-lg: 24px; /* paneelit, lomake */ --radius-xl: 32px; /* huurrepaneelit, kuva–teksti-kortit, tarjouspyyntö, footer */ --radius-pill: 999px; /* painikkeet, sirut, haku */ --rule-hair: 1px; /* Liike */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1); /* sisääntulot ja korttien nousu: pehmeä hidastus ilman nykäystä */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-enter: 700ms; /* heron tekstin rauhallinen sisääntulo */ --dur-hero: 1100ms; /* heron otsikkorivien nousu */ --dur-cinema: 2200ms; /* heron taustan elokuvamainen sisääntulo */ --dur-reveal: 700ms; /* osioiden ja korttien sisääntulo vieritettäessä */ --dur-fill: 520ms; /* täytetyn painikkeen ympyrä täyttää painikkeen */ --dur-open: 700ms; /* kuvapaneeli aukeaa */ --dur-marquee: 48s; /* Kerrokset */ --z-dropdown: 100; --z-sticky: 200; --z-skip: 300; /* Mittasuhteet */ --measure-title: 20ch; /* osioiden otsikoiden leveys: rivitys samanlainen kaikkialla */ --measure-text: 48ch; /* ingressien ja tekstipalstojen leveys */ --section-y: clamp(3.125rem, 2.225rem + 2.4vw, 4.625rem); /* osioiden pystyväli: sama kaikissa osioissa (kahden osion väli 2 ×) */ --page-max: 1440px; /* v2:ssa 1216 px: asiakas toivoi leveämmän sivun */ --gutter: clamp(1rem, 4vw, 2.5rem); --inset: clamp(0.375rem, 0.9vw, 0.75rem); /* heron ja tumman paneelin reunavara ikkunan reunaan */ --nav-h: 76px; /* navigaatio, yksi rivi */ } /* Terävät kulmat (v1:n linjaus) vertailua varten */ html[data-kulmat="terava"] { --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; }