/* ============================================================ onkii.fi — design tokenit v1 · suunta "Kaikuluotain" (1b) Tumma oletusteema, vaalea [data-theme="light"] ============================================================ */ :root{ /* värit */ --bg:#10140d; --sur:#171c12; --sur2:#1b2115; --ink:#e9ede1; --txt:#cdd3c2; --mut:#9aa38c; --line:#2b3323; --acc:#c8f542; /* fosfori-chartreuse: pinnat, napit */ --acc-text:#c8f542; /* aksenttiteksti (AA tummalla) */ --on-acc:#10140d; /* teksti aksenttipinnalla */ --ph1:#1b2115; --ph2:#161b11; /* kuvaplaceholder-raidat */ /* typografia — ei ulkoisia latauksia */ --font-disp:'Helvetica Neue',Helvetica,Arial,sans-serif; --font-body:-apple-system,'Segoe UI',system-ui,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --fs-h1:clamp(27px,4.5vw,48px); --fs-h2:clamp(20px,3vw,25px); --fs-h3:clamp(16px,2.4vw,18px); --fs-body:16px; --fs-small:13px; --fs-label:11px; /* välistys */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px; --w-max:1220px; } [data-theme="light"]{ --bg:#f2f4ec; --sur:#ffffff; --sur2:#e9ecdf; --ink:#161a10; --txt:#3c4433; --mut:#5c6552; --line:#d6dcc8; --acc-text:#4c6b00; /* chartreuse ei riitä tekstinä vaalealla → tumma oliivi */ --on-acc:#161a10; --ph1:#e3e7d8; --ph2:#dde2d0; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased} a{color:var(--acc-text);text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3px} a:hover{text-decoration-style:solid} :focus-visible{outline:2px solid var(--acc);outline-offset:2px} summary{list-style:none;cursor:pointer} summary::-webkit-details-marker{display:none} button{font:inherit} .wrap{max-width:var(--w-max);margin:0 auto;padding-inline:clamp(14px,3.5vw,40px)} .chrome-a{color:var(--ink);text-decoration:none} .chrome-a:hover{color:var(--acc-text)} .ph{background:repeating-linear-gradient(45deg,var(--ph1) 0 10px,var(--ph2) 10px 20px);display:flex;align-items:center;justify-content:center;color:var(--mut);font:11px var(--font-mono)} .btn{display:inline-block;font:700 13px/1 var(--font-mono);letter-spacing:.07em;background:var(--acc);color:var(--on-acc);padding:14px 22px;border:0;cursor:pointer;text-decoration:none;text-align:center} .btn:hover{filter:brightness(1.08)} .btn-ghost{display:inline-block;font:700 13px/1 var(--font-mono);letter-spacing:.07em;border:1px solid var(--ink);color:var(--ink);padding:13px 22px;background:none;cursor:pointer;text-decoration:none;text-align:center} .only-d{display:none} @media(min-width:900px){.only-d{display:block}.only-m{display:none}} /* --- artikkelin runko: sticky sisällys työpöydällä --- */ .art-grid{display:grid;gap:var(--sp-6)} .toc-desktop{display:none} @media(min-width:980px){ .art-grid{grid-template-columns:250px minmax(0,1fr);gap:52px} .toc-desktop{display:block;position:sticky;top:76px;align-self:start} .toc-mobile{display:none} } /* --- artikkelisisältö: CMS:stä tuleva HTML tyylittyy näillä --- */ .art h2{font:800 var(--fs-h2) var(--font-disp);text-transform:uppercase;letter-spacing:.01em;margin:46px 0 0;scroll-margin-top:84px} .art h3{font:800 var(--fs-h3) var(--font-disp);text-transform:uppercase;margin:30px 0 0;color:var(--txt);scroll-margin-top:84px} .art p{line-height:1.7;color:var(--txt);margin:14px 0 0;text-wrap:pretty} .art strong{color:var(--ink)} .art .hnum{color:var(--acc-text);font:700 .6em var(--font-mono);vertical-align:middle;margin-right:6px} /* numeroitu vaiheohje */ .art ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:step;border:1px solid var(--line)} .art ol li{counter-increment:step;display:flex;gap:14px;padding:13px 16px;font:15px/1.55 var(--font-body);color:var(--txt);border-bottom:1px solid var(--line)} .art ol li:nth-child(odd){background:var(--sur)} .art ol li:last-child{border-bottom:0} .art ol li::before{content:counter(step);font:800 13px/1.55 var(--font-mono);color:var(--acc-text);flex:none} /* taulukot */ .art table{border-collapse:collapse;font:13px var(--font-mono);width:100%;margin:18px 0 0} .art caption{text-align:left;font:700 10px var(--font-mono);letter-spacing:.14em;color:var(--mut);padding:0 0 8px;text-transform:uppercase} .art th{text-align:left;padding:10px 14px;border:1px solid var(--line);background:var(--acc);color:var(--on-acc);font-weight:700;white-space:nowrap} .art td{padding:10px 14px;border:1px solid var(--line);color:var(--txt)} .art tbody tr:nth-child(odd) td{background:var(--sur)} /* leveä taulukko: rullaa omassa laatikossaan, 1. sarake lukittu */ .tscroll{border:1px solid var(--line);margin:18px 0 0} .tscroll-inner{overflow-x:auto} .tscroll table{margin:0;min-width:560px;width:auto} .tscroll td:first-child{position:sticky;left:0;background:var(--sur2);box-shadow:2px 0 0 var(--line);font-weight:700;color:var(--ink)} .tscroll th:first-child{position:sticky;left:0} .tscroll-hint{font:700 10px var(--font-mono);letter-spacing:.14em;color:var(--acc-text);padding:7px 12px;border-top:1px solid var(--line)} @media(min-width:700px){.tscroll-hint{display:none}} /* FAQ-akordionit */ .faq details{border:1px solid var(--line);background:var(--sur);margin-top:-1px} .faq summary{font:600 15px var(--font-body);padding:14px 16px;display:flex;justify-content:space-between;gap:12px;color:var(--ink)} .faq summary::after{content:"[+]";font:700 13px var(--font-mono);color:var(--acc-text);flex:none} .faq details[open] summary::after{content:"[–]"} .faq details p{font:15px/1.6 var(--font-body);margin:0;padding:0 16px 14px;color:var(--mut)} /* ruudukot */ .cols2{display:grid;gap:var(--sp-6)} @media(min-width:900px){.cols2{grid-template-columns:1.15fr 1fr;align-items:start}} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .cat-grid{display:grid;gap:0} @media(min-width:900px){.cat-grid{grid-template-columns:230px minmax(0,1fr)}} /* luettelo (lisaa build-articles.mjs, alä poista: artikkelit kayttavat