/* * Elys – Smart Mobile Adaptations * Triggered by html[data-device="mobile"] set in before CSS loads. * Covers performance, layout intelligence, and content simplification for phones. */ /* ── 0. VIEWPORT LOCK: prevent horizontal scroll on all pages ── */ html[data-device="mobile"], html[data-device="mobile"] body { overflow-x: hidden !important; max-width: 100vw !important; } /* ── 0b. RESPONSIVE BASELINE: all elements respect viewport ── */ html[data-device="mobile"] *, html[data-device="mobile"] *::before, html[data-device="mobile"] *::after { max-width: 100%; box-sizing: border-box; } /* Allow specific known-large items to override (images, embeds) */ html[data-device="mobile"] img, html[data-device="mobile"] video, html[data-device="mobile"] iframe { max-width: 100% !important; height: auto; } /* ── 0c. HEADER: always full-width, no overflow ── */ html[data-device="mobile"] header.header-area-2 { overflow: visible !important; /* let dropdown appear */ width: 100vw !important; left: 0 !important; right: 0 !important; } html[data-device="mobile"] header.header-area-2 .header-main { overflow: hidden !important; } html[data-device="mobile"] .container, html[data-device="mobile"] .container.large { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; width: 100% !important; } html[data-device="mobile"] .header-area-2__inner { flex-wrap: nowrap !important; min-width: 0 !important; gap: 0 !important; } html[data-device="mobile"] .header__logo { flex-shrink: 0 !important; min-width: 0 !important; margin-inline-end: auto !important; } html[data-device="mobile"] .header__logo img, html[data-device="mobile"] .header__logo .normal-logo { max-width: 110px !important; width: auto !important; height: auto !important; } html[data-device="mobile"] .sc-mob-toggle { flex-shrink: 0 !important; margin-left: 8px !important; } /* ── 0d. SECTIONS: contain any absolutely-positioned decorations ── */ html[data-device="mobile"] section { overflow-x: hidden !important; } /* ── 0e. HERO RIGHT COLUMN: remove negative margin that bleeds on mobile ── */ html[data-device="mobile"] [data-direction="right"] { margin-top: 0 !important; } html[data-device="mobile"] .col-lg-6[data-direction="right"], html[data-device="mobile"] [data-direction="right"].col-lg-6 { margin-top: 0 !important; } /* ── 0f. BADGE ROWS: prevent overflow ── */ html[data-device="mobile"] [style*="white-space:nowrap"] { white-space: normal !important; } /* ── 0g. CHATBOT: keep within viewport ── */ html[data-device="mobile"] .elys-chat { max-width: calc(100vw - 32px) !important; right: 16px !important; left: auto !important; } /* ── 0h. BOOTSTRAP ROW GUTTER FIX: rows bleed -15px each side; neutralize ── */ html[data-device="mobile"] .row { --bs-gutter-x: 24px !important; /* reduce gutter on mobile */ margin-left: 0 !important; margin-right: 0 !important; } html[data-device="mobile"] .row > * { padding-left: 12px !important; padding-right: 12px !important; } /* ── 1. FADE ANIMATIONS: show immediately, skip GSAP init ── */ html[data-device="mobile"] .fade-anim { opacity: 1 !important; transform: none !important; transition: none !important; } /* ── 2. HERO CAROUSEL: show only active card, no overflow trick ── */ html[data-device="mobile"] .hero-card:not(.hero-card--active) { display: none !important; } html[data-device="mobile"] .phc-card:not(.phc-card--active) { display: none !important; } /* ── 3. HERO LAYOUT: stack columns, smaller padding ── */ html[data-device="mobile"] section[style*="min-height:90vh"], html[data-device="mobile"] section[style*="min-height:88vh"] { min-height: auto !important; padding-top: 100px !important; padding-bottom: 48px !important; } /* ── 4. ANIMATED WINDOWS: reduce aspect ratio, static look ── */ html[data-device="mobile"] .bw-win[data-banim], html[data-device="mobile"] [data-anim] .pw-win { aspect-ratio: 4/3 !important; } /* ── 6. DOT GRID: disable expensive background paint ── */ html[data-device="mobile"] [style*="background-image:radial-gradient(circle,#e5e7eb 1px"] { display: none; } /* ── 7. STATS STRIP: 2-column grid on mobile, no overflow ── */ html[data-device="mobile"] .sc-stats-row { grid-template-columns: 1fr 1fr !important; overflow-x: hidden !important; } /* ── 8. BLOG / PORTFOLIO CARDS: remove hover effects ── */ html[data-device="mobile"] [onmouseover] { transform: none !important; box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; } /* ── 9. CONTACT STEPS: show all immediately (override CSS animation) ── */ html[data-device="mobile"] #cStep1, html[data-device="mobile"] #cStep2, html[data-device="mobile"] #cStep3, html[data-device="mobile"] #cStep4, html[data-device="mobile"] #cStep5 { animation-duration: 0.15s !important; animation-delay: 0s !important; } html[data-device="mobile"] #cLine1, html[data-device="mobile"] #cLine2, html[data-device="mobile"] #cLine3, html[data-device="mobile"] #cLine4 { animation-duration: 0.15s !important; animation-delay: 0s !important; } /* ── 10. FORM: full-width inputs on small screens ── */ html[data-device="mobile"] .elys-form .col-md-4 { width: 100% !important; } /* ── 11. CTA BLOCKS: stack flex ── */ html[data-device="mobile"] [style*="display:flex;align-items:center;justify-content:space-between;gap:32px"] { flex-direction: column !important; text-align: center !important; } /* ── 12. PRELOADER: faster on mobile ── */ html[data-device="mobile"] #preloader { animation-duration: 0.4s !important; } /* ── 13. MAGIC CURSOR: hidden on touch ── */ html[data-device="mobile"] .magic-cursor, html[data-device="mobile"] .cursor-follower { display: none !important; } /* ── 14. PROGRESS BAR: smaller ── */ html[data-device="mobile"] .progress-wrap { width: 36px !important; height: 36px !important; right: 16px !important; bottom: 16px !important; } /* ── 15. CHATBOT BAR: full width on mobile ── */ html[data-device="mobile"] .elys-chat__bar { width: calc(100vw - 32px) !important; left: 16px !important; right: 16px !important; } /* ═══════════════════════════════════════════════════════════════ @media SAFETY NET — catches JS-off or missed data-device set Applies to any screen ≤ 575px regardless of data-device ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575px) { /* Viewport lock */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* Container containment */ .container, .container.large { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; width: 100% !important; } /* Bootstrap row gutter fix */ .row { margin-left: 0 !important; margin-right: 0 !important; } .row > * { padding-left: 12px !important; padding-right: 12px !important; } /* Header safety */ header.header-area-2 { width: 100vw !important; left: 0 !important; right: 0 !important; } header.header-area-2 .header-main { overflow: hidden !important; } .header__logo img, .header__logo .normal-logo { max-width: 110px !important; } .header-area-2__inner { flex-wrap: nowrap !important; min-width: 0 !important; } /* Section overflow */ section { overflow-x: hidden !important; } /* Hero negative margin fix */ [data-direction="right"] { margin-top: 0 !important; } /* Images */ img, video, iframe { max-width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════ MOBILE FIXES — Session B ═══════════════════════════════════════════════════════════════ */ /* ── Footer bottom bar: allow wrapping, prevent text clipping ── */ html[data-device="mobile"] .sc-footer__bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; } html[data-device="mobile"] .sc-footer__copy { white-space: normal !important; font-size: .75rem !important; text-align: center !important; } html[data-device="mobile"] .sc-footer__legal { flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; } /* ── "Pět specializací" service list: mobile reflow ── */ html[data-device="mobile"] .sc-spec-row, html[data-device="mobile"] [style*="gap:32px;padding:28px 0;border-bottom"] { flex-wrap: wrap !important; gap: 12px !important; padding: 20px 0 !important; } /* Hide large number on mobile to save space */ html[data-device="mobile"] [style*="font-size:clamp(2.5rem,5vw,4rem)"] { display: none !important; } /* Tech pill container: push to new row */ html[data-device="mobile"] [style*="min-width:160px;"][style*="flex-wrap:wrap"] { min-width: 0 !important; width: 100% !important; justify-content: flex-start !important; } /* Tech pills: allow wrapping and smaller text */ html[data-device="mobile"] [style*="background:#f0fdf4;color:#059669;border-radius:12px;padding:4px 12px"] { font-size: .68rem !important; padding: 3px 9px !important; } /* ── Tech ticker pills: ensure wrapping ── */ html[data-device="mobile"] [style*="display:flex;gap:12px;flex-wrap:wrap;justify-content:center"] span { font-size: .72rem !important; padding: 4px 12px !important; } /* ── Service page tech tag pills: prevent side-clipping ── */ html[data-device="mobile"] .wd-tech-tag, html[data-device="mobile"] .at-tech-tag, html[data-device="mobile"] .ai-tech-tag, html[data-device="mobile"] .mk-tech-tag { font-size: .68rem !important; padding: 4px 10px !important; } /* ── Media query safety net for same fixes ── */ @media (max-width: 575px) { .sc-footer__bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; } .sc-footer__copy { white-space: normal !important; font-size: .75rem !important; text-align: center !important; } .sc-footer__legal { flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; } /* Service list pills */ [style*="min-width:160px;"][style*="flex-wrap:wrap"] { min-width: 0 !important; width: 100% !important; } }