/** * Mobile Springboard — iPhone-style home screen, Windows-XP skin * * Active ONLY in desktop mode (__DESKTOP_MODE) on phones (<=768px). * Renders INSTEAD of the XP desktop chrome (taskbar/icons/windows). * The launcher home screen (/) is never affected by this file. * * Visibility is driven by the `mobile-springboard-active` class on * (added by js/os/mobile-springboard.js). Without that class nothing here * paints, so desktop widths and the launcher are untouched. */ /* ─── Shell visibility gate ───────────────────────────────────────────── When the springboard is active, hide the entire XP desktop chrome so only the springboard shows. Scoped to the body class so it can never leak into desktop-width or launcher contexts. */ body.mobile-springboard-active #taskbar, body.mobile-springboard-active #desktop-icons, body.mobile-springboard-active #window-container, body.mobile-springboard-active #menu-bar, body.mobile-springboard-active #dock, body.mobile-springboard-active #start-menu, body.mobile-springboard-active #greta, body.mobile-springboard-active .crt-glare, body.mobile-springboard-active #launcher-trigger { display: none !important; } /* Lock the page — springboard owns the full viewport, no scroll/overflow. */ body.mobile-springboard-active { overflow: hidden; } body.mobile-springboard-active #wallpaper { display: none !important; } /* ─── Springboard root ────────────────────────────────────────────────── Full viewport, fixed. The XP "Bliss" gradient lives here. */ .mob-springboard { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; overflow: hidden; /* XP Bliss: blue sky → soft horizon → rolling green hill */ background: linear-gradient( to bottom, #4a90d9 0%, #5ba3e0 18%, #87c3ec 38%, #b8ddf2 52%, #d9eecb 60%, #8fc66a 70%, #6fb04a 84%, #4e8f33 100% ); font-family: 'Tahoma', 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-user-select: none; user-select: none; /* iOS safe-area padding so the dock clears the home indicator */ padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); } .mob-springboard[hidden] { display: none; } /* Soft cloud highlight, pure CSS, evokes the Bliss sky bloom */ .mob-springboard::before { content: ''; position: absolute; top: 8%; left: -10%; width: 70%; height: 28%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.55), rgba(255,255,255,0) 65%); filter: blur(6px); pointer-events: none; } /* ─── iOS-style status bar ──────────────────────────────────────────────*/ .mob-statusbar { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 16px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; text-shadow: 0 1px 2px rgba(0,0,0,0.35); } .mob-statusbar-time { font-variant-numeric: tabular-nums; } .mob-statusbar-brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.92; } /* Tiny signal/battery cluster — pure CSS, evokes iOS chrome */ .mob-statusbar-right { display: flex; align-items: center; gap: 6px; } .mob-statusbar-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; } .mob-statusbar-bars i { display: block; width: 3px; background: #fff; border-radius: 1px; } .mob-statusbar-bars i:nth-child(1) { height: 4px; } .mob-statusbar-bars i:nth-child(2) { height: 6px; } .mob-statusbar-bars i:nth-child(3) { height: 8px; } .mob-statusbar-bars i:nth-child(4) { height: 11px; } .mob-statusbar-batt { width: 22px; height: 11px; border: 1.5px solid #fff; border-radius: 3px; position: relative; padding: 1.5px; } .mob-statusbar-batt::after { content: ''; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; background: #fff; border-radius: 0 1px 1px 0; } .mob-statusbar-batt i { display: block; height: 100%; width: 80%; background: #fff; border-radius: 1px; } /* ─── App icon grid (springboard pages area) ────────────────────────────*/ .mob-grid-wrap { position: relative; z-index: 1; flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; padding-top: 18px; } .mob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 6px; width: 100%; max-width: 420px; padding: 8px 14px 0; } .mob-app { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: inherit; } .mob-app-tile { width: 60px; height: 60px; /* iOS ~22% corner radius */ border-radius: 14px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 160ms ease-out; } .mob-app-tile img { width: 46px; height: 46px; object-fit: contain; pointer-events: none; } .mob-app-label { max-width: 74px; font-size: 11px; line-height: 1.1; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mob-app:active .mob-app-tile { transform: scale(0.9); } /* ─── iOS dock (frosted, XP Luna blue tint) ─────────────────────────────*/ .mob-dock { position: relative; z-index: 2; flex: 0 0 auto; margin: 0 12px 14px; padding: 12px 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-radius: 22px; /* Luna blue frosted glass */ background: linear-gradient(to bottom, rgba(86, 140, 232, 0.55), rgba(42, 91, 222, 0.45)); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55); } .mob-dock .mob-app-tile { width: 56px; height: 56px; } .mob-dock .mob-app-tile img { width: 42px; height: 42px; } .mob-dock .mob-app-label { color: #fff; font-weight: 600; } /* ─── Full-screen app view (XP title-bar chrome) ────────────────────────*/ .mob-appview { position: fixed; inset: 0; z-index: 9100; display: flex; flex-direction: column; background: #ece9d8; /* XP Luna window beige */ } .mob-appview[hidden] { display: none; } .mob-appview-titlebar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 6px 0 12px; /* XP Luna blue title bar gradient */ background: linear-gradient(to bottom, #2a5bde 0%, #3f8cf3 48%, #2f6fe0 52%, #2a5bde 100%); border-bottom: 1px solid #1c3fa0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); /* clear the iOS status notch / safe area */ padding-top: env(safe-area-inset-top, 0); height: calc(38px + env(safe-area-inset-top, 0)); } .mob-appview-title { display: flex; align-items: center; gap: 8px; color: #fff; font-family: 'Tahoma', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 14px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mob-appview-title img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; } .mob-appview-title span { overflow: hidden; text-overflow: ellipsis; } /* XP close box */ .mob-appview-close { flex: 0 0 auto; width: 30px; height: 26px; border: 1px solid #ffffff; border-radius: 4px; background: linear-gradient(to bottom, #e9897a 0%, #d65b46 45%, #c0392b 55%, #d04a3a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); color: #fff; font-family: 'Tahoma', system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mob-appview-close:active { filter: brightness(0.9); } .mob-appview-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #ece9d8; position: relative; /* Flex column so short app content centers vertically and long content still scrolls from the top. */ display: flex; flex-direction: column; } /* The app renders into this inner element (NOT a launcher panel, so apps take their window branch). `margin: auto` is the centering trick: in a flex column an item with auto block margins is pushed to vertical center when there is spare room, but collapses those margins (and the parent scrolls) once the content is taller than the viewport. So short fixed-height posters (Calculator, Typing) sit centered with no awkward beige gap below, while naturally tall apps (Portfolio) keep filling/scrolling from the top. */ .mob-appview-content { width: 100%; margin: auto 0; flex-shrink: 0; } /* ─── Motion ────────────────────────────────────────────────────────────*/ @media (prefers-reduced-motion: no-preference) { .mob-app-tile { transition: transform 160ms ease-out; } } @media (prefers-reduced-motion: reduce) { .mob-app-tile, .mob-app:active .mob-app-tile { transition: none; } }