/* ========================================================================== Oakko Oy — oakko.fi Käsin kirjoitettu tyylitiedosto. Ei esikääntäjää, ei riippuvuuksia, ei ulkopuolisia fontteja — vain järjestelmäkirjasimet. ========================================================================== */ /* ========================================================================== VÄRIT – koko sivuston paletti yhdessä paikassa -------------------------------------------------------------------------- Sääntö: mikään muu sääntö tiedostossa ei käytä heksavärejä, vaan aina näitä muuttujia. Silloin koko sivusto (teksti, kortit, kaaviot, sanamerkki, napit, lasimainen ylätunniste) vaihtaa väriään yhtenä kokonaisuutena. Roolit: --bg sivun tausta (tumma, hieman lämmin) --bg-raise korotetut pinnat: kortit, lomake, kaavioiden asemien sisus --bg-glass ylätunnisteen läpikuultava tausta (= --bg 72 % peitolla) --text leipäteksti, otsikot, kaavioiden päätekstit --muted toissijainen teksti: rivien nimet, alatekstit, odotus, manuaalisen radan viivat ja asemat (vaiheiden nimet aina --text) --accent ainoa korostusväri: automatisoidun radan viivat ja asemat, napit, linkit, sanamerkin asemat, numerointi --accent-ink teksti ja rasti aksenttivärin päällä (aina tumma) --accent-hover napin ja logon hover-sävy --line kehykset ja kenttien reunat --line-soft hiuslinjat: ylä- ja alatunnisteen rajat --hot-accent aksentin "kuuma" sävy: kaavion osa ilmestyy tällä ja --hot-muted jäähtyy omaan väriinsä (k-cool-*), samoin harmaille --warn lomakkeen virheilmoituksen reunus Tumma / vaalea: ulkoasu.js asettaa -elementille data-teema="tumma" | "vaalea". Oletus seuraa käyttöjärjestelmän asetusta; ylätunnisteen aurinko/kuu-nappi vaihtaa, ja valinta muistetaan selaimen localStoragessa (ei eväste, ei seurantaa). Ilman JavaScriptiä: tumma, tai vaalea jos järjestelmä pyytää vaaleaa (@media prefers-color-scheme alla). Järjestys alla: tumma (:root, oletus) → vaalea → järjestelmän vaalea ilman JavaScriptiä. Kontrasti pysyy molemmissa vähintään WCAG AA -tasolla (teksti ja toissijainen teksti taustaa vasten, aksentti taustaa vasten linkkinä, teksti aksentin päällä). Favicon ja jakokuva ovat kiinteästi tumman teeman värejä. ========================================================================== */ :root { /* TUMMA – oletus */ color-scheme: dark; --bg: #1b1f1c; --bg-raise: #232823; --bg-glass: rgba(27, 31, 28, 0.72); --text: #e7e5dc; --muted: #a9afa3; --accent: #b5d6b2; --accent-ink: #16211a; --accent-hover: #c6e0c3; --line: #525a51; /* kehykset erottuvat myös tummalla (n. 2:1 korotettua pintaa vasten) */ --line-soft: #2c322d; --hot-accent: #e2f1df; --hot-muted: #d6dbd2; --warn: #d6b2b2; --radius: 8px; --radius-sm: 6px; /* napit, kentät, ilmoitukset */ --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Pääteikkunan fontti sanamerkin kirjaimille (järjestelmän monospace) */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; } /* --- Vaalea teema --------------------------------------------------------- Sama maailma valossa: lämmin luonnonvalkoinen tausta, tumma teksti, aksentti syvempi vihreä, jotta se kantaa linkkinä ja viivana. Napit ja pääteasemat täyttyvät samalla vihreällä ja saavat vaalean tekstin. */ :root[data-teema="vaalea"] { /* VAALEA */ color-scheme: light; --bg: #f2f1eb; --bg-raise: #fbfaf6; --bg-glass: rgba(242, 241, 235, 0.76); --text: #1b1f1c; --muted: #5f6963; --accent: #2a5c3d; /* tummempi kuin --muted, jotta harmaa ja vihreä erottuvat myös vaaleudeltaan */ --accent-ink: #f4f6f0; --accent-hover: #245033; --line: #9aa094; /* kehykset erottuvat vaalealla (n. 2,5:1) */ --line-soft: #e1e4dc; --hot-accent: #6fbf8a; --hot-muted: #a3ada5; --warn: #b0574f; } /* Ilman JavaScriptiä: järjestelmän vaalea asetus antaa vaalean teeman */ @media (prefers-color-scheme: light) { :root:not([data-teema]) { color-scheme: light; --bg: #f2f1eb; --bg-raise: #fbfaf6; --bg-glass: rgba(242, 241, 235, 0.76); --text: #1b1f1c; --muted: #5f6963; --accent: #2a5c3d; /* tummempi kuin --muted, jotta harmaa ja vihreä erottuvat myös vaaleudeltaan */ --accent-ink: #f4f6f0; --accent-hover: #245033; --line: #9aa094; /* kehykset erottuvat vaalealla (n. 2,5:1) */ --line-soft: #e1e4dc; --hot-accent: #6fbf8a; --hot-muted: #a3ada5; --warn: #b0574f; } } /* --- Perusta ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Teeman vaihto häivyttyy pehmeästi; ei lainkaan, jos liikettä on pyydetty vähentämään */ @media (prefers-reduced-motion: no-preference) { body, .site-header, .btn, .teema-nappi, .k-valinta, .contact-form, .form-field input, .form-field textarea, .form-status { transition: background-color 0.8s ease, border-color 0.8s ease, color 0.8s ease; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-stack); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } .wrap { max-width: 60rem; margin-inline: auto; padding-inline: 1.25rem; } /* Teksti ja kaaviot käyttävät koko sisältöleveyden (Villen toive 2026-09-02) */ .narrow { max-width: none; } /* Leipätekstin palstanleveys: kaaviot ja listat saavat koko leveyden, kappaleet eivät */ main p { max-width: 40rem; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } h1, h2 { line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); margin: 0 0 1.25rem; } h2 { font-size: clamp(1.5rem, 3vw, 1.7rem); /* puhelimella 24 px: selvä ero leipätekstiin */ margin: 0 0 1rem; } p { margin: 0 0 1rem; } strong { color: var(--text); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.5rem 1rem; z-index: 10; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* --- Ylä- ja alatunniste ------------------------------------------------ */ /* Ylätunniste pysyy näkyvissä; lasimainen läpikuultavuus */ .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line-soft); background: var(--bg-glass); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } } /* Sanamerkki ja soittonappi ovat samaa korkeutta ja keskitetty samalle riville; molempien korkeus tulee --header-h:sta, ei fontin mitoista */ .site-header .wrap { --header-h: 1.85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; min-height: calc(var(--header-h) + 1.7rem); } /* Sanamerkki "OAKKO" kaavioiden kielellä: viisi yhtä leveää asemaa (O, A, K, K, O). Rata piirtyy ensimmäisestä O:sta pääteasemaan; kun pääteasema on valmis, rata irtoaa vasemmalta ja liukuu kokonaan pääteasemaan. Jokainen kirjain (järjestelmän monospace, lihavoitu, hivenen asemaa pienempi) pyörähtää esiin paikallaan sillä hetkellä, kun radan häntä on ohittanut sen kohdan. Valmis noin 1,2 s. Reduced-motion: heti valmis. */ .wordmark { display: block; color: var(--text); text-decoration: none; } .wm { display: block; height: var(--header-h, 1.85rem); width: auto; overflow: visible; } .wm-o { fill: none; stroke: var(--accent); stroke-width: 3.2; } .wm-end { fill: var(--accent); } .wm-check { fill: none; stroke: var(--accent-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .wm-rail { stroke: var(--accent); stroke-width: 2; stroke-linecap: butt; opacity: 0; /* lepotilassa piilossa; animaatiossa dashoffset hoitaa näkyvyyden */ } /* Kirjaimet: taustanvärinen reunus (paint-order) katkaisee radan kirjaimen kohdalta, joten rata näkyy kulkevan kirjaimen takana */ .wm-l { font-family: var(--font-mono); font-size: 24.5px; /* versaali ≈ 17,7 yksikköä = 94 % aseman ulkohalkaisijasta (18,8); ympyrä näyttää kokoaan pienemmältä */ font-weight: 700; text-anchor: middle; /* SVG:ssä textLength=17.7 venyttää kirjaimen yhtä leveäksi kuin korkeaksi: neliö kuten ympyrä */ fill: var(--text); /* ei reunusta: rata näkyy kirjainten läpi kunnes häipyy */ } @media (prefers-reduced-motion: no-preference) { .wm-o { opacity: 0; transform-box: fill-box; transform-origin: center; animation: k-pop 0.26s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .wm-o1 { animation-delay: 0s; } .wm-o2 { animation-delay: 0.3s; } /* kun rata saapuu */ .wm-check { opacity: 0; animation: k-fade 0.12s ease-out 0.38s both; } /* Rata (pathLength 1, dasharray "1 1", jakso 2). Vain positiivisia offset-arvoja, koska selaimet tulkitsevat negatiiviset eri tavoin: 1 → 0 piirtää vasemmalta oikealle (näkyvissä [0, 1−o]), 0,08–0,30 s; pito kun pääteasema poksahtaa; hyppy 0 → 2 (sama ulkonäkö, koko rata); 2 → 1 irrottaa vasemman pään ja liu'uttaa radan pääteasemaan (näkyvissä [2−o, 1]), 0,50–1,00 s. */ .wm-rail { opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wm-rata 0.92s linear 0.08s both; } /* Kirjain pyörähtää esiin paikallaan, kun radan häntä on ohittanut sen: häntä x = 19 + 68,4 · (t − 0,50) / 0,50 → A 0,59 s, K 0,75 s, K 0,91 s. Kiertokeskus annetaan piirtokoordinaateissa (view-box), koska fill-box-keskus lasketaan SVG-tekstille väärin WebKitissä. */ .wm-l { transform-box: view-box; animation: wm-pyorahdys 0.32s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .wm-l1 { transform-origin: 31.4px 16.6px; animation-delay: 0.59s; } .wm-l2 { transform-origin: 53.2px 16.6px; animation-delay: 0.75s; } .wm-l3 { transform-origin: 75px 16.6px; animation-delay: 0.91s; } } @keyframes wm-rata { 0% { stroke-dashoffset: 1; } 23.9% { stroke-dashoffset: 0; } /* 0,30 s: rata perillä */ 45.7% { stroke-dashoffset: 0; animation-timing-function: step-end; } /* 0,50 s: pito, sitten hyppy 0 → 2 (sama ulkonäkö) */ 45.71% { stroke-dashoffset: 2; } 100% { stroke-dashoffset: 1; } /* 1,00 s: kokonaan pääteasemassa */ } @keyframes wm-pyorahdys { 0% { opacity: 0; transform: rotate(-200deg) scale(0); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } } /* LinkedIn-logo yhteydenotto-osiossa (nimen perässä) */ .linkedin-inline { display: inline-flex; align-items: center; color: var(--accent); text-decoration: none; border-radius: 3px; vertical-align: -3px; margin-left: 0.15rem; } .linkedin-inline:hover { color: var(--accent-hover); } .linkedin-inline svg { display: block; flex: none; width: 16px; height: 16px; } /* Ylätunnisteen soittonappi: puhelinkuvake + numero, sama tyyli kuin "Voit kokeilla tätä nyt" -osion napissa mutta pienempänä */ .site-header .btn-header { display: inline-flex; align-items: center; align-self: center; gap: 0.45rem; box-sizing: border-box; height: var(--header-h, 1.85rem); margin: 0; padding: 0 0.85rem 0 0.7rem; font-size: 0.875rem; line-height: 1; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .site-header .btn-header .btn-ico { display: block; flex: none; } .header-oikea { display: flex; align-items: center; gap: 0.6rem; } /* Tumma/vaalea-vaihdin: aurinko tummassa (vaihda vaaleaan), kuu vaaleassa */ /* Teemanappi näkyy vain, kun ulkoasu.js on asettanut data-teema-attribuutin (ilman JS:ää nappi ei tekisi mitään) */ .teema-nappi { display: none; } :root[data-teema] .teema-nappi { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--header-h, 1.85rem); height: var(--header-h, 1.85rem); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; } .teema-nappi:hover { border-color: var(--accent); color: var(--accent); } .teema-nappi svg { display: block; } /* Painettaessa kuvake pyörähtää myötäpäivään kuin kellon viisari */ .teema-nappi .teema-ikoni { display: block; width: 16px; height: 16px; } @media (prefers-reduced-motion: no-preference) { .teema-nappi.pyorii .teema-ikoni { animation: teema-pyorahdys 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); } } @keyframes teema-pyorahdys { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } :root:not([data-teema="vaalea"]) .teema-nappi .ico-kuu { display: none; } :root[data-teema="vaalea"] .teema-nappi .ico-aurinko { display: none; } @media (prefers-color-scheme: light) { :root:not([data-teema]) .teema-nappi .ico-aurinko { display: none; } :root:not([data-teema]) .teema-nappi .ico-kuu { display: block; } } .site-footer { border-top: 1px solid var(--line-soft); margin-top: 4rem; } .site-footer .wrap { padding-block: 1.75rem; font-size: 0.9rem; color: var(--muted); } .site-footer p { margin: 0; } /* Miten sivusto on tehty: ei evästeitä, tekstit ihmisen hyväksymiä */ .site-footer .footer-huomio { margin-bottom: 1.25rem; } .footer-huomio strong { color: var(--text); } .footer-rivi { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; } /* --- Osiot -------------------------------------------------------------- */ /* Myös hero on section: sama väli hero–ensimmäinen osio kuin osioiden välillä */ main section { padding-block: 3.5rem 1rem; } .lede { font-size: 1.15rem; color: var(--text); /* leipätekstiä, ei alatekstiä */ } /* Kohderyhmä omana rivinään nappien alla: ei pidennä saatetta ennen nappeja */ .hero-kohde { margin: 1.25rem 0 0; max-width: 34rem; font-size: 0.95rem; color: var(--muted); } /* Heron toimintakutsut: soitto ensisijainen, lomake toissijainen */ .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } /* (.btn.btn-toissijainen: voittaa myöhemmin tulevan .btn-säännön) */ .btn.btn-toissijainen { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); } .btn.btn-toissijainen:hover { background: var(--bg-raise); color: var(--accent-hover); } /* Ankkurilinkki laskeutuu kiinteän ylätunnisteen alle */ #yhteys { scroll-margin-top: 4.5rem; } /* --- Kaaviot ------------------------------------------------------------ */ .kaavio-figure { margin: 2.25rem 0; } /* Kaavio 1: valittavat esimerkit yhden figure-elementin sisällä */ .kaavio-figure-ryhma { margin: 2.25rem 0; } .kaavio-figure-ryhma .kaavio-figure { margin: 0; } .k-valitsin { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .k-valinta { box-sizing: border-box; height: 1.85rem; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: 600 0.76rem/1 var(--font-mono); /* ≥ 12 px näytöllä */ letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .k-valinta:hover { border-color: var(--accent); color: var(--accent); } .k-valinta[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } /* Lyhyt johdanto toisen valitsimen yllä: sama kolme esimerkkiä, eri vertailu */ .kaavio-johdanto { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--muted); } /* Huomautus kaavion alla: kestot ovat esimerkkejä */ .kaavio-huomio { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--muted); } .kaavio { display: block; width: 100%; height: auto; font-family: var(--font-stack); } .k-mobile { display: none; max-width: 26rem; margin-inline: auto; } /* Leveä kaavio kutistuu lukukelvottomaksi tabletilla, siksi vaihto jo 900 px:ssä */ @media (max-width: 900px) { .k-desktop { display: none; } .k-mobile { display: block; } } /* Tekstit. Jokaisella luokalla on oma täyttöväri; yleinen `.kaavio text` -sääntö ohittaisi luokat (korkeampi spesifisyys), joten sitä ei ole. */ .k-label { fill: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .k-text { font-size: 15px; text-anchor: middle; fill: var(--text); } .k-sub { font-size: 12.5px; fill: var(--muted); text-anchor: middle; } .k-wait { font-size: 13px; font-style: italic; fill: var(--muted); text-anchor: middle; } /* Kapeassa versiossa tekstit ovat aseman oikealla puolella ja hieman pienempiä, jotta nimet ja viiveet mahtuvat kapeisiin palstoihin rauhallisesti */ .k-l { text-anchor: start; } .k-mobile .k-text { font-size: 13px; } .k-mobile .k-sub { font-size: 11px; } .k-mobile .k-wait { font-size: 12px; } .k-mobile .k-label { font-size: 12px; letter-spacing: 0.06em; } /* Rata ja asemat */ .k-rail { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: butt; } .k-rail-m { stroke: var(--muted); stroke-width: 2.5; fill: none; stroke-linecap: butt; } /* Odotus: erilliset pisteet, jotta ne voivat ilmestyä yksi kerrallaan. k-dot-a = automatisoidun radan lyhyt viive (ihminen tarkistaa tms.) */ .k-dot { fill: var(--muted); } .k-dot-a { fill: var(--accent); } .k-stn { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; } .k-stn-m { fill: var(--bg); stroke: var(--muted); stroke-width: 2; } .k-stn-end { fill: var(--accent); stroke: var(--accent); stroke-width: 2.5; } .k-stn-end-m { fill: var(--muted); stroke: var(--muted); stroke-width: 2.5; } /* valmis, mutta hitaasti */ .k-ring { fill: none; stroke: var(--accent); stroke-width: 2; } /* Kellotäyttö: asema täyttyy myötäpäivään työhön kuluvan ajan verran. Paksu viiva (stroke-width = 2 × r) piirtää täyden kiekon; pathLength 1 ja dashoffset 1 → 0 täyttävät sen kellotaulun tapaan 12:sta alkaen (transform rotate(-90) SVG:ssä). Lepotilassa täynnä. */ .k-pie { fill: none; stroke-width: 9; } /* työvaiheen kiekko: reunan ja kiekon väliin jää rako */ .k-pie-m { stroke: var(--muted); } .k-pie-a { stroke: var(--accent); } .k-check { stroke: var(--accent-ink); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* "Työ on käynnissä": jokainen osa ilmestyy hieman vaaleampana (--hot) ja tummuu omaan väriinsä (--cool). Kirkkaus on siis aina juuri siinä, missä rata etenee, eikä koske taustaa. Värit per luokka: */ .k-rail, .k-stn, .k-ring, .k-stn-end { --hot: var(--hot-accent); --cool: var(--accent); } .k-rail-m, .k-stn-m, .k-stn-end-m, .k-dot { --hot: var(--hot-muted); --cool: var(--muted); } /* Kaavion piirtyminen kerran, kun se tulee näkyviin. kaaviot.js lisää -elementille luokan js-kaaviot ja kuvioon luokan k-play. Ilman JS:ää tai reduced-motion-asetuksella kaavio on heti valmis. Viiveet (--d) ja kestot (--dur) ovat SVG-elementtien style-attribuuteissa: automatisoitu rata juoksee asemalta asemalle noin 1,2 sekunnissa; manuaalinen kestää noin puolitoista kertaa pitempään ja sen odotuspisteet töksähtävät esiin yksi kerrallaan ilman häivytystä. Poisto: poista