/* AICT Mobile UX bottom nav — visible <768px only */ .aict-mobile-bottom-nav { display: none; } @media (max-width: 767px) { .aict-mobile-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: #ffffff; border-top: 1px solid #e2e8f0; box-shadow: 0 -2px 8px rgba(15,23,42,0.06); padding-bottom: env(safe-area-inset-bottom, 0); height: calc(56px + env(safe-area-inset-bottom, 0)); justify-content: space-around; align-items: stretch; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif; will-change: transform; transform: translateZ(0); } [data-theme="dark"] .aict-mobile-bottom-nav { background: #0f172a; border-top-color: #1e293b; box-shadow: 0 -2px 8px rgba(0,0,0,0.3); } .aict-mobile-bottom-nav__item { flex: 1 1 0; min-width: 0; /* [v4.16.82 R4] allow flex shrink so label can ellipsis */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none !important; color: #475569; font-size: 11px; font-weight: 500; line-height: 1; padding: 6px 2px 8px; min-height: 48px; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 120ms ease, background 120ms ease; } .aict-mobile-bottom-nav__item:hover, .aict-mobile-bottom-nav__item:focus-visible { color: #4338ca; background: rgba(67,56,202,0.04); outline: none; } .aict-mobile-bottom-nav__item:focus-visible { outline: 2px solid #4338ca; outline-offset: -2px; } .aict-mobile-bottom-nav__item.is-active { color: #4338ca; font-weight: 600; } .aict-mobile-bottom-nav__item.is-active .aict-mobile-bottom-nav__icon { transform: scale(1.05); } [data-theme="dark"] .aict-mobile-bottom-nav__item { color: #94a3b8; } [data-theme="dark"] .aict-mobile-bottom-nav__item.is-active { color: #818cf8; } .aict-mobile-bottom-nav__icon { width: 22px; height: 22px; display: inline-block; transition: transform 160ms ease; } .aict-mobile-bottom-nav__icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .aict-mobile-bottom-nav__label { font-size: 10.5px; letter-spacing: 0.2px; /* [v4.16.82 R4] Prevent label clipping on narrow viewports (iPhone SE etc.) - "Ucet" was being cropped because the 4-item flex row left ~80px per item and 10.5px font + 4px padding could overflow. Center + ellipsis as belt+braces. */ max-width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; } /* Push page content up so footer / sticky CTAs do not get covered */ body.aict-mobile-ux-active { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); } /* [2026-08-26] The reservation above covers the 56px bottom nav but nothing * else. The cookie banner is also position:fixed at the bottom and, measured * on /cs/ at 378px, is 181px tall — so 237px of bars sat over a page that had * reserved 56px. The 181px shortfall makes the very end of every page * unreachable: scrolled fully down, the footer's "Zásady ochrany soukromí" * and "Zásady cookies" links sat behind the banner with no way to reach them. * * That is worst on a first visit, since the banner is only open then — the * one moment a new visitor is looking around. * * aict-cookie-consent.js already publishes the measured height as * --aict-cc-height on and re-measures on resize/rotate (the banner * wraps to 2-3 lines on narrow screens), so this just adds it. */ html.aict-cc-banner-open body.aict-mobile-ux-active { padding-bottom: calc(56px + var(--aict-cc-height, 0px) + env(safe-area-inset-bottom, 0)); } /* Same reservation when the nav is absent but the banner is up. */ html.aict-cc-banner-open body:not(.aict-mobile-ux-active) { padding-bottom: calc(var(--aict-cc-height, 0px) + env(safe-area-inset-bottom, 0)); } /* Pull-to-refresh spinner */ .aict-mobile-ptr { position: fixed; top: 0; left: 50%; transform: translate(-50%, -100%); z-index: 9100; width: 38px; height: 38px; border-radius: 50%; background: #ffffff; box-shadow: 0 4px 12px rgba(15,23,42,0.15); display: flex; align-items: center; justify-content: center; transition: transform 220ms ease, opacity 220ms ease; opacity: 0; pointer-events: none; } .aict-mobile-ptr.is-pulling { transform: translate(-50%, var(--ptr-offset, 8px)); opacity: 1; } .aict-mobile-ptr.is-refreshing { transform: translate(-50%, 16px); opacity: 1; } .aict-mobile-ptr.is-refreshing .aict-mobile-ptr__icon { animation: aict-spin 800ms linear infinite; } .aict-mobile-ptr__icon { width: 22px; height: 22px; border: 2.5px solid #cbd5e1; border-top-color: #4338ca; border-radius: 50%; transform: rotate(var(--ptr-rotate, 0deg)); transition: transform 100ms linear; } @keyframes aict-spin { to { transform: rotate(360deg); } } } @media (min-width: 768px) { body.aict-mobile-ux-active { padding-bottom: 0; } } /* Modal swipe-down dismiss feedback (applies on touch devices only) */ @media (pointer: coarse) { [data-aict-swipe-dismiss="active"] { transform: translateY(var(--aict-swipe-dy, 0px)); transition: transform 0ms; } [data-aict-swipe-dismiss="release"] { transition: transform 200ms ease; transform: translateY(0); } }