/* =================================================================== Turun ortodoksinen seurakunta — web design tokens (WP-versio) Lähde: prototypes/tokens.css. Värit tulevat theme.jsonin preseteistä (--wp--preset--color--*), jotta editorin paletti ja frontti pysyvät samassa totuudessa; muut tokenit ovat vain CSS:n sisäisiä. =================================================================== */ :root { /* Värit — aliakset theme.jsonin presetteihin */ --c-dome-green: var(--wp--preset--color--kupolinvihrea-vaalea, #4A6E5A); --c-dome-green-d: var(--wp--preset--color--kupolinvihrea, #2E4738); --c-dome-teal: var(--wp--preset--color--kupolinturkoosi, #8FB5A6); --c-ochre: var(--wp--preset--color--okra, #E8C878); --c-gold: var(--wp--preset--color--kulta, #B8893A); --c-gold-l: var(--wp--preset--color--kulta-vaalea, #D9B25E); /* Syvä kulta on vaalean rekisterin aksenttiväri (linkit, medaljongit, painikkeet). Kulta ja vaalea kulta ovat liian vaaleita pergamentille: kontrasti jäisi 2,6:1:een (kulta) ja 1,7:1:een (vaalea kulta). #75551B (12.8.2026, oli #8A6521): pergamentilla (#F3EADA) 5,73:1, kermalla (#FAF4E8) 6,24:1, valkoisella 6,84:1 — AA vaatii 4,5:1. Vanha #8A6521 jäi pergamentilla 4,44:1:een ja tuotti 214 axe-rikettä; sen viereen oli dokumentoitu väärä luku 5,7:1, mikä esti alituksen huomaamisen — jos muutat väriä, laske ja päivitä NÄMÄ luvut samalla. -dd (vain hoveriin, ei paletissa) #5E4413: pergamentilla 7,61:1 ja 1,33 × ero perusväriin, jotta hover-muutos erottuu. */ --c-gold-d: var(--wp--preset--color--kulta-syva, #75551B); --c-gold-dd: #5E4413; --c-candle: var(--wp--preset--color--kyntila, #F2C46B); --c-ember: var(--wp--preset--color--hiillos, #8B3A1E); --c-wine: var(--wp--preset--color--viini, #5C1E24); --c-parchment: var(--wp--preset--color--pergamentti, #F3EADA); --c-cream: var(--wp--preset--color--kerma, #FAF4E8); --c-linen: var(--wp--preset--color--pellava, #EADFC8); --c-sand: var(--wp--preset--color--hiekka, #D9C9A8); --c-ink: var(--wp--preset--color--muste, #1C1A17); --c-ink-soft: #2B2824; --c-smoke: var(--wp--preset--color--savu, #4B4641); --c-mist: var(--wp--preset--color--usva, #B8B0A1); /* Keskiyö on 14.8.2026 alkaen tumma sininen (#101A2E, oli lämmin musta #0E0C0A). Kanavakolmikko on erikseen, koska tummia pintoja tehdään myös läpikuultavina (lasiheader, hakudialogi, kartan merkkien varjo): rgb(var(--c-midnight-rgb) / .72). Jos sävy vaihtuu, muuta MOLEMMAT — ja theme.jsonin paletti, joka on editorin totuus. Kontrastit tasaisella keskiyöpinnalla: kerma 15,85:1 · usva 8,07:1 · kynttilä 10,65:1 · vaalea kulta 8,67:1 (vertailukelpoiset entiseen: 17,82 / 9,08 / 11,98 / 9,74). Vertailu ja mittaus: prototypes/sinivariantit/. */ --c-midnight: var(--wp--preset--color--keskiyo, #101A2E); --c-midnight-rgb: 16 26 46; /* Syvänsininen — sivuston toinen tumma pinta. Muuttujan nimi on historiallinen: kehys oli 8.9.2026 asti lämmin vigilia-musta #0E0C0A, ja työryhmä valitsi sen tilalle sinikehyksen (katselmointikytkin poistettu samalla). Sininen keskiyö koskee sisältökaistoja; sivun KEHYS ja sitaattikaista ovat tätä syvempää sinistä: header (myös rullattu lasipinta, alavalikot ja mobiilivalikko), sitaattikaista ja footer. Kehys on siis sisältöä tummempi. -deep on kaistan oma aavistuksen syvempi sävy, jotta se erottuu naapureistaan ilman reunaviivaa (sama suhde kuin ennenkin, 1,019:1). #070C18 on valittu niin, että sen relatiivinen luminanssi on käytännössä sama kuin entisellä vigilialla (0,00374 vs. 0,00378) — vain sävykulma on käännetty lämpimästä 30°:sta ikoninsiniseen 222°:seen (keskiyö on 220°). Siksi kontrastiluvut ja ero sisältökaistaan (1,125:1) säilyivät ennallaan. Kontrastit tällä pinnalla: kerma 17,84:1 · usva 9,08:1 · kynttilä 11,99:1 · vaalea kulta 9,75:1. Vertailu keskiyöhön #101A2E: 15,85 · 8,07 · 10,65 · 8,67. AA vaatii 4,5:1 ja AAA 7:1. Luvut on laskettu WCAG 2.1:n relatiivisesta luminanssista skriptillä, ei silmämääräisesti — jos sävyä muuttaa, laske NÄMÄ luvut uudelleen. Valokuvien suoja --c-protect-rgb on eri asia (yhä lämmin 14 12 10): tämä on pinta, tuo on valokuvan päälle tuleva suoja. Älä yhdistä. */ --c-vigil: #070C18; --c-vigil-rgb: 7 12 24; --c-vigil-deep: #050913; /* Valokuvien tummennus EI seuraa keskiyötä. Heron verho, kirkkokalenteri- kortin suoja, uutiskorttien ja Tule tutustumaan -kuvan gradientit tummennetaan edelleen lämpimällä mustalla (14 12 10): ikonit ja kirkkosalikuvat ovat lämpimiä, ja sininen suoja kääntäisi niiden värilämpötilan. Päätös 14.8.2026 — älä yhdistä tätä keskiyöhön. Käyttö: rgb(var(--c-protect-rgb) / .74). Samat kanavat on kirjoitettu auki theme.jsonin protect-gradientteihin (JSON ei osaa muuttujia). */ --c-protect-rgb: 14 12 10; /* Semanttiset (vaalea rekisteri oletuksena) */ --bg-page: var(--c-parchment); --bg-surface: var(--c-cream); --bg-dark: var(--c-midnight); --text-body: var(--c-ink); --text-muted: var(--c-smoke); --text-invert: var(--c-cream); /* Aksentti on vaalealla pinnalla syvä kulta, ei kupolinvihreä (päätös 28.7.2026, variaatio 4 "Muste ja kulta"). Kupolinvihreä ei katoa: se jää kokonaisiksi pinnoiksi (tehtäväkortit, vihreä kaista, Tule tutustumaan). Näin vaalea ja tumma rekisteri korostavat samalla värillä. Variaatiot: prototypes/vaalea-variantit.html */ --accent: var(--c-gold-d); --accent-hover: var(--c-gold-dd); --border-soft: rgba(28, 26, 23, .18); --border-gold: rgba(184, 137, 58, .55); --border-invert: rgba(250, 244, 232, .22); /* Protection-gradientit — aliakset theme.jsonin presetteihin */ --protect-soft: var(--wp--preset--gradient--protect-soft); --protect-medium: var(--wp--preset--gradient--protect-medium); --protect-strong: var(--wp--preset--gradient--protect-strong); /* Typografia */ --font-display: var(--wp--preset--font-family--display, 'Cormorant Garamond', Georgia, serif); --font-body: var(--wp--preset--font-family--body, 'Inter', system-ui, sans-serif); --fs-hero: var(--wp--preset--font-size--hero, clamp(2.5rem, 6vw, 4.5rem)); --fs-h1: var(--wp--preset--font-size--h1, clamp(2rem, 4.5vw, 3rem)); --fs-h2: var(--wp--preset--font-size--h2, clamp(1.5rem, 3vw, 2.125rem)); --fs-h3: var(--wp--preset--font-size--h3, clamp(1.25rem, 2vw, 1.5rem)); --fs-lead: var(--wp--preset--font-size--lead, clamp(1.125rem, 1.8vw, 1.375rem)); --fs-body: var(--wp--preset--font-size--body, 1.0625rem); --fs-meta: var(--wp--preset--font-size--meta, 0.875rem); --fs-eyebrow: 0.8125rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.55; --tracking-caps: 0.08em; --tracking-eyebrow: 0.18em; /* Spacing — aliakset theme.jsonin presetteihin */ --sp-1: var(--wp--preset--spacing--sp-1, 4px); --sp-2: var(--wp--preset--spacing--sp-2, 8px); --sp-3: var(--wp--preset--spacing--sp-3, 12px); --sp-4: var(--wp--preset--spacing--sp-4, 16px); --sp-5: var(--wp--preset--spacing--sp-5, 24px); --sp-6: var(--wp--preset--spacing--sp-6, 32px); --sp-7: var(--wp--preset--spacing--sp-7, 48px); --sp-8: var(--wp--preset--spacing--sp-8, 64px); --sp-9: var(--wp--preset--spacing--sp-9, 96px); /* Radii & varjot */ --radius-featured: 0; --radius-ui: 6px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(28,26,23,.08); --shadow-2: 0 6px 18px rgba(28,26,23,.12); --shadow-card: 0 14px 40px rgba(28,26,23,.18); /* Liike */ --ease-calm: cubic-bezier(0.2, 0, 0, 1); --dur-fade: 240ms; } /* Perusaset — pehmennetty prototyypin *-resetistä: nollaus rajataan rakenne-elementteihin, jotta vanhan sisällön (211 sivua) typografia saa pitää normaalit marginaalinsa .entry-contentissa (theme.css). */ *, *::before, *::after { box-sizing: border-box; } /* Kankaan väri (se, jonka selain maalaa dokumentin ulkopuolelle) periytyy bodystä, ellei htmlille anneta omaa. Kerma näkyi siksi vaaleana kaistana sivun alareunassa, kun Firefox for Androidissa osoiterivi liukui pois ja näkyvä ikkuna kasvoi dokumenttia suuremmaksi (todettu 24.8.2026). Sivu alkaa tummalla headerilla ja päättyy tummaan footeriin, joten kangas on tumma kummassakin päässä. Bodyn kerma pysyy ennallaan. */ html { scroll-behavior: smooth; background-color: var(--c-vigil); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, hr { margin: 0; } ul, ol { padding: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); transition: color var(--dur-fade) var(--ease-calm); } a:hover { color: var(--accent-hover); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); } .goldline { width: 60px; height: 1px; background: var(--c-gold); opacity: .8; border: 0; } .star-sep { color: var(--c-gold); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }