/* ============================================================ Meriltec — themes.css (v1) 7 colour schemes. Each overrides only the brand-level tokens, so the whole site re-skins from a single [data-theme] attribute set on . Base/ink/surface tokens stay constant for a consistent clean-light-corporate foundation. ============================================================ */ /* 1 · Teras & oranž (default — Steel blue / Safety orange) */ html[data-theme="teras"] { --accent:#1a63c2; --accent-deep:#0e4b9e; --accent-bright:#5fa0ff; --accent-tint:rgba(26,99,194,.08); --cta:#f1581e; --cta-deep:#d6470f; --cta-ink:#ffffff; --bg-deep:#0d1722; --on-deep:#e7eef5; --on-deep-soft:#9fb0c0; } /* 2 · Süsi & punane (Charcoal / Red — bold industrial) */ html[data-theme="susi"] { --accent:#3a4654; --accent-deep:#252f3a; --accent-bright:#9fb0c0; --accent-tint:rgba(58,70,84,.08); --cta:#e11d2a; --cta-deep:#bb151f; --cta-ink:#ffffff; --bg-deep:#13171c; --on-deep:#e7eaee; --on-deep-soft:#9aa3ad; } /* 3 · Mereväe & kuld (Navy / Gold — premium) */ html[data-theme="merevae"] { --accent:#1e3a8a; --accent-deep:#162e6e; --accent-bright:#93b4ff; --accent-tint:rgba(30,58,138,.08); --cta:#d4a017; --cta-deep:#b3870f; --cta-ink:#15140e; --bg-deep:#0b1733; --on-deep:#e4e9f5; --on-deep-soft:#9fb0cf; } /* 4 · Mets & vask (Forest / Copper — natural) */ html[data-theme="mets"] { --accent:#15803d; --accent-deep:#106531; --accent-bright:#5fc77f; --accent-tint:rgba(21,128,61,.09); --cta:#ea580c; --cta-deep:#c2460a; --cta-ink:#ffffff; --bg-deep:#0e1f16; --on-deep:#e4f0e8; --on-deep-soft:#9fb8a8; } /* 5 · Grafiit & kollane (Graphite / Hi-vis yellow — construction) */ html[data-theme="grafiit"] { --accent:#3f3f46; --accent-deep:#27272a; --accent-bright:#c9c9d1; --accent-tint:rgba(63,63,70,.08); --cta:#eab308; --cta-deep:#ca9a04; --cta-ink:#1a1a1d; --bg-deep:#18181b; --on-deep:#e7e7ea; --on-deep-soft:#a1a1aa; } /* 6 · Tahm & türkiis (Slate / Teal — modern) */ html[data-theme="turkiis"] { --accent:#0d9488; --accent-deep:#0a7269; --accent-bright:#5eead4; --accent-tint:rgba(13,148,136,.09); --cta:#f43f5e; --cta-deep:#e11d48; --cta-ink:#ffffff; --bg-deep:#0c1f1d; --on-deep:#e2efed; --on-deep-soft:#9bb6b1; } /* 7 · Telliskivi & sinine (Terracotta / Blue — warm, reversed) */ html[data-theme="telliskivi"] { --accent:#c2410c; --accent-deep:#9a3412; --accent-bright:#fdba74; --accent-tint:rgba(194,65,12,.08); --cta:#2563eb; --cta-deep:#1d4ed8; --cta-ink:#ffffff; --bg-deep:#1c1411; --on-deep:#f1e8e3; --on-deep-soft:#c3aaa0; } /* ============================================================ Theme picker UI (built by js/theme.js) Always uses constant ink/surface tokens so it stays readable regardless of the active brand scheme. ============================================================ */ .theme-picker { position: fixed; left: 18px; bottom: 18px; z-index: 90; } .theme-toggle { width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform .25s var(--ease), background .25s var(--ease); } .theme-toggle:hover { transform: translateY(-3px) scale(1.05); } .theme-toggle svg { width: 1.4rem; height: 1.4rem; } .theme-panel { position: absolute; left: 0; bottom: 64px; width: 268px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 1rem; opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom left; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .theme-picker.open .theme-panel { opacity: 1; transform: none; pointer-events: auto; } .theme-panel__title { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem; padding-inline: 0.3rem; } .theme-opt { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.6rem; border-radius: 9px; text-align: left; transition: background .18s var(--ease); } .theme-opt:hover { background: var(--bg-alt); } .theme-opt.active { background: var(--bg-alt); } .theme-opt__sw { display: inline-flex; flex-shrink: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); } .theme-opt__sw i { width: 18px; height: 30px; display: block; } .theme-opt__name { font-size: 0.9rem; font-weight: 600; color: var(--ink); flex: 1; } .theme-opt__check { width: 18px; height: 18px; color: var(--accent); opacity: 0; } .theme-opt.active .theme-opt__check { opacity: 1; } @media (max-width: 560px) { .theme-panel { width: 240px; } }