/** * Happy4us — Futuristic UI layer (Phase 1) * Loads after app.css + ui-polish.css. Active when . */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap"); /* ── Design tokens ─────────────────────────────────────────────────────── */ .theme-future { --font: "Space Grotesk", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --future-glow: 0 0 40px rgba(56, 189, 248, 0.12), 0 0 80px rgba(139, 92, 246, 0.08); --future-border: rgba(148, 163, 184, 0.14); --future-glass: rgba(15, 23, 42, 0.55); --future-glass-strong: rgba(15, 23, 42, 0.78); --radius: 12px; --radius-sm: 8px; --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.35), var(--future-glow); } .theme-future[data-theme="dark"], .theme-future[data-theme="light"] { --bg: #04060d; --surface: rgba(18, 26, 42, 0.72); --surface-muted: rgba(12, 18, 32, 0.85); --border: var(--future-border); --text: #f0f4ff; --muted: #94a3b8; --primary: #38bdf8; --primary-hover: #7dd3fc; --primary-soft: rgba(56, 189, 248, 0.12); --primary-rgb: 56, 189, 248; --accent-brand: #a78bfa; --sidebar-bg: linear-gradient(165deg, rgba(8, 12, 24, 0.95) 0%, rgba(15, 23, 42, 0.88) 55%, rgba(30, 27, 75, 0.75) 100%); --sidebar-text: #e2e8f0; --sidebar-muted: #64748b; --sidebar-link: #cbd5e1; --tab-track: rgba(30, 41, 59, 0.6); --chip-bg: rgba(30, 41, 59, 0.65); --chip-border: var(--future-border); --code-bg: rgba(15, 23, 42, 0.9); --code-text: #bae6fd; --success-soft: rgba(16, 185, 129, 0.12); --danger-soft: rgba(248, 113, 113, 0.12); --info-soft: rgba(56, 189, 248, 0.1); --info-border: rgba(56, 189, 248, 0.35); } /* ── Ambient mesh background ───────────────────────────────────────────── */ .theme-future body.app-shell { position: relative; background: var(--bg); font-family: var(--font); } .theme-future .future-mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(56, 189, 248, 0.18), transparent 55%), radial-gradient(ellipse 70% 50% at 90% 10%, rgba(139, 92, 246, 0.16), transparent 50%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(16, 185, 129, 0.08), transparent 45%), var(--bg); } .theme-future.future-motion-ok .future-mesh { animation: future-mesh-drift 28s ease-in-out infinite alternate; } @keyframes future-mesh-drift { 0% { filter: hue-rotate(0deg) brightness(1); transform: scale(1); } 100% { filter: hue-rotate(12deg) brightness(1.05); transform: scale(1.02); } } .theme-future .layout, .theme-future .public-shell { position: relative; z-index: 1; } /* ── Sidebar ───────────────────────────────────────────────────────────── */ .theme-future .sidebar { background: var(--sidebar-bg) !important; border-right: 1px solid var(--future-border); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 4px 0 32px rgba(0, 0, 0, 0.25); } .theme-future .sidebar-brand { border-bottom: 1px solid var(--future-border); } .theme-future .sidebar-brand-icon { background: linear-gradient(135deg, #38bdf8, #a78bfa); border-radius: 10px; padding: 4px; box-shadow: 0 0 20px rgba(56, 189, 248, 0.35); } .theme-future .nav-link { border-radius: 10px; transition: background 0.2s, box-shadow 0.2s, color 0.2s; } .theme-future .nav-link:hover { background: rgba(56, 189, 248, 0.08); color: #f8fafc; } .theme-future .nav-link.active { background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), rgba(167, 139, 250, 0.12)); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35), 0 0 24px rgba(56, 189, 248, 0.12); color: #fff; } .theme-future .nav-icon { font-size: 0.85rem; opacity: 0.9; } /* ── Sub-nav & tabs ────────────────────────────────────────────────────── */ .theme-future .sub-nav { gap: 0.35rem; padding: 0.35rem; background: var(--surface-muted); border: 1px solid var(--future-border); border-radius: 999px; backdrop-filter: blur(12px); } .theme-future .sub-nav-link { border-radius: 999px; padding: 0.4rem 0.9rem; font-weight: 500; transition: all 0.2s; } .theme-future .sub-nav-link.is-active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(167, 139, 250, 0.2)); box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); color: #fff; } .theme-future .tabs-simple .tab { border-radius: 999px; border: 1px solid transparent; transition: all 0.2s; } .theme-future .tabs-simple .tab[aria-selected="true"], .theme-future .tabs-simple .tab.is-active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(167, 139, 250, 0.18)); border-color: rgba(56, 189, 248, 0.4); box-shadow: 0 0 16px rgba(56, 189, 248, 0.15); color: #fff; } /* ── Cards & sections ────────────────────────────────────────────────── */ .theme-future .card, .theme-future .ui-section.card, .theme-future .onboarding-inner.card, .theme-future .redeem-card, .theme-future .stat-card { background: var(--surface) !important; border: 1px solid var(--future-border) !important; border-radius: var(--radius) !important; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--shadow-lg); } .theme-future .stat-card.stat-active { border-color: rgba(56, 189, 248, 0.5) !important; box-shadow: 0 0 28px rgba(56, 189, 248, 0.2); } .theme-future .stat-card .value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .theme-future .btn-primary { background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 55%, #a855f7 100%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #fff !important; font-weight: 600; box-shadow: 0 4px 20px rgba(56, 189, 248, 0.25); transition: transform 0.15s, box-shadow 0.2s; } .theme-future .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99, 102, 241, 0.35); } .theme-future .btn-secondary { background: rgba(30, 41, 59, 0.6) !important; border: 1px solid var(--future-border) !important; color: var(--text) !important; } .theme-future .btn-ghost { border: 1px solid transparent; } .theme-future .btn-ghost:hover { background: rgba(56, 189, 248, 0.08) !important; border-color: var(--future-border); } /* ── Forms & inputs ──────────────────────────────────────────────────── */ .theme-future input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .theme-future select, .theme-future textarea, .theme-future .bs-input { background: rgba(8, 12, 22, 0.65) !important; border: 1px solid var(--future-border) !important; border-radius: var(--radius-sm) !important; color: var(--text) !important; transition: border-color 0.2s, box-shadow 0.2s; } .theme-future input:focus, .theme-future select:focus, .theme-future textarea:focus, .theme-future .bs-input:focus { border-color: rgba(56, 189, 248, 0.6) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15), 0 0 20px rgba(56, 189, 248, 0.1) !important; outline: none; } .theme-future code, .theme-future .credential-row code { font-family: var(--font-mono); font-size: 0.88em; } /* ── Tables ────────────────────────────────────────────────────────────── */ .theme-future .data-table { border-collapse: separate; border-spacing: 0; } .theme-future .data-table th { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--future-border); } .theme-future .data-table tbody tr { transition: background 0.15s; } .theme-future .data-table tbody tr:hover { background: rgba(56, 189, 248, 0.05); } /* ── Alerts & badges ───────────────────────────────────────────────────── */ .theme-future .alert { border-radius: var(--radius-sm); border: 1px solid var(--future-border); backdrop-filter: blur(8px); } .theme-future .alert-success { border-color: rgba(52, 211, 153, 0.35); background: var(--success-soft) !important; } .theme-future .alert-error, .theme-future .alert-danger { border-color: rgba(248, 113, 113, 0.35); } .theme-future .badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; } .theme-future .badge-info, .theme-future .badge-ok { box-shadow: 0 0 12px rgba(56, 189, 248, 0.15); } /* ── Page headers ──────────────────────────────────────────────────────── */ .theme-future .page-header h1, .theme-future .onboarding-head h1, .theme-future .land-hero h1, .theme-future .redeem-hero-title { letter-spacing: -0.03em; background: linear-gradient(135deg, #f8fafc 0%, #bae6fd 45%, #c4b5fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .theme-future .subtitle, .theme-future .onboarding-sub { color: var(--muted); } /* ── Settings dialog ─────────────────────────────────────────────────── */ .theme-future .settings-dialog { border: 1px solid var(--future-border); border-radius: 16px; background: var(--future-glass-strong); backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), var(--future-glow); color: var(--text); max-width: min(92vw, 420px); } .theme-future .settings-dialog::backdrop { background: rgba(2, 6, 16, 0.72); backdrop-filter: blur(4px); } .theme-future .option-card { border: 1px solid var(--future-border); background: rgba(8, 12, 22, 0.5); border-radius: var(--radius-sm); transition: border-color 0.2s, box-shadow 0.2s; } .theme-future .option-card:has(input:checked) { border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 0 16px rgba(56, 189, 248, 0.15); } /* ── Public / onboarding ─────────────────────────────────────────────── */ .theme-future .public-header { border-bottom: 1px solid var(--future-border); backdrop-filter: blur(12px); background: rgba(4, 6, 13, 0.75); } .theme-future .onboarding-step.is-current .onboarding-step-num { background: linear-gradient(135deg, #0ea5e9, #8b5cf6); color: #fff; border: none; box-shadow: 0 0 16px rgba(56, 189, 248, 0.4); } .theme-future .onboarding-step.is-done .onboarding-step-num { background: rgba(16, 185, 129, 0.2); border-color: #34d399; color: #6ee7b7; } .theme-future .bs-embed { border: 1px solid var(--future-border) !important; background: var(--surface) !important; box-shadow: var(--shadow-lg) !important; } .theme-future .bs-embed-chrome { background: rgba(8, 12, 22, 0.9) !important; border-color: var(--future-border) !important; } .theme-future .bs-btn-primary { background: linear-gradient(135deg, #0ea5e9, #6366f1) !important; border-radius: 8px !important; border: none !important; } .theme-future .onboarding-shop-item { background: rgba(8, 12, 22, 0.5); border-color: var(--future-border); } /* ── Landing ───────────────────────────────────────────────────────────── */ .theme-future .land-nav { backdrop-filter: blur(12px); background: rgba(4, 6, 13, 0.8); border: 1px solid var(--future-border); border-radius: 999px; } .theme-future .land-hero-eyebrow { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.35); color: #7dd3fc; } .theme-future .land-hero-cta { background: linear-gradient(135deg, #0ea5e9, #8b5cf6); box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); } .theme-future .land-stat { background: var(--surface); border: 1px solid var(--future-border); border-radius: var(--radius); backdrop-filter: blur(12px); } /* ── Redeem wait animation ───────────────────────────────────────────── */ .theme-future .redeem-wait-ring-progress { stroke: url(#future-redeem-gradient); } .theme-future .redeem-card { border-radius: 20px !important; } .theme-future .redeem-submit { background: linear-gradient(135deg, #0ea5e9, #6366f1) !important; } /* ── Breadcrumbs ─────────────────────────────────────────────────────── */ .theme-future .breadcrumbs a { color: #7dd3fc; } /* ── Main content area ───────────────────────────────────────────────── */ .theme-future .main { background: transparent; } .theme-future .flash-stack .alert { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } /* ── Scrollbar (webkit) ──────────────────────────────────────────────── */ .theme-future ::-webkit-scrollbar { width: 8px; height: 8px; } .theme-future ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.45); border-radius: 999px; } .theme-future ::-webkit-scrollbar-track { background: transparent; }