/* ═══════════════════════════════════════════════════════════════════════════ aero.css — jagatud disainisüsteem Tormi Lusti arhiiv. Frutiger Aero (klaas, gloss, aurora, rohi) × Y2K vanaveeb. Ühtegi välist fonti ega pilti ei laadita — kogu ilme on CSS + oma SVG. ═══════════════════════════════════════════════════════════════════════════ */ @layer reset, alus, teema, komponendid, utiliidid; /* ─────────────────────────────────────────────────────────────── 0. RESET */ @layer reset { *, ::before, ::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { padding-inline-start: 0; list-style: none; } img, svg, video { max-inline-size: 100%; block-size: auto; } button, input, select, textarea { font: inherit; color: inherit; } } /* ────────────────────────────────────────────────────── 1. MUUTUJAD / TEEMA */ @layer teema { :root { color-scheme: light dark; /* --- Tier 1: toorvärvid ------------------------------------------- */ --taevas-05: #f2fbff; --taevas-15: #d8f2ff; --taevas-30: #a7e2fb; --taevas-45: #64c9f2; --taevas-60: #1fa5e0; --taevas-75: #0b78b6; --taevas-88: #07496f; --taevas-95: #04283e; --lima-25: #e4f8bd; --lima-45: #b6e85c; --lima-60: #86c832; --lima-75: #4d8f1e; --lima-88: #275612; --violett-55: #9d8bf2; --merevaik-60: #ffae2e; --piim: #fff9ec; --tint: #04222f; /* --- Tier 2: semantilised ----------------------------------------- */ --fg: light-dark(var(--tint), #e8f7ff); --fg-tuhm: light-dark(#3d5c6b, #a9c9d8); --aktsent: light-dark(var(--taevas-75), var(--taevas-45)); --aktsent-2: light-dark(var(--lima-75), var(--lima-45)); --link: light-dark(#0a6ea8, #7fdcff); --link-kylas:light-dark(#6b4fa8, #c3b0ff); /* aurora taustakihi peatoonid — nahad kirjutavad need üle */ --aur-1: #7ee8ff; --aur-2: #b6e85c; --aur-3: #4a9fe0; --aur-4: #b39cff; --aur-pind: light-dark(#cfeeff, #04212f); /* --- Tier 3: pinnad ja kroom -------------------------------------- */ --klaas: light-dark(rgb(255 255 255 / .62), rgb(12 44 62 / .58)); --klaas-tug: light-dark(rgb(255 255 255 / .86), rgb(14 48 68 / .84)); --klaas-serv:light-dark(rgb(255 255 255 / .85), rgb(150 210 240 / .28)); --klaas-joon:light-dark(rgb(6 60 90 / .18), rgb(160 220 250 / .22)); --sisepind: light-dark(rgb(255 255 255 / .78), rgb(8 34 49 / .72)); --vari-1: 0 1px 2px rgb(3 40 60 / .16); --vari-2: 0 2px 6px rgb(3 40 60 / .14), 0 8px 24px rgb(3 40 60 / .16); --vari-3: 0 4px 10px rgb(3 40 60 / .16), 0 18px 46px rgb(3 40 60 / .26); /* ülemine valguskaar, mis teeb Aero läike */ --gloss: linear-gradient(to bottom, rgb(255 255 255 / .92) 0, rgb(255 255 255 / .42) 48%, rgb(255 255 255 / .06) 49%, rgb(255 255 255 / .22) 100%); --raadius: .85rem; --raadius-s: .45rem; --riba: 2.35rem; /* aknatiitli kõrgus */ --tegumi: 3rem; /* tegumiriba kõrgus */ /* --- Kirjastik ----------------------------------------------------- */ --font-ui: "Segoe UI", Frutiger, "Frutiger Linotype", Univers, "Myriad Pro", Calibri, Tahoma, system-ui, sans-serif; --font-loe: var(--font-ui); --font-mono: "Cascadia Mono", "Consolas", "SF Mono", "DejaVu Sans Mono", monospace; --mootlaius: 68ch; /* loetav reapikkus */ accent-color: var(--aktsent); scrollbar-color: var(--aktsent) light-dark(#d6eefa, #0a3145); } /* Naha vahetus: jne. Iga pühamu saab oma valguse. */ [data-nahk="raud"] { --aur-1: #9fb4c4; --aur-2: #d2dde4; --aur-3: #46586a; --aur-4: #b0453a; --aur-pind: light-dark(#dbe3e9, #10161c); --aktsent: light-dark(#37506a, #9fc3e4); --aktsent-2: light-dark(#a33228, #ff8b7a); --link: light-dark(#2c4a68, #b9d6f2); } [data-nahk="tervis"] { --aur-1: #ffe08a; --aur-2: #ffd0a1; --aur-3: #ffc23d; --aur-4: #fff3d0; --aur-pind: light-dark(#fff4dd, #2a1c07); --aktsent: light-dark(#a35a08, #ffcf7a); --aktsent-2: light-dark(#7d8f22, #d8e87c); --link: light-dark(#8c4a05, #ffd79a); } [data-nahk="ajalugu"] { --aur-1: #e8d9b6; --aur-2: #cbd8c0; --aur-3: #9a8a63; --aur-4: #f2ead6; --aur-pind: light-dark(#f4ecd9, #201c14); --aktsent: light-dark(#6b5a33, #ddc98f); --aktsent-2: light-dark(#4f6b53, #a9c9a0); --link: light-dark(#5c4a24, #e6d3a1); --font-loe: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; } /* Kõrgkontrastne režiim (Windows): gradiendid ja varjud kaovad — hoiame piirjooned süsteemivärvidega alles. */ @media (forced-colors: active) { :root { --klaas: Canvas; --klaas-tug: Canvas; --sisepind: Canvas; } .aken, .klaas, .kaart, .gloss-nupp { border: 1px solid CanvasText; } } } /* ───────────────────────────────────────────────────────────────── 2. ALUS */ @layer alus { html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { min-block-size: 100dvb; font-family: var(--font-ui); font-size: clamp(1rem, .96rem + .22vw, 1.09rem); line-height: 1.62; color: var(--fg); background: var(--aur-pind); overflow-x: clip; } h1, h2, h3, h4 { line-height: 1.18; text-wrap: balance; font-weight: 650; letter-spacing: -.012em; } h1 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); } h2 { font-size: clamp(1.28rem, 1.1rem + .8vw, 1.7rem); } h3 { font-size: 1.16rem; } p, li, blockquote, dd { text-wrap: pretty; } p + p, ul + p, ol + p, p + ul, p + ol { margin-block-start: .85em; } a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: from-font; } a:visited { color: var(--link-kylas); } a:hover:not(:disabled) { text-decoration-thickness: .12em; } :focus-visible { outline: 2.5px solid var(--aktsent); outline-offset: 2px; border-radius: .2rem; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; } code:not(pre code) { padding: .1em .38em; border-radius: .3rem; background: light-dark(rgb(6 70 105 / .09), rgb(160 225 255 / .12)); } pre { overflow: auto; padding: .9rem 1rem; border-radius: var(--raadius-s); background: light-dark(rgb(4 40 60 / .9), rgb(2 20 30 / .9)); color: #d9f4ff; } hr { block-size: 0; border: 0; border-block-start: 1px solid var(--klaas-joon); margin-block: 1.4rem; } ::selection { background: var(--aktsent); color: light-dark(#fff, #04222f); } /* Keelelüliti: mõlemad keeled elavad HTML-is kõrvuti, CSS peidab ühe. Ilma JS-ita jääb alles see keel, mis on küljes. */ html[lang="et"] :where(.en) { display: none; } html[lang="en"] :where(.et) { display: none; } /* Lehtedevaheline üleminek — puhas progressiivne täiendus. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } } /* ────────────────────────────────────────────────────────── 3. KOMPONENDID */ @layer komponendid { /* --- 3.1 Taust: aurora + bokeh + mullid --------------------------- */ .taust { position: fixed; inset: 0; z-index: -2; background: radial-gradient(120% 80% at 12% 0%, var(--aur-1) 0, transparent 58%), radial-gradient(90% 70% at 88% 6%, var(--aur-4) 0, transparent 55%), radial-gradient(140% 90% at 50% 108%, var(--aur-2) 0, transparent 62%), linear-gradient(to bottom in oklab, var(--aur-3), var(--aur-pind) 72%); filter: saturate(1.06); } /* pehme valguslaik, mis aeglaselt hingab */ .taust::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(closest-side, rgb(255 255 255 / .55), transparent 70%) 18% 22% / 46% 40% no-repeat, radial-gradient(closest-side, rgb(255 255 255 / .35), transparent 70%) 82% 12% / 38% 34% no-repeat; animation: hinga 26s ease-in-out infinite alternate; --animation-reduced: none; } @keyframes hinga { from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .75; } to { transform: translate3d(3%, 2%, 0) scale(1.06); opacity: 1; } } /* Mullid — Frutiger Aero kohustuslik osa. Puhtalt dekoratiivne. */ .mullid { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; } .mullid b { --s: 60px; position: absolute; inline-size: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .95) 0 8%, transparent 42%), radial-gradient(circle at 68% 74%, rgb(255 255 255 / .5) 0 6%, transparent 34%), radial-gradient(circle at 50% 50%, rgb(255 255 255 / .05) 52%, rgb(255 255 255 / .32) 78%, rgb(255 255 255 / .06) 100%); box-shadow: inset 0 0 12px rgb(255 255 255 / .5); animation: touse var(--kestus, 24s) linear var(--viide, 0s) infinite; --animation-reduced: none; opacity: 0; } @keyframes touse { 0% { transform: translate3d(0, 12vh, 0) scale(.7); opacity: 0; } 12% { opacity: .85; } 88% { opacity: .6; } 100% { transform: translate3d(var(--nihe, 4vw), -104vh, 0) scale(1.08); opacity: 0; } } /* Rohulible-serv lehe all — Aero makrofoto asemel oma SVG. */ .rohi { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: -1; block-size: clamp(70px, 12vh, 150px); background: url("/img/rohi.svg") bottom center / 100% 100% no-repeat; opacity: .55; pointer-events: none; } body:has(.tegumiriba) .rohi { inset-block-end: calc(var(--tegumi) - .4rem); } /* --- 3.2 Klaas ja aken -------------------------------------------- */ .klaas { background: var(--klaas); border: 1px solid var(--klaas-serv); border-radius: var(--raadius); box-shadow: var(--vari-2), inset 0 1px 0 rgb(255 255 255 / .8); backdrop-filter: blur(14px) saturate(1.5); } @supports not (backdrop-filter: blur(1px)) { .klaas { background: var(--klaas-tug); } } .aken { position: relative; border-radius: var(--raadius); border: 1px solid var(--klaas-serv); background: var(--klaas); box-shadow: var(--vari-3), inset 0 1px 0 rgb(255 255 255 / .75); backdrop-filter: blur(18px) saturate(1.55); overflow: clip; container: aken / inline-size; } @supports not (backdrop-filter: blur(1px)) { .aken { background: var(--klaas-tug); } } .aken__riba { display: flex; align-items: center; gap: .55rem; min-block-size: var(--riba); padding-inline: .7rem; font-size: .88rem; font-weight: 600; color: light-dark(#f4fdff, #eaf8ff); text-shadow: 0 1px 2px rgb(2 30 46 / .55); background: linear-gradient(to bottom, rgb(255 255 255 / .55) 0, rgb(255 255 255 / .16) 47%, rgb(255 255 255 / .02) 48%, rgb(255 255 255 / .16) 100%), linear-gradient(to bottom in oklab, var(--aktsent), color-mix(in oklab, var(--aktsent), black 34%)); border-block-end: 1px solid rgb(255 255 255 / .35); user-select: none; } .aken__riba .ikoon { inline-size: 1.05rem; } .aken__pealkiri { flex: 1 1 auto; min-inline-size: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } /* aknanupud — dekoratiivsed peale ühe, mis lülitab lugemisrežiimi */ .aken__nupud { display: flex; gap: .3rem; } .aken__nupud > * { display: grid; place-items: center; min-inline-size: 1.55rem; min-block-size: 1.35rem; padding: 0; font-size: .68rem; color: inherit; border: 1px solid rgb(255 255 255 / .5); border-radius: .3rem; background: linear-gradient(to bottom, rgb(255 255 255 / .45), rgb(255 255 255 / .08)); cursor: pointer; } .aken__nupud > button:hover:not(:disabled) { background: rgb(255 255 255 / .5); } @media (pointer: coarse) { .aken__nupud > * { min-inline-size: 2rem; min-block-size: 1.75rem; } } .aken__keha { padding: clamp(1rem, .6rem + 1.6vw, 1.9rem); } /* --- 3.3 Läikivad nupud ------------------------------------------- */ .gloss-nupp { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 2.25rem; padding: .4rem 1.05rem; font-size: .93rem; font-weight: 600; color: #fff; text-decoration: none; text-shadow: 0 1px 2px rgb(2 30 46 / .5); border: 1px solid color-mix(in oklab, var(--aktsent), black 25%); border-radius: 999px; background: var(--gloss), linear-gradient(to bottom in oklab, var(--aktsent), color-mix(in oklab, var(--aktsent), black 30%)); background-blend-mode: soft-light, normal; box-shadow: var(--vari-1), inset 0 1px 0 rgb(255 255 255 / .7); cursor: pointer; transition: translate .16s ease, box-shadow .16s ease, filter .16s ease; } .gloss-nupp:visited { color: #fff; } .gloss-nupp:hover:not(:disabled) { filter: brightness(1.08); translate: 0 -1px; box-shadow: var(--vari-2); } .gloss-nupp:active:not(:disabled) { translate: 0 1px; filter: brightness(.95); } .gloss-nupp.on-2 { border-color: color-mix(in oklab, var(--aktsent-2), black 25%); background: var(--gloss), linear-gradient(to bottom in oklab, var(--aktsent-2), color-mix(in oklab, var(--aktsent-2), black 30%)); } .gloss-nupp.vaikne { color: var(--fg); text-shadow: none; border-color: var(--klaas-joon); background: var(--gloss), var(--klaas-tug); } /* --- 3.4 Ikoonid --------------------------------------------------- */ .ikoon { inline-size: 1.25em; block-size: 1.25em; flex: none; vertical-align: -.22em; fill: currentColor; } /* --- 3.5 Külgriba-navigatsioon ------------------------------------ */ .kylgriba { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .6rem; background: linear-gradient(to bottom, light-dark(rgb(255 255 255 / .5), rgb(9 38 55 / .5)), light-dark(rgb(255 255 255 / .16), rgb(9 38 55 / .2))); border-inline-end: 1px solid var(--klaas-joon); } .kylgriba a { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; min-block-size: 2.2rem; font-size: .93rem; font-weight: 550; color: var(--fg); text-decoration: none; border: 1px solid transparent; border-radius: .55rem; } .kylgriba a:hover:not(:disabled) { background: var(--gloss), rgb(255 255 255 / .35); border-color: var(--klaas-serv); box-shadow: var(--vari-1); } .kylgriba a[aria-current="page"] { color: #fff; text-shadow: 0 1px 1px rgb(2 30 46 / .5); background: var(--gloss), linear-gradient(to bottom in oklab, var(--aktsent), color-mix(in oklab, var(--aktsent), black 28%)); border-color: color-mix(in oklab, var(--aktsent), black 22%); box-shadow: var(--vari-1), inset 0 1px 0 rgb(255 255 255 / .6); } .kylgriba__pais { margin-block: .8rem .25rem; padding-inline: .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-tuhm); } .kylgriba__pais:first-child { margin-block-start: 0; } /* --- 3.6 Tegumiriba ------------------------------------------------ */ .tegumiriba { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: flex; align-items: center; gap: .5rem; min-block-size: var(--tegumi); padding: .35rem .6rem; padding-block-end: max(.35rem, env(safe-area-inset-bottom)); font-size: .85rem; color: light-dark(#f2fcff, #e8f7ff); background: linear-gradient(to bottom, rgb(255 255 255 / .38) 0, rgb(255 255 255 / .1) 46%, rgb(255 255 255 / .02) 47%, rgb(255 255 255 / .12) 100%), linear-gradient(to bottom in oklab, color-mix(in oklab, var(--aktsent), black 18%), color-mix(in oklab, var(--aktsent), black 55%)); border-block-start: 1px solid rgb(255 255 255 / .4); box-shadow: 0 -6px 22px rgb(3 35 52 / .3); backdrop-filter: blur(10px); } .tegumiriba .gloss-nupp { min-block-size: 2rem; padding: .25rem .8rem; font-size: .85rem; } .tegumiriba__vahe { flex: 1 1 auto; } .tegumiriba__salv { display: flex; align-items: center; gap: .5rem; padding: .28rem .7rem; border: 1px solid rgb(255 255 255 / .3); border-radius: .5rem; background: rgb(255 255 255 / .14); font-variant-numeric: tabular-nums; } /* keelelüliti tegumiribal */ .tegumiriba [data-keelenupp] { min-block-size: 1.75rem; min-inline-size: 2.2rem; padding: .1rem .45rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: inherit; background: transparent; border: 1px solid transparent; border-radius: .35rem; opacity: .68; cursor: pointer; } .tegumiriba [data-keelenupp]:hover:not(:disabled) { opacity: 1; background: rgb(255 255 255 / .16); } .tegumiriba [data-keelenupp][aria-pressed="true"] { opacity: 1; background: var(--gloss), rgb(255 255 255 / .24); border-color: rgb(255 255 255 / .5); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55); } button.tegumiriba__salv { cursor: pointer; } @media (pointer: coarse) { .tegumiriba [data-keelenupp] { min-block-size: 2.1rem; min-inline-size: 2.6rem; } } @media (width < 700px) { .tegumiriba .peida-kitsas { display: none; } .tegumiriba { font-size: .8rem; gap: .35rem; } } /* --- 3.7 Kaardid ja ruudustikud ------------------------------------ */ .ruut { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; } .kaart { display: grid; grid-template-rows: auto 1fr auto; gap: .4rem; padding: .95rem 1.05rem; background: var(--gloss), var(--sisepind); background-blend-mode: soft-light, normal; border: 1px solid var(--klaas-serv); border-radius: var(--raadius-s); box-shadow: var(--vari-1), inset 0 1px 0 rgb(255 255 255 / .7); transition: translate .18s ease, box-shadow .18s ease; } .kaart:has(a:hover), .kaart:has(a:focus-visible) { translate: 0 -3px; box-shadow: var(--vari-2), inset 0 1px 0 rgb(255 255 255 / .8); } .kaart h3 { margin: 0; } .kaart h3 a { text-decoration: none; } .kaart h3 a:hover { text-decoration: underline; } .kaart p { margin: 0; font-size: .93rem; color: var(--fg-tuhm); } /* pisipildi kohahoidja: säilitab kuvasuhte, ei hüppa kui pilt lisad */ .pilt-koht { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--raadius-s); color: light-dark(#4b7d99, #86b8d0); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; background: repeating-linear-gradient(-45deg, light-dark(rgb(11 118 182 / .07), rgb(160 225 255 / .06)) 0 10px, transparent 0 20px), light-dark(rgb(255 255 255 / .5), rgb(6 32 46 / .5)); border: 1px dashed var(--klaas-joon); } .pilt-koht img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; } /* --- 3.8 Sildid ---------------------------------------------------- */ .sildid { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; list-style: none; } .silt { display: inline-block; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: light-dark(#08405f, #d6f2ff); background: var(--gloss), light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .12)); border: 1px solid var(--klaas-joon); border-radius: 999px; } .silt.keel { font-family: var(--font-mono); text-transform: uppercase; } /* --- 3.9 Failihaldur (arhiiviloend) -------------------------------- */ .failid { display: grid; gap: .15rem; padding: 0; list-style: none; } .failid > li > a { display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: baseline; gap: .6rem; padding: .42rem .6rem; min-block-size: 2.1rem; color: var(--fg); text-decoration: none; border-radius: .45rem; border: 1px solid transparent; } .failid > li > a:hover:not(:disabled) { background: var(--gloss), rgb(255 255 255 / .38); border-color: var(--klaas-serv); } .failid .ikoon { color: var(--aktsent); align-self: center; } .failid .nimi { font-weight: 550; } .failid .meta { font-size: .8rem; color: var(--fg-tuhm); font-variant-numeric: tabular-nums; white-space: nowrap; } /* punktiirjoon nime ja kuupäeva vahel, nagu sisukorras */ .failid .nimi::after { content: ""; display: inline-block; inline-size: 100%; margin-inline-start: .4em; border-block-end: 1px dotted var(--klaas-joon); translate: 0 -.28em; } @container aken (width < 30rem) { .failid > li > a { grid-template-columns: 1.4rem 1fr; } .failid .nimi::after { display: none; } .failid .meta { grid-column: 2; } } /* --- 3.10 Leivapuru ------------------------------------------------ */ .puru { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-block-end: 1rem; padding: 0; font-size: .84rem; list-style: none; color: var(--fg-tuhm); font-family: var(--font-mono); } .puru li:not(:last-child)::after { content: " /"; opacity: .6; } /* --- 3.11 Artikkel (pikk lugemine) --------------------------------- */ .artikkel { font-family: var(--font-loe); max-inline-size: var(--mootlaius); margin-inline: auto; } .artikkel > * + * { margin-block-start: 1.05em; } .artikkel h2 { margin-block-start: 1.9em; } .artikkel h3 { margin-block-start: 1.5em; } .artikkel blockquote { margin-inline: 0; padding: .3rem 0 .3rem 1.1rem; border-inline-start: 3px solid var(--aktsent-2); color: var(--fg-tuhm); font-style: italic; } .artikkel figure { margin-inline: 0; } .artikkel figcaption { font-size: .85rem; color: var(--fg-tuhm); margin-block-start: .4rem; } .juht { /* sissejuhatav lõik */ font-size: 1.1em; color: var(--fg-tuhm); } /* Veeriseviide: laial ekraanil kõrvale, kitsal teksti sisse. */ .veeris { display: block; font-size: .82rem; line-height: 1.5; color: var(--fg-tuhm); padding-inline-start: .8rem; border-inline-start: 2px solid var(--klaas-joon); margin-block: .6rem; } /* Tufte-laadne veeris: artikkel nihkub vasakule, märkused lähevad paremale vabale ribale. Ainult siis, kui ruumi tõesti on. */ @container aken (width >= 70rem) { .artikkel { position: relative; margin-inline: 0; } .veeris { position: absolute; inline-size: 12rem; inset-inline-start: calc(100% + 1.6rem); margin-block-start: -1.4em; padding-inline-start: .7rem; border-inline-start: 2px solid var(--klaas-joon); } } /* Joonealused märkused */ .margid { font-size: .88rem; color: var(--fg-tuhm); } .margid ol { padding-inline-start: 1.2rem; } .margid li { margin-block-start: .35rem; } .margid li:target { background: light-dark(rgb(255 220 120 / .5), rgb(255 200 80 / .22)); border-radius: .3rem; } a.viide { font-size: .78em; vertical-align: super; text-decoration: none; padding-inline: .12em; } /* --- 3.12 88x31 nupurida + webring ---------------------------------- */ .nupurida { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; list-style: none; } .nupurida img { display: block; inline-size: 88px; block-size: 31px; image-rendering: pixelated; border: 1px solid var(--klaas-joon); border-radius: 2px; } .nupu-koht { display: grid; place-items: center; inline-size: 88px; block-size: 31px; font-size: .62rem; letter-spacing: .04em; color: var(--fg-tuhm); background: repeating-linear-gradient(-45deg, light-dark(rgb(11 118 182 / .1), rgb(160 225 255 / .08)) 0 6px, transparent 0 12px); border: 1px dashed var(--klaas-joon); } /* --- 3.13 Teated / kohahoidjad -------------------------------------- */ .teade { padding: .8rem 1rem; border-radius: var(--raadius-s); border: 1px solid var(--klaas-serv); background: light-dark(rgb(255 244 214 / .8), rgb(80 60 12 / .5)); font-size: .92rem; } .teade code { background: rgb(0 0 0 / .08); } /* --- 3.14 Statistika-plaadid ---------------------------------------- */ .plaadid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; } .plaat { padding: .8rem .9rem; text-align: center; border-radius: var(--raadius-s); border: 1px solid var(--klaas-serv); background: var(--gloss), var(--sisepind); } .plaat b { display: block; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--aktsent); } .plaat span { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-tuhm); } } /* ────────────────────────────────────────────────────────── 4. UTILIIDID */ @layer utiliidid { .vaid-ekraanilugejale { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .vahelejata { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 100; translate: 0 -300%; } .vahelejata:focus-visible { translate: 0; } .rida { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .virn { display: grid; gap: 1.15rem; } .virn-s { display: grid; gap: .5rem; } .tuhm { color: var(--fg-tuhm); } .vaike { font-size: .85rem; } .keskel { text-align: center; } .mono { font-family: var(--font-mono); } .pole-marki { list-style: none; padding: 0; } /* Lugemisrežiim: koorib kroomi maha, kui tekstile keskendud. */ body.loe .kylgriba, body.loe .rohi, body.loe .mullid { display: none; } body.loe .aken { --klaas: light-dark(rgb(255 255 255 / .93), rgb(6 30 44 / .95)); } /* külgriba peidus → sisu ei tohi kitsasse veergu kinni jääda */ body.loe .aken--pea > .aken__keha { grid-template-columns: 1fr; } body.loe .artikkel { --mootlaius: 74ch; font-size: 1.09em; } body.loe .taust { filter: saturate(.35) brightness(1.04); } @media print { .taust, .mullid, .rohi, .tegumiriba, .kylgriba, .aken__nupud, .nupurida { display: none !important; } .aken { border: 0; box-shadow: none; backdrop-filter: none; background: #fff; } .aken__riba { color: #000; background: none; border-block-end: 1px solid #000; } body { color: #000; background: #fff; } a::after { content: " (" attr(href) ")"; font-size: .8em; } } } /* Liikumise vähendamine: guide'i soovitatud muster — iga animatsioon ütleb ise, mis temast vaikses režiimis saab. */ @property --animation-reduced { syntax: "*"; inherits: false; initial-value: none; } @media (prefers-reduced-motion: reduce) { .taust::after, .mullid b, .kaos__tahvel, .sadeleb { animation: var(--animation-reduced) !important; } .gloss-nupp, .kaart { transition: none; } }