/* basic.css (v21) UD: 2026-10-27 v21: TOBA Studios — Clean light -pohjan päälle Studios-ilme: paperi #f4f2ee, muste #252b2b, viininpunainen #69223f korostuksena, Century Gothic (Adobe Fonts, icss_csonly.css) otsikoissa ja Lato leipätekstissä, oman logon korkeus 48 px. v20: 00SAMPLES-VIIMEISTELY — kevyt kiilto 0.15, Väljyys 1.20, valikkorivi omana pintanauhanaan (--vuo-nav-bg = pinta), hover tekstin 5 % sävyllä. v19: päävalikon kohteen tausta --vuo-nav-item: transparent (ei enää apuväri); apuväri on oletuksena vain korostus. v18: MUOKKAIMEN LAAJENNUS — navigaation muuttujat (--vuo-nav-bg, -item, -item-hover, -item-selected, -item-selected-text; selected korvaa --vuo-nav-pill) ja kiilto (--vuo-gloss, --vuo-gloss-shadow). Arvot = nykyinen ulkoasu, ei näkyvää muutosta. "Clean light" — Clean-teemat (2026-10-10): pelkistetty, desaturoitu, Montserrat, kirjainväli otsikoissa, pienet versaalilabelit, suorat kulmat, ei varjoa, ei vaakaviivoja (icss_basics.css:n html {}-lohko: --vuo-line läpinäkyvä). Sama rakenne ja sama icss-paketti kuin Soft Light; ero on KOKONAAN tässä :root-lohkossa + icss_basics.css:n johdetuissa sävyissä. v17: Clean light — paletti #f3f3f2 / #2c2d2e / #55636c, radius 0, ei varjoa, Montserrat 500 + 0.08em otsikoissa, labelit versaalilla 0.12em, nav-pilleri transparent, alleviivaus 2px. v16: Soft light — paletti #f6f3ee / #3a3835 / #4e7f8a, radius 12px, varjo 0 10px 30px rgba(60,50,40,0.07), serif-otsikot 600, labelit ilman uppercasea, nav-pilleri, napit 999px. v15: TEEMAPERHE-muuttujat :root-lohkoon (typografia, labelin paino, nappien pyöristys, valitun navikohteen muoto) — arvot = nykyinen ulkoasu, ei näkyvää muutosta. Soft-teemat (2026-08-21 suunnitelma) eroavat vain näistä + paletista; icss-paketti on kaikille neljälle teemalle yhteinen. v14: --vuo-shadow-oletus kevyemmäksi (0 2px 12px / 0.06 — oli 0 8px 30px / 0.08): nostokorttien heittovarjo hillitymmäksi; sama muuttuja pysyy ulkoasumuokkaimen varjosäätimen kohteena (dropdown, haku, nostot). v13: VUO-tyylinen vaalea oletusteema — paletti: teksti #2b2b2b, pääväri VUO-sininen #0d72c4 (kontrasti valkoisella ~5:1), sans-fontit molempiin rooleihin, kevyempi varjo. Johdetut sävyt (viivat, vaimea teksti, pinnat) määritellään kerran icss_basics.css:n html {}-lohkossa — EI toisena :root-lohkona, koska ulkoasumuokkain etsii ja kirjoittaa ":root"-lohkon (c_appearance_css.js) ja toinen sekoittaisi sen. v12: TODO 27 CS ULKOASUN MUOKKAIN — muuttujamuunnos. :root-lohko paletin CSS-muuttujille (ks. edit/c_vuo_ai/appearance_palette_map.php). Fallback-arvot = oletusteeman arvot. Lohko on @import-rivien JÄLKEEN, koska @import täytyy CSS-spesifikaation mukaan olla ennen muita sääntöjä. v11: breakpointtien modernisointi — sama malli kuin css/default.css v11 ja edit/c_hk_css/cms.css v13 — pidä nämä synkassa (CLAUDE.md 6/19). */ @import url(cssfiles/icss_basics.css); @import url(cssfiles/icss_contents.css); @import url(cssfiles/icss_navisub.css); @import url(cssfiles/icss_csonly.css); @import url(cssfiles/icss_navimain.css); @import url(cssfiles/icss_basicstructure.css); @import url(cssfiles/icss_pagetitles.css); /* All / basics */ @import url(cssfiles/resp-01-basic.css) all; /* Smartphone */ @import url(cssfiles/resp-02-smart-port.css) only screen and (max-width : 599px) and (orientation : portrait); @import url(cssfiles/resp-03-smart-land.css) only screen and (min-width : 600px) and (max-width : 1000px) and (orientation : landscape); /* Tablet */ @import url(cssfiles/resp-04-tablet-port.css) only screen and (min-width : 600px) and (max-width : 830px) and (orientation : portrait); @import url(cssfiles/resp-05-tablet-land.css) only screen and (min-width : 1001px) and (max-width : 1199px) and (orientation : landscape); /* -------------------------------------------------------------------------- CS ULKOASUN MUOKKAIN — paletin muuttujat. Fallback jokaisessa var()-kutsussa = kyseisen säännön oma alkuperäinen arvo, joten tämä lohko itsessään ei muuta ulkoasua. "Säätimet"-välilehti kirjoittaa julkaistessaan tämän lohkon sisällön uusiksi (ks. c_appearance_css.js). -------------------------------------------------------------------------- */ :root { /* Neljä paletin väriä (Ulkoasu-paneelin perusvärit) — bg = tausta, text = teksti, primary = linkit/napit/valittu kohde, accent = apuväri, vain korostus (laatikon vasen reuna). HUOM ei kaksoispisteitä kommentteihin tässä lohkossa — muokkaimen parseri (vuoAppearanceParseVars) jakaa tekstin puolipisteellä ja kaksoispisteellä */ --vuo-bg: #f4f2ee; --vuo-text: #252b2b; --vuo-primary: #69223f; --vuo-accent: transparent; /* Muoto */ --vuo-radius: 0px; --vuo-shadow: none; --vuo-space: 1.20; /* Fontit */ --vuo-font-head: "century-gothic", "Century Gothic", Lato, sans-serif; --vuo-font-body: Lato, "Helvetica Neue", Arial, sans-serif; /* Typografia ja valitun navikohteen muoto (teemaperhe) — soft-teemat vaihtavat nämä, icss-säännöt ovat kaikille teemoille yhteiset */ --vuo-head-weight: 400; --vuo-head-tracking: 0.14em; --vuo-label-case: uppercase; --vuo-label-tracking: 0.12em; --vuo-label-size: 0.72rem; --vuo-nav-underline: 2px; /* Päävalikko — valikkorivi omana pintanauhanaan (pinnat kantavat, ei viivoja), kohteen tausta läpinäkyvä, hover hento tekstin sävy. Valittu korvaa entisen --vuo-nav-pill-muuttujan, icss lukee sitä yhä varalla */ --vuo-nav-bg: var(--vuo-surface); --vuo-nav-item: transparent; --vuo-nav-item-hover: color-mix(in srgb, var(--vuo-text) 5%, transparent); --vuo-nav-item-selected: transparent; --vuo-nav-item-selected-text: var(--vuo-primary); /* Kiilto 0 = matta, Clean-teemoissa kevyt (Ulkoasu-säädin Matta – Kiiltävä). Varjo johdetaan tästä kerran, napit ja valikko käyttävät --vuo-gloss-shadow-arvoa */ --vuo-gloss: 0.15; --vuo-gloss-shadow: inset 0 0.7em 0.9em -0.5em rgba(255, 255, 255, calc(var(--vuo-gloss) * 0.45)), inset 0 -1px 0 rgba(0, 0, 0, calc(var(--vuo-gloss) * 0.15)); --vuo-label-weight: 500; --vuo-btn-radius: 0px; --vuo-logo-h: 48px; }