/* ═══════════ App-shell global rules ═══════════ */ /* Lock zoom + horizontal pan; behave like a native shell */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; -webkit-overflow-scrolling: touch; } html, body { overflow-x: hidden !important; overscroll-behavior-x: none; overscroll-behavior-y: contain; -webkit-user-select: none; user-select: none; max-width: 100vw; } body { position: relative; width: 100%; /* Native-app first-paint fade — covered by loader anyway */ opacity: 0; transition: opacity .35s ease; } body.app-loaded { opacity: 1; } /* Re-allow text selection where it matters (input fields, quiz questions, etc.) */ input, textarea, [contenteditable], .selectable, p, span, h1, h2, h3, h4, h5, h6, li, td { -webkit-user-select: text; user-select: text; } /* iOS auto-zoom guard: inputs ≥ 16px */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; } /* ═══════════ Page transition loader ═══════════ */ .app-loader { position: fixed; inset: 0; background: linear-gradient(180deg, #faf8f5 0%, #fef5f0 100%); z-index: 99999; display: grid; place-items: center; transition: opacity .42s ease, visibility .42s ease; padding: 0 28px; -webkit-tap-highlight-color: transparent; } .app-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .app-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; } .app-loader-logo { width: clamp(140px, 42vw, 200px); height: auto; display: block; filter: drop-shadow(0 8px 22px rgba(220, 112, 52, 0.22)); animation: appLoaderPulse 1.6s ease-in-out infinite; } @keyframes appLoaderPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.96); } } .app-loader-spinner { display: flex; gap: 9px; } .app-loader-spinner span { width: 9px; height: 9px; border-radius: 50%; background: #DC7034; opacity: 0.4; animation: appLoaderBounce 1.2s ease-in-out infinite; } .app-loader-spinner span:nth-child(2) { animation-delay: 0.15s; } .app-loader-spinner span:nth-child(3) { animation-delay: 0.3s; } @keyframes appLoaderBounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-12px); opacity: 1; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { body, .app-loader, .app-loader-logo, .app-loader-spinner span { animation: none !important; transition: opacity .15s ease !important; } } /* ═══════════ SVG icon size utilities (used by sprite refs) ═══════════ */ .icon-12 { width: 12px; height: 12px; flex-shrink: 0; } .icon-14 { width: 14px; height: 14px; flex-shrink: 0; } .icon-16 { width: 16px; height: 16px; flex-shrink: 0; } .icon-20 { width: 20px; height: 20px; flex-shrink: 0; } .icon-22 { width: 22px; height: 22px; flex-shrink: 0; } .icon-24 { width: 24px; height: 24px; flex-shrink: 0; } .icon-32 { width: 32px; height: 32px; flex-shrink: 0; } .icon-48 { width: 48px; height: 48px; flex-shrink: 0; } /* ═══════════ Cross-document slide-in transitions ═══════════ */ /* Browsers with the View Transitions API (Chrome/Edge 111+, Safari 18.2+, Firefox 134+) animate every same-origin navigation: the old view slides out to the left while the new view slides in from the right. Older browsers fall back silently to the existing page-loader splash. */ @view-transition { navigation: auto; } /* On VT-capable browsers, drop the body opacity-0 fade — VT snapshots the new document when ready, and the snapshot must already be visible. */ @supports (view-transition-name: none) { body { opacity: 1 !important; transition: none !important; } } @keyframes navSlideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-28%); opacity: 0; } } @keyframes navSlideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } ::view-transition-old(root) { animation: navSlideOutLeft 320ms cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: top right; } ::view-transition-new(root) { animation: navSlideInRight 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both; transform-origin: top right; } ::view-transition-group(root) { z-index: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════ */ /* RESPONSIVE SCAFFOLDING (mobile-first; tablet ≥768; desktop ≥1200) */ /* ═══════════════════════════════════════════════════════════════ */ /* Spacing tokens — overridable by pages, but useful as a baseline */ :root { --screen-padding: 16px; --card-gap: 12px; --section-gap: 16px; } @media (min-width: 768px) { html { font-size: 15px; } :root { --screen-padding: 24px; --card-gap: 16px; --section-gap: 24px; } } @media (min-width: 1200px) { html { font-size: 16px; } :root { --screen-padding: 32px; --card-gap: 20px; --section-gap: 32px; } } /* ─── Tablet+ ─── Centered "phone-frame" card with side-nav grid ─── */ @media (min-width: 768px) { body { background: #e9e5dc; height: 100dvh; display: flex; align-items: stretch; justify-content: center; } /* App shell becomes the centered card with a 2-column grid: side-nav (RTL start = visual right) | content. The existing
,
, and