/* ============================================================================= OEF sivuperusta · brandbook v2.0 §1-§7 Luotu 16.9.2026, ilmepäivityksen LOHKO G, OSA 1. MITÄ TÄMÄ ON. Kolme sivua jäi ilmepäivityksen ulkopuolelle: contact.html, energiaopas.html ja 404.html. Ne eivät ole palvelusivuja eivätkä VARKE-tekstisivuja, joten kummankaan olemassa olevan kerroksen sapluuna ei sovi niihin. Tämä tiedosto on se osa järjestelmää joka on YHTEINEN kaikille kolmelle: yksi akseli, yksi palsta, merkityskartta ja turva-alueet. Sivukohtainen rytmi on erikseen tiedostossa `oef-sivu-roolit.css`. MIKSI EI PALVELUSIVUJEN KERROSTA SELLAISENAAN. Se mitattiin, ei arvattu. Prototyyppi `proto/yhteys-b-sapluuna.html` lataa `oef-palvelu-sivu.css`:n contact.html:n päälle. Akseli korjaantuu (10 alkulinjaa -> 4, h1 x 378 -> 164), mutta kontrastirikkeitä tulee 0 -> 3, ja kaikki kolme ovat samaa sääntöä: body.sivu--palvelu main li .material-icons-round { color: var(--oef-viiva) } Palvelusivuilla listan ikoni on luettelomerkki eli koriste, ja --oef-viiva (rgba(255,255,255,0.10)) on sille oikea arvo. contact.html:ssa samat `li > .material-icons-round` -elementit ovat `check_circle`-merkkejä jotka kantavat kolmen lupauksen merkityksen ("4 nopeaa kysymystä kohteestasi", "Saat suositellun palvelun...", "Päätös pyytää tarjousta on sinun"). Mitattu suhde 1,28:1, vaadittu 4,5:1. Kerros ei siis ole siirrettävissä: se koodaa oletuksen siitä mitä listan ikoni TARKOITTAA, ja tällä sivulla oletus on väärä. Siksi perusta ottaa merkityskartasta kaksi sääntöä kolmesta ja jättää luettelomerkkisäännön pois. VUOTAMATTOMUUS ON RAKENTEELLINEN, EI TARKKUUTEEN PERUSTUVA. Sama menetelmä kuin lohko E:ssä, kolmella tasolla: 1. Oma tiedosto. `css/styles.css`:ään ei kosketa. 2. Luokkajuuritus. Jokainen sääntö alkaa `body.sivu-oef`. 3. Latauksen rajaus. `index.html` ja 15 muuta sivua EIVÄT lataa tätä tiedostoa lainkaan, joten juurittamatonkaan rivi ei voi osua niihin. LATAUSJÄRJESTYS: oef-tokens.css -> oef-typo.css -> TÄMÄ -> oef-sivu-roolit.css. Ei yhtään !importantia. ========================================================================== */ /* ============================================================================= §1 YKSI AKSELI JA YKSI PALSTA ----------------------------------------------------------------------------- Mitattu lähtötila 1440 px:llä (makuportti §2 mitta 4 sallii neljä alkulinjaa): contact.html 10 alkulinjaa, kantavia 4, päälinja 177, h1 x 378 energiaopas.html 24 alkulinjaa, kantavia 10, päälinja 80, palsta 1280 404.html 1 alkulinja, päälinja 448 (keskitetty) Järjestelmän muut sivut: pääviiva 164 px, palsta 803-1112 px. Kolme sivua alkaa siis kolmelta eri linjalta, eikä yksikään niistä ole järjestelmän linja. Se on se yksi asia jonka näkee ilman mittaria kun sivuja selaa peräkkäin. Palsta tulee YHDESTÄ säännöstä. Sivujen omat `max-w-4xl` (896), `max-w-6xl` (1152) ja `max-w-7xl` (1280) ovat juuri se mekanismi joka tuottaa useita linjoja: sama sivu vaihtaa leveyttä osiosta toiseen. ========================================================================== */ body.sivu-oef { --palsta: 1160px; } /* PALSTA OMISTAA VAAKAMITAN, EI OSIO. Jarjestys on sama kuin oef-palvelu-sivu.css §1:ssa ja se tuottaa saman alkulinjan: kaari on 1160 px keskitettyna (1440 px:lla 140..1300) ja sen oma pehmuste 24 px vie sisallon linjalle 164. Osion oma `px-6` nollataan, muuten pehmusteet summautuvat ja alkulinja siirtyy 24 px osiosta riippuen. KOKEILTU JA HYLATTY: kaanteinen jarjestys (pehmuste osiolle, kaari pelkka leveys). Se korjaa kaarittamattoman lapsen automaattisesti, mutta siirtaa alkulinjan 164 -> 140 px, eli erilleen jarjestelman muista sivuista. Kaarittamaton lapsi on yhden sivun yhden osion asia ja se korjataan lahteessa; alkulinja on koko sivuston asia. */ body.sivu-oef main > section > div, body.sivu-oef main > div > div { max-width: var(--palsta); margin-left: auto; margin-right: auto; padding-left: var(--v6); padding-right: var(--v6); } body.sivu-oef main > section, body.sivu-oef main > div { padding-left: 0; padding-right: 0; } /* OSIO JOKA ON ITSE KAARI. energiaopas.html:n osiot 5-9 on kirjoitettu muodossa `
`, eli osio kantaa seka leveyden etta pehmusteen eika sen sisalla ole kaaretta lainkaan. Saanto yllä nollaisi silloin ainoan pehmusteen, ja osion suorat tekstilapset (mitattu: `

Kenelle palvelumme ovat ajankohtaisia?

`) latoutuisivat kiinni ruudun reunaan. 390 px:lla otsikko oli 0..390. Kaari tunnistetaan `max-w-*`-luokasta eika sivukohtaisesta valitsimesta, jolloin sama kuvio muualla korjaantuu ilman uutta saantoa. Sisempi kaari (jos sellainen on) menettaa oman mittansa, muuten palsta laskettaisiin kahteen kertaan. Tarkkuus (0,2,2) > (0,1,2), ei !importantia. */ body.sivu-oef main > section[class*="max-w-"], body.sivu-oef main > div[class*="max-w-"] { max-width: var(--palsta); margin-left: auto; margin-right: auto; padding-left: var(--v6); padding-right: var(--v6); } body.sivu-oef main > section[class*="max-w-"] > div, body.sivu-oef main > div[class*="max-w-"] > div { max-width: none; padding-left: 0; padding-right: 0; } /* POIKKEUS: absoluuttisesti aseteltu kaare ei ole palsta vaan tausta. energiaopas.html:n herossa on `
` jonka sisalla on koko osion levyinen taustakuva. Palstasaanto antaisi sille max-widthin, ja koska `left:0; right:0` + `margin-inline:auto` keskittaa absoluuttisen laatikon, taustakuva kutistuisi 1160 px:iin osion keskelle ja osion reunoihin jaisi kaksi tyhjaa kaistaletta. Mikaan mitta ei nayttaisi sita: kontrasti, alkulinjat ja paallekkaisyys pysyisivat ennallaan. */ body.sivu-oef main > section > div.absolute, body.sivu-oef main > div > div.absolute { max-width: none; padding-left: 0; padding-right: 0; } /* Keskitys puretaan kahdessa paikassa. Pelkkä `text-align` EI riitä: oef-typo.css antaa otsikoille max-widthin ja keskittää kapean laatikon säännöllä `html .text-center h1 { margin-inline: auto }` = (0,2,1). Kumoaminen vaatii (0,3,1). Ei !importantia. RAJAUS ON LOHKO I:N: `.text-center` ja `.mx-auto` ovat LOHKOTASON sijoitusta ja vasen akseli saa kumota ne. `.justify-center` ja `.items-center` ovat KOMPONENTIN SISÄSUUNTAUSTA eikä sivun akselilla ole niihin asiaa, joten niitä ei kumota täällä eikä missään. Portti: test/keskitysapuluokat.test.js. */ body.sivu-oef main .text-center, body.sivu-oef main .sm\:text-center, body.sivu-oef main .lg\:text-center { text-align: left; } body.sivu-oef main .text-center h1, body.sivu-oef main .text-center h2, body.sivu-oef main .text-center h3, body.sivu-oef main .text-center p, body.sivu-oef main h1.text-center, body.sivu-oef main h2.text-center, body.sivu-oef main h3.text-center { margin-inline: 0; } /* ============================================================================= §2 MERKITYSKARTTA: yksi merkitys per väri ----------------------------------------------------------------------------- Koristeikoni on metatietoa ja saa metatiedon värin. Toiminnan SISÄLLÄ oleva ikoni perii napin oman värin, koska se on osa toimintoa eikä oma merkkinsä. contact.html:n yhteystietopalkissa on neljä aksenttioranssia ikonia rivissä (sijainti, puhelin, sähköposti, aukioloaika). Ne eivät ole toimintoja eivätkä määräaikoja, eli ne eivät ole merkityskartan oranssia. Neljä aksenttia vierekkäin on myös sumennustestissä yksi tasainen oranssi kaistale, joka kilpailee heron kanssa ilman että se kantaa mitään väitettä. Luettelomerkkisääntöä (`li .material-icons-round`) EI ole, ks. tiedoston alun perustelu: näillä kolmella sivulla listan ikoni on merkitys eikä luettelomerkki. */ /* RAJAUS JOKA LOYTYI MITTAAMALLA, EI LUKEMALLA, JA JOKA VAATI KOLME KIERROSTA. Kierros 1. Paljas `main .material-icons-round { color: var(--teksti-3) }` tuotti yhden kontrastirikkeen: `explore`-ikoni istuu omalla pinnallaan (`div.w-12.h-12.bg-accent/20`), ja --teksti-3 (#94A3B8) sita vasten on 4,46:1 eli 0,04 yksikkoa alle rajan. Ikoni oli ennen syaani ja lapaisi. Kierros 2. Rajaus `:not([class*="bg-"] *)` antoi kontrasti 0, JA SE OLI VALEKORJAUS: itse kantaa luokkaa `bg-background-dark`, joten jokainen ikoni on jonkin `[class*="bg-"]`-elementin jalkelainen ja saanto osui NOLLAAN elementtiin. Mittari oli vihrea koska saanto ei tehnyt mitaan, ja sen naki vain kuvasta: nelja oranssia ikonia oli yha paikallaan. Argumentti on siksi juuritettu `main`iin. Kierros 3. Poikkeukset `main button .material-icons-round` (0,2,3) HAVISIVAT paasaannolle: `:not()` saa argumenttinsa tarkkuuden, joten paasaanto on (0,3,2). Oire oli `arrow_forward` valkoisena nuolena oranssissa napissa -> #94A3B8 pinnalla #CC4A08 = 1,80:1. Nappi ei kanna `bg-*`-luokkaa lainkaan, vari tulee `.btn-primary`-saannosta, joten kierroksen 2 rajaus ei nahnyt sita. Poikkeukset siirrettiin siksi SAMAN `:not()`-listan sisaan, jolloin kilpailua ei synny ollenkaan eika yhtaan !importantia tarvita. MAARITELMA YHDELLA LAUSEELLA: ikoni joka istuu OMALLA PINNALLAAN (oma taustaluokka, nappi tai nappiluokka) on osa komponenttia ja pitaa komponentin varin. Kaikki muu on sivun metatietoa. */ body.sivu-oef main .material-icons-round:not( main [class*="bg-"] *, main button *, main [class*="btn-"] *, main a[href^="tel:"] *, main a[href^="mailto:"] * ) { color: var(--teksti-3); } /* §7.3 Varjoja on tasan yksi luokka ja se on modaalin. Oranssi hehku painikkeen alla on kolmas efekti samassa elementissä (täyte + kulma + varjo) ja rikkoo makuportin mitta 6:n budjetin. */ body.sivu-oef main button, body.sivu-oef main a { box-shadow: none; } /* ============================================================================= §3 TURVA-ALUEET ----------------------------------------------------------------------------- Ylätunniste on `position: fixed` eikä varaa virrasta yhtään tilaa, joten mainin yläpehmuste on sen ainoa turva-alue. Vakio tulee oef-typo.css:stä (`--oef-ylatunniste`), jotta ylätunnisteen kasvaessa muutetaan yksi arvo eikä etsitä kymmentä valitsinta. Kiinteä mobiilialapalkki on tällä sivustolla 138 px korkea. Ilman alapehmustetta se peittää sivun viimeiset rivit pysyvästi, eikä sitä voi vierittää pois: mitta 12 (ei leikkautumista) ei näe sitä, koska mikään ei ylitä ruudun reunaa. ========================================================================== */ body.sivu-oef main { padding-top: var(--oef-ylatunniste); padding-bottom: var(--v24); } @media (max-width: 1023px) { body.sivu-oef main { padding-bottom: 170px; } }