/* ============================================================ APP SHELL ------------------------------------------------------------ LuuX Theorie is designed mobile-first: every template body constrains its own content to max-width:480px and centers it. On phones (<=640px) this stylesheet has virtually zero effect. On larger viewports we present the experience inside a floating "device" column so it keeps reading like the app it is, instead of a narrow column lost in empty whitespace. We also add small, purely-visual hooks that assets/js/prefetch.js can toggle (data-luux-prefetching, [data-prefetched]) plus a few accessibility/scrollbar refinements. ============================================================ */ /* ── DESKTOP / TABLET "PHONE FRAME" ─────────────────────────── */ @media (min-width: 641px) { html { min-height: 100%; background: linear-gradient(160deg, var(--sec) 0%, var(--primary) 100%); } html.dark { background: linear-gradient(160deg, oklch(0.12 0.02 250) 0%, oklch(0.22 0.04 250) 100%); } body { max-width: 480px; min-height: 100vh; margin: 0 auto; position: relative; /* Establishes a containing block for this body's fixed-position descendants (the sticky header + floating tab bar), so on wide screens they stay aligned to the 480px column instead of the full browser viewport. */ contain: layout; box-shadow: var(--shad-pop), 0 0 0 1px var(--border); } /* Soft edge so the column doesn't feel like it's floating in a void when the page is shorter than the viewport. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; max-width: 480px; margin: 0 auto; background-color: var(--bg); pointer-events: none; } } /* Give the floating tab bar a touch more separation from the frame edge on larger screens, where it would otherwise sit flush with the device shadow. */ @media (min-width: 641px) { footer nav.fixed { bottom: 1.25rem; } } /* ── SCROLLBAR (desktop only — mobile keeps scrollbars hidden) ── */ @media (min-width: 641px) { body { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } body::-webkit-scrollbar { width: 6px; height: 6px; } body::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 999px; } } /* ── ACCESSIBILITY ────────────────────────────────────────────── */ .luux-skip-link { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 0.5rem 1rem; border-radius: 0 0 0.75rem 0; background-color: var(--sec); color: var(--sec-fg); font-size: 0.875rem; font-weight: 600; } .luux-skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--sec); outline-offset: 2px; border-radius: 0.5rem; } /* ── PREFETCH UI HOOKS ────────────────────────────────────────── */ /* assets/js/prefetch.js adds/removes this attribute on while speculative requests for the next likely screen are in flight. It is intentionally subtle — most users should never consciously notice it, it just makes the chrome feel "alive". */ html[data-luux-prefetching="true"] .header-glass::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: luux-prefetch-sweep 1.1s ease-in-out infinite; opacity: 0.7; } @keyframes luux-prefetch-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Elements that have been successfully prefetched can optionally show a tiny readiness cue (currently unused by templates, but available for future tweaks without needing another stylesheet). */ [data-prefetched="true"] { transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { html[data-luux-prefetching="true"] .header-glass::after { animation: none; } }