/* ========================================================================= OEF ETUSIVU, LOHKO F · JAETTU POHJA (14.9.2026) ========================================================================= TAMA TIEDOSTO EI OLE SUUNTA. Se on se osa etusivun korjausta joka on SAMA riippumatta siita minka suunnan Dani valitsee, ja se on eristetty omaan tiedostoonsa yhdesta syysta: jos jokainen kolmesta suunnasta sisaltaisi omat kopionsa naista, kuvavertailu mittaisi kolmea eri toteutusta samasta korjauksesta eika kolmea eri IDEAA. Nyt suuntien valinen ero kuvassa on tasan se mita suunta tekee, ei enempaa. KENELLE: vain `body.sivu--etusivu-a|b|c` eli kolme prototyyppia hakemistossa proto/. `index.html` ja `contact.html` EIVAT lataa tata tiedostoa lainkaan, joten vuotamattomuus on rakenteellinen eika nojaa siihen etta jokainen tuleva rivi muistetaan juurittaa. Sama ratkaisu kuin lohko E:ssa. LATAUSJARJESTYS: styles.css -> oef-tokens.css -> oef-typo.css -> TAMA -> suunnan oma tiedosto. Ei yhtaan !importantia. MITA TAALLA KORJATAAN, JA JOKAINEN ON MITATTU VIKA SUUNNITELMAN §2:STA: 1. lasikortti = 4 efektia, budjetti on 2 2. kategorian erottelu varilla (6 palvelukorttia 6 varissa) 3. ikonitiilet jotka jaivat tyhjiksi kun Material Icons poistettiin 4. kaksi rinnakkaista primary-CTA:ta samassa ruudussa 5. hero-taustakuvan alla oleva teksti ilman riittavaa overlayta ========================================================================= */ body[class*="sivu--etusivu-"] { /* Palstan mitta on yksi arvo koko sivulle. Lahtotilassa sivulla oli max-w-7xl (1280), max-w-6xl (1152), max-w-5xl (1024), max-w-4xl (896), max-w-3xl (768) ja max-w-2xl (672) sekaisin, eli kuusi eri palstaa ja siten kuusi eri alkulinjaa. Makuportti §2 mitta 4 sallii nelja. */ --palsta: 1160px; --kuja: var(--v6); } /* ========================================================================= §1 EFEKTIBUDJETTI: LASIKORTTI PURETAAN ------------------------------------------------------------------------- `.glass-card` on `background` + `backdrop-filter: blur(16px)` + `border` + `box-shadow` = NELJA efektia. Brandbook §11.4 sallii kaksi, ja kieltaa `backdrop-filter`in erikseen muualla kuin ylatunnisteessa, ankkurissa ja modaalissa. Jaljelle jaa pinta + hiusviiva. `backdrop-filter` ei ole vain budjettikysymys. Se luo uuden maalauskontekstin jokaiselle kortille, ja tallä sivulla kortteja on 20. Se on suoraan LCP-kustannus, ja se on mitattu tassa lohkossa. Ylatunniste, mobiilivalikko ja modaali SAAVAT pitaa blurinsa: ne ovat brandbookin nimenomaiset poikkeukset. Siksi valitsin on rajattu mainiin ja alatunnisteeseen eika kirjoitettu `.glass-card`-luokalle yksin. */ body[class*="sivu--etusivu-"] main .glass-card, body[class*="sivu--etusivu-"] footer .glass-card { background: var(--oef-pinta-1); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--oef-viiva); box-shadow: none; } /* Painotettu kortti on AINOA joka saa vahvemman reunan. Lahtotilassa paapalvelu ja "Suosituin"-hintakortti kayttivat `border-2 border-primary`, ja se on oikea mekanismi: se jatetaan, mutta se on nyt sivun ainoa poikkeus eika yksi neljasta kilpailevasta korostuksesta. */ body[class*="sivu--etusivu-"] main .border-2.border-primary { border-width: 1px; border-color: var(--toiminta); } /* ========================================================================= §2 KATEGORIAN EROTTELU VARILLA POIS (brandbook §11.3) ------------------------------------------------------------------------- Lahtotilassa kuudella palvelukortilla oli kuusi eri varia (syaani, vihrea, keltainen, sininen, purppura, oranssi) ilman etta vari tarkoitti mitaan. Keltaista, purppuraa ja sinista ei ole paletissa lainkaan, eika yksikaan niista ole merkityskartassa (§3.1). Merkityskartta tallä sivulla: valkoinen = itse vastaus (otsikko, luku) oranssi = TOIMINTA ja maaraaika (painike, linkki joka vie eteenpain) syaani = SITOVA EHTO. Etusivulla ei ole yhtaan sitovaa ehtoa, joten syaania EI kayteta tallä sivulla lainkaan. Tama on tarkoitus eika unohdus: vari jota ei tarvita ei saa esiintya. vihrea = toteutunut tila. Kaytossa tasan kolmessa kohdassa: CTA-osion kolme vahvistusriketta ("Ei sitovia sopimuksia"). slate = ihmisen kirjoittama kieli ja metatieto ========================================================================= */ body[class*="sivu--etusivu-"] main .text-yellow-400, body[class*="sivu--etusivu-"] main .text-blue-400, body[class*="sivu--etusivu-"] main .text-blue-500, body[class*="sivu--etusivu-"] main .text-purple-400, body[class*="sivu--etusivu-"] main .text-orange-400, body[class*="sivu--etusivu-"] main .text-accent { color: var(--teksti-1); } /* "Lue lisaa" -linkit: kuusi varia -> yksi. Oranssi, koska linkki joka vie eteenpain ON toimintaa. #FF9A4C = 9,14:1 pohjalla ja 8,24:1 kortilla. */ body[class*="sivu--etusivu-"] main a.text-accent, body[class*="sivu--etusivu-"] main a.text-green-400, body[class*="sivu--etusivu-"] main a.text-yellow-400, body[class*="sivu--etusivu-"] main a.text-blue-400, body[class*="sivu--etusivu-"] main a.text-purple-400, body[class*="sivu--etusivu-"] main a.text-orange-400 { color: var(--toiminta-linkki); } /* Vihrea sailyy vain vahvistuksessa: CTA-osion kolme check-riviä. */ body[class*="sivu--etusivu-"] main #cta .text-green-400 { color: var(--toteutunut); } /* Varilliset ikonitaustat (bg-green-400/10, bg-yellow-400/10, ...) katoavat §3:n mukana koska ne ovat tyhjia ikonitiilia. Ne jotka jaavat (esim. lippuvarit palvelualueosiossa) yhdenmukaistetaan pintaan. */ body[class*="sivu--etusivu-"] main .bg-white\/5 { background: var(--oef-pinta-1); } /* ========================================================================= §3 TYHJAT IKONITIILET POIS ------------------------------------------------------------------------- Prototyypeissa Material Icons -ligatuurit riisuttiin (tehtavanto sallii sen eksplisiittisesti): `solar_power` -> tyhja span, ligatuuri talteen `data-ikoni`-attribuuttiin. Tasta seuraa vika jota EI NAE koodista vaan vain kuvasta: ikonin ymparilla ollut 64x64 tai 80x80 pikselin varillinen tiili jaa paikalleen TYHJANA laatikkona. Sivulla niita on 23. Ne eivat ole sisaltoa vaan koristetta, joten ne romahdetaan. Valitsin on `:has(> span[data-ikoni]:only-child)` eika `.w-16.h-16`, koska `.w-14.h-14` on MYOS prosessiosion numeroympyra jossa on oikea sisalto (numerot 1-4). Muotoon perustuva valitsin osuisi siihen ja pyyhkisi prosessin numeroinnin pois. `:has()` osuu vain siihen mika on oikeasti tyhja. */ body[class*="sivu--etusivu-"] main span[data-ikoni], body[class*="sivu--etusivu-"] footer span[data-ikoni] { display: none; } body[class*="sivu--etusivu-"] main div:has(> span[data-ikoni]:only-child), body[class*="sivu--etusivu-"] footer div:has(> span[data-ikoni]:only-child) { display: none; } /* Kun ikoni katoaa listarivilta, `gap` jattaa roikkuvan valilyonnin rivin alkuun. Tama on sama perhe kuin [[inline-flex-syo-valilyonnin]]. */ body[class*="sivu--etusivu-"] main li:has(> span[data-ikoni]), body[class*="sivu--etusivu-"] main div.flex:has(> span[data-ikoni]) { gap: 0; } /* ========================================================================= §4 YKSI TAYTETTY PAINIKE PER RUUDULLINEN ------------------------------------------------------------------------- Suunnitelman §1.4: "Kaksi rinnakkaista primary-CTA:ta" on etusivun toiseksi pahin rakenteellinen vika heti lepotilan jalkeen. Mitattu lahtotila: CTA-osiossa on vierekkain `btn-primary` (oranssi taytto) ja `glass-card ... rounded-full font-bold` (lasikortti pillerina). Ne ovat samankokoisia, samalla rivilla ja samanpainoisia. Silma ei saa jarjestysta. Korjaus on painoluokka, ei poisto: toissijainen toiminto sailyy mutta se latoutuu hiusviivapainikkeena ilman tayttoa. Tekstia ei muuteta. */ body[class*="sivu--etusivu-"] main #cta a:not(.btn-primary) { background: transparent; border: 1px solid var(--oef-viiva); box-shadow: none; color: var(--teksti-2); } body[class*="sivu--etusivu-"] main #cta a:not(.btn-primary):hover { border-color: var(--teksti-3); color: var(--teksti-1); background: var(--oef-pinta-1); } /* Ylatunnisteen CTA on kolmas taytetty painike ja se on nakyvissa JOKAISESSA ruudullisessa, koska ylatunniste on kiinnitetty. Se tekee siita sivun painavimman toistuvan oranssin massan, ja sumennustestissa se kilpaili h1:n kanssa (mitattu lohko B:ssa). Hiusviivapainike sailyttaa toiminnon mutta ei kilpaile. */ body[class*="sivu--etusivu-"] header a.btn-primary { background: transparent; border: 1px solid var(--toiminta); color: var(--toiminta); box-shadow: none; } body[class*="sivu--etusivu-"] header a.btn-primary:hover { background: var(--toiminta-pinta); border-color: var(--toiminta-pinta); color: #fff; } /* Oranssit hehkuvarjot pois. `shadow-[0_12px_40px_rgb(255,92,0,0.6)]` on kolmas efekti taytetylla painikkeella (tausta + kulma + varjo), ja se on myos se saanto joka tasapelissa VOITTI fokusrenkaan lohko A:ssa. Renkaan korjaus tehtiin outlinella, mutta hehku itse on yha budjetin yli. */ body[class*="sivu--etusivu-"] main a[class*="shadow-["], body[class*="sivu--etusivu-"] main button[class*="shadow-["], body[class*="sivu--etusivu-"] header a[class*="shadow-["] { box-shadow: none; } /* `cta-pulse` on animaatio taytetylla painikkeella = kolmas efekti, ja brandbook §10 sallii yhden liikkuvan elementin per ruudullinen. Sivulla on kolme pulssaavaa painiketta. Ne pysahtyvat. Tama on myos kuvakaappauksen determinismin ehto: aareton animaatio tuottaa saman lahteen kolmella eri kuvatiivisteella jos sita ei jaadyteta. */ body[class*="sivu--etusivu-"] .cta-pulse { animation: none; } /* ========================================================================= §5 HERO-TAUSTAKUVA ------------------------------------------------------------------------- Kaikki kolme suuntaa poistavat hero-taustakuvan, ja se on YHTEINEN paatos eika suunnan valinta. Kolme perustetta, kaikki mitattavia: 1. VAIHTOTESTI (makuportti §1 testi 1). Kuva on Unsplashin photo-1545324418 "moderni kerrostalo". Se toimisi sellaisenaan rakennusliikkeelle, isannointitoimistolle, LVI-urakoitsijalle ja kiinteistovalittajalle. Kuva joka ei ole tasta yrityksesta ei voi olla taman yrityksen ensimmainen ruutu. 2. LCP. Kuva on 1920x1080 etahaku Unsplashin CDN:sta `fetchpriority=high` ja `loading=eager`, eli se on maaritelmallisesti LCP-kandidaatti ja se on kolmannen osapuolen verkkoyhteyden takana. Mitattu tassa lohkossa. 3. LEPOTILA. Sivun muste oli 95,7 % ja lepotila 4,3 % (raja >= 22 %). Yksittain suurin syy on juuri tama: kokoruudun kuva tayttaa ensimmaisen ruudun reunasta reunaan, jolloin sivulla ei ole yhtaan levahdyspaikkaa. Brandbook §11.5 kieltaa erikseen "tekstia suoraan kuvan paalla ilman 80-90 % tummaa overlayta". Nykyinen overlay on 0,80-0,90, eli se on saannon rajalla ja juuri siksi kuva on kaytannossa mutaa: se ei ole kuva vaan tumma tekstuuri. Kuva jota on pakko himmentaa 85 % ei tee tyota jonka takia se on siella. */ body[class*="sivu--etusivu-"] #hero > .absolute.inset-0.z-0 { display: none; } /* CTA-osion toinen taustakuva (`opacity-20 mix-blend-luminosity`) on sama tapaus: 1920x800 etahaku 20 prosentin nakyvyydella. */ body[class*="sivu--etusivu-"] main #cta > img { display: none; } /* ========================================================================= §6 PALSTA JA ALKULINJAT ------------------------------------------------------------------------- Kuusi eri `max-w-*` -arvoa -> yksi. Suunnat maarittavat AKSELIN (vasen vai keskitetty) omissa tiedostoissaan; tama saanto maarittaa vain LEVEYDEN, jotta kaikilla kolmella on sama mittatikku. */ body[class*="sivu--etusivu-"] main > section > div, body[class*="sivu--etusivu-"] main > div > div { max-width: var(--palsta); margin-left: auto; margin-right: auto; } /* ========================================================================= §7 KONTRASTI: KAKSI JAANNOSTA JOITA LOHKO A EI VOINUT KORJATA ------------------------------------------------------------------------- Lohko A korjasi varit tokenitasolla, mutta kaksi etusivun omaa tapausta jai: `opacity`-kaareet. Alfaa ei nae varista eika sita loyda etsi-ja-korvaamalla, ja se syo kontrastin vasta laskennassa. `.opacity-60` lahdeviiteosiossa: #7C8CA1 x 0,60 = 2,78:1 `.opacity-70` kumppanirivilla + `grayscale` Brandbook §3.4: alfa on sallittu pinnoille ja reunoille, ei tekstille. Jos haluat himmeamman tekstin, vaihda hex. */ body[class*="sivu--etusivu-"] main .opacity-60, body[class*="sivu--etusivu-"] main .opacity-70 { opacity: 1; } body[class*="sivu--etusivu-"] main .opacity-60 { color: var(--teksti-4); } body[class*="sivu--etusivu-"] main .grayscale { filter: none; } /* `.text-glow` on tekstivarjo oranssilla luvulla = toinen efekti luvun paalla, ja se sumentaa juuri sen glyfin jonka pitaisi olla tarkin. */ body[class*="sivu--etusivu-"] main .text-glow { text-shadow: none; } /* ========================================================================= §8 IKONIPOISTON KOLME SEURAUSTA JOTKA NAKYIVAT VAIN MOBIILIKUVASTA ------------------------------------------------------------------------- Material Icons -ligatuurien poisto on tehtavannon eksplisiittisesti sallima, ja se on oikea paatos: ligatuuri on tekstisolmu joka vaarentaa typoskaalan, ja kirjasin on renderointia estava lataus Googlen palvelimelle. MUTTA sivustolla on kolme paikkaa joissa ikoni on elementin AINOA sisalto, ja niissa poisto jattaa tyhjan painikkeen. Yksikaan mittari ei nayttanut tata: kontrasti, kulmat, paallekkaisyys ja tyhja tila olivat vihreat, koska tyhja painike on taysin kelvollinen elementti. Se nakyi vasta 390 px:n kuvasta, jossa ylatunnisteessa oli pelkka logo ilman valikkonappia. Jokainen kolmesta korjataan KAYTTAMALLA SIVUN OMAA SISALTOA, ei keksimalla uutta. Se on sama periaate kuin lohko E:n murupolku-kickerissa. */ /* 1. HAMPURILAISVALIKKO JA SULKUNAPPI piirretaan CSS:lla. Kolme viivaa ja risti ovat geometriaa, eivat kuvitusta, joten ne eivat tarvitse kirjasinta eivatka kuvatiedostoa. Span itse on keskiviiva, ::before ja ::after ylempi ja alempi. Kaksi efektia (tausta, tausta). */ body[class*="sivu--etusivu-"] #menuButton span[data-ikoni], body[class*="sivu--etusivu-"] #menuClose span[data-ikoni] { display: block; position: relative; width: 22px; height: 2px; margin: 11px 1px; background: currentColor; } body[class*="sivu--etusivu-"] #menuButton span[data-ikoni]::before, body[class*="sivu--etusivu-"] #menuButton span[data-ikoni]::after, body[class*="sivu--etusivu-"] #menuClose span[data-ikoni]::before, body[class*="sivu--etusivu-"] #menuClose span[data-ikoni]::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; } body[class*="sivu--etusivu-"] #menuButton span[data-ikoni]::before { top: -7px; } body[class*="sivu--etusivu-"] #menuButton span[data-ikoni]::after { top: 7px; } /* Sulkunappi: keskiviiva pois, kaksi vinoa jaljelle. */ body[class*="sivu--etusivu-"] #menuClose span[data-ikoni] { background: transparent; } body[class*="sivu--etusivu-"] #menuClose span[data-ikoni]::before { transform: rotate(45deg); } body[class*="sivu--etusivu-"] #menuClose span[data-ikoni]::after { transform: rotate(-45deg); } /* 2. MOBIILIN ALANAVIGAATIO oli KOKONAAN ikonipohjainen: viisi linkkia joissa ei ole tekstisolmua lainkaan, vain `aria-label`. Ikonin poiston jalkeen palkki oli tyhja pilleri, ja se nakyi kuvassa tasan sellaisena. Teksti otetaan `aria-label`ista. Se EI ole uutta sisaltoa: se on sama sana jonka ruudunlukija jo lukee, ja jonka sivu siis jo kantaa. Samalla korjaantuu vanha saavutettavuusvika, jossa navigaation merkitys oli pelkan ikoniglyfin varassa (brandbook §11.3: vari tai muoto ei saa olla merkityksen ainoa kantaja). */ body[class*="sivu--etusivu-"] .no-print nav a[aria-label]::after { content: attr(aria-label); font-family: var(--f-kone); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } body[class*="sivu--etusivu-"] .no-print nav a[aria-label] { display: flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--v2); border-radius: var(--r-pieni); } /* Alanavigaation pilleri: `rounded-full` on jo kartoitettu 6 px:iin lohko C:ssa, mutta lasikortti on yha 4 efektia. Sama purku kuin §1. */ body[class*="sivu--etusivu-"] .no-print nav.glass-card { background: var(--oef-bg-syva); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--oef-viiva); box-shadow: none; } /* 3. LISTARIVIEN JA PAINIKKEIDEN ikonit katoavat ilman jalkia, koska niissa on aina tekstisolmu ikonin vieressa. Ne EIVAT tarvitse korvausta: rivi "Hankesuunnittelu alusta loppuun" lukee tasan yhta hyvin ilman check-merkkia. Poistotesti (makuportti §1 testi 3) ajettiin ja mitaan ei katosi. Tama on kirjattu tanne siksi etta se on PAATOS eika unohdus. */