/* Generovane z scripts/build_v3.py - NEUPRAVUJ RUCNE. Zmena ide do generatora, potom `python3 scripts/gen_static.py`. */ :root{ --bg:#141216; --bg-2:#1B181D; --surface:#221E26; --surface-2:#2B262F; --text:#BDB8C1; --heading:#FFFFFF; --muted:#8E8792; --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24); --field:rgba(255,255,255,.06); --field-line:rgba(255,255,255,.24); --search-bg:rgba(255,255,255,.07); --chip-bg:rgba(255,255,255,.06); --chip-text:#CFCAD3; --link:#F2718B; --eyebrow:#EF466D; --pas-sivy:#302D33; /* pas s nazvom balika v cenniku: neutralna siva, nie fialkasta --surface-2 */ /* cervena na text „pozri sa na to" (neovereny ucet a spol.). ⚠️ Musi byt v OBOCH paletach: znackova #EF466D ma na svetlom pozadi len 3,4:1, tmava #8E2340 by sa zas na nocnom paneli stratila. Tu 5,9:1 na #221E26. */ --zle-ink:#F2718B; /* malinova na TEXT v karte (napr. „Členstvo môžeš kedykoľvek zrušiť"). ⚠️ Znackova #EF466D ma na bielej karte len 3,4:1 - preto sa vo dne pouziva #B32B4D z design manualu („text na svetlom podklade"), v noci svetlejsia #F2718B (5,9:1 na #221E26). */ --brand-ink:#F2718B; --note-bg:rgba(180,121,31,.16); --note-line:rgba(233,216,176,.30); --note-text:#E7DCC6; --hdr-glass:rgba(20,18,22,.58); --foot-bg:#0F0D11; --foot-text:#A6A1AA; --foot-link:#E6E3E9; --foot-line:rgba(255,255,255,.14); --btn-out-text:#FFFFFF; --btn-out-line:rgba(255,255,255,.40); --shadow:0 2px 8px rgba(0,0,0,.34), 0 34px 60px -40px rgba(0,0,0,.9); --brand-soft:#2C1B22; --znacka-text:#FFFFFF; /* znacka - rovnaka v oboch temach */ --brand:#EF466D; /* plochy, stitky, akcenty */ --brand-cta:#D9345C; /* tlacidlo: biely text 4.57:1, na #EF466D len 3.64:1 */ --brand-cta-h:#C4264C; --brand-700:#B32B4D; --on-brand:#1B1418; --teal-700:#0B6F63; --teal-800:#085048; --teal-wash:#E7F5F3; --sun:#B4791F; --sun-ink:#7A5210; --sun-wash:#FAF0DE; --ink-cover:#141216; /* text na bielych prvkoch NA fotke - nezavisi od temy */ --font-display:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif; --font-text:'Mulish','Segoe UI',system-ui,-apple-system,sans-serif; --r:20px; --r-lg:28px; --r-xl:36px; --scrim:linear-gradient(180deg,rgba(20,18,22,.50) 0%,rgba(20,18,22,.06) 30%, rgba(20,18,22,.68) 72%,rgba(20,18,22,.93) 100%); } *,*::before,*::after{box-sizing:border-box} /* ⚠️ Zamknuty viewport na telefone. `user-scalable=no` + `maximum-scale=1` v NESTACI: iOS Safari ich od iOS 10 IGNORUJE, takze stipnutim sa stranka priblizila a potom sa dala tahat do stran. Zastavi to az `touch-action` bez `pinch-zoom` (`manipulation` = posuvanie prstom ostava, vratane vodorovnych pasov obalok; zmizne stipnutie aj dvojklik na priblizenie) a k tomu zrusenie Safari udalosti `gesturestart/change/end` v THEME_JS - tie `touch-action` na starsich iOS obide. ⚠️ `overscroll-behavior-x:none` drzi aj gesto „spat" - potiahnutie od kraja uprostred pasu obalok inak listovalo v historii. */ html{touch-action:manipulation;overscroll-behavior-x:none} body{margin:0} .page{background:var(--bg);color:var(--text);transition:background-color .35s ease,color .35s ease; font-family:var(--font-text); font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased; overflow-x:clip;overflow-y:visible} /* clip, nie hidden - hidden by zrusil sticky hlavicku */ a{color:var(--link);text-decoration:none} :focus-visible{outline:2px solid var(--brand);outline-offset:2px} img{display:block} h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);margin:0;letter-spacing:-.034em} /* Nadpis stranky ma JEDNU velkost na celom webe (zadanie Draxlera 2026-08-26). Predtym si ju kazda sablona pisala inline - 76 px na Domove, 60 na Lektorkach, 58 v Kniznici, 52 na prihlaseni - a nadpis pri prechode medzi strankami poskakoval. Velkost drzi CSS, sablony ju uz neprepisuju. */ h1{font-size:clamp(36px,4.4vw,56px);font-weight:800;line-height:1.02;letter-spacing:-.045em} h2{font-size:clamp(26px,2.8vw,42px);font-weight:800;line-height:1.06;letter-spacing:-.038em} h3{font-size:22px;font-weight:800;line-height:1.14} p{margin:0 0 15px} p:last-child{margin-bottom:0} .wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 40px} .narrow{max-width:760px} .sec{padding:76px 0;background:var(--bg);transition:background-color .35s ease} .sec.alt{background:var(--bg-2)} .sec.tight{padding:44px 0} /* Pasy na Domove idu husto za sebou - 76 px nad kazdym eyebrow robilo z domovskej stranky prazdny stlpec. `vrch` posadi nadpis takmer na hranu sekcie. ⚠️ Spodok je od 2026-08-26 tiez na POLOVICI (76 -> 38 px, zadanie Draxlera): horna hrana uz bola stiahnuta na 26 px, takze pod obsahom ostavala trojnasobna medzera a pas vyzeral, ze konci kdesi v prazdne. `vrch` je len na Domove, inde 76 px plati. ⚠️ Trieda ma vacsiu specificitu ako `.sec` v media query, takze na telefone prebije aj `.sec{padding:38px 0}` - polovicu tam preto nastavuje vlastne pravidlo. */ .sec.vrch{padding-top:26px;padding-bottom:38px} .lead{font-size:20px;line-height:1.58;max-width:58ch} /* Právne dokumenty - dlhý text od klienta. Číslované zoznamy musia mať čísla naspäť (globálny reset ich berie) - odkazy v texte sa citujú podľa nich. */ .pravnytext{margin-top:28px;line-height:1.72} .pravnytext h2{font-size:21px;margin:36px 0 12px} .pravnytext p{margin:12px 0} .pravnytext ol{list-style:decimal;margin:14px 0;padding-left:26px} .pravnytext ul{list-style:disc;margin:14px 0;padding-left:26px} .pravnytext li{margin:10px 0} .pravnytext a{text-decoration:underline} .mut{color:var(--muted)} .tnum{font-variant-numeric:tabular-nums} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)} .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:26px} .sechead p{margin:9px 0 0;font-size:16px} /* Odkaz zo sekcie inam („Celá knižnica", „Celý rozvrh") je tmavy ako nadpis, nie malinovy. Takych odkazov je na Domove pat a v CTA farbe by z nich bola stena, v ktorej skutocna hlavna akcia zanikne. Rovnaky vzor ako „Celá trieda" v Tipoch a radach (`.kapcela`). */ .sechead a{font-weight:700;font-size:15px;white-space:nowrap;display:inline-flex; align-items:center;gap:8px;color:var(--heading)} .sechead a:hover{color:var(--brand)} .sechead a svg,.sekodkaz svg{transition:transform .15s} .sechead a:hover svg,.sekodkaz:hover svg{transform:translateX(2px)} /* Na Domove ten odkaz nesedi v hlavicke sekcie, ale POD pasom obalok a vlavo (zadanie Draxlera 2026-08-26): cita sa az vtedy, ked zena prejde rad a chce viac. Nad radom bral pozornost nadpisu a na telefone sa lamal do druheho riadku. Od 2026-08-27 je RUZOVY, a to ZNACKOVOU malinovou `--brand` #EF466D (zadanie Draxlera - tmavsia `--brand-700` #B32B4D mu ako mamaclassovska ruzova necitala). ⚠️ Vedome sa tym opusta pravidlo z `design/PRINCIPLES.md`, ze text na svetlom podklade ide `--brand-700`: #EF466D ma na dennom `--bg` 3.44:1, teda pod AA 4.5 pre 15 px bold. V nocnej teme je to 5.11:1. */ .sekodkaz{display:inline-flex;align-items:center;gap:8px;margin-top:20px; font-weight:700;font-size:15px;color:var(--brand)} /* Hover ide na TMAVSIU `--brand-cta` - kontrast pri prejdeni mysou stupne (4.33:1), neklesne. Sipka sa posuva ako predtym. */ .sekodkaz:hover{color:var(--brand-cta)} /* Dlhy zoznam v Kniznici sa nenacita naraz: kazda sekcia ukaze prvu davku a dalsie pribudnu, ked k nim zena doscrolluje (zadanie Draxlera 2026-09-07). ⚠️ Davkuje az JS a strazneho `.viacriadok` dokresluje tiez on - v HTML su vsetky triedy. Bez skriptu tak nikde nevisi mrtvy gombik a vyhladavac vidi cely katalog. ⚠️ Skryva sa atributom `hidden`, ale `.lrow` ma `display:grid`, ktory by vychodzie `[hidden]{display:none}` prebil - preto vlastne pravidlo. */ [data-davka] > [hidden]{display:none} .viacriadok{display:flex;justify-content:center;margin-top:26px} .grid{display:grid;gap:22px} .grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))} .span2{grid-column:span 2} .page.m .span2{grid-column:auto} .split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:start} .lbl{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* ---------- hlavicka (s vyhladavanim) ---------- */ .hdr{position:sticky;top:0;z-index:60;background:var(--bg); transition:background-color .35s ease,backdrop-filter .3s ease} /* Po odskrolovani sa hlavicka stane sklom: podklad presvita a rozostri sa. Ziadna deliaca linka - oddelenie robi rozostrenie, nie ciara. */ .page.skrol .hdr{background:var(--hdr-glass); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)} /* prehliadac bez backdrop-filter (starsi Firefox) by dostal priesvitnu hlavicku bez rozostrenia - text by sa bil s obsahom pod nou, preto ostane plna */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .page.skrol .hdr{background:var(--bg)} } /* ⚠️ Odstup logo <-> menu bol 64 px (30 px bolo malo - logo sa citalo ako prva polozka menu). Od 2026-09-05 je 48: hlavicka prihlasenej CLENKY nesie navyse polozku „Archív" a znacku planu pri mene a pri 64 px uz z okna vytekala. Merane v prehliadaci: potrebna sirka 1396 px na pas siroky 1360 px. */ .navrow{display:flex;align-items:center;gap:48px;height:86px} .brand img{height:26px;width:auto} /* ⚠️ Medzera medzi polozkami bola 34 px, od 2026-09-05 je 26 - z rovnakeho dovodu ako `.navrow` vyssie. Pod 1440 px sa stahuje na 20 px. */ .nav{display:flex;align-items:center;gap:26px} .nav a{font-size:15.5px;font-weight:700;color:var(--text);padding:5px 0;white-space:nowrap; border-bottom:2px solid transparent; transition:color .3s ease,border-color .3s ease} .nav a.on{color:var(--heading);border-bottom-color:var(--brand)} /* 🔴 „Viac" su tri bodky (zadanie Draxlera 2026-09-06) - je to rozcestnik, nie dalsia rovnocenna polozka, a slovo zaberalo miesto vedla Reklam a Agentov. Od 09-06 to plati aj v MOBILNOM menu (`.mobnav a.viac` nizsie) - bodky su tam rovnaka polozka ako v sirokej hlavicke, len na vlastnom riadku. ⚠️ `line-height:0` drzi bodky presne na osi ostatnych poloziek - bez neho ich riadkovanie odkazu posunie o dva pixely nizsie nez text vedla. */ .nav a.viac{display:inline-flex;align-items:center;padding:5px 1px;line-height:0} .nav a.viac svg{display:block} /* 🔴 „Moje triedy" nesu bublinu s poctom - ciara aktivnej polozky preto sedi na TEXTE (`.navtext`), nie na celom odkaze (zadanie Draxlera 2026-09-05). Podciarknuta bublina vyzerala ako preskrtnuta. Ostatne polozky bublinu nemaju a ciaru drzi odkaz. ⚠️ `padding-bottom` na INLINE spane nemeni vysku riadku - ciara len klesne tam, kde ju maju ostatne polozky. */ .nav a.on:has(.navpocet),.nav a.on:has(.navnove){border-bottom-color:transparent} .nav a.on:has(.navpocet) .navtext,.nav a.on:has(.navnove) .navtext{padding-bottom:8px;border-bottom:2px solid var(--brand)} /* Stitok uctu v mobilnom menu je ten isty ramik ako v sirokej hlavicke a stoji v menu namiesto polozky „Profil". ⚠️ `.mobnav a` ma vyssiu specificitu nez `.ucet` a vnucuje mu svoje odsadenie, velkost aj farbu - preto sa tu hodnoty zo `.ucet` vracaju spat. ⚠️ `align-self`: menu je stlpec, bez toho by sa ramik roztiahol na celu sirku. Doprava (`flex-end`) na zelanie Draxlera 2026-09-05 - v hlavicke stoji tiez vpravo. */ .mobnav .ucet{align-self:flex-end;margin:8px 0;padding:0 16px;font-size:14px; font-weight:600;color:var(--heading)} .search{display:flex;align-items:center;gap:11px;min-width:280px;background:var(--search-bg); border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:var(--muted); font-size:15px;margin-left:auto} .navact{display:flex;align-items:center;gap:12px;margin-left:auto} /* 🔴 CTA v hlavicke je na DESKTOPE tak vysoke ako CELY prepinac dna a noci - 44 px (zadanie Draxlera 2026-09-12). Ruší to upresnenie z 09-08, ked sa CTA rovnalo vnutornej pilulke „Web" (34 px): oko porovnava dva susedne PRVKY v riadku, nie pilulku vnutri ramika, a nizsie CTA vedla nich vyzeralo zapadnute. ⚠️ 44 px = 34 (ikonka) + 2x4 vypln + 2x1 ramik prepinaca. Ked sa zmeni `.themesw`, musi sa zmenit aj toto cislo. ⚠️ `height`, nie len `min-height` zo `.btn-sm`: `.btn` ma vlastne `min-height:52px`, ktore by inak vyhralo. ⚠️ Na telefone je to 44 px uz od 09-08 (pravidlo nizsie v media query) a Draxler ho 09-12 potvrdil - tam sa nemeni nic. */ .navact .btn{height:44px;min-height:44px;padding:0 18px} /* 🔴 CTA, ktore patri IBA na telefon (Draxler 2026-09-08): clen timu a lektorka maju v hlavicke prepinac Web/pracovna cast a riadok je uz plny - na sirokom displeji sa im „Triedy" nekresli. Na telefone ho vidia tak isto ako kazda ina, lebo tam je to jedina vyzva v hlavicke (v mobilnom menu CTA nie je). */ .navact .btn.lenmob{display:none} .stagechip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px; padding:9px 16px;font-size:14px;color:var(--text);white-space:nowrap; transition:color .3s ease,border-color .35s ease} .stagechip b{color:var(--heading);font-weight:700} /* ---------- tlacidla ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-text); font-weight:700;font-size:15.5px;line-height:1;min-height:52px;padding:0 28px;border-radius:999px; border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:.16s ease} .btn-primary{background:var(--brand-cta);color:#fff} .btn-primary:hover{background:var(--brand-cta-h);color:#fff} .btn-light{background:#fff;color:var(--ink-cover)} .btn-out{background:transparent;color:var(--btn-out-text);border-color:var(--btn-out-line)} /* Ruzovy variant obrysoveho tlacidla - ramik aj text v znackovej malinovej (zadanie Draxlera 2026-09-09, vyzvy v bocnom paneli stranky rady). 🔴 Farba je `--brand-ink`, NIE `--brand` (#EF466D): tá má na bielej karte len 3,4:1. `--brand-ink` je na to presne stavana - vo dne #B32B4D (6,2:1 na bielej karte), v noci #F2718B (5,9:1 na #221E26), takze prejde v oboch temach. ⚠️ Vypln ostava priehladna; farbu nesie ramik a text. Az pri prejdeni mysou sa podfarbi `--brand-soft` - ten isty podklad ako vybraty `.radiocard`. */ .btn-ruz{background:transparent;color:var(--brand-ink);border-color:var(--brand-ink)} .btn-ruz:hover{background:var(--brand-soft);color:var(--brand-ink)} /* CTA „Materiály" v tabe Ukončené: priesvitné, ružový rámik aj text (Draxler 2026-09-08). ⚠️ `--brand-cta` (#EF466D), nie `--brand` - v nočnej téme je `--brand` na tmavom podklade nečitateľná, rovnaký dôvod ako pri `.badge.prof`. */ .btn-ram{background:transparent;color:var(--brand-cta);border-color:var(--brand-cta)} .btn-ram:hover{background:var(--brand-cta);color:#fff;border-color:var(--brand-cta)} /* „Pozastaviť" nie je obycajny `btn-out`: zastavuje to, co bezi a mini peniaze, takze ma byt vidiet na prvy pohlad. Malinova dvojica je ta ista ako stitok `.b-pauza`. */ .btn-pauza{background:#FBDDE5;color:#8E2340;border-color:#F4C2CE} .btn-pauza:hover{filter:brightness(.96)} .cover .btn-out,.hero .btn-out,.cap .btn-out{color:#fff;border-color:rgba(255,255,255,.4)} .btn-sm{min-height:44px;font-size:14.5px;padding:0 20px} .btn-full{width:100%} .btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* ⚠️ Hero na Domove: obe vyzvy su ROVNAKO siroke a sirsie nez text (zadanie Draxlera 2026-08-26). Je to `min-width`, nie pevna sirka - dlhsi nazov triedy tlacidlo roztiahne, nikdy neorezhe. Na telefone to prebija pravidlo v mobilnom bloku. */ .heroakcia .btn{min-width:240px} /* ---------- stitky ---------- */ .badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:7px 13px; border-radius:999px;white-space:nowrap;line-height:1.2;border:1px solid transparent} .b-live{background:var(--brand-cta);color:#fff} /* nie --brand: biela na #EF466D ma 3.64:1 */ /* Funkcia lektorky na jej profile - ruzovy stitok. ⚠️ Ta ista dvojica farieb ako `.b-live`, lebo `--brand-soft` + `--brand-700` je v nocnej teme necitatelne (tmavocervena na tmavom podklade), zatial co biela na `--brand-cta` ma 4.57:1. */ .badge.prof{background:var(--brand-cta);color:#fff} /* Hviezdicka v hodnoteni ide znackovou ruzovou, cislo ostava citatelne cierne. */ .badge .hviezda{color:var(--brand);font-size:13px} .b-video{background:rgba(255,255,255,.94);color:var(--teal-700)} .b-navod{background:rgba(20,18,22,.84);color:#fff} /* navod je praktikum, nie zanr - ide neutralne */ .b-audio{background:var(--teal-wash);color:var(--teal-700);border-color:#C3E4DF} /* audio je surodenec videa, drzi teal */ .b-memb{background:var(--sun-wash);color:var(--sun-ink);border-color:#EBD9AE} /* Stitok s vyzvou (CTA) v e-mailovej sablone: biela na znackovej ruzovej, aby bolo na prvy pohlad vidno, cim mail konci. ⚠️ Vlastna trieda, nie `b-live` - tie isté farby, ale iny vyznam; `b-live` znamena „vysiela sa" a v zozname sablon by to miatlo kazdeho, kto sa pozrie do markupu. */ .b-cta{background:var(--brand-cta);color:#fff} .b-glass{background:rgba(20,18,22,.66);color:#fff} .b-fit{background:#fff;color:var(--ink-cover)} /* Datum terminu na obalke zivej triedy: tmave pismo na bielom, nie sklo (Draxler 2026-08-26) - na svetlej fotke sa sklenny stitok stracal. */ .b-datum{background:#fff;color:var(--ink-cover)} /* Dlzka triedy na obalke: cierne pismo na bielej pilulke, slovo vypisane „60 minút" (Draxler 2026-09-13, skuska - predtym sklo `.b-glass` so „60 min"). */ .b-dlzka{background:#fff;color:var(--ink-cover)} .b-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} /* Téma a lektorka v hero fotke detailu triedy sú odkazy (Draxler 2026-09-18 noc). */ a.badge.b-line{text-decoration:none;transition:background-color .16s ease,border-color .16s ease} a.badge.b-line:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff} .dot{width:7px;height:7px;border-radius:999px;background:currentColor;display:inline-block;flex:none} .badgerow{display:flex;gap:9px;flex-wrap:wrap;align-items:center} /* ---------- OBALKA: zaklad celeho dizajnu (nezavisi od temy) ---------- */ .cover{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#221E26; display:block;color:#fff;isolation:isolate} .cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cover .scrim{position:absolute;inset:0;background:var(--scrim)} .cover .in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end; padding:26px;gap:12px} .cover .top{position:absolute;left:26px;right:26px;top:26px;display:flex;align-items:flex-start; justify-content:space-between;gap:12px} /* Dlzka drzi PRAVY roh aj ked je v rohu sama - video trieda uz nema stitok „Video" (Draxler 2026-09-08), bez tohto by jej dlzka skocila vlavo a v mriezke by kazda obalka mala dlzku inde. */ .cover .top .b-glass,.cover .top .b-dlzka{margin-left:auto} .cover h3,.cover h2{color:#fff;text-wrap:balance} .cover .by{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.86)} /* Riadok lektorky aj s jej hodnotenim. Na sirokom displeji je to STLPEC, takze obalka vyzera ako predtym - `gap:inherit` si berie medzeru zo `.in`, nech sa nedrzi na dvoch miestach. Na telefone sa to prepne na jeden riadok (viz RESPO_CSS). */ .cover .byline{display:flex;flex-direction:column;gap:inherit;min-width:0} /* Domov (Draxler 2026-09-15, `byline_pilulka`): meno v JEDNOM riadku s hodnotenim vedla, profesia pod nim v pilulke. `.byline.bypil` prebije aj riadok `.cover .byline` z telefonu. */ .cover .byline.bypil{flex-direction:column;align-items:flex-start;gap:7px} .bypil .byriadok{display:flex;align-items:center;gap:8px;max-width:100%;min-width:0} .cover .bypil .by{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bypil .hodn{flex:none} .bypil .profpil{max-width:100%;overflow:hidden;text-overflow:ellipsis} .cover .meta{font-size:13.5px;color:rgba(255,255,255,.8);font-weight:600} /* ---- obalka v Ponuke: hodnotenie lektorky, kratky popis, vyzva na telefone ---- */ /* 🔴 Hodnotenie lektorky = POCET hodnoteni a vedla neho PLNA ruzova hviezda (SVG `icon.hviezda`, makro `hviezdy_lektorky`), bez cisla, bez piatich hviezd a bez pilulky (Draxler 2026-09-13; prazdna hviezda aj siva pilulka boli vecer skusane a vratene). Plati vo fotke, v tele karticky, v riadku zoznamu, v stitkoch aj pri profile lektorky - preto jedno pravidlo bez predka. */ .hviezdahodn{display:inline-flex;flex:none;color:var(--brand);vertical-align:-2px} .hviezdahodn svg{width:14px;height:14px;display:block} /* 🔴 Pocet hodnoteni je RUZOVY a TUCNY (Draxler 2026-09-13: „daj tych napr. 1000 hodnoteni ruzovou farbou", „ten pocet hodnoteni daj bold a daj to do pilulky"). Selektory so styrmi triedami, aby prebili sivu a bielu `.pocet` vo fotke, v tele karticky a v riadku zoznamu, ktore stoja v subore az nizsie. ⚠️ #EF466D na svetlom podklade ma kontrast ~3,4:1 (pod AA) - vedome, ta ista ruzova ako hviezda a pilulky. */ .pocethodn,.cover .hodn .pocet.pocethodn,.obaltelo .hodn .pocet.pocethodn, .lby .lhodn .pocet.pocethodn{color:var(--brand);font-weight:700} .cover .hodn{display:flex;align-items:center;gap:8px;font-size:13.5px; color:rgba(255,255,255,.92);font-weight:600} /* Hviezda ide ZNACKOVOU ruzovou (zadanie Draxlera 2026-09-07). Zlta (#FFC24B) bola na fotke citatelnejsia, ale na Domove aj v Ponuke to bola jedina zlta vec na stranke. */ .cover .hodn .pocet{color:rgba(255,255,255,.72);font-weight:400} /* Fotka a text pod nou su JEDNA karticka (zadanie Draxlera 2026-09-08): vo fotke ostal stitok, nazov triedy a vyzva, pod nou je lektorka s hodnotenim a kratky popis. ⚠️ `.obalkarta` je len tam, kde popis naozaj je (dnes Ponuka) - inde ostava obalka holou fotkou a priamym dietatom mriezky, presne ako predtym. ⚠️ Obalka vnutri karticky uz vlastne zaoblenie nema - zaobluje a oreza cela karticka, inak by sa rohy fotky kreslili vnutri stvorcoveho ramu. ⚠️ Telo je div s DVOMA odkazmi (od 2026-09-08): lektorka s malym avatarom vedie na jej stranku, perex na triedu - preto maju obe vlastnu farbu, inak by zdedili farbu odkazov. Riadok lektorky je tu na SVETLOM podklade, takze potrebuje vlastne farby; `.cover .by`/`.cover .hodn` platia len vo fotke. */ /* 🔴 Tien ma karticka az pri prejdeni prstom/mysou (Draxler 2026-09-08, navrat k povodnemu): v pokoji stoji karta cisto na ramiku, tien je odozva na dotyk. */ .obalkarta{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:border-color .16s ease,box-shadow .16s ease} .obalkarta:hover{border-color:var(--line-2);box-shadow:var(--shadow)} .obalkarta .cover{border-radius:0} .obaltelo{display:flex;flex-direction:column;gap:9px;padding:14px 16px 16px} /* riadok lektorky: meno vlavo (dlhe sa oreze), hodnotenie vpravo */ /* 🔴 Profesia stoji POD menom (Draxler 2026-09-08): na mobile sa pilulka vedla mena nezmestila a `text-overflow` riadku ju orezal. Preto je `.by` stlpec - meno si drzi svoje orezanie na jednom riadku, pilulka ide pod neho. ⚠️ Avatar aj hodnotenie sa preto zarovnavaju na VRCH, nie na stred: pri dvoch riadkoch by stred posunul avatar medzi meno a profesiu. */ .obaltelo .byline{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0} .obaltelo .by{display:flex;flex-direction:column;align-items:flex-start;gap:5px; min-width:0;font-size:15px;color:var(--muted)} .obaltelo .by b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Meno lektorky je v tele karty BOLD (Draxler 2026-09-08) - v mriezke obalok na telefone sa `600` od profesie dost neodlisilo a riadok splyval. */ .obaltelo .by b{font-weight:800;color:var(--text);font-size:15.5px;letter-spacing:-.01em} /* Odkaz na lektorku: maly avatar + meno v jednom riadku, dlhe meno sa oreze (Draxler 2026-09-08). */ /* 🔴 Portret je vacsi a stoji cez OBA riadky - meno aj profesiu (Draxler 2026-09-08). Preto `center`: pri dvoch riadkoch by zarovnanie na vrch nechalo pod avatarom dieru. */ .obaltelo .lektorka{display:flex;align-items:center;gap:13px;min-width:0;flex:1 1 auto;color:inherit} /* Jemny kruzok okolo portretu (Draxler 2026-09-08): tenka linka s medzerou vo farbe kartičky. `box-shadow` preto, ze neposuva layout - ramik by portret zmensil. */ .obaltelo .lektorka .avatar{width:52px;height:52px;font-size:17px;flex:none; box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line)} .obaltelo .lektorka:hover .by b{text-decoration:underline} .cover .by b{font-weight:inherit} .obaltelo .hodn{display:flex;align-items:center;gap:5px;flex:none;line-height:24px; font-size:13.5px;font-weight:600;color:var(--text)} .obaltelo .hodn .pocet{color:var(--muted);font-weight:400} /* ⚠️ Popis sa orezava na STYRI riadky (Draxler 2026-09-08, predtym dva) - je to text facebookovej reklamy, teda niekolko odsekov; `truncate(320)` v sablone drzi len DOM. */ /* Popis triedy je na kartičke hlavny text, tak ide o stupen vyssie (Draxler 2026-09-08). 🔴 A vyraznejsie: `500` a farba `--text` namiesto `--muted` - na telefone sa styri riadky tlmenej sedej citali zle. Bold (`600+`) by z popisu spravil druhy nadpis vedla nazvu triedy, preto stredna vaha a silnejsi kontrast. */ .obaltelo .cperex{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical; overflow:hidden;font-size:15px;line-height:1.55;font-weight:500; color:var(--text);text-wrap:pretty} /* 🔴 V pase Novinky je popis mensi (Draxler 2026-09-13). Tri triedy v selektore, aby prebil aj pravidlo `.obaltelo .cperex` pre telefon nizsie - obalky Ponuky ostavaju. */ /* ⚠️ Vyzva je ``, nie ``: cela obalka UZ JE odkaz a vnoreny odkaz prehliadac pri parsovani vyhodi. Klik na nu teda vedie tam, kam obalka - o to ide. */ .cover .obalcta{display:none;align-self:flex-start;margin-top:2px} /* Obal nadpisu a vyzvy. Na sirokom displeji je `display:contents`, takze nadpis je priamo v `.in` a zalamuje sa cez celu sirku ako predtym; na telefone sa z toho stane riadok „nazov triedy vlavo, vyzva vpravo" (viz RESPO_CSS). */ .cover .hlrow{display:contents} .cover .eyebrow{color:#fff} .cover:hover .scrim{background:linear-gradient(180deg,rgba(20,18,22,.55) 0%,rgba(20,18,22,.15) 30%, rgba(20,18,22,.74) 72%,rgba(20,18,22,.95) 100%)} .a45{aspect-ratio:4/5} .a11{aspect-ratio:1/1} .a34{aspect-ratio:3/4} .a169{aspect-ratio:16/9} .a1610{aspect-ratio:16/10} .a167{aspect-ratio:16/7} /* 🔴 Nizka dlazdica temy na Audiu - o polovicu nizsia nez 16/10 (Draxler 2026-09-13). Pri 94 px vysky by 26 px odsadenie nechalo nadpisu jeden riadok, preto uzsie. */ .a165{aspect-ratio:16/5} .cover.a165 .in{padding:14px 18px} .cover.sm h3{font-size:19px} .cover.md h3{font-size:24px} .cover.lg h3{font-size:30px} .cover.xl .in{padding:56px} .cover.xl .top{left:56px;right:56px;top:56px} /* obalka, ktorej vysku urcuje obsah - ziadny pomer stran, len odsadenie */ .cover.vlastnavyska .in{height:auto} .cover.xl.vlastnavyska .in{padding:36px 40px} .page.m .cover.xl.vlastnavyska .in{padding:22px} /* prehravanie a postup */ /* koliesko je uz len na prehravaci v detaile video triedy, na dlazdiciach nie */ .playbtn{width:54px;height:54px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--teal-700); display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:36%; transform:translate(-50%,-50%);z-index:2} .playbtn svg{width:20px;height:20px;margin-left:2px} .cover.xl .playbtn{width:92px;height:92px;top:42%} .playbtn.stred{top:50%} /* hero video triedy - tlacidlo presne v strede karty */ /* Hero video triedy: rovnaka vyska ako pas live triedy, text dole, play v strede. ⚠️ `height:100%` v `.in` sa proti `min-height` nevyhodnoti - preto flex. ⚠️ Play tlacidlo NIE JE absolutne: sedi v pruznom pase nad textom, takze je vzdy v strede volneho miesta a nikdy nelezi na titulku. */ .cover.videohero{display:flex;flex-direction:column;min-height:460px} .cover.videohero .playhr{flex:1;min-height:130px;display:flex;align-items:center; justify-content:center;position:relative;z-index:2} .cover.videohero .playhr .playbtn{position:static;transform:none} .cover.videohero .in{flex:none;height:auto;justify-content:flex-end} @media (max-width:560px){.cover.videohero{min-height:360px}} .cover.xl .playbtn svg{width:34px;height:34px} .prog{height:4px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden} .prog i{display:block;height:100%;background:var(--brand);border-radius:999px} .datebox{background:#fff;color:var(--ink-cover);border-radius:16px;padding:9px 13px;text-align:center;min-width:62px} .datebox .d{display:block;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand-700)} .datebox .n{display:block;font-family:var(--font-display);font-size:24px;font-weight:800;line-height:1.05} .datebox .t{display:block;font-size:12.5px;font-weight:700;color:#6C6572} /* ---------- rail: vodorovny pas obalok ---------- ⚠️ Do 2026-08-25 to bol IBA opticky orez: `.railout` mal `overflow:hidden` a obsah za okrajom sa nedal nicim dosunut. Na telefone tak ostalo nedostupnych 428-1466 px obsahu a na sekcii „Nazivo" **1602 px aj na desktope** - posledna dlazdica nemala naznacovat, ze pokracovanie existuje, ked sa k nemu nedalo dostat. Teraz sa pas posuva rovnako ako `.swiper`; orez aj zavoj vpravo ostavaju. */ .railout{position:relative;overflow:hidden} .railout::after{content:"";position:absolute;right:0;top:0;bottom:0;width:90px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--bg)); /* ⚠️ zavoj je zamerne SLABY (zadanie Draxlera 2026-08-26) - ma naznacit, ze pas pokracuje, nie odrezat kartu; pri plnej kryvosti to vyzeralo ako chyba vykreslenia */ opacity:.55;transition:opacity .2s ease} .railout.nakonci::after{opacity:0} .sec.alt .railout::after{background:linear-gradient(90deg,transparent,var(--bg-2))} .rail{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:22px;overflow-x:auto; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; padding-bottom:2px;cursor:grab} .rail::-webkit-scrollbar{display:none} /* Dojazd pasu sa nesmie preliat na stranku - inak prst, ktory dosviponal obalky na koniec, potiahol celu stranku (alebo spustil gesto „spat"). */ .rail,.swiper,.chipscroll{overscroll-behavior-x:contain} .rail>*{scroll-snap-align:start} .rail.tahane{cursor:grabbing;scroll-snap-type:none} .rail.tahane a{pointer-events:none} /* ⚠️ „Živé vysielania" na Domove maju byt rovnako velke ako karty zaznamov (zadanie Draxlera 2026-08-26), len sa daju swipovat. Preto sirka NIE je pevna, ale rovnaka ako bunka `.grid.c3` pri tej istej sirke okna - inak boli na uzsom displeji zive karty vyrazne mensie nez zaznamy (mriezka tam uz lame do dvoch stlpcov a bunky rastu, pevnych 462 px nie). `.gap` mriezky je 22 px. */ .rail.wide{grid-auto-columns:calc((100% - 44px) / 3)} @media (max-width:1240px){ .rail.wide{grid-auto-columns:calc((100% - 22px) / 2)} } /* od 820 px lame `.grid.c3` do jedneho stlpca - karta ide na skoro celu sirku, kus dalsej vykuka, aby bolo vidiet, ze sa pas posuva */ @media (max-width:820px){ .rail.wide{grid-auto-columns:calc(100% - 46px)} } /* vodorovny swiper - na rozdiel od .railout sa NAOZAJ posuva (prst, trackpad, tahanie mysou). Posledna dlazdica ostava odrezana rovnako ako pri .rail, len sa da dosunut. */ .swipeout{position:relative} .swiper{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:22px;overflow-x:auto; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; padding-bottom:2px;cursor:grab} .swiper::-webkit-scrollbar{display:none} .swiper>*{scroll-snap-align:start} .swiper.tahane{cursor:grabbing;scroll-snap-type:none} .swiper.tahane a{pointer-events:none} /* pri tahani sa nema otvarat odkaz */ .swipeout::after{content:"";position:absolute;right:0;top:0;bottom:0;width:76px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--bg)); opacity:.55;transition:opacity .2s ease} /* slaby zavoj - viz .railout::after */ .sec.alt .swipeout::after{background:linear-gradient(90deg,transparent,var(--bg-2))} .swipeout.nakonci::after{opacity:0} /* ---------- hero a plnosirkova hlavicka detailu ---------- */ .hero{position:relative;overflow:hidden;border-radius:var(--r-xl);color:#fff;min-height:660px;display:flex} .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,22,.86) 0%, rgba(20,18,22,.66) 42%,rgba(20,18,22,.18) 100%)} .hero .in{position:relative;padding:64px;display:flex;flex-direction:column;justify-content:flex-end; max-width:820px} .hero h1{color:#fff} .hero .eyebrow{color:#fff} .hero .lead{color:rgba(255,255,255,.86);font-size:20px;max-width:52ch} .cap{position:relative;min-height:520px;display:flex;color:#fff} .cap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cap .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,22,.72) 0%, rgba(20,18,22,.34) 40%,rgba(20,18,22,.88) 100%)} .cap .in{position:relative;width:100%;max-width:1360px;margin:0 auto;padding:56px 40px; display:flex;flex-direction:column;justify-content:flex-end;gap:18px} .cap h1{color:#fff;max-width:20ch} .cap .eyebrow{color:#fff} .cap .lead{color:rgba(255,255,255,.86)} /* Horna hrana fotky: v noci sa rozplyva do tmaveho chrome. Cez den sa neroztapa nijako - ziadny tien, ziadna vlasova linka, hlavicka sedi rovno na fotke a hrana je tvrdy rez. Dolna hrana je v oboch temach ostry rez - fotka konci tam, kde zacina sekcia. */ .cap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,#141216 0,rgba(20,18,22,.72) 26px,rgba(20,18,22,0) 116px)} [data-theme="light"] .cap::after{display:none} /* ⚠️ Zavoj musi byt MONOTONNY. Kazdy lokalny extrem - tmavsie miesto, za ktorym zase zosvetli - sa na fotke precita ako vodorovny pas. Predchadzajuca verzia mala tmavy vrchol na 12 % (pas pod hlavickou) a zosvetlenie na 100 % (pas nad spodnou hranou); oboje prec. Teraz ide zavoj rovnomerne od lahkeho hore po citatelny podklad pod textom dole. */ [data-theme="light"] .cap .scrim{background:linear-gradient(180deg,rgba(20,18,22,.34) 0%, rgba(20,18,22,.40) 46%,rgba(20,18,22,.70) 100%)} .cap .in{z-index:2} /* ---------- karty a panely ---------- */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px; color:var(--text)} .panel.raise{box-shadow:var(--shadow)} /* Ciel prekliku z Trafficu / Mamiciek (`#r`): panel na chvilu blikne znackovym ramom. `outline` a nie `border` - border by o 2 px posunul obsah panela. */ .panel.najdene{outline:2px solid var(--brand);outline-offset:3px} /* Karty programov clenstva: tlacidlo sedi na SPODKU karty, aby boli vsetky CTA v riadku zarovnane aj ked ma jeden program dlhsi popis alebo viac vyhod. (Karty samotne su rovnako vysoke uz z gridu - `align-items:stretch`.) */ .planka{display:flex;flex-direction:column} .planka .planspodok{margin-top:auto;padding-top:22px} .note{background:var(--note-bg);border:1px solid var(--note-line);border-radius:18px;padding:18px 20px; font-size:15.5px;color:var(--note-text)} .note b{color:var(--heading)} .note.plain{background:var(--surface);border-color:var(--line);color:var(--text)} /* Ruzovy oznam znacky: pas o triedach zdarma (Ponuka, Moje triedy) a hlaska pri vycerpanych triedach zdarma. Je to `.note` s inou plochou, nie novy komponent - ramik, polomer aj odsadenie ostavaju tie iste, meni sa len farba. ⚠️ Text ide na `--znacka-text` (noc biela, den znackova ruzova), nie na `--text` ani `--note-text` - ten je bezovy k jantarovemu oznamu a na ruzovom podklade vyzera spinavo. Hodnoty a preco su pri `ZNACKA_TEXT`. ⚠️ Pocet tried zdarma sa NEZVYRAZNUJE (Draxler 2026-09-07) - cely pas je jedna veta. Preto tu nie je ziadna farba na cislo: ruzova na `--brand-soft` by sa musela pisat zvlast pre kazdu temu (#EF466D ma na dennom #FEF1F4 iba 3,31:1 a #B32B4D ma na nocnom #2C1B22 2,62:1). */ /* ⚠️ `font-weight:700` je na CELOM oznamu (Draxler 2026-09-07), nie na jednom odseku - ten isty styl nesie pas na Ponuke a v Mojich triedach (text v `

`) aj hlaska po neuspesnej prihlaske (text v ``). Gombik ma svojich 700 z `.btn`, takze sa tym nic nemeni. */ .note.znacka{background:var(--brand-soft);border-color:var(--brand); color:var(--znacka-text);font-weight:700} /* ⚠️ Veta o VYCERPANYCH triedach zdarma tucna nie je (Draxler 2026-09-07). Nie je to ponuka („Máš ešte 2 triedy zdarma"), ale konstatovanie - tucnym pismom znelo, akoby sme ho zene vycitali. Zvysok oznamu vratane gombika ostava, ako bol. */ .note.znacka .vycerpane{font-weight:400} .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .list li{display:flex;gap:13px;align-items:flex-start;font-size:16px} .tick{color:var(--brand);flex:none;margin-top:3px;display:flex} .who{display:flex;align-items:center;gap:11px} .who .nm{font-size:14.5px;font-weight:700;line-height:1.3} .who .cr{font-size:13.5px;opacity:.75;line-height:1.3} .avatar{width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:13.5px;font-weight:800;flex:none;overflow:hidden; background:var(--surface-2)} .avatar img{width:100%;height:100%;object-fit:cover;border-radius:999px} .avatar.lg{width:68px;height:68px;font-size:21px} .stat{font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1;letter-spacing:-.04em; color:var(--heading);font-variant-numeric:tabular-nums} .statrow{display:flex;gap:48px;flex-wrap:wrap} /* ---------- filtre ---------- */ .chips{display:flex;gap:9px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-text);font-size:14.5px; font-weight:600;color:var(--chip-text);background:var(--chip-bg);border:1px solid var(--line-2); border-radius:999px;padding:10px 17px;cursor:pointer} .chip.on{background:var(--brand-cta);border-color:var(--brand-cta);color:#fff} /* temy sa nezalamuju do viacerych riadkov, ale sa posuvaju do strany */ .chipscroll-wrap{position:relative} .chipscroll{display:flex;flex-wrap:nowrap;gap:9px;overflow-x:auto;padding:2px 0; scrollbar-width:none;-ms-overflow-style:none} .chipscroll::-webkit-scrollbar{display:none} .chipscroll .chip{flex:none} /* temy ako male obalky s fotkou - to iste ako na Domove, len v malom */ .temapill{flex:none;width:176px;aspect-ratio:16/10;border-radius:14px} .temapill .in{padding:12px;gap:2px} .temapill .nazov{font-family:var(--font-display);font-size:14.5px;font-weight:800;color:#fff; line-height:1.15;letter-spacing:-.01em} .temapill .pocet{font-size:12px;color:rgba(255,255,255,.82);font-weight:600} /* ramik po celej dlazdice: outline orezal skrolovaci kontajner a inset box-shadow prekryla absolutne umiestnena fotka - preto ide na pseudoprvok nad obsahom */ .temapill.on::after,.cover.on::after{content:"";position:absolute;inset:0;border-radius:inherit; z-index:3;pointer-events:none;box-shadow:inset 0 0 0 3px var(--brand-cta)} .page.m .temapill{width:148px} .chipscroll-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:72px; pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg))} /* Filter formátov stojí v sekcii `alt` (feed Ponuky) - maska vpravo musí končiť jej podkladom. */ .sec.alt .chipscroll-wrap::after{background:linear-gradient(90deg,transparent,var(--bg-2))} /* lektorky: velka karta s dominantnym portretom - vzor prevzaty z mamaclass.sk/hosts */ .lekkarta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:40px 32px 28px;display:flex;flex-direction:column;align-items:center; text-align:center;gap:2px;transition:border-color .16s ease,box-shadow .16s ease} .lekkarta:hover{border-color:var(--line-2);box-shadow:var(--shadow)} /* portret ma prstenec v podklade karty + vlasovu linku, aby fotka nesplyvala */ .lekfoto{width:188px;height:188px;border-radius:999px;object-fit:cover;margin-bottom:26px; background:var(--surface-2); box-shadow:0 0 0 6px var(--surface),0 0 0 7px var(--line-2), 0 18px 34px -20px rgba(0,0,0,.55); transition:transform .3s ease,box-shadow .3s ease} /* Lektorka bez fotky (migrovane profily) - iniciialy v rovnakom prstenci, nie rozbity obrazok. Rovnaka nahrada ako makro `portret`. */ .lekfoto.prazdna{display:flex;align-items:center;justify-content:center; font-family:var(--font-nadpis,inherit);font-weight:700;font-size:56px; letter-spacing:-.02em;background:#FBDDE5;color:#8E2340;user-select:none} .lekfoto.prazdna.velka{font-size:68px} .lekkarta:hover .lekfoto{transform:translateY(-3px); box-shadow:0 0 0 6px var(--surface),0 0 0 7px var(--brand-cta), 0 22px 38px -20px rgba(0,0,0,.6)} .lekkarta h3{font-size:24px;color:var(--heading);letter-spacing:-.03em} /* profesia je neutralny stitok - zlata v tomto dizajne znamena pristup, nie odbornost */ .lekkarta .prof{margin:12px 0 18px;background:var(--surface-2);color:var(--text); border-color:var(--line);font-weight:600} .lekkarta p{font-size:15.5px;color:var(--text);margin:0 0 24px} .lekkarta .btn{margin-top:auto} /* tlacidla drzia jednu linku aj pri roznej dlzke bia */ /* Pas lektoriek na Domove (Draxler 2026-09-14, ako „Odborníci na …" na starom webe): mensia karta nez `.lekkarta` - portret, meno, profesia, pocet hodnoteni. 2026-09-15 este vacsia: stlpec ako obalky tried (300 px), portret ako na /lektorky, a zaciatok bia (`.lekmini-bio`). */ .rail.lekrail{grid-auto-columns:300px} .lekmini{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; height:100%;padding:30px 18px 24px;color:var(--text); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); transition:border-color .16s ease,box-shadow .16s ease} .lekmini:hover{border-color:var(--line-2);box-shadow:var(--shadow)} .lekmini .lekfoto{width:188px;height:188px;margin-bottom:14px} .lekmini .lekfoto.prazdna{font-size:54px} .lekmini:hover .lekfoto{transform:translateY(-3px)} .lekmini b{font-family:var(--font-display);font-size:23px;line-height:1.25; color:var(--heading);letter-spacing:-.02em} .lekmini .profpil{max-width:100%;overflow:hidden;text-overflow:ellipsis} .lekmini-hodn{font-size:15px} /* Skratene bio (Draxler 2026-09-15): vzdy 3 riadky, aby karty v pase ostali rovnako vysoke. Sablona posiela 200 znakov (`striptags` zlozi odseky do jedneho riadku), `line-clamp` ich skrati skor, takze sa dve „…" za sebou nezjavia. */ .lekmini-bio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3; overflow:hidden;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--text)} /* detail lektorky: portret vedla mena, na uzkom displeji pod sebou */ .lekhlava{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start} .lekfoto.velka{width:230px;height:230px;margin-bottom:0} .lekhlava h1{margin:12px 0 0} /* bio vedla portretu (Draxler 2026-09-13) - dlhe skrati server, „Čítať ďalej" bez JS. ⚠️ `pre-line`: bia maju odseky (35 zo 64) a bez neho by sa zliali do jedneho bloku. */ .lekbio{position:relative;margin-top:20px;max-width:68ch} .lekbio-txt{margin:0;font-size:16.5px;line-height:1.65;color:var(--text);white-space:pre-line} .lekbio-prep{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .lekbio .dlho{display:none} .lekbio-prep:checked~* .kratko{display:none} .lekbio-prep:checked~* .dlho{display:inline} .lekbio-cta{display:inline-block;margin-top:8px;cursor:pointer;color:var(--link);font-weight:700} .lekbio-cta:hover{text-decoration:underline} .lekbio-prep:focus-visible~.lekbio-cta{outline:2px solid var(--brand-cta);outline-offset:3px; border-radius:4px} @media (max-width:820px){ .lekhlava{grid-template-columns:minmax(0,1fr);gap:22px} .lekfoto.velka{width:150px;height:150px} .lekhlava h1{font-size:34px} } .page.m .lekkarta{padding:30px 22px 22px} .page.m .lekfoto{width:152px;height:152px} .tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:14px} /* Prva sekcia POD pasom tabov. Bez nej sa medzera scitala z troch vrstiev (`.tabs` 28 px + `.sec.tight` 44 px + `margin-top` 30 px prveho prvku = 102 px) a obsah zacinal kdesi v polovici obrazovky. Draxler ju 2026-08-26 dvakrat polovil: 102 -> 50 (28 + 22) -> 25 px (14 + 11). Prvy prvok uz vlastny `margin-top` nema. */ .sec.podtaby{padding-top:11px} /* ⚠️ Podciarknutie aktivneho tabu je 3 px (zadanie Draxlera 2026-08-26) - 2 px sa pri 1 px linke pasu stracali. `margin-bottom:-1px` ju kresli PRES linku. */ .tabs a{padding:0 0 15px;font-size:15.5px;font-weight:600;color:var(--muted); border-bottom:3px solid transparent;margin-bottom:-1px} .tabs a.on{color:var(--heading);border-bottom-color:var(--brand)} /* Taby UCTU ako vyrazne vyzvy (zadanie Draxlera 2026-09-04) - pas pod ciarou sa cital ako drobne odkazy, hoci je to hlavna navigacia v „Moje triedy". Je to modifikator: holy `.tabs` drzi admin, lektorka aj statistiky a tam ostava tak, ako bol. ⚠️ Pocet ma vlastnu bublinu - v texte tlacidla cislo v zatvorke splyvalo s nazvom. */ .tabs.cta{gap:12px;border-bottom:0;flex-wrap:wrap} .tabs.cta a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px; border-radius:999px;border:1px solid var(--btn-out-line);margin-bottom:0; font-size:15.5px;font-weight:700;color:var(--btn-out-text);transition:.16s ease} .tabs.cta a:hover{border-color:var(--brand);color:var(--heading)} .tabs.cta a.on{background:var(--brand-cta);border-color:var(--brand-cta);color:#fff} .tabs.cta a.on:hover{background:var(--brand-cta-h);border-color:var(--brand-cta-h);color:#fff} /* 🔴 Taby v modali „Prečo odišla" - Dôvody / Nápady / Fakty (Draxler 2026-09-13). Ciste CSS: skryte radio stoja PRED pasom tabov a panelmi a `:checked ~` prepina label aj panel. Modal vklada blok cez `innerHTML`, posluchac naviazany pri nacitani by na nom nebezal. Vzhlad je holy `.tabs` (podciarknutie), len na `label` namiesto `a`. ⚠️ Radio je skryte len opticky, nie `display:none` - sipky na klavesnici prepinaju. */ .odchodtaby{position:relative} .odchodtaby>input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none} .odchodtaby .tabs{margin-bottom:18px} .odchodtaby .tabs label{padding:0 0 15px;font-size:15.5px;font-weight:600;color:var(--muted); border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer} .odchodtaby .tabs label:hover{color:var(--heading)} .odchodtaby .tabs .tnum{margin-left:3px;font-weight:500;color:var(--muted)} .odchodtab{display:none} #ot-dovody:checked~.tabs [for=ot-dovody],#ot-napady:checked~.tabs [for=ot-napady], #ot-fakty:checked~.tabs [for=ot-fakty]{color:var(--heading);border-bottom-color:var(--brand)} #ot-dovody:focus-visible~.tabs [for=ot-dovody],#ot-napady:focus-visible~.tabs [for=ot-napady], #ot-fakty:focus-visible~.tabs [for=ot-fakty]{outline:2px solid var(--brand);outline-offset:4px} #ot-dovody:checked~[data-tab=dovody],#ot-napady:checked~[data-tab=napady], #ot-fakty:checked~[data-tab=fakty]{display:block} /* Cislo pri „Moje triedy" v hlavicke - rovnaka bublina ako pocty na taboch uctu. ⚠️ Nesmie zvysit riadok menu: `line-height:1` a vlastna vyska 20 px. ⚠️ Mobilne menu `.mobnav` NIE JE vnutri `.nav` - je to samostatny `