/*
Theme Name: Asuntokauppa 2.0
Theme URI: https://asuntokauppa.com
Author: Asuntokauppa.com
Description: Asuntokauppa.comin lohkoteema. Neljä väriä, yksi fonttiperhe, kolme pyöristystä, kaksi varjoa.
Version: 0.3.5
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: asuntokauppa-2-0
*/
/* ==========================================================================
Tämä tiedosto on SUORA KOPIO hyväksytystä luonnoksesta design/d-kirkas.html.
Älä lisää sääntöjä tiedoston loppuun ohittamaan aiempia — aiemmin niin
syntyi 31 päällekkäistä .kortti-määrittelyä ja komponentit rikkoutuivat
arvaamattomasti. Muokkaa sitä sääntöä joka on jo olemassa.
========================================================================== */
/* ============================================================
ASUNTOKAUPPA.COM — suunta "Kirkas ja lämpimin"
Järjestelmä: 4 väriä · 3 radiusta · 2 varjoa · 1 fonttiperhe
============================================================ */
:root{
/* --- 4 perusväriä. Kaikki muut sävyt johdetaan läpinäkyvyydellä. --- */
--vihrea:#06402B;
--minttu:#E6F0EB;
--musta:#000000;
--valkoinen:#FFFFFF;
/* --- johdetut --- */
--teksti: rgba(0,0,0,.86);
--teksti-himmea: rgba(0,0,0,.60);
--teksti-kevyt: rgba(0,0,0,.55);
--viiva: rgba(6,64,43,.14);
--viiva-vahva: rgba(6,64,43,.28);
--valk-himmea: rgba(255,255,255,.78);
--valk-kevyt: rgba(255,255,255,.60);
/* --- ainoa poikkeus: VIP-merkin kulta --- */
--kulta:#D4BE7F;
/* --- kolme pyöristystä --- */
--r-s:12px;
--r-m:20px;
--r-p:999px;
/* --- kaksi varjoa --- */
--varjo-1: 0 1px 2px rgba(6,64,43,.05), 0 10px 26px rgba(6,64,43,.07);
--varjo-2: 0 2px 4px rgba(6,64,43,.06), 0 22px 48px rgba(6,64,43,.16);
/* --- rytmi --- */
--leveys:1240px;
--kapea:760px;
/* Oli clamp(4.5rem,8vw,8rem) — osioiden väli tuntui liian väljältä
pitkillä sivuilla, joten skaalaa kavennettiin. */
--osio: clamp(3.4rem, 5.6vw, 5.6rem);
--reuna: clamp(1.15rem, 4vw, 2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
line-height:1.72;
font-weight:400;
color:var(--teksti);
background:var(--valkoinen);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
/* ---------- Typografia ---------- */
h1,h2,h3,h4{margin:0;color:var(--vihrea);font-weight:300;letter-spacing:-.015em;line-height:1.12}
.h-jatti{
font-size:clamp(2.5rem,7.2vw,4.9rem);
font-weight:200;
line-height:1.02;
letter-spacing:-.028em;
}
.h-iso{font-size:clamp(1.85rem,3.5vw,3rem);line-height:1.1}
.h-keski{font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:400;line-height:1.2}
.h-pieni{font-size:clamp(1.08rem,1.5vw,1.25rem);font-weight:500;line-height:1.3;letter-spacing:-.01em}
/* Tarra = osion mikro-otsikko. Rakenteellinen, ei koriste. */
.tarra{
display:inline-block;
margin:0 0 1.1rem;
font-size:.7rem;
font-weight:700;
letter-spacing:.19em;
text-transform:uppercase;
color:rgba(6,64,43,.74);
}
.tarra--valkea{color:var(--valk-himmea)}
.ingressi{
font-size:clamp(1.06rem,1.35vw,1.22rem);
font-weight:300;
line-height:1.66;
color:var(--teksti-himmea);
max-width:62ch;
}
.ingressi--valkea{color:rgba(255,255,255,.9)}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
/* ---------- Rakenne ---------- */
.rajaus{width:100%;max-width:var(--leveys);margin-inline:auto;padding-inline:var(--reuna)}
.rajaus--kapea{max-width:var(--kapea)}
.osio{padding-block:var(--osio)}
.osio--minttu{background:var(--minttu)}
.osio--vihrea{background:var(--vihrea);color:rgba(255,255,255,.88)}
.osio--vihrea h2,.osio--vihrea h3{color:var(--valkoinen)}
.osio--tiivis{padding-block:calc(var(--osio) * .62)}
.osio-otsikko{max-width:38ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.osio-otsikko--keskitetty{margin-inline:auto;text-align:center;max-width:44ch}
.osio-otsikko p{margin-top:1.1rem}
/* ---------- Aaltoerotin (signature-elementti) ---------- */
.aalto{line-height:0;position:relative;z-index:2}
.aalto svg{display:block;width:100%;height:clamp(38px,4.6vw,78px)}
.aalto--valk{background:var(--valkoinen)}
.aalto--mintt{background:var(--minttu)}
.aalto--vihr{background:var(--vihrea)}
/* ---------- Napit: yksi nappi, koot sm/md/lg ---------- */
.nappi{
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
font-family:inherit;
font-size:.86rem;
font-weight:600;
letter-spacing:.045em;
line-height:1;
padding:1.05rem 1.7rem;
border-radius:var(--r-p);
border:1.5px solid transparent;
background:var(--vihrea);
color:var(--valkoinen);
text-decoration:none;
cursor:pointer;
transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.nappi:hover{background:color-mix(in srgb,var(--vihrea) 86%,#fff);transform:translateY(-2px);box-shadow:0 12px 24px rgba(6,64,43,.22)}
.nappi--toinen{background:transparent;border-color:var(--viiva-vahva);color:var(--vihrea)}
.nappi--toinen:hover{background:var(--minttu);border-color:var(--vihrea);box-shadow:none}
.nappi--haamu{background:transparent;border-color:rgba(255,255,255,.55);color:var(--valkoinen)}
.nappi--haamu:hover{background:rgba(255,255,255,.14);border-color:var(--valkoinen);box-shadow:none}
.nappi--vaalea{background:var(--valkoinen);color:var(--vihrea)}
.nappi--vaalea:hover{background:var(--minttu);color:var(--vihrea)}
.nappi--s{padding:.72rem 1.1rem;font-size:.75rem;letter-spacing:.06em}
.nappi--l{padding:1.25rem 2.15rem;font-size:.95rem}
.nappi--taysi{width:100%}
/* tekstilinkki nuolella */
.linkki-nuoli{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.84rem;font-weight:600;letter-spacing:.05em;
color:var(--vihrea);text-decoration:none;
border-bottom:1.5px solid var(--viiva-vahva);
padding-bottom:.28rem;
transition:border-color .25s ease,gap .25s ease;
}
.linkki-nuoli:hover{border-color:var(--vihrea);gap:.85rem}
.linkki-nuoli--valkea{color:var(--valkoinen);border-color:rgba(255,255,255,.4)}
.linkki-nuoli--valkea:hover{border-color:var(--valkoinen)}
/* ---------- Fokus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
outline:2.5px solid var(--vihrea);
outline-offset:3px;
border-radius:4px;
}
.osio--vihrea a:focus-visible,.osio--vihrea button:focus-visible,
.osio--vihrea input:focus-visible,.tunnus a:focus-visible,
.paanavi a:focus-visible,.jalki a:focus-visible,.hero a:focus-visible{
outline-color:var(--valkoinen);
}
/* ============================================================
1. YLÄTUNNISTE — yksi header, sticky, yksi valikko
============================================================ */
.ylatunnus{
position:fixed;inset:0 0 auto 0;z-index:90;
background:transparent;
border-bottom:1px solid transparent;
transition:background .38s ease,border-color .38s ease,padding .38s ease;
/* Pehmuste on tarkoituksella pienempi kuin logo suuri: logo määrää rivin
korkeuden, joten kun sitä kasvatettiin, pehmustetta pienennettiin saman
verran. Ylätunnisteen kokonaiskorkeus pysyy siis ennallaan (~86px). */
padding-block:clamp(.6rem,1.1vw,1rem);
}
.ylatunnus.on-vieritetty{
background:var(--vihrea);
border-bottom-color:rgba(255,255,255,.12);
padding-block:.45rem;
}
.ylatunnus__sisus{
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
width:100%;max-width:var(--leveys);margin-inline:auto;padding-inline:var(--reuna);
}
.tunnus{display:flex;align-items:center;flex-shrink:0}
.tunnus img{
height:clamp(36px,4.3vw,54px);width:auto;
transition:height .38s ease;
}
.on-vieritetty .tunnus img{height:clamp(32px,3.5vw,44px)}
.paanavi{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.9rem)}
.paanavi a{
font-size:.74rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
color:var(--valkoinen);text-decoration:none;
position:relative;padding-block:.35rem;
transition:color .22s ease;
}
.paanavi a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
background:var(--minttu);transition:right .3s ease;
}
.paanavi a:hover::after{right:0}
.paanavi a:hover{color:var(--minttu)}
.paanavi .pilleri-linkki{
background:var(--minttu);color:var(--vihrea);
padding:.62rem 1.1rem;border-radius:var(--r-p);
font-weight:600;
}
.paanavi .pilleri-linkki::after{display:none}
.paanavi .pilleri-linkki:hover{background:var(--valkoinen);color:var(--vihrea)}
.hampurilainen{
display:none;background:none;border:1px solid rgba(255,255,255,.55);
border-radius:var(--r-s);
width:46px;height:42px;cursor:pointer;
align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.hampurilainen span{display:block;width:19px;height:1.5px;background:var(--valkoinen);transition:transform .3s ease,opacity .3s ease}
.valikko-auki .hampurilainen span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.valikko-auki .hampurilainen span:nth-child(2){opacity:0}
.valikko-auki .hampurilainen span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:960px){
.hampurilainen{display:flex}
.paanavi{
position:fixed;inset:0 auto 0 0;width:min(86vw,340px);
background:var(--vihrea);
flex-direction:column;align-items:flex-start;justify-content:center;
gap:1.6rem;padding:2rem var(--reuna);
transform:translateX(-102%);
transition:transform .42s cubic-bezier(.4,0,.2,1),box-shadow .42s ease;
/* Varjo läpinäkyvänä suljettuna. Valikko on piilossa vain 102 %
omalla leveydellään, joten 20 px sivuun ja 60 px sumennettu varjo
ylsi noin 80 pikseliä näkyvälle alueelle ja näkyi tummana raitana
vasemmassa reunassa koko sivun korkeudelta.
Läpinäkyvä arvo eikä none, koska none-arvosta animointi ei ole
kaikissa selaimissa luotettavaa. */
box-shadow:20px 0 60px rgba(0,0,0,0);
}
.valikko-auki .paanavi{
transform:translateX(0);
box-shadow:20px 0 60px rgba(0,0,0,.3);
}
.paanavi a{font-size:.94rem;letter-spacing:.09em}
.paanavi .pilleri-linkki{margin-top:.6rem}
}
/* ============================================================
2. HERO
============================================================ */
.hero{
position:relative;
min-height:100svh;
display:flex;align-items:center;
padding-top:clamp(7rem,14vw,10rem);
padding-bottom:clamp(8rem,13vw,11rem);
isolation:isolate;
background-color:var(--vihrea);
background-image:linear-gradient(150deg,color-mix(in srgb,var(--vihrea) 74%,#000) 0%,var(--vihrea) 48%,color-mix(in srgb,var(--vihrea) 80%,#fff) 100%);
overflow:hidden;
}
.hero__kuvat{position:absolute;inset:0;z-index:-2}
.hero__kuva{
position:absolute;inset:0;
background-size:cover;background-position:50% 48%;
opacity:0;
animation:heroFade 49s infinite;
}
.hero__kuva:nth-child(1){animation-delay:0s}
.hero__kuva:nth-child(2){animation-delay:7s}
.hero__kuva:nth-child(3){animation-delay:14s}
.hero__kuva:nth-child(4){animation-delay:21s}
.hero__kuva:nth-child(5){animation-delay:28s}
.hero__kuva:nth-child(6){animation-delay:35s}
.hero__kuva:nth-child(7){animation-delay:42s}
@keyframes heroFade{
0%{opacity:0}
4%{opacity:1}
10.2%{opacity:1}
14.3%{opacity:0}
100%{opacity:0}
}
.hero__peite{
position:absolute;inset:0;z-index:-1;
background:
linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(6,64,43,.60) 46%, rgba(6,64,43,.55) 100%);
}
.hero__sisus{position:relative;z-index:1;max-width:900px}
.hero h1{color:var(--valkoinen);margin-bottom:1.6rem}
.hero h1 em{font-style:normal;font-weight:600;display:block}
.hero .ingressi{margin-bottom:2.6rem;max-width:58ch}
.hero__napit,.napit{display:flex;flex-wrap:wrap;gap:.85rem}
/* bottom:-3px eikä -1px: hero-aalto on absoluuttisesti sijoitettu ja
kiinnitetty alareunastaan, joten sen päällekkäisyyttä seuraavan osion kanssa
säädetään tästä eikä marginaalilla. Yhden pikselin limitys ei riittänyt —
SVG:n murtopikselikorkeus jätti heron vihreää näkyviin ohuena raitana
valkoisen osion yläreunaan. Limittyvä osa on SVG:n alareunaa, joka on jo
seuraavan osion väriä, ja pointer-events:none estää klikkausten peittymisen. */
.hero__aalto{position:absolute;left:0;right:0;bottom:-3px;z-index:1;line-height:0;pointer-events:none}
.hero__aalto svg{display:block;width:104%;margin-left:-2%;height:clamp(48px,6vw,92px)}
.hero__aalto svg:last-child{position:absolute;left:0;bottom:0;opacity:.45;animation:aaltoLiike 19s ease-in-out infinite alternate}
@keyframes aaltoLiike{
from{transform:translateX(-1.6%)}
to{transform:translateX(1.6%)}
}
/* Hero-vihje ("Selaa kohteita") on poistettu sivupohjasta. Sääntö jää tähän
varmistukseksi: jos etusivun sivupohjaa on muokattu sivueditorissa, merkkaus
tulee tietokannasta eikä tiedoston muutos yksin poista sitä näkyvistä. */
.hero__vihje{display:none}
/* ============================================================
AVAINLUKU — järjestelmän kärkikappale
============================================================ */
.luvut{
position:relative;overflow:hidden;
background:var(--minttu);
border-radius:var(--r-s);
padding:1.05rem 1.15rem;
display:grid;grid-template-columns:1fr 1fr;gap:.85rem;
}
.luvut--tiedot{grid-template-columns:1fr 1fr;row-gap:.95rem}
.luvut::after{
content:"";position:absolute;right:-14px;bottom:-16px;width:96px;height:52px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-size:contain;
pointer-events:none;
}
.luku{position:relative;z-index:1;min-width:0}
.luku__tarra{
display:block;
font-size:.605rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(6,64,43,.74);
margin-bottom:.22rem;
}
.luku__arvo{
display:block;
font-size:clamp(1.32rem,2.4vw,1.72rem);
font-weight:300;
line-height:1.05;
letter-spacing:-.022em;
color:var(--vihrea);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.luku__arvo--pieni{font-size:clamp(.94rem,1.3vw,1.02rem);font-weight:500;letter-spacing:0}
.luku__arvo--miinus{color:rgba(0,0,0,.5)}
/* Iso variantti — luottamusrivi ja kaupungit */
.luvut--iso{background:var(--valkoinen);padding:clamp(1.5rem,2.6vw,2.1rem);border-radius:var(--r-m);grid-template-columns:1fr}
.luvut--iso .luku__arvo{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:200}
.luvut--iso .luku__tarra{font-size:.64rem;margin-bottom:.45rem}
/* ---------- Luottamusrivi ---------- */
.luottamus{
position:relative;z-index:5;
margin-top:calc(-1 * clamp(3rem,6vw,5.5rem));
}
.luottamus__ruudukko{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--viiva);
border-radius:var(--r-m);
overflow:hidden;
box-shadow:var(--varjo-2);
}
.luottamus__solu{
background:var(--valkoinen);
padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1.1rem,2vw,1.7rem);
text-align:left;
}
.luottamus__arvo{
display:block;
font-size:clamp(1.85rem,3.3vw,2.7rem);
font-weight:200;line-height:1;letter-spacing:-.03em;
color:var(--vihrea);
font-variant-numeric:tabular-nums;
margin-bottom:.5rem;
}
.luottamus__selite{
display:block;font-size:.78rem;line-height:1.45;
color:var(--teksti-himmea);
}
@media (max-width:820px){
.luottamus__ruudukko{grid-template-columns:1fr 1fr}
}
/* ============================================================
SUODATINPANEELI — yksi hakukokemus
============================================================ */
.suodatin{
display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
padding:.75rem;
background:var(--minttu);
border-radius:var(--r-p);
margin-bottom:clamp(1.8rem,3vw,2.6rem);
}
.suodatin__valilehdet{display:flex;flex-wrap:wrap;gap:.3rem}
.valilehti{
font-family:inherit;font-size:.73rem;font-weight:600;letter-spacing:.07em;
padding:.68rem 1.15rem;border-radius:var(--r-p);
border:none;background:transparent;color:rgba(6,64,43,.78);cursor:pointer;
transition:background .22s ease,color .22s ease;
}
.valilehti:hover{background:rgba(255,255,255,.7);color:var(--vihrea)}
.valilehti[aria-pressed="true"]{background:var(--vihrea);color:var(--valkoinen)}
.suodatin__loppu{margin-left:auto;display:flex;align-items:center;gap:.7rem;padding-right:.4rem}
.suodatin__tulos{font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(6,64,43,.75);white-space:nowrap}
.kentta-mini{
font-family:inherit;font-size:.76rem;font-weight:500;color:var(--vihrea);
background:var(--valkoinen);border:1px solid transparent;
border-radius:var(--r-p);padding:.66rem 1rem;cursor:pointer;
transition:border-color .2s ease;
}
.kentta-mini:hover{border-color:var(--viiva-vahva)}
@media (max-width:700px){
.suodatin{border-radius:var(--r-m)}
/* Välilehdet vierivät yhtenä rivinä sen sijaan että rivittyisivät rikki */
.suodatin__valilehdet{
flex-wrap:nowrap;width:100%;overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-ms-overflow-style:none;
}
.suodatin__valilehdet::-webkit-scrollbar{display:none}
.valilehti{white-space:nowrap;flex:0 0 auto}
.suodatin__loppu{margin-left:0;width:100%;padding:.3rem .4rem 0;justify-content:space-between}
.suodatin__loppu .kentta-mini{flex:1 1 0;min-width:0}
}
/* ============================================================
3. KOHDEKORTTI — yksi kortti, kaksi variaatiota
============================================================ */
.kohteet__ruudukko{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(1.1rem,2vw,1.7rem);
}
@media (max-width:1024px){.kohteet__ruudukko{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
.kohteet__ruudukko{
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:82vw;
overflow-x:auto;
overflow-y:hidden; /* muuten pystyvieritys aktivoituu automaattisesti */
scroll-snap-type:x mandatory;
padding-block:.7rem 1.2rem;
margin-inline:calc(-1 * var(--reuna));
padding-inline:var(--reuna);
scrollbar-width:thin;
}
.kortti{scroll-snap-align:start}
}
.kortti{
display:flex;flex-direction:column;
background:var(--valkoinen);
border:1px solid var(--viiva);
border-radius:var(--r-m);
overflow:hidden;
box-shadow:var(--varjo-1);
transition:transform .38s cubic-bezier(.22,.8,.3,1),box-shadow .38s ease,border-color .38s ease;
}
.kortti:hover{transform:translateY(-6px);box-shadow:var(--varjo-2);border-color:rgba(6,64,43,.2)}
.kortti__media{
position:relative;aspect-ratio:16/11;overflow:hidden;
/* Varaväri ensin: jos selain ei tunne color-mix():iä, koko gradientti
hylätään ja tausta jäisi läpinäkyväksi. */
background:var(--vihrea);
background:linear-gradient(140deg,var(--vihrea) 0%,color-mix(in srgb,var(--vihrea) 72%,#fff) 55%,var(--minttu) 100%);
}
.kortti__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.3,1)}
.kortti:hover .kortti__media img{transform:scale(1.05)}
.merkit{position:absolute;inset:.75rem .75rem auto;display:flex;flex-wrap:wrap;gap:.35rem;align-items:flex-start}
.merkit--ala{inset:auto .75rem .75rem;justify-content:flex-start}
.merkki{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.61rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
padding:.42rem .72rem;border-radius:var(--r-p);
background:rgba(255,255,255,.93);color:var(--vihrea);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
white-space:nowrap;
}
.merkki--tumma{background:rgba(6,64,43,.86);color:var(--valkoinen);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.merkki--vip{background:var(--kulta);color:var(--vihrea)}
.merkki i{width:6px;height:6px;border-radius:50%;background:var(--vihrea);display:block;animation:sykl 2.6s ease-in-out infinite}
.merkki--tumma i{background:var(--minttu)}
@keyframes sykl{0%,100%{opacity:1}50%{opacity:.35}}
.kortti__sisus{padding:clamp(1.15rem,1.9vw,1.5rem);display:flex;flex-direction:column;gap:.85rem;flex:1}
.kortti__tyyppi{
margin:0;font-size:.61rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:rgba(6,64,43,.72);
}
.kortti h3{font-size:clamp(1.06rem,1.5vw,1.22rem);font-weight:500;letter-spacing:-.012em;line-height:1.25}
.kortti h3 a{text-decoration:none}
.kortti h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.kortti{position:relative}
.kortti__sijainti{margin:.3rem 0 0;font-size:.83rem;line-height:1.5;color:var(--teksti-himmea)}
.hinnat{margin:0;display:flex;flex-wrap:wrap;gap:1.4rem;padding-top:.25rem}
.hinnat div{min-width:0}
.hinnat dt{
font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--teksti-kevyt);margin-bottom:.15rem;
}
.hinnat dd{
margin:0;font-size:1.02rem;font-weight:600;letter-spacing:-.015em;
color:var(--teksti);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hinnat dd.on-paino{color:var(--vihrea)}
.pilleri-rivi{
margin:0;align-self:flex-start;
font-size:.72rem;font-weight:500;letter-spacing:.02em;
padding:.45rem .85rem;border-radius:var(--r-p);
background:rgba(6,64,43,.06);color:rgba(6,64,43,.82);
font-variant-numeric:tabular-nums;
}
.kortti .luvut{margin-top:auto}
/* z-index nostaa dokumenttilistan kortin linkkipeitteen yläpuolelle */
.dokumentit{
border-top:1px solid var(--viiva);
padding-top:.85rem;margin-top:.15rem;
position:relative;z-index:2;
}
.dokumentit summary{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
cursor:pointer;list-style:none;
font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--vihrea);
}
.dokumentit summary::-webkit-details-marker{display:none}
.dokumentit summary span{font-weight:500;letter-spacing:.04em;color:var(--teksti-kevyt);text-transform:none;font-size:.75rem}
.dokumentit summary::after{content:"+";font-size:1.1rem;font-weight:300;line-height:1;color:var(--vihrea)}
.dokumentit[open] summary::after{content:"–"}
.dokumentit__lista{
list-style:none;margin:.85rem 0 0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem;
}
.dokumentit__lista li{
font-size:.76rem;color:var(--teksti-himmea);
padding-left:1.05rem;position:relative;line-height:1.6;
}
.dokumentit__lista li::before{
content:"";position:absolute;left:0;top:.52em;
width:8px;height:10px;border:1px solid var(--viiva-vahva);border-radius:2px;
}
@media (max-width:520px){.dokumentit__lista{grid-template-columns:1fr}}
.kortti__cta{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;position:relative;z-index:2}
.kortti__cta .nappi{flex:1 1 auto}
.ikoninappi{
width:42px;height:42px;flex:0 0 42px;
border-radius:var(--r-p);border:1.5px solid var(--viiva-vahva);
background:transparent;color:var(--vihrea);
font-size:.9rem;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:background .22s ease,border-color .22s ease;
}
.ikoninappi:hover{background:var(--minttu);border-color:var(--vihrea)}
/* Kapealla kortilla: pääCTA omalle rivilleen, Varaa + vertailu samalle */
@media (max-width:640px){
.kortti__cta > .nappi:first-child{flex:1 1 100%}
}
/* Nostokortti — leveä */
.kortti--nosto{
grid-column:span 2;
display:grid;grid-template-columns:1.05fr 1fr;
}
.kortti--nosto .kortti__media{aspect-ratio:auto;height:100%;min-height:320px}
/* Leveässä kortissa sisältö keskitetään kuvaa vasten, ei venytetä pohjaan */
.kortti--nosto .kortti__sisus{justify-content:center;gap:1rem}
.kortti--nosto .luvut{margin-top:.25rem}
@media (max-width:1024px){.kortti--nosto{grid-column:span 2;grid-template-columns:1fr}
.kortti--nosto .kortti__media{aspect-ratio:16/10;min-height:0}}
@media (max-width:640px){.kortti--nosto{grid-column:auto}}
.kohteet__loppu{
margin-top:clamp(2rem,3.5vw,3rem);
display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
}
/* ============================================================
CTA-BANNERI kuvalla
============================================================ */
/* Taustaväri kantaa jos kuva ei lataudu; ::before hoitaa peiton yksin */
.kaistale{
position:relative;isolation:isolate;
background-color:var(--vihrea);
background-size:cover;background-position:center 62%;background-repeat:no-repeat;
padding-block:clamp(4.5rem,8vw,7.5rem);
color:var(--valkoinen);
}
.kaistale::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(105deg,rgba(0,0,0,.68) 0%,rgba(6,64,43,.82) 52%,rgba(6,64,43,.62) 100%);
}
.kaistale h2,.kaistale h3{color:var(--valkoinen)}
.kaistale h2{max-width:20ch;margin-bottom:1.4rem}
.kaistale .ingressi{max-width:56ch;margin-bottom:2.2rem}
.kaistale a.sisus-linkki{color:var(--minttu);text-decoration:underline;text-underline-offset:3px}
/* ============================================================
VERKKOKAUPPA — askelpalkki
============================================================ */
.askeleet{
display:grid;grid-template-columns:repeat(5,1fr);
gap:clamp(.8rem,1.6vw,1.4rem);
margin-bottom:clamp(2.5rem,4vw,3.6rem);
counter-reset:askel;
}
.askel{position:relative;padding-top:2.9rem}
.askel::before{
counter-increment:askel;content:counter(askel);
position:absolute;top:0;left:0;
width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:.82rem;font-weight:600;
background:var(--vihrea);color:var(--valkoinen);
z-index:2;
}
.askel::after{
content:"";position:absolute;top:19px;left:38px;right:0;height:1.5px;
background:var(--viiva-vahva);
}
.askel:last-child::after{display:none}
.askel h3{font-size:.94rem;font-weight:600;letter-spacing:-.005em;margin-bottom:.4rem}
.askel p{font-size:.81rem;line-height:1.6;color:var(--teksti-himmea);margin:0}
@media (max-width:860px){
.askeleet{grid-template-columns:1fr;gap:0}
.askel{padding:0 0 1.7rem 3.4rem}
.askel:last-child{padding-bottom:0}
.askel::before{top:-2px}
.askel::after{top:38px;bottom:-2px;left:18.5px;right:auto;width:1.5px;height:auto}
}
.valinnat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:760px){.valinnat{grid-template-columns:1fr}}
.valinta{
background:var(--valkoinen);
border:1px solid var(--viiva);
border-radius:var(--r-m);
padding:clamp(1.5rem,2.6vw,2.1rem);
display:flex;flex-direction:column;gap:.75rem;
transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.valinta:hover{transform:translateY(-4px);box-shadow:var(--varjo-2);border-color:rgba(6,64,43,.24)}
.valinta--tumma{background:var(--vihrea);border-color:transparent;color:rgba(255,255,255,.85)}
.valinta--tumma h3{color:var(--valkoinen)}
.valinta p{font-size:.89rem;line-height:1.65;color:var(--teksti-himmea);margin:0}
.valinta--tumma p{color:rgba(255,255,255,.8)}
.valinta .linkki-nuoli{margin-top:auto;align-self:flex-start;padding-top:.6rem}
/* ============================================================
INFOBOX / SISÄLTÖKORTTI
============================================================ */
.ruudukko-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.7rem)}
@media (max-width:900px){.ruudukko-3{grid-template-columns:1fr}}
.info{
background:var(--valkoinen);
border:1px solid var(--viiva);
border-radius:var(--r-m);
padding:clamp(1.6rem,2.6vw,2.2rem);
display:flex;flex-direction:column;gap:1rem;
transition:transform .34s ease,box-shadow .34s ease;
}
.info:hover{transform:translateY(-5px);box-shadow:var(--varjo-2)}
.info__ikoni{
width:52px;height:52px;border-radius:var(--r-s);
background:var(--minttu);color:var(--vihrea);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.info__ikoni svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.info p{font-size:.9rem;line-height:1.72;color:var(--teksti-himmea)}
.info .linkki-nuoli{margin-top:auto;align-self:flex-start;padding-top:.5rem}
/* ============================================================
ASIAKASARVIOT
============================================================ */
.arviot__rivi{
display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(1.1rem,2vw,1.7rem);
}
@media (max-width:860px){.arviot__rivi{grid-template-columns:1fr}}
.arvio{
background:var(--valkoinen);
border-radius:var(--r-m);
padding:clamp(1.6rem,2.6vw,2.2rem);
display:flex;flex-direction:column;gap:1rem;
box-shadow:var(--varjo-1);
}
.arvio__merkki{
font-size:2.6rem;line-height:.6;font-weight:600;
color:rgba(6,64,43,.18);
height:1.1rem;
}
.arvio p{font-size:.93rem;line-height:1.75;color:var(--teksti-himmea)}
.arvio__lisa{margin-top:-.4rem}
.arvio__lisa summary{
list-style:none;cursor:pointer;
font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--vihrea);
}
.arvio__lisa summary::-webkit-details-marker{display:none}
.arvio__lisa summary::after{content:" ↓";font-weight:400}
.arvio__lisa[open] summary::after{content:" ↑"}
.arvio__lisa[open] summary{margin-bottom:1rem}
.arvio__nimi{
margin-top:auto;padding-top:1rem;border-top:1px solid var(--viiva);
font-size:.8rem;font-weight:600;color:var(--vihrea);letter-spacing:.01em;
}
.arvio__nimi span{display:block;font-weight:400;color:var(--teksti-kevyt);font-size:.75rem;margin-top:.15rem}
/* ============================================================
KUVA + VALINTAMERKKILISTA
============================================================ */
.pari{
display:grid;grid-template-columns:1fr 1fr;
gap:clamp(1.8rem,5vw,4.5rem);
align-items:center;
}
.pari + .pari{margin-top:clamp(3.5rem,7vw,6rem)}
.pari--kaanto .pari__kuva{order:-1}
@media (max-width:880px){
.pari{grid-template-columns:1fr;gap:2rem}
.pari--kaanto .pari__kuva{order:0}
}
.pari__kuva{
position:relative;border-radius:var(--r-m);overflow:hidden;
aspect-ratio:3/2;
background:var(--vihrea);
background:linear-gradient(140deg,var(--vihrea),color-mix(in srgb,var(--vihrea) 72%,#fff) 60%,var(--minttu));
box-shadow:var(--varjo-1);
}
.pari__kuva img{width:100%;height:100%;object-fit:cover}
.pari h2{margin-bottom:1.6rem}
.valintalista{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:1.05rem}
.valintalista li{
position:relative;padding-left:2.35rem;
font-size:.94rem;line-height:1.7;color:var(--teksti-himmea);
}
.valintalista li::before{
content:"";position:absolute;left:0;top:.15em;
width:24px;height:24px;border-radius:50%;
background:var(--minttu);
}
.valintalista li::after{
content:"";position:absolute;left:8px;top:.62em;
width:9px;height:5px;
border-left:1.8px solid var(--vihrea);border-bottom:1.8px solid var(--vihrea);
transform:rotate(-45deg);
}
.valintalista a{color:var(--vihrea);font-weight:500;text-underline-offset:3px}
.pari__napit{display:flex;flex-wrap:wrap;gap:.75rem}
/* ============================================================
KAUPUNGIT
============================================================ */
.kaupungit{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.16);border-radius:var(--r-m);overflow:hidden}
@media (max-width:980px){.kaupungit{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.kaupungit{grid-template-columns:1fr}}
.kaupunki{
background:var(--vihrea);
padding:clamp(1.4rem,2.3vw,1.9rem);
display:flex;flex-direction:column;gap:.7rem;
text-decoration:none;color:var(--valkoinen);
transition:background .3s ease;
}
.kaupunki:hover{background:color-mix(in srgb,var(--vihrea) 86%,#fff)}
.kaupunki h3{font-size:1.12rem;font-weight:500}
.kaupunki p{font-size:.82rem;line-height:1.62;color:rgba(255,255,255,.72);margin:0}
.kaupunki__nuoli{margin-top:auto;padding-top:.7rem;font-size:1.1rem;color:var(--minttu);transition:transform .3s ease}
.kaupunki:hover .kaupunki__nuoli{transform:translateX(6px)}
/* ============================================================
TYÖKALUKORTIT
============================================================ */
.tyokalu{
background:var(--minttu);
border-radius:var(--r-m);
padding:clamp(1.5rem,2.5vw,2.05rem);
display:flex;flex-direction:column;gap:.75rem;
text-decoration:none;color:inherit;
transition:transform .32s ease,box-shadow .32s ease;
}
.tyokalu:hover{transform:translateY(-5px);box-shadow:var(--varjo-2)}
.tyokalu p{font-size:.87rem;line-height:1.65;color:var(--teksti-himmea);margin:0}
.tyokalu .linkki-nuoli{margin-top:auto;padding-top:.9rem;align-self:flex-start;border-color:rgba(6,64,43,.24)}
.tyokalu__ikoni{width:40px;height:40px;color:var(--vihrea)}
.tyokalu__ikoni svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ============================================================
SIJOITTAJADIILIT — lomake
============================================================ */
.diilit{position:relative;overflow:hidden}
.diilit__ruudukko{
display:grid;grid-template-columns:1fr 1fr;
gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
@media (max-width:900px){.diilit__ruudukko{grid-template-columns:1fr}}
.lomake{
background:var(--valkoinen);
border-radius:var(--r-m);
padding:clamp(1.6rem,3vw,2.5rem);
box-shadow:var(--varjo-2);
}
.kentta{margin-bottom:1.05rem}
.kentta label{
display:block;
font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:rgba(6,64,43,.78);margin-bottom:.45rem;
}
.kentta label i{font-style:normal;color:rgba(0,0,0,.35);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:.72rem}
.kentta input{
width:100%;font-family:inherit;font-size:.95rem;color:var(--teksti);
padding:.95rem 1.1rem;
border:1.5px solid var(--viiva);
border-radius:var(--r-s);
background:var(--valkoinen);
transition:border-color .22s ease,box-shadow .22s ease;
}
.kentta input::placeholder{color:rgba(0,0,0,.32)}
.kentta input:focus{outline:none;border-color:var(--vihrea);box-shadow:0 0 0 4px rgba(6,64,43,.1)}
.kentta input:focus-visible{outline:none}
.kentta__vinkki{
font-size:.79rem;line-height:1.6;color:var(--teksti-himmea);
background:var(--minttu);border-radius:var(--r-s);
padding:.75rem .95rem;margin:0 0 1.05rem;
}
.suostumus{font-size:.7rem;line-height:1.6;color:var(--teksti-kevyt);margin:1.1rem 0 0}
.luottamusrivi{
display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;
margin-top:1.6rem;padding-top:0;
font-size:.72rem;font-weight:600;letter-spacing:.06em;
color:rgba(255,255,255,.8);
}
.luottamusrivi span::before{content:"✓ ";color:var(--minttu)}
/* ============================================================
SEO-teksti + FAQ
============================================================ */
.seo-teksti p{font-size:1rem;line-height:1.85;color:var(--teksti-himmea)}
.seo-teksti a{color:var(--vihrea);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--viiva-vahva);transition:border-color .2s ease}
.seo-teksti a:hover{border-color:var(--vihrea)}
.faq{border-top:1px solid var(--viiva)}
.faq details{border-bottom:1px solid var(--viiva)}
.faq summary{
list-style:none;cursor:pointer;
display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
padding:1.5rem 0;
font-size:clamp(1rem,1.35vw,1.14rem);font-weight:500;letter-spacing:-.01em;
color:var(--vihrea);line-height:1.4;
transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:color-mix(in srgb,var(--vihrea) 82%,#fff)}
.faq summary::after{
content:"";flex:0 0 20px;height:20px;margin-top:.22em;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-size:contain;
transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq__vastaus{padding:0 0 1.7rem;max-width:74ch}
.faq__vastaus p{font-size:.94rem;line-height:1.78;color:var(--teksti-himmea);margin:0}
.faq__vastaus b{
display:block;
font-size:.63rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:rgba(6,64,43,.72);margin-bottom:.5rem;
}
/* ============================================================
SOME
============================================================ */
.some-rivi{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.some{
width:52px;height:52px;border-radius:50%;
border:1.5px solid var(--viiva-vahva);
color:var(--vihrea);background:transparent;
display:flex;align-items:center;justify-content:center;
transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.some:hover{background:var(--vihrea);color:var(--valkoinen);border-color:var(--vihrea);transform:translateY(-3px)}
.some svg{width:21px;height:21px;fill:currentColor}
/* ============================================================
ALATUNNISTE
============================================================ */
.jalki{background:var(--vihrea);color:rgba(255,255,255,.72);padding-block:clamp(3.5rem,6vw,5rem) 0}
.jalki__ruudukko{
display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:clamp(1.8rem,3.5vw,3rem);
padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
@media (max-width:900px){.jalki__ruudukko{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.jalki__ruudukko{grid-template-columns:1fr}}
.jalki img.jalki__logo{height:38px;width:auto;margin-bottom:1.4rem}
.jalki h4{
font-size:.67rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--minttu);margin-bottom:1.15rem;
}
.jalki ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.jalki a{
font-size:.85rem;color:rgba(255,255,255,.72);text-decoration:none;
transition:color .2s ease;
}
.jalki a:hover{color:var(--valkoinen)}
.jalki__yhteys{font-size:.85rem;line-height:1.85;color:rgba(255,255,255,.72)}
.jalki__yhteys strong{display:block;color:var(--valkoinen);font-weight:500;margin-bottom:.5rem}
.jalki__pohja{
border-top:1px solid rgba(255,255,255,.14);
padding-block:1.5rem;
display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
font-size:.74rem;color:rgba(255,255,255,.58);
}
/* ============================================================
MODAALI — rahoitus- ja ostopolku
============================================================ */
.modaali{
position:fixed;inset:0;z-index:120;
display:none;align-items:center;justify-content:center;
padding:var(--reuna);
background:rgba(0,0,0,.55);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
}
.modaali.on-auki{display:flex;animation:haivyta .3s ease}
@keyframes haivyta{from{opacity:0}to{opacity:1}}
.modaali__laatikko{
background:var(--valkoinen);
border-radius:var(--r-m);
width:min(660px,100%);
max-height:88vh;overflow-y:auto;
box-shadow:0 40px 90px rgba(0,0,0,.35);
animation:nouse .36s cubic-bezier(.22,.8,.3,1);
}
@keyframes nouse{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
.modaali__ylapalkki{
display:flex;align-items:center;gap:.85rem;
padding:1.3rem clamp(1.3rem,3vw,2rem);
border-bottom:1px solid var(--viiva);
position:sticky;top:0;background:var(--valkoinen);z-index:2;
border-radius:var(--r-m) var(--r-m) 0 0;
}
.modaali__ikoni{
width:34px;height:34px;border-radius:50%;
background:var(--minttu);color:var(--vihrea);
display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
.modaali__ylapalkki p{
margin:0;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(6,64,43,.78);
}
.modaali__sulje{
margin-left:auto;width:34px;height:34px;flex-shrink:0;
border-radius:50%;border:1px solid var(--viiva);
background:transparent;color:var(--vihrea);font-size:1.1rem;line-height:1;cursor:pointer;
transition:background .2s ease;
}
.modaali__sulje:hover{background:var(--minttu)}
.modaali__sisus{padding:clamp(1.5rem,3vw,2.2rem)}
.modaali__sisus h2{margin-bottom:.7rem;font-size:clamp(1.35rem,2.2vw,1.75rem)}
.modaali__sisus > p{font-size:.9rem;color:var(--teksti-himmea);margin-bottom:1.6rem}
.modaali__ala{
font-size:.73rem;color:var(--teksti-kevyt);
border-top:1px solid var(--viiva);
margin-top:1.6rem;padding-top:1.2rem;
}
.modaali__ala a{color:var(--vihrea)}
/* ============================================================
EVÄSTEBANNERI
============================================================ */
.evasteet{
position:fixed;left:var(--reuna);right:var(--reuna);bottom:clamp(1rem,2vw,1.5rem);
z-index:110;
max-width:640px;margin-inline:auto;
background:var(--valkoinen);
border-radius:var(--r-m);
box-shadow:0 24px 60px rgba(6,64,43,.28);
border:1px solid var(--viiva);
padding:clamp(1.25rem,2.4vw,1.7rem);
transform:translateY(0);
transition:transform .45s cubic-bezier(.22,.8,.3,1),opacity .35s ease;
}
.evasteet[hidden]{display:none}
.evasteet.on-piilossa{transform:translateY(calc(100% + 3rem));opacity:0}
.evasteet h2{font-size:1.06rem;font-weight:600;margin-bottom:.6rem}
.evasteet > p{font-size:.8rem;line-height:1.65;color:var(--teksti-himmea);margin-bottom:1.1rem}
.evasteet a{color:var(--vihrea)}
.evasteet__valinnat{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.2rem}
.kytkin{display:flex;gap:.75rem;align-items:flex-start;font-size:.78rem;color:var(--teksti-himmea);line-height:1.5}
.kytkin input{
appearance:none;-webkit-appearance:none;
flex:0 0 36px;width:36px;height:20px;margin:.1rem 0 0;
border-radius:var(--r-p);background:var(--viiva);
position:relative;cursor:pointer;transition:background .25s ease;
}
.kytkin input::after{
content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:var(--valkoinen);transition:transform .25s ease;
box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.kytkin input:checked{background:var(--vihrea)}
.kytkin input:checked::after{transform:translateX(16px)}
.kytkin input:disabled{background:rgba(6,64,43,.45);cursor:not-allowed}
.kytkin b{color:var(--vihrea);font-weight:600}
.evasteet__napit{display:flex;flex-wrap:wrap;gap:.5rem}
.evasteet__napit .nappi{flex:1 1 auto}
/* ============================================================
ESIINTULO — IntersectionObserver
============================================================ */
.tule{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.8,.3,1),transform .8s cubic-bezier(.22,.8,.3,1)}
.tule.on-nakyvissa{opacity:1;transform:none}
.tule[data-viive="1"]{transition-delay:.09s}
.tule[data-viive="2"]{transition-delay:.18s}
.tule[data-viive="3"]{transition-delay:.27s}
.tule[data-viive="4"]{transition-delay:.36s}
.tule[data-viive="5"]{transition-delay:.45s}
.tule[data-viive="6"]{transition-delay:.54s}
/* Avainluvun maskiesiintulo — järjestelmän yksi orkestroitu hetki.
Vain .tule-lohkon sisällä; muualla (modaali) luku näkyy heti. */
.tule .luku__arvo,
.tule.luottamus__solu .luottamus__arvo{
clip-path:inset(0 0 108% 0);
transition:clip-path .9s cubic-bezier(.22,.8,.3,1) .12s;
}
.tule.on-nakyvissa .luku__arvo,
.tule.on-nakyvissa.luottamus__solu .luottamus__arvo{clip-path:inset(0 0 -12% 0)}
.ohita{
position:absolute;left:-9999px;top:0;
background:var(--vihrea);color:var(--valkoinen);
padding:.9rem 1.4rem;border-radius:0 0 var(--r-s) 0;z-index:200;
font-size:.82rem;font-weight:600;text-decoration:none;
}
.ohita:focus{left:0}
/* ============================================================
LIIKKEEN VÄHENTÄMINEN
============================================================ */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
html{scroll-behavior:auto}
.tule{opacity:1;transform:none}
.luvut .luku__arvo{clip-path:none}
.hero__kuva{animation:none;opacity:0}
.hero__kuva:first-child{opacity:1}
.hero__aalto svg:last-child{animation:none}
.merkki i{animation:none}
.kortti:hover,.info:hover,.valinta:hover,.tyokalu:hover,.nappi:hover,.some:hover{transform:none}
}
/* ==========================================================================
Lohkoteemakohtaiset lisäykset — vain se mitä WordPress vaatii
========================================================================== */
/* Esiintulo piilottaa elementit vasta kun JS on varmasti käynnissä.
Ilman tätä sivulle jää tyhjiä värilaatikoita jos skripti ei aja. */
.tule{opacity:1;transform:none}
html.on-js .tule{opacity:0;transform:translateY(26px)}
html.on-js .tule.on-nakyvissa{opacity:1;transform:none}
html:not(.on-js) .tule .luku__arvo,
html:not(.on-js) .tule.luottamus__solu .luottamus__arvo{clip-path:none}
/* Sivut joilla ei ole heroa: ylätunniste ei saa olla läpinäkyvä,
koska logo on valkoinen. */
/* Blogilisäosan artikkelihero on .ak-hero, ei .hero. Ilman sitä
artikkelisivut saivat kiinteän vihreän palkin, vaikka niissä on
kuvahero jonka päälle ylätunnisteen kuuluu tulla läpinäkyvänä. */
body:not(:has(.hero)):not(:has(.ak-hero)) .ylatunnus{background:var(--vihrea);position:sticky}
body:not(:has(.hero)) .ylatunnus .paanavi a{color:var(--valkoinen)}
/* Sivun oma sisältö (post_content) perii teeman typografian */
.ak2-sisalto{padding-block:clamp(3rem,6vw,5rem)}
.ak2-sisalto > .rajaus > *{max-width:100%}
/* ==========================================================================
KOHDESIVU
==========================================================================
Kortit tulevat lisäosasta asuntokauppa-unified-2-0, jonka OMIA sääntöjä on
muokattu. Teemasta ei ohiteta yhtään korttisääntöä.
Hero käyttää samaa .hero-luokkaa kuin etusivu, jotta ylätunniste asettuu
sen päälle läpinäkyvänä (body:has(.hero)). Vain korkeus on pienempi.
========================================================================== */
/* Sivun ylälaidasta pois lohkoteeman oletusmarginaali — muuten heron ja
selaimen väliin jää valkoinen kaistale ja ylätunniste näyttää irralliselta. */
body:has(.hero) .wp-site-blocks{margin-top:0;padding-top:0}
body:has(.hero) .wp-site-blocks > main{margin-top:0}
body:has(.hero) .wp-site-blocks > main > :first-child{margin-top:0}
body:has(.hero) .hero{margin-top:0}
.hero--sivu{
min-height:clamp(52vh,46vw,64vh);
align-items:center;
padding-top:clamp(9rem,14vw,12rem);
padding-bottom:clamp(6rem,9vw,8.5rem);
}
.hero--sivu h1{margin-bottom:1rem;font-size:clamp(2.2rem,5vw,3.9rem)}
.hero--sivu .ingressi{margin-bottom:0;max-width:52ch}
/* Yksi staattinen kuva, ei karusellia — mutta sama tummennus kuin etusivulla,
jotta valkoinen teksti erottuu vaaleastakin kuvasta. */
.hero__kuva--staattinen{opacity:1;animation:none}
.hero--sivu .hero__peite{
background:linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(6,64,43,.68) 48%, rgba(6,64,43,.58) 100%);
}
/* Listaus alkaa heti heron alta. Suodatinpaneeli nostetaan aallon päälle,
jolloin se lukee osana sivua eikä irrallisena laatikkona valkoisella. */
.kohdelistaus{padding-top:0;padding-bottom:clamp(3rem,5vw,4.5rem)}
.kohdelistaus .aku-filters{
position:relative;z-index:5;
margin-top:calc(-1 * clamp(2.6rem,5vw,4.6rem));
}
.kohdelistaus section.nt-list{display:none}
/* Aalto: luonnoksen CSS antaa jälkimmäiselle aallolle opacity:.45. Tummalla
etusivun herolla se tuottaa pehmeän kaksoisaallon, mutta tämän sivun
vaaleaa keittiökuvaa vasten läpikuultava aalto näkyy likaisen harmaana
kaistaleena. Täällä molemmat aallot ovat siksi umpivalkoisia. */
/* Yksi umpivalkoinen aalto. Luonnoksen kaksoisaalto on suunniteltu tummalle
etusivun herolle; vaaleaa kuvaa vasten jälkimmäinen läpikuultava aalto
näkyi likaisena kaistaleena. Siksi täällä on vain yksi, täysin peittävä. */
/* bottom:-3px eikä 0: ilman limitystä SVG:n murtopikselikorkeus jätti heron
taustaa näkyviin ohuena raitana seuraavan osion yläreunaan — vihreällä
sivuherolla se näkyi selvänä vihreänä viivana valkoisen päällä. */
.hero--sivu .hero__aalto{bottom:-3px}
.hero--sivu .hero__aalto svg{
position:static;
opacity:1;
animation:none;
width:100%;
margin-left:0;
height:clamp(52px,6.5vw,96px);
}
/* ==========================================================================
KOHDESIVUN ESIINTULO
==========================================================================
Kortit tulevat lisäosasta eikä niissä ole .tule-luokkaa, joten esiintulo
annetaan niille suoraan. Sama kynnys ja sama liike kuin etusivulla.
Ilman JS:ää mikään ei piiloudu (html.on-js -ehto). */
html.on-js .kohdelistaus .aku-filters,
html.on-js .kohdelistaus .aku-card{
opacity:0;
transform:translateY(24px);
transition:opacity .8s cubic-bezier(.22,.8,.3,1), transform .8s cubic-bezier(.22,.8,.3,1);
}
html.on-js .kohdelistaus .aku-filters.on-nakyvissa,
html.on-js .kohdelistaus .aku-card.on-nakyvissa{
opacity:1;
transform:none;
}
/* Porrastus riveittäin: kolme korttia kerrallaan */
.kohdelistaus .aku-card:nth-child(3n+2){transition-delay:.08s}
.kohdelistaus .aku-card:nth-child(3n+3){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
html.on-js .kohdelistaus .aku-filters,
html.on-js .kohdelistaus .aku-card{opacity:1;transform:none;transition:none}
}
/* ==========================================================================
AALTOEROTTIMET — tausta johdetaan edeltävästä osiosta
==========================================================================
Aallon SVG-täyttö on SEURAAVAN osion väri ja divin tausta EDELTÄVÄN.
Luonnoksessa tausta on merkitty käsin luokalla (--valk/--mintt/--vihr),
ja osa merkinnöistä on väärin: esimerkiksi kuvakaistaleen jälkeen tausta
on valkoinen, jolloin valokuvan ja aallon väliin jää valkoinen kaistale.
Nämä säännöt johtavat taustan siitä osiosta joka oikeasti edeltää aaltoa,
jolloin käsin merkityn luokan virhe ei enää näy. */
.osio + .aalto,
.osio--tiivis + .aalto{background:var(--valkoinen)}
.osio--minttu + .aalto{background:var(--minttu)}
.osio--vihrea + .aalto{background:var(--vihrea)}
/* Kuvakaistaleen ja heron jälkeen taustaa ei ole — aalto nostetaan kuvan
päälle, jolloin valokuva jatkuu aallon harjaan asti eikä väliin jää rakoa. */
.kaistale + .aalto,
.hero + .aalto{
background:transparent;
position:relative;
z-index:3;
margin-top:calc(-1 * clamp(38px,4.6vw,78px));
}
/* Aallon ja seuraavan osion väliin ei saa jäädä pikselinkään rakoa */
/* Aallon alareunan sauma.
Aaltokääreen tausta on EDELLISEN osion väri ja SVG maalaa seuraavan värin
käyrän alapuolelle. Jos SVG:n korkeus (clamp) päätyy murtopikseliin, kääreen
taustaa jää näkyviin ohuena viivana seuraavan osion yläreunaan — minttu
valkoisen päällä näkyy tummempana raitana.
SVG:n negatiivinen alamarginaali lyhentää kääreen laatikkoa, jolloin seuraava
osio nousee sen verran ylemmäs ja peittää sauman. Peitetty osa on SVG:n
alareunaa, joka on jo seuraavan osion väriä, joten mikään ei jää piiloon. */
.aalto{margin-bottom:-1px}
.aalto svg{display:block;vertical-align:bottom;margin-bottom:-2px}
/* Hero-aaltoon samaa temppua ei tehdä: .hero__aalto on position:absolute ja
kiinnitetty alareunastaan (bottom:-1px), joten negatiivinen alamarginaali
nostaisi kuvion ylös ja paljastaisi heron taustaa. Sen päällekkäisyys
hoituu jo tuolla -1px:llä. */
/* ==========================================================================
OSIOIDEN VÄLIT — lohkoteeman oletusväli pois
==========================================================================
Etusivun osiot ovat kukin oma lohkonsa (wp:html), jotta ne ovat
siirrettävissä editorissa. Lohkoteema lisää lohkojen väliin
margin-block-start: var(--wp--style--block-gap), ja juuri se jättää
valkoisen raon aallon ja sitä seuraavan osion väliin.
Luonnoksessa osiot ovat peräkkäin ilman marginaaleja, joten aallot
osuvat suoraan kiinni seuraavaan osioon. Palautetaan sama tilanne. */
.wp-site-blocks > main > *,
.wp-site-blocks > main > .alignfull{
margin-block-start:0;
margin-block-end:0;
}
/* Sama koskee sivun kolmea ylätason osaa: ylätunniste, main ja alatunniste
ovat erillisiä sivupohjaosia, joten myös NIIDEN väliin syntyy lohkoväli.
Se näkyi valkoisena raitana viimeisen osion ja vihreän alatunnisteen
välissä — siinä kohdassa ei ole aaltoa lainkaan, pelkkä osioraja. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer{
margin-block:0;
}
.wp-site-blocks{gap:0}
/* --------------------------------------------------------------------------
Aallon alle jäävä hiusraita.
Aalto on skaalattu SVG (preserveAspectRatio:none). Selain laskee sen
korkeuden murto-osapikselin tarkkuudella, jolloin divin alareunaan jää
0,5 pikselin kaistale, jossa näkyy divin OMA taustaväri — eli edellisen
osion väri. Vaalealla se lukee ohuena valkoisena viivana.
Marginaalin nollaus ei riitä, koska rako on itse elementin sisällä.
Ratkaisu: seuraava osio vedetään pikselin verran aallon päälle ja
nostetaan pinossa ylimmäksi, jolloin raita jää sen alle piiloon.
-------------------------------------------------------------------------- */
.aalto{
margin-block:0;
line-height:0;
font-size:0;
}
.aalto svg{
display:block;
vertical-align:bottom;
/* Ylimittaa, jotta pyöristys ei koskaan jätä rakoa alareunaan */
height:calc(clamp(38px,4.6vw,78px) + 2px);
margin-bottom:-2px;
}
/* Seuraava osio vedetään kahden pikselin verran aallon päälle. Yksi pikseli
ei riitä retina-näytöllä, jossa puolen CSS-pikselin rako on kokonainen
laitepikseli — juuri se näkyi ohuena harmaana viivana. */
.aalto + *{
margin-block-start:-2px;
position:relative;
z-index:1;
}
/* Sama heron aallolle: hero on absoluuttisesti asemoitu, joten sitä
seuraava osio nostetaan erikseen. */
.hero + *{
margin-block-start:-1px;
position:relative;
z-index:1;
}
/* ==========================================================================
HERO MATALALLA IKKUNALLA
==========================================================================
Hero on min-height:100svh ja sisältö pystykeskitetty. Kun ikkuna on matala
— leveä mutta lyhyt, kuten vaakanäytöllä tai puolitetussa ikkunassa —
otsikko, ingressi ja napit eivät mahdu 100svh:n sisään ylä- ja
alapehmusteiden jälkeen. Ylivuoto leikkautuu overflow:hiddenin takia
tasan ylhäältä ja alhaalta, jolloin otsikon ensimmäinen rivi katoaa
kokonaan ja toinen jää kiinteän ylätunnisteen taakse.
Matalalla ikkunalla hero saa siis kasvaa sisältönsä mukaan, ja otsikko
skaalautuu myös korkeuden mukaan. */
@media (max-height: 860px) {
.hero:not(.hero--sivu){
min-height:100svh;
padding-top:clamp(7rem,15vh,9.5rem);
padding-bottom:clamp(5.5rem,13vh,8.5rem);
}
.hero:not(.hero--sivu) .h-jatti{
font-size:clamp(2.2rem,5.6vw,3.6rem);
}
.hero .ingressi{margin-bottom:2rem}
}
/* Hyvin matala ikkuna: tiivistetään vielä. */
@media (max-height: 680px) {
.hero:not(.hero--sivu){min-height:100svh;padding-top:clamp(6rem,14vh,8rem);padding-bottom:clamp(4.5rem,11vh,6.5rem)}
.hero .h-jatti{font-size:clamp(2rem,4.8vw,3rem)}
.hero .ingressi{font-size:1rem;margin-bottom:1.6rem}
}
/* ==========================================================================
HERON AALTO — molemmat aallot peittäviksi
==========================================================================
Luonnoksen .hero__aalto sisältää kaksi aaltoa, joista jälkimmäinen on
opacity:.45. Tummalla taustalla se tuottaa pehmeän kaksoisaallon, mutta
kun karusellin kuva on vaalea, läpikuultava valkoinen näkyy harmaana
kaistaleena aallon päällä. Tehdään molemmista peittäviä. */
.hero__aalto svg{opacity:1}
.hero__aalto svg:last-child{animation:none}
/* Sama pikselintarkka limitys kuin osioiden välisillä aalloilla */
.hero__aalto svg{height:calc(clamp(48px,6vw,92px) + 2px)}
/* ==========================================================================
KAKSI KORJAUSTA MARGINAALIEN NOLLAUKSEN JÄLKEEN
==========================================================================
1) Luottamusrivi on tarkoituksella nostettu heron aallon päälle
negatiivisella marginaalilla. Aiemmat säännöt
(.wp-site-blocks > main > * ja .hero + *) nollasivat sen, jolloin
valkoinen palkki putosi kokonaan heron alapuolelle.
Tämä sääntö on niitä spesifisempi ja palauttaa noston. */
.wp-site-blocks > main > .luottamus,
.hero + .luottamus,
.luottamus{
margin-block-start:calc(-1 * clamp(3rem,6vw,5.5rem));
position:relative;
z-index:5;
}
/* 2) Heron verho ulottuu alareunaan asti ja on selvästi VIHREÄ, ei musta.
Aiempi gradientti alkoi alhaalta lähes mustana, jolloin vaaleiden
kuvien kohdalla alalaita luki harmaana eikä brändinvihreänä. */
.hero__peite{
background:linear-gradient(
to top,
rgba(6,64,43,.88) 0%,
rgba(6,64,43,.78) 30%,
rgba(6,64,43,.66) 62%,
rgba(6,64,43,.56) 100%
);
}
/* ==========================================================================
OSION OTSIKKO — otsikko ja ingressi vierekkäin
==========================================================================
Luonnoksessa .osio-otsikko on yksi kapea palsta (max-width:38ch), jolloin
otsikko ja ingressi pinoutuvat päällekkäin ja oikea puolisko sivusta jää
tyhjäksi. Leveillä näytöillä ne asetetaan rinnakkain: otsikko vasemmalle,
ingressi oikealle. Kumpikin saa oman mittansa, joten rivitys pysyy hyvänä.
Keskitettyihin otsikoihin ei kosketa — niissä pinoutuminen on tarkoitus. */
/* Kaksipalstainen asettelu edellyttää ingressiä: ilman sitä oikea palsta jäisi
tyhjäksi ja otsikko puristuisi 15 merkkiin. :has(.ingressi) rajaa säännön
niihin osioihin, joissa ingressi oikeasti on. */
@media (min-width: 1100px) {
.rajaus:not(.rajaus--kapea) > .osio-otsikko:has(.ingressi):not(.osio-otsikko--keskitetty){
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
column-gap:clamp(2.5rem,5vw,5rem);
align-items:end;
max-width:none;
}
.rajaus:not(.rajaus--kapea) > .osio-otsikko:has(.ingressi):not(.osio-otsikko--keskitetty) .tarra{
grid-column:1;grid-row:1;margin-bottom:.9rem;
}
.rajaus:not(.rajaus--kapea) > .osio-otsikko:has(.ingressi):not(.osio-otsikko--keskitetty) > h2,
.rajaus:not(.rajaus--kapea) > .osio-otsikko:has(.ingressi):not(.osio-otsikko--keskitetty) .h-iso{
grid-column:1;grid-row:2;margin:0;max-width:15ch;
}
.rajaus:not(.rajaus--kapea) > .osio-otsikko:has(.ingressi):not(.osio-otsikko--keskitetty) .ingressi{
grid-column:2;grid-row:2;margin:0;max-width:48ch;
padding-bottom:.35rem;
}
}
/* Kapeassa säiliössä (.rajaus--kapea, 760px) otsikko ja ingressi pysyvät
päällekkäin — rinnakkain ne olisivat molemmat liian kapeita ja otsikko
katkeaisi sanaan per rivi. */
.rajaus--kapea .osio-otsikko{display:block;max-width:38ch}
.rajaus--kapea .osio-otsikko .h-iso{max-width:20ch}
.rajaus--kapea .osio-otsikko .ingressi{max-width:58ch}
/* ==========================================================================
AALLON ALAREUNAN HIUSVIIVA — pinojärjestys väärinpäin
==========================================================================
Skaalatun SVG:n alin pikselirivi on antialiasoitu: se on sekoitus aallon
täyttöväristä ja divin taustaväristä. Kun tausta on edellisen osion väri
(esim. valkoinen) ja täyttö seuraavan (esim. vihreä), sekoitus on
kummastakin poikkeava vaalea viiva — juuri se näkyy aallon alareunassa.
Aiempi korjaus veti seuraavan osion 2px aallon päälle, mutta luonnoksen
.aalto{z-index:2} piti aallon SEURAAVAN OSION EDESSÄ, joten osio ei
voinut peittää sekoittunutta reunaa. Käännetään pinojärjestys: aalto
taakse, seuraava osio eteen. Aallon muoto näkyy edelleen, mutta sen
alin, sekoittunut pikselirivi jää osion alle piiloon. */
.aalto{position:relative;z-index:1}
.aalto + *{
position:relative;
z-index:2;
margin-block-start:-2px;
}
/* ==========================================================================
OSION OTSIKKO — inline-tyylin ohitus
==========================================================================
Osalla otsikkolohkoista on markupissa inline-tyyli style="max-width:60ch".
Inline voittaa tyylitiedoston, joten kaksipalstainen ruudukko jakoi vain
nuo 60 merkkiä kahtia ja otsikko katkesi sanaan per rivi.
Kaksipalstaisuus tarvitsee koko säiliön leveyden, joten inline-rajaus
kumotaan nimenomaan silloin kun ruudukko on käytössä. */
@media (min-width: 1100px) {
.rajaus:not(.rajaus--kapea) > .osio-otsikko:not(.osio-otsikko--keskitetty){
max-width:none !important;
}
}
/* Sivukohtainen hero on tarkoituksella matalampi kuin etusivun.
Tämä sääntö on tiedoston lopussa, jotta matalan ikkunan korkeussäännöt
eivät voi kasvattaa sitä takaisin täyteen ruutuun. */
.hero.hero--sivu{
min-height:clamp(46vh,42vw,58vh);
padding-top:clamp(8.5rem,13vw,11rem);
padding-bottom:clamp(5.5rem,8vw,7.5rem);
}
/* ============================================================
STAATTISET SIVUT — Meistä, Yhteystiedot, Työkalut, Sijoittajadiilit
Vain nämä sivut tarvitsivat komponentteja joita teemassa ei vielä ollut.
============================================================ */
/* Neljän kortin ruudukko. .ruudukko-3 jättäisi neljännen yksin omalle
rivilleen (Sijoittajadiilien "Mitä diilit sisältävät"). */
/* Ruudunlukijalle jätettävä teksti. */
.piilo{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ruudukko-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,2vw,1.7rem)}
/* --- Tiimikortit (Yhteystiedot) --- */
.henkilot{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,2vw,1.7rem)}
.henkilo{
background:var(--valkoinen);
border-radius:var(--r-m);
padding:clamp(1.3rem,2vw,1.7rem);
box-shadow:var(--varjo-1);
display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
transition:transform .32s ease,box-shadow .32s ease;
}
.henkilo:hover{transform:translateY(-5px);box-shadow:var(--varjo-2)}
.henkilo__kuva{
width:100%;aspect-ratio:1/1;object-fit:cover;
border-radius:var(--r-s);margin-bottom:.9rem;
background:var(--minttu);
}
.henkilo h3{margin:0}
.henkilo__rooli{
margin:0 0 .55rem;
font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:rgba(6,64,43,.66);
}
.henkilo__linkki{
font-size:.9rem;color:var(--teksti-himmea);text-decoration:none;
border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.henkilo__linkki:hover{color:var(--vihrea);border-bottom-color:var(--viiva-vahva)}
/* --- Lomakkeen tekstialue: sama ulkoasu kuin .kentta input --- */
.kentta textarea{
width:100%;font-family:inherit;font-size:.95rem;color:var(--teksti);
padding:.95rem 1.1rem;
border:1.5px solid var(--viiva);
border-radius:var(--r-s);
background:var(--valkoinen);
resize:vertical;min-height:8.5rem;line-height:1.6;
transition:border-color .22s ease,box-shadow .22s ease;
}
.kentta textarea::placeholder{color:rgba(0,0,0,.32)}
.kentta textarea:focus{outline:none;border-color:var(--vihrea);box-shadow:0 0 0 4px rgba(6,64,43,.1)}
/* Pitkä lakiteksti kytkimen vieressä ei saa olla lihavoitua vihreää. */
.lomake .kytkin{margin-bottom:1rem}
.lomake .kytkin b{font-weight:400;color:var(--teksti-himmea)}
.lomake .kytkin:first-of-type b{font-weight:600;color:var(--vihrea)}
.lomake button[type="submit"]{margin-top:.6rem}
/* --- Sijoittajadiilien tilauslomake vihreällä alueella --- */
.tilaus{
display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;
max-width:38rem;margin-inline:auto;
}
.tilaus input[type="email"]{
flex:1 1 16rem;min-width:0;
font-family:inherit;font-size:.95rem;
padding:1rem 1.25rem;
border-radius:var(--r-p);
border:1.5px solid rgba(255,255,255,.34);
background:rgba(255,255,255,.1);
color:var(--valkoinen);
}
.tilaus input[type="email"]::placeholder{color:rgba(255,255,255,.6)}
.tilaus input[type="email"]:focus{outline:none;border-color:var(--valkoinen);background:rgba(255,255,255,.16)}
.tilaus .nappi{flex:0 0 auto}
@media (max-width:1080px){
.ruudukko-4,.henkilot{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
.ruudukko-4,.henkilot{grid-template-columns:1fr}
.tilaus{flex-direction:column}
.tilaus .nappi{width:100%}
/* Pystysuunnassa flex-basis on KORKEUS, ei leveys. Vaakariville tarkoitettu
flex:1 1 16rem venytti kentän 16rem korkeaksi, ja 999px pyöristys teki
siitä pallon. Painike oli jo korjattu, kenttä ei. */
.tilaus input[type="email"]{flex:0 0 auto;width:100%}
}
/* Pitkä otsikko kapeassa palstassa. Oletuksena .rajaus--kapea rajaa otsikon
20 merkkiin, mikä katkoo pitkät otsikot viidelle riville. */
.rajaus--kapea .osio-otsikko--levea{max-width:none}
.rajaus--kapea .osio-otsikko--levea .h-iso{max-width:none}
/* Kahden tekstipalstan pari tasataan ylhäältä; keskitys sopii vain
teksti + kuva -pariin, jossa korkeudet ovat lähellä toisiaan. */
.pari--teksti{align-items:start}
/* ============================================================
KOHDENOSTOT — ruudukko työpöydällä, vaakarulla mobiilissa
============================================================ */
/* Kortit tulevat lyhytkoodista [ak2_nostot] eli oikeasta datasta.
Kapealla näytöllä kolmen sarakkeen ruudukko pakkaisi kortit
lukukelvottoman kapeiksi, joten ne kääntyvät sivusuuntaiseksi
rullaksi jossa yksi kortti kerrallaan napsahtaa paikalleen. */
@media (max-width:900px){
.kohteet__ruudukko--rulla{
display:flex;
gap:1rem;
overflow-x:auto;
/* Ilman tätä selain pakottaa myös pystyakselin vierittyväksi:
overflow-y:visible ei ole sallittu yhdessä overflow-x:auto:n
kanssa, joten se muuttuu automaattisesti autoksi ja kortteja
pystyi vierittämään ylös ja alas. */
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-padding-inline:var(--reuna);
/* Rulla ulottuu reunasta reunaan, mutta sisältö pysyy rajauksessa.
Ylä- ja alapehmuste jättävät tilaa korttien varjoille, jotka
overflow-y:hidden muuten leikkaisi. */
margin-inline:calc(-1 * var(--reuna));
padding:.7rem var(--reuna) .9rem;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.kohteet__ruudukko--rulla::-webkit-scrollbar{display:none}
.kohteet__ruudukko--rulla > .kortti{
flex:0 0 min(84%, 21rem);
scroll-snap-align:start;
}
}
/* ============================================================
MOBIILIVIIMEISTELY
============================================================ */
@media (max-width:900px){
/* Kolmen sarakkeen ruudukot yhteen sarakkeeseen. */
.ruudukko-3,
.kohteet__ruudukko{grid-template-columns:1fr}
.arviot__rivi{grid-template-columns:1fr}
/* Teksti + kuva -parit allekkain, kuva aina tekstin jälkeen. */
.pari{grid-template-columns:1fr}
.pari--kaanto .pari__kuva{order:0}
/* Luottamusrivi nousi hero-kuvan päälle; kapealla se veisi liikaa tilaa. */
.luottamus__ruudukko{grid-template-columns:repeat(2,1fr)}
/* Napit täyteen leveyteen, jotta osumapinta riittää sormelle. */
.hero__napit .nappi,
.napit .nappi,
.pari__napit .nappi{flex:1 1 100%}
}
@media (max-width:560px){
.luottamus__ruudukko{grid-template-columns:1fr}
/* Pitkä otsikko ei saa venyttää sivua vaakasuunnassa. */
.h-jatti,.h-iso,.h-keski{overflow-wrap:break-word}
.kohteet__loppu{flex-direction:column;align-items:flex-start}
}
/* Sormella osuttavat kohteet vähintään 44 px korkeita. */
@media (pointer:coarse){
.nappi,.valilehti,.linkki-nuoli{min-height:44px}
.nappi--s{min-height:40px}
}
/* Heron aallossa oli kaksi päällekkäistä valkoista SVG:tä: yksi täysi ja
toinen 45 %:n läpinäkyvyydellä animoituna. Kaksi eri sävyistä valkoista
samalla kuvalla näkyi epämääräisinä vaaleina läiskinä. Yksi selkeä käyrä
riittää — koristeellinen kakkosaalto piilotetaan. */
.hero__aalto svg:last-child:not(:first-child){display:none}
/* Heron teksti samaan linjaan logon kanssa.
Merkkauksessa .rajaus ja .hero__sisus ovat samassa elementissä, ja
.hero__sisus rajasi sen 900 pikseliin. Koska .rajaus keskittää
(margin-inline:auto), teksti valui sivun keskelle eikä osunut logon
ja valikon kanssa samaan vasempaan reunaan. Nyt kääre on sivun levyinen
ja vain tekstisisältö on rajattu. Artikkelisivut käyttävät blogilisäosan
omaa .ak-heroa, joten ne pysyvät keskitettyinä. */
.hero__sisus{max-width:var(--leveys)}
.hero__sisus > *{max-width:900px}
/* Nostokortin sisältö levittäytyy koko vaalealle alueelle.
Oletuksena .kortti__sisus keskittää sisällön pystysuunnassa, mikä jätti
kaksisarakkeisessa nostokortissa ison tyhjän ylä- ja alapuolelle. */
.kortti--nosto .kortti__sisus{
justify-content:space-between;
gap:clamp(1rem,1.8vw,1.6rem);
padding:clamp(1.6rem,2.6vw,2.4rem);
}
.kortti--nosto h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
.kortti--nosto .kortti__cta{margin-top:.2rem}
/* Aallon edelle jäävä osio ei tarvitse täyttä alapehmustetta: aalto tuo
oman korkeutensa päälle, jolloin väliin jäi epäluonnollisen iso tyhjä. */
.osio:has(+ .aalto),
.osio--tiivis:has(+ .aalto){padding-bottom:calc(var(--osio) * .5)}
.aalto + .osio,
.aalto + .osio--tiivis{padding-top:calc(var(--osio) * .7)}
/* Alatunnisteen yhteydenottopainike. */
.jalki__nappi{margin:1.1rem 0 0}
/* ── Vastuuvapauslauseke ───────────────────────────────────────────────
Laskuri- ja asiakirjasivujen alaviite. Hiusviiva erottaa sen laskurista
ilman omaa laatikkoa; teksti on tarkoituksella muuta sivua hiljaisempi. */
.vastuuvapaus{
max-width:78ch;
margin:2.6rem auto 0;
padding-top:1.4rem;
border-top:1px solid var(--viiva);
font-size:.82rem;
line-height:1.65;
color:rgba(15,23,42,.55);
}
/* ── Arkiston sivutus ──────────────────────────────────────────────────
paginate_links() tuottaa ja aktiiviselle
. Molemmat saavat saman mitan, jotta
rivi ei hypähdä sivulta toiselle siirryttäessä. */
.sivutus{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:.45rem;margin:clamp(2rem,4vw,3.2rem) 0 0;
}
.sivutus .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:2.6rem;height:2.6rem;padding:0 .8rem;
border:1px solid var(--viiva);border-radius:999px;
font-size:.9rem;font-weight:500;color:var(--vihrea);
text-decoration:none;background:var(--valkoinen);
transition:background .2s,border-color .2s,color .2s;
}
.sivutus a.page-numbers:hover{background:var(--minttu);border-color:var(--viiva-vahva)}
.sivutus .page-numbers.current{background:var(--vihrea);border-color:var(--vihrea);color:#fff}
.sivutus .page-numbers.dots{border-color:transparent;background:transparent}
/* Tyhjä arkisto. */
.arkisto__tyhja{text-align:center;color:rgba(15,23,42,.6);margin:2rem 0}
/* ── 404-sivun haku ────────────────────────────────────────────────────
core/search tuottaa oman .wp-block-search-rakenteensa; annetaan sille
sivuston mitat ja pyöristykset ilman että kajotaan lohkon rakenteeseen. */
.haku404{max-width:34rem;margin:0 auto}
.haku404 .wp-block-search__inside-wrapper{
border:1px solid var(--viiva);border-radius:999px;
background:var(--valkoinen);padding:.3rem .3rem .3rem 1.2rem;
box-shadow:var(--varjo-1);
}
.haku404 .wp-block-search__input{
border:0;background:transparent;font-size:1rem;padding:.6rem 0;
}
.haku404 .wp-block-search__input:focus{outline:none}
.haku404 .wp-block-search__button{
margin:0;border:0;border-radius:999px;
background:var(--vihrea);color:#fff;
padding:.7rem 1.5rem;font-size:.9rem;font-weight:500;cursor:pointer;
}
.haku404 .wp-block-search__button:hover{background:#08543a}
/* ── Ostopolun osio ────────────────────────────────────────────────────
Ostopolun oma näkymä tuo mukanaan omat välinsä, joten osio antaa vain
leveysrajauksen ja kevyen väljyyden. Ylätunniste on heroittomilla sivuilla
position:sticky, eli se varaa jo oman tilansa — sen korkeutta ei saa
lisätä tähän uudelleen. */
.osio--osto{padding-block:clamp(1.2rem,2.4vw,2.2rem)}
/* Modaalilomakkeen valintakytkin oli kiinni lähetyspainikkeessa: väli tulee
säännöstä .lomake .kytkin, eikä modaalin lomakkeella ole .lomake-luokkaa.
Annetaan kytkimelle oma väli myös modaalissa. */
.modaali .kytkin{margin:.4rem 0 1.4rem}
/* Alatunnisteen painike jäi näkymättömäksi: .jalki a (0,1,1) on tarkempi kuin
.nappi--vaalea (0,1,0), joten linkkiväri valui painikkeen päälle ja teksti
oli valkoinen valkoisella. Kahden luokan valitsin (0,2,0) voittaa sen. */
.jalki .nappi--vaalea,
.jalki .nappi--vaalea:hover{color:var(--vihrea)}
.jalki .nappi{font-size:.82rem}
/* ==========================================================================
WOOCOMMERCE — KASSA
==========================================================================
Kassalohkon merkkaus tulee WooCommercelta ja rakentuu selaimessa, joten
ulkoasu tehdään kokonaan täältä käsin. Mitään WooCommercen omaa rakennetta,
kenttää tai maksulogiikkaa ei muuteta — vain värit, mitat ja pyöristykset.
Kaikki säännöt on rajattu .kassa-kehys-osion sisään, jottei kassan tyylitys
vuoda muille sivuille jos samoja lohkoja käytetään muualla. */
.kassa-kehys{padding-block:clamp(1.6rem,3vw,2.6rem) clamp(3rem,6vw,5rem)}
/* ---------- Sivun otsikko ---------- */
.kassa-otsikko{margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.kassa-otsikko .h-iso{margin:0}
.kassa-otsikko__vahvistus{
margin:.7rem 0 0;font-size:.92rem;color:var(--teksti-himmea);
}
/* ---------- Kaksipalstainen asettelu ----------
WooCommerce asettaa palstat itse; tässä vain levennetään sivupalkkia ja
kasvatetaan palstaväliä sivuston omien mittojen mukaiseksi. */
.kassa-kehys .wc-block-checkout__main{padding-inline:0}
@media (min-width:1000px){
.kassa-kehys .wc-block-components-sidebar-layout{gap:clamp(2rem,3.5vw,3.4rem)}
.kassa-kehys .wc-block-checkout__sidebar{flex:0 0 clamp(21rem,28%,25rem)}
}
/* ---------- Osioiden otsikot ----------
"Yhteystiedot", "Laskutusosoite", "Maksutavat". */
.kassa-kehys .wc-block-components-checkout-step__title,
.kassa-kehys .wc-block-components-title{
font-family:inherit;font-weight:400;letter-spacing:-.01em;
font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--vihrea);
}
.kassa-kehys .wc-block-components-checkout-step__description{
font-size:.86rem;color:var(--teksti-himmea);margin-top:.3rem;
}
.kassa-kehys .wc-block-components-checkout-step{
border:0;padding-bottom:clamp(1.4rem,2.6vw,2.2rem);
}
/* ---------- Lomakekentät ----------
Sama pyöristys ja viivaväri kuin sivuston muissa lomakkeissa. */
.kassa-kehys .wc-block-components-text-input input,
.kassa-kehys .wc-block-components-textarea,
.kassa-kehys .wc-block-components-combobox-control input,
.kassa-kehys .wc-block-components-select__container select{
border:1px solid var(--viiva);border-radius:var(--r-s);
background:var(--valkoinen);color:var(--teksti);
font:inherit;font-size:.95rem;padding:1.15rem 1.1rem .55rem;
box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease;
}
.kassa-kehys .wc-block-components-text-input input:focus,
.kassa-kehys .wc-block-components-textarea:focus,
.kassa-kehys .wc-block-components-combobox-control input:focus,
.kassa-kehys .wc-block-components-select__container select:focus{
border-color:var(--vihrea);box-shadow:0 0 0 3px rgba(6,64,43,.12);outline:none;
}
.kassa-kehys .wc-block-components-text-input label,
.kassa-kehys .wc-block-components-combobox-control label{
color:var(--teksti-himmea);font-size:.95rem;
}
.kassa-kehys .wc-block-components-text-input.is-active label{
font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--vihrea);font-weight:600;
}
/* ---------- Sivupalkin kortti ---------- */
.kassa-kehys .wc-block-checkout__sidebar .wc-block-components-sidebar{
background:var(--minttu);border:1px solid var(--viiva);
border-radius:var(--r-m);padding:clamp(1.2rem,2.2vw,1.7rem);
}
.kassa-kehys .wc-block-components-order-summary__content,
.kassa-kehys .wc-block-components-totals-wrapper{border-color:var(--viiva)}
.kassa-kehys .wc-block-components-checkout-order-summary__title-text{
font-size:1rem;font-weight:600;color:var(--vihrea);
}
.kassa-kehys .wc-block-components-totals-item__label{color:var(--teksti-himmea);font-size:.9rem}
.kassa-kehys .wc-block-components-totals-item__value{font-variant-numeric:tabular-nums}
.kassa-kehys .wc-block-components-totals-footer-item{
font-size:1.05rem;font-weight:600;color:var(--vihrea);
}
/* ---------- Maksutavat ---------- */
.kassa-kehys .wc-block-components-radio-control-accordion-option,
.kassa-kehys .wc-block-components-radio-control__option{
border-radius:var(--r-s);border-color:var(--viiva);
}
.kassa-kehys .wc-block-components-radio-control-accordion-option:has(:checked){
border-color:var(--vihrea);background:var(--minttu);
}
/* ---------- Tilauspainike ----------
Sama muoto kuin sivuston .nappi, mutta WooCommercen oma elementti. */
.kassa-kehys .wc-block-components-checkout-place-order-button{
background:var(--vihrea);color:var(--valkoinen);
border:0;border-radius:999px;
padding:1.05rem 2rem;font:inherit;font-weight:600;font-size:.95rem;
letter-spacing:.02em;transition:background .25s ease,transform .25s ease;
}
.kassa-kehys .wc-block-components-checkout-place-order-button:hover:not(:disabled){
background:#08543a;transform:translateY(-2px);
}
/* ---------- Ehtoteksti ----------
Sivun sisällössä olevat kappaleet (varausmaksun ehdot). Ne latautuivat
samankokoisina kuin muu sisältö ja veivät sivupalkista puolet; pienempänä
ja hillitympänä ne luetaan ehtoina eikä myyntitekstinä. */
.kassa-kehys .wp-block-post-content > p,
.kassa-kehys .wc-block-checkout__terms{
font-size:.8rem;line-height:1.7;color:rgba(15,23,42,.6);
}
.kassa-kehys .wp-block-post-content > p strong{
display:block;margin-top:1.1rem;
font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
font-weight:600;color:var(--vihrea);
}
/* ---------- Tyhjä kori ---------- */
.kassa-kehys .wc-block-checkout-empty__title,
.kassa-kehys .wc-block-checkout-error__title{
font-family:inherit;font-weight:300;color:var(--vihrea);
}
@media (max-width:640px){
.kassa-kehys .wc-block-checkout__sidebar .wc-block-components-sidebar{
padding:1rem;border-radius:16px;
}
}
/* ==========================================================================
MOBIILI JA KOSKETUS
==========================================================================
Mitattu 360, 390, 430, 768 ja 1024 pikselin leveyksillä: yksikään sivu ei
vuoda vaakasuunnassa. Nämä säännöt korjaavat sen mitä mittaus löysi —
liian pienet kosketuskohteet, alle 12 pikselin tekstit ja iOS:n zoomauksen
lomakekentissä.
Kosketussäännöt pätevät kahdella ehdolla: (pointer:coarse) kattaa sormella
käytettävät laitteet kokoon katsomatta (myös tabletit), ja (max-width:640px)
varmistaa saman kapealla ruudulla siltä varalta, ettei laite ilmoita
osoitintaan karkeaksi. Työpöydällä leveässä ikkunassa mitat pysyvät
ennallaan. */
/* ---------- Kosketuskohteiden vähimmäiskoko ----------
Applen ja Googlen ohjeistus on 44 px. Mitatut arvot olivat .nappi 37–38 px,
.tunnus 30 px ja .nappi--s vielä matalampi. Korkeus kasvatetaan pehmusteella
eikä min-heightilla, jotta teksti pysyy pystysuunnassa keskellä. */
@media (pointer:coarse), (max-width:640px){
.nappi{padding-block:1.2rem;min-height:44px}
.nappi--s{padding-block:.95rem;min-height:44px;font-size:.8rem}
.nappi--l{padding-block:1.3rem;min-height:48px}
.linkki-nuoli{padding-block:.7rem;min-height:44px}
.paanavi a,
.jalki a{
padding-block:.7rem;display:inline-flex;align-items:center;min-height:44px;
}
.tunnus{min-height:44px}
/* Modaalin sulkupainike, sivutus ja valintaruudut. */
.modaali__sulje{min-width:44px;min-height:44px}
.sivutus .page-numbers{min-width:44px;height:44px}
.kytkin input{min-width:38px;min-height:24px}
/* Kortin koko pinta klikattavaksi tuntuu luontevammalta sormella kuin
pelkkä otsikkolinkki. */
.kortti__cta .nappi{width:100%}
}
/* ---------- Lomakekentät: iOS:n zoomauksen esto ----------
Safari iOS:ssä zoomaa sivun sisään aina kun tarkennettu kenttä on alle
16 px. Kentät olivat .95rem eli 15,2 px, joten jokainen napautus hyppäytti
sivun väärään kohtaan. 1rem = 16px poistaa sen. */
@media (max-width:640px){
.kentta input,
.kentta textarea,
.kentta select,
.lomake input,
.lomake textarea,
.lomake select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.haku404 .wp-block-search__input{
font-size:1rem;
}
}
/* ---------- Pienten tekstien alaraja ----------
Mittaus löysi 11,2 px:n tarrat ja suostumustekstit. Puhelimen näytöllä ne
ovat epämukavia lukea, joten pienillä ruuduilla nostetaan 12 pikseliin.
Työpöydällä alkuperäinen hienovaraisuus säilyy. */
@media (max-width:640px){
.tarra{font-size:.76rem;letter-spacing:.16em}
.suostumus{font-size:.76rem}
.kentta label i{font-size:.76rem}
.vastuuvapaus{font-size:.78rem}
.jalki__yhteys{font-size:.88rem}
/* Loput mittauksessa löytyneet alle 12 px:n tekstit. */
.kentta label{font-size:.76rem}
.henkilo__rooli{font-size:.78rem}
.jalki__pohja span{font-size:.78rem}
.modaali__ylapalkki p{font-size:.76rem}
.modaali__ala,
.modaali__ala a{font-size:.78rem}
}
/* ---------- Ankkurilinkit kiinteän ylätunnisteen alla ----------
scroll-behavior on smooth, mutta ilman scroll-paddingia kohde jäi
ylätunnisteen alle. */
html{scroll-padding-top:calc(var(--hdr, 5.5rem) + 1rem)}
/* Modaalin "tai"-erotin kahden lomakkeen välissä. */
.modaali__tai{
display:flex;align-items:center;gap:.9rem;
margin:1.4rem 0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--teksti-kevyt);
}
.modaali__tai::before,.modaali__tai::after{
content:"";flex:1;height:1px;background:var(--viiva);
}
/* ==========================================================================
MODAALI PUHELIMESSA — alalaidasta nouseva paneeli
==========================================================================
Puhelimessa keskelle kelluva laatikko on hankala: peukalo yltää näytön
alaosaan, ei keskelle. Modaali nousee siksi alalaidasta reunasta reunaan
ja vie noin 85 % näytön korkeudesta — sama ele kuin iOS:n ohjauskeskuksessa
ja järjestelmän omissa valintapaneeleissa.
Merkkaukseen ei kosketa: vetokahva on ::before-elementti, joten kaikki
modaalit saavat sen automaattisesti. */
@media (max-width:640px){
.modaali{
align-items:flex-end;
padding:0;
}
.modaali__laatikko{
width:100%;
max-width:none;
max-height:85vh;
/* dvh ottaa huomioon selaimen kutistuvan osoitepalkin; vh jää
varasuunnitelmaksi vanhemmille selaimille. */
max-height:85dvh;
border-radius:22px 22px 0 0;
animation:nouse-alhaalta .34s cubic-bezier(.22,.8,.3,1);
/* Kotipainikkeen ele iPhonessa vie alalaidasta tilaa. */
padding-bottom:env(safe-area-inset-bottom, 0px);
box-shadow:0 -18px 50px rgba(0,0,0,.3);
}
/* Vetokahva. Puhtaasti visuaalinen vihje siitä, että paneeli on
suljettavissa alaspäin vetämällä. */
.modaali__laatikko::before{
content:"";
display:block;
width:40px;height:4px;
margin:.65rem auto .1rem;
border-radius:999px;
background:var(--viiva-vahva);
flex-shrink:0;
}
.modaali__ylapalkki{
border-radius:0;
padding-block:.9rem;
}
.modaali__sisus{padding:1.15rem 1.15rem 1.6rem}
}
@keyframes nouse-alhaalta{
from{transform:translateY(100%)}
to{transform:translateY(0)}
}
/* Sulkeutuminen. Ilman näitä modaali katosi kertaheitolla display:none
-tyylillä, koska .on-auki poistettiin samalla hetkellä. Nyt lisätään ensin
.on-sulkeutuu, animaatio ajetaan loppuun ja vasta sitten piilotetaan
(front.js odottaa saman ajan). */
.modaali.on-sulkeutuu{animation:haipyy .28s ease forwards}
@keyframes haipyy{from{opacity:1}to{opacity:0}}
.modaali.on-sulkeutuu .modaali__laatikko{
animation:vaju .28s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes vaju{
from{transform:none;opacity:1}
to{transform:translateY(22px);opacity:0}
}
/* Mobiilissa paneeli liukuu ulos alakautta, samaa reittiä kuin se tuli. */
@media (max-width:640px){
.modaali.on-sulkeutuu .modaali__laatikko{
animation:vaju-alas .3s cubic-bezier(.4,0,1,1) forwards;
}
}
@keyframes vaju-alas{
from{transform:translateY(0);opacity:1}
to{transform:translateY(100%);opacity:1}
}
@media (prefers-reduced-motion:reduce){
.modaali__laatikko{animation:none}
.modaali.on-sulkeutuu,
.modaali.on-sulkeutuu .modaali__laatikko{animation:none}
}
/* Kirjautumismodaalin kuittaus- ja virheviesti. */
.modaali__viesti{
margin:0 0 1.1rem;padding:.85rem 1rem;
border-radius:var(--r-s);
background:var(--minttu);border:1px solid var(--viiva);
font-size:.85rem;line-height:1.6;color:var(--vihrea);
}
.modaali__viesti--virhe{
background:#fdf1ef;border-color:rgba(176,58,46,.25);color:#8c2f26;
}
/* Kortti ilman kuvaa: sama hillitty paikanpitäjä kuin kohdelistauksessa,
jottei kuvaton kohde katoa etusivulta kokonaan. */
.kortti__media--tyhja{
display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,var(--minttu) 0%,#f4f9f6 55%,var(--minttu) 100%);
}
.kortti__paikanpitaja{
font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
color:rgba(6,64,43,.34);font-weight:600;
}
/* ==========================================================================
AALLON VÄRI JA SAUMA
==========================================================================
Aallon väri on kirjoitettu SVG:hen fill-attribuuttina ja vastaa sitä osiota
joka aallon jälkeen tulee. Kun osio piilotetaan MODERN-asetuksista,
seuraavaksi tuleekin eri värinen osio ja väri menee väärin.
Lisäksi SVG:n korkeus lasketaan clampilla, jolloin se päätyy usein
murtopikseliin ja kääreen omaa taustaa (edellisen osion väri) jää näkyviin
ohuena viivana seuraavan osion yläreunaan.
Molemmat ratkaistaan samalla muuttujalla: --seuraava kertoo mikä väri tulee
aallon jälkeen. Sitä käytetään sekä SVG:n täyttöön että ::after-kaistaleeseen,
joka peittää sauman varmasti. :has() lukee DOMia suodatuksen jälkeen, joten
sääntö pysyy oikeana piilotuksista riippumatta. */
.aalto{position:relative;--seuraava:var(--valkoinen)}
.aalto:has( + .osio--minttu ){--seuraava:var(--minttu)}
.aalto:has( + .osio--vihrea ),
.aalto:has( + .jalki ){--seuraava:var(--vihrea)}
/* Viimeinen aalto ennen alatunnistetta: alatunniste on :n ulkopuolella,
joten sisarvalitsin ei osu siihen. */
main > .aalto:last-child{--seuraava:var(--vihrea)}
.aalto svg path{fill:var(--seuraava)}
/* Kaistale peittää murtopikselisauman aallon ja seuraavan osion välistä. */
.aalto::after{
content:"";
position:absolute;left:0;right:0;bottom:-1px;
height:4px;
background:var(--seuraava);
pointer-events:none;
}
/* Hero-aallolle sama väri seuraavan osion mukaan. */
.hero:has( + .osio--minttu ) .hero__aalto svg path{fill:var(--minttu)}
.hero:has( + .osio--vihrea ) .hero__aalto svg path{fill:var(--vihrea)}
/* Etusivulla laskurimodaalit ovat käytössä, mutta lisäosan oma otsikko ja
korttirivi piilotetaan — kortit ovat sivupohjan omat. Modaalit jäävät
DOMiin, jotta kortit voivat avata ne. */
.tyokalut-modaalit .aklask-header,
.tyokalut-modaalit .aklask-cards{display:none}
.tyokalut-modaalit .aklask-wrap{margin:0;padding:0}
/* ==========================================================================
ARVOSTELUKARUSELLI (aku-testimonials)
==========================================================================
Lisäosa käyttää samaa väripalettia kuin teema, joten ilme on jo lähellä.
Sovitetaan loput teeman omiin muuttujiin: sama pyöristys, sama fontti ja
sama viivaväri. Karusellin oma pohjaväri otetaan pois, koska se on jo
.osio--minttu-osion sisällä eikä tarvitse omaa taustaa. */
.osio .aku-test-carousel{
background:transparent;
padding-inline:0;
}
.osio .aku-test-card{
--aku-test-radius:var(--r-m);
--aku-test-border:var(--viiva);
--aku-test-bg:var(--valkoinen);
--aku-test-shadow:var(--varjo-1);
font-family:inherit;
}
.osio .aku-test-card__quote,
.osio .aku-test-card__author,
.osio .aku-test-card__role{font-family:inherit}
.osio .aku-test-card__author{color:var(--vihrea);font-weight:600}
.osio .aku-test-card__role{color:var(--teksti-kevyt)}
/* Navigointipisteet ja nuolet teeman vihreällä. */
.osio .aku-test-dot{background:var(--viiva-vahva)}
.osio .aku-test-dot[aria-current="true"],
.osio .aku-test-dot.is-active{background:var(--vihrea)}
.osio .aku-test-btn{
background:var(--valkoinen);border:1px solid var(--viiva);color:var(--vihrea);
}
.osio .aku-test-btn:hover{background:var(--minttu)}
/* Modaalikääre ei saa viedä tilaa sivulta: se on pelkkä säiliö modaaleille,
jotka ovat auetessaan position:fixed. */
.tyokalut-modaalit{margin:0;padding:0;line-height:0}
/* Heron jälkeinen ensimmäinen osio: aalto tekee jo erotuksen, joten täysi
osioväljyys jättää turhan suuren tyhjän alueen otsikon yläpuolelle. */
.hero + .osio,
.hero + .osio--minttu{padding-top:calc(var(--osio) * .55)}
/* ============================================================
TURVA-ALUEET — notch, kotipainikkeen ele, kaarevat kulmat
viewport-fit=cover päästää sivun laitteen reunaan asti, jolloin
ylätunnisteen vihreä jatkuu notchin taakse eikä yläreunaan jää
valkoista raitaa. Vastineeksi sisältö on itse pidettävä pois
notchin ja kotipainikkeen alta.
env() palauttaa nollan laitteilla joilla lovea ei ole, ja
varasuunnitelma 0px kattaa selaimet jotka eivät env():iä tunne,
joten nämä säännöt ovat turvallisia kaikkialla.
============================================================ */
/* Ylätunniste: sisältö notchin alapuolelle, tausta sen taakse. */
.ylatunnus{
padding-top:calc(clamp(.6rem,1.1vw,1rem) + env(safe-area-inset-top, 0px));
}
.ylatunnus.on-vieritetty{
padding-top:calc(.45rem + env(safe-area-inset-top, 0px));
}
/* Vaakatasossa lovi ja kaarevat kulmat syövät sivureunoista. */
.ylatunnus__sisus{
padding-inline:calc(var(--reuna) + env(safe-area-inset-left, 0px))
calc(var(--reuna) + env(safe-area-inset-right, 0px));
}
/* Evästebanneri kotipainikkeen eleen yläpuolelle. */
.evasteet{
bottom:calc(clamp(1rem,2vw,1.5rem) + env(safe-area-inset-bottom, 0px));
left:calc(var(--reuna) + env(safe-area-inset-left, 0px));
right:calc(var(--reuna) + env(safe-area-inset-right, 0px));
}
@media (max-width:960px){
/* Mobiilivalikko on koko korkeuden mittainen: sisältö turva-alueelle. */
.paanavi{
padding-top:calc(2rem + env(safe-area-inset-top, 0px));
padding-bottom:calc(2rem + env(safe-area-inset-bottom, 0px));
padding-left:calc(var(--reuna) + env(safe-area-inset-left, 0px));
}
}
/* Alatunniste: viimeinen rivi ei jää kotipainikkeen eleen alle.
Suunnitelmassa alapehmuste on 0, joten lisätään vain turva-alue. */
.jalki{
padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* ============================================================
:has()-VARASUUNNITELMA
Selain joka ei tunne :has():iä hylkää koko valitsimen, jolloin
ylempänä olevat body:has(.hero) -säännöt katoavat: etusivun
yläreunaan jäisi valkoinen kaistale ja alasivujen ylätunniste
jäisi läpinäkyväksi valkoisen sisällön päälle.
front.js tunnistaa puuttuvan tuen (CSS.supports) ja lisää
luokan .ei-has sekä body-luokan .on-hero. Aaltojen värit se
asettaa suoraan tyyliattribuuttiin. Nykyselaimissa tämä lohko
ei koskaan aktivoidu.
============================================================ */
.ei-has body:not(.on-hero) .ylatunnus{background:var(--vihrea);position:sticky}
.ei-has body:not(.on-hero) .ylatunnus .paanavi a{color:var(--valkoinen)}
.ei-has body.on-hero .wp-site-blocks{margin-top:0;padding-top:0}
.ei-has body.on-hero .wp-site-blocks > main{margin-top:0}
.ei-has body.on-hero .wp-site-blocks > main > :first-child{margin-top:0}
.ei-has body.on-hero .hero{margin-top:0}
/* ============================================================
WORDPRESSIN YLLÄPITOPALKKI
Kirjautuneelle WordPress lisää sivun ylälaitaan palkin ja
työntää dokumenttia alas (html{margin-top:32px !important}).
Kiinteä ylätunniste on kiinni näkymän yläreunassa eikä tiedä
palkista: se jää sen taakse, ja sivun ylälaitaan syntyy
valkoinen rako dokumentin siirtymän verran.
Näkyy vain kirjautuneena. Vierailija ei näe eroa, joten tämä
ei muuta julkista ulkoasua lainkaan.
============================================================ */
.admin-bar .ylatunnus{top:32px}
@media (max-width:960px){
.admin-bar .paanavi{top:32px}
}
/* Kapealla näytöllä WordPressin palkki on 46 px korkea. */
@media screen and (max-width:782px){
.admin-bar .ylatunnus{top:46px}
.admin-bar .paanavi{top:46px}
}
/* Lomakkeiden palaute — ActiveCampaign-lähetys tapahtuu taustalla,
joten vastaus näytetään lomakkeen sisällä eikä erillisellä sivulla. */
.lomake__vastaus{
margin-top:1rem;
padding:.85rem 1.1rem;
border-radius:var(--r-p);
font-size:.92rem;
line-height:1.5;
}
.lomake__vastaus--ok{
background:rgba(255,255,255,.14);
color:var(--valkoinen);
border:1px solid rgba(255,255,255,.28);
}
.lomake__vastaus--virhe{
background:rgba(255,255,255,.1);
color:#ffd9d0;
border:1px solid rgba(255,180,160,.45);
}
/* Vaalealla taustalla oleva lomake tarvitsee tummat sävyt. */
.osio:not(.osio--vihrea) .lomake__vastaus--ok{
background:var(--minttu);color:var(--vihrea);border-color:rgba(6,64,43,.2);
}
.osio:not(.osio--vihrea) .lomake__vastaus--virhe{
background:#fdecea;color:#8a2b1b;border-color:rgba(138,43,27,.25);
}
/* ============================================================
TILAUSVAHVISTUS
WooCommercen omat lohkot säilyvät sellaisinaan — ne osaavat
kertoa myös keskeneräisestä tilauksesta. Tyylit on rajattu
.vahvistus-kehys-osion sisään, jottei WooCommercen ulkoasu
muutu kassalla tai muualla. Sama ratkaisu kuin .kassa-kehys.
============================================================ */
/* Ylätunnus: WooCommercen tilaviesti heron otsikoksi. */
.hero--vahvistus{min-height:clamp(38vh,32vw,46vh)}
.hero--vahvistus .wc-block-order-confirmation-status{margin:0}
.hero--vahvistus .wc-block-order-confirmation-status__heading,
.hero--vahvistus h1,
.hero--vahvistus h2{
font-size:clamp(2.2rem,5vw,3.9rem);
font-weight:200;
letter-spacing:-.025em;
line-height:1.06;
color:var(--valkoinen);
margin:0 0 1rem;
}
.hero--vahvistus p{
color:rgba(255,255,255,.86);
font-size:clamp(1rem,1.3vw,1.15rem);
max-width:52ch;
margin:0;
}
.vahvistus-kehys{padding-block:clamp(2.4rem,5vw,4rem) clamp(3rem,6vw,5rem)}
.vahvistus__otsikko{
font-size:clamp(1.2rem,1.8vw,1.5rem);
font-weight:500;
letter-spacing:-.01em;
color:var(--vihrea);
margin:clamp(2rem,3.5vw,2.8rem) 0 1rem;
}
/* Yhteenvetorivi: tilausnumero, päivä, summa, sähköposti. */
.vahvistus-kehys .wc-block-order-confirmation-summary{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
gap:clamp(1rem,2vw,1.6rem);
background:var(--minttu);
border:1px solid rgba(6,64,43,.1);
border-radius:var(--r-m);
padding:clamp(1.2rem,2.4vw,1.8rem);
margin:0;
list-style:none;
}
.vahvistus-kehys .wc-block-order-confirmation-summary li{
margin:0;padding:0;border:0;list-style:none;
}
.vahvistus-kehys .wc-block-order-confirmation-summary__key{
display:block;
font-size:.72rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;
color:rgba(6,64,43,.62);
margin-bottom:.3rem;
}
.vahvistus-kehys .wc-block-order-confirmation-summary__value{
display:block;
font-size:1.02rem;font-weight:500;color:var(--vihrea);
word-break:break-word;
}
/* Erittelytaulukko. */
.vahvistus-kehys table{
width:100%;border-collapse:collapse;
background:var(--valkoinen);
border:1px solid rgba(6,64,43,.12);
border-radius:var(--r-m);
overflow:hidden;
}
.vahvistus-kehys table th,
.vahvistus-kehys table td{
padding:clamp(.85rem,1.6vw,1.1rem) clamp(1rem,2vw,1.4rem);
border-bottom:1px solid rgba(6,64,43,.09);
text-align:left;
font-size:.96rem;
}
.vahvistus-kehys table thead th{
background:var(--minttu);
font-size:.72rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;
color:rgba(6,64,43,.7);
}
.vahvistus-kehys table td:last-child,
.vahvistus-kehys table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.vahvistus-kehys table tfoot tr:last-child th,
.vahvistus-kehys table tfoot tr:last-child td{
border-bottom:0;
font-weight:600;color:var(--vihrea);font-size:1.04rem;
}
.vahvistus-kehys table tr:last-child td,
.vahvistus-kehys table tr:last-child th{border-bottom:0}
/* Osoitelaatikot. */
.vahvistus__osoitteet{gap:clamp(1.2rem,2.5vw,2rem)}
.vahvistus-kehys .wc-block-order-confirmation-shipping-address,
.vahvistus-kehys .wc-block-order-confirmation-billing-address{
background:var(--valkoinen);
border:1px solid rgba(6,64,43,.12);
border-radius:var(--r-m);
padding:clamp(1.1rem,2.2vw,1.5rem);
font-size:.96rem;line-height:1.75;
color:var(--teksti);
}
/* Latauslinkit ja lisätiedot samaan laatikkotyyliin. */
.vahvistus-kehys .wc-block-order-confirmation-downloads,
.vahvistus-kehys .wc-block-order-confirmation-additional-fields{
background:var(--valkoinen);
border:1px solid rgba(6,64,43,.12);
border-radius:var(--r-m);
padding:clamp(1.1rem,2.2vw,1.5rem);
}
.vahvistus-kehys a{color:var(--vihrea);text-underline-offset:.18em}
@media (max-width:640px){
.vahvistus-kehys table th,
.vahvistus-kehys table td{padding:.8rem .9rem;font-size:.92rem}
.vahvistus__osoitteet{flex-direction:column}
}