/* ============================================================ theme.css — Lashify.ee teemasüsteem AINUS koht, kus värvid/fondid/raadiused defineeritakse. Komponendid kasutavad AINULT var(--...) — mitte kunagi hex-koodi. Toonide muutmiseks: ava /dev/theme.html, vali visuaalselt, kleebi eksporditud plokk siia. Vt DESIGN.md ja BRAND.md. ============================================================ */ :root { /* ---- Põhivärvid (kuld + tumelilla, BRAND.md) ---- 2026-08-18: ankurvärv TUMEROHELINE → TUMELILLA (ploom/murakas), Mariuse otsus. Kuld ja elevandiluu jäid MUUTUMATUKS ("need on lukus"). Kõik kaheksa kontrastipaari mõõdetud üle ja läbitud — vt allpool. */ --varv-pohiline: #3B2340; /* tumelilla (ploom) — ankur: taustad, pealkirjad, jalus */ --varv-aktsent: #D89818; /* kuld — AINULT aktsent: nupud, jooned, ikoonid. 2026-07-23 rikastatud (soojem/küllastunum toon, vähem mustard-kollane, rohkem "päris kuld") — kontrast kontrollitud, vt allpool */ --varv-taust: #F7F3EA; /* kreem — põhitaust */ --varv-tekst: #22271F; /* tume põhitekst */ --varv-valge: #FCF5E7; /* soe elevandiluu. 2026-07-23: #FFFFFF → #FFFAF0 (valge tundus külm kuld+tumelilla kõrval). 2026-08-17: #FFFAF0 → #FCF5E7, sest Marius luges seda endiselt valgeks — #FFFAF0 on valgest peaaegu eristamatu. See on MAITSE- otsus: kui liiga kollane, liigu tagasi #FDF8EF suunas. Muuda AINULT siin. */ /* ---- Tuletised ---- */ --varv-aktsent-tume: #C08A16; /* kulla hover/aktiivne olek (uuendatud koos aktsendiga) */ --varv-kuld-tekst: #916610; /* kuld, mis TOHIB olla tekst heledal taustal. Tavakuld ja isegi --varv-aktsent-tume kukuvad kreemil läbi (2,25 ja 2,75:1). See toon annab 4,61:1 → WCAG AA läbitud. Kasutus: logo sõna "Salong" ja muu kuldne TEKST kreemil. Nuppudel/joontel kasuta --varv-aktsent (seal on kuld TAUST, mitte tekst). Leitud 2026-08-18, kui PageSpeed märkis logo kontrastivea (Lighthouse: "insufficient contrast ratio"). */ --varv-pohiline-tume: #2D1B31; /* põhivärvi TUMEDAM aste. ⚠ EI OLE riba värv (vt --varv-riba). Kasutusel gradientides ja hover-tekstina KULLAL — seal peab see jääma tumedaks, muidu kukub AA läbi (praegu 5,25:1). */ --varv-riba: #6C4075; /* kleepuv alumine riba — põhivärvist HELEDAM. Marius 2026-08-18: "kuna põhivärv on tumedam lilla, siis äkki heledam lilla [ribale]". Varem kasutas riba --varv-pohiline-tume'i, ehk oli TUMEDAM. Eraldi muutuja on vajalik, sest -tume't kasutavad ka gradiendid, mis ei tohi heledaks minna. Elevandiluu tekst siin: 7,22:1. */ --varv-tekst-sekundaarne: #5A6157; /* abitekst, märkused */ --varv-tekst-pohjal: #F7F3EA; /* tekst tumelillal taustal */ --varv-border: #E3DCCB; /* õrnad jooned kreemil */ --varv-overlay: rgba(59, 35, 64, 0.55); /* fotode kate (= --varv-pohiline) */ /* ---- Sotsiaalvõrgustike bränditoonid ---- AINUS koht koodis, kus värv EI tule meie paletist. Põhjus: logo äratundmine sõltub just nendest värvidest (Marius 2026-08-18 — "kasuta nende originaalvärve, muidu inimene ei tunne neid ära"). CLAUDE.md reegel 7 on täidetud: väärtus on siin muutujana, ükski komponent ei kirjuta hex-koodi. Instagram: lame bränditoon, mitte gradient — vt sotsiaal.njk, miks gradient siin ei tööta (plokk kordub lehel, duplikaat-ID). */ --varv-instagram: #E4405F; --varv-facebook: #1877F2; /* NB (WCAG). Kuld EI OLE kunagi tekstivärv heledal taustal — kontrast kreemi/elevandiluu vastu ~2.3:1 (feil). See reegel kehtib edasi. Kõik paarid ÜLE MÕÕDETUD 2026-08-18 lilla paletiga (nõue 4,5:1): kuld põhivärvil 5,61:1 (roheline andis 4,98) elevandiluu põhivärvil 12,90:1 tekst ribal (--varv-riba) 7,22:1 põhivärv kullal (nupud) 5,61:1 tume aste hover-kullal 5,25:1 kuld tumedal astmel 6,42:1 elevandiluu tumedal astmel 14,74:1 põhivärv kreemil (tekst) 12,64:1 Lilla on rohelisest veidi tumedam, seega kontrastid PARANESID. Vt BRAND.md. */ /* ---- Tüpograafia ---- */ --font-pealkiri: 'Playfair Display', Georgia, serif; --font-tekst: 'Inter', system-ui, -apple-system, sans-serif; --tekst-xs: 0.8125rem; /* 13px — märkused, sildid */ --tekst-s: 0.9375rem; /* 15px — abitekst */ --tekst-baas: 1rem; /* 16px — kehatekst */ --tekst-m: 1.125rem; /* 18px — sissejuhatused */ --tekst-l: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); /* h3 */ --tekst-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); /* h2 */ --tekst-xxl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); /* h1/hero */ /* ---- Ruum ja mõõdud ---- */ --ruum-1: 0.5rem; --ruum-2: 1rem; --ruum-3: 1.5rem; --ruum-4: 2.5rem; --ruum-5: 4rem; --sektsiooni-ruum: clamp(3rem, 2rem + 4vw, 5.5rem); /* sektsioonide vertikaalne õhk */ --laius-max: 1200px; /* konteineri max laius */ --pais-korgus: 72px; /* header desktopil */ --riba-korgus: 60px; /* kleepuv alumine riba mobiilis */ /* ---- SalonLife'i hõljuva nupu mõõdud (desktop) ---- KÕIK KOLM ON MÕÕDETUD PÄRIS DOM-IST 2026-08-18 (www.lashify.ee, 1280×800), mitte hinnatud ekraanipildilt. Nupp on 204×63. Neid kasutab KKK-vidin, et paikneda SalonLife'i nupuga TÄPSELT kohakuti: sama kaugus servast ja sama kõrgus (Marius 2026-08-18 — "küsimärk peaks olema samal levelil mis on broneeri aeg" + "mõlemad äärtest desktopil samal kaugusel"). Kui SalonLife oma nupu mõõtu või asukohta muudab, on need KOLM rida ainsad, mida parandada. */ --salonlife-vahe-serv: 55px; /* nupu kaugus PAREMAST servast */ --salonlife-vahe-all: 40px; /* nupu kaugus ALUMISEST servast */ --salonlife-nupp-korgus: 63px; /* nupu kõrgus (keskjoone arvutamiseks) */ --vidin-mull: 56px; /* KKK-vidina hõljuv nupp (läbimõõt) — base.css arvestab seda mobiili alumises polstris */ /* ---- Raadiused ja varjud ---- */ --raadius: 4px; --raadius-suur: 8px; --vari-1: 0 1px 3px rgba(59, 35, 64, 0.08); --vari-2: 0 8px 28px rgba(59, 35, 64, 0.12); /* ---- Muu ---- */ --yleminek: 160ms ease; --z-pais: 100; --z-menyy: 200; --z-riba: 300; }