/* ═══════════════════════════════════════════════════════════════════════════ eduxa.sk — Mobile Optimization Načítava sa AŽ za existujúcimi stylami v , takže prepisuje defaults. Cieľová šírka: 320px – 768px. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. Globálne základy aby nebol nikdy horizontal scroll ───────────────── */ html, body { max-width: 100% !important; overflow-x: hidden !important; } *, *::before, *::after { -webkit-tap-highlight-color: rgba(91,91,214,.18); } /* iOS auto-zoom na input → 16px font fix */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } } /* Obrázky a média sa nikdy nepretiahnu cez parent */ img, picture, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* Tabuľky vždy s overflow wrapom */ table { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 769px) { table { display: table; overflow: visible; } } /* ── 1. ŠÍRKA ≤ 768px ─────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Section padding zmenšenie */ section { padding: 2.5rem 1rem !important; } .si, .container, .content, .page-content, main, [role="main"] { padding-left: 1rem !important; padding-right: 1rem !important; } /* Headings škálovanie */ h1 { font-size: clamp(1.7rem, 6.5vw, 2.4rem) !important; line-height: 1.15 !important; } h2 { font-size: clamp(1.45rem, 5.5vw, 2rem) !important; line-height: 1.2 !important; } h3 { font-size: clamp(1.15rem, 4.5vw, 1.45rem) !important; line-height: 1.25 !important; } h4 { font-size: clamp(1rem, 4vw, 1.2rem) !important; } /* Hero — vždy single column, menšie paddingy */ .hero, [class*="hero"] { padding: 6rem 1rem 2rem !important; text-align: center; } .hero-h, .hero h1 { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; line-height: 1.15 !important; } .hdesc, .hero p { font-size: .95rem !important; line-height: 1.55 !important; } /* Grid layouty → single column */ .pg, .kg, .fg-grid, .pst, .services-grid, .grid-2, .grid-3, .grid-4, .pg-track, .pob-row { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Pôvodný footer grid — vždy single column na mobile */ footer .fg-grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; } footer { padding: 2.5rem 1.25rem 1.5rem !important; } footer .fb { flex-direction: column; gap: .75rem; text-align: center; } /* ── BUTTONS: touch-friendly veľkosť (min 44×44px) ── */ button, .btn, .btn-p, .btn-nav, .btn-prihlasit, .fbtn, a.btn, input[type="submit"], input[type="button"] { min-height: 44px; padding: .65rem 1.1rem !important; font-size: .92rem !important; } /* Veľké hero/CTA tlačidlá */ .hero .btn-p, .hero .btn { padding: .85rem 1.4rem !important; font-size: 1rem !important; } /* Tlačidlá v navbare */ .btn-nav { font-size: .82rem !important; padding: .45rem .85rem !important; } /* ── FORMS: full-width, fat touch areas ── */ input, select, textarea { width: 100% !important; max-width: 100% !important; padding: .75rem .9rem !important; border-radius: 10px !important; } textarea { min-height: 120px !important; resize: vertical !important; } .fg, .form-group { margin-bottom: .85rem; } .fg label, .form-group label { font-size: .82rem !important; } /* ── NAVIGATION (existujúca .nl, .hbg pre hamburger) ── */ /* Hamburger menu sa už spúšťa v existujúcich @media na 960px */ /* Dropdown menu z navbara → na mobile na celú šírku */ nav.open .nl { max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── CART DRAWER (košík) ── */ .cart-drawer { width: 100% !important; max-width: 100% !important; } /* ── MODALS — vždy responzívne ── */ .modal, [class*="modal"] { max-width: calc(100vw - 1.25rem) !important; max-height: calc(100vh - 1.25rem) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .modal-bg { padding: .5rem !important; } /* ── KARTY (cards) ── */ .card, .pc, .tc, [class*="-card"] { padding: 1.1rem !important; border-radius: 14px !important; } /* Programs (Vzdelávacie programy) → single col */ .pg .pc { padding: 1.25rem !important; } .pg .pc h3 { font-size: 1.05rem !important; } /* Termíny grid → single col, menšia karta */ .tc { padding: .95rem !important; flex-direction: row !important; gap: .85rem; align-items: center; } .tc .td { min-width: 56px !important; } .tc .td .d { font-size: 1.7rem !important; } .tc .td .m { font-size: .72rem !important; } .tc .ti h4 { font-size: .92rem !important; line-height: 1.3 !important; } .tc .ti p { font-size: .8rem !important; } .tc .ttag { font-size: .72rem !important; padding: .2rem .5rem !important; } /* ── PRIHLÁŠKY (group-section / dl-item) ── */ .group-section { border-radius: 14px !important; } .group-header { padding: .95rem 1.1rem !important; } .group-icon { width: 36px !important; height: 36px !important; border-radius: 9px !important; } .group-label { font-size: .98rem !important; } .group-count { font-size: .75rem !important; } .dl-item { flex-direction: column !important; align-items: flex-start !important; gap: .85rem !important; padding: .9rem 1.1rem !important; } .dl-item-left { width: 100%; } .dl-name { font-size: .9rem !important; line-height: 1.35 !important; } .dl-meta { font-size: .76rem !important; flex-wrap: wrap; } .dl-btn { width: 100%; justify-content: center !important; padding: .65rem 1rem !important; } /* ── HODNOTIACE TABUĽKY (časté divné tabulky) ── */ .ht-table, table.ht, .table-wrap { font-size: .82rem !important; } .ht-table th, .ht-table td, table.ht th, table.ht td { padding: .55rem .55rem !important; } /* ── KONTAKTNÝ FORMULÁR (index.html footer) ── */ .kg .ki { padding: 1.5rem 1.1rem !important; border-radius: 14px !important; } .ci { padding: .65rem 0 !important; } .ci-l { font-size: .7rem !important; } .ci-v { font-size: .9rem !important; } /* ── STATISTICS / čísla v hero / o-nas ── */ .a-big, [class*="big-number"] { font-size: clamp(3rem, 13vw, 4.5rem) !important; } /* ── ČO JE NA TEJTO STRÁNKE BLOKY ── */ .pob-form-card { padding: 1.5rem 1.25rem !important; border-radius: 18px !important; } .pob-intro { padding: 0 1rem !important; margin-bottom: 1.5rem !important; } .pob-intro h2 { font-size: 1.55rem !important; } .pob-form-wrap { padding: 0 1rem !important; } /* Ako sa prihlásiť info-box */ .info-box, .ako-box, [class*="info-box"] { padding: 1rem 1.1rem !important; border-radius: 14px !important; font-size: .85rem !important; } .info-box h4 { font-size: .92rem !important; } /* Aktualizovať tabs */ .aud-tabs { gap: .4rem !important; flex-wrap: wrap; justify-content: center; } .aud-tabs .at { padding: .45rem .8rem !important; font-size: .8rem !important; } /* RECENZIE — full-width karta */ .rev-card { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 1.25rem !important; } /* WEBINÁRE — full width karta */ .wc-card, .webinar-card { padding: 1.25rem !important; } /* OBJEDNÁVKA — full width */ .order-summary, .order-form { padding: 1.25rem !important; } /* ── PROFIL stránka ── */ .profile-tabs { flex-wrap: wrap !important; gap: .35rem !important; } .profile-tab { font-size: .8rem !important; padding: .5rem .75rem !important; } .profile-content { padding: 1.25rem !important; } } /* ── 2. ŠÍRKA ≤ 480px (smaller phones) ────────────────────────────────────── */ @media (max-width: 480px) { section { padding: 2rem .9rem !important; } .si, .container { padding: 0 .9rem !important; } h1 { font-size: 1.6rem !important; } h2 { font-size: 1.35rem !important; } /* Nav: zmenšiť logo */ nav#nb .ni { padding: 0 .9rem !important; } /* Modal — okraje len 0.5rem */ .modal-bg { padding: .5rem !important; } .modal { border-radius: 14px !important; } /* Pob-row — definitívne singlestack */ .pob-row { display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Carts/footers ešte tighter */ footer { padding: 2rem 1rem 1.25rem !important; font-size: .85rem !important; } /* Buttons sa fitnu */ .fbtn, .btn-p { width: 100% !important; } /* Hero icon menší */ .pob-icon, .hero-icon, .h-icon { width: 56px !important; height: 56px !important; } } /* ── 3. ŠÍRKA ≤ 360px (krajne malé) ───────────────────────────────────────── */ @media (max-width: 360px) { h1.hero-h, .hero h1 { font-size: 1.5rem !important; } h2 { font-size: 1.2rem !important; } section { padding: 1.75rem .75rem !important; } } /* ── 4. LANDSCAPE phones — vyšší pohľad ───────────────────────────────────── */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { .hero { padding-top: 5rem !important; padding-bottom: 1.5rem !important; } section { padding: 2rem 1.25rem !important; } } /* ── 5. Prístupnosť — focus states pre keyboard nav (aj na touch) ────────── */ @media (max-width: 768px) { a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #5b5bd6 !important; outline-offset: 2px !important; } } /* ── 6. Cart badge stay visible on small screens ─────────────────────────── */ @media (max-width: 768px) { .cart-badge { font-size: .65rem !important; min-width: 16px !important; height: 16px !important; } } /* ── 7. Vlastný PRINT režim — nech vyzerá clean na výtlačku ───────────────── */ @media print { nav, footer, .cart-drawer, .modal-bg, .cart-overlay, .dl-btn, button:not([type="submit"]) { display: none !important; } * { box-shadow: none !important; } }