/** * Liquid Glass v2 — dimensional UI (Cloudflare-inspired depth + frosted glass) * * Enable: * Revert: ?skin=classic · or ACTIVE_UI_SKIN = 'classic' in ui-skin.ts * * Layout unchanged. Classic tokens stay in app.css / styles.css as default. */ /* ═══════════════════════════════════════════════════════════════════ TOKENS — LIGHT ═══════════════════════════════════════════════════════════════════ */ html[data-skin='liquid-glass'] { color-scheme: light dark; --radius: 18px; --radius-lg: 24px; --radius-pill: 999px; --ease: 0.22s cubic-bezier(0.22, 1, 0.36, 1); --ease-press: 0.12s cubic-bezier(0.4, 0, 0.2, 1); /* Canvas */ --bg: #dfe8f5; --bg-elevated: #eaf0fa; /* Glass fills */ --surface: rgba(255, 255, 255, 0.62); --surface-hover: rgba(255, 255, 255, 0.78); --surface-muted: rgba(255, 255, 255, 0.42); --surface-solid: rgba(255, 255, 255, 0.88); /* Ink */ --text: #0b1220; --muted: #5a6a82; --border: rgba(255, 255, 255, 0.72); --border-dark: rgba(15, 23, 42, 0.1); --border-strong: rgba(15, 23, 42, 0.14); /* Brand */ --accent: #2b7fff; --accent-soft: rgba(43, 127, 255, 0.14); --success: #0d9f6e; --success-soft: rgba(13, 159, 110, 0.12); --danger: #e5484d; --danger-soft: rgba(229, 72, 77, 0.12); --warn: #d99a00; --warn-soft: rgba(217, 154, 0, 0.14); --brand-gradient: linear-gradient(145deg, #38bdf8 0%, #818cf8 45%, #e879f9 100%); --accent-fallback: var(--accent); /* Depth system (Cloudflare-like raised controls) */ --shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 -1px 0 rgba(15, 23, 42, 0.04) inset, 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 1.5px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(15, 23, 42, 0.06) inset, 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-lg: 0 1.5px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(15, 23, 42, 0.05) inset, 0 18px 48px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(15, 23, 42, 0.06); --shadow-float: 0 2px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 1px rgba(15, 23, 42, 0.06) inset, 0 24px 64px rgba(15, 23, 42, 0.16), 0 8px 20px rgba(15, 23, 42, 0.08); --shadow-pressed: 0 2px 6px rgba(15, 23, 42, 0.12) inset, 0 1px 0 rgba(255, 255, 255, 0.35) inset; /* Convex face gradient (lighter top → slightly deeper bottom) */ --face: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 100%); --face-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.7) 100%); --face-accent: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, #fff) 0%, color-mix(in srgb, var(--accent) 8%, #fff) 100%); --glass-blur: 28px; --glass-saturate: 1.45; --bg-mesh: radial-gradient(1100px 580px at 5% -15%, rgba(56, 189, 248, 0.38), transparent 55%), radial-gradient(900px 520px at 100% -5%, rgba(129, 140, 248, 0.28), transparent 50%), radial-gradient(800px 480px at 70% 100%, rgba(232, 121, 249, 0.14), transparent 50%), radial-gradient(600px 400px at 0% 80%, rgba(255, 255, 255, 0.5), transparent 45%), linear-gradient(165deg, #eef3fb 0%, #dce6f4 48%, #e8edf7 100%); --preview: rgba(11, 18, 32, 0.94); --track: rgba(15, 23, 42, 0.08); --scan: #38bdf8; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ═══════════════════════════════════════════════════════════════════ TOKENS — DARK ═══════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-skin='liquid-glass'] { --bg: #05070d; --bg-elevated: #0a0e18; --surface: rgba(22, 28, 44, 0.62); --surface-hover: rgba(34, 42, 64, 0.78); --surface-muted: rgba(14, 18, 30, 0.55); --surface-solid: rgba(18, 24, 40, 0.9); --text: #f0f4ff; --muted: #93a0b8; --border: rgba(255, 255, 255, 0.14); --border-dark: rgba(0, 0, 0, 0.45); --border-strong: rgba(255, 255, 255, 0.2); --accent: #5eb1ff; --accent-soft: rgba(94, 177, 255, 0.16); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.14); --danger: #ff7a81; --danger-soft: rgba(255, 122, 129, 0.14); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14); --brand-gradient: linear-gradient(145deg, #38bdf8 0%, #a78bfa 48%, #f472b6 100%); --shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 3px rgba(0, 0, 0, 0.4); --shadow: 0 1.5px 0 rgba(255, 255, 255, 0.12) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 8px 28px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 1.5px 0 rgba(255, 255, 255, 0.12) inset, 0 -1px 0 rgba(0, 0, 0, 0.45) inset, 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-float: 0 2px 0 rgba(255, 255, 255, 0.14) inset, 0 -1px 1px rgba(0, 0, 0, 0.5) inset, 0 28px 72px rgba(0, 0, 0, 0.65), 0 10px 24px rgba(0, 0, 0, 0.5); --shadow-pressed: 0 3px 10px rgba(0, 0, 0, 0.55) inset, 0 1px 0 rgba(255, 255, 255, 0.06) inset; --face: linear-gradient(180deg, rgba(48, 56, 80, 0.75) 0%, rgba(22, 28, 44, 0.55) 100%); --face-hover: linear-gradient(180deg, rgba(58, 68, 96, 0.85) 0%, rgba(30, 38, 58, 0.7) 100%); --face-accent: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 28%, #1e293b) 0%, color-mix(in srgb, var(--accent) 12%, #0f172a) 100% ); --bg-mesh: radial-gradient(1000px 520px at 0% -12%, rgba(56, 189, 248, 0.2), transparent 55%), radial-gradient(860px 480px at 100% 0%, rgba(167, 139, 250, 0.18), transparent 50%), radial-gradient(700px 420px at 50% 110%, rgba(244, 114, 182, 0.1), transparent 55%), linear-gradient(165deg, #070a12 0%, #04060c 50%, #060912 100%); --preview: #03050a; --track: rgba(255, 255, 255, 0.08); --scan: #5eb1ff; } } /* ═══════════════════════════════════════════════════════════════════ CANVAS ═══════════════════════════════════════════════════════════════════ */ html[data-skin='liquid-glass'], html[data-skin='liquid-glass'] body { background-color: var(--bg); background-image: var(--bg-mesh); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } html[data-skin='liquid-glass'] body.admin-panel { background: #030712; background-image: none; } /* ═══════════════════════════════════════════════════════════════════ FROST — panels / overlays that sit above content ═══════════════════════════════════════════════════════════════════ */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html[data-skin='liquid-glass'] .sidebar, html[data-skin='liquid-glass'] .mobile-header, html[data-skin='liquid-glass'] .bus-info-panel, html[data-skin='liquid-glass'] .no-buses-overlay, html[data-skin='liquid-glass'] .status-toast, html[data-skin='liquid-glass'] .toast-card, html[data-skin='liquid-glass'] .idle-card, html[data-skin='liquid-glass'] .idle-overlay, html[data-skin='liquid-glass'] .mode-toggle, html[data-skin='liquid-glass'] .tabs, html[data-skin='liquid-glass'] .card, html[data-skin='liquid-glass'] .panel, html[data-skin='liquid-glass'] .app, html[data-skin='liquid-glass'] .site-header { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } /* Dim scrim behind floating menus / mobile sidebar / idle */ html[data-skin='liquid-glass'] .idle-overlay { background: rgba(8, 12, 22, 0.28) !important; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); } } /* Live* root shell must NOT paint solid --bg (would hide mesh + glass) */ html[data-skin='liquid-glass'] .app:has(.main-content), html[data-skin='liquid-glass'] .app:has(.map-wrapper) { background: transparent !important; background-image: none !important; } /* Elevated glass shells (sidebar over map, cards over mesh) */ html[data-skin='liquid-glass'] .sidebar, html[data-skin='liquid-glass'] .bus-info-panel, html[data-skin='liquid-glass'] .no-buses-overlay, html[data-skin='liquid-glass'] .toast-card, html[data-skin='liquid-glass'] .idle-card, html[data-skin='liquid-glass'] .card, html[data-skin='liquid-glass'] .panel, html[data-skin='liquid-glass'] a.app, html[data-skin='liquid-glass'] .apps > .app { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-float) !important; border-radius: var(--radius-lg); } /* ─── Left menu: strong frosted glass (see map/mesh through it) ─── */ html[data-skin='liquid-glass'] .sidebar { /* Much more transparent than generic panels */ background: color-mix(in srgb, var(--surface) 38%, transparent) !important; border-right: 1px solid var(--border) !important; border-radius: 0; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.4) inset, 8px 0 40px rgba(15, 23, 42, 0.1) !important; -webkit-backdrop-filter: blur(32px) saturate(1.55) !important; backdrop-filter: blur(32px) saturate(1.55) !important; } @media (prefers-color-scheme: dark) { html[data-skin='liquid-glass'] .sidebar { background: color-mix(in srgb, var(--surface) 42%, transparent) !important; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08) inset, 12px 0 48px rgba(0, 0, 0, 0.45) !important; } } /* Header + every section: no opaque bands that kill the glass */ html[data-skin='liquid-glass'] .sidebar-header, html[data-skin='liquid-glass'] .sidebar .status-section, html[data-skin='liquid-glass'] .sidebar .mode-section, html[data-skin='liquid-glass'] .sidebar .stats-section, html[data-skin='liquid-glass'] .sidebar .filters-section, html[data-skin='liquid-glass'] .sidebar .footer-section, html[data-skin='liquid-glass'] .sidebar .sidebar-content { background: transparent !important; border-color: color-mix(in srgb, var(--border) 70%, transparent) !important; } html[data-skin='liquid-glass'] .sidebar-header { background: color-mix(in srgb, var(--surface) 22%, transparent) !important; border-bottom: 1px solid var(--border) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; backdrop-filter: blur(20px) saturate(1.4) !important; } html[data-skin='liquid-glass'] .mobile-header { background: color-mix(in srgb, var(--surface) 45%, transparent) !important; border-bottom: 1px solid var(--border) !important; -webkit-backdrop-filter: blur(24px) saturate(1.45) !important; backdrop-filter: blur(24px) saturate(1.45) !important; } /* Stat cards / search inside sidebar stay slightly more solid for readability */ html[data-skin='liquid-glass'] .sidebar .stat-card, html[data-skin='liquid-glass'] .sidebar .search-input { background: color-mix(in srgb, var(--surface) 55%, transparent) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border: 1px solid var(--border) !important; box-shadow: var(--shadow-xs) !important; } /* Mobile: dim scrim behind the drawer so glass reads as an overlay */ html[data-skin='liquid-glass'] .sidebar-overlay { background: rgba(8, 12, 22, 0.32) !important; -webkit-backdrop-filter: blur(8px) saturate(1.15); backdrop-filter: blur(8px) saturate(1.15); } /* ═══════════════════════════════════════════════════════════════════ CONVEX CONTROLS — buttons / chips that “pop” off the surface ═══════════════════════════════════════════════════════════════════ */ html[data-skin='liquid-glass'] .route-filter, html[data-skin='liquid-glass'] .mode-btn, html[data-skin='liquid-glass'] .tab, html[data-skin='liquid-glass'] .sidebar-toggle, html[data-skin='liquid-glass'] .sidebar-reopen, html[data-skin='liquid-glass'] .clear-btn, html[data-skin='liquid-glass'] .idle-continue-btn, html[data-skin='liquid-glass'] .app { border-radius: calc(var(--radius) - 2px); transition: transform var(--ease-press), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease); } /* Primary chip / control face */ html[data-skin='liquid-glass'] .route-filter, html[data-skin='liquid-glass'] .sidebar-toggle, html[data-skin='liquid-glass'] .sidebar-reopen, html[data-skin='liquid-glass'] .basemap-toggle, html[data-skin='liquid-glass'] a.app, html[data-skin='liquid-glass'] .apps > .app { background-image: var(--face) !important; background-color: transparent !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } html[data-skin='liquid-glass'] .route-filter:hover, html[data-skin='liquid-glass'] .sidebar-toggle:hover, html[data-skin='liquid-glass'] .sidebar-reopen:hover, html[data-skin='liquid-glass'] .basemap-toggle:hover, html[data-skin='liquid-glass'] a.app:hover, html[data-skin='liquid-glass'] .apps > .app:hover { background-image: var(--face-hover) !important; transform: translateY(-2px); box-shadow: var(--shadow-lg) !important; border-color: color-mix(in srgb, var(--accent) 28%, var(--border)) !important; } html[data-skin='liquid-glass'] .route-filter:active, html[data-skin='liquid-glass'] .sidebar-toggle:active, html[data-skin='liquid-glass'] .basemap-toggle:active, html[data-skin='liquid-glass'] a.app:active, html[data-skin='liquid-glass'] .apps > .app:active, html[data-skin='liquid-glass'] .mode-btn:active, html[data-skin='liquid-glass'] .tab:active { transform: translateY(1px) scale(0.985); box-shadow: var(--shadow-pressed) !important; } /* Selected / active = raised accent pill */ html[data-skin='liquid-glass'] .route-filter.selected, html[data-skin='liquid-glass'] .mode-btn.active, html[data-skin='liquid-glass'] .tab.active { background-image: var(--face-accent) !important; background-color: transparent !important; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important; box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.75) inset, 0 -1px 0 color-mix(in srgb, var(--accent) 25%, transparent) inset, 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent), 0 2px 6px rgba(15, 23, 42, 0.08) !important; color: var(--text) !important; } /* Segmented control tray (mode Live/Orario, SSTV tabs) — recessed well */ html[data-skin='liquid-glass'] .mode-toggle, html[data-skin='liquid-glass'] .tabs { background: color-mix(in srgb, var(--surface-muted) 55%, transparent) !important; border: 1px solid var(--border-dark) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.35) !important; border-radius: var(--radius); padding: 0.3rem; } html[data-skin='liquid-glass'] .mode-btn, html[data-skin='liquid-glass'] .tab { background: transparent; border: 1px solid transparent !important; border-radius: calc(var(--radius) - 6px) !important; box-shadow: none !important; } html[data-skin='liquid-glass'] .mode-btn.active, html[data-skin='liquid-glass'] .tab.active { background-image: var(--face) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } /* Route badge on chips — mini convex gem */ html[data-skin='liquid-glass'] .route-badge { border-radius: 12px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 4px 10px color-mix(in srgb, var(--route-color, var(--accent)) 35%, transparent) !important; border: 1px solid color-mix(in srgb, #fff 35%, transparent) !important; } html[data-skin='liquid-glass'] .route-filter.selected .route-badge { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 0 0 2px color-mix(in srgb, var(--route-color, var(--accent)) 35%, transparent), 0 6px 16px color-mix(in srgb, var(--route-color, var(--accent)) 40%, transparent) !important; } /* Brand mark — glossy convex tile */ html[data-skin='liquid-glass'] .brand-mark { background: var(--brand-gradient) !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.55) inset, 0 -1px 0 rgba(0, 0, 0, 0.12) inset, 0 10px 28px color-mix(in srgb, #818cf8 40%, transparent) !important; } /* Primary CTA (idle continue, etc.) */ html[data-skin='liquid-glass'] .idle-continue-btn { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 100%, #fff 12%) 0%, var(--accent) 100% ) !important; color: #fff !important; border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff) !important; border-radius: var(--radius-pill) !important; box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent) !important; font-weight: 700; } html[data-skin='liquid-glass'] .idle-continue-btn:hover { transform: translateY(-1px); box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.45) inset, 0 12px 32px color-mix(in srgb, var(--accent) 48%, transparent) !important; } /* Status pills — soft raised capsules */ html[data-skin='liquid-glass'] .status-pill { border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border: 1px solid color-mix(in srgb, currentColor 22%, var(--border)); } /* Map attribution chip */ html[data-skin='liquid-glass'] .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 82%, transparent) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-radius: 10px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-xs) !important; overflow: hidden; } /* Home app tiles: stronger convex face */ html[data-skin='liquid-glass'] a.app, html[data-skin='liquid-glass'] .apps > .app { border-radius: var(--radius-lg) !important; } /* Live* map chrome */ html[data-skin='liquid-glass'] .basemap-toggle { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-radius: calc(var(--radius) - 2px) !important; } html[data-skin='liquid-glass'] .main-content { background: transparent !important; } html[data-skin='liquid-glass'] .app-icon-box { border-radius: 16px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } /* SSTV cards / panels */ html[data-skin='liquid-glass'] .card, html[data-skin='liquid-glass'] .panel { border-radius: var(--radius-lg) !important; } /* Footer / links stay quiet */ html[data-skin='liquid-glass'] .footer-link:hover, html[data-skin='liquid-glass'] .back-link:hover { color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════ ACCESSIBILITY ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-transparency: reduce) { html[data-skin='liquid-glass'] { --surface: #ffffff; --surface-hover: #f8fafc; --surface-muted: #f1f5f9; --glass-blur: 0px; --bg-mesh: none; } @media (prefers-color-scheme: dark) { html[data-skin='liquid-glass'] { --surface: #111827; --surface-hover: #152033; --surface-muted: #0b1220; } } } @media (prefers-reduced-motion: reduce) { html[data-skin='liquid-glass'] .route-filter, html[data-skin='liquid-glass'] .mode-btn, html[data-skin='liquid-glass'] .tab, html[data-skin='liquid-glass'] .app { transition: none !important; } html[data-skin='liquid-glass'] .route-filter:hover, html[data-skin='liquid-glass'] .app:hover { transform: none !important; } }