/* ═══════════════════════════════════════════════════════════════════ DC PREMIUM v3 - vizualny system Denticor (19 komercnych stranok) Vrstvy: farebne platno -> plavajuce panely -> karty -> akcenty ───────────────────────────────────────────────────────────────── PRAVIDLA TEJTO VRSTVY. Porusenie ktorehokolvek z nich vyrobi presne tu triedu chyb, ktora sa v tomto projekte uz dvakrat opakovala (biely text na bielom, tmavy text na tmavom): 1) FAROVY PAR. Kazde pravidlo, ktore meni `background`, MUSI v tom istom bloku nastavit aj `color`. Ak ma prvok deti s vlastnou farbou (napr. v tlacidle dopravy), musi nastavit aj ` *{color:...!important}`. Nikdy nemenit len jednu polovicu paru. 2) ZIADNY SUBOJ S JS. Vlastnosti, ktore JS zapisuje inline (background, color, borderColor, display, opacity, cursor), sa tu NIKDY neprepisuju cez !important. Kde treba prebit stranku, pouziva sa VYSSIA SPECIFICITA - `.btn.bo` (0,2,0) uz prebije `.bo` (0,1,0) a inline styl z JS potom prirodzene vyhra. 3) STAVY VLASTNI STRANKA. `.selected`, `:disabled`, `:hover` a `.active` sa neprekresluju. Premium k nim pridava len vlastnosti, ktore nikto iny nenastavuje (box-shadow, transform). Ak premium predsa musi nakreslit `.active` (kvoli prvemu vykresleniu pred behom JS), kresli PRESNE tu istu hodnotu, aku neskor zapise JS - aby sa vzhlad po kliknuti nezmenil. 4) ZIADNE `[style*=...]` pre JS-riadene prvky. Ostali len bridge selektory pre RUCNE pisane inline styly, zamerne v zapise BEZ medzery (`background:var(--brand)`). CSSOM serializuje vzdy S medzerou (`background: var(--brand)`), takze taky selektor NEMOZE chytit prvok, ktoremu styl nastavil skript. Cielovy stav: dat tym tlacidlam triedu `.dc-btn-primary` a bridge zmazat. 5) VLASTNE TOKENY. Premium nepremaluje zdielane tokeny stranok (--bg / --bg-alt / --border / --border-light). Ma vlastny `--dc-*` namespace, takze teple platno stranok a studene platno premium vrstvy si uz neprotirecia. ═══════════════════════════════════════════════════════════════════ */ /* ── TOKENY (vylucne premium namespace, ziadny zdielany token) ── */ :root{ --dc-elev1:0 1px 2px rgba(14,42,51,.05),0 10px 28px -14px rgba(14,42,51,.13); --dc-elev2:0 2px 5px rgba(14,42,51,.05),0 28px 64px -30px rgba(14,42,51,.22); --dc-teal:linear-gradient(180deg,#2E5866 0%,#244651 55%,#1C3A44 100%); --dc-ring:#2E5866; /* focus ring na svetlom podklade */ --dc-ring-dark:#E8F2F5; /* focus ring na tmavych plochach */ --dc-glass:rgba(255,255,255,.7); } /* ── PLATNO: porcelan s farebnymi nadychmi (teal, gold, green) ── !important #1/7: `background` na . Ziadny JS ho nezapisuje a stranky si ho samy nulujuu (`body{background:transparent}`), takze bez !important by platno na vacsine stranok zaniklo. Farebny par netreba - text na priamo nelezi (vsetok obsah je v .site-box / .wt / kartach). */ body{ background: radial-gradient(1200px 640px at 12% -6%, rgba(36,70,81,.08), transparent 60%), radial-gradient(1000px 560px at 108% 14%, rgba(139,115,53,.06), transparent 60%), radial-gradient(900px 640px at -8% 58%, rgba(45,110,76,.05), transparent 62%), radial-gradient(1100px 700px at 110% 88%, rgba(36,70,81,.06), transparent 60%), linear-gradient(180deg,#F8FAFA 0%,#F1F5F5 100%) !important; } html,body{overflow-x:clip} /* ── PLOCHE PASY SEKCII -> priehladne, nech vrstvy zdielaju platno ── !important #2/7: prebija RUCNE napisany inline `style="background:var(--bg-alt)"` na
. Sekcie nie su JS-riadene a menime len pozadie z jedneho svetleho odtienu na iny svetly - farebny par sa nerozpadne (kontrast textu voci platnu je merane rovnaky alebo lepsi). */ section[style*="background:var(--bg-alt)"], section.sec[style*="--bg-alt"]{background:transparent!important} /* to iste pre jediny pas, ktory je stylovany triedou, nie inline (index.html:767 .hp-ba) - specificita staci, !important netreba */ body .hp-ba{background:transparent} /* ── PANELY: velke plavajuce boxy homepage - jednotna elevacia a ram ── `body` prefix zdviha specificitu na (0,3,4), takze pravidlo prebije index.html:570 (rovnaky selektor, neskor v dokumente) BEZ !important. */ body main.hp-float section.hero.hero-v3 > .hp3-box-wrap > .wt, body main.hp-float section.sec > .hp3-box-wrap > .wt{ box-shadow:var(--dc-elev2); border:1px solid rgba(14,42,51,.07); border-radius:24px; } /* ── HLBKA: karty ── */ body .pk-card, body .hp-ba-card, body .hp-ba-quote, body .hp-def-card, body .hp-m5-frame, body .hp-sit-imginner, body .hp-ba-price{box-shadow:var(--dc-elev1)} body .pk-card{transition:box-shadow .25s ease,transform .25s ease} /* .pk-card.selected (0,2,0) si vlastnu zlatu ziaru drzi - premium (0,1,1) ju zamerne neprebija. */ @media(hover:hover){ body .pk-card:not(.selected):hover{box-shadow:var(--dc-elev2);transform:translateY(-3px)} } /* ══ TLACIDLA ══════════════════════════════════════════════════════ */ /* ── PRIMARNE: gradient + biely text, VZDY ako par ── Specificita, nie !important: .btn.bp (0,2,0) > .bp (0,1,0) body .mobile-cta-bar .mcb-primary (0,2,1) > .mobile-cta-bar .mcb-primary (0,2,0) body .pk-card:not(.selected) .pk-cta (0,3,1) > .pk-cta (0,1,0) Dolezite, co tu ZAMERNE NIE JE: - `.pk-card.selected .pk-cta` (zlate CTA vybraneho baliku) - vlastni ho stranka, premium sa ho nedotyka -> koniec tmaveho textu na tmavom teale. - `#hp-dignity-start` (1,0,0) - jeho `:hover` aj `.is-ready` stavy teraz opat funguju, lebo id prebije nasu triedu. */ .btn.bp, .dc-btn-primary, body .mobile-cta-bar .mcb-primary, body .pk-card:not(.selected) .pk-cta{ background:var(--dc-teal); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px -10px rgba(20,50,60,.45); transition:transform .18s ease,box-shadow .18s ease; } .btn.bp *, .dc-btn-primary *, body .mobile-cta-bar .mcb-primary *, body .pk-card:not(.selected) .pk-cta *{color:#fff} /* LEGACY BRIDGE pre rucne pisane inline primarne tlacidla (obchod.html 7x, produkt-denticor-1/2/3 4x, fazety 1x). !important #3/7 a #4/7: inline `background` sa inak preblt neda. Preto tu MUSI byt aj `color:#fff!important` - par sa nesmie rozdelit. Zapis BEZ medzery je zamerny, pozri pravidlo 4 v hlavicke suboru. MIGRACIA: pridat tymto /