/* TARJOUSAPURIN OMA TYYLITIEDOSTO. * * Erillaan style.css:sta kahdesta syysta: style.css on toisen istunnon * varauksessa, ja apurin saannot eivat kuulu sivuston yhteiseen tyyliin * ennen kuin sivusta on paatetty. Lataus on yksi pyynto lisaa vain * talla yhdella sivulla. * * KAIKKI VARIT OVAT style.css:n tokeneita. Erityisesti: * * TAYTETTY accent-pinta -> background: var(--accent) * color: var(--on-accent) * * EIKA KOSKAAN color:#fff. MITATTU: tummassa teemassa --accent on * #b9cbf2 (vaalea sininen) ja --on-accent #0c1424 (tumma). Valkoinen * teksti tuolla pohjalla on 1,63:1 — vartija nappasi saman virheen * toiselta istunnolta tassa projektissa. * * EI position:fixed EIKA sticky. Tuotannon ylapalkki vie 190 px ja * kelluva alapalkki 78 px pohjasta; kolmas kiinnitetty kerros soisi * lopun kaistasta mobiilissa. * * EI overflow:hidden siruilla. Luonnoksessa fokusrengas leikkautui * kolmelta sivulta kaikissa kahdeksassa sirunapissa, ja jaljelle * jaanyt pystyviiva nayttaa tekstikursorilta. */ .apuri { padding-bottom: 40px; } /* NÄPPÄIMISTÖFOKUS EI JÄÄ PALKKIEN ALLE (WCAG 2.4.11, katselmus kierros 2, 5/5 B1). MITATTU: Shift+Tab ylöspäin jätti sirun ×:n tarttuvan yläpalkin alle kaikilla leveyksillä, ja Tab alaspäin jätti tyhjän tilan paluulinkit alapalkin alle 320–430 px:llä. Selain ei vieritä, koska kohde on ruudulla — palkki vain peittää sen. scroll-margin kertoo selaimelle, että palkkien alla oleva kaistale ei ole näkyvää aluetta. Alapalkki on käytössä alle 900 px:n VAIN asennetussa sovelluksessa (html.pwa, style.css 26.9.2026); selaimessa --alapalkki-korkeus on 0, ja alamarginaali väistää vain "Sivun alkuun" -napin. YLÄREUNA ON html:n scroll-paddingissa, ei elementin marginissa (katselmus 5d05977, B-1). MITATTU: #lause-kenttä ei noudattanut scroll-marginia, vaan jäi Shift+Tabilla yläpalkin alle kaikilla leveyksillä. Tämä tiedosto ladataan vain apurisivulla. VAIN KUN FOKUS ON SISÄLLÖSSÄ (katselmus 2892732, B1): ehdoton juuren padding merkitsi ylimmät 149/204 px näkymättömäksi, ja tarttuva yläpalkki on aina siinä kaistassa. MITATTU: yläpalkin hakukentän klikkaus vieritti sivua −384…−488 px. Yläpalkin fokus ei ole #mainissa, joten sääntö ei koske sitä. VAIN NÄPPÄIMISTÖFOKUS (katselmus cdc9cd0, B1): kortti avautuu uuteen välilehteen, joten hiiriklikkauksen fokus JÄÄ korttiin, ja :focus- säännöllä yläpalkin klikkaus hyppäytti sivua palattaessa yhä −384…−488 px (MITATTU Chromium ja WebKit). :focus-visible kattaa näppäimistön ja tekstikentän; jäänne: #lause fokuksessa -> yläpalkin klikkaus hyppää. KORTIN OMA MARGINAALI POIS (B2): .deal-cardin scroll-margin-top (style.css) summautui paddingiin, ja matalalla ruudulla (640x360) Tab-fokusoidusta kortista näkyi palkkien välissä 0 px. ALAREUNA väistää myös "Sivun alkuun" -napin (B-2). MITATTU: alin "Seuraava sivu" jäi napin alle 320–390 px:llä. Nappi on style.cssissä alapalkki + 24 px alhaalta ja 46 px korkea; +14 px väli. */ html:has(#main:focus-visible, #main :focus-visible) { scroll-padding-top: calc(var(--topbar-h) + 14px); } .apuri .deal-card { scroll-margin-top: 0; } .apuri a, .apuri button, .apuri textarea { scroll-margin-bottom: 24px; } @media (max-width: 899px) { .apuri a, .apuri button, .apuri textarea { scroll-margin-bottom: calc(var(--alapalkki-korkeus) + 84px + env(safe-area-inset-bottom, 0px)); } } /* PITKÄ YHDYSSANA EI VIERITÄ SIVUA VAAKASUUNTAAN (katselmus kierros 2, 5/5 C1). MITATTU 320 px:llä: 24 merkin sana -> scrollWidth 332, 72 merkkiä -> 734. Kävijän oma sana näkyy siruissa, ohitettujen rivillä ja vaihtoehdoissa. */ .apuri-vaihtoehdot b { overflow-wrap: anywhere; } .apuri-ohitetut, .apuri-siru__sana { overflow-wrap: anywhere; } /* --- OTSIKKO: ✦ + nimi + Beta (design 26.9.2026) --- */ .apuri-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .apuri-h1__ikoni { display: inline-flex; color: var(--accent); } .apuri-beta-merkki { padding: 3px 10px; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; line-height: 1.4; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--line-hover); border-radius: 999px; } /* --- VASTAUSRIVI --- sirujen alla, ks. templaatin perustelu. */ .apuri-vastaus { margin: 16px 0 14px; font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 600; color: var(--text); line-height: 1.35; } /* --- LOMAKE --- */ .apuri-lomake { max-width: 760px; margin: 14px 0 0; } .apuri-label { display: block; margin-bottom: 8px; font-size: var(--fs-md); font-weight: 600; color: var(--text); } /* KENTTÄ JA HAE SAMASSA PYÖREÄSSÄ KEHYKSESSÄ, kuten yläpalkin hakupilleri (design 26.9.2026): ennen sivulla oli kaksi eri hakukenttätyyliä. REUNA ON KEHYKSESSÄ, ei tekstialueessa, ja sen kontrasti vartioidaan kehyksestä (WCAG 1.4.11, test_hakukentan_reuna_erottuu). Fokus näkyy kehyksessä. */ .apuri-rivi { display: flex; gap: 8px; align-items: flex-end; padding: 6px 6px 6px 18px; background: var(--surface-sunken); border: 1px solid var(--text-muted); border-radius: 28px; } .apuri-rivi:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .apuri-rivi textarea { flex: 1; min-width: 0; /* min-height 44 px: kosketuskohteen alaraja, ja kentta on tamän sivun ainoa varsinainen syote (kapealla 52 px, ks. KAPEA RUUTU). */ min-height: 44px; padding: 10px 4px; font: inherit; font-size: var(--fs-xl); line-height: 1.4; color: var(--text); background: transparent; /* Kontrollin reunalta vaaditaan 3:1 seka kentan etta ympariston taustaa vasten (WCAG 1.4.11). --line-hover EI RIITTANYT, vaikka tama kommentti vaitti niin: MITATTU (katselmus kierros 2, 5/5 C2) 2,11:1 vaaleassa ja 2,35:1 tummassa. --text-muted on sivuston oma toissijaisen tekstin vari, ja se ylittaa 3:1 molemmissa teemoissa (vartija test_hakukentan_reuna_erottuu). */ border: 0; border-radius: 0; outline: none; resize: none; /* KENTTA KASVAA LAUSEEN MUKANA (katselmus B3, 21.9.2026: 194 merkin lause leikkautui 7/8 leveydella). Selain jolla ominaisuutta ei ole kayttaa palvelimen laskemaa rows-arvoa (hakuapuri._lauseen_rivit). */ field-sizing: content; } /* VENYTYSKAHVA SELAIMILLE JOTKA EIVÄT KASVATA KENTTÄÄ (kokonaiskatselmus, kok-ui C2). Design vaihtoi `resize: vertical` -> `none`. MITATTU: kun lause tulee palvelimelta, `rows` riittää ilman field-sizingiä (132 merkkiä: 7 riviä, 173 px), mutta KIRJOITETTU pitkä lause jää yksiriviseen kenttään. Chromen ulkoasu ei muutu. */ @supports not (field-sizing: content) { .apuri-rivi textarea { resize: vertical; } } /* TYHJENNYSNAPPI (26.9.2026). Kaare vie tekstialueen paikan rivilla; tekstialue tayttaa sen. Nappi on oikeassa YLAkulmassa eika pystykeskella, koska kentta kasvaa lauseen mukana usealle riville. 44 px kuten apurin muut kosketuskohteet (sirun x); sisennys pitaa tekstin napin vasemmalla puolella. Perustyyli .haku-tyhjenna (style.css). Vartija test_browser_apuri_tyhjenna.py. */ .apuri-kentta { position: relative; flex: 1; min-width: 0; } .apuri-rivi .apuri-kentta textarea { display: block; width: 100%; padding-right: 50px; } /* top 0: kentän vähimmäiskorkeus on 44 px kuten napin, joten 2 px alempana nappi ulottui kentän alareunan yli (MITATTU 1280 px, 27.9.). */ .apuri-tyhjenna { top: 0; right: 2px; transform: none; width: 44px; height: 44px; } /* Selaimen oma placeholder-vari on #757575, joka EI seuraa teemaa: mitattu 4,18:1 vaaleassa ja 3,30:1 tummassa. --text-muted seuraa. */ .apuri-rivi textarea::placeholder { color: var(--text-muted); opacity: 1; } .apuri-hae { flex: 0 0 auto; min-height: 44px; padding: 10px 22px; font: inherit; font-weight: 600; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; cursor: pointer; } .apuri-beta { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } /* --- EHDOTUSKORTIT (ensikäynti ja roskahaku) --- kortteja eikä siruja: siruina ne näyttivät samalta kuin "Haen:"-rivin rajaukset. */ .apuri-esimerkit { display: block; max-width: 760px; margin: 22px 0 0; } .apuri-esimerkit__otsake { display: block; margin: 0 0 10px; font-size: var(--fs-md); /* 600 kuten designin kuvassa 1_ensikaynti (katselmus 757d3c9, ds-ui D3). */ font-weight: 600; color: var(--text); } .apuri-esimerkit--roska .apuri-esimerkit__otsake { font-size: var(--fs-lg); font-weight: 600; } .apuri-ehdotukset { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .apuri-ehdotus { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 14px 16px; font-size: var(--fs-md); line-height: 1.4; color: var(--text); text-decoration: none; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .apuri-ehdotus:hover { border-color: var(--accent); } .apuri-ehdotus svg { flex: 0 0 auto; color: var(--accent); } /* --- KEVYT KESKUSTELU (design kohta 10) --- */ .apuri-keskustelu { max-width: 760px; margin: 20px 0 0; } .apuri-kysymys { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: var(--fs-lg); font-weight: 600; line-height: 1.45; color: var(--text); } .apuri-kysymys__ikoni { display: inline-flex; flex: 0 0 auto; margin-top: 2px; color: var(--accent); } .apuri-vastauskortit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .apuri-vastauskortti { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 14px 16px; font-size: var(--fs-md); font-weight: 600; color: var(--text); text-decoration: none; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .apuri-vastauskortti:hover { border-color: var(--accent); } .apuri-vastauskortti__maara { font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ✦ "Haen:"-rivillä kun tekoäly tulkitsi (design 26.9.2026). */ .apuri-sirut__ai { display: inline-flex; margin-right: 5px; color: var(--accent); vertical-align: -3px; } /* --- SIRURIVI ("Haen: …") --- */ .apuri-sirut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; padding: 0; list-style: none; } /* Rivin otsake on
  • , koska