/* ═══════════════════════════════════════════════════════════ SHARED THEME — AI Navigator Suite Provides all visual tokens and component classes. Toggle themes via: or "light" ═══════════════════════════════════════════════════════════ */ /* ── Google Font ──────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ── Reset ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Dark Theme (default) ─────────────────────────────── */ :root, [data-theme="dark"] { --bg: #0b0f14; --bg-card: #131920; --bg-hover: #1a2230; --bg-input: #0f1419; --brd: #1e2a38; --brd-focus: #2dd4bf; --tx: #e8edf3; --tx2: #8899aa; --tx3: #5c6f82; --teal: #2dd4bf; --teal-d: rgba(45,212,191,0.12); --amber: #fbbf24; --amber-d:rgba(251,191,36,0.10); --red: #f87171; --red-d: rgba(248,113,113,0.10); --green: #34d399; --green-d:rgba(52,211,153,0.10); --indigo: #818cf8; --indigo-d:rgba(129,140,248,0.10); --blue: #60a5fa; --blue-d: rgba(96,165,250,0.10); --purple: #a78bfa; --purple-d:rgba(167,139,250,0.10); --radius: 12px; --radius-sm: 8px; --teal-rgb: 45, 212, 191; --amber-rgb: 251, 191, 36; --coral-rgb: 248, 113, 113; --badge-bg-alpha: 0.12; --badge-border-alpha: 0.20; --badge-min-font: 12px; --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --shadow-lg: 0 4px 20px rgba(0,0,0,0.4); } /* ── Light Theme ──────────────────────────────────────── */ [data-theme="light"] { --bg: #f4f6f9; --bg-card: #ffffff; --bg-hover: #eef1f5; --bg-input: #ffffff; --brd: #dce2ea; --brd-focus: #0d9488; --tx: #1a2332; --tx2: #5c6b7a; --tx3: #8c97a5; --teal: #0d9488; --teal-d: rgba(13,148,136,0.08); --amber: #d97706; --amber-d:rgba(217,119,6,0.06); --red: #dc2626; --red-d: rgba(220,38,38,0.06); --green: #059669; --green-d:rgba(5,150,105,0.06); --indigo: #4f46e5; --indigo-d:rgba(79,70,229,0.06); --blue: #2563eb; --blue-d: rgba(37,99,235,0.06); --purple: #7c3aed; --purple-d:rgba(124,58,237,0.06); --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-lg: 0 4px 20px rgba(0,0,0,0.10); --teal-rgb: 20, 184, 166; --amber-rgb: 217, 119, 6; --coral-rgb: 239, 68, 68; } /* ── Base ─────────────────────────────────────────────── */ html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; color: var(--tx); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { min-height: 100vh; background: var(--bg); color: var(--tx); } h1, h2, h3, h4, h5, h6 { line-height: 1.25; color: var(--tx); font-weight: 700; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1.05rem; } p { color: var(--tx); } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Aurora Background ────────────────────────────────── */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora::before { content: ''; position: absolute; width: 120%; height: 120%; top: -10%; left: -10%; background: radial-gradient(ellipse 600px 400px at 20% 30%, var(--teal-d) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 80% 60%, var(--indigo-d) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 80%, var(--purple-d) 0%, transparent 70%); animation: aurora-drift 25s ease-in-out infinite alternate; } @keyframes aurora-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-2%, 1%) scale(1.02); } 100% { transform: translate(1%, -1%) scale(0.98); } } [data-theme="light"] .aurora::before { opacity: 0.5; } /* ── Shell Container ──────────────────────────────────── */ .shell { position: relative; min-height: 100vh; } /* ── Header ───────────────────────────────────────────── */ header { background: var(--bg-card); border-bottom: 1px solid var(--brd); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-theme="dark"] header { background: rgba(19,25,32,0.85); } [data-theme="light"] header { background: rgba(255,255,255,0.85); } .hdr-row-1, .hdr-row-2 { width: 100%; } .hdr-inner { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; } .hdr-row-1 { padding: 0.75rem 0; } .hdr-row-2 { border-top: 1px solid var(--brd); padding: 0.5rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .hdr-row-2::-webkit-scrollbar { height: 0; } .hdr-l { display: flex; align-items: center; gap: 0.75rem; } .hdr-r { display: flex; align-items: center; gap: 0.5rem; } #nav { display: flex; gap: 0.5rem; flex-wrap: nowrap; white-space: nowrap; } /* ── Logo (text-based) ────────────────────────────────── */ .logo { font-size: 0.72rem; letter-spacing: 0.3em; font-weight: 700; color: var(--teal); text-transform: uppercase; user-select: none; white-space: nowrap; } /* ── Cards (.c) ───────────────────────────────────────── */ .c { background: var(--bg-card); border: 1px solid var(--brd); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .c:hover { border-color: color-mix(in srgb, var(--brd) 70%, var(--teal) 30%); } /* ── Buttons ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.5rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; white-space: nowrap; text-decoration: none; line-height: 1.4; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Primary button */ .btn-p, .btn.btn-p { background: var(--teal); color: #0b0f14; } .btn-p:hover, .btn.btn-p:hover { background: color-mix(in srgb, var(--teal) 85%, white 15%); box-shadow: 0 0 20px var(--teal-d); } /* Secondary button */ .btn-s, .btn.btn-s { background: transparent; color: var(--tx); border: 1px solid var(--brd); } .btn-s:hover, .btn.btn-s:hover { background: var(--bg-hover); border-color: var(--tx3); } /* ── Pills / Tabs ─────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; font-family: inherit; color: var(--tx2); background: transparent; border: 1px solid var(--brd); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .pill:hover { color: var(--tx); background: var(--bg-hover); border-color: var(--tx3); } .pill.on { color: #0b0f14; background: var(--teal); border-color: var(--teal); font-weight: 600; } [data-theme="light"] .pill.on { color: #ffffff; } /* ── Badges ───────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .badge.teal { background: var(--teal-d); color: var(--teal); border: 1px solid rgba(45,212,191,0.2); } .badge.amber { background: var(--amber-d); color: var(--amber); border: 1px solid rgba(251,191,36,0.2); } .badge.red { background: var(--red-d); color: var(--red); border: 1px solid rgba(248,113,113,0.2); } .badge.green { background: var(--green-d); color: var(--green); border: 1px solid rgba(52,211,153,0.2); } .badge.indigo { background: var(--indigo-d); color: var(--indigo); border: 1px solid rgba(129,140,248,0.2); } .badge.blue { background: var(--blue-d); color: var(--blue); border: 1px solid rgba(96,165,250,0.2); } .badge.purple { background: var(--purple-d); color: var(--purple); border: 1px solid rgba(167,139,250,0.2); } /* ── Labels (section headers) ─────────────────────────── */ .label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .label.teal { background: var(--teal-d); color: var(--teal); } .label.amber { background: var(--amber-d); color: var(--amber); } .label.red { background: var(--red-d); color: var(--red); } .label.green { background: var(--green-d); color: var(--green); } .label.indigo { background: var(--indigo-d); color: var(--indigo); } /* ── Banners ──────────────────────────────────────────── */ .banner { padding: 0.85rem 1.15rem; border-radius: var(--radius); font-size: 0.88rem; line-height: 1.5; display: flex; align-items: flex-start; gap: 0.65rem; } .banner.teal { background: var(--teal-d); border: 1px solid rgba(45,212,191,0.18); color: var(--teal); } .banner.amber { background: var(--amber-d); border: 1px solid rgba(251,191,36,0.18); color: var(--amber); } .banner.red { background: var(--red-d); border: 1px solid rgba(248,113,113,0.18); color: var(--red); } .banner.green { background: var(--green-d); border: 1px solid rgba(52,211,153,0.18); color: var(--green); } /* ── Tiles (info blocks) ─────────────────────────────── */ .tile { background: var(--bg-card); border: 1px solid var(--brd); border-radius: var(--radius); padding: 1.25rem; transition: border-color 0.2s ease; } .tile:hover { border-color: var(--tx3); } /* ── Progress Bars ────────────────────────────────────── */ .prog-track { width: 100%; height: 8px; background: var(--brd); border-radius: 999px; overflow: hidden; } .prog-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; background: var(--teal); } .prog-fill.amber { background: var(--amber); } .prog-fill.red { background: var(--red); } .prog-fill.green { background: var(--green); } .prog-fill.indigo { background: var(--indigo); } /* ── Grid System ──────────────────────────────────────── */ .g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .g23 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .stack { display: flex; flex-direction: column; gap: 1rem; } /* ── Input Fields ─────────────────────────────────────── */ .input-field { display: block; width: 100%; padding: 0.7rem 1rem; font-size: 1rem; font-family: inherit; color: var(--tx); background: var(--bg-input); border: 1px solid var(--brd); border-radius: var(--radius); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .input-field::placeholder { color: var(--tx3); } .input-field:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-d); } /* ── Wizard Progress Bar ──────────────────────────────── */ #wizard-progress { max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 0; } .wizard-progress-inner { display: flex; align-items: center; gap: 1rem; } .wizard-progress-track { flex: 1; height: 6px; background: var(--brd); border-radius: 3px; overflow: hidden; } .wizard-progress-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width 0.4s ease; } .wizard-progress-label { font-size: 0.85rem; color: var(--tx2); white-space: nowrap; } /* ── Step Transition Animations ───────────────────────── */ .step-exit { opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease; } .step-enter { opacity: 0; transform: translateY(20px); } .step-enter-active { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; } /* ── Spinner Animation ────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── Reduced Motion ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .step-exit, .step-enter, .step-enter-active, .wizard-progress-fill, .prog-fill { transition: none !important; } .aurora::before { animation: none !important; } } /* ── iOS Safe Area ────────────────────────────────────── */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .shell { padding-bottom: env(safe-area-inset-bottom); } } /* ── Responsive: Tablet ───────────────────────────────── */ @media (max-width: 860px) { .g3 { grid-template-columns: repeat(2, 1fr); } .g23 { grid-template-columns: repeat(2, 1fr); } } /* ── Responsive: Mobile ───────────────────────────────── */ @media (max-width: 520px) { .g2 { grid-template-columns: 1fr; } .g3 { grid-template-columns: 1fr; } .g23 { grid-template-columns: 1fr; } .logo { font-size: 0.65rem; } .hdr-r .pill { font-size: 0.8rem; padding: 0.35rem 0.75rem; } .c { padding: 1.15rem; } .btn { padding: 0.6rem 1.15rem; font-size: 0.88rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } } /* ── Scrollbar (dark theme) ───────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--tx3); } /* ── Logo Theme Switching ──────────────────────────────── */ [data-theme="dark"] .logo-for-dark { display: inline-block; } [data-theme="dark"] .logo-for-light { display: none; } [data-theme="light"] .logo-for-dark { display: none; } [data-theme="light"] .logo-for-light { display: inline-block; } /* ── Selection ────────────────────────────────────────── */ ::selection { background: var(--teal-d); color: var(--tx); }