/* ══════════════════════════════════════════════════════════════════ Gnoke Station — Home / Launcher DNA: geocompass — ocean navy, DM Sans / DM Mono / Playfair ══════════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --bg: #f2f7fa; --bg2: #e4eef4; --surface: #ffffff; --surface2: #f6fafb; --surface3: #edf4f8; /* Text */ --text: #0d2b3e; --text-2: #2d5268; --text-3: #6a8fa3; /* Borders */ --border: #cfe0ea; --border-2: #b0ccd9; /* Accent — ocean navy */ --accent: #1b4d6e; --accent-dk: #143d57; --accent-lt: #daeaf4; --accent-dim: rgba(27,77,110,0.08); /* Blue aliases for launcher.js / wallpaper */ --blue-1: #86b4e4; --blue-2: #3f6e9b; --blue-3: #1F4765; --blue-light: rgba(134,180,228,0.10); --blue-mid: rgba(63,110,155,0.12); /* Caps */ --cap: #7c3aed; --cap-bg: rgba(124,58,237,0.07); --cap-border: rgba(124,58,237,0.22); /* Status */ --live: #1a6647; --live-bg: rgba(26,102,71,0.08); --live-border: rgba(26,102,71,0.3); --dead: #b03030; --dead-bg: rgba(176,48,48,0.07); /* Elevation */ --shadow-sm: 0 1px 3px rgba(13,43,62,.07), 0 1px 2px rgba(13,43,62,.04); --shadow-md: 0 4px 16px rgba(13,43,62,.10), 0 2px 4px rgba(13,43,62,.06); --shadow-lg: 0 12px 36px rgba(13,43,62,.14), 0 4px 8px rgba(13,43,62,.07); /* Typography */ --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', monospace; --font-display: 'Playfair Display', serif; --mono: 'DM Mono', monospace; --display: 'DM Sans', system-ui, sans-serif; /* Layout */ --tb-h: 52px; --radius: 10px; --radius-lg: 14px; --transition: 0.18s ease; /* Icon tile background (overridden per-theme by sys2026/theme.js) */ --icon-bg-1: #2a5c3f; --icon-bg-2: #122a1c; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; overflow: hidden; } /* ── Shell ── */ .shell { display: grid; grid-template-rows: calc(var(--tb-h) + 10px) 1fr; height: 100vh; height: 100dvh; position: relative; z-index: 1; } /* ── Desktop canvas ── */ .desktop { position: relative; overflow: hidden; display: flex; } /* ── Topbar/pill: moved to /sys2026/topbar.css (shared, linked in ) ── */ /* Clock & Debug (Start-page-only widgets, not part of the shared topbar) */ .tb-clock { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0.04em; min-width: 44px; text-align: right; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .tb-clock:hover { background: var(--accent-lt); color: var(--accent); } .tb-lock { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-3); border-radius: 7px; box-shadow: var(--shadow-sm); background: var(--surface2); transition: all 0.15s; } .tb-lock:hover { color: var(--accent); background: var(--accent-lt); } .tb-lock:active { transform: scale(.94); } /* ── Launcher panel ── */ .launcher { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); width: 280px; flex-shrink: 0; margin: 10px 0 10px 10px; border-radius: 14px; box-shadow: var(--shadow-md); z-index: 10; position: relative; } /* Search */ .search-wrap { padding: 12px 12px 8px 12px; background: transparent; } .search-input { all: unset; box-sizing: border-box; width: 100%; font-family: var(--font-sans); font-size: 13px; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); padding: 8px 12px; border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); outline: none; } .search-input::placeholder { color: var(--text-3); } /* App scroll */ .app-scroll { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; padding: 0; } /* Category tabs */ .cat-tabs { display: flex; flex-shrink: 0; background: transparent; } .cat-tab { all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding: 11px 4px; transition: color var(--transition), font-weight var(--transition); } .cat-tab:hover:not(.active) { color: var(--text-2); } .cat-tab.active { color: var(--accent); font-weight: 700; } /* Swipeable category panels */ .cat-panels { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .cat-panels::-webkit-scrollbar { display: none; } .cat-panel { flex: 0 0 100%; width: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; scroll-snap-align: start; } .cat-panel-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); gap: 2px; padding: 10px; } .cat-panel-empty { padding: 40px 20px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } /* App tile */ .app-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px 10px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; transition: all 0.13s; text-align: center; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; } .app-tile:hover { background: var(--accent-dim); border-color: transparent; box-shadow: var(--shadow-sm); } .app-tile:active { background: var(--blue-mid); transform: scale(0.95); } .app-tile.privileged:hover { background: var(--cap-bg); border-color: transparent; box-shadow: var(--shadow-sm); } .app-tile.launching { animation: tileFlash 0.5s ease; } @keyframes tileFlash { 0%{background:rgba(26,102,71,0.22)} 100%{background:transparent} } .app-tile .live-dot { display: none; position: absolute; top: 7px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px var(--surface); } .app-tile.running .live-dot { display: block; } .at-icon { width: 52px; height: 52px; border-radius: 14px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12); transition: all 0.13s; overflow: hidden; } .at-icon img, .at-icon svg { width: 100%; height: 100%; border-radius: 14px; display: block; } .app-tile.privileged .at-icon { background: transparent; border: none; } .app-tile:hover .at-icon { box-shadow: 0 8px 20px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.18); transform: translateY(-2px); } .at-name { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } /* ── Wallpaper ── */ .wallpaper { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .wallpaper svg { width: 100%; height: 100%; display: block; } /* ── Desktop shade — subtle colour wash from Settings > Background, independent of the theme-driven wallpaper above. Sits strictly between the wallpaper (z:0) and the clock/icon grid (z:2+), and is pointer-events:none, so it never touches icon rendering or interaction — purely a soft tint in the space behind them. --desktop-shade-bg is set by launcher.js; 'none' when unset. ── */ .desktop-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--desktop-shade-bg, none); transition: background 0.35s ease; } /* ── Desktop clock ── */ .desktop-clock { position: absolute; bottom: 40px; right: 44px; z-index: 2; text-align: right; pointer-events: none; user-select: none; } .desktop-clock .dc-time { font-family: var(--font-display); font-size: 56px; font-weight: 600; color: rgba(13,43,62,.15); line-height: 1; letter-spacing: -0.03em; } .desktop-clock .dc-date { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: rgba(13,43,62,.10); letter-spacing: 0.10em; text-transform: uppercase; margin-top: 6px; } /* ── Modal ── */ .modal-bg { display: none; position: fixed; inset: 0; background: rgba(13,43,62,0.35); backdrop-filter: blur(6px); z-index: 400; align-items: center; justify-content: center; padding: 20px; } .modal-bg.open { display: flex; } .modal { background: var(--surface); border: none; border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 16px; animation: modalIn 0.2s ease; position: relative; overflow: hidden; } .modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue-1), var(--accent)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text); margin-top: 4px; letter-spacing: -0.01em; } .field label { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .field input { all: unset; width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 14px; color: var(--text); background: var(--surface2); box-shadow: inset 0 0 0 1.5px var(--border-2); padding: 10px 14px; border-radius: var(--radius); transition: all 0.15s; } .field input:focus { box-shadow: 0 0 0 3px var(--accent-lt); outline: none; background: var(--surface); } .field input::placeholder { color: var(--text-3); } .modal-actions { display: flex; gap: 8px; } .m-btn { all: unset; font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; color: var(--text-3); background: var(--surface2); box-shadow: var(--shadow-sm); transition: all 0.15s; text-align: center; -webkit-tap-highlight-color: transparent; flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; } .m-btn:hover { color: var(--text); } .m-btn:active { transform: scale(0.97); } .m-btn.primary { background: var(--accent); color: white; box-shadow: 0 2px 10px rgba(27,77,110,0.28); } .m-btn.primary:hover { background: var(--accent-dk); box-shadow: 0 4px 14px rgba(27,77,110,0.36); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ── Responsive ── Two cases collapse to full-bleed single-pane: - narrow portrait phones (no room for a side panel) - short landscape phones (rotated — height is the constraint, not width; a fixed side panel + near-empty wallpaper strip looks broken here) */ @media (max-width: 600px), (max-height: 500px) and (orientation: landscape) { .launcher { width: 100%; margin: 0; border-radius: 0; } .wallpaper, .desktop-shade, .desktop-clock { display: none; } .bus-pill span { display: none; } } @media (max-height: 500px) and (orientation: landscape) { .topbar { margin: 6px 6px 0 6px; } .app-grid { grid-template-rows: calc(var(--tb-h) + 6px) 1fr; } .cat-tabs { padding: 0 10px 4px 10px; } .cat-tab { padding: 7px 4px; } }