/* ========================================================================== SILICON OS 95 — os-mobile.css iOS-style launcher screen for phones and tablets. Fully replaces the desktop experience on touch devices. ========================================================================== */ @media (max-width: 768px) { /* ── Hide all desktop UI on mobile ──────────────────────────────────── */ #os-wallpaper, #os-grid-overlay, #os-scanlines, #os-icons, #os-window-layer, #os-context-menu, #os-taskbar, #os-start-menu { display: none !important; } /* ── Desktop becomes a scrollable launcher container ────────────────── */ #os-desktop { position: fixed; inset: 0; padding: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: block; background: radial-gradient(ellipse at 25% 15%, rgba(157,0,255,0.22) 0%, transparent 52%), radial-gradient(ellipse at 75% 80%, rgba(0,188,212,0.18) 0%, transparent 52%), #050508; } /* ── Mobile Launcher Shell ──────────────────────────────────────────── */ #os-mobile-launcher { min-height: 100vh; min-height: 100dvh; /* dynamic viewport height — respects browser chrome */ display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 12px); padding-bottom: env(safe-area-inset-bottom, 20px); } /* ── Status Bar ─────────────────────────────────────────────────────── */ .os-mobile-status { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 6px; font-family: var(--os-font-system); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .os-mobile-status__brand { color: var(--os-cyan); font-weight: 900; letter-spacing: 0.14em; text-shadow: 0 0 10px var(--os-cyan-glow); } .os-mobile-status__time { color: #ffffff; font-weight: 700; letter-spacing: 0.08em; } /* ── Hero Header ────────────────────────────────────────────────────── */ .os-mobile-header { text-align: center; padding: 20px 20px 12px; } .os-mobile-header__title { font-family: var(--os-font-system); font-size: clamp(2rem, 10vw, 3rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; color: #ffffff; text-shadow: 0 0 30px var(--os-cyan-glow), 0 0 60px var(--os-purple-glow); line-height: 1; } .os-mobile-header__sub { font-size: 0.72rem; color: rgba(226,232,240,0.65); margin-top: 6px; letter-spacing: 0.08em; font-weight: 400; } /* ── App Icon Grid ──────────────────────────────────────────────────── */ .os-mobile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; padding: 24px 16px 16px; flex: 1; } /* ── App Icon ───────────────────────────────────────────────────────── */ .os-mobile-app { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, opacity 0.15s ease; } .os-mobile-app:active { transform: scale(0.88); opacity: 0.8; } .os-mobile-app__icon { width: 72px; height: 72px; border-radius: 18px; /* iOS squircle */ display: flex; align-items: center; justify-content: center; font-size: 1.9rem; line-height: 1; position: relative; /* Frosted glass base */ background: rgba(255,255,255,0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.13); box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12); transition: box-shadow 0.2s ease, transform 0.15s ease; } .os-mobile-app:active .os-mobile-app__icon { box-shadow: 0 2px 10px rgba(0,0,0,0.4); transform: scale(0.95); } /* Per-colour icon glows */ .os-mobile-app[data-color="purple"] .os-mobile-app__icon { background: rgba(157,0,255,0.16); border-color: rgba(157,0,255,0.32); box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 20px rgba(157,0,255,0.22), inset 0 1px 0 rgba(255,255,255,0.1); } .os-mobile-app[data-color="magenta"] .os-mobile-app__icon { background: rgba(255,0,127,0.16); border-color: rgba(255,0,127,0.32); box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 20px rgba(255,0,127,0.22), inset 0 1px 0 rgba(255,255,255,0.1); } .os-mobile-app[data-color="cyan"] .os-mobile-app__icon { background: rgba(0,188,212,0.16); border-color: rgba(0,188,212,0.32); box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 20px rgba(0,188,212,0.22), inset 0 1px 0 rgba(255,255,255,0.1); } .os-mobile-app__label { font-family: var(--os-font-body); font-size: 0.72rem; font-weight: 700; color: #ffffff; text-align: center; line-height: 1.25; text-shadow: 0 1px 0 rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9); max-width: 78px; word-break: break-word; } /* ── Bottom Dock ────────────────────────────────────────────────────── */ .os-mobile-dock { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 16px 24px; margin: 8px 16px 0; background: rgba(255,255,255,0.06); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; } .os-mobile-dock .os-mobile-app__icon { width: 62px; height: 62px; border-radius: 16px; font-size: 1.65rem; } .os-mobile-dock .os-mobile-app__label { display: none; /* dock icons have no label like iOS */ } /* ── Boot screen adapts to mobile ───────────────────────────────────── */ #os-boot-screen { position: fixed; padding: 0 24px; } .os-boot-bar { width: 220px; } .os-boot-logo__name { font-size: 1.4rem; } } /* ── Tablet: 4-column grid ───────────────────────────────────────────── */ @media (min-width: 481px) and (max-width: 768px) { .os-mobile-grid { grid-template-columns: repeat(4, 1fr); padding: 28px 24px 20px; gap: 20px 16px; } .os-mobile-app__icon { width: 78px; height: 78px; font-size: 2rem; } .os-mobile-dock { gap: 24px; margin: 8px 24px 0; } .os-mobile-dock .os-mobile-app__icon { width: 68px; height: 68px; } }