/* Theme Name: Asunnonhinta-arvio Description: asunnonhinta-arvio.fi:n teema. Ilme, mitat, värit ja liike tulevat suoraan mockupista (docs/mockup.html), joka on käyttöliittymän totuus — tämä tiedosto on sen käännös tuotantoon. Ei sivunrakentajaa, ei kehystä, ei jQueryä. Version: 2.0.0 Requires PHP: 8.0 Author: Atkpiste Helsinki Oy Text Domain: asunnonhinta-arvio */ /* ═══════════════════════════════════════════════════════════════════ TYYLIT TULEVAT MOCKUPISTA, EIVÄT TÄSTÄ TIEDOSTOSTA. docs/mockup.html on käyttöliittymän totuus (Petrin linjaus 5.8.2026): kun ilme muuttuu, se muuttuu ensin mockupissa ja siirretään sitten tänne. Siksi tämä tiedosto seuraa mockupin lohkojakoa ja kommentteja sellaisenaan — jokainen perustelu, joka mockupissa selittää miksi jokin on niin kuin on, on myös täällä. Kaksi eri perustelua samalle säännölle tarkoittaisi, että toinen niistä on väärä. POIS JÄTETTY: mockupin omat työkalut (näkymävalitsin, MOCKUP-merkki, demo-painikkeet) ja evästekysely, joka kytketään vasta kun kävijämittaus otetaan käyttöön. ═══════════════════════════════════════════════════════════════════ */ /* YKSI SÄVY, KAKSI SYVYYTTÄ. --accent = TOIMINTA ja brändi: logo, painikkeet, valinta, vaiheet, fokus. --accent-2 = sama magenta syvempänä: mittaripalkit, lähdemerkinnät, mitä palkkio sisältää. Hiljaisempi, ei toinen väri. AIEMMIN NÄITÄ OLI KAKSI ERI SÄVYÄ (magenta ja eukalyptus), ja väri kantoi merkityksen "mitattu vs. kerrottu". Se toimi vain niin kauan kuin myyjä osasi lukea koodin. Kun jokainen luku sai viereensä sanat — "todennettu datasta", "välittäjän omista vastauksista" — teksti alkoi kertoa saman asian yksiselitteisesti, eikä värin tarvinnut enää yrittää. Silloin toinen sävy oli pelkkä toinen sävy, ja brändi oli sitä heikompi. Merkitys kuuluu sanoihin, tunnistettavuus väriin. */ :root{ --ground:#f6f7f8; --grad-1:#fbfafb; --grad-2:#f4f3f4; --grad-3:#eae7ea; --surface:#ffffff; --surface-2:#eef1f2; --ink:#12181d; --muted:#5b6a73; --faint:#8a979e; --hair:#dde2e5; --hair-strong:#c3cbcf; --accent:#842a5b; --accent-ink:#ffffff; --accent-soft:#f6e9f0; --accent-2:#5d1d40; --accent-2-ink:#ffffff; --accent-2-soft:#f5e8ef; --sec-tint:#f2eef0; --foot-bg:#230b18; --foot-ink:#f7edf3; --foot-muted:#c8a2b7; --foot-faint:#a37b91; --foot-hair:#461630; --veil:rgba(255,255,255,.84); --warn:#8a5a00; --foot-curve:linear-gradient(180deg,#3a1228 0%,#2f0f20 30%,#230b18 60%,#170710 100%); --r:4px; /* PIENI VERSAALINIMIKE. Yksi mitta koko sivustolle: tunnisteet, mittarien otsikot, taulukon otsikkorivi, alatunnisteen sarakkeet, lähdemerkinnät. Ilman nimeä näitä oli kolme kokoa (.6875 / .75 / step--1) samassa tehtävässä, ja ero näkyi vierekkäin. Osioiden silmäotsikko (.eyebrow) on tarkoituksella isompi — se on eri taso. */ --label:.75rem; /* Heron vasen palsta: sama mitta ledelle, lomakkeelle ja pienelle tekstille, jotta pystyreunoja on kaksi eikä kuusi. */ --hero-mitta:440px; --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.5rem; --step-3:2.125rem; --step-4:3rem; --step-5:4.25rem; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } @media (prefers-color-scheme:dark){ :root{ --ground:#0e1317; --grad-1:#101619; --grad-2:#0d1215; --grad-3:#0c090e; --surface:#161c21; --surface-2:#1e262c; --ink:#e9eef0; --muted:#98a6ad; --faint:#71818a; --hair:#28323a; --hair-strong:#3a4750; --accent:#da8bb6; --accent-ink:#33081f; --accent-soft:#39182a; --sec-tint:#21181c; --accent-2:#ce649e; --accent-2-ink:#2a0619; --accent-2-soft:#321525; --foot-bg:#230b18; --foot-ink:#f6eaf0; --foot-muted:#c69fb4; --foot-faint:#a1788e; --foot-hair:#42152e; --veil:rgba(22,28,33,.84); --warn:#d3a24a; --foot-curve:linear-gradient(180deg,#361126 0%,#2b0d1e 24%,#1f0a15 56%,#13060d 100%); } } :root[data-theme="dark"]{ --ground:#0e1317; --grad-1:#101619; --grad-2:#0d1215; --grad-3:#0c090e; --surface:#161c21; --surface-2:#1e262c; --ink:#e9eef0; --muted:#98a6ad; --faint:#71818a; --hair:#28323a; --hair-strong:#3a4750; --accent:#da8bb6; --accent-ink:#33081f; --accent-soft:#39182a; --sec-tint:#21181c; --accent-2:#ce649e; --accent-2-ink:#2a0619; --accent-2-soft:#321525; --foot-bg:#230b18; --foot-ink:#f6eaf0; --foot-muted:#c69fb4; --foot-faint:#a1788e; --foot-hair:#42152e; --veil:rgba(22,28,33,.84); --warn:#d3a24a; --foot-curve:linear-gradient(180deg,#361126 0%,#2b0d1e 24%,#1f0a15 56%,#13060d 100%); } :root[data-theme="light"]{ --ground:#f6f7f8; --grad-1:#fbfafb; --grad-2:#f4f3f4; --grad-3:#eae7ea; --surface:#ffffff; --surface-2:#eef1f2; --ink:#12181d; --muted:#5b6a73; --faint:#8a979e; --hair:#dde2e5; --hair-strong:#c3cbcf; --accent:#842a5b; --accent-ink:#ffffff; --accent-soft:#f6e9f0; --accent-2:#5d1d40; --accent-2-ink:#ffffff; --accent-2-soft:#f5e8ef; --foot-bg:#230b18; --foot-ink:#f7edf3; --foot-muted:#c8a2b7; --foot-faint:#a37b91; --foot-hair:#461630; --veil:rgba(255,255,255,.84); --warn:#8a5a00; } /* harjattu tumma teräs (gunmetal), matta pinta: lähes tasainen kansi (matalla metallilla vain loiva sävyliuku), metallisuus tulee REUNOISTA: 1px ääriviiva + selvä viistevalo/-varjo (bevel) + pyöristys. Kuluminen tekstuuritiilenä: ohuet naarmut kahdessa kulmassa, kiillottuneet kulumaläikät, likaantuma, rae. */ :root{ --bz-ink:#f9f0f5; /* vaalea kohoteksti */ --bz-etch:rgba(24,4,15,.6); /* tekstin tumma varjo */ --bz-edge:#270c1b; /* sorvattu ääriviiva */ --bz-spec:radial-gradient(85% 65% at 50% 0%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 75%); --bz-side:linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 91%, rgba(0,0,0,.16) 100%); --bz-curve:linear-gradient(180deg, #842a5b 0%, #782653 32%, #6d224b 62%, #611f43 100%); --bz-tex:url("data:image/svg+xml;utf8,"); } @media (prefers-color-scheme:dark){ :root{ --bz-ink:#1e1203; --bz-etch:rgba(255,224,164,.38); --bz-edge:#33210a; --bz-spec:radial-gradient(55% 42% at 50% 10%, rgba(255,232,178,.6) 0%, rgba(255,232,178,.16) 40%, rgba(255,232,178,0) 72%); --bz-curve:linear-gradient(180deg, #d9ae66 0%, #e8c47e 4%, #c89a55 11%, #dcb670 16%, #93692e 23%, #7a5522 40%, #5f4115 58%, #4c340e 78%, #5e4217 90%, #86602a 100%); } } :root[data-theme="dark"]{ --bz-ink:#fbf4f8; --bz-etch:rgba(0,0,0,.6); --bz-edge:#1f0a15; --bz-spec:radial-gradient(85% 65% at 50% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 75%); --bz-curve:linear-gradient(180deg, #973069 0%, #8c2c61 32%, #802859 62%, #742550 100%); } :root[data-theme="light"]{ --bz-ink:#f9f0f5; --bz-etch:rgba(24,4,15,.6); --bz-edge:#270c1b; --bz-spec:radial-gradient(85% 65% at 50% 0%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 75%); --bz-curve:linear-gradient(180deg, #842a5b 0%, #782653 32%, #6d224b 62%, #611f43 100%); } *{box-sizing:border-box} /* Pystysuunnan tarttuva footer: lyhyellä sivulla (kirjautuminen) alaosan alle jäisi muuten maisemaa, ja sivu näyttäisi katkeavan kesken. */ /* Pystygradientti sivun taustaksi: vaalein ylhäällä, syvenee alaspäin ja kohtaa tumman footerin ilman hyppäystä. Gradientti on DOKUMENTIN mittainen eikä ruudun, joten se etenee kerran sivun alusta loppuun — kiinnitettynä se toistaisi saman liu'un joka ruudulla eikä kertoisi syvyydestä mitään. */ body{display:flex;flex-direction:column;min-height:100vh; margin:0;background:linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 58%, var(--grad-3) 100%);color:var(--ink);font-family:var(--sans); font-size:var(--step-0);line-height:1.55;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.12} h1{font-size:var(--step-4);font-weight:800;letter-spacing:-.035em} h2{font-size:var(--step-3);font-weight:750} h3{font-size:var(--step-1);font-weight:700;letter-spacing:-.01em} p{margin:0} a{color:inherit} button{font:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Liike pois — kaksi eri syytä, sama lopputila: käyttäjä pyysi vähemmän liikettä, tai hätäjarru laukesi (ks. skripti). MOLEMPIEN on palautettava jokainen animoitu ominaisuus loppuarvoonsa. Pelkkä .reveal-luokan poisto ei riitä: käyrän piirtotila on omissa ominaisuuksissaan, ja ne jäisivät piirtämättömään alkuarvoonsa. */ .no-motion *{animation:none!important;transition:none!important} .no-motion .reveal{opacity:1!important;transform:none!important} .no-motion .trend .line{stroke-dashoffset:0!important} .no-motion .trend .area{opacity:.12!important} .no-motion .trend .dot{opacity:1!important} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} /* Paljastus purettava myös tästä päästä. Ilman tätä riviä siirtymän poisto jättäisi lohkot pysyvästi tilaan opacity:0 — sivu olisi tyhjä juuri sille käyttäjälle, joka pyysi vähemmän liikettä. Skripti kysyy samaa asiaa matchMedialla, mutta sisältö ei saa riippua siitä, että kaksi lähdettä pysyy synkassa. */ .reveal{opacity:1!important;transform:none!important} .trend .line{stroke-dashoffset:0!important} .trend .area{opacity:.12!important} .trend .dot{opacity:1!important} } .wrap{max-width:1080px;margin:0 auto;padding:0 24px} .stack{display:flex;flex-direction:column} .num{font-variant-numeric:tabular-nums} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .eyebrow{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.13em; font-weight:650;color:var(--accent-2)} /* Tilastosivujen eyebrow toimii murupolkuna: sama rivi, sama paino, mutta ylätasot ovat linkkejä. Ilman sitä aluesivu on umpikuja — 1 724 sivua, joista ei pääse kuntaan eikä pilariin, eivätkä ne kerry toistensa varaan. */ .eyebrow a{color:inherit;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px} .eyebrow a:hover{color:var(--accent)} /* ── kehys ─────────────────────────────────────────────── */ .topbar{position:sticky;top:0;z-index:20;background:var(--surface); border-bottom:1px solid var(--hair)} /* Ankkurivieritys pysähtyy sticky-palkin ALLE, ei sen taakse (Petrin bugilöytö 8.8.2026: "linkki vie sisällön liian korkealle"). Palkki on ~64 px + rivittyessään korkeampi, joten marginaalissa on varaa. */ #jatkopolut-koti,#luotettavuus,#oppaat,#ukk-ankkuri{ scroll-margin-top:110px} /* Yhdeksän näkymää ei mahdu yhdelle riville. Palkki saa kasvaa ja rivittyä sen sijaan että napit puristuisivat tai valuisivat ulos: mockupin navigaatio on työkalu, ei tuotteen lopullinen valikko. */ .topbar .wrap{display:flex;align-items:center;gap:14px 20px;min-height:60px; flex-wrap:wrap;padding-top:8px;padding-bottom:8px} .logo{display:flex;align-items:baseline;gap:2px;font-weight:800; letter-spacing:-.035em;font-size:var(--step-1)} .logo b{color:var(--accent);font-weight:800} /* VALIKKO ON TEKSTINAPPEJA, EI LEIPÄTEKSTIÄ. Mockupin säännöt oli kirjoitettu button-elementeille, ja tuotannossa linkit ovat a-elementtejä — säännöt eivät osuneet niihin lainkaan, joten valikko peri leipätekstin koon ja kulki ilman väliä (Petrin havainto 17.8.2026). Sama sääntö koskee nyt molempia. */ .viewnav{display:flex;gap:2px 4px;margin-left:auto;flex-wrap:wrap; flex:1 1 auto;justify-content:flex-end} .viewnav a,.viewnav button{background:none;border:0;padding:6px 9px; border-radius:var(--r);white-space:nowrap;color:var(--muted); font-size:var(--step--1);font-weight:600;line-height:1.3} .viewnav a:hover,.viewnav button:hover{color:var(--ink);background:var(--surface-2)} .viewnav a[aria-current="true"],.viewnav button[aria-current="true"]{color:var(--ink)} /* Kolmen pisteen valikko: piilossa leveällä ruudulla, koska silloin linkit mahtuvat riville eikä ylimääräistä klikkiä tarvita. */ .nav-avaa{display:none;border:0;background:none;color:var(--muted); width:32px;height:32px;padding:0;border-radius:50%;margin-left:auto; align-items:center;justify-content:center} .nav-avaa:hover{color:var(--ink);background:var(--surface-2)} .nav-avaa svg{width:20px;height:20px;fill:currentColor;stroke:none} @media (max-width:880px){ .nav-avaa{display:inline-flex} /* Valikko putoaa palkin alle omana lokerokseen: rivittyneenä se työnsi kuvakkeet omalle rivilleen ja palkki söi kolmanneksen ruudusta. */ .viewnav{display:none;position:absolute;top:100%;right:0;left:0; flex-direction:column;align-items:stretch;gap:0; background:var(--surface);border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); box-shadow:0 12px 26px rgba(0,0,0,.12);padding:6px 0} .topbar.valikko-auki .viewnav{display:flex} .viewnav a{padding:12px 20px;border-radius:0;font-size:var(--step-0)} .topbar{position:sticky} .topbar .wrap{position:relative;flex-wrap:nowrap;gap:8px} /* Kuvakkeet pysyvät oikeassa laidassa napin vieressä. */ .account{margin-left:0;flex-wrap:nowrap} } /* Ei korostustaustaa aktiiviselle (Petri 8.8.2026): onepage-mallissa valikko on osioluettelo, ei sivunvaihdin — kaikki napit ovat samaa tekstinappikieltä ja aktiivisuus näkyy vain sävyssä. */ .account{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .account button,.account a{font:inherit;font-size:var(--step--1);cursor:pointer;border-radius:var(--r); padding:7px 13px;font-weight:650} /* Kirjaudu on sama painike kuin "Laske hinta-arvio", vain pienempänä. Aiemmin se oli litteä --accent-täyttö, ja tummassa teemassa --accent on VAALEA magenta — sama muuttuja tuotti siis kirkkaan laatan siinä missä pääpainike on syvä metalli. Materiaali määritellään nyt yhdessä paikassa (ks. "matta metallinappi" alempana) ja koko erikseen; kaksi kokoa samasta pinnasta on eri asia kuin kaksi eri pintaa. */ /* KIRJAUTUMINEN JA TEEMA OVAT KUVAKKEITA, EIVÄT PAINIKKEITA (Petri 17.8.2026). Täytetty nappi kilpaili sivun oikean pääpainikkeen kanssa ja lupasi toiminnon, joka koskee vain palaavaa käyttäjää. Reunuskaan ei jäänyt: kehystetty kuvake näyttää yhä napilta, ja yläpalkissa on jo yksi asia joka saa näyttää painikkeelta — ei kolmea. Merkitys kerrotaan aria-labelilla, ei laatikolla. */ .account .acct-ikoni{border:0;background:none;color:var(--muted); width:32px;height:32px;padding:0;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; transition:color .18s ease,background-color .18s ease} .account .acct-ikoni:hover{color:var(--ink);background:var(--surface-2)} .account .acct-ikoni svg{width:18px;height:18px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* Kuvake kertoo MIHIN klikkaus vie, ei missä ollaan: vaaleassa näkyy kuu, tummassa aurinko. Vaihto on CSS:ssä eikä JavaScriptissä, jotta kuvake on oikea jo ensimmäisessä maalauksessa — teema voi tulla käyttöjärjestelmästä eikä vain napista. */ .ik-aurinko{display:none} :root[data-theme="dark"] .ik-kuu{display:none} :root[data-theme="dark"] .ik-aurinko{display:inline} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ik-kuu{display:none} :root:not([data-theme="light"]) .ik-aurinko{display:inline} } .acct-area{background:none;border:1px solid var(--hair-strong);color:var(--ink)} .acct-area:hover{border-color:var(--accent)} .acct-name{font-size:var(--step--1);color:var(--muted)} .acct-out{font-size:var(--step--1);color:var(--muted)} .acct-in{display:none;align-items:center;gap:10px;flex-wrap:wrap} :root[data-tila="myyja"] .acct-in,:root[data-tila="valittaja"] .acct-in{display:flex} :root[data-tila="myyja"] .acct-login,:root[data-tila="valittaja"] .acct-login{display:none} /* 100vw-levyinen maisemakerros ei saa tuottaa vaakavieritystä silloin kun pystyvierityspalkki kaventaa näkymää. */ /* .view: mockupin näkymävaihto ei kuulu tuotantoon — WordPress näyttää yhden sivun kerrallaan. Overflow-clip säilyy, koska maisemakerros on ruudun levyinen. */ .view,main{overflow-x:clip} /* Aktiivinen näkymä kasvaa, jotta footer painuu sivun alalaitaan myös lyhyellä sivulla — muuten sen alle jäisi maisemaa. */ main{flex:1 0 auto} /* Ilmavuus (6.8.2026, Petrin palaute "layout on liian tiivis"): osio hengittää pystysuunnassa, ja otsikkoblokin ja sisällön väli kasvoi samassa suhteessa. Tila on osa erottumista siinä missä taustaväri. */ .section{padding:108px 0;border-bottom:1px solid var(--hair)} .section:last-child{border-bottom:0} /* ── osioiden taustat (6.8.2026) ───────────────────────────── OSIO EROTTUU TAUSTASTA, EI VIIVASTA. Pelkkä 1 px:n viiva samalla pohjavärillä ei riittänyt: osiot valuivat toisiinsa. Rytmi on valkoinen / brändisävy vuorotellen, ja yksi tumma viiniosio (välittäjävertailu) katkaisee sivun — sama tumma, jolla footer jo puhuu, joten väri on tuttu eikä uusi. TUMMA OSIO VAIHTAA MUUTTUJAT, EI ELEMENTTEJÄ: sisällön inline-tyylit käyttävät var(--muted) ja var(--ink), joten osio määrittelee ne uusiksi eikä koske sisältöön. Valkoinen kortti (.peek) palauttaa vaalean pinnan omat arvot — se on aina vaalea, teemasta ja osiosta riippumatta. */ .section--surface,.section--tint,.section--dark{border-bottom:0} .section--surface{background:var(--surface)} .section--tint{background:var(--sec-tint)} /* Tumma osio EI ole footerin tumma: footer on lähes musta violetti, tämä on selvästi vaaleampi murrettu luumu — sukua muttei sama, jotta sivun keskellä oleva osio ei näytä sivun lopulta. */ .section--dark{background:linear-gradient(180deg,#4a2438 0%,#3f1d30 55%,#341627 100%); /* color myös ELEMENTTIIN: body-tason väri periytyy laskettuna, joten pelkkä --ink-ohitus ei tavoita otsikoita joilla ei ole omaa color-sääntöä. */ color:#f8eef4; --ink:#f8eef4;--muted:#d3b6c7;--faint:#ab8c9d; --hair:#5e3a4e;--accent-2:#e59cc7} .section--dark .peek{color:#12181d} .section--dark .peek{--ink:#12181d;--muted:#5b6a73;--faint:#8a979e; --hair:#dde2e5;--surface:#ffffff; box-shadow:0 10px 34px rgba(0,0,0,.35);border-color:transparent} /* ── etusivu ───────────────────────────────────────────── */ /* Alapadding on suurempi kuin ylä: heron alla asuu 128 px:n kaupunki, ja sisällön on jäätävä kokonaan sen yläpuolelle. */ /* Palstat alkavat samalta korkeudelta (align-items:start), jotta oikean palstan kortti ei liiku kun vasemman sisältö vaihtuu. Alapadding on juuri sen verran, ettei teksti kosketa kaupunkia — turhaa tyhjää ei jätetä, koska kaupunki on osa sommittelua. */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start; padding:80px 0 150px} .hero h1{margin-bottom:20px} /* Ingressi saa hengittää koko palstan leveydellä (Petri 7.8.2026): 440 px:n raja rivitti sen neljälle riville. */ .hero .lede{font-size:var(--step-1);color:var(--muted);max-width:62ch;margin-bottom:30px} /* HERO ALOITTAA RUUDUISTA (5.8.2026). Aiempi kolmen kentän ja alasvetovalikon lomake korvattiin kohdetyyppiruuduilla — sama ensimmäinen kysymys kuin arvionäkymän virrassa, ks. .tiles alempana. */ .hf{display:flex;flex-direction:column;gap:6px;min-width:0} .hf label{font-size:var(--label);font-weight:650;color:var(--muted); text-transform:uppercase;letter-spacing:.08em} .btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--r); padding:14px 22px;font-weight:700;font-size:var(--step-0)} .btn:hover{filter:brightness(.92)} .btn-quiet{background:transparent;color:var(--ink);border:1px solid var(--hair-strong)} .btn-quiet:hover{background:var(--surface-2);filter:none} /* matta metallinappi: lähes tasainen kansi, metallisuus reunoissa (viistevalo ylä/vasen, viistevarjo ala/oikea) + kuluminen */ .btn:not(.btn-quiet){ color:var(--bz-ink); border:1px solid var(--bz-edge); background-image:var(--bz-spec), var(--bz-tex), var(--bz-side), var(--bz-curve); background-size:auto, 280px 210px, auto, auto; } .btn:not(.btn-quiet){ text-shadow:0 1px 2px var(--bz-etch); border-radius:7px; padding:13px 21px; box-shadow: inset 0 2px 2px -1px rgba(255,255,255,.32), inset 2px 0 2px -1px rgba(255,255,255,.14), inset 0 -2px 2px -1px rgba(0,0,0,.5), inset -2px 0 2px -1px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2); } .btn:not(.btn-quiet):hover{filter:brightness(.94)} .tag.hot{ color:var(--bz-ink); text-shadow:0 1px 1px var(--bz-etch); border:1px solid var(--bz-edge); border-radius:4px; padding:2px 8px; background-image:var(--bz-tex), var(--bz-curve); background-size:280px 210px, auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.25); } /* Logo on YHTÄ VÄRIÄ (Petri 8.8.2026): metallipinnan liukuväri luettiin tekstuurina, ja pienessä koossa se vain sumensi nimen. Sääntö tulee .logo b:stä (--accent) — tämä lohko poisti sen aiemmin background-clip:textillä. */ .hero-fine{margin-top:18px;font-size:var(--step--1);color:var(--muted);max-width:var(--hero-mitta)} /* mock-tuloskortti: näyttää lopputuotteen ennen kuin mitään on annettu */ .peek{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r)} .peek-head{display:flex;justify-content:space-between;align-items:center; padding:12px 16px;border-bottom:1px solid var(--hair);font-size:var(--step--1); color:var(--muted)} .peek-body{padding:18px 16px} .metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair);border-radius:var(--r);overflow:hidden} .metric{background:var(--surface);padding:11px 13px} .metric dt{font-size:var(--label);color:var(--muted);text-transform:uppercase; letter-spacing:.08em;font-weight:650;margin-bottom:3px} .metric dd{margin:0;font-size:var(--step-1);font-weight:750; font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* vertailutaulukko: paras 10 % vs keskiverto */ .compare{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .compare th,.compare td{padding:15px 16px;text-align:right;border-bottom:1px solid var(--hair)} .compare th:first-child,.compare td:first-child{text-align:left} .compare thead th{font-size:var(--step--1);color:var(--muted);font-weight:650; text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--hair-strong)} .compare tbody td{font-size:var(--step-1);font-weight:700;letter-spacing:-.02em} .compare tbody td:first-child{font-size:var(--step-0);font-weight:500;color:var(--ink)} .compare .lead{color:var(--accent-2)} .compare .delta{font-family:var(--mono);font-size:var(--step--1);color:var(--muted);font-weight:500} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair);border-radius:var(--r);overflow:hidden} .step{background:var(--surface);padding:26px 22px} .step .n{font-family:var(--mono);font-size:var(--step--1);color:var(--accent); font-weight:600;margin-bottom:12px;display:block} .step h3{margin-bottom:7px} .step p{color:var(--muted);font-size:var(--step--1);line-height:1.6} /* NELJÄ LUPAUSTA, NELJÄ TODISTETTA. Aiemmin nämä olivat paksu yläviiva ja tekstiä sen alla. Viiva ei rajannut mitään eikä päättynyt mihinkään, joten lohko näytti keskeneräiseltä — kuin taulukolta, josta puuttuu taulukko. Mutta oikea vika oli sisällössä: kategoriassa, jossa jokainen kilpailija lupaa saman (ks. 11c-8, 11c-9), pelkkä lupaus ei erota mistään. Siksi jokaisella kortilla on nyt pohjarivi, joka kertoo MITEN lupauksen voi tarkistaa. Todiste tekee designin ja erottautumisen samalla kertaa. */ /* LUPAUS VASEMMALLA, TODISTE OIKEALLA — JA SIKSI YKSI SARAKE. Kahden kortin rivillä kortti on ~490 px; jos sen jakaa vielä kahtia, todistelaatikkoon jää ~160 px luettavaa leveyttä ja lause taittuu kahdeksalle riville. Neljä täysleveää riviä antaa molemmille puolille kunnon mitan, ja samalla lohko lukeutuu siksi mitä se on: taulukoksi, jossa vasemmalla on väite ja oikealla sen tarkistustapa. */ /* Tekstikolmikko: osion levyinen ruudukko luettavalle tekstille. Ei korttikehyksiä — kehys lupaa klikattavaa, tämä on luettavaa. */ .kolmikko{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:8px} .kolmikko h3{font-size:var(--step-0);margin-bottom:8px} .kolmikko p{color:var(--muted);margin:0} @media (max-width:820px){.kolmikko{grid-template-columns:1fr;gap:24px}} .pledges{display:grid;grid-template-columns:1fr;gap:12px} .pledge{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r); display:grid;grid-template-columns:1.45fr 1fr;overflow:hidden} .pledge-teksti{padding:22px 26px} .pledge h3{margin-bottom:9px} .pledge p{color:var(--muted);margin:0} /* Todiste on DATAA, ei julistus. Aiemmin palkki oli täytetty vaalealla tehostevärillä ja teksti oli samaa väriä — lopputulos oli makea, ja makeus on väärä sävy asialle, jonka koko pointti on tarkistettavuus. Nyt neutraali pohja, teksti luettavaa mustaa ja tehosteväri vain nimikkeessä: yksi sana kantaa merkinnän, ei koko palkki. */ .pledge .todiste{border-left:1px solid var(--hair);background:var(--surface-2); padding:22px 26px;font-size:var(--step--1);color:var(--ink);margin:0} .pledge .todiste b{display:block;margin-bottom:6px;font-size:var(--label); font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2)} /* Kapealla ruudulla vierekkäisyys ei mahdu: todiste palaa alle, ja reunaviiva kääntyy pystystä vaakaan säilyttäen saman rajan. */ @media (max-width:760px){ .pledge{grid-template-columns:1fr} .pledge .todiste{border-left:0;border-top:1px solid var(--hair);padding:16px 26px} } /* ── grafiikka: viivapiirrokset ────────────────────────── */ /* ── maisema: kaupunki + liike heron taustalla ───────────────── Kaupunki oli ennen kapea kaistale heron ALLA; nyt se on heron oma taustakerros ja saa olla isompi. Kerros ei ota klikkauksia vastaan eikä sisällä tekstiä — sisältö elää sen päällä omassa pinossaan. */ /* Wrap on 1080 px leveä ja keskitetty; maisema saa silti ulottua reunojen yli, koska kaupunki on horisontti eikä palsta. */ .hero-osio{position:relative} /* LASKURI AUKEAA SIIHEN, MISSÄ KYSYMYS ESITETTIIN (Petri 6.8.2026). Hero PYSYY kaksipalstaisena — vain sisältö vaihtuu paikallaan: vasemmalla kohdetyyppiruudukko → kysymysvirta, oikealla esimerkkikortti → oikea arviokortti. Kysymys ei jää roikkumaan vastauksensa yläpuolelle, eikä katse joudu etsimään arviota uudesta paikasta. Alapadding kasvaa auki-tilassa, koska kaupunki on heron alalaidassa eikä sisältö saa mennä talojen päälle. */ /* SISÄLTÖ ON AINA TAUSTAKERROSTEN EDESSÄ. Hero-gridille annettu z-index ei riitä, koska sen LAPSET luovat omat pinonsa vasta kun niillä on position — siksi jokainen sisältölohko nostetaan erikseen. Linnut, pilvet ja kone jäävät taakse (z-index 0). */ .hero>div{position:relative;z-index:1} .laskuri-auki .hero-valinta{display:none} .laskuri-auki .hero .peek{display:none} /* LAATIKOT ON YHDISTETTY (Petri 7.8.2026): kun laskuri on auki, rinnakkaista tuloskorttia ei ole — hero kapenee yhteen palstaan ja kortti saa koko huomion. Arvio on kortin viimeinen vaihe. */ /* Kaupunkisiluetti on heron alalaidassa, joten auki-tilassa tarvitaan pohjatilaa: ilman sitä pitkä kysymyslista valuu talojen päälle (Petri 8.8.2026 — sama 120 px kuin poistuneessa #arvio-jatko-lohkossa). */ .laskuri-auki .hero{padding-bottom:150px;grid-template-columns:1fr} .laskuri-auki .hero > div:nth-child(2){display:none} /* Laskuri on yhtä leveä kuin sivun tekstisisältö (Petri 7.8.2026) — kapeampi keskitetty palsta näytti irralliselta laatikolta. */ /* ARVIOKORTTI PYSYY SAMASSA KOHDASSA kuin esimerkkikortti: hero ei saa vaihtaa align-itemsiä auki-tilassa, muuten oikea palsta nousee ylös kun vasen lyhenee. */ .laskuri-palsta{position:relative;z-index:1} .laskuri-palsta .sidepanel{position:static} /* Jatkolohko (vertailuosio + alaviite) tulee heron ALLE omana lohkonaan. Alapadding pitää alaviitteen irti kaupungin katoista — teksti ei saa mennä talojen päälle, muttei myöskään jättää tyhjää kaistaa väliin. */ details.a-alaviite summary{cursor:pointer;width:max-content; color:var(--muted);font-size:var(--step--1);font-weight:650; text-decoration:underline;text-underline-offset:3px} details.a-alaviite summary:hover{color:var(--ink)} details.a-alaviite p{margin-top:10px;color:var(--muted); font-size:var(--step--1);max-width:90ch} .hero-osio .hero{position:relative;z-index:1} /* Kerros kattaa koko heron: kaupunki asettuu sen alalaitaan ja linnut saavat taivaan yläosasta. Aiemmin kerros oli vain alaneljännes, jolloin linnut lensivät tekstin takaa eivätkä sen yllä. */ /* KOKO RUUDUN LEVYINEN, ei tekstipalstan. Wrap on 1080 px, joten kerroksen sisällä olevat linnut ilmestyivät ja katosivat kesken ruudun — taivas ei lopu sisältöpalstan reunaan. */ .maisema{position:absolute;top:0;bottom:0;left:50%;width:100vw; transform:translateX(-50%);pointer-events:none;z-index:0; color:var(--faint); /* EI LEIKKAUSTA EIKÄ MASKIA. Kokeiltiin molemmat: overflow:hidden tekee kerroksen reunasta näkymättömän seinän, ja häivytysmaski vain siirtää sauman — iso pilvi on leveämpi kuin häivytysalue, joten sen takaosa oli jo täysin näkyvä kun etuosa oli ohittanut häivytyksen. Oikea ratkaisu on, ettei kerroksella ole reunaa: objektit tulevat RUUDUN ulkopuolelta (rata alkaa -35vw) ja poistuvat sen yli, ja vaakavieritykseltä suojaa .view:n overflow-x:clip. Silloin mitään saumaa ei ole. */ overflow:visible} /* Kaupunki on OMA kerroksensa maiseman ulkopuolella: vanhemman maski koskee kaikkia lapsia, ja horisontin ei kuulu haalistua reunoilta. Sama sijainti ja leveys kuin maisemalla. */ .kaupunkikerros{position:absolute;bottom:0;left:50%;width:100vw; height:128px;transform:translateX(-50%);pointer-events:none;z-index:0; color:var(--hair-strong);opacity:.85; display:flex;align-items:flex-end;justify-content:center; overflow:hidden} .skyline-pala{flex:none;width:1440px;height:128px; fill:none;stroke:currentColor;stroke-width:2} /* Taivaan asukkaat: MUUTAMA ISO, ei parvea pieniä. KOLME ASIAA, JOTKA TEKEVÄT LIIKKEESTÄ AIDON: 1. Kaikki eivät kulje samaan suuntaan. Pilvet ajelehtivat tuulessa yhdessä, mutta linnuista toinen lentää oikealle ja toinen vasemmalle (scaleX(-1) kääreessä, jotta rata ja kuvan suunta ovat eri asioita). 2. Räpytyksessä on liitovaihe. Lintu vetää muutaman lyönnin ja liukuu sitten siivet levällään — tasainen räpytys näyttää koneelta. 3. Perhonen pysähtyy. Rata seisoo kahdessa kohdassa, ja siivet jäävät lekuttamaan paikalleen. KEVEYS: kahdeksan elementtiä, ja jokainen animoi vain transformia tai opacityä — ei layoutia, ei varjoja, ei suodattimia. Selain hoitaa nämä kompositointikerroksina myös vanhalla puhelimella. */ .lintu,.perhonen,.pilvi,.kone,.lepakko,.drone{position:absolute;display:block; color:var(--faint);will-change:transform} .lintu svg,.perhonen svg,.pilvi svg,.kone svg,.lepakko svg,.drone svg{display:block;width:100%; height:auto;overflow:visible} /* Kääre erottaa RADAN (ulompi) ja ASENNON (sisempi): peilaus ja kallistus eivät saa nollata paikkaa liikuttavaa animaatiota. */ .lentaja{display:block} /* Pilvet: isoja, haaleita, hitaita — kaikki samaan suuntaan. */ /* KORKEUDET NOUDATTAVAT LUONNON JÄRJESTYSTÄ. Kaikki olivat aluksi heron yläreunassa, mikä teki niistä koristelistan. Nyt pystysuunta kertoo mistä on kyse: pilvet ja kone ylhäällä, linnut niiden alapuolella ja perhonen kaikkein matalimmalla lähes kattojen tasalla — hyönteinen ei lennä pilvien korkeudella. Sivutuote: taivaaseen syntyy syvyyttä, kun kaukana ylhäällä on eri asia kuin lähellä horisonttia. */ .pilvi{color:var(--hair-strong)} .pilvi.pi1{top:8%;width:300px;opacity:.3;animation:ajelehdi 150s linear infinite} .pilvi.pi2{top:38%;width:210px;opacity:.2;animation:ajelehdi 200s linear infinite -60s} .pilvi.pi3{top:63%;width:340px;opacity:.14;animation:ajelehdi 240s linear infinite -140s} .pilvi.pi4{top:24%;width:170px;opacity:.24;animation:ajelehdi 175s linear infinite -95s} /* Lisää kokoja (Petri 8.8.2026): neljä samankokoista luki toistona. Kaukaisimmat ovat pieniä, himmeitä ja hitaita — etäisyys syntyy koosta ja nopeudesta, ei erillisestä perspektiivistä. */ .pilvi.pi5{top:52%;width:120px;opacity:.16;animation:ajelehdi 300s linear infinite -30s} .pilvi.pi6{top:15%;width:420px;opacity:.12;animation:ajelehdi 340s linear infinite -210s} .pilvi.pi7{top:71%;width:90px;opacity:.2;animation:ajelehdi 260s linear infinite -175s} .pilvi.pi8{top:31%;width:250px;opacity:.18;animation:ajelehdi 215s linear infinite -120s} .pilvi.pi9{top:6%;width:140px;opacity:.14;animation:ajelehdi 280s linear infinite -245s} /* Linnut: kaksi, isoja. */ .lintu.l1{top:46%;width:110px;opacity:.75;animation:lentoOikealle 34s ease-in-out infinite} .lintu.l2{top:58%;width:86px;opacity:.6;animation:lentoVasemmalle 44s ease-in-out infinite -12s} .lintu.l2 .lentaja{transform:scaleX(-1)} .lintu .siipi-v,.lintu .siipi-o{transform-box:fill-box;transform-origin:100% 100%} .lintu .siipi-o{transform-origin:0 100%} .lintu.l1 .siipi-v{animation:siipiV 2.6s ease-in-out infinite} .lintu.l1 .siipi-o{animation:siipiO 2.6s ease-in-out infinite} .lintu.l2 .siipi-v{animation:siipiV 3.1s ease-in-out infinite} .lintu.l2 .siipi-o{animation:siipiO 3.1s ease-in-out infinite} /* DRONE: käy harvoin kuvaamassa yhden talon. Koko sykli on 150 s, josta drone on näkyvissä noin 18 s — muun ajan se on ruudun ulkopuolella. "Harvoin" tarkoittaa juuri tätä: kävijä ehtii käyttää laskuria näkemättä sitä kertaakaan, ja kun se tulee, se huomataan. Sijainti (--drone-x) on talon keskikohta; JS arpoo sen kerran istunnossa. */ /* Drone on ESINE, ei osa maisemaa: skylinen sävyllä se sulautui taloihin. Tummempi sävy ja korkeus talon yläpuolella erottavat sen — ja jättävät tilaa kuvausvalolle. */ /* KUVAUSKORKEUS (Petri 8.8.2026): drone kuvaa kohdetta SIVULTA VIISTOSTA, joten se ei leiju talon päällä vaan sen kyljessä. Korkeus on talon yläkolmanneksessa ja etäisyys yli talon levyinen — suoraan yläpuolelta otettu kuva olisi kattokuva, ei julkisivukuva. */ .drone{bottom:104px;width:48px;color:var(--faint); left:var(--drone-x,50%);margin-left:-24px;z-index:1} .drone-liike{display:block;animation:dronenKaynti 150s linear infinite} /* KIERTORATA omana kerroksenaan: se saa pyöriä koko ajan, koska drone on ruudun ulkopuolella (opacity 0) muulloin kuin leijunnan aikana. Näin rataa ei tarvitse ajastaa 150 s:n syklin sisään prosenttiyksikön tarkkuudella. Kierto luetaan 2D:ssä koon ja himmennyksen kautta: talon takana drone on pienempi ja haaleampi, edessä suurempi. */ .drone-kierto{display:block;animation:dronenKiertorata 8s ease-in-out infinite} .drone .potkuri{transform-box:fill-box;transform-origin:50% 50%} /* Potkurit pyörivät niin nopeasti, että ne näkyvät kiekkona: litistys riittää vihjeeksi eikä vaadi pyörimisanimaatiota. */ .drone .pe1{animation:potkurinPyorinta .18s linear infinite} .drone .pe2{animation:potkurinPyorinta .21s linear infinite} .drone .pt1{animation:potkurinPyorinta .19s linear infinite} .drone .pt2{animation:potkurinPyorinta .22s linear infinite} .drone-led{animation:dronenLed 1.4s steps(1,end) infinite} /* Kuvausvalo: yksi välähdys kesken leijunnan. */ /* KUVAUSHETKI KAHDESSA KERROKSESSA. Portti päästää välähdyksen läpi vain käynnin aikana (150 s), ja välähdys itse on sidottu KIERTORATAAN (8 s) niin, että se osuu radan SIVUPISTEESEEN — silloin kohde näkyy viistosta. Yhdellä animaatiolla välähdys olisi osunut myös radan etu- ja takapisteeseen, jolloin kuva olisi otettu suoraan talon yläpuolelta (Petri 8.8.2026). */ .drone-keila-portti{position:absolute;inset:0;display:block;opacity:0; animation:dronenKaynnissa 150s linear infinite} .drone-keila{position:absolute;left:50%;top:74%;width:34px;height:52px; margin-left:-17px;transform-origin:50% 0;border-radius:50% 50% 45% 45%; background:radial-gradient(60% 70% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%); opacity:0; animation:dronenSalama 8s linear infinite, dronenKeilanSuunta 8s ease-in-out infinite} /* ── YÖTAIVAS (Petri 8.8.2026) ───────────────────────────────── Tummassa teemassa (html.yo, luokka JS:stä) linnut ja perhonen nukkuvat; tilalla tähdet, ikkunavalot, koneen yövalot ja välillä yläreunan poikki kulkeva satelliitti. Pilvet jäävät molempiin. */ .tahdet,.satelliitti,.lepakko{display:none} /* DRONE EI LENNÄ YÖLLÄ (Petri 17.8.2026): "emme ikinä kuvaa yöllä dronella". Maisema on kuvaajan oma työ piirrettynä, joten siinä ei saa näkyä työtä, jota ei tehdä — se olisi pieni valhe siinä kohdassa, jossa koko sivuston lupaus on ettei mitään keksitä. */ .yo .lintu,.yo .perhonen,.yo .drone{display:none} /* LEPAKOT lentävät vain yöllä. Silhuetti on taivasta tummempi, ei vaaleampi — lepakko ei heijasta valoa vaan peittää tähdet. */ .yo .lepakko{display:block;color:#0a0710} .lepakko.p1{top:22%;width:62px;opacity:.85; animation:lepakonRata1 26s linear infinite} .lepakko.p2{top:38%;width:44px;opacity:.7; animation:lepakonRata2 33s linear infinite -9s} .lepakko.p3{top:14%;width:34px;opacity:.55; animation:lepakonRata1 41s linear infinite -21s} .lepakko.p2 .lentaja{transform:scaleX(-1)} .lepakko .siipi-v,.lepakko .siipi-o{transform-box:fill-box; transform-origin:100% 50%} .lepakko .siipi-o{transform-origin:0 50%} /* Lepakon siivenlyönti on linnun lyöntiä nopeampi ja nykivämpi: steps() tekee siitä räpsyvän eikä liitävän. */ .lepakko.p1 .siipi-v{animation:lepakonSiipiV .34s steps(3,end) infinite} .lepakko.p1 .siipi-o{animation:lepakonSiipiO .34s steps(3,end) infinite} .lepakko.p2 .siipi-v{animation:lepakonSiipiV .29s steps(3,end) infinite} .lepakko.p2 .siipi-o{animation:lepakonSiipiO .29s steps(3,end) infinite} .lepakko.p3 .siipi-v{animation:lepakonSiipiV .24s steps(3,end) infinite} .lepakko.p3 .siipi-o{animation:lepakonSiipiO .24s steps(3,end) infinite} .yo .tahdet{display:block;position:absolute;inset:0;width:100%; height:100%;fill:#e9eef0} .tahdet .t1{animation:tuike 3.2s ease-in-out infinite} .tahdet .t2{animation:tuike 4.1s ease-in-out infinite -1.3s} .tahdet .t3{animation:tuike 5.3s ease-in-out infinite -2.6s} @keyframes tuike{0%,100%{opacity:.35}50%{opacity:1}} .yo .satelliitti{display:block;position:absolute;top:4%;width:44px; color:var(--faint);animation:satelliitinRata 90s linear infinite} .satelliitti svg{display:block;width:100%;height:auto} /* Rata: ruudun poikki loivasti laskeva; suurin osa syklistä on taukoa ruudun ulkopuolella — satelliitti kulkee "välillä". */ @keyframes satelliitinRata{ 0%{transform:translate3d(-6vw,0,0)} 30%{transform:translate3d(106vw,26px,0)} 100%{transform:translate3d(106vw,26px,0)}} .sat-valo{animation:satStrobo 2s steps(1) infinite} @keyframes satStrobo{0%,45%{opacity:1}50%,95%{opacity:.25}} /* Ikkunavalot: himmeä lämmin kajo kaikkiin, joka kolmas kirkkaampi. Use-kloonit EIVÄT matchaa dokumentin valitsimia (shadow-raja), joten väri kulkee CSS-MUUTTUJANA: symbolin rect-eillä on inline fill:var(--ikkuna-valo,none), ja muuttuja määritellään vain yötilassa — perityt custom propertyt läpäisevät shadow-rajan. */ .yo{--ikkuna-valo:rgba(245,201,107,.28); --ikkuna-kirkas:rgba(255,217,122,.85)} /* Koneen yövalot: punainen paikkavalo + valkoinen strobo. */ .kone-valo{display:none} .yo .kone-valo{display:block} .yo .kv-punainen{animation:tuike 1.6s ease-in-out infinite} .yo .kv-keila{animation:keilaHohde 5s ease-in-out infinite} @keyframes keilaHohde{0%,100%{opacity:.85}50%{opacity:1}} .yo .kv-strobo{animation:satStrobo 1.3s steps(1) infinite -.4s} @media (prefers-reduced-motion:reduce){ .tahdet .t1,.tahdet .t2,.tahdet .t3,.sat-valo, .yo .kv-punainen,.yo .kv-strobo{animation:none} /* Lepakko on nopein liike koko sivulla — se on ensimmäinen joka poistuu, ei hidasteta. */ .yo .satelliitti,.yo .lepakko,.drone{display:none} } /* Perhonen: iso, brändinvärinen, pysähtelevä. */ /* Läpinäkymätön: perhonen on talojen EDESSÄ, ei niiden seassa (Petri 8.8.2026). Siipien vaaleus tulee fill-opacitystä pohjan päällä, joten ilme säilyy entisenä. */ .perhonen{top:82%;width:64px;color:var(--accent); animation:pyrahtely 46s ease-in-out infinite 2s} .perhonen .p-v,.perhonen .p-o{transform-box:fill-box;transform-origin:100% 50%; animation:siipiPerhonen .36s ease-in-out infinite} .perhonen .p-o{transform-origin:0 50%} /* Lepovaiheessa siivet lekuttavat hitaammin — sama animaatio, eri kesto, vaihdettuna radan kanssa samassa rytmissä. */ .perhonen .lentaja{animation:perhosenKallistus 46s ease-in-out infinite 2s} /* Lentokone: korkein, hitain, pisin tauko. */ /* Kone lentää VASTASUUNTAAN pilviin nähden: kun kaikki kulkevat samaan suuntaan, taivas näyttää liukuhihnalta. Kuva peilataan kääreessä, jotta nokka osoittaa menosuuntaan. */ /* Kone kulkee reilusti kattorivin alapuolella: matalalla lentävä kone on myös isompi ja luettavampi kuin taivaanrannassa. */ .kone{top:30%;width:170px;opacity:.4;animation:lentoSuoraVasen 100s linear infinite 12s} .kone svg{transform:scaleX(-1)} /* ── radat ───────────────────────────────────────────────────── vw-yksiköt, koska maisema on koko ruudun levyinen. Aloitus ja lopetus reilusti reunojen ulkopuolella, jottei mikään ilmesty tyhjästä keskelle ruutua. */ /* Lepakon rata poukkoilee: jyrkkiä nousuja ja syöksyjä, ei linnun tasaista kaarta. Kulma kääntyy liikkeen mukana. */ /* Rata: tulo vasemmalta, leijunta talon yllä (kevyt kellunta), välähdys, lähtö oikealle. Ajat suhteessa 150 s:n sykliin. */ /* Tulo vasemmalta, noin kolme kierrosta talon ympäri, lähtö oikealle. Leijunta kestää 24 s (69–85 % 150 s:n syklistä) ja yksi kierros 7 s, joten kierroksia kertyy runsaat kolme. */ @keyframes dronenKaynti{ 0%, 64% {transform:translate3d(-62vw,10px,0); opacity:0} 65% {transform:translate3d(-62vw,10px,0); opacity:1} 69% {transform:translate3d(0,0,0); opacity:1} 85% {transform:translate3d(0,-2px,0); opacity:1} 89% {transform:translate3d(62vw,-10px,0); opacity:1} 90%, 100% {transform:translate3d(62vw,-10px,0); opacity:0} } /* Säde on yli talon levyinen (talot 69–144 px), jotta kohde näkyy kokonaan kuvakulmassa. Pystyliike nostaa dronen kauimmaisessa kohdassa ylemmäs, kuten kiertävä kuvauslento tekee. */ @keyframes dronenKiertorata{ 0% {transform:translate3d(0,14px,0) scale(1.08)} 25% {transform:translate3d(150px,-2px,0) scale(.98)} 50% {transform:translate3d(0,-16px,0) scale(.80); opacity:.5} 75% {transform:translate3d(-150px,-2px,0) scale(.98)} 100% {transform:translate3d(0,14px,0) scale(1.08)} } /* Kamerakeila osoittaa taloa kohti: oikealta katsottaessa vasemmalle ja päinvastoin. Ilman kääntöä keila valaisi tyhjää taivasta dronen alla. */ @keyframes dronenKeilanSuunta{ 0% {transform:rotate(0deg)} 25% {transform:rotate(-34deg)} 50% {transform:rotate(0deg)} 75% {transform:rotate(34deg)} 100% {transform:rotate(0deg)} } /* Portti: auki vain leijunnan ajan (69–85 % 150 s:n syklistä). Leijunta on 24 s ja kierros 8 s, joten kierroksia on tasan kolme ja kuvia otetaan muutama. */ @keyframes dronenKaynnissa{ 0%, 68.9% {opacity:0} 69%, 85% {opacity:1} 85.1%, 100% {opacity:0} } /* Välähdys radan sivupisteissä (25 % ja 75 %), joissa drone on kauimpana kohteesta ja kuvakulma on viisto. */ @keyframes dronenSalama{ 0%, 22% {opacity:0} 24% {opacity:1} 27% {opacity:0} 72% {opacity:0} 74% {opacity:1} 77% {opacity:0} 100% {opacity:0} } @keyframes potkurinPyorinta{ 0%{transform:scaleX(1)} 50%{transform:scaleX(.35)} 100%{transform:scaleX(1)} } @keyframes dronenLed{ 0%,60%{opacity:1} 61%,100%{opacity:.15} } @keyframes lepakonRata1{ 0%{transform:translate3d(-20vw,0,0) rotate(-8deg)} 12%{transform:translate3d(8vw,-46px,0) rotate(10deg)} 24%{transform:translate3d(26vw,22px,0) rotate(-12deg)} 38%{transform:translate3d(44vw,-30px,0) rotate(8deg)} 52%{transform:translate3d(58vw,36px,0) rotate(-6deg)} 68%{transform:translate3d(76vw,-18px,0) rotate(12deg)} 84%{transform:translate3d(94vw,28px,0) rotate(-9deg)} 100%{transform:translate3d(120vw,-8px,0) rotate(4deg)} } @keyframes lepakonRata2{ 0%{transform:translate3d(120vw,10px,0) rotate(9deg)} 15%{transform:translate3d(92vw,-38px,0) rotate(-11deg)} 32%{transform:translate3d(70vw,30px,0) rotate(7deg)} 48%{transform:translate3d(52vw,-24px,0) rotate(-8deg)} 64%{transform:translate3d(34vw,34px,0) rotate(10deg)} 82%{transform:translate3d(14vw,-16px,0) rotate(-6deg)} 100%{transform:translate3d(-20vw,12px,0) rotate(5deg)} } @keyframes lepakonSiipiV{ 0%{transform:rotate(-46deg)} 50%{transform:rotate(32deg)} 100%{transform:rotate(-46deg)} } @keyframes lepakonSiipiO{ 0%{transform:rotate(46deg)} 50%{transform:rotate(-32deg)} 100%{transform:rotate(46deg)} } @keyframes lentoOikealle{ 0%{transform:translate3d(-38vw,40px,0) rotate(4deg)} 30%{transform:translate3d(20vw,-30px,0) rotate(-3deg)} 55%{transform:translate3d(50vw,10px,0) rotate(2deg)} 80%{transform:translate3d(85vw,-24px,0) rotate(-2deg)} 100%{transform:translate3d(138vw,6px,0) rotate(0deg)} } @keyframes lentoVasemmalle{ 0%{transform:translate3d(138vw,10px,0) rotate(-3deg)} 35%{transform:translate3d(72vw,-34px,0) rotate(3deg)} 65%{transform:translate3d(38vw,18px,0) rotate(-2deg)} 100%{transform:translate3d(-38vw,-12px,0) rotate(2deg)} } @keyframes lentoSuoraVasen{ 0%{transform:translate3d(140vw,0,0)} 100%{transform:translate3d(-40vw,0,0)} } @keyframes ajelehdi{ 0%{transform:translate3d(-45vw,0,0)} 100%{transform:translate3d(145vw,0,0)} } /* Perhosen rata: pyrähdys — lepo — pyrähdys — lepo. Peräkkäiset samat arvot = pysähdys; ne ovat tässä ne kaksi kohtaa, joissa perhonen istuu reunalla ja lekuttaa. */ @keyframes pyrahtely{ 0%{transform:translate3d(-30vw,0,0)} 8%{transform:translate3d(8vw,-34px,0)} 14%{transform:translate3d(18vw,20px,0)} 20%{transform:translate3d(27vw,-10px,0)} 24%,34%{transform:translate3d(31vw,-4px,0)} /* lepo 1 */ 40%{transform:translate3d(44vw,-40px,0)} 46%{transform:translate3d(55vw,15px,0)} 52%{transform:translate3d(63vw,-30px,0)} 58%,70%{transform:translate3d(68vw,-18px,0)} /* lepo 2 */ 78%{transform:translate3d(84vw,-36px,0)} 86%{transform:translate3d(96vw,10px,0)} 100%{transform:translate3d(135vw,-20px,0)} } /* Kallistus seuraa rataa: nousussa nokka ylös, laskussa alas. */ @keyframes perhosenKallistus{ 0%,100%{transform:rotate(0deg)} 8%{transform:rotate(-14deg)} 14%{transform:rotate(10deg)} 24%,34%{transform:rotate(0deg)} 40%{transform:rotate(-16deg)} 46%{transform:rotate(12deg)} 58%,70%{transform:rotate(0deg)} 78%{transform:rotate(-12deg)} 86%{transform:rotate(8deg)} } /* Räpytys + liito: lyönnit ensimmäisellä puoliskolla, sitten siivet jäävät levälleen ja lintu liukuu. */ @keyframes siipiV{ 0%{transform:rotate(-30deg)} 9%{transform:rotate(26deg)} 18%{transform:rotate(-30deg)} 27%{transform:rotate(26deg)} 36%{transform:rotate(-30deg)} 45%{transform:rotate(18deg)} 55%,100%{transform:rotate(-6deg)} } @keyframes siipiO{ 0%{transform:rotate(30deg)} 9%{transform:rotate(-26deg)} 18%{transform:rotate(30deg)} 27%{transform:rotate(-26deg)} 36%{transform:rotate(30deg)} 45%{transform:rotate(-18deg)} 55%,100%{transform:rotate(6deg)} } @keyframes siipiPerhonen{ 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(.22)} } @media (prefers-reduced-motion:reduce){ .lintu,.perhonen,.pilvi,.kone,.perhonen .lentaja, .lintu .siipi-v,.lintu .siipi-o,.perhonen .p-v,.perhonen .p-o{ animation:none !important} .lintu.l1{transform:translate3d(24vw,0,0)} .lintu.l2{transform:translate3d(66vw,0,0)} .perhonen{transform:translate3d(44vw,-20px,0)} .pilvi.pi1{transform:translate3d(10vw,0,0)} .pilvi.pi2{transform:translate3d(48vw,0,0)} .pilvi.pi3{transform:translate3d(74vw,0,0)} .pilvi.pi4{transform:translate3d(30vw,0,0)} .kone{transform:translate3d(56vw,0,0)} } .no-motion .lintu,.no-motion .perhonen,.no-motion .pilvi,.no-motion .kone, .no-motion .perhonen .lentaja, .no-motion .lintu .siipi-v,.no-motion .lintu .siipi-o, .no-motion .perhonen .p-v,.no-motion .perhonen .p-o{animation:none !important} .stepic{width:30px;height:30px;stroke:var(--accent);fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round; display:block;margin-bottom:12px} .trend{border:1px solid var(--hair);border-radius:var(--r); background:var(--surface);padding:14px 16px;margin-bottom:22px} .trend .cap{display:flex;justify-content:space-between;gap:12px; font-size:var(--step--1);color:var(--muted);flex-wrap:wrap;margin-bottom:10px} .trend svg{display:block;width:100%;height:120px} /* ── lomakekentät ────────────────────────────────────────── Vertailun oma wizard (.wizard/.wstep/.rail/.pick…) poistettiin 6.8.2026: sivustolla on yksi lomake, joka mukautuu tehtävään. Sen tyylit asuvat kysymyskortissa (.q). Tänne jäivät vain yleiset kenttätyylit, joita muutkin sivut käyttävät. */ @keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} label{display:block;font-weight:650;font-size:var(--step--1);margin:18px 0 6px} /* KAIKKI TEKSTIKENTÄT, MYÖS NE ILMAN type-ATTRIBUUTTIA. Vanha valitsin oli input[type=text] eikä osunut paljaaseen -elementtiin, joten kirjautumissivun kentät oli tyylitelty käsin inline — ja päätyivät omaan täytteeseensä. Selektori, joka ei osu, tuottaa aina kopion. */ input[type=text],input[type=tel],input[type=email],input[type=number], input:not([type]),select,textarea{width:100%;padding:12px 13px; border:1px solid var(--hair-strong);border-radius:var(--r);background:var(--surface); color:var(--ink);font-size:var(--step-0);font-family:inherit} input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:1px} .otp{letter-spacing:.5em;font-family:var(--mono);font-size:var(--step-2);text-align:center} /* latausanimaatio kriteerilistalla */ .scanlist{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:11px} .scanlist li{display:flex;align-items:center;gap:11px;font-size:var(--step--1); color:var(--faint);opacity:.35} .scanlist li.done{opacity:1;color:var(--ink)} .tick{width:16px;height:16px;border:1px solid var(--hair-strong);border-radius:50%;flex:none; display:grid;place-items:center;font-size:9px;color:transparent} .scanlist li.done .tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} /* ── kortti (Oma alue käyttää; vertailusivujen erikoissäännöt poistuivat välittäjäpinnan mukana 8.8.2026) ─────────────── */ .card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r); padding:18px 20px;margin-bottom:14px} /* ── footer ──────────────────────────────────────────────── Kuluttajapalvelun alatunniste ei ole linkkilista vaan se paikka, josta epäluuloinen myyjä tarkistaa KUKA tätä pyörittää, MISTÄ luvut tulevat ja MITÄ hänelle tapahtuu. Siksi täällä ovat yritystiedot, datalähteet ja riitatie — ei pelkkiä navigointilinkkejä. */ /* Alaosa on oma TUMMANVIHREÄ lohkonsa molemmissa teemoissa: sivu loppuu selvästi eikä vain haalene. Sävy on eukalyptuksen tummin aste, ei sattumanvarainen — footer on juuri se kerros, jossa kerrotaan kuka palvelua pyörittää ja mistä luvut tulevat, eli sama todiste-merkitys, jonka toinen tehosteväri kantaa muualla sivustolla. Footerin sisäinen paletti on omissa tokeneissaan, koska sivun --ink ja --muted on mitoitettu vaaleaa pohjaa vasten eivätkä toimisi täällä. Sävy on SAMA molemmissa teemoissa tarkoituksella: alaosalla on yksi tunnistettava identiteetti, ei kahta. Tummassa teemassa hiukan sivua vaaleampi vihreä erottuu paremmin kuin vielä tummempi olisi. */ /* SAMA SÄVYKAARI KUIN PAINIKKEESSA — MUTTA EI KOHINATIILTÄ. Tasainen väri suurella pinnalla näyttää painetulta laatalta, joten alatunniste saa painikkeen pystyliu'un syvempänä ja saman valojuovan yläreunaan. SÄVY ON MAGENTA, EI BURGUNDI. Ensimmäinen versio oli 320 asteen kohdalla ja kylläisyydeltään ~0,52; tumma ja epäkylläinen 320 luetaan viininpunaiseksi riippumatta siitä, mitä muuttujan nimessä lukee. Nykyiset pysähdykset ovat 310-313 asteessa ja kylläisyydeltään ~0,75 — sama tummuus, eri luenta. Tummissa sävyissä KYLLÄISYYS ratkaisee sen, kumpaan suuntaan silmä sävyn tulkitsee. Painikkeen kuluma-tekstuuri (--bz-tex) kokeiltiin ja poistettiin: se on 280 x 210 pikselin tiili, ja napin kokoisella pinnalla se luetaan materiaaliksi, mutta koko sivun levyisellä sen toisto näkyy ruudukkona. Sama tekstuuri, eri mittakaava, päinvastainen vaikutus — kuluminen vaatii pinnan, joka ei ole tiiltä isompi. */ /* VALAISTUS (Petri 8.8.2026): footer on nyt samasta sävykartasta kuin napit, ja se saa myös saman valokielen — pehmeä valo ylhäältä keskeltä ja hienoinen lämmin heijaste vasemmalta. Kolme kerrosta: valokeila, sivuheijaste ja pohjan tummuma (--foot-curve). Valo on niin himmeä, ettei se nosta tekstin taustaa: kontrasti mitattiin ennen ja jälkeen. */ .foot{position:relative;background-color:var(--foot-bg);color:var(--foot-muted); background-image: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 72%), radial-gradient(70% 55% at 8% 12%, rgba(255,214,238,.05) 0%, rgba(255,214,238,0) 68%), var(--foot-curve); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); /* EI MARGINAALIA ALATUNNISTEEN YLLE (Petri 17.8.2026). Mockupissa 56 px:n väli oli hengitystilaa, mutta siinä näkyy sivun oma tausta: viimeinen osio on sävytetty, joten väliin jäi vaalea kaistale — ja tummassa teemassa musta palkki. Alatunnisteen oma 52 px:n yläpadding antaa saman tilan ilman saumaa. */ padding:52px 0 0;font-size:var(--step--1)} /* NELJÄ TASALEVYISTÄ PALSTAA (Petri 17.8.2026). Brändipalsta oli puolitoistakertainen ja loput kolme puristuivat oikeaan laitaan, jolloin pisimmät linkit rivittyivät kahdelle riville ja sarakkeiden välit näyttivät eri levyisiltä. Tasajako seuraa sivun omaa ruudukkoa: yhtä leveät palstat, sama väli joka kohdassa. */ .foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px 26px} @media(max-width:1024px){.foot-cols{grid-template-columns:1fr 1fr 1fr}} .foot h4{font-size:var(--label);text-transform:uppercase;letter-spacing:.1em; font-weight:650;color:var(--foot-faint);margin-bottom:12px} .foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} /* YKSI tekstinvaaleus koko footerissa = foot-muted (Petri 6.8.2026: linkkien tummempi sävy oli oikea — vasen palsta oli se, joka erottui liian valkoisena). Vain brändinimi ja hover nousevat inkiin. */ .foot a{color:var(--foot-muted);text-decoration:none;border-bottom:1px solid transparent} .foot a:hover{color:var(--foot-ink);border-bottom-color:var(--foot-faint)} /* Brändinimikin samassa sävyssä (Petri 6.8.2026): lihavointi erottaa sen jo, väri ei saa. */ /* Alatunnisteen tunnus: sama kirjoitusasu kuin yläpalkissa, mutta omalla rivillään ja alatunnisteen sävyissä. */ .foot .logo{display:inline-flex;align-items:baseline;gap:1px; font-size:var(--step-1);font-weight:800;letter-spacing:-.035em; color:var(--foot-ink);margin-bottom:12px} .foot .logo b{color:var(--accent);font-weight:800} .foot .logo i{font-style:normal;color:var(--foot-faint);font-weight:600} .foot .lede{color:var(--foot-muted);max-width:34ch;line-height:1.55;margin:0} /* Maksuttomuus toistetaan täällä, koska se on se lause, jonka myyjä käy varmistamassa ennen kuin jättää numeronsa. TÄYTTÖ ON LÄPINÄKYVÄ VALKOINEN, EI OMA VÄRI. Tämä laatikko oli väriremontin viimeinen eukalyptusjäänne: rgba(140,196,172,.13) vihreällä tekstillä magentanmustan päällä. Se ei löytynyt sävyhaulla, koska se oli kirjoitettu rgba-muodossa eikä heksana. Läpinäkyvä valkoinen perii alla olevan sävyn automaattisesti, joten laatikko pysyy alatunnisteen värissä vaikka sävy vaihtuisi taas. Läpinäkymätön täyttö on aina lupaus siitä, ettei tausta koskaan muutu. */ /* Laatikko levittäytyy tekstipalstan yli, mutta sen SISÄTEKSTI jää samaan riviin yläpuolisen kappaleen kanssa: negatiivinen marginaali on tarkalleen täyte + reunus (14 + 1 px). Näin korostus erottuu taustasta ilman että palstaan tulee toinen vasen reuna — sisennetty laatikko olisi näyttänyt lainaukselta, ja tämä on lupaus. */ /* SAMA LADONTA KUIN YLÄPUOLISELLA KAPPALEELLA (Petri 17.8.2026). Ensin lokero lähti, sitten paino: kaksi peräkkäistä kappaletta samassa sarakkeessa eivät saa olla eri tuotetta. Rakenne on nyt sama molemmissa — kärki lihavalla, loppu leipätekstinä — joten ne lukevat kuin yksi ajatus kahdessa lauseessa. Lihavoitu kärki ei saa omaa väriä: sama sääntö kuin brändinimellä yläpuolella (Petri 6.8.2026), lihavointi erottaa sen jo. */ .foot .free{color:var(--foot-muted);max-width:34ch;line-height:1.55; margin:12px 0 0} /* TIETOLÄHTEET ON SARAKE, EI OMA LOHKO (Petri 6.8.2026). Ensin ne olivat erillinen kaista isoilla harvennetuilla mono-riveillä — Asuntomaatin typografia meidän footerissamme, eli kaksi eri sivustoa samassa ruudussa. Nyt ne ovat viides linkkisarake muiden rinnalla: sama h4, sama listatyyli, sama linkkiväri. Ne OVAT linkkejä (voit tarkistaa luvut itse), joten ne kuuluvat sinne missä muutkin linkit ovat. Alla yksi rivi kertoo mitä data on. */ /* Sarake on pelkkä linkkilista kuten muutkin: selittävä pikkurivi rikkoi rytmin (Petri 6.8.2026). Mitä data on, sanotaan siellä missä luku näytetään. */ /* ALARIVI KESKELLE JA VÄLJÄSTI (Petri 17.8.2026). Se oli kiinni sarakkeissa ja valui vasempaan laitaan kahtena eri mittaisena palana. Nyt sen erottaa oma hiusviiva, tekstit ovat keskitetyt ja ilma riittää molemmin puolin — rivi on sivun päätös, ei viides sarake. */ .foot-legal{margin-top:46px;padding:26px 0 96px; border-top:1px solid var(--foot-hair); display:flex;gap:8px 28px;flex-wrap:wrap; align-items:center;justify-content:center;text-align:center; color:var(--foot-faint)} .foot .mockbadge{border-color:var(--foot-faint);color:var(--foot-muted)} .foot .mono{color:var(--foot-muted)} @media (max-width:880px){ .foot-cols{grid-template-columns:1fr 1fr} .foot .lede{max-width:none} } .mockbadge{display:inline-block;font-family:var(--mono);font-size:.6875rem; border:1px solid var(--hair-strong);border-radius:2px;padding:2px 6px;color:var(--muted)} /* hinta-arvio */ .a-big{font-size:var(--step-4);font-weight:800;letter-spacing:-.045em; line-height:1;font-variant-numeric:tabular-nums} /* Arviosivu käyttää SAMAA 1080 px:n konttia kuin muut näkymät. Luettavuus rajataan sisällöstä (mitta ch:na, kortit gridiin) eikä kaventamalla koko sivua — muuten sivujen reunat hyppäävät, kun näkymää vaihtaa. */ .a-view{padding:56px 0 64px} .a-hinta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px; align-items:center;margin-bottom:22px} @media (max-width:760px){.a-hinta{grid-template-columns:1fr;gap:16px}} .a-view>p{max-width:60ch} /* Käyrä ja sen selitys rinnakkain. Käyrä venytettynä koko 1080 px:iin litistyisi niin, että sama nousu näyttäisi loivemmalta kuin se on. */ .a-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px;align-items:start;margin-bottom:26px} .a-row .trend{margin:0} /* VAPAAEHTOINEN YHTEYSTIETO. Arvio on jo yllä näkyvissä, joten tämä ei ole portti vaan tarjous — ja se on sanottava ääneen, koska juuri tästä erosta moitimme kilpailijoita (11c-10). Sähköposti korvaa samalla erillisen "Etkö vielä myy?" -laatikon: kaksi sähköpostikenttää samalla sivulla olisi kysynyt samaa asiaa kahdesti eri verukkeella. */ .a-posti{border:1px solid var(--hair);border-radius:var(--r);padding:18px 20px; background:var(--surface-2);display:flex;flex-direction:column} .a-posti h3{margin-bottom:6px} .a-posti p{font-size:var(--step--1);color:var(--muted);margin:0 0 14px;flex:1} .a-posti form{display:flex;gap:8px;flex-wrap:wrap} .a-posti input{flex:1 1 150px;min-width:0} .a-posti .btn{margin:0} /* Alaviite kuuluu koko sivun levyiseksi: kapeassa palstassa se taittui kuudelle riville ja näytti unohtuneelta. */ .a-view>p.a-alaviite{color:var(--faint);font-size:var(--step--1);margin-top:26px; padding-top:16px;border-top:1px solid var(--hair);max-width:90ch} /* ── laskurin kysymysvirta (uusittu 5.8.2026, malli 11c-21) ───────── VALJAMAKLARE.SE:N OPETUS OMANA MUOTONA. Heillä 7 pakollista vaihetta ja arvio 4/7:ssä; meillä arvio ilmestyy heti kolmella perustiedolla ja LOPUT KYSYMYKSET OVAT VAPAAEHTOISIA TARKENNUKSIA, joista jokainen siirtää lukua ja varmuutta NÄKYVÄSTI. Heidän oma tuotteensa todisti miksi: rakennusvuosi siirsi arviota +32 % — kenttä, jota ei kysytä, on virhe joka jää lukuun. RUUDUT EIVÄT ALASVETOVALIKOT. Sama malli kuin ReAllin tilauslomakkeessa (rc-options): iso klikattava ruutu jossa kuva ja sana. Alasvetovalikko piilottaa vaihtoehdot kunnes sitä klikkaa; ruudukko näyttää ne heti, ja kuusi ruutua luetaan nopeammin kuin kuusi riviä valikkoa. */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tiles.t2{grid-template-columns:repeat(2,1fr)} @media (max-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}} .tile{font:inherit;cursor:pointer;background:var(--surface); border:1px solid var(--hair-strong);border-radius:var(--r); padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center; gap:8px;color:var(--ink);text-align:center} .tile svg{width:44px;height:34px;stroke:var(--muted);fill:none;stroke-width:2} .tile:hover{border-color:var(--ink)} .tile[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;font-weight:650} .tile[aria-pressed="true"] svg{stroke:var(--accent)} .tile .t-nimi{font-size:var(--step--1);line-height:1.3} .tile .t-lisa{font-size:var(--label);color:var(--faint);margin-top:-4px} /* Kaksi palstaa: vasemmalla kysymykset, oikealla arvio joka elää. Sivupalkki on sticky, koska koko sivun idea on että jokainen vastaus näkyy heti luvussa — jos luku vierii pois näkyvistä, kytkentä katoaa. */ .a-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:26px;align-items:start} .a-vasen>#a-jatko{margin-top:18px} @media (max-width:820px){.a-grid{grid-template-columns:1fr} .a-oikea{order:-1}.sidepanel{position:static}} .sidepanel{position:sticky;top:16px;background:var(--surface); border:1px solid var(--hair);border-radius:var(--r);padding:22px 24px} .sidepanel .sp-otsikko{font-size:var(--label);text-transform:uppercase; letter-spacing:.1em;color:var(--faint);margin:0 0 6px} .sidepanel .a-big{margin:0 0 4px} .sp-vali{color:var(--muted);font-size:var(--step--1);margin:0 0 16px} .sp-tyhja{color:var(--muted);font-size:var(--step--1);margin:6px 0 16px} /* Varmuus: palkki + luku. EI todennäköisyys — selite on palkin alla, ei tooltipissa jota kukaan ei avaa. */ .sp-vaurio{font-size:var(--label);color:var(--muted);margin:10px 0 0; line-height:1.55;max-width:62ch} .sp-varmuus{border-top:1px solid var(--hair);padding-top:14px;margin-bottom:14px} .sp-varmuus .cap{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--step--1);color:var(--muted)} .sp-varmuus .cap b{font-size:var(--step-1);color:var(--ink); font-variant-numeric:tabular-nums} .sp-palkki{height:6px;border-radius:3px;background:var(--surface-2); margin:7px 0 8px;overflow:hidden} .sp-palkki i{display:block;height:100%;background:var(--accent); transition:width .5s cubic-bezier(.22,.61,.36,1)} .sp-varmuus .selite{font-size:var(--label);color:var(--faint);margin:0;line-height:1.55} /* Luvun muutos välähtää: kytkentä vastauksen ja luvun välillä on koko sivun idea, ja väri sanoo sen nopeammin kuin yksikään teksti. */ .sp-flash{animation:spflash .8s ease} @keyframes spflash{0%{color:var(--accent)}100%{color:inherit}} .q .q-ohita{font:inherit;font-size:var(--step--1);background:none;border:0; color:var(--muted);cursor:pointer;text-decoration:underline;padding:6px 2px} .q .q-ohita:hover{color:var(--ink)} .q input{max-width:220px} /* ── jatkopolut (Petri 8.8.2026) ────────────────────────────── Kolme kysymyskorttia tasalevyisinä (1/3 + 1/3 + 1/3). Valinta laajentaa kortin koko leveyteen ja tuo lomakkeen sen alle; muut kortit animoituvat piiloon. Paluu: klikkaa avointa korttia uudelleen tai Takaisin-riviä. */ .jatkopolut{margin-top:44px} .polku-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; margin-top:14px} /* Keskitetty kortti; PÄÄPOLKU (Haluan kilpailuttaa välittäjät) on ainoana napin näköinen — sama matta metallipinta kuin .btn-napeilla. Muut kaksi ovat kevyitä kortteja, jottei kolme täytettyä jättinappia kilpaile keskenään (Petri 8.8.2026). */ .polku-kortti{font:inherit;text-align:center;cursor:pointer; background:var(--surface);border:1px solid var(--hair-strong); border-radius:var(--r);padding:26px 22px;color:var(--ink); display:flex;flex-direction:column;align-items:center;gap:12px; text-decoration:none} .polku-kortti:hover{border-color:var(--ink)} .polku-kortti[aria-pressed="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)} .polku-kortti .stepic{margin:0} /* SAMA MUOTTI KUIN MUILLA KORTEILLA (Petri 21.8.2026: "laatikot ovat erimallisia — väri saa erota"). Pääkortti erosi kolmella tavalla, jotka kaikki muuttivat MUOTOA eivätkä väriä: kulmat 10px vs 12px, ja ulkonevat drop-varjot jotka tekivät siitä koholla olevan napin muiden litteiden korttien rinnalla. Nyt geometria tulee .polku-kortista ja tämä lisää vain pinnan: metallitekstuuri, reunaväri ja tekstivarjo. Inset-varjot saavat jäädä — ne elävät kortin sisällä eivätkä muuta ääriviivaa. */ .polku-cta{color:var(--bz-ink); border-color:var(--bz-edge); background:none; background-image:var(--bz-spec), var(--bz-tex), var(--bz-side), var(--bz-curve); background-size:auto, 280px 210px, auto, auto; text-shadow:0 1px 2px var(--bz-etch); box-shadow: inset 0 2px 2px -1px rgba(255,255,255,.32), inset 2px 0 2px -1px rgba(255,255,255,.14), inset 0 -2px 2px -1px rgba(0,0,0,.5), inset -2px 0 2px -1px rgba(0,0,0,.28)} .polku-cta:hover{border-color:var(--bz-edge);filter:brightness(.94)} .polku-cta[aria-pressed="true"]{border-color:var(--bz-edge); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);filter:brightness(.88)} .polku-cta .stepic{stroke:var(--bz-ink)} .polku-cta h3{color:var(--bz-ink)} /* Otsikkokokoinen nappiteksti (Petri 8.8.2026): sama koko kuin sivun väliotsikoilla (h2 = step-2), jotta valinta näyttää päätökseltä eikä lomakekentältä. */ .polku-kortti h3{margin:0;font-size:var(--step-2);font-weight:750; line-height:1.2;max-width:22ch;text-wrap:balance} @media (max-width:820px){.polku-kortti h3{font-size:var(--step-1)}} /* Kohteen yhteenveto on rivi eikä laatikko: se ei ole kysymys vaan kuittaus siitä, mitä tiedämme jo. */ .liidi-kohde{margin:14px 0 0;font-size:var(--step--1);color:var(--muted); padding:0} .liidi-kohde b{color:var(--ink)} /* Nimi + puhelin + Lähetä vahvistuskoodi samalla rivillä; nappi kohdistuu kenttien alareunaan (labelit vievät ylärivin). */ .liidi-ylarivi{align-items:flex-end} .liidi-ylarivi > div{flex:1 1 180px} .liidi-ylarivi .liidi-nappi{flex:0 0 auto} .liidi-nappi .btn{margin:0;white-space:nowrap} .polku-kortti p{margin:0;color:var(--muted);font-size:var(--step--1); line-height:1.55} .polku-nuoli{display:inline-block;margin-top:10px;font-weight:650; font-size:var(--step--1);color:var(--accent)} /* Poistuva kortti häipyy ennen uudelleenpiirtoa; sisään tuleva käyttää samaa osioSisaan-animaatiota kuin ketjun lokerot. */ .polku-kortti.pois{opacity:0;transform:scale(.97); transition:opacity .18s ease, transform .18s ease} .polku-kortti,.liidilomake{will-change:opacity} /* Valittu kortti koko riville; Takaisin-rivi kortin yläkulmaan. */ .polku-auki{grid-column:1 / -1;position:relative} .polku-takaisin{position:absolute;top:16px;right:18px; font-size:var(--step--1);font-weight:650;color:var(--muted)} .polku-auki:hover .polku-takaisin{color:var(--ink)} .polku-cta .polku-takaisin{color:var(--bz-ink);opacity:.75} .polku-cta.polku-auki:hover .polku-takaisin{color:var(--bz-ink);opacity:1} @media (prefers-reduced-motion:reduce){ .polku-kortti.pois{transition:none} } .polku-alaviite{margin:12px 0 0;color:var(--faint); font-size:var(--label);line-height:1.55} /* EI LOKEROA LOKERON SISÄÄN (Petri 17.8.2026). Lomake oli kortti, jonka sisällä avoin kysymys piirsi oman korttinsa — tummassa teemassa molemmat reunat näkyivät ja rakenne näytti laatikolta laatikossa. Laskuri ratkaisi saman jo aiemmin: .laskuri-kortti on pelkkä kääre ilman omaa pintaa, ja ainoa lokero on se kysymys, johon juuri nyt vastataan. Lomake noudattaa nyt samaa sääntöä. */ .liidilomake{margin-top:20px;background:none;border:0;padding:0} .liidilomake h3{margin:0 0 6px} .q-toiminnot{display:flex;gap:14px;align-items:center;margin-top:16px} .q-toiminnot .q-ohita{font:inherit;font-size:var(--step--1); background:none;border:0;color:var(--muted);cursor:pointer; text-decoration:underline} .polku-aikajana{list-style:none;margin:14px 0 0;padding:0} .polku-aikajana li{padding:8px 0;border-top:1px solid var(--hair); font-size:var(--step--1);color:var(--muted);line-height:1.55} .polku-aikajana li:first-child{border-top:0} .polku-aikajana b{color:var(--ink)} @media (max-width:820px){.polku-grid{grid-template-columns:1fr} .polku-auki{grid-column:auto}} .q-done{display:flex;justify-content:space-between;align-items:center;gap:12px; background:none;border:0;border-bottom:1px solid var(--hair);width:100%; font:inherit;cursor:pointer;padding:11px 4px;color:var(--muted); font-size:var(--step--1);text-align:left} .q-done b{color:var(--ink)} .q-done .mt{color:var(--faint);font-size:var(--label);text-transform:uppercase; letter-spacing:.06em} .q-done:hover .mt{color:var(--accent)} .q-jakso{font-size:var(--label);text-transform:uppercase;letter-spacing:.1em; color:var(--faint);margin:22px 0 10px} /* Perustietokortti: pienet huonelukuruudut + kaksi kenttää rinnakkain. Ruudut ovat matalampia kuin kohdetyypit, koska niissä ei ole kuvaa. */ .q .q-alaotsikko{display:block;font-size:var(--label);font-weight:650; color:var(--muted);text-transform:uppercase;letter-spacing:.06em; margin:14px 0 8px} .perus-huoneet{grid-template-columns:repeat(5,1fr)} /* Viisi kuntoa samalle riville (Petri 7.8.2026): porras luetaan vasemmalta oikealle, ja rivinvaihto katkaisisi asteikon. */ .piirteet{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .piirteet .tile-pieni{padding:10px 8px} .perus-huoneet .tile-pieni{padding:10px 6px} @media (max-width:640px){.perus-huoneet{grid-template-columns:repeat(3,1fr)}} .perus-kentat{display:flex;gap:14px;flex-wrap:wrap} .perus-kentat>div{flex:1 1 160px} .perus-kentat input{width:100%;max-width:none} .perus-virhe{color:var(--warn);font-size:var(--step--1);margin:10px 0 0} /* OSOITTEEN VARMISTUS. Lista on kentän päällä eikä työnnä lomaketta alaspäin: kysymyskortin korkeus ei saa hypätä kesken kirjoittamisen. */ /* Osoitekenttä ja listanappi rinnakkain; nappi ei veny kentän mukana eikä kenttä kutistu napin alle. */ .sijainti-rivi{display:flex;align-items:flex-start;gap:12px} .sijainti-kentta{flex:1;min-width:0} /* NAPPI TASAN KENTÄN KORKUINEN (Petri 8.8.2026: "valitse listasta nappula on hieman korkeampi kuin inputbox"). Pystypadding oli jo sama, mutta napin rivinkorkeus periytyi bodyltä (1,55 × 14 px = 21,7 px) kun kentällä se on selaimen 'normal' (≈20 px 17 pikselin fontilla) — ero 1,7 px. Rivinkorkeus lukitaan, jolloin molemmat ovat 46 px. */ .sijainti-rivi .btn{flex:none;white-space:nowrap; padding:12px 20px;font-size:var(--step--1);line-height:20px} @media (max-width:560px){ .sijainti-rivi{flex-wrap:wrap} .sijainti-kentta{flex-basis:100%} } .osoitekentta{position:relative} .osoite-lista{position:absolute;top:100%;left:0;right:0;z-index:30; background:var(--surface);border:1px solid var(--hair-strong); border-radius:var(--r);margin-top:4px;overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.13)} .osoite-ehdotus{display:flex;justify-content:space-between;align-items:baseline; gap:12px;width:100%;font:inherit;background:none;border:0;cursor:pointer; padding:10px 12px;text-align:left;border-bottom:1px solid var(--hair)} .osoite-ehdotus:last-child{border-bottom:0} .osoite-ehdotus:hover,.osoite-ehdotus.on{background:var(--surface-2)} .osoite-ehdotus b{color:var(--ink);font-weight:650} .osoite-ehdotus span{color:var(--faint);font-size:var(--step--1); white-space:nowrap;font-variant-numeric:tabular-nums} .osoite-ok{display:flex;align-items:baseline;gap:7px;margin:7px 0 0; font-size:var(--step--1);color:var(--muted)} .osoite-tikki{color:var(--accent);font-weight:700} /* Alueselain: koko lomake on täytettävissä ilman näppäimistöä. */ .alueselain{margin-top:12px} .alueselain-sisus{margin-top:10px;border:1px solid var(--hair); border-radius:var(--r);padding:14px;background:var(--surface); max-height:340px;overflow-y:auto} .alueselain-napit{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px} .pilleri{font:inherit;font-size:var(--step--1);cursor:pointer; background:var(--surface);border:1px solid var(--hair-strong); border-radius:999px;padding:9px 15px;color:var(--ink); display:flex;align-items:center;gap:7px;min-height:40px} .pilleri:hover{border-color:var(--ink)} .pilleri.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;font-weight:650} .pilleri-lisa{color:var(--faint);font-size:var(--label)} /* ── Laskuri: kortti, kysymysketju, rastit ──────────────────── Malli ReAllin varauslomakkeesta (Petrin oma design): ohut nimetty yksi lista, kevyet ruutuvalinnat, arvio listan viimeisenä. */ /* LOKERO POIS (Petri 7.8.2026): laskuri ei ole laatikko vaan SIVU — valinnat istuvat suoraan sivun pinnassa. Sisemmät osat (kysymyskortit, kentät, napit) saavat kehyksensä. */ .laskuri-kortti{background:none;border:0;padding:0} /* Valinnat ovat NAPPULOITA, eivät lokeroita (Petri 7.8.2026): ikonittomia pillereitä rivissä. Etusivun aloitusruudukko (ikonit) säilyy — tämä koskee vain avattua laskuria. */ /* Sama pillerikieli myös yhteydenottolomakkeessa: se on saman ketjun jatke, eikä sama valinta saa näyttää kahdessa paikassa eri tuotteelta. */ .laskuri-kortti .tiles,.liidilomake .tiles{display:flex;flex-wrap:wrap;gap:8px} .laskuri-kortti .tile,.liidilomake .tile{flex-direction:row;width:auto;gap:8px; padding:9px 16px;border-radius:999px} /* Ikonit säilyvät nappuloissa pieninä (Petri 7.8.2026): samat viivapiirrokset kuin ReAllin kalenterissa ja etusivun ruuduissa. */ .laskuri-kortti .tile svg{width:24px;height:19px;flex:none} .laskuri-kortti .tile .t-lisa{display:none} /* Kohde-sivun kaksi palstaa (kalenterin malli): vasen kantaa kohteen tiedot, oikea kapeana erityispiirteet ja kerroksen. */ .vaihe-otsikko{margin:10px 0 2px} /* Kysymyksen ja vastausten väliin oma rako (Petri 8.8.2026): otsikko oli kiinni ensimmäisessä ruudussa. */ .vaihe-osio{margin:20px 0 0} .vaihe-osio > .q-alaotsikko{margin-top:0;margin-bottom:12px} /* Paljastuva kysymysketju (Petri 8.8.2026): vastattu kysymys supistuu klikattavaksi riviksi, aktiivinen liukuu esiin. */ .osio-seur-rivi{display:flex;justify-content:flex-end;margin-top:16px} .osio-seur-rivi .btn[disabled]{opacity:.4;cursor:default} .osio-rivi{font-family:inherit;font-size:var(--step--1);width:100%; display:flex;justify-content:space-between;align-items:center;gap:12px; background:none;border:0; padding:11px 2px;cursor:pointer;text-align:left} .osio-rivi .osio-rivi-otsikko{color:var(--muted);font-weight:600} .osio-rivi:hover .osio-rivi-otsikko{color:var(--ink)} .osio-rivi .osio-rivi-arvo{display:flex;align-items:center;gap:8px; font-weight:650;color:var(--ink);text-align:right} .osio-rivi .osio-tikki{color:var(--ink);font-weight:800} .osio-rivi-tyhja .osio-rivi-arvo{color:var(--faint);font-weight:500} /* Korostuslokero: brändisävyinen mutta murrettu pohja, jotta se vie huomion ilman että täysi accent-täyttö kilpailisi nappien kanssa. Tausta piirretään pseudoelementtinä sisällön ALLE (Petri 8.8.2026: "älä muuta kysymyslokeron kokoa tai sijoittelua") — padding siirtäisi kysymykset paikaltaan, inset-laatikko ei siirrä mitään. */ .osio-korostus{position:relative;margin:38px 0 46px} .osio-korostus::before{content:'';position:absolute; inset:-18px -20px -16px;background:var(--sec-tint); border:1px solid var(--hair);border-radius:14px} /* Jakoviivat poistettu riveiltä (Petri 7.8.2026): vastattu rivi erottuu jo otsikon ja arvon kontrastista, eikä viiva vie kysymyslokeroon vaan pilkkoo listan. */ .osio-korostus > *{position:relative} .osio-korostus > .q-alaotsikko{color:var(--ink);font-weight:700} .osio-sisaan{animation:osioSisaan .24s ease both} @keyframes osioSisaan{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}} /* Kevyt rasti-monivalinta — ReAllin Lisätilat-checkboxien ilme: pyöristetty neliö + valkoinen ✓ mustalla pohjalla valittuna. */ .rastit{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px 18px;margin:8px 0 0} .rasti{display:flex;align-items:center;gap:10px;font-size:var(--step--1); font-weight:600;color:var(--ink);background:none;border:0;padding:6px 0; cursor:pointer;font-family:inherit;text-align:left} .rasti .rasti-laatikko{width:22px;height:22px;flex:none; border:1.5px solid var(--hair-strong);border-radius:7px; display:grid;place-items:center;color:transparent;font-size:var(--label); font-weight:800;transition:background .12s} .rasti[aria-pressed="true"] .rasti-laatikko{background:var(--ink); border-color:var(--ink);color:var(--ground)} .rasti:hover .rasti-laatikko{border-color:var(--ink)} .kartta-alue{border:1px solid var(--hair);border-radius:var(--r); overflow:hidden;margin:12px 0 0;position:relative} /* Iframe on pelkkä kuva — zoom hoidetaan omilla napeilla, jotka peittävät embedin omat (ne eivät totelleet kaikissa selaimissa). */ /* Korkeampi kartta (Petri 8.8.2026): 210 px teki siitä nauhan, jossa naapuruston hahmottaminen jäi puolitiehen. 300 px näyttää korttelin ympäriltä molempiin suuntiin ilman että lokero kasvaa kohtuuttomaksi. */ .kartta-alue iframe{display:block;width:100%;height:300px;border:0; filter:grayscale(1) contrast(.9);pointer-events:none} @media (max-width:660px){.kartta-alue iframe{height:240px}} .kartta-zoomit{position:absolute;top:8px;right:8px;display:flex; flex-direction:column;gap:5px} .kz{width:32px;height:32px;border-radius:9px;background:var(--surface); border:1px solid var(--hair-strong);color:var(--ink);cursor:pointer; font:inherit;font-size:19px;line-height:1;display:grid; place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.12)} .kz:hover{border-color:var(--ink)} /* Kohdetyypit kalenterin malliin: korkea ruutu, ikoni ylhäällä. Grid pitää ruudut TASALEVYISINÄ — flexissä pitkänimiset venyivät muita leveämmiksi (Petri 7.8.2026). */ .laskuri-kortti .tiles.tiles-korkeat{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .laskuri-kortti .tiles-korkeat .tile{flex-direction:column;gap:10px; border-radius:var(--r);padding:18px 12px 14px; justify-content:flex-end} .laskuri-kortti .tiles-korkeat .tile svg{width:40px;height:31px} .laskuri-kortti .tile .t-nimi{font-size:var(--step--1)} /* Valitun vaihtoehdon selite palaa rivin alle yhtenä rivinä — nappulassa alarivi tekisi siitä taas lokeron. */ /* Asuinala saa puolet leveydestä, lisätilat neljäsosan kumpikin (Petri 8.8.2026): asuinala on osion pääkysymys ja sen asteikko on viisi kertaa pidempi, joten se tarvitsee eniten tilaa. */ .ala-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px 26px; align-items:start} .ala-grid .q-alaotsikko{margin:0 0 8px} .ala-grid .m2-rivi{max-width:none; grid-template-columns:minmax(0,1fr) 68px 22px;gap:0 10px} .ala-grid .m2-rivi input[type=text]{max-width:68px} .ala-grid > div{min-width:0} /* PINTAKYSYMYS: [Alkuperäinen] [Uusittu ____] Uusittu-pilleri VENYY oikealle ja paljastaa vuosikentän (Petrin ehdotus 8.8.2026). Kenttä on osa pilleriä, joten sen korkeus ja keskilinja tulevat rakenteesta — aiemmin erillinen laatikko oli eri korkuinen ja eri linjassa nappien kanssa. */ .pinta-rivi{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap} .pinta-rivi .tiles{flex:0 1 auto;min-width:0} /* Kaksi valintaa vierekkäin, ei venytettyä ruudukkoa: pilleri saa kasvaa vain sen verran kuin kenttä vaatii. */ .pinta-tiles{display:flex;gap:8px;align-items:stretch} /* Pillerinmuotoinen kuten muutkin valinnat (Petri 8.8.2026): .laskuri-kortti .tile antaa napeille border-radius:999px, mutta pilleri piirtää reunuksen napin puolesta ja peri var(--r):n eli pienen pyöristyksen — kaksi eri muotoa samalla rivillä. */ .pinta-pilleri{display:inline-flex;align-items:stretch; background:var(--surface);border:1px solid var(--hair-strong); border-radius:999px;overflow:hidden; transition:border-color .18s ease} .pinta-pilleri:hover{border-color:var(--ink)} .pinta-pilleri.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} /* Nappi ja kenttä ilman omia reunuksia — pilleri piirtää ne. */ .pinta-pilleri .tile{border:0;border-radius:0;background:none; box-shadow:none} .pinta-pilleri .tile[aria-pressed="true"]{border-color:transparent; box-shadow:none} /* Valitsimessa on OLTAVA .pinta-pilleri edessä: yleinen input[type=text] -sääntö (0,1,1) voittaisi paljaan luokan (0,1,0) ja antaisi kentälle width:100% + oman reunuksen. */ .pinta-pilleri .pinta-vuosi-kentta{font:inherit;font-size:var(--step-0); border:0;background:none;color:var(--ink);text-align:center; width:0;min-width:0;padding:0;opacity:0;pointer-events:none; border-radius:0; transition:width .22s ease, padding .22s ease, opacity .16s ease .06s} .pinta-pilleri.on .pinta-vuosi-kentta{width:62px;padding:0 16px 0 0; opacity:1;pointer-events:auto} .pinta-pilleri .pinta-vuosi-kentta:focus, .pinta-pilleri .pinta-vuosi-kentta:focus-visible{outline:none} .pinta-pilleri:focus-within{border-color:var(--accent)} @media (prefers-reduced-motion:reduce){ .pinta-vuosi-kentta{transition:none} } /* Putki ja vaurioruutu pintakysymysten alla omalla rivillään. */ /* Ylätasaus (Petri 8.8.2026): flex-end oli vanhaa asettelua varten, jossa korjaustarve oli yksirivinen rasti ja kuului putkiruutujen alalaitaan. Nyt molemmat ovat nimike + pillerit, joten nimikkeet kuuluvat samalle riville. */ .remontit-alarivi{display:flex;align-items:flex-start;gap:16px 40px; flex-wrap:wrap;margin-top:18px} .remontit-alarivi > div{min-width:0} /* Liite vie oman rivinsä, jotta sen aukeaminen ei siirrä kysymyksiä. */ .remontit-alarivi > .remonttiliite{flex:0 0 100%;margin-top:2px} /* Korjaustarve on lokeron leveimmät ruudut — annetaan niiden viedä tarvitsemansa tila eikä puristeta kahteen kapeaan sarakkeeseen. */ .vaurio-rivi .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} @media (max-width:820px){.remontit-alarivi{flex-direction:column; align-items:stretch;gap:16px}} /* Sarakkeen sisällä rivin oikealla puolella ei ole tilaa: jatke (Ylin kerros -rasti) laskeutuu säätimen alle, ettei se peitä naapurisaraketta (Petri 7.8.2026). */ .ala-grid .m2-jalki{position:static;transform:none;grid-column:1 / -1; justify-self:start;margin-top:10px} .ala-grid-2{grid-template-columns:1fr 1fr} .ala-grid-3{grid-template-columns:1fr 1fr 1fr} @media (max-width:1000px){.ala-grid{grid-template-columns:1fr 1fr}} @media (max-width:660px){.ala-grid{grid-template-columns:1fr}} /* Tontin koko ja omistus rinnakkain samassa osiossa. */ .tontti-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr); gap:10px 40px;align-items:start} .tontti-grid .q-alaotsikko{margin:0 0 8px} .tontti-grid-yksi{grid-template-columns:minmax(0,1fr)} @media (max-width:820px){.tontti-grid{grid-template-columns:1fr}} /* Grid kiinteillä sarakkeilla: liukuriosa, kenttä ja yksikkö ovat joka rivillä samat — kaikki säätimet tasalevyisiä. */ .m2-rivi{display:grid;grid-template-columns:minmax(0,1fr) 88px 28px; gap:0 16px;align-items:start;max-width:480px;position:relative} /* Rivin jatke (esim. Ylin kerros -rasti) istuu säätimen oikealla puolella viemättä tilaa liukurilta — kaikki säätimet pysyvät samanlevyisinä. */ .m2-jalki{position:absolute;left:calc(100% + 20px);top:50%; transform:translateY(-50%);white-space:nowrap} /* Kapealla rivin oikealla puolella ei ole tilaa — rasti laskeutuu säätimen alle omalle rivilleen (Petri 7.8.2026). */ @media (max-width:880px){ .m2-jalki{position:static;transform:none;grid-column:1 / -1; justify-self:start;margin-top:6px} } .m2-liuku-kotelo{padding-top:6px} /* Säädin on suunniteltu SORMELLE (Petri 7.8.2026: lomakkeen pitää toimia iPadilla ilman näppäimistöä) — iso nuppi ja paksu ura. */ .m2-liuku{width:100%;accent-color:var(--accent);margin:0;height:28px; -webkit-appearance:none;appearance:none;background:transparent; cursor:pointer;touch-action:none} .m2-liuku::-webkit-slider-runnable-track{height:6px;border-radius:3px; background:var(--hair-strong)} .m2-liuku::-moz-range-track{height:6px;border-radius:3px; background:var(--hair-strong)} .m2-liuku::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:26px;height:26px;border-radius:50%;background:var(--accent); border:2px solid var(--surface);margin-top:-10px; box-shadow:0 1px 3px rgba(0,0,0,.25)} .m2-liuku::-moz-range-thumb{width:26px;height:26px;border-radius:50%; background:var(--accent);border:2px solid var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.25)} .m2-liuku:focus-visible{outline:2px solid var(--accent);outline-offset:4px} .m2-rajat{display:flex;justify-content:space-between; font-size:var(--label);color:var(--faint);margin-top:2px} .m2-rivi input[type=text]{max-width:88px;text-align:center} .m2-yksikko{align-self:center;color:var(--muted);font-size:var(--step--1)} /* Arvio-vaihe: entisen tuloskortin sisältö saman kortin sisällä. */ .vaihe-arvio-grid{display:grid;grid-template-columns:1.05fr .95fr; gap:8px 48px;align-items:start} .vaihe-arvio-sivu{display:flex;flex-direction:column;gap:18px; margin-top:14px} .vaihe-arvio-sivu #a-jatko{margin:0} @media (max-width:880px){.vaihe-arvio-grid{grid-template-columns:1fr}} /* ARVIO SAA SAMAN KOROSTUSLAATIKON KUIN AVOIN KYSYMYS (Petri 8.8.2026): sama inset-tausta kuin .osio-korostus, jotta sivun tärkein sisältö erottuu listasta samalla kielellä kuin se, mihin juuri vastataan. Tausta piirretään pseudoelementtinä sisällön alle, joten mikään ei siirry paikaltaan. */ .vaihe-arvio{margin-top:14px;position:relative;margin:38px 0 46px} /* Oma ostohinta -tarkennus: hiljainen lohko arvion alla */ .osto-tarkennus{margin:26px 0 8px;padding-top:18px; border-top:1px solid var(--hair)} .osto-tarkennus h4{margin:0 0 6px} .osto-rivi{display:flex;gap:10px;margin:10px 0} .osto-kentta{font:inherit;font-size:var(--step-0);padding:10px 12px; border:1px solid var(--hair-strong);border-radius:8px; background:var(--surface);color:var(--ink);width:150px} .osto-kentta:focus{outline:2px solid var(--accent);outline-offset:1px} .osto-rasti{display:flex;align-items:center;gap:8px; font-size:var(--step--1);color:var(--muted);cursor:pointer} /* Tietoseloste napin alla — kerrotaan, ei pyydetä lupaa. */ .q-lupa-teksti{font-size:var(--step--1);color:var(--muted); margin:12px 0 0;max-width:62ch} .kiitos-tervehdys{font-weight:700;margin-bottom:6px} /* Remonttiluettelon liite: piilossa kunnes myyjä avaa sen */ .remonttiliite{margin-top:10px} .remonttiliite summary{font-size:var(--step--1);color:var(--muted); cursor:pointer} .remonttiliite summary:hover{color:var(--ink)} .remonttiliite-kentta{font:inherit;font-size:var(--step--1);width:100%; padding:8px 10px;border:1px solid var(--hair-strong);border-radius:8px; background:var(--surface);color:var(--ink);resize:vertical} .remonttiliite-tulos{font-size:var(--step--1);color:var(--muted); margin:6px 0 0} .vaihe-arvio::before{content:'';position:absolute; inset:-18px -20px -16px;background:var(--sec-tint); border:1px solid var(--hair);border-radius:14px} .vaihe-arvio > *{position:relative} .vaihe-arvio .sp-otsikko{font-size:var(--label);text-transform:uppercase; letter-spacing:.1em;color:var(--faint);margin:0 0 6px} .vaihe-arvio .a-big{margin:0 0 4px} /* Iso luku ja varmuus samalla rivillä, varmuus oikeassa laidassa. */ .arvio-rivi{display:flex;align-items:baseline;justify-content:space-between; gap:18px;flex-wrap:wrap} .arvio-varmuus{display:flex;align-items:baseline;gap:7px; margin-bottom:4px} .arvio-varmuus b{font-size:var(--step-2);font-weight:750; letter-spacing:-.02em;color:var(--ink)} .arvio-varmuus span{font-size:var(--step--1);color:var(--muted)} .vaihe-arvio .a-posti,.vaihe-arvio + .a-posti{margin-top:18px} /* ── liike ───────────────────────────────────────────────── Yksi mekanismi kaikille näkymille. Lohko nousee paikalleen kun se tulee näkyviin; liike on lyhyt (.45 s) ja pieni (10 px), koska sen tehtävä on kertoa lukujärjestys eikä esittää itseään. Luokka lisätään JavaScriptillä, ei merkkaukseen: ilman skriptiä sisältö on näkyvissä sellaisenaan eikä jää piiloon opacity:0:aan. Koko efekti kytkeytyy pois prefers-reduced-motion -säännöllä (yllä). */ .reveal{opacity:0;transform:translateY(10px); transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1)} .reveal.in{opacity:1;transform:none} /* Näkymän vaihto: nopea nosto, jotta vaihto tuntuu siirtymältä eikä välähdykseltä. Lyhyempi kuin lohkojen liike — tämä on kehys, ei sisältö. */ .view.on{animation:viewin .3s cubic-bezier(.22,.61,.36,1) both} @keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* Käyrä piirtyy vasemmalta oikealle: aikasarja luetaan siihen suuntaan, joten piirtojärjestys on sama kuin lukujärjestys. */ .trend .line{stroke-dasharray:1000;stroke-dashoffset:1000; transition:stroke-dashoffset 1.2s cubic-bezier(.33,.9,.5,1) .1s} .trend .area{opacity:0;transition:opacity .7s ease .35s} .trend .dot{opacity:0;transition:opacity .35s ease 1s} .reveal.in .line{stroke-dashoffset:0} .reveal.in .area{opacity:.12} .reveal.in .dot{opacity:1} /* Kortit reagoivat osoittimeen sen verran, että ne tuntuvat kosketeltavilta. Ei varjoja: ilme on litteä. */ /* EI hover-nostoa korteille. Kohoaminen on napin ele — se lupaa painallusta. Kortti on luettava pinta, ja liike sen alla vie huomion juuri siitä, mitä siinä lukee. Reunan tummuminen riittää kertomaan että kortti on klikattava. */ .card,.plan,.trend,.peek{transition:border-color .18s ease} .card:hover,.plan:hover{border-color:var(--hair-strong)} /* ═══ SISÄLTÖ: UKK, OPPAAT, ALUESIVU ═══════════════════════════════ Nämä sivut ovat hakukoneliikenteen sisääntulo. Ne eivät ole palvelun toimintaa vaan tekstiä, ja siksi niillä on eri typografia kuin käyttöliittymällä: pidempi rivinväli, kapeampi mitta, isompi leipä. Käyttöliittymässä luetaan silmäillen, artikkelissa riveittäin. */ /* UKK-haitari.
eikä JavaScript: kysymys aukeaa myös silloin kun skripti ei lataudu, ja teksti on sivulla hakukoneelle myös suljettuna. Yksi elementti vähemmän rikki mennä. */ .ukk{border-top:1px solid var(--hair)} /* Tyhjä haitari jätti sivulle irrallisen viivan, joka luki kuin keskeneräinen osio. Reuna kuuluu sisällölle, ei säiliölle. */ .ukk:empty{display:none} .ukk details{border-bottom:1px solid var(--hair)} .ukk summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative; font-size:var(--step-0);font-weight:650;color:var(--ink)} .ukk summary::-webkit-details-marker{display:none} /* Merkki on plus/miinus eikä nuoli: nuoli lupaa siirtymistä toiselle sivulle, plus lupaa avautumista paikallaan. */ .ukk summary::after{content:"+";position:absolute;right:4px;top:50%; transform:translateY(-50%);font-size:var(--step-1);font-weight:400; color:var(--accent);line-height:1} .ukk details[open] summary::after{content:"–"} .ukk summary:hover{color:var(--accent)} .ukk summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ukk-vastaus{padding:0 34px 20px 0;color:var(--muted);max-width:70ch} .ukk-vastaus p{margin:0} /* OMA ALUE. Pyyntökortti saa saman brändisävyisen pohjan kuin laskurin korostuslokero (.osio-korostus): sivun tärkein sisältö on pyyntö, ja tint erottaa sen valkoisista hallintakorteista ilman että otsikoita tarvitsee korostaa. Napit pidetään valkoisina, kuten laskurin ruudut korostuslokeron sisällä — muuten kontrolli sulautuu pohjaan eikä näytä painettavalta. */ .oma-pyynto{background:var(--sec-tint)} .oma-pyynto .btn-quiet{background:var(--surface)} /* Kirjautumistavat ja tietojen poisto ovat harvoja käyntejä: auki ne työntäisivät pyynnöt — sivun varsinaisen asian — ruudun ulkopuolelle.
eikä JavaScript, sama ratkaisu kuin UKK-haitarissa: aukeaa myös ilman skriptiä. */ .oma-taite{border:1px solid var(--hair);border-radius:var(--r); background:var(--surface);margin-top:12px} .oma-taite summary{cursor:pointer;list-style:none;position:relative; display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:15px 44px 15px 16px;font-size:var(--step-0);font-weight:700; color:var(--ink)} .oma-taite summary h3{margin:0;font-size:inherit;font-weight:inherit; line-height:inherit} .oma-taite summary::-webkit-details-marker{display:none} .oma-taite summary::after{content:"+";position:absolute;right:16px; top:50%;transform:translateY(-50%);font-size:var(--step-1); font-weight:400;color:var(--accent);line-height:1} .oma-taite[open] summary::after{content:"\2013"} .oma-taite summary:hover{color:var(--accent)} .oma-taite summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* Tilamerkki otsikossa: kun osio on kiinni, kesken oleva vahvistus ei saa jäädä piiloon — muuten sivu näyttää valmiilta vaikka sähköposti ei toimi kirjautumiseen. */ .oma-taite-tila{font-size:var(--step--1);font-weight:500; color:var(--muted)} .oma-taite-sisus{padding:0 16px 16px} /* Vastaanottajat. Myyjän kysymys pyynnön jälkeen on "kuka sai tietoni" — ja se on myös se, mitä tietosuoja-asetus antaa hänelle oikeuden tietää. Lista on taitteen takana, koska nimet eivät kerro kortin tilaa: auki se veisi enemmän pystytilaa kuin itse pyyntö. */ .oma-vast{margin:10px 0 0} .oma-vast summary{cursor:pointer;list-style:none;font-size:var(--step--1); color:var(--ink);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline} .oma-vast summary::-webkit-details-marker{display:none} .oma-vast summary::after{content:"Näytä välittäjät";color:var(--accent); font-weight:650;text-decoration:underline;text-underline-offset:3px} .oma-vast[open] summary::after{content:"Piilota välittäjät"} .oma-vast summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px;border-radius:4px} .oma-vast-lista{list-style:none;margin:10px 0 0;padding:0; display:flex;flex-direction:column;gap:3px} .oma-vast-lista li{font-size:var(--step--1);display:flex;gap:8px; flex-wrap:wrap;align-items:baseline} .oma-vast-lista li span{color:var(--muted)} .oma-vast-loppu{font-size:var(--step--1);color:var(--muted);margin:10px 0 0} /* Suostumuksen peruminen on peruuttamaton, joten se kysytään erikseen. Varmistus avautuu korttiin eikä modaaliin: modaali peittää juuri sen pyynnön, jota ollaan perumassa, eikä myyjä näe enää mitä hän on perumassa. Selaimen confirm() ei tule kysymykseen — se ei kerro seurauksia eikä sitä voi kirjoittaa auki. */ /* Napit luokassa eikä inline-tyylissä: inline display voittaa [hidden]-attribuutin selaimen oletustyylin, jolloin piilotus ei toimi lainkaan. */ .oma-toimet{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .oma-toimet[hidden]{display:none} .oma-varmistus{margin-top:12px;border:1px solid var(--warn); border-radius:var(--r);padding:14px;background:var(--surface)} .oma-varmistus p{font-size:var(--step--1);margin:0 0 12px;max-width:52ch} .oma-varmistus .oma-varmistus-napit{display:flex;gap:10px;flex-wrap:wrap} .oma-varmistus .btn{margin-top:0} .oma-peruttu{font-size:var(--step--1);margin:10px 0 0} /* Artikkelin leipä. */ .artikkeli{max-width:70ch} .artikkeli h1{margin-bottom:16px} .artikkeli h2{font-size:var(--step-2);margin:38px 0 12px} .artikkeli h3{font-size:var(--step-1);margin:26px 0 8px} .artikkeli p{color:var(--muted);margin:0 0 14px;line-height:1.7} .artikkeli ul,.artikkeli ol{margin:0 0 16px;padding-left:22px;color:var(--muted); display:flex;flex-direction:column;gap:7px;line-height:1.7} .artikkeli strong{color:var(--ink)} .artikkeli .karki{font-size:var(--step-1);color:var(--ink);line-height:1.55; font-weight:500;margin-bottom:26px} /* Lähdemerkintä on osa väitettä eikä alaviite — mutta se ei ole väite. Lyhyt "Lähde: X" kestää aksenttivärin; kolmen rivin menetelmäselostus ei, vaan alkaa huutaa kovempaa kuin luku jota se selittää. Merkintä tulee siis REUNASTA ja teksti pysyy leipätekstin sävyssä. */ .artikkeli .lahde{font-size:var(--step--1);color:var(--muted); border-left:2px solid var(--accent-2);padding-left:12px;margin:-4px 0 20px; max-width:70ch} .artikkeli .varoitus{font-size:var(--step--1);color:var(--warn); border:1px solid var(--hair);border-radius:var(--r);padding:12px 14px;margin:0 0 18px} /* Artikkelin taulukot ovat leveämpiä kuin leipäteksti: ne ovat dataa, eikä dataa lueta rivikohtaisesti vaan sarakkeittain. */ .artikkeli .scroll-x{max-width:none;width:100%;margin:0 0 8px} .artikkeli table{width:100%;border-collapse:collapse;font-size:var(--step--1); font-variant-numeric:tabular-nums;margin:0 0 8px} .artikkeli th,.artikkeli td{padding:10px 12px;text-align:right; border-bottom:1px solid var(--hair)} .artikkeli th:first-child,.artikkeli td:first-child{text-align:left} .artikkeli thead th{font-size:var(--label);color:var(--muted);font-weight:650; text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--hair-strong)} /* Oman luvun nostot. Vähintään kolme joka oppaassa — se on sekä hakukonesääntö että ainoa asia sivulla, jota kilpailija ei voi kopioida. Siksi ne ovat omana lohkonaan eivätkä leipätekstissä. */ /* EI RAKOA TAUSTAVÄRINÄ. Tavallinen "gap:1px + tumma tausta" -temppu piirtää viivat vain sinne missä on soluja — ja kun neljä lukua taittuu kolmen sarakkeen riville, viimeiselle riville jää harmaa tyhjä laatikko joka näyttää rikkoutuneelta kortilta. Oma reuna jokaiselle: tyhjää solua ei ole olemassa, joten sitä ei voi nähdäkään. */ .luvut{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;margin:0 0 30px;max-width:none} .luku{background:var(--surface);border:1px solid var(--hair); border-radius:var(--r);padding:18px 20px} .luku b{display:block;font-size:var(--step-2);font-weight:800;letter-spacing:-.03em; color:var(--accent-2);margin-bottom:6px} .luku span{display:block;font-size:var(--step--1);color:var(--muted);line-height:1.5} .luku em{display:block;font-style:normal;font-size:var(--label);color:var(--faint); margin-top:8px;text-transform:uppercase;letter-spacing:.06em} /* Oppaiden lista. */ .opaslista{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .opaskortti{background:var(--surface);border:1px solid var(--hair); border-radius:var(--r);padding:22px 24px;transition:border-color .18s ease} .opaskortti:hover{border-color:var(--hair-strong)} .opaskortti h2,.opaskortti h3{margin-bottom:8px;font-size:var(--step-1)} .opaskortti h2 a,.opaskortti h3 a{color:var(--ink);text-decoration:none} .opaskortti h2 a:hover,.opaskortti h3 a:hover{color:var(--accent)} .opaskortti p{color:var(--muted);font-size:var(--step--1);line-height:1.6;margin:0} .opaskortti .meta{font-family:var(--mono);font-size:var(--label);color:var(--faint); margin-top:12px;display:block} /* Loput oppaat avattavan takana (Petri 17.8.2026): kymmenen korttia kerralla on pino, josta yksikään ei erotu. Avattava on sama details-elementti kuin UKK:ssa, joten se toimii ilman JavaScriptiä ja hakukone näkee linkit joka tapauksessa. */ .oppaat-loput{margin-top:12px} .oppaat-loput>summary{cursor:pointer;list-style:none;display:inline-flex; align-items:center;gap:8px;padding:12px 20px;border:1px solid var(--hair-strong); border-radius:var(--r);background:var(--surface);color:var(--ink); font-size:var(--step--1);transition:border-color .18s ease} .oppaat-loput>summary::-webkit-details-marker{display:none} .oppaat-loput>summary::after{content:"+";font-family:var(--mono);color:var(--muted)} .oppaat-loput[open]>summary::after{content:"–"} .oppaat-loput>summary:hover{border-color:var(--ink)} .oppaat-loput[open]>summary{margin-bottom:12px} /* Välityspalkkiolaskuri. Työkalu on ainoa sisältötyyppi, jonka arvo säilyy zero-click-haussa: kone tiivistää tekstin siitä miten palkkio lasketaan, mutta se ei laske sinun palkkiotasi. */ .laskuri-syote{display:grid;grid-template-columns:repeat(2,minmax(0,220px)); gap:14px;margin:0 0 26px} .laskuri-syote label{display:block;font-size:var(--label);color:var(--muted); text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px} /* Rivi, jolla minimipalkkio ohittaa hinnaston prosentin. Se on koko laskurin ainoa erottava tieto, joten se on merkittävä — mutta merkintä on hillitty pohja eikä väri numeroissa: luku on silti luku. */ .sidottu td{background:var(--accent-soft)} .laskuri-huomio{font-size:var(--step--1);color:var(--muted);max-width:70ch; margin:14px 0 30px} .jatko{margin-top:40px;border-top:1px solid var(--hair);padding-top:22px} .jatko h2{font-size:var(--step-1);margin-bottom:12px} .jatko ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .jatko a{color:var(--accent-2)} @media (max-width:880px){ .opaslista{grid-template-columns:1fr} .a-row{grid-template-columns:1fr} :root{--step-4:2.4rem;--step-3:1.75rem} .profile{grid-template-columns:1fr;gap:32px;padding:44px 0} /* Alatila EI kutistu mobiilissa: kaupunkikerros on 128 px korkea ja ankkuroitu hero-osion alalaitaan, joten pienempi pohjapadding työntää esimerkkikortin skylinen päälle (Petrin havainto 17.8.2026). Ylätila saa kutistua, alatila ei. */ .hero{grid-template-columns:1fr;gap:32px;padding:44px 0 150px} .steps,.pledges,.plans,.prof-metrics{grid-template-columns:1fr} .side{position:static} .why li{grid-template-columns:1fr 64px 40px} .topbar .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:12px} } /* Valikko ja tilinappi ovat tuotannossa oikeita linkkejä, mockupissa näkymää vaihtavia nappeja. Sama ilme molemmille: alleviivaus pois ja napin mitat myös a-elementille. */ .viewnav a,.account a{text-decoration:none;display:inline-block} .acct-login{text-decoration:none;display:inline-block} /* ── ohituslinkki ───────────────────────────────────────────────────── "Siirry sisältöön" on näppäimistökäyttäjän oikopolku valikon ohi. Se kuuluu sivulle, mutta se ei kuulu näkyviin ennen kuin sarkain osuu siihen — muuten jokainen kävijä lukee ohjeen, joka ei koske häntä. Piilotus ei saa olla display:none: silloin sitä ei voi kohdistaa eikä se palvele ketään. */ .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0} .screen-reader-text:focus-visible{position:fixed;top:12px;left:12px; z-index:100;width:auto;height:auto;clip-path:none;margin:0; padding:12px 18px;background:var(--surface);color:var(--ink); border:2px solid var(--accent,var(--brand));border-radius:var(--r); font-weight:650;text-decoration:none} /* ── evästekysely ─────────────────────────────────────────────────── LAKISÄÄTEINEN VAIN JOS EI-VÄLTTÄMÄTTÖMIÄ EVÄSTEITÄ ON. Pelkällä kirjautumisistunnolla banneria ei saa näyttää lainkaan — turha banneri on sekin väärä väite. Tämä mockup olettaa, että analytiikka otetaan käyttöön, joten kysely näytetään. TRAFICOMIN LINJAUS: hylkäämisen on oltava yhtä helppoa kuin hyväksymisen. Siksi Hylkää on bannerissa samalla rivillä ja samman kokoisena kuin Hyväksy — ei paneelin takana. */ /* MATALA ALAPALKKI. Koko leveys (kulmakortti kokeiltiin ja hylättiin 5.8.2026), mutta yhden rivin korkuinen: banneri on velvoite eikä sisältöä, joten se saa viedä mahdollisimman vähän ruutua. Traficomin vaatimus täyttyy — Hylkää on samalla rivillä ja saman kokoisena kuin Hyväksy. */ .cookie{position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--surface);border-top:1px solid var(--hair); box-shadow:0 -3px 12px rgba(0,0,0,.06)} .cookie .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding-top:8px;padding-bottom:8px} .cookie p{margin:0;font-size:var(--label);color:var(--muted);flex:1 1 260px} .cookie p a{color:var(--ink)} .cookie-napit{display:flex;gap:8px;flex-wrap:wrap} .cookie-napit .btn{margin:0;padding:6px 12px;font-size:var(--label); font-weight:600;border-radius:5px} .cookie-paneeli{position:fixed;left:0;right:0;bottom:0;z-index:61; background:var(--surface);border-top:1px solid var(--hair-strong); box-shadow:0 -10px 34px rgba(0,0,0,.16);display:none} .cookie-paneeli.on{display:block} .cookie-paneeli .wrap{padding-top:22px;padding-bottom:22px} .cookie-paneeli h2{display:flex;justify-content:space-between;align-items:center; font-size:var(--step-1);margin-bottom:10px} .cookie-sulje{font:inherit;background:none;border:0;cursor:pointer; font-size:var(--step-1);color:var(--muted);padding:4px 8px} .cookie-sulje:hover{color:var(--ink)} .cookie-paneeli>.wrap>p{font-size:var(--step--1);color:var(--muted);max-width:70ch} .cookie-luokka{display:flex;gap:12px;align-items:flex-start; padding:12px 0;border-top:1px solid var(--hair)} .cookie-luokka:first-of-type{border-top:0} .cookie-luokka input{width:18px;height:18px;margin-top:2px;flex:none; accent-color:var(--accent)} .cookie-luokka b{display:block;font-size:var(--step--1)} .cookie-luokka span{font-size:var(--label);color:var(--muted);line-height:1.5} /* Paneelin napit sisällön kokoisina, ei koko leveydeltä: valinta on jo tehty ruuduilla, napin tehtävä on vain vahvistaa se. */ .cookie-paneeli .cookie-napit{margin-top:16px;justify-content:flex-end} /* ── sisältösivut ja juridiset sivut ───────────────────────────────── Leipätekstipalsta on kapea tarkoituksella: rivi, joka jatkuu koko 1080 pikselin levyisenä, on mitattavasti raskaampi lukea. Taulukot saavat oman vaakavierityksensä, koska seloste luetaan usein puhelimella eikä sivu saa vieriä sivusuunnassa. */ .aha-sisalto{padding:40px 0 64px;max-width:74ch} .aha-sisalto.aha-levea{max-width:none} .aha-sisalto h1{margin-bottom:22px} .aha-runko h2{margin:38px 0 12px;font-size:var(--step-1)} .aha-runko h3{margin:26px 0 8px} .aha-runko p{margin:0 0 14px;color:var(--muted);line-height:1.7} .aha-runko p b,.aha-runko li b{color:var(--ink)} .aha-runko a{color:var(--accent-2)} .aha-lista{margin:0 0 16px;padding-left:20px;color:var(--muted);line-height:1.7} .aha-lista li{margin-bottom:7px} .aha-runko code{font-family:var(--mono);font-size:.92em;background:var(--surface-2); padding:1px 5px;border-radius:3px;color:var(--ink)} /* ── ALUESIVUT (article.aha-alue) ──────────────────────────────── MIKSI OMA LOHKO. Aluesivut renderöityivät selaimen raakatyyleillä: murupolku oli numeroitu lista ja taulukot viivattomia pötköjä, koska teeman taulukkotyylit oli kirjoitettu vain .aha-runko- ja .aha-taulu-luokille, joita aluesivu ei käytä (Petri 21.8.2026: "tee näistä visuaalisesti yksinkertaisemmat ja siistimmät"). Periaate: yksi lukumitta, hiljainen murupolku, taulukot joissa numerot oikealla ja hiusviivat riveillä — ei laatikoita laatikoiden sisällä. */ article.aha-alue{max-width:76ch;margin:0 auto} /* KAKSI PALSTAA DESKTOPILLA (Petri 21.8.2026). Kärki ja havainnot pysyvät yhdessä lukumitassa sivun yläosassa; sen alla sisältö jakautuu: pääpalsta kantaa datan, kylkipalsta menetelmän, UKK:n ja jatkolinkit. Sivusta tulee noin puolet lyhyempi ja jatkolinkit nousevat näkyviin ilman vieritystä taulukon ohi. Palstat vaativat leveämmän mitan kuin 76ch, joten artikkeli levenee vain silloin kun palstat ovat käytössä. */ @media (min-width:1000px){ article.aha-alue{max-width:1080px} .aha-tekstit{display:grid;grid-template-columns:1fr 1fr;gap:18px; align-items:start} .aha-kylki h2+*{margin-top:8px} .aha-kylki>*+h2{margin-top:30px} .aha-kylki p,.aha-kylki li{font-size:var(--step--1)} .aha-kylki .aha-jatko{margin-top:30px;padding-top:18px} /* Kärki, havainnot ja h1 pysyvät kapeana lukupalstana vaikka artikkeli levenee — pitkä rivi on huono luettava. */ article.aha-alue>h1,article.aha-alue>.aha-karki, article.aha-alue>.aha-havainnot,article.aha-alue>.aha-murut, article.aha-alue>p{max-width:70ch} } .aha-paa>*:first-child{margin-top:0} /* Lähde haitarissa: pieni rivi, joka avautuu klikkaamalla. Teksti on DOMissa aina — hakukone ja ruudunlukija saavat sen avaamattakin. */ .lahde-avaa{margin:2px 0 22px} .lahde-avaa summary{cursor:pointer;list-style:none;font-size:var(--step--1); color:var(--faint);display:inline-flex;align-items:center;gap:6px; padding:2px 0} .lahde-avaa summary::-webkit-details-marker{display:none} .lahde-avaa summary::before{content:'+';color:var(--accent-2);font-weight:700} .lahde-avaa[open] summary::before{content:'−'} .lahde-avaa summary:hover{color:var(--accent-2)} .lahde-avaa .lahde{margin-top:8px} /* Pitkän taulukon tiivistys: rivit 13→ piiloon kunnes nappia painetaan. Ilman JS:ää .kiinni-luokkaa ei lisätä, joten lista on kokonaan auki eikä mitään jää saavuttamattomiin. */ table.aha-tiivis.kiinni tr.aha-lisa{display:none} .aha-nayta-lisaa{font:inherit;font-size:var(--step--1);font-weight:650; cursor:pointer;background:none;border:1px solid var(--hair-strong); color:var(--accent-2);border-radius:var(--r-s);padding:9px 16px; margin:2px 0 20px} .aha-nayta-lisaa:hover{border-color:var(--accent-2);background:var(--surface-2)} article.aha-alue h1{font-size:var(--step-3);margin:6px 0 16px} article.aha-alue h2{margin:40px 0 12px;font-size:var(--step-1)} article.aha-alue p{color:var(--muted);line-height:1.7;max-width:70ch} article.aha-alue p.aha-karki{color:var(--ink);font-size:var(--step-1); line-height:1.55;font-weight:500;margin:0 0 26px;max-width:66ch} article.aha-alue a{color:var(--accent-2);text-decoration:none} article.aha-alue a:hover{text-decoration:underline;text-underline-offset:3px} /* Murupolku: hiljainen rivi, ei lista. */ .aha-murut ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px; margin:0 0 6px;padding:0;font-size:var(--step--1);color:var(--faint)} .aha-murut li{display:flex;align-items:center;gap:4px} .aha-murut li+li::before{content:'›';color:var(--hair-strong)} .aha-murut a{color:var(--faint)} .aha-murut a:hover{color:var(--accent-2)} /* Taulukot: numerot oikealle, hiusviivat, ei kehyksiä. */ article.aha-alue table{width:100%;border-collapse:collapse; margin:6px 0 10px;font-size:var(--step--1); font-variant-numeric:tabular-nums} article.aha-alue th,article.aha-alue td{padding:9px 14px 9px 0; border-bottom:1px solid var(--hair);text-align:left;vertical-align:top; color:var(--muted);line-height:1.5} article.aha-alue th{color:var(--faint);font-size:var(--label); text-transform:uppercase;letter-spacing:.06em;font-weight:650; white-space:nowrap} article.aha-alue th:last-child,article.aha-alue td:last-child{padding-right:0} /* Numerosarakkeet (kaikki paitsi ensimmäinen nimi-sarake) oikealle — luvut lukee sarakkeena vain kun ykköset ovat kohdakkain. */ article.aha-alue th:not(:first-child), article.aha-alue td:not(:first-child){text-align:right;white-space:nowrap} article.aha-alue td:first-child{color:var(--ink)} article.aha-alue tbody tr:hover td{background:var(--surface-2)} /* Lajiteltavan taulukon otsikot ovat nappeja — näytetään se. */ .aha-lajiteltava th{cursor:pointer;user-select:none} .aha-lajiteltava th:hover{color:var(--accent-2)} .aha-varoitus{font-size:var(--step--1);color:var(--warn); border:1px solid var(--hair);border-radius:var(--r-s); padding:12px 14px;margin:0 0 18px;max-width:70ch} article.aha-alue .lahde,article.aha-alue .aha-lahde{ font-size:var(--step--1);color:var(--faint); border-left:2px solid var(--hair-strong);padding-left:12px; margin:-2px 0 22px;max-width:70ch} /* Jatkolinkit ja naapurit: siisti pystylista ilman laatikkoa. */ .aha-jatko{margin-top:40px;padding-top:20px;border-top:1px solid var(--hair)} .aha-jatko h2{margin:0 0 10px;font-size:var(--step-0)} .aha-jatko ul{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:8px;font-size:var(--step--1)} .aha-paikallinen ul{list-style:none;margin:8px 0 0;padding:0; display:flex;flex-wrap:wrap;gap:8px 14px;font-size:var(--step--1)} /* ── aluesivun havaintolohko ───────────────────────────────────── MIKSI LUETTELO EIKÄ LEIPÄTEKSTIÄ. Havaintoja on nolla, yksi, kaksi tai kolme, ja ne ovat toisistaan riippumattomia päätelmiä samasta datasta. Kappaleena ne vaatisivat sidesanoja, joita ei ole — luettelo kertoo rakenteen rehellisesti: tässä on se, mitä luvuista voi sanoa. Lohko on visuaalisesti hillitty. Se seuraa heti kärkilausetta, ja jos se huutaisi kovempaa kuin taulukot, sivu näyttäisi väittävän enemmän kuin se mittaa. */ .aha-havainnot{margin:0 0 34px;padding:2px 0 2px 18px; border-left:3px solid var(--accent-2)} .aha-havainnot h2{margin:0 0 10px;font-size:var(--step-0)} .aha-havainnot ul{margin:0;padding:0;list-style:none;display:flex; flex-direction:column;gap:10px} .aha-havainnot li{color:var(--muted);line-height:1.65;max-width:76ch; padding-left:16px;position:relative} .aha-havainnot li::before{content:'';position:absolute;left:0;top:.65em; width:6px;height:6px;border-radius:50%;background:var(--accent-2)} .aha-taulu-kaari{overflow-x:auto;margin:0 0 20px} .aha-taulu{border-collapse:collapse;width:100%;font-size:var(--step--1)} .aha-taulu th,.aha-taulu td{text-align:left;vertical-align:top;padding:10px 14px 10px 0; border-bottom:1px solid var(--hair);color:var(--muted);line-height:1.6} .aha-taulu th{color:var(--faint);font-family:var(--mono);font-size:var(--label); text-transform:uppercase;letter-spacing:.06em;font-weight:600;white-space:nowrap} .aha-taulu td b{color:var(--ink)} .aha-paivays{margin-top:34px;padding-top:18px;border-top:1px solid var(--hair); font-size:var(--step--1);color:var(--faint)} /* ── jatkopolut (etusivun loppu) ───────────────────────────────── Kaksi korttia, kaksi aitoa suuntaa: kilpailutus tai itsemyynti + kuvaus. Kortit ovat linkkejä kokonaisuudessaan — otsikko, seloste ja kohdeosoite. Ulkoinen kohde sanotaan ääneen (em-rivi), koska lukijan pitää tietää siirtyvänsä toiselle sivustolle. */ /* ── oppaan lähdeluettelo ──────────────────────────────────────────── MIKSI OMA LOHKO EIKÄ ALAVIITE. Sivuston lupaus on, että luvun voi tarkistaa itse, ja lukija joka haluaa tarkistaa etsii luetteloa — ei prosaan siroteltuja linkkejä. Luettelo on siksi rungon lopussa omana osionaan ja ennen UKK:ta: se päättää väitteet, ei sivua. Sävy on hillitty. Lähde ei kilpaile leipätekstin kanssa, mutta se ei myöskään ole piilotettu — linkki on aksenttivärillä, koska sitä on tarkoitus painaa. */ .aha-lahteet{margin:38px 0 0;padding-top:20px;border-top:1px solid var(--hair)} .aha-lahteet h2{margin:0 0 8px;font-size:var(--step-0)} .aha-lahteet>p{margin:0 0 12px;font-size:var(--step--1);color:var(--faint); max-width:70ch;line-height:1.6} .aha-lahteet ul{margin:0;padding:0;list-style:none;display:flex; flex-direction:column;gap:8px} .aha-lahteet li{font-size:var(--step--1);color:var(--muted);line-height:1.6; padding-left:14px;border-left:2px solid var(--hair);max-width:78ch} .aha-lahteet li:has(a:hover),.aha-lahteet li:has(a:focus-visible){ border-left-color:var(--accent-2)} .aha-lahteet a{color:var(--accent-2)} /* ── yhteydenottolomake ────────────────────────────────────────────── Sivuston tärkein lomake, ja siksi se on samannäköinen kuin laskuri: samat lokerot, samat pilleriruudut, sama Seuraava-kieli. Myyjä on juuri täyttänyt laskurin, eikä hänen pidä joutua opettelemaan toista käyttöliittymää siinä kohdassa, jossa hän luovuttaa yhteystietonsa. */ .liidi-johdanto{color:var(--muted);font-size:var(--step--1); max-width:68ch;margin:0 0 18px} .liidi-kentta{margin-top:14px} .liidi-kentta input,.liidi-kentta textarea{width:100%;font:inherit; color:var(--ink);background:var(--surface);border:1px solid var(--hair-strong); border-radius:var(--r);padding:11px 13px} .liidi-kentta textarea{resize:vertical;min-height:76px;line-height:1.5} .liidi-kentta input:focus-visible,.liidi-kentta textarea:focus-visible{ border-color:var(--accent)} .liidi-kentta .q-apu{margin-top:6px} /* Kolme kenttää rinnakkain vain kun ne mahtuvat: nimi, puhelin ja sähköposti ovat yksi ajatus, mutta puristettuina ne ovat kolme liian kapeaa kenttää. */ .liidi-rivi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .liidi-rivi .liidi-kentta{margin-top:0} @media (max-width:760px){.liidi-rivi{grid-template-columns:1fr}} .liidi-valiotsikko{margin:28px 0 0;padding-top:20px; border-top:1px solid var(--hair);font-size:var(--step-1)} .liidi-luvat{display:flex;flex-direction:column;gap:8px;margin-top:16px} .liidi-luvat .rasti{text-align:left;align-items:flex-start} .liidi-puuttuu:not(:empty){margin-bottom:4px} /* ── pakollinen hyväksyntä ─────────────────────────────────────────── Ainoa ruutu, jota ilman pyyntö ei lähde. Se ei saa näyttää samalta kuin sen alla olevat vapaaehtoiset toiveet, koska se on päätös eikä valinta: kehys ja pohjasävy erottavat sen ilman että mikään huutaa. Ruutu on oma nappinsa, koska tekstin sisällä on linkki ehtoihin —