/* Theme Name: AliceAI Learning Theme URI: https://aliceai.fi Author: AliceAI Learning Author URI: https://aliceai.fi Description: Custom-koodattu lohkoteema (FSE) AliceAI Learning -sivustolle. Katso specs/suunnitelma.md. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 Version: 0.2.0 Text Domain: aliceai */ /* ------------------------------------------------------------------------- Tämä tiedosto sisältää vain sen, mitä theme.json ei osaa ilmaista: siirtymät, hover-tilat, pseudo-elementit, sticky-header, listamerkit. Kaikki värit/spacing tulevat theme.json:n preset-muuttujista. ------------------------------------------------------------------------- */ :root { --aliceai-gutter: clamp(1.25rem, 5vw, 3.5rem); --aliceai-band: clamp(3.5rem, 3rem + 5vw, 7.5rem); --aliceai-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- 0. Pitkien sanojen katkaisu ---------------------------------------- */ /* ⚠️ Suomi tuottaa yhdyssanoja, jotka eivät mahdu kapealle näytölle. "Maanpuolustuskorkeakoulu" on h2-koossa (1,9rem @ 390px) 398px leveä 350px:n palstassa — se työnsi koko sivulle 28px vaakavierityksen (mitattu 2026-08-24 Puolustusala-sivulta). Vika ei näy työpöytäleveydellä lainkaan. `overflow-wrap: break-word` katkaisee sanan vasta kun se ei muuten mahdu, eli se ei vaikuta mihinkään muuhun. `hyphens: auto` tekee katkaisusta siistin tavuviivalla. Se on käytössä vasta 2026-08-24 alkaen, koska se VAATII oikean `lang`-attribuutin: sivuston kieli oli siihen asti `en_US`, jolloin Chrome tavutti suomen sanat englannin säännöillä ja katkaisi otsikot väärästä kohdasta. Nyt `WPLANG` on `fi` ja ``. ⚠️ Jos sivustosta tehdään kaksikielinen, tavutus seuraa `lang`-attribuuttia automaattisesti — mutta vain jos jokainen kieliversio saa oman oikean `lang` -arvonsa. Tarkista se lokalisointivaiheessa (suunnitelma osa 10). ⚠️ Tavutus on tarkoituksella VAIN leipätekstissä, ei otsikoissa. Isossa näyttökoossa tavuviiva on kookas ja rikkoo otsikon rytmin; otsikoille riittää `overflow-wrap` turvaverkoksi. Mitattu 2026-08-24. */ h1, h2, h3, h4, h5, h6, p, li, summary, figcaption { overflow-wrap: break-word; } p, li, summary, figcaption { hyphens: auto; } /* --- 1. Osiot ---------------------------------------------------------- */ /* WP antaa jokaiselle .wp-site-blocksin lapselle margin-block-start: var(--wp--style--block-gap) (= 24px). Ylätasolla lapsia ovat vain header, main ja footer, joiden pitää olla kiinni toisissaan — muuten tumman CTA-palkin ja tumman footerin väliin jää valkoinen raita, ja headerin alle toinen. Ytimen sääntö on :where()-kääritty (spesifisyys 0,0,0), joten tämä voittaa sen ilman !importantia. */ .wp-site-blocks > * { margin-block-start: 0; } /* Lyhyillä sivuilla (esim. 404) footer jäi kellumaan keskelle ruutua ja sen alle jäi valkoinen kaista. Flex-sarake ylätasolla työntää footerin aina vähintään ruudun alareunaan. Lapset ovat header/main/footer, jotka kaikki venyvät täyteen leveyteen, joten alignfull-logiikka ei muutu. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main { flex: 1 0 auto; } /* Jokainen täysleveä osio saa saman pystyrytmin ja reunapehmusteen ilman, että sitä tarvitsee toistaa jokaisessa lohkomerkinnässä. */ .aliceai-band { padding-top: var(--aliceai-band); padding-bottom: var(--aliceai-band); padding-left: var(--aliceai-gutter); padding-right: var(--aliceai-gutter); } .aliceai-band--tight { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); } /* Täysleveiden osioiden väliin jäi 24px valkoinen rako, jolloin vuorottelevat taustapalkit eivät koskettaneet toisiaan vaan kellui­vat valkoisella. Syy on ytimen sääntö `:root :where(.is-layout-constrained) > *`, joka antaa jokaiselle lapselle margin-block-start: var(--wp--preset--spacing--30). Sen spesifisyys on (0,1,0), joten pelkkä `.aliceai-band` ei riitä varmuudella — kaksiosainen selektori (0,2,0) voittaa latausjärjestyksestä riippumatta. */ .wp-block-post-content > .aliceai-band, .wp-block-post-content > .aliceai-band + .aliceai-band, /* Järjestelmätemplaateissa (404, haku, arkistot, single) palkit ovat suoraan
:n lapsia eivätkä post-contentin sisällä, joten yllä oleva selektori ei kata niitä. Ilman tätä sama 24px valkoinen raita ilmestyi jokaisen palkin väliin — havaittu 2026-08-23, kun templaatit tuotiin design-systeemiin. */ main > .aliceai-band, main > .aliceai-band + .aliceai-band { margin-block-start: 0; } /* Sama rako oli myös heron ja sisällön välissä (front-page.html). Nyt se ei näy, koska sisällön ensimmäinen osio on valkoinen — mutta jos jollain sivulla ensimmäinen osio on tumma, raita paljastuisi. */ main > .wp-block-post-content { margin-block-start: 0; } /* Kaksi peräkkäistä osiota tuottaa edellisen alapehmusteen JA seuraavan yläpehmusteen — työpöydällä yhteensä jopa 15rem tyhjää, mikä luki keskeneräisenä eikä ilmavana. Rajapinnassa riittää yksi rytmi, joten seuraavan osion yläpehmuste puolitetaan. Ensimmäinen osio (heron jälkeen) säilyttää täyden rytmin, koska sen yläpuolella ei ole toista palkkia. */ .aliceai-band + .aliceai-band { padding-top: calc(var(--aliceai-band) * 0.55); } /* --- 2. Kortit --------------------------------------------------------- */ .is-style-card, .aliceai-card { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); transition: transform 200ms var(--aliceai-ease), box-shadow 200ms var(--aliceai-ease); } /* Kortti on flex-säiliö, joten välit tulevat gapista. WP:n flow-layout lisää lisäksi jokaiselle lapselle margin-block-start: var(--wp--style--block-gap), jolloin todellinen väli on gap + 24px ja kortit lukevat löysinä. Luokka on tuplattu, jotta spesifisyys (0,2,0) voittaa ytimen .is-layout-flow > * -säännön (0,1,0) latausjärjestyksestä riippumatta. */ .is-style-card.is-style-card > *, .aliceai-card.aliceai-card > * { margin-block-start: 0; margin-block-end: 0; } /* Ikonisiru saa hieman ilmaa alleen, muuten se liimautuu otsikkoon. */ .is-style-card > .aliceai-icon-chip, .aliceai-card > .aliceai-icon-chip { margin-block-end: var(--wp--preset--spacing--10); } /* Kortit venyvät samankorkuisiksi ja niiden nuolilinkki ankkuroituu pohjaan, jolloin "Tutustu →" -linkit osuvat samalle riville. Sääntö koskee VAIN linkkiä — jos se koskisi mitä tahansa viimeistä lasta, lyhyemmän otsikon kortissa leipäteksti valuisi kortin pohjaan. */ .wp-block-columns .is-style-card > .aliceai-arrow-link:last-child, .wp-block-columns .is-style-card > .wp-block-buttons:last-child, .wp-block-columns .aliceai-card > .aliceai-arrow-link:last-child { margin-top: auto; padding-top: var(--wp--preset--spacing--20); } /* Kuvakortin sisäryhmä venyy, jotta linkki asettuu kortin pohjalle. */ .aliceai-imagecard > .wp-block-group { display: flex; flex-direction: column; flex: 1; } .aliceai-imagecard > .wp-block-group > .aliceai-arrow-link:last-child { margin-top: auto; padding-top: var(--wp--preset--spacing--20); } .is-style-card:hover, .aliceai-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--card-medium); } /* Ikonisiru: pyöristetty pastellineliö ikonin taustalla. */ .aliceai-icon-chip img, .aliceai-icon-chip .wp-block-image img { display: block; width: 52px; height: 52px; } /* Numeroitu askelmerkki + askelten välinen yhdysviiva. Merkille annetaan kiinteä 44x44 px koko kahdesta syystä: (1) ilman rajattua leveyttä 999px:n pyöristys venyy koko sarakkeen levyiseksi palkiksi ympyrän sijaan, (2) kiinteä koko antaa yhdysviivalle tarkan pystykeskikohdan (22px) ilman arvailua. */ .aliceai-step-number { position: relative; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 !important; } .aliceai-step-number p { margin: 0; } /* Pystysuuntainen askellista (Palvelu-sivun 5 vaihetta). Vaakarivi ei toimi viidellä askeleella: 1160px:n palstassa sarakkeista tulisi n. 200px leveitä ja teksti murtuisi. Numerosiru on flex-rivin lapsi, joten sen on pakko olla `flex: 0 0 auto` — muuten 44px:n ympyrä litistyy soikioksi pitkän tekstin vieressä. Yhdysviiva kulkee sirusta seuraavaan riviin asti. */ .aliceai-steplist-row { position: relative; align-items: flex-start; } .aliceai-steplist-row > .aliceai-step-number { flex: 0 0 auto; } .aliceai-steplist-row:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: calc(-1 * var(--wp--preset--spacing--40)); width: 2px; background: linear-gradient( 180deg, var(--wp--preset--color--turquoise) 0%, var(--wp--preset--color--forest-green-20) 100% ); } .aliceai-steps .wp-block-column { position: relative; } .aliceai-steps .wp-block-column:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: calc(-1 * var(--wp--preset--spacing--40)); height: 2px; background: linear-gradient( 90deg, var(--wp--preset--color--turquoise) 0%, var(--wp--preset--color--forest-green-20) 100% ); } @media (max-width: 781px) { .aliceai-steps .wp-block-column::after { display: none; } } /* ⚠️ Query Loop kääri jokaisen postin omaan
  • -elementtiinsä. Ruudukko venyttää
  • :n rivin korkuiseksi, mutta kortti sen sisällä jää oman sisältönsä korkuiseksi — vierekkäiset kortit ovat siis eri korkuisia, vaikka
  • :t ovat samankorkuisia eikä sitä huomaa mittaamalla
  • :tä. Mitattu 2026-08-24 Ajankohtaista-listauksesta:
  • 550/550/550, kortti 550/522/353. Flex + width:100% venyttää kortin täyteen korkeuteen. */ .wp-block-post-template > li { display: flex; } .wp-block-post-template > li > .is-style-card { width: 100%; } /* --- 3. Checklist ------------------------------------------------------ */ ul.is-style-checklist { list-style: none; padding-left: 0; margin-left: 0; } ul.is-style-checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.6rem; } ul.is-style-checklist li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1.25rem; height: 1.25rem; border-radius: 999px; background-color: var(--wp--preset--color--forest-green); /* valkoinen ✓ ympyrän sisällä */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center / contain no-repeat; } ul.is-style-checklist li::after { content: ""; position: absolute; left: 0.3rem; top: 0.62em; width: 0.65rem; height: 0.38rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } /* Tummalla taustalla merkki kääntyy turkoosiksi. */ .has-navy-background-color ul.is-style-checklist li::before, .has-deep-teal-gradient-background ul.is-style-checklist li::before, .aliceai-band--dark ul.is-style-checklist li::before { background-color: var(--wp--preset--color--turquoise); } .has-navy-background-color ul.is-style-checklist li::after, .has-deep-teal-gradient-background ul.is-style-checklist li::after, .aliceai-band--dark ul.is-style-checklist li::after { border-color: var(--wp--preset--color--navy); } /* --- 4. Eyebrow -------------------------------------------------------- */ p.is-style-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp--preset--color--forest-green); margin-bottom: 0.75rem; } /* Lyhyt viiva tunnisteen eteen. Käyttää inline-flexiä eikä ::before-blokkia, jotta keskitetty eyebrow pysyy keskitettynä viivoineen. */ p.is-style-eyebrow { display: flex; align-items: center; gap: 0.6rem; } p.is-style-eyebrow::before { content: ""; flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.55; } p.is-style-eyebrow.has-text-align-center { justify-content: center; } /* Gradienttipalkin vaaleimmassa päässä (#1B5766) täysi turkoosi jää 3,75:1 kontrastiin — alle WCAG AA:n pienelle tekstille. turquoise-60 pysyy yli 4,5:1 koko gradientin matkalla. */ .aliceai-band--dark p.is-style-eyebrow, .has-navy-background-color p.is-style-eyebrow { color: var(--wp--preset--color--turquoise-60); } /* --- 5. Hero ----------------------------------------------------------- */ .aliceai-hero { position: relative; min-height: clamp(560px, 72vh, 720px); isolation: isolate; } /* Gradienttiverho kuvan päällä: teksti pysyy luettavana vasemmalla, valokuva näkyy oikealla. Toteutettu pseudo-elementtinä eikä Cover-lohkon omalla overlaylla, koska WP:n .has-*-background-color -luokat tulevat !important -määreellä eikä niitä voi ylikirjoittaa mediakyselyssä. */ .aliceai-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; /* ⚠️ Verhon voimakkuus on mitoitettu KIRKKAAMMAN kuvan mukaan. Kun hero sai toisen, vaaleamman valokuvan (terveydenhuolto), eyebrow putosi 3,97:1 kontrastiin eli alle AA:n — puolustuskuvan päällä sama arvo oli 4,64. Jos lisäät heroon uuden kuvan, MITTAA kontrasti sen päältä erikseen; tumman kuvan perusteella säädetty verho ei riitä vaalealle. */ background: linear-gradient( 90deg, rgba(5, 22, 38, 0.97) 0%, rgba(5, 22, 38, 0.94) 38%, rgba(5, 22, 38, 0.78) 66%, rgba(5, 22, 38, 0.24) 100% ); } .aliceai-hero > .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; max-width: 1160px; margin-inline: auto; } /* Heron sisältö rajataan CSS:llä eikä Cover-lohkon constrained-layoutilla, koska WP generoi constrained-lapsille `margin-left:auto !important`, jota ei voi ylikirjoittaa spesifisyydellä — teksti keskittyisi vasemman sijaan. */ .aliceai-hero-copy { max-width: 660px; } /* Leveämpi tekstipalsta pitkälle otsikolle. 660px:n palstassa Palvelu-sivun 53-merkkinen h1 kietoutui neljälle riville ja työnsi napit alle taitteen 1000px:n näkymässä. Modifier on tarkoituksella opt-in: kapea palsta on oletus, koska lyhyt otsikko näyttää siinä paremmalta. */ .aliceai-hero-copy--wide { max-width: 820px; } .aliceai-hero p.is-style-eyebrow { color: var(--wp--preset--color--turquoise); } @media (max-width: 781px) { .aliceai-hero::before { background: linear-gradient(180deg, rgba(5, 22, 38, 0.84) 0%, rgba(5, 22, 38, 0.96) 55%); } } /* --- 5b. Vaihtuva herokuva (ristihäivytys) ------------------------------ */ /* 2026-08-20: jaettu kahden kuvan hero kokeiltiin ja hylättiin — käyttäjä piti yhden kuvan versiosta enemmän. Nyt yksi kuva kerrallaan, ja kuva vaihtuu pehmeästi puolustusalan ja terveydenhuollon välillä. Sommittelu, typografia, värit ja napit ovat samat kuin alkuperäisessä yhden kuvan herossa. Kuvat ovat kuvalohkoina (eivät Cover-lohkon taustana), koska Cover osaa vain yhden taustakuvan ja koska näin kummallakin on oma alt-teksti ja oma rajaus. */ /* ⚠️ Luokka on TUPLATTU tarkoituksella (0,2,0). Lohkoeditorin kanvaasissa ydin antaa jokaiselle lohkolle `.block-editor-block-list__block { position: relative }`, joka on samaa spesifisyyttä (0,1,0) ja latautuu teeman jälkeen — eli voittaa. Ilman tuplausta heron diat eivät asetu päällekkäin editorissa vaan pinoutuvat, jolloin hero oli 2868px korkea ja teksti 2400px alempana. Sama ansa kuin navigaation `color: inherit`, ks. CLAUDE.md. Julkisella puolella tuplaus ei muuta mitään. */ .aliceai-hero-slides.aliceai-hero-slides { position: absolute; inset: 0; z-index: 0; margin: 0; /* Pakollinen: hidas lähennys skaalaa kuvaa 5 %, ja ilman rajausta se vuotaa heron yli ja tuottaa koko sivulle vaakavierityksen. */ overflow: hidden; } .aliceai-hero-slide.aliceai-hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1200ms var(--aliceai-ease); } .aliceai-hero-slide.is-active { opacity: 1; } .aliceai-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Rajaus per kuva: puolustuskuvassa kohde on oikealla, terveydenhuoltokuva on pystykuva jonka henkilöt ovat ylemmpänä keskellä. */ /* Rajaus per KUVA, ei diajärjestyksen mukaan. ⚠️ Aiemmin nämä olivat `:nth-child(1)` ja `:nth-child(2)`, mikä oletti että diat ovat samassa järjestyksessä joka sivulla. Näin ei ole: etusivulla ja Toimialoilla puolustuskuva on ensin, Palvelulla terveydenhuoltokuva. Palvelun herossa kuvat saivat siis toistensa rajaukset. Tiedostonimeen sidottu valitsin ei voi mennä väärin, vaikka järjestys vaihtuisi. Pystyankkurit on mitattu, ei arvattu: hero on hyvin leveä suhteessa korkeuteensa (min-height 560–720px), joten `cover` rajaa rajusti ylhäältä ja alhaalta — 2000×670 ikkunassa puolustuskuvasta näkyy pystysuunnassa vain n. 52 %. Keskitettynä se osui kohtaan 24–76 %, ja kohteen kasvot (9–33 %) jäivät kokonaan rajauksen ulkopuolelle. Mitattu 2026-08-24. **Jos vaihdat herokuvan, mittaa kasvojen kohta uudestaan.** */ /* ⚠️ Valitsin on `$=` (loppuliite), EI `*=`. Kun heroon tuli lisää kuvia (2026-08-25), `[src*="hero-terveydenhuolto"]` olisi osunut myös uusiin `hero-terveydenhuolto-*.webp`-tiedostoihin ja antanut niille alkuperäisen pystykuvan rajauksen. Loppuliitehaku osuu tasan yhteen tiedostoon. */ .aliceai-hero-slide img[src$="hero-puolustus.webp"] { object-position: 62% 18%; } .aliceai-hero-slide img[src$="hero-puolustus-mobiili.webp"] { object-position: 58% 40%; } .aliceai-hero-slide img[src$="hero-puolustus-kartta.webp"] { object-position: 62% 50%; } /* ⚠️ Tämä kuva vaihdettiin 2026-08-24 peilaamattomaan versioon (sote_2.png). Vanha oli peilattu niin, että hoitaja oli VASEMMALLA eli tekstipalstan alla. Rajaus on siksi mitattu kokonaan uudestaan: kohteet vaihtoivat puolta. */ .aliceai-hero-slide img[src$="hero-terveydenhuolto-kahvipoyta.webp"] { object-position: 62% 38%; } .aliceai-hero-slide img[src$="hero-terveydenhuolto-puhelin.webp"] { object-position: 68% 14%; } .aliceai-hero-slide img[src$="hero-terveydenhuolto-kaytava.webp"] { object-position: 62% 22%; } .aliceai-hero-slide img[src$="hero-terveydenhuolto-vuode.webp"] { object-position: 66% 38%; } /* Hyvin hidas lähennys aktiivisessa kuvassa. Pitää heron elävänä ilman että mikään nykii; liike on niin hidasta ettei sitä huomaa katsomatta. */ @media (prefers-reduced-motion: no-preference) { .aliceai-hero-slide img { transform: scale(1.05); transition: transform 9000ms linear; } .aliceai-hero-slide.is-active img { transform: scale(1); } } /* Sisältö keskitetään 1160px:n palstaan kuten ennenkin. Aiemmin tämän teki Cover-lohkon oma inner-container; nyt se on oma kääreensä. */ .aliceai-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1160px; margin-inline: auto; } /* Luottamusrivi heron alaosassa. */ .aliceai-trust-row ul { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; } .aliceai-trust-row ul li { margin-bottom: 0; font-size: 0.95rem; } /* --- 5c. Filtteripillerit (listaussivut) -------------------------------- */ /* Rivi tulee ytimen `core/terms-query` + `core/term-template` -lohkoista, eli pillerit ovat taksonomian termejä eivätkä kovakoodattua tekstiä. Kun ylläpitäjä lisää aiheen wp-adminissa, pilleri ilmestyy itsestään. Ytimen tuottama rakenne: