/* Generated by server/build-css.js at startup — edit the sources, not this.
Sources, in order: fonts.css, tokens.css, components.css, site.css */
/* --- fonts.css --- */
/* =============================================================================
Self-hosted webfonts — generated by development/fetch-fonts.py, do not edit
=============================================================================
These used to load from fonts.googleapis.com, which transmits the visitor's
IP to Google on every page load — before any consent, on a site that
otherwise sets no cookies at all. A Munich court found that unlawful under
GDPR in 2022 (LG München I, 3 O 17493/20).
Serving them ourselves removes the transfer and drops two render-blocking
requests to a third-party origin.
============================================================================= */
/* Bricolage Grotesque 400 — latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/bricolage-grotesque-latin-ext-4db04620.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque 400 — latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/bricolage-grotesque-latin-e8a27852.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bricolage Grotesque 600 — latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/bricolage-grotesque-latin-ext-4db04620.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque 600 — latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/bricolage-grotesque-latin-e8a27852.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bricolage Grotesque 800 — latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/bricolage-grotesque-latin-ext-4db04620.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque 800 — latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/bricolage-grotesque-latin-e8a27852.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 — latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/ibm-plex-mono-latin-ext-108d5090.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/ibm-plex-mono-latin-2c9bacf0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/ibm-plex-mono-latin-ext-24397a3e.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/ibm-plex-mono-latin-3a2668b9.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans 400 — latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/instrument-sans-latin-ext-60c7df00.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans 400 — latin */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/instrument-sans-latin-561da854.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans 500 — latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/instrument-sans-latin-ext-60c7df00.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans 500 — latin */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/instrument-sans-latin-561da854.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans 600 — latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/instrument-sans-latin-ext-60c7df00.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans 600 — latin */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/instrument-sans-latin-561da854.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- tokens.css --- */
/* LainaLaite — design tokens
Lähde: "LainaLaite Site.dc.html", suunta 1a (vaalea).
Käyttö: import "./tokens.css" ensimmäisenä globaalissa CSS:ssä. */
:root {
/* --- Brand & ink --- */
--ll-ink: #1F4B4A; /* leipäteksti, ylänauha, alatunniste */
--ll-ink-80: rgba(31,75,74,.80);
--ll-ink-70: rgba(31,75,74,.70);
--ll-ink-60: rgba(31,75,74,.60);
--ll-ink-45: rgba(31,75,74,.45); /* placeholder-teksti */
--ll-teal: #21867A; /* linkit, WhatsApp, onnistuminen */
--ll-teal-soft: rgba(33,134,122,.12);
--ll-cta: #D9614A; /* AINOA pää-CTA-väri + virheet */
--ll-gold: #E3B655; /* saatavuusmerkki, admin-korostus */
--ll-gold-soft: rgba(227,182,85,.18);
--ll-apricot: #EF8F5B; /* otsikkokorostus tummalla pohjalla */
/* --- Surfaces --- */
--ll-bg: #FBF8F3; /* sivun pohja */
--ll-surface: #FFFFFF; /* kortti, kenttä */
--ll-surface-sunk: #EFEAE2; /* upotettu lohko, yhteenveto */
--ll-surface-admin: #F6F2EC; /* adminin oikea sarake */
--ll-border: rgba(31,75,74,.13);
--ll-border-strong: rgba(31,75,74,.20);
--ll-hairline: rgba(31,75,74,.09);
/* --- Typography --- */
--ll-font-display: 'Bricolage Grotesque', Georgia, serif;
--ll-font-ui: 'Instrument Sans', system-ui, -apple-system, sans-serif;
--ll-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
--ll-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem); /* 28 → 42 */
--ll-h1-hero: clamp(1.875rem, 1.1rem + 3.4vw, 3.25rem); /* 30 → 52 */
--ll-h2: clamp(1.3125rem, 1.1rem + .8vw, 1.625rem);
--ll-h3: 1.0625rem;
--ll-body: .9375rem; /* 15 — työpöytä */
--ll-body-m: .875rem; /* 14 — mobiili */
--ll-small: .78125rem; /* 12.5 */
--ll-label: .6875rem; /* 11 — mono-kenttäotsikot */
--ll-price: 1.1875rem; /* 19 — display-fontilla */
--ll-lh-tight: 1.12;
--ll-lh-body: 1.6;
--ll-ls-display: -.025em;
--ll-ls-label: .06em;
/* --- Space (4px-ruudukko) --- */
--ll-1: 4px; --ll-2: 8px; --ll-3: 12px; --ll-4: 16px;
--ll-5: 20px; --ll-6: 24px; --ll-8: 32px; --ll-10: 40px; --ll-12: 48px;
--ll-gutter-m: 20px; /* mobiilin sivumarginaali */
--ll-gutter-d: 40px; /* työpöydän sivumarginaali */
--ll-maxw: 1180px; /* sisällön maksimileveys */
--ll-maxw-read: 680px; /* artikkelipalsta */
/* --- Radius --- */
--ll-r-card: 18px;
--ll-r-panel: 20px;
--ll-r-field: 14px;
--ll-r-btn: 14px;
--ll-r-chip: 20px;
--ll-r-badge: 6px;
/* --- Elevation --- */
--ll-shadow-card: 0 4px 14px rgba(31,75,74,.08);
--ll-shadow-panel: 0 6px 20px rgba(31,75,74,.10);
/* --- Motion --- */
--ll-dur: 160ms;
--ll-ease: cubic-bezier(.2,.6,.2,1);
/* --- Min hit target --- */
--ll-tap: 48px;
}
@media (prefers-reduced-motion: reduce) {
:root { --ll-dur: 0ms; }
}
/* --- components.css --- */
/* LainaLaite — component layer
Vaatii: tokens.css. Ei riippuvuuksia Tailwindiin tai UI-kirjastoihin.
Luokat vastaavat mockupin elementtejä 1:1. */
/* Loaded by a in the page, ahead of this file, so the three
stylesheets download in parallel. The @import that used to be here forced
them into three serial round trips on the critical render path. */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--ll-bg);
color: var(--ll-ink);
font-family: var(--ll-font-ui);
font-size: var(--ll-body-m);
line-height: var(--ll-lh-body);
-webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: var(--ll-body); } }
a { color: var(--ll-teal); text-decoration: none; }
a:hover { color: var(--ll-cta); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ll-teal); outline-offset: 2px; border-radius: 4px; }
/* ---------- Layout ---------- */
.ll-shell { max-width: var(--ll-maxw); margin: 0 auto; padding-inline: var(--ll-gutter-m); }
@media (min-width: 768px) { .ll-shell { padding-inline: var(--ll-gutter-d); } }
.ll-article { max-width: var(--ll-maxw-read); }
.ll-stack { display: grid; gap: var(--ll-4); }
.ll-row { display: flex; gap: var(--ll-3); align-items: center; }
/* Tuotesivu / lomake: sisältö + tarttuva sivupalkki */
.ll-split { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--ll-6); align-items: start; }
@media (min-width: 1024px) {
.ll-split { grid-template-columns: minmax(0,1fr) 380px; gap: var(--ll-8); }
.ll-split__aside { position: sticky; top: var(--ll-4); }
}
.ll-grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--ll-4); }
@media (min-width: 640px) { .ll-grid-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .ll-grid-cards { grid-template-columns: repeat(3,1fr); gap: var(--ll-5); } }
/* ---------- Typography ---------- */
.ll-h1 { font-family: var(--ll-font-display); font-weight: 400; font-size: var(--ll-h1);
line-height: var(--ll-lh-tight); letter-spacing: var(--ll-ls-display); margin: 0; text-wrap: pretty; }
.ll-h1--hero{ font-size: var(--ll-h1-hero); }
.ll-h2 { font-family: var(--ll-font-display); font-weight: 400; font-size: var(--ll-h2);
letter-spacing: -.02em; margin: 0 0 var(--ll-3); }
.ll-lead { font-size: 1.0625rem; line-height: 1.65; color: var(--ll-ink-80); margin: var(--ll-3) 0 0; }
.ll-muted { color: var(--ll-ink-70); }
.ll-label { font-family: var(--ll-font-mono); font-weight: 500; font-size: var(--ll-label);
letter-spacing: var(--ll-ls-label); text-transform: uppercase; color: var(--ll-ink-60); }
.ll-price { font-family: var(--ll-font-display); font-weight: 600; font-size: var(--ll-price); color: var(--ll-cta); }
.ll-price__unit { font-family: var(--ll-font-ui); font-weight: 400; font-size: var(--ll-small); color: var(--ll-ink-60); }
.ll-price--secondary { color: var(--ll-ink); font-size: .9375rem; }
/* ---------- Header / footer ---------- */
.ll-topbar { background: var(--ll-ink); color: #fff; }
.ll-topbar a, .ll-topbar__link { color: rgba(255,255,255,.78); font-weight: 500; font-size: .84375rem; }
.ll-topbar__link[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--ll-gold); padding-bottom: 3px; }
.ll-wordmark { font-family: var(--ll-font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.ll-wordmark em { font-style: normal; color: var(--ll-gold); }
.ll-footer { background: var(--ll-ink); color: rgba(255,255,255,.72); font-size: .8125rem; line-height: 1.9; }
.ll-footer a { color: rgba(255,255,255,.72); }
.ll-footer a:hover { color: #fff; }
/* ---------- Buttons ---------- */
.ll-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--ll-2);
min-height: var(--ll-tap); padding: 0 var(--ll-5);
border: 1.5px solid transparent; border-radius: var(--ll-r-btn);
font: 600 .9375rem/1 var(--ll-font-ui); cursor: pointer;
transition: background var(--ll-dur) var(--ll-ease), border-color var(--ll-dur) var(--ll-ease);
}
.ll-btn--primary { background: var(--ll-cta); color: #fff; } /* yksi per näkymä */
.ll-btn--primary:hover { background: #C9553F; }
.ll-btn--secondary{ background: transparent; color: var(--ll-teal); border-color: var(--ll-teal); }
.ll-btn--secondary:hover{ background: var(--ll-teal-soft); }
.ll-btn--ink { background: var(--ll-ink); color: #fff; } /* admin-toiminnot */
.ll-btn--quiet { background: transparent; color: var(--ll-ink); border-color: var(--ll-border-strong); }
.ll-btn--block { width: 100%; }
.ll-btn[disabled], .ll-btn[aria-disabled="true"] { background: rgba(31,75,74,.12); color: var(--ll-ink-45); border-color: transparent; cursor: not-allowed; }
.ll-btn--icon { width: 52px; min-height: 52px; padding: 0; font-family: var(--ll-font-mono); font-size: .625rem; }
/* ---------- Badges & chips ---------- */
.ll-badge { display: inline-block; padding: 5px 9px; border-radius: var(--ll-r-badge);
font: 600 .6875rem/1.2 var(--ll-font-ui); }
.ll-badge--free { background: var(--ll-gold); color: var(--ll-ink); } /* vapaana nyt */
.ll-badge--booked { background: var(--ll-surface); color: var(--ll-ink); border: 1px solid var(--ll-border-strong); }
.ll-badge--info { background: var(--ll-teal-soft); color: var(--ll-ink); }
.ll-badge--status { font-family: var(--ll-font-mono); letter-spacing: .04em; text-transform: uppercase; }
.ll-badge--requested { background: var(--ll-cta); color: #fff; }
.ll-badge--approved { background: var(--ll-gold); color: var(--ll-ink); }
.ll-badge--active { background: var(--ll-teal-soft); color: var(--ll-ink); }
.ll-badge--done { background: rgba(31,75,74,.10); color: var(--ll-ink-70); }
.ll-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px;
border-radius: var(--ll-r-chip); background: rgba(31,75,74,.08);
font: 500 .78125rem/1 var(--ll-font-ui); color: var(--ll-ink); cursor: pointer; }
.ll-chip[aria-pressed="true"], .ll-chip--active { background: var(--ll-ink); color: #fff; }
.ll-chiprow { display: flex; gap: var(--ll-2); overflow-x: auto; scrollbar-width: none; }
.ll-chiprow::-webkit-scrollbar { display: none; }
/* ---------- Cards ---------- */
.ll-card { background: var(--ll-surface); border: 1px solid var(--ll-border);
border-radius: var(--ll-r-card); overflow: hidden; }
.ll-card--panel { border-radius: var(--ll-r-panel); box-shadow: var(--ll-shadow-panel); }
.ll-card__media { aspect-ratio: 4 / 3; background: var(--ll-surface-sunk); position: relative; }
.ll-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-card__media .ll-badge { position: absolute; top: 12px; left: 12px; }
.ll-card__body { padding: var(--ll-4) 15px 18px; }
.ll-card__title { font: 600 1rem/1.28 var(--ll-font-ui); margin: 0; }
.ll-card__meta { font-size: var(--ll-small); color: var(--ll-ink-60); margin-top: 5px; }
.ll-card--row { display: flex; gap: 13px; align-items: center; padding: 13px 0;
border-bottom: 1px solid var(--ll-hairline); border-radius: 0; background: none; border-inline: 0; border-top: 0; }
.ll-card--row .ll-thumb { width: 70px; height: 70px; flex: none; border-radius: 12px; object-fit: cover; }
/* ---------- Pricing table ---------- */
.ll-pricing { background: var(--ll-surface); border: 1px solid var(--ll-border);
border-radius: 16px; overflow: hidden; }
.ll-pricing__head { background: var(--ll-ink); color: #fff; padding: 12px 16px; font: 600 .8125rem/1 var(--ll-font-ui); }
.ll-pricing__row { display: flex; justify-content: space-between; gap: var(--ll-3);
padding: 13px 16px; border-bottom: 1px solid var(--ll-hairline); font-size: .90625rem; }
.ll-pricing__row:last-of-type { border-bottom: 0; }
.ll-pricing__row b { font-weight: 600; }
.ll-pricing__row--featured { background: rgba(227,182,85,.10); }
.ll-pricing__note { background: var(--ll-gold-soft); padding: 11px 16px; font-size: var(--ll-small); line-height: 1.5; }
/* ---------- Summary (arvio) ---------- */
.ll-summary { background: var(--ll-surface-sunk); border-radius: 16px; padding: 15px; }
.ll-summary__line { display: flex; justify-content: space-between; font-size: .84375rem; color: var(--ll-ink-70); }
.ll-summary__line + .ll-summary__line { margin-top: 7px; }
.ll-summary__rule { height: 1px; background: rgba(31,75,74,.14); margin: 12px 0; }
.ll-summary__total { display: flex; justify-content: space-between; align-items: baseline; }
.ll-summary__total b { font: 600 1.4375rem/1 var(--ll-font-display); color: var(--ll-cta); }
.ll-summary__fine { font-size: .71875rem; line-height: 1.45; color: var(--ll-ink-60); margin-top: 7px; }
/* ---------- Forms ---------- */
.ll-field { display: grid; gap: 7px; }
.ll-input, .ll-select, .ll-textarea {
width: 100%; min-height: var(--ll-tap); padding: 13px 14px;
background: var(--ll-surface); color: var(--ll-ink);
border: 1px solid var(--ll-border-strong); border-radius: var(--ll-r-field);
font: 400 .90625rem/1.4 var(--ll-font-ui);
}
.ll-textarea { min-height: 84px; resize: vertical; }
.ll-input::placeholder, .ll-textarea::placeholder { color: var(--ll-ink-45); }
.ll-input[aria-invalid="true"] { border-color: var(--ll-cta); }
.ll-error { font-size: .75rem; color: var(--ll-cta); }
.ll-hint { font-size: .75rem; color: var(--ll-ink-60); }
/* Kestovalitsin: radiot napeiksi */
.ll-segment { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
@media (min-width: 768px) { .ll-segment { grid-template-columns: repeat(4,1fr); } }
.ll-segment__opt { border: 1.5px solid var(--ll-border-strong); background: var(--ll-surface);
border-radius: 13px; padding: 13px 14px; font: 600 .875rem/1.2 var(--ll-font-ui); cursor: pointer; }
.ll-segment__opt small { display: block; font-weight: 400; font-size: var(--ll-small); color: var(--ll-ink-60); margin-top: 3px; }
.ll-segment__opt[aria-checked="true"] { background: var(--ll-ink); border-color: var(--ll-ink); color: #fff; }
.ll-segment__opt[aria-checked="true"] small { color: rgba(255,255,255,.75); }
.ll-check { display: flex; gap: 11px; align-items: flex-start; font-size: .84375rem; line-height: 1.5; color: var(--ll-ink-80); }
.ll-switch { width: 38px; height: 22px; border-radius: 11px; background: rgba(31,75,74,.20); position: relative; flex: none; cursor: pointer; }
.ll-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
border-radius: 50%; background: #fff; transition: left var(--ll-dur) var(--ll-ease); }
.ll-switch[aria-checked="true"] { background: var(--ll-teal); }
.ll-switch[aria-checked="true"]::after { left: 19px; }
/* ---------- Notices ---------- */
.ll-note { border-radius: 14px; padding: 14px 16px; font-size: .84375rem; line-height: 1.55; }
.ll-note--gold { background: var(--ll-gold-soft); }
.ll-note--teal { background: var(--ll-teal-soft); }
.ll-note--warn { background: rgba(217,97,74,.12); }
.ll-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ll-dot--ok { background: var(--ll-teal); } .ll-dot--warn { background: var(--ll-cta); }
.ll-dot--idle { background: rgba(31,75,74,.22); }
/* ---------- Sticky mobile CTA ---------- */
.ll-stickybar { position: sticky; bottom: 0; z-index: 20;
background: var(--ll-bg); border-top: 1px solid rgba(31,75,74,.12);
padding: 12px var(--ll-gutter-m) calc(18px + env(safe-area-inset-bottom));
display: flex; gap: 10px; align-items: center; }
.ll-stickybar .ll-btn--primary { flex: 1; }
@media (min-width: 1024px) { .ll-stickybar { display: none; } }
/* ---------- Steps & FAQ (käyttötapaussivu) ---------- */
.ll-steps { display: grid; gap: var(--ll-4); }
.ll-step { display: flex; gap: 14px; }
.ll-step__n { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ll-ink); color: #fff;
display: grid; place-items: center; font: 600 .78125rem/1 var(--ll-font-mono); }
.ll-faq__item { border-top: 1px solid rgba(31,75,74,.12); padding: 14px 0; }
.ll-faq__item:last-child { border-bottom: 1px solid rgba(31,75,74,.12); }
.ll-faq__q { display: flex; justify-content: space-between; gap: var(--ll-3);
font: 600 .9375rem/1.35 var(--ll-font-ui); cursor: pointer; }
.ll-faq__a { font-size: .90625rem; line-height: 1.6; color: var(--ll-ink-80); margin-top: 8px; }
/* ---------- Timeline (varauksen tila) ---------- */
.ll-timeline { display: grid; gap: 0; }
.ll-timeline__item { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; }
.ll-timeline__item .ll-dot { margin-top: 5px; }
.ll-timeline__item[data-state="pending"] { color: var(--ll-ink-60); }
/* ---------- Admin ---------- */
.ll-admin { background: #F4F0EA; min-height: 100vh; }
.ll-admin__bar { display: flex; align-items: center; gap: 14px; background: var(--ll-ink); color: #fff; padding: 12px var(--ll-6); }
.ll-admin__tag { font: 500 .65625rem/1 var(--ll-font-mono); letter-spacing: .06em; color: rgba(255,255,255,.6); }
.ll-admin__count { background: var(--ll-cta); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: .6875rem; }
.ll-admin__split { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 1024px) { .ll-admin__split { grid-template-columns: minmax(0,1fr) 400px; } }
.ll-admin__aside { background: var(--ll-surface-admin); padding: var(--ll-5) var(--ll-6); }
.ll-table { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: 16px; overflow: hidden; }
.ll-table__head, .ll-table__row { display: grid; gap: var(--ll-3); padding: 12px 14px; align-items: center; }
.ll-table__head { background: rgba(31,75,74,.05); font: 500 .6875rem/1 var(--ll-font-mono);
letter-spacing: .04em; text-transform: uppercase; color: var(--ll-ink-60); }
.ll-table__row { border-top: 1px solid var(--ll-hairline); font-size: .84375rem; }
.ll-table__row--attention { background: rgba(227,182,85,.10); }
.ll-stat { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: 16px; padding: var(--ll-4); }
.ll-stat__n { font: 600 1.625rem/1 var(--ll-font-display); margin-top: 7px; }
/* AI-luonnos vaatii tarkistuksen ennen julkaisua */
.ll-draft { background: var(--ll-surface); border: 1.5px solid var(--ll-apricot); border-radius: 12px; padding: 13px; }
.ll-draft__excerpt { font-size: .78125rem; line-height: 1.5; color: var(--ll-ink-70);
margin-top: 8px; padding-left: 11px; border-left: 2px solid rgba(31,75,74,.15); }
/* Kalenteri */
.ll-cal { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: 16px; overflow: hidden; }
.ll-cal__row { display: grid; grid-template-columns: 220px repeat(7, 1fr); border-top: 1px solid var(--ll-hairline); align-items: center; }
.ll-cal__row:first-child { border-top: 0; background: rgba(31,75,74,.05); }
.ll-cal__booking { display: block; border-radius: 8px; padding: 7px 9px; text-align: center;
font: 600 .71875rem/1.2 var(--ll-font-ui); }
.ll-cal__booking--approved { background: var(--ll-gold); color: var(--ll-ink); }
.ll-cal__booking--active { background: rgba(33,134,122,.22); color: var(--ll-ink); }
.ll-cal__booking--conflict { background: var(--ll-cta); color: #fff; }
/* ---------- Utilities ---------- */
.ll-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ll-skeleton { background: linear-gradient(90deg, rgba(31,75,74,.06), rgba(31,75,74,.12), rgba(31,75,74,.06));
background-size: 200% 100%; animation: ll-shimmer 1.2s linear infinite; border-radius: 12px; }
@keyframes ll-shimmer { to { background-position: -200% 0; } }
/* --- site.css --- */
/* Vuokrakalu — project layer on top of the LainaLaite design system.
tokens.css + components.css are the design system and stay untouched;
everything specific to this site lives here. */
/* Loaded by a in the page, ahead of this file, so the three
stylesheets download in parallel. The @import that used to be here forced
them into three serial round trips on the critical render path. */
/* Several component classes set `display`, which beats the UA sheet's
`[hidden] { display: none }`. Make the attribute win everywhere. */
[hidden] { display: none !important; }
/* ---------- Topbar ---------- */
/* components.css gives .ll-topbar its colours only — layout is ours. */
/* The bar follows you down the page. Without this, reaching the menu from
halfway down a tool page means scrolling all the way back up first, which on
a phone is most of the cost of navigating anywhere. It gets out of the way
while you are reading forward and comes back the moment you scroll up —
the gesture people already make when they want to go somewhere else. */
.ll-topbar {
position: sticky; top: 0; z-index: 40;
transition: transform var(--ll-dur) var(--ll-ease);
}
.ll-topbar.is-hidden { transform: translateY(-100%); }
/* A bar that disappears and reappears is motion. Asked not to, it simply stays
— topbar.js reads the same preference and never sets .is-hidden. */
@media (prefers-reduced-motion: reduce) { .ll-topbar { transition: none; } }
/* Jumping to #tools or #contact must not land underneath the bar. */
html { scroll-padding-top: 84px; }
.ll-topbar__inner {
display: flex; align-items: center; gap: var(--ll-6);
max-width: var(--ll-maxw); margin: 0 auto;
padding: var(--ll-4) var(--ll-gutter-m);
}
@media (min-width: 768px) { .ll-topbar__inner { padding-inline: var(--ll-gutter-d); } }
/* .ll-topbar a in components.css is more specific than .ll-wordmark — restate it here */
.ll-topbar .ll-wordmark {
font-family: var(--ll-font-display); font-weight: 800; font-size: 1.25rem;
letter-spacing: -.02em; color: #fff; text-decoration: none; flex: none;
}
.ll-topbar .ll-wordmark em { font-style: normal; color: var(--ll-gold); }
.ll-topbar .ll-wordmark:hover { color: #fff; text-decoration: none; }
.ll-topbar__nav { display: none; gap: var(--ll-5); list-style: none; margin: 0; padding: 0; }
.ll-topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--ll-3); }
.ll-pill {
font: 500 var(--ll-label)/1 var(--ll-font-mono); letter-spacing: var(--ll-ls-label);
color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.3);
border-radius: var(--ll-r-chip); padding: 5px 11px; white-space: nowrap;
}
.ll-topbar .ll-btn--ghost {
background: transparent; color: #fff; border-color: rgba(255,255,255,.5);
min-height: 40px; font-size: .8125rem;
}
.ll-topbar .ll-btn--ghost:hover { background: rgba(255,255,255,.1); }
/* Icon + label pairs in the topbar. The label is the whole story on a wide
screen; on a phone there is no room for it and the icon carries the meaning,
so the accessible name comes from aria-label and survives the label hiding. */
.ll-topbar__end .ll-iconlink {
display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.ll-topbar__end .ll-iconlink:hover { color: #fff; text-decoration: none; }
.ll-icon {
width: 17px; height: 17px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.ll-icon--solid { fill: currentColor; stroke: none; }
/* ---- Hamburger ---- */
.ll-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0; flex: none;
background: transparent; color: #fff; cursor: pointer;
border: 1px solid rgba(255,255,255,.5); border-radius: var(--ll-r-chip);
}
.ll-burger:hover { background: rgba(255,255,255,.1); }
.ll-burger__bars { position: relative; display: block; }
.ll-burger__bars, .ll-burger__bars::before, .ll-burger__bars::after {
width: 17px; height: 2px; background: currentColor; border-radius: 1px;
}
.ll-burger__bars::before, .ll-burger__bars::after { content: ""; position: absolute; left: 0; }
.ll-burger__bars::before { top: -5px; }
.ll-burger__bars::after { top: 5px; }
/* Open: the bars become a cross. */
.ll-burger[aria-expanded="true"] .ll-burger__bars { background: transparent; }
.ll-burger[aria-expanded="true"] .ll-burger__bars::before { top: 0; transform: rotate(45deg); }
.ll-burger[aria-expanded="true"] .ll-burger__bars::after { top: 0; transform: rotate(-45deg); }
/* ---- Phone layout: icons only, nav behind the hamburger ---- */
@media (max-width: 859.98px) {
.ll-topbar__inner { flex-wrap: wrap; gap: var(--ll-3); }
.ll-iconlink__text { display: none; }
.ll-topbar__end .ll-pill.ll-iconlink { padding: 7px; }
.ll-topbar .ll-btn--ghost.ll-iconlink { width: 40px; padding: 0; justify-content: center; }
/* The panel is the same , re-laid-out below the bar on its own row. */
.ll-topbar__nav.is-open {
display: flex; flex-direction: column; gap: 0;
flex-basis: 100%; order: 3;
margin-top: var(--ll-2); border-top: 1px solid rgba(255,255,255,.16);
}
.ll-topbar__nav.is-open li + li { border-top: 1px solid rgba(255,255,255,.08); }
.ll-topbar__nav.is-open .ll-topbar__link {
display: block; padding: 13px 2px; font-size: .9375rem;
}
/* The desktop gold underline would read as a row divider here — move it to the edge. */
.ll-topbar__nav.is-open .ll-topbar__link[aria-current="page"] {
border-bottom: 0; padding: 13px 2px 13px 11px;
box-shadow: inset 3px 0 0 var(--ll-gold);
}
}
@media (min-width: 860px) {
.ll-topbar__nav { display: flex; }
.ll-burger { display: none; }
}
/* ---------- Hero ---------- */
.ll-hero { background: var(--ll-ink); color: #fff; }
.ll-hero__inner {
max-width: var(--ll-maxw); margin: 0 auto;
padding: var(--ll-6) var(--ll-gutter-m) var(--ll-12);
display: grid; gap: var(--ll-6); align-items: center;
}
@media (min-width: 768px) { .ll-hero__inner { padding-inline: var(--ll-gutter-d); } }
@media (min-width: 900px) {
.ll-hero__inner { grid-template-columns: 1.05fr .95fr; gap: 44px; padding-block: var(--ll-8) 56px; }
}
.ll-hero h1 { color: #fff; }
.ll-hero h1 em { font-style: normal; color: var(--ll-apricot); }
.ll-hero__lead { color: rgba(255,255,255,.82); max-width: 44ch; margin: var(--ll-4) 0 0; font-size: 1rem; line-height: 1.6; }
.ll-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ll-3); align-items: center; margin-top: var(--ll-6); }
.ll-hero__link { color: var(--ll-gold); font-weight: 600; font-size: .875rem; }
.ll-hero__link:hover { color: #fff; }
.ll-hero__art {
min-height: 220px; border-radius: var(--ll-r-panel); overflow: hidden;
background: repeating-linear-gradient(135deg, #37625E 0 10px, #2E5855 10px 20px);
display: none;
}
@media (min-width: 900px) { .ll-hero__art { display: block; min-height: 280px; } }
.ll-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Search card, sitting between the hero and the catalogue.
The bottom margin belongs here rather than on .ll-sectionhead: that is the
first child of .ll-shell, and `.ll-shell > *:first-child { margin-top: 0 }`
below zeroes its margin, which left the heading touching the search box. */
.ll-searchwrap { max-width: var(--ll-maxw); margin: var(--ll-5) auto var(--ll-8); padding-inline: var(--ll-gutter-m); position: relative; z-index: 3; }
@media (min-width: 768px) { .ll-searchwrap { padding-inline: var(--ll-gutter-d); } }
.ll-search {
display: flex; gap: var(--ll-3); align-items: center;
background: var(--ll-surface); border: 1px solid var(--ll-border);
border-radius: 16px; box-shadow: var(--ll-shadow-panel); padding: var(--ll-2) var(--ll-2) var(--ll-2) var(--ll-4);
}
.ll-search input {
flex: 1; min-width: 0; min-height: 44px; border: 0; background: none;
font: 400 .9375rem var(--ll-font-ui); color: var(--ll-ink);
}
.ll-search input:focus { outline: none; }
.ll-search input::placeholder { color: var(--ll-ink-45); }
.ll-search .ll-btn { min-height: 44px; }
/* ---------- Section headers ---------- */
.ll-sectionhead {
display: flex; flex-wrap: wrap; gap: var(--ll-3);
align-items: baseline; justify-content: space-between;
margin: var(--ll-8) 0 var(--ll-4);
}
.ll-sectionhead .ll-h2 { margin: 0; }
/* ---------- Tool cards ---------- */
.ll-card { display: flex; flex-direction: column; }
.ll-card__body > .ll-card__meta { margin-top: var(--ll-2); }
.ll-card__body { display: flex; flex-direction: column; flex: 1; }
.ll-card__desc {
font-size: var(--ll-small); line-height: 1.5; color: var(--ll-ink-70);
margin-top: 6px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-card__foot { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding-top: var(--ll-3); }
.ll-card__cta { margin-top: var(--ll-3); }
/* Image carousel inside .ll-card__media.
The media box is a flex item, so its `min-height: auto` would let a tall
portrait photo win over the 4:3 aspect-ratio. Pin the image instead. */
.ll-card__media { flex: none; min-height: 0; overflow: hidden; }
.ll-card__media > img,
.ll-card__media > .ll-card__imglink { position: absolute; inset: 0; width: 100%; height: 100%; }
.ll-card__media > img { object-fit: cover; }
/* The picture is the obvious thing to click; the arrows sit above it. */
.ll-card__imglink { display: block; }
.ll-card__imglink > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* …which also means the badge needs to be lifted above it */
.ll-card__media .ll-badge { z-index: 2; }
.ll-card__media--empty { display: grid; place-items: center; }
.ll-card__media--empty span { font: 400 1.75rem/1 var(--ll-font-ui); opacity: .35; }
.ll-imgnav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
background: rgba(31,75,74,.70); color: #fff;
font: 400 1.4rem/1 var(--ll-font-ui); cursor: pointer; z-index: 2;
display: grid; place-items: center;
opacity: 0; transition: opacity var(--ll-dur) var(--ll-ease);
}
.ll-card__media:hover .ll-imgnav,
.ll-gallery__main:hover .ll-imgnav,
.ll-imgnav:focus-visible { opacity: 1; }
.ll-imgnav:hover { background: rgba(31,75,74,.92); }
.ll-imgnav--prev { left: 8px; }
.ll-imgnav--next { right: 8px; }
.ll-imgcount {
position: absolute; right: 12px; bottom: 12px;
background: rgba(31,75,74,.72); color: #fff; border-radius: var(--ll-r-badge);
padding: 3px 8px; font: 500 .6875rem/1.2 var(--ll-font-mono);
}
@media (hover: none) { .ll-imgnav { opacity: 1; } }
/* ---------- "Näin se toimii" steps ---------- */
/* auto-fit rather than a fixed column count: the front page has three of these
and the FAQ has four, and a hard repeat(3, 1fr) pushed the FAQ's fourth card
onto a row of its own. Columns now follow the available width. */
.ll-howto {
display: grid; gap: var(--ll-4); margin: var(--ll-8) 0;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
@media (min-width: 768px) { .ll-howto { gap: var(--ll-5); } }
.ll-howto__card { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-r-card); padding: var(--ll-5); }
.ll-howto__n { font: 500 var(--ll-label)/1 var(--ll-font-mono); letter-spacing: .08em; color: var(--ll-teal); }
.ll-howto__t { font: 600 1rem/1.3 var(--ll-font-ui); margin-top: var(--ll-2); }
.ll-howto__d { font-size: var(--ll-small); line-height: 1.55; color: var(--ll-ink-70); margin-top: 5px; }
/* ---------- Contact ---------- */
.ll-contact { display: grid; gap: var(--ll-6); margin: var(--ll-8) 0; }
@media (min-width: 900px) { .ll-contact { grid-template-columns: 1fr 1fr; gap: var(--ll-8); } }
.ll-contact__method { display: flex; gap: var(--ll-3); align-items: flex-start; padding: var(--ll-3) 0; border-bottom: 1px solid var(--ll-hairline); }
.ll-contact__method:last-child { border-bottom: 0; }
.ll-contact__icon { font-size: 1.25rem; line-height: 1.4; flex: none; }
/* ---------- Footer ---------- */
.ll-footer__inner {
max-width: var(--ll-maxw); margin: 0 auto;
padding: var(--ll-8) var(--ll-gutter-m);
display: grid; gap: var(--ll-5);
}
@media (min-width: 768px) { .ll-footer__inner { padding-inline: var(--ll-gutter-d); } }
@media (min-width: 860px) { .ll-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--ll-6); } }
.ll-footer__brand .ll-wordmark { color: #fff; display: block; }
.ll-footer__tagline { margin-top: var(--ll-2); max-width: 34ch; }
.ll-footer__col h3 { color: #fff; font: 600 .8125rem/1.9 var(--ll-font-ui); margin: 0; }
.ll-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ll-footer__legal {
border-top: 1px solid rgba(255,255,255,.14);
padding: var(--ll-4) var(--ll-gutter-m);
max-width: var(--ll-maxw); margin: 0 auto;
font-size: .75rem; color: rgba(255,255,255,.55);
}
@media (min-width: 768px) { .ll-footer__legal { padding-inline: var(--ll-gutter-d); } }
/* ---------- Content pages ---------- */
.ll-pagehead { background: var(--ll-surface-sunk); border-bottom: 1px solid var(--ll-border); }
.ll-pagehead__inner { max-width: var(--ll-maxw); margin: 0 auto; padding: var(--ll-8) var(--ll-gutter-m); }
@media (min-width: 768px) { .ll-pagehead__inner { padding-inline: var(--ll-gutter-d); } }
/* The page header is a full-bleed band; content butting straight up against its
bottom border read as a mistake. Give the first block room to breathe. */
.ll-pagehead + .ll-shell,
.ll-pagehead + main .ll-shell { padding-top: var(--ll-8); }
.ll-shell > .ll-article:first-child,
.ll-shell > *:first-child { margin-top: 0; }
/* One width for everything in an article — paragraphs, lists and note boxes
all run to the column edge. An earlier attempt kept prose at a narrower
typographic measure, but next to a full-width note box that reads as the
text being cut off rather than as a deliberate measure. */
.ll-article { max-width: none; }
.ll-article h2 { font-family: var(--ll-font-display); font-weight: 400; font-size: var(--ll-h2);
letter-spacing: -.02em; margin: var(--ll-8) 0 var(--ll-3); }
.ll-article h3 { font: 600 var(--ll-h3)/1.4 var(--ll-font-ui); margin: var(--ll-6) 0 var(--ll-2); }
.ll-article p, .ll-article li { color: var(--ll-ink-80); }
.ll-article ul, .ll-article ol { padding-left: 1.2em; }
.ll-article li { margin-bottom: 6px; }
.ll-article > :first-child { margin-top: 0; }
/* FAQ answers are UI rows rather than essays — full width reads better and
matches the search box and category cards above them. */
.ll-faq__a > p, .ll-faq__a > ul { max-width: none; }
/* The last block before the dark footer needs separation, or a coloured note
box sits flush against it and the two read as one element. */
main { padding-bottom: var(--ll-12); }
.ll-shell > :last-child { margin-bottom: 0; }
/* FAQ accordion — components.css styles the parts, the open/closed state is ours */
.ll-faq__q { width: 100%; background: none; border: 0; text-align: left; padding: 0; color: inherit; }
.ll-faq__icon { font-size: 1rem; color: var(--ll-ink-60); transition: transform var(--ll-dur) var(--ll-ease); flex: none; }
.ll-faq__q.active .ll-faq__icon { transform: rotate(180deg); }
.ll-faq__a { max-height: 0; overflow: hidden; margin-top: 0;
transition: max-height var(--ll-dur) var(--ll-ease), margin-top var(--ll-dur) var(--ll-ease); }
.ll-faq__a.active { max-height: 1200px; margin-top: var(--ll-2); }
.ll-faq__a > :first-child { margin-top: 0; }
.ll-howto__card .icon { font-size: 1.5rem; }
.ll-howto__card h3 { font: 600 1rem/1.3 var(--ll-font-ui); margin: var(--ll-2) 0 0; }
.ll-howto__card p { font-size: var(--ll-small); color: var(--ll-ink-70); margin: 5px 0 0; }
.ll-howto__card[onclick] { cursor: pointer; }
/* ---------- Breadcrumb ---------- */
.ll-crumbs { font: 400 .71875rem/1.6 var(--ll-font-mono); color: var(--ll-ink-60); padding: var(--ll-5) 0 var(--ll-3); }
.ll-crumbs a { color: var(--ll-ink-60); }
.ll-crumbs a:hover { color: var(--ll-teal); }
/* The booking modal names the tool on its own line. It used to be a label/value
pair like the rest of the summary, but "Laite" told the reader nothing they
did not already know, and a long tool name left no gap between the two. */
.ll-summary__tool {
font: 600 1rem/1.35 var(--ll-font-display);
color: var(--ll-ink); margin-bottom: var(--ll-2);
}
/* A category badge on a tool page is a link to that category's listing. It
should still read as a badge, not as body-text link. */
a.ll-badge--info { text-decoration: none; }
a.ll-badge--info:hover { background: var(--ll-teal); color: #fff; text-decoration: none; }
/* ---------- Tool page: where the booking panel sits ---------- */
/* The panel is the point of the page, so it comes right after the description
in source order — which is the order a phone gets. On a wide screen the
explicit rows put it back in the sticky sidebar, with the rest of the
article flowing underneath the intro it follows. Row gap is zero because
every section in the column already carries its own top margin. */
.ll-split--tool { row-gap: 0; }
.ll-split--tool > .ll-split__aside { margin-top: var(--ll-6); }
@media (min-width: 1024px) {
.ll-split--tool { grid-template-rows: auto 1fr; column-gap: var(--ll-8); }
.ll-split--tool > .ll-split__main { grid-column: 1; grid-row: 1; }
.ll-split--tool > .ll-split__more { grid-column: 1; grid-row: 2; }
.ll-split--tool > .ll-split__aside { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}
/* ---------- Product gallery ---------- */
.ll-gallery__main {
aspect-ratio: 4 / 3; border-radius: var(--ll-r-panel); overflow: hidden;
background: var(--ll-surface-sunk); position: relative;
}
.ll-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-gallery__thumbs { display: flex; gap: 10px; margin-top: var(--ll-3); overflow-x: auto; scrollbar-width: none; }
.ll-gallery__thumbs::-webkit-scrollbar { display: none; }
.ll-gallery__thumb {
width: 92px; height: 70px; flex: none; border-radius: 10px; overflow: hidden;
border: 0; padding: 0; background: var(--ll-surface-sunk); cursor: pointer;
}
.ll-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-gallery__thumb[aria-current="true"] { outline: 2px solid var(--ll-ink); outline-offset: 2px; }
/* Spec tiles */
.ll-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ll-4); margin-top: var(--ll-6); }
.ll-spec { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: 14px; padding: 15px; }
.ll-spec__v { font: 600 .9375rem/1.3 var(--ll-font-ui); margin-top: 6px; }
/* ---------- Modal ---------- */
.ll-modal {
position: fixed; inset: 0; z-index: 100; display: none;
background: rgba(31,75,74,.45); padding: var(--ll-4);
overflow-y: auto; align-items: flex-start; justify-content: center;
}
.ll-modal.is-open { display: flex; }
.ll-modal__panel {
background: var(--ll-bg); border-radius: var(--ll-r-panel);
box-shadow: var(--ll-shadow-panel); width: 100%; max-width: 560px;
margin: auto; overflow: hidden;
}
.ll-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--ll-3);
background: var(--ll-ink); color: #fff; padding: var(--ll-4) var(--ll-5);
}
.ll-modal__head .ll-h2 { color: #fff; margin: 0; }
.ll-modal__close {
background: none; border: 0; color: rgba(255,255,255,.8);
font: 400 1.5rem/1 var(--ll-font-ui); cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.ll-modal__close:hover { color: #fff; background: rgba(255,255,255,.12); }
.ll-modal__body { padding: var(--ll-5); display: grid; gap: var(--ll-4); }
.ll-formrow { display: grid; gap: var(--ll-4); }
@media (min-width: 560px) { .ll-formrow { grid-template-columns: 1fr 1fr; } }
/* ---------- Feedback ---------- */
.ll-loading { display: grid; place-items: center; gap: var(--ll-3); padding: var(--ll-12) 0; color: var(--ll-ink-60); }
.ll-spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 2.5px solid var(--ll-border-strong); border-top-color: var(--ll-teal);
animation: ll-spin .8s linear infinite;
}
@keyframes ll-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ll-spinner { animation-duration: 2.4s; } }
.ll-empty { padding: var(--ll-10) 0; text-align: center; color: var(--ll-ink-60); }
/* ---------- Admin ---------- */
.ll-admin__main { padding: var(--ll-5) var(--ll-6); display: grid; gap: var(--ll-5); align-content: start; }
.ll-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ll-4); }
.ll-tabs { display: flex; gap: var(--ll-2); flex-wrap: wrap; }
.ll-panel { display: none; }
.ll-panel.is-active { display: grid; gap: var(--ll-4); }
.ll-table__head, .ll-table__row { grid-template-columns: var(--ll-cols, 2fr 1fr 1fr auto); }
.ll-table__actions { display: flex; gap: var(--ll-2); flex-wrap: wrap; }
.ll-table__actions .ll-btn { min-height: 36px; padding-inline: var(--ll-3); font-size: .78125rem; }
.ll-admin__login { min-height: 100vh; display: grid; place-items: center; padding: var(--ll-6) var(--ll-gutter-m); }
.ll-admin__login .ll-card--panel { width: 100%; max-width: 400px; padding: var(--ll-8); }
/* Toast */
.ll-toast {
position: fixed; left: 50%; bottom: var(--ll-6); transform: translateX(-50%);
z-index: 120; max-width: min(92vw, 460px);
padding: var(--ll-3) var(--ll-5); border-radius: 14px;
background: var(--ll-ink); color: #fff; font-size: .84375rem;
box-shadow: var(--ll-shadow-panel);
}
.ll-toast--error { background: var(--ll-cta); }
/* ---------- Away notice ---------- */
.ll-awaybar {
background: var(--ll-gold-soft);
border-bottom: 1px solid rgba(227,182,85,.5);
color: var(--ll-ink);
}
.ll-awaybar--now { background: var(--ll-gold); }
.ll-awaybar__inner {
max-width: var(--ll-maxw); margin: 0 auto;
padding: var(--ll-3) var(--ll-gutter-m);
display: flex; gap: var(--ll-3); align-items: flex-start;
font-size: var(--ll-small); line-height: 1.5;
}
@media (min-width: 768px) { .ll-awaybar__inner { padding-inline: var(--ll-gutter-d); } }
.ll-awaybar__inner p { margin: 0; }
/* ---------------------------------------------------------------------------
Reviews
Shown under a tool. The byline is a date because that is all we store.
--------------------------------------------------------------------------- */
.ll-reviews {
list-style: none;
margin: var(--ll-4) 0 0;
padding: 0;
display: grid;
gap: var(--ll-3);
}
.ll-review {
border: 1px solid var(--ll-hairline);
border-radius: var(--ll-r-card);
padding: var(--ll-4);
background: var(--ll-surface);
}
.ll-review__head {
display: flex;
align-items: baseline;
gap: var(--ll-3);
flex-wrap: wrap;
}
.ll-review__stars {
color: var(--ll-gold);
letter-spacing: .08em;
}
.ll-review__by {
font-size: .875rem;
color: var(--ll-ink-60);
}
.ll-review__text {
margin: var(--ll-2) 0 0;
white-space: pre-line;
}
/* ---------------------------------------------------------------------------
Icon button — used for "jaa linkki" next to a tool's badges
--------------------------------------------------------------------------- */
.ll-iconbtn {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--ll-border);
border-radius: 999px;
background: var(--ll-surface);
color: var(--ll-ink-70);
cursor: pointer;
transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ll-iconbtn:hover {
color: var(--ll-ink);
border-color: var(--ll-border-strong);
}
.ll-iconbtn:focus-visible {
outline: 2px solid var(--ll-teal);
outline-offset: 2px;
}
/* Confirmation after the link is copied */
.ll-iconbtn.is-done {
color: var(--ll-teal);
border-color: var(--ll-teal);
}
/* Per-day figure beside a tier price — secondary to the total */
.ll-pricing__unit {
font-family: var(--ll-font-ui);
font-size: var(--ll-small);
font-weight: 400;
color: var(--ll-ink-60);
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
Contrast corrections over the design system
---------------------------------------------------------------------------
Lighthouse found every muted grey sitting between 3.2:1 and 4.4:1 against
the page — just under the 4.5:1 WCAG AA threshold for small text. The worst
were the field labels at 3.28:1, which are 11px and genuinely hard to read.
tokens.css is vendored and kept diff-able against the design handoff, so the
corrections live here instead. Same hue throughout, only darker: ink-60 and
ink-45 move up to .78 and .80 alpha, which clears AA on both the white card
and the off-white page.
--------------------------------------------------------------------------- */
:root {
--ll-ink-70: rgba(31, 75, 74, .78); /* card descriptions, .ll-muted */
--ll-ink-60: rgba(31, 75, 74, .78);
--ll-ink-45: rgba(31, 75, 74, .80); /* field labels — the worst at 3.28 */
/* The two brand colours, darkened by the smallest amount that clears
4.5:1. Same hue, a shade deeper — the teal moves 4.17 -> 4.56 on the
page background, and the CTA takes white text from 3.65 -> 4.52. */
--ll-teal: #1F7F74; /* was #21867A */
--ll-cta: #C05641; /* was #D9614A */
}
/* The footer's fine print on the dark ground was 4.17:1. */
.ll-footer__legal { color: rgba(255, 255, 255, .72); }
/* Gallery thumbnails become interactive once /js/gallery.js loads */
.ll-gallery__thumb { cursor: pointer; transition: opacity .12s ease, outline-color .12s ease; }
.ll-gallery__thumb:hover { opacity: .82; }
.ll-gallery__thumb.is-active { outline: 2px solid var(--ll-teal); outline-offset: 1px; }
.ll-gallery__thumb:focus-visible { outline: 2px solid var(--ll-teal); outline-offset: 2px; }