/* ================================================================ ATG · slidová vrstva — prehľad PRODUKTOV — NASADENÉ 21. 9. 2026 ---------------------------------------------------------------- Nadstavba nad assets/slidy.css, generovaná z design/produkty.css (návrh schválený 21. 9. 2026). Selektory sú scopované pod `body.pslidy` — triedu nasadzuje až slidy-kino.js, takže keď skript nezbehne, stránka vyzerá ako pôvodná a je celá čitateľná. Všetko spoločné nesie slidy.css: `.sl`, `.dis`, `.lead`, `.tx`, `.odr`, `.tech`, `.akcie`, `.btn`, `.kt`, lišta sekcií `.met-pas`. Tu je len to, čo produktové, školiace ani AERO slidy nepotrebovali: dlaždice metód s fotografiou a počtom, riadky odvetví, značky, dvojica boxov na uzavretie a svetlá platňa. UI/UX pravidlá tohto súboru — nemeň ich bez dôvodu: · celá dlaždica je JEDEN cieľ (``), nie text s odkazom vnútri, a má najmenej 44 px výšky aj na dotyk; · každý cieľ má viditeľné zameranie klávesnicou (`:focus-visible`) — tlačidlá na pôvodnej stránke ho podľa merania zo 17. 9. 2026 nemali; · nič sa neodkrýva až po kliknutí — počet zariadení aj cieľ odkazu sú na dlaždici hneď; · mriežky sa skladajú samy (`auto-fit`), žiadne pevné počty stĺpcov. Hlavička `.hdr` a pätička `.ftr` sa NEMENIA, sú mimo `#app`. ================================================================ */ /* Svetlá platňa — slidy.css pozná len tmavú (`.sl.plat`). Slide s dlaždicami metód je svetlý zámerne: je to hlavný vstup stránky a na svetlom sa fotografie zariadení čítajú lepšie. */ body.pslidy .sl.svetlo.plat{background-color:#fff;background-image:none} body.pslidy .sl.svetlo.plat::after{ background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0); background-size:16px 16px} /* ---------------------------------------------------------------- 1 · DLAŽDICE METÓD — hlavný vstup do zariadení Na pôvodnej stránke viedli do tých istých siedmich podstránok TRI prvky: rozcestník hore, pripnutý split v strede a interaktívna mriežka dole (meranie 21. 9. 2026: 9 odkazov, z toho 1 duplicitný, a 9 tlačidiel so skrytým stavom `aria-pressed`). Tu je vstup JEDEN a nesie všetko, čo treba vedieť vopred: skratku lamelovým písmom (podklad klientky z 9. 8. 2026), celý názov, jednu vetu a POČET zariadení. Kto hľadá magnetickú práškovú, vidí „19 zariadení" skôr, než klikne. ---------------------------------------------------------------- */ body.pslidy .mt-mriezka{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));gap:2px;margin-top:28px} body.pslidy .mt{position:relative;display:flex;flex-direction:column;min-height:44px; background:rgba(10,16,67,.72);border:1px solid rgba(255,255,255,.14);border-radius:8px; overflow:hidden;text-decoration:none;color:inherit; transition:border-color .16s ease,transform .16s ease} body.pslidy .svetlo .mt{background:rgba(255,255,255,.88);border-color:rgba(5,10,48,.12)} body.pslidy .mt:hover{border-color:var(--acc);transform:translateY(-2px)} body.pslidy .mt:focus-visible{outline:2px solid var(--acc);outline-offset:3px} body.pslidy .mt-foto{display:block;height:132px;background-size:cover;background-position:center; border-bottom:1px solid rgba(255,255,255,.12)} /* Fotografiu nemáme (VT) — bodkovaná platňa. Cudzí záber sa nepodsúva. */ body.pslidy .mt-plat{background-color:rgba(5,10,48,.6); background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0); background-size:14px 14px} /* Na svetlom slide musí byť platňa svetlá — inak z dlaždice BEZ fotografie vznikne tmavý blok, ktorý ťahá oko viac než dlaždice s fotografiou, a to je presne naopak, než má byť. */ body.pslidy .svetlo .mt-plat{background-color:#eef0f5; background-image:radial-gradient(circle at 1px 1px,rgba(5,10,48,.16) 1px,transparent 0)} body.pslidy .svetlo .mt-foto{border-bottom-color:rgba(5,10,48,.1)} body.pslidy .mt-in{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 18px} body.pslidy .mt-kod{display:block;line-height:0} body.pslidy .mt-kod svg{display:block} body.pslidy .mt-n{display:block;font-size:14.5px;font-weight:700;color:#fff;margin:12px 0 0; line-height:1.3} body.pslidy .svetlo .mt-n{color:var(--ink)} body.pslidy .mt-l{display:block;font-size:12.5px;line-height:1.5;color:#c6cde6;margin:8px 0 0} body.pslidy .svetlo .mt-l{color:var(--ink2)} /* Počet drží spodnú linku karty, takže sa dá čítať naprieč mriežkou. */ body.pslidy .mt-p{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:auto;padding-top:14px;font-size:12px;letter-spacing:.06em;color:var(--dim-d)} body.pslidy .svetlo .mt-p{color:var(--ink3)} body.pslidy .mt-p b{font-family:var(--mono);font-size:15px;color:var(--acc)} body.pslidy .mt-p .sip{font-size:15px;color:var(--acc)} /* ADR nie je metóda — je to nadstavba nad RT. Dlaždica to hovorí rámom a štítkom, nie iným poradím (klientka 14. 9. 2026: „nie je samostatná metóda, ale treba vymyslieť samostatnú záložku"). */ body.pslidy .mt.mimo{border-style:dashed} body.pslidy .mt.mimo .mt-p b{color:#fff} body.pslidy .svetlo .mt.mimo .mt-p b{color:var(--ink)} body.pslidy .mt-zn{position:absolute;top:10px;right:10px;z-index:2;padding:4px 9px;border-radius:3px; background:rgba(5,10,48,.82);color:#fff;font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase} /* ---------------------------------------------------------------- 2 · PODĽA ODVETVIA — druhý rovnocenný vstup Na pôvodnej stránke bolo odvetvie jediné tlačidlo pod rozcestníkom a na štrnásť hotových odvetvových stránok neviedol odtiaľto ani jeden priamy odkaz (nález 21. 9. 2026). Nákupca pritom často vie, ČO skúša, a nie ktorou metódou. Preto je odvetvie samostatný slide a každý riadok ponúka priamo metódy, ktoré sa v ňom používajú. ---------------------------------------------------------------- */ body.pslidy .odv{display:grid;gap:1px;margin-top:26px} body.pslidy .odv .r{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:18px; align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)} body.pslidy .svetlo .odv .r{border-color:rgba(5,10,48,.12)} body.pslidy .odv .n{font-size:15px;font-weight:700;color:#fff} body.pslidy .svetlo .odv .n{color:var(--ink)} body.pslidy .odv .m{display:flex;flex-wrap:wrap;gap:2px} body.pslidy .odv .m a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px; border:1px solid rgba(255,255,255,.2);border-radius:4px;text-decoration:none; font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:#d3d9ee} body.pslidy .svetlo .odv .m a{border-color:rgba(5,10,48,.18);color:var(--ink2)} body.pslidy .odv .m a:hover{border-color:var(--acc);color:var(--acc)} body.pslidy .odv .m a:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media(max-width:620px){ body.pslidy .odv .r{grid-template-columns:1fr;gap:10px;align-items:start} } /* ---------------------------------------------------------------- 3 · ZNAČKY ---------------------------------------------------------------- */ body.pslidy .zn{display:flex;flex-wrap:wrap;gap:2px;margin-top:24px} body.pslidy .zn a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px; border:1px solid rgba(255,255,255,.22);border-radius:6px;text-decoration:none;color:#fff; font-size:14px;letter-spacing:.02em} body.pslidy .svetlo .zn a{border-color:rgba(5,10,48,.18);color:var(--ink)} body.pslidy .zn a:hover{border-color:var(--acc);background:rgba(16,185,129,.08)} body.pslidy .zn a:focus-visible{outline:2px solid var(--acc);outline-offset:2px} body.pslidy .zn a .ext{margin-left:8px;font-size:11px;color:var(--acc)} /* ---------------------------------------------------------------- 4 · UZAVRETIE — dve kolónky (text a kontakt) ---------------------------------------------------------------- */ body.pslidy .dvojica{display:grid;grid-template-columns:1.3fr 1fr;gap:2px;margin-top:28px; align-items:start} body.pslidy .dvojica .box{background:rgba(10,16,67,.72);border:1px solid rgba(255,255,255,.14); border-radius:8px;padding:24px} body.pslidy .svetlo .dvojica .box{background:rgba(255,255,255,.88);border-color:rgba(5,10,48,.12)} body.pslidy .dvojica .box .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--dim-d)} body.pslidy .svetlo .dvojica .box .k{color:var(--ink3)} body.pslidy .dvojica .box .kt{margin-top:16px;grid-template-columns:1fr} @media(max-width:900px){body.pslidy .dvojica{grid-template-columns:1fr}} /* Kontaktné dlaždice na svetlom slide. `.kt` má v slidy.css natvrdo biele písmo a biely rámik — počíta len s tmavým slidom. Na svetlom (a ten vznikne vždy, keď je fotografia jasnejšia než 168) by bol telefón aj e-mail biely na svetlom. Tých istých päť riadkov je v slidy-skolenia.css aj slidy-aero.css; keď sa raz presunú priamo do slidy.css, zo všetkých troch vypadnú. */ body.pslidy .svetlo .kt > *{border-color:rgba(5,10,48,.14);color:var(--ink)} body.pslidy .svetlo .kt span{color:var(--ink3)} body.pslidy .svetlo .kt b{color:var(--ink)} body.pslidy .svetlo .kt a:hover{border-color:var(--acc)} /* QR kódy pod kontaktom. Rozmer aj vykreslenie nesie app.css (`.qr`), tu sa len postaví riadok a doplní popis pod kód. */ body.pslidy .kt-qr{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap} body.pslidy .kt-qr > div{text-align:center} body.pslidy .kt-qr .qr{background:#fff;padding:6px;border-radius:6px} body.pslidy .kt-qr span{display:block;margin-top:7px;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--dim-d)} body.pslidy .svetlo .kt-qr span{color:var(--ink3)} /* Číslo sekcie v lepiacej lište — rovnako ako na Školeniach a AERO. */ body.pslidy .met-in a i{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--dim-d)} body.pslidy .met-in a.on i{color:var(--acc)}