/* ============================================================ LoanMatch — "Signal Lock" A precision instrument for mortgage brokers. Dark ground · warm cream · electric cyan match-signal. ============================================================ */ :root { /* ground */ --ink: #0a0c10; --ink-1: #0c0f15; --ink-2: #11151d; --ink-3: #161b25; --ink-4: #1c2230; /* cream (brand letterform color) */ --cream: #f0ede6; --cream-2: #c7c3ba; --cream-3: #8b877e; --cream-4: #5c594f; /* signal */ --cyan: #22d3ee; --cyan-2: #67e8f9; --cyan-deep: #0e7490; --cyan-glow: rgba(34, 211, 238, .55); --cyan-haze: rgba(34, 211, 238, .14); /* status */ --amber: #f5b942; --amber-haze: rgba(245, 185, 66, .12); --rose: #f0746b; --rose-haze: rgba(240, 116, 107, .10); /* lines */ --line: rgba(240, 237, 230, .08); --line-2: rgba(240, 237, 230, .14); --line-3: rgba(240, 237, 230, .22); --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.9); --shadow-lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -28px rgba(0,0,0,1); --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --sans: "Archivo", -apple-system, system-ui, sans-serif; } /* ============================================================ LIGHT THEME — "lighter gray + the grid" instinct. Components use CSS vars so they re-theme automatically; the few hardcoded-dark spots get explicit overrides below. ============================================================ */ html[data-theme="light"] { --ink: #e8ebf1; --ink-1: #f1f3f7; --ink-2: #ffffff; --ink-3: #f6f8fb; --ink-4: #eef1f6; --cream: #1b2230; --cream-2: #434b59; --cream-3: #6b7280; --cream-4: #9aa1ad; --cyan: #0a9ec0; --cyan-2: #22d3ee; --cyan-glow: rgba(10, 158, 192, .30); --cyan-haze: rgba(10, 158, 192, .10); --line: rgba(20, 28, 46, .10); --line-2: rgba(20, 28, 46, .16); --line-3: rgba(20, 28, 46, .26); --shadow: 0 1px 2px rgba(20,28,46,.06), 0 14px 34px -22px rgba(20,28,46,.30); --shadow-lift: 0 2px 8px rgba(20,28,46,.10), 0 28px 56px -26px rgba(20,28,46,.40); } html[data-theme="light"] body { background-image: radial-gradient(120% 80% at 50% -10%, rgba(10,158,192,.06), transparent 60%); } html[data-theme="light"] .navbar { background: rgba(255,255,255,.82); } html[data-theme="light"] .btn-primary { background: linear-gradient(180deg, #222b3b, #161d29); color: #f3f5f8; } html[data-theme="light"] .brand-switch, html[data-theme="light"] .theme-switch { background: rgba(255,255,255,.92); } html[data-theme="light"] .result-detail { background: rgba(20,28,46,.03); } /* the LM mark is cream-on-dark — keep it legible on light via a dark chip */ html[data-theme="light"] .brand-mark-lg { background: #0a0c10; border-radius: 20px; padding: 16px; width: 60px; height: 60px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--sans); background: var(--ink); color: var(--cream); line-height: 1.5; font-size: 15px; /* atmosphere: faint cool vignette + a whisper of grid */ background-image: radial-gradient(120% 80% at 50% -10%, rgba(34,211,238,.05), transparent 60%), radial-gradient(100% 60% at 100% 110%, rgba(34,211,238,.03), transparent 55%); background-attachment: fixed; } .page { display: none; min-height: 100vh; } .page.active { display: block; } /* First-paint bootstrap: the head script sets data-initial so the right screen shows immediately (no landing→dashboard flash). Neutralized the instant app.js adds .lm-ready to , after which only .page.active governs. */ html:not(.lm-ready)[data-initial="landing"] #page-landing, html:not(.lm-ready)[data-initial="dashboard"] #page-dashboard { display: block; } .hidden { display: none !important; } .container { max-width: 940px; margin: 0 auto; padding: 40px 22px 96px; position: relative; } ::selection { background: var(--cyan); color: var(--ink); } /* ---------- typography helpers ---------- */ .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; } .page-title { font-family: var(--sans); font-weight: 800; font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; line-height: 1.02; margin-bottom: 28px; } /* ---------- the brand mark ---------- */ .brand-mark { display: block; } .brand-mark-lg { width: 88px; height: 88px; margin: 0 auto 22px; filter: drop-shadow(0 6px 18px rgba(34,211,238,.18)); } /* ============================================================ AUTH (login / register) ============================================================ */ .auth-page { min-height: 100vh; place-items: center; position: relative; overflow: hidden; padding: 40px 20px; } /* Only grid-center when this auth page is the ACTIVE page — otherwise .page{display:none} must be able to hide it. (Without this, the login screen could never be hidden and sat on top of the dashboard after a successful login.) */ .page.active.auth-page { display: grid; } .auth-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(80% 60% at 50% 35%, #000 10%, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 35%, #000 10%, transparent 75%); opacity: .6; } .auth-bloom { position: absolute; left: 50%; top: 18%; width: 520px; height: 520px; transform: translateX(-50%); background: radial-gradient(circle, var(--cyan-haze), transparent 62%); filter: blur(20px); pointer-events: none; } .auth-inner { position: relative; width: 100%; max-width: 392px; text-align: center; animation: rise .7s cubic-bezier(.2,.7,.2,1) both; } .auth-wordmark { font-family: var(--sans); font-weight: 800; font-size: 26px; letter-spacing: .26em; margin-left: .26em; /* optical balance for the tracking */ color: var(--cream); } .auth-wordmark span { color: var(--cream-3); } .auth-wordmark.sm { font-size: 20px; margin-bottom: 4px; } .auth-tagline { font-family: var(--mono); font-size: 12.5px; color: var(--cream-3); letter-spacing: .02em; margin: 14px 0 30px; } .auth-form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .toggle-auth { margin-top: 22px; font-size: 13px; color: var(--cream-3); text-align: center; } .toggle-auth a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--cyan-haze); padding-bottom: 1px; } .toggle-auth a:hover { color: var(--cyan-2); } .auth-foot { margin-top: 34px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; color: var(--cream-4); } .error-msg { color: var(--rose); font-size: 12.5px; min-height: 18px; font-family: var(--mono); } /* ============================================================ FIELDS ============================================================ */ .field { display: flex; flex-direction: column; gap: 7px; } .field-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); } .field-label em { font-style: normal; color: var(--cream-4); text-transform: none; letter-spacing: 0; } input, select { font-family: var(--mono); font-size: 14px; color: var(--cream); background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 12px 13px; width: 100%; transition: border-color .16s, box-shadow .16s, background .16s; appearance: none; } select { background-image: linear-gradient(45deg, transparent 50%, var(--cream-3) 50%), linear-gradient(135deg, var(--cream-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; cursor: pointer; } input::placeholder { color: var(--cream-4); } input:focus, select:focus { outline: none; border-color: var(--cyan); background: var(--ink-3); box-shadow: 0 0 0 3px var(--cyan-haze), 0 0 22px -6px var(--cyan-glow); } input[type=number] { -moz-appearance: textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .01em; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 12px 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s, box-shadow .2s, background .2s, border-color .2s, color .2s; } .btn-diamond { color: var(--cyan); font-size: 11px; transition: transform .3s, color .2s; } .btn-primary { background: linear-gradient(180deg, #1a212e, #11161f); color: var(--cream); border-color: var(--line-3); box-shadow: 0 0 0 0 var(--cyan-glow), var(--shadow); } .btn-primary:hover { border-color: var(--cyan); color: #fff; box-shadow: 0 0 30px -8px var(--cyan-glow), var(--shadow-lift); transform: translateY(-1px); } .btn-primary:hover .btn-diamond { transform: rotate(90deg) scale(1.15); color: var(--cyan-2); } .btn-primary:active { transform: translateY(0); } .btn-run { width: 100%; padding: 16px; font-size: 15px; margin-top: 4px; } .btn-ghost { background: transparent; color: var(--cream-2); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); } .btn-sm { padding: 8px 14px; font-size: 12.5px; } /* ============================================================ NAVBAR ============================================================ */ .navbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: rgba(10,12,16,.78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-brand { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .18em; color: var(--cream); text-decoration: none; display: flex; align-items: center; } /* Only the diamond gets separation — NOT a gap between LOAN and MATCH (they are separate flex items, so a container `gap` split the wordmark). */ .nav-brand .nav-diamond { margin-right: 9px; } .nav-brand b { font-weight: 700; color: var(--cream-3); } .nav-diamond { color: var(--cyan); font-size: 10px; filter: drop-shadow(0 0 6px var(--cyan-glow)); } .nav-links { display: flex; align-items: center; gap: 18px; } .nav-links a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--cream-3); text-decoration: none; transition: color .15s; } .nav-links a:hover { color: var(--cyan); } .engine-status { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--cream-4); display: inline-flex; align-items: center; gap: 7px; } .engine-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); animation: pulse 2.4s ease-in-out infinite; } /* ============================================================ SPINE — the signal-cut line as structural divider ============================================================ */ .spine { position: relative; height: 1px; background: linear-gradient(90deg, var(--line-3), transparent 78%); margin: 30px 0 18px; display: flex; align-items: center; } .spine::before { content: "◆"; color: var(--cream-4); font-size: 8px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .spine-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; color: var(--cream-3); background: var(--ink); padding-right: 14px; transform: translateY(-1px); } .spine-eligible { background: linear-gradient(90deg, var(--cyan), transparent 70%); } .spine-eligible .spine-label { color: var(--cyan); } .spine-eligible::before { color: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan-glow)); } .spine-conditional { background: linear-gradient(90deg, var(--amber), transparent 70%); } .spine-conditional .spine-label { color: var(--amber); } .spine-conditional::before { color: var(--amber); } .spine-eliminated { background: linear-gradient(90deg, var(--rose), transparent 70%); } .spine-eliminated .spine-label { color: var(--rose); } .spine-eliminated::before { color: var(--rose); } /* ============================================================ DASHBOARD ============================================================ */ .welcome-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .welcome-bar h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; } .dash-helper { font-family: var(--mono); font-size: 12.5px; color: var(--cream-3); margin-top: 10px; max-width: 62ch; line-height: 1.6; } .cta-group { display: inline-flex; gap: 8px; } @media (max-width: 620px) { .cta-group { width: 100%; flex-direction: column; } } .recent-list { display: flex; flex-direction: column; gap: 8px; } /* ---------- value band (ROI / pain→value) ---------- */ .value-band { margin-top: 26px; background: radial-gradient(120% 140% at 0% 0%, rgba(34,211,238,.06), transparent 55%), var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); } .vb-head-line { font-family: var(--sans); font-weight: 700; font-size: clamp(17px, 2.6vw, 21px); letter-spacing: -.01em; color: var(--cream); max-width: 30ch; } .vb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 20px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .vb-stat { background: var(--ink-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .vb-stat b { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--cream); } .vb-stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-4); } .vb-stat.vb-accent b { color: var(--cyan); text-shadow: 0 0 16px rgba(34,211,238,.25); } /* ---------- scenario "story machine" cards ---------- */ .scenario-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .scenario-card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 16px 14px; cursor: pointer; transition: border-color .16s, background .16s, transform .12s; overflow: hidden; } .scenario-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 100% 0%, var(--cyan-haze), transparent 60%); opacity: 0; transition: opacity .2s; } .scenario-card:hover { border-color: rgba(34,211,238,.45); background: var(--ink-3); transform: translateY(-2px); } .scenario-card:hover::after { opacity: 1; } .sc-kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; color: var(--cyan); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 7px; align-self: flex-start; display: inline-block; } .sc-name { font-family: var(--sans); font-weight: 600; font-size: 15px; margin-top: 11px; } .sc-line { font-family: var(--mono); font-size: 11.5px; color: var(--cream-3); margin-top: 3px; } .sc-go { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--cream-4); margin-top: 12px; display: inline-block; position: relative; z-index: 1; transition: color .16s; } .scenario-card:hover .sc-go { color: var(--cyan); } .row-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; transition: border-color .16s, background .16s, transform .12s; } .row-card:hover { border-color: var(--line-3); background: var(--ink-3); transform: translateX(2px); } .row-card .rc-name { font-weight: 600; font-size: 15px; } .row-card .rc-date { font-family: var(--mono); font-size: 11px; color: var(--cream-4); margin-top: 2px; } .row-card .rc-stats { font-family: var(--mono); font-size: 12px; color: var(--cream-3); text-align: right; white-space: nowrap; } .rc-stats b { color: var(--cyan); font-weight: 600; } .rc-stats .amber { color: var(--amber); } .rc-stats .rose { color: var(--rose); } .empty-note { font-family: var(--mono); font-size: 13px; color: var(--cream-4); padding: 14px 2px; } /* ============================================================ MODE TOGGLE (Residential / Commercial) ============================================================ */ .mode-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 999px; margin-bottom: 24px; } .mode-btn { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--cream-3); background: transparent; border: none; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background .16s, color .16s; } .mode-btn:hover { color: var(--cream); } .mode-btn.active { background: var(--cyan); color: var(--ink); font-weight: 600; } /* ============================================================ MATCH FORM ============================================================ */ .panel { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow); } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; width: 100%; background: none; border: none; text-align: left; } .panel-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--cyan); } .panel-note { font-family: var(--mono); font-size: 11px; color: var(--cream-4); } .panel-refine { padding-bottom: 0; } .panel-toggle { cursor: pointer; padding: 0; margin-bottom: 0; padding-bottom: 22px; } .panel-toggle .panel-kicker { color: var(--cream-2); transition: color .15s; } .panel-toggle:hover .panel-kicker { color: var(--cyan); } .toggle-icon { display: inline-block; width: 16px; text-align: center; color: var(--cyan); font-weight: 700; } .collapsible-content { display: none; padding-bottom: 22px; } .collapsible-content.open { display: block; animation: rise .35s ease both; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .credit-events-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .credit-events-section > .field-label { display: block; margin-bottom: 10px; } .credit-event-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .credit-event-row select, .credit-event-row input { flex: 1; } .ce-remove { flex: 0 0 auto; padding: 8px 12px; } /* ---------- the acquire animation ---------- */ .loading { text-align: center; padding: 64px 0; } .acquire-line { font-family: var(--mono); font-size: 15px; letter-spacing: .3em; color: var(--cyan); text-transform: uppercase; animation: flicker 1.1s steps(2) infinite; } .acquire-sub { font-family: var(--mono); font-size: 12px; color: var(--cream-4); margin-top: 10px; letter-spacing: .04em; } .acquire-bar { width: 240px; height: 2px; margin: 22px auto 0; background: var(--line-2); border-radius: 2px; overflow: hidden; } .acquire-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 12px var(--cyan-glow); animation: sweep 1.1s ease-in-out infinite; } /* ============================================================ RESULTS ============================================================ */ .results-bloom { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); width: 640px; height: 320px; background: radial-gradient(60% 60% at 50% 0%, var(--cyan-haze), transparent 70%); filter: blur(28px); pointer-events: none; z-index: 0; } .results-summary { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); animation: rise .5s ease both; } .summary-counts { display: flex; align-items: center; gap: 22px; font-family: var(--mono); } .summary-stat { display: flex; flex-direction: column; gap: 3px; } .summary-stat b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; } .summary-stat span { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-4); } .summary-stat.eligible b { color: var(--cyan); } .summary-stat.conditional b { color: var(--amber); } .summary-stat.eliminated b { color: var(--cream-3); } .summary-time { font-family: var(--mono); font-size: 12px; color: var(--cream-3); display: inline-flex; align-items: center; gap: 7px; } .summary-time .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); } .results-actions { display: flex; gap: 8px; margin-top: 14px; position: relative; z-index: 1; } .results-section { position: relative; z-index: 1; } /* ---------- result cards ---------- */ .result-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; transition: border-color .18s, background .18s; opacity: 0; animation: lockon .5s cubic-bezier(.2,.7,.2,1) forwards; } .result-card:hover { border-color: var(--line-3); } .result-card.eligible:hover { border-color: rgba(34,211,238,.5); } .result-header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; } .locator { flex: 0 0 auto; font-size: 13px; line-height: 1; color: var(--cream-4); transition: color .3s, transform .3s, text-shadow .3s; } .eligible .locator { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); animation: ignite .6s ease both; } .conditional .locator { color: var(--amber); } .eliminated .locator { color: var(--rose); opacity: .7; } .result-rank { flex: 0 0 auto; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--cream-4); min-width: 22px; } .result-info { flex: 1; min-width: 0; } .result-name { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; } .result-category { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-4); margin-top: 3px; } .result-stats { flex: 0 0 auto; text-align: right; } .result-ltv { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--cream); } .eligible .result-ltv { color: var(--cyan); } .result-why { font-family: var(--mono); font-size: 11px; color: var(--cream-3); margin-top: 3px; max-width: 240px; } .result-needs { font-family: var(--mono); font-size: 11.5px; color: var(--amber); } .result-detail { display: none; padding: 4px 18px 18px; border-top: 1px solid var(--line); margin-top: -1px; background: rgba(0,0,0,.18); } .result-detail.open { display: block; animation: rise .28s ease both; } .gate-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; padding-top: 14px; } @media (max-width: 560px) { .gate-list { grid-template-columns: 1fr; } } .gate-row { display: flex; align-items: baseline; gap: 9px; font-family: var(--mono); font-size: 12px; padding: 3px 0; } .gate-icon { flex: 0 0 auto; width: 12px; text-align: center; font-weight: 600; } .gate-pass .gate-icon { color: var(--cyan); } .gate-fail .gate-icon { color: var(--rose); } .gate-conditional .gate-icon { color: var(--amber); } .gate-name { flex: 0 0 96px; color: var(--cream-2); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; } .gate-detail { color: var(--cream-4); } .result-note { font-family: var(--mono); font-size: 11.5px; color: var(--cream-4); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); line-height: 1.6; } /* ---------- elimination rows ---------- */ .elim-card { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 14px; transition: border-color .15s; } .elim-card:hover { border-color: var(--line-2); } .elim-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .elim-dot { color: var(--rose); font-size: 10px; opacity: .6; flex: 0 0 auto; } .elim-name { font-weight: 500; font-size: 14px; color: var(--cream-2); } .elim-cat { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-4); margin-left: 8px; } .elim-reason { font-family: var(--mono); font-size: 11.5px; color: var(--rose); text-align: right; opacity: .85; } /* ============================================================ SAVE DIALOG ============================================================ */ .save-dialog { position: fixed; inset: 0; z-index: 100; background: rgba(5,7,10,.72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: fade .2s ease both; } .save-dialog-inner { background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 26px; max-width: 380px; width: 100%; animation: rise .3s ease both; } .save-dialog-inner h3 { font-weight: 700; font-size: 18px; margin-bottom: 16px; } .save-dialog-inner input, .save-dialog-inner textarea { margin-bottom: 10px; } .save-dialog-inner textarea { font-family: var(--mono); font-size: 13px; color: var(--cream); background: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px; width: 100%; height: 64px; resize: vertical; } .save-dialog-inner textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-haze); } /* ============================================================ WHITE-LABEL BRAND SWITCHER (demo control) ============================================================ */ .brand-switch { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: rgba(12,15,21,.92); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 15px 8px 13px; cursor: pointer; font-family: var(--mono); box-shadow: var(--shadow-lift); transition: border-color .15s, transform .12s; user-select: none; } .brand-switch:hover { border-color: var(--cyan); transform: translateY(-1px); } .bs-kick { font-size: 8.5px; letter-spacing: .18em; color: var(--cream-4); } .bs-dia { font-size: 9px; color: var(--cyan); transition: color .25s; filter: drop-shadow(0 0 6px var(--cyan-glow)); } .bs-name { font-size: 12px; color: var(--cream); font-weight: 500; transition: color .2s; } @media (max-width: 620px) { .bs-kick { display: none; } .brand-switch { right: 12px; bottom: 12px; padding: 7px 13px; } } /* ============================================================ LANDING (public) ============================================================ */ .landing { position: relative; overflow-x: hidden; } .lp-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 50% at 50% 0%, #000 5%, transparent 70%); mask-image: radial-gradient(80% 50% at 50% 0%, #000 5%, transparent 70%); opacity: .5; } .lp-nav { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; } .lp-navlink, .lp-nav .nav-links a { font-family: var(--mono); font-size: 12px; color: var(--cream-3); text-decoration: none; letter-spacing: .04em; } .lp-navlink:hover, .lp-nav .nav-links a:hover { color: var(--cyan); } .lp-hero { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 70px 24px 40px; text-align: center; } .lp-bloom { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); width: 700px; height: 360px; background: radial-gradient(60% 60% at 50% 0%, var(--cyan-haze), transparent 70%); filter: blur(28px); pointer-events: none; } .lp-h1 { position: relative; font-family: var(--sans); font-weight: 800; font-size: clamp(40px, 7vw, 76px); line-height: 1.02; letter-spacing: -.03em; margin: 14px 0 0; } .lp-h1 span { color: var(--cream-3); } .lp-sub { position: relative; font-family: var(--mono); font-size: 14.5px; line-height: 1.7; color: var(--cream-3); max-width: 60ch; margin: 26px auto 0; } .lp-cta { position: relative; display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; } .lp-cta .btn { width: auto; } .lp-foot-note { position: relative; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-4); margin-top: 26px; } .lp-section { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 30px 24px; } .lp-demo { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 22px; align-items: center; } .lp-demo-h { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-4); margin-bottom: 12px; } .lp-ms { color: var(--cyan); } .lp-demo-in { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .lp-chip { display: inline-block; font-family: var(--mono); font-size: 12.5px; color: var(--cream); background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; margin: 0 6px 8px 0; } .lp-demo-arrow { color: var(--cyan); font-size: 22px; text-align: center; } .lp-demo-out { background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .lp-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 13px; } .lp-row:first-of-type { border-top: none; } .lp-rank { color: var(--cyan); width: 22px; } .lp-row.dim .lp-rank { color: var(--amber); } .lp-name { flex: 1; color: var(--cream); } .lp-stat { color: var(--cream-3); font-size: 12px; } .lp-why { font-family: var(--mono); font-size: 11.5px; color: var(--cream-4); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .lp-takes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .lp-take { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .lp-take-n { font-family: var(--mono); font-size: 12px; color: var(--cyan); letter-spacing: .2em; } .lp-take h3 { font-family: var(--sans); font-weight: 700; font-size: 18px; margin: 12px 0 8px; letter-spacing: -.01em; } .lp-take p { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--cream-3); } .lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 14px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .lp-statbox { background: var(--ink-2); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; } .lp-statbox b { font-family: var(--mono); font-size: 19px; color: var(--cyan); } .lp-statbox span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--cream-4); } .lp-cta-band { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 30px auto; padding: 50px 24px; } .lp-cta-band h2 { font-family: var(--sans); font-weight: 800; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; } .lp-cta-band p { font-family: var(--mono); font-size: 13.5px; color: var(--cream-3); margin: 14px 0 26px; } .lp-cta-band .btn { width: auto; } .lp-footer { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 28px 24px 50px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-family: var(--sans); font-weight: 700; letter-spacing: .14em; } .lp-footer .nav-diamond { color: var(--cyan); } .lp-footer-meta { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .14em; color: var(--cream-4); } @media (max-width: 760px) { .lp-demo { grid-template-columns: 1fr; } .lp-demo-arrow { transform: rotate(90deg); } .lp-takes, .lp-stats { grid-template-columns: 1fr; } .lp-footer { flex-direction: column; gap: 12px; text-align: center; } } /* ============================================================ THEME TOGGLE ============================================================ */ .theme-switch { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 7px; background: rgba(12,15,21,.92); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 15px; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--cream-2); box-shadow: var(--shadow-lift); transition: border-color .15s, transform .12s, color .15s; user-select: none; } .theme-switch:hover { border-color: var(--cyan); transform: translateY(-1px); color: var(--cyan); } @media (max-width: 620px) { .theme-switch { left: 12px; bottom: 12px; } } /* ============================================================ RESULTS — query echo + per-product labeled number grid ============================================================ */ .results-query { font-family: var(--mono); font-size: 11.5px; color: var(--cream-3); margin-bottom: 12px; letter-spacing: .02em; position: relative; z-index: 1; } .results-query b { color: var(--cyan); font-weight: 600; } .result-statgrid { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 12px 18px 14px 52px; border-top: 1px solid var(--line); } .stat-cell { display: flex; flex-direction: column; gap: 2px; } .stat-cell .sl { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-4); } .stat-cell .sv { font-family: var(--mono); font-size: 13px; color: var(--cream); font-weight: 500; white-space: nowrap; } .result-card.eligible .stat-cell.key .sv { color: var(--cyan); } @media (max-width: 560px) { .result-statgrid { padding-left: 18px; gap: 12px 16px; } } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @keyframes flicker{ 0%,100% { opacity: 1; } 50% { opacity: .55; } } @keyframes sweep { 0% { transform: translateX(-160%); } 100% { transform: translateX(360%); } } @keyframes lockon { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } } @keyframes ignite { 0% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.45); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .result-card { opacity: 1; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 620px) { .container { padding: 28px 16px 80px; } .form-grid { grid-template-columns: 1fr; } .welcome-bar { flex-direction: column; align-items: stretch; gap: 16px; } .welcome-bar .btn { width: 100%; } .navbar { padding: 12px 16px; } .engine-status { display: none; } .nav-links { gap: 14px; } .result-header { flex-wrap: wrap; } .result-stats { text-align: left; width: 100%; padding-left: 36px; } .result-why { max-width: none; } .summary-counts { gap: 16px; } .summary-stat b { font-size: 20px; } .scenario-strip { grid-template-columns: 1fr; } .vb-stats { grid-template-columns: 1fr 1fr; } } @media (min-width: 621px) and (max-width: 900px) { .scenario-strip { grid-template-columns: repeat(2, 1fr); } }