/* ========================================================================== PASTEL SWITCH — shared appearance subsystem for the Tisk Šepic subpages. 8-colour BARVA switch + per-swatch readability tokens. Mirrors the homepage (direction-e-V_PASTEL) so the chosen colour carries across the whole site. Engine: assets/pastel-switch.js (single source of truth for the 8 colours). Load this at the END of so it wins the cascade over each page's inline #ccToggle / #ccPanel base styles. ========================================================================== */ /* prototype direction switcher (SMER C/D/E/F/P …) is dev-only — hide in prod */ .switcher{ display:none !important; } /* ---- readability tokens per swatch (7 LIGHT + Črna) ---------------------- */ html[data-pastel]:not([data-pastel="black"]){ /* the 7 light swatches */ --ink: #231f20; --mut: rgba(35,31,32,.7); --mut2: rgba(35,31,32,.54); --line: rgba(35,31,32,.14); --glass: rgba(255,255,255,.56); --glass-2: rgba(255,255,255,.4); } html[data-pastel="sugar"] { --scrim: rgba(250,247,243,.66); } html[data-pastel="butter"] { --scrim: rgba(250,245,236,.66); } html[data-pastel="jade"] { --scrim: rgba(244,250,245,.62); } html[data-pastel="lilac"] { --scrim: rgba(248,245,251,.64); } html[data-pastel="apricot"] { --scrim: rgba(252,246,242,.7); } html[data-pastel="popcorn"] { --scrim: rgba(252,249,240,.7); } html[data-pastel="smoke"] { --scrim: rgba(250,250,248,.64); } /* apricot + popcorn are the warmest/lightest — darken faint mono micro-labels and grey sub copy so nothing washes out (matches the light-set specificity) */ html[data-pastel="apricot"]:not([data-pastel="black"]), html[data-pastel="popcorn"]:not([data-pastel="black"]){ --mut: rgba(28,24,25,.82); --mut2: rgba(28,24,25,.66); --line: rgba(35,31,32,.22); } /* ČRNA — near-white text, dark glass, light hairlines */ html[data-pastel="black"]{ --ink: rgba(245,244,250,.94); --mut: rgba(245,244,250,.64); --mut2: rgba(245,244,250,.42); --line: rgba(245,244,250,.2); --glass: rgba(16,16,22,.56); --glass-2: rgba(16,16,22,.42); --scrim: rgba(10,10,14,.5); } /* black holo CTA stays black on pastels; on ČRNA invert it to a light pill */ html[data-pastel="black"] .btn-go, html[data-pastel="black"] .cta-prim{ color:#15131a; background:linear-gradient(180deg, rgba(252,252,255,.97) 0%, rgba(232,231,238,.95) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 44px -16px rgba(0,0,0,.55); } /* ---- BARVA switch (overrides each page's inline #ccToggle / #ccPanel) ----- */ #ccToggle{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px 9px 11px; } #ccToggle .cc-dot{ width:14px; height:14px; border-radius:50%; flex:none; background:var(--pastelBg, #A0C4A8); border:1px solid rgba(128,128,128,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } #ccPanel{ width:226px; gap:13px; padding:15px 16px 14px; } .cc-h{ font-family:var(--fm); font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut2); padding:0 1px; } .cc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:11px 12px; } .cc-sw{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; padding:0; cursor:pointer; color:var(--ink); } .cc-sw i{ display:block; width:38px; height:38px; border-radius:50%; background:var(--swc, #ccc); border:1px solid rgba(128,128,128,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 9px rgba(0,0,0,.2); outline:2px solid transparent; outline-offset:3px; transition:transform .22s var(--eo, ease), outline-color .2s ease; } .cc-sw:hover i{ transform:translateY(-2px); } .cc-sw:active i{ transform:scale(.92); } /* active ring = current ink (text colour), explicitly NOT orange */ .cc-sw.on i{ outline-color:var(--ink); } .cc-sw em{ font-family:var(--fm); font-style:normal; font-size:6px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut2); white-space:nowrap; max-width:46px; overflow:hidden; text-overflow:ellipsis; transition:color .2s ease; } .cc-sw.on em{ color:var(--ink); }