/* Snowfairy AI Concierge — shared premium visual language. Clean white/light-gray surfaces, a professional Microsoft-Fluent-inspired blue accent, dark neutral text — enterprise-software feel rather than a boutique/cream-and-gold look. Every page that includes this file also loads /shared-assets/theme.js, which sets data-theme on before first paint — light is the default; dark is a fully separate palette, not an inverted filter, so surfaces get their own tuned colors below. Token NAMES are kept as --gold/--gold-deep/--gold-line for historical reasons (every page already references them) — their VALUES are now the blue brand accent, not literal gold. */ :root { --ink: #1b1b1f; --ink2: #3b3b40; --ink3: #5f5f66; --ink4: #86868c; --gold: #2564cf; --gold-deep: #1d4fa8; --gold-line: #dfe3ea; --bg: #f5f6f8; --card: #ffffff; --danger: #c42b1c; --ok: #107c10; --info: #5b5fc7; --info-bg: #eeeefa; --radius: 16px; --shadow: 0 8px 32px rgba(20, 30, 50, 0.08); /* Semantic surfaces reused across dashboard/console for message bubbles, soft panels and borders — kept as tokens (not inline hex) specifically so dark mode can retune each one rather than blanket-inverting. */ --surface-soft: #eef3fc; --surface-soft2: #eef0f3; --border-soft: #dfe3ea; --input-bg: #fbfcfe; --ai-bg: #eaf6f4; --ai-text: #0b6e63; --ai-border: #bfe3dc; --text-strong-soft: #24272b; /* Text color to place on top of an --ink/--gold-deep filled surface. */ --on-solid: #ffffff; --ok-bg: #e6f4ea; --danger-bg: #fdecea; --danger-line: #f6c6c2; --warn-bg: #fff4e0; --warn-text: #8a5a00; } :root[data-theme="dark"] { --ink: #f3f5f9; --ink2: #d3d9e3; --ink3: #9aa3b4; --ink4: #6b7385; --gold: #5b9dff; --gold-deep: #3d7de6; --gold-line: #29334a; --bg: #0c101a; --card: #161b28; --danger: #f1707b; --ok: #5fd08a; --info: #9d8ff0; --info-bg: #241f42; --shadow: 0 12px 40px rgba(0, 0, 0, 0.55); --surface-soft: #1a2338; --surface-soft2: #1c2130; --border-soft: #29334a; --input-bg: #10141f; --ai-bg: #0f2b28; --ai-text: #5fd6c4; --ai-border: #1c3f3a; --text-strong-soft: #e8ebf1; --on-solid: #ffffff; --ok-bg: #0f2a1c; --danger-bg: #35191b; --danger-line: #522427; --warn-bg: #332512; --warn-text: #f0c674; } * { box-sizing: border-box; } html { background: var(--bg); color-scheme: light; overflow-x: hidden; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; transition: background .2s ease, color .2s ease; } /* Subtle premium glow in dark mode only — two soft brand-blue radial highlights fixed to the viewport corners, sitting under all content. Light mode stays a plain flat --bg (that's the look already approved). */ [data-theme="dark"] body { background: radial-gradient(1100px 700px at 12% -10%, rgba(61, 125, 230, 0.16), transparent 60%), radial-gradient(900px 600px at 100% 110%, rgba(93, 214, 196, 0.08), transparent 55%), var(--bg); } /* ---- Theme toggle: a pill switch, deliberately its own distinct control (not a copy of any other Snowfairy product's toggle) ---- */ .sf-theme-toggle { display: inline-flex; align-items: center; gap: 6px; width: 52px; height: 28px; border-radius: 20px; border: 1px solid var(--gold-line); background: var(--card); cursor: pointer; padding: 3px; position: relative; flex-shrink: 0; } .sf-theme-toggle .knob { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); display: flex; align-items: center; justify-content: center; font-size: 10px; transition: transform .2s ease; transform: translateX(0); } [data-theme="dark"] .sf-theme-toggle .knob { transform: translateX(22px); } .sf-card { width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; } .sf-card--wide { max-width: 720px; } .sf-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 24px; } .sf-brand img { width: 36px; height: 36px; border-radius: 9px; } .sf-brand span { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; } .sf-brand .brand-name em { font-style: normal; color: var(--gold-deep); } /* ---- Concierge mark: the REAL Snowfairy AI icon (the same vector mark used across every other Snowfairy product) + a genuine text wordmark — not an image with baked-in lettering. "Snowfairy" in ink, "AI™" in gold (small line), then a big bold "Concierge" with a decorative gold dot accent above it — the premium styling cue from the reference mockup, rebuilt in real CSS so it reflows/themes correctly everywhere. ---- */ .sf-brand-stack { display: flex; align-items: center; gap: 14px; font-family: "Poppins", "Segoe UI", sans-serif; } .sf-logo-icon { height: 40px; width: auto; display: block; flex-shrink: 0; } .sf-divider { width: 2px; height: 40px; transform:translateY(3px); background: linear-gradient(var(--gold), var(--gold-deep)); border-radius: 2px; flex-shrink: 0; } .sf-brand-stack .lines { display: flex; flex-direction: column; line-height: 1.05; } .sf-brand-stack .line1 { font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--ink); } .sf-brand-stack .line1 .ai { color: var(--gold-deep); font-weight: 700; } .sf-brand-stack .line1 .tm { font-size: 8px; vertical-align: super; } .sf-brand-stack .line2 { position: relative; font-size: 27px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); margin-top: 2px; } /* The "i" in Concierge keeps its own natural dot — our gold accent dot is positioned by JS (see theme.js) directly above THAT dot, measured from this span's real rendered position so it lines up regardless of font metrics/size/zoom, instead of a guessed percentage offset. */ .sf-brand-stack .line2 .i-letter { position: relative; } .sf-brand-stack .line2 .dot { position: absolute; width: 7px; height: 5px; border-radius: 999px; background: radial-gradient(circle at 32% 28%, #ffe58e, #c69538 75%, #956e29); opacity: 0; } .sf-brand-stack .line2 .dot.positioned { opacity: 1; } .sf-logo-icon--sm { height: 30px; } .sf-divider--sm { height: 30px; transform:translateY(2px); } .sf-brand-stack--sm .line1 { font-size: 11px; } .sf-brand-stack--sm .line2 { font-size: 20px; } .sf-brand-stack--sm .line2 .dot { width: 5px; height: 3px; } h1.sf-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; text-align: center; } p.sf-sub { font-size: 13px; color: var(--ink3); text-align: center; margin: 0 0 28px; line-height: 1.6; } .sf-field { margin-bottom: 16px; } .sf-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; } .sf-field input, .sf-field select, .sf-field textarea { width: 100%; padding: 11px 13px; font-size: 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--input-bg); color: var(--ink); font-family: inherit; } .sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus { outline: none; border-color: var(--gold); } .sf-field textarea { resize: vertical; min-height: 80px; } .sf-radio-row { display: flex; gap: 10px; } .sf-radio-opt { flex: 1; border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; cursor: pointer; font-size: 13px; text-align: center; transition: border-color 0.15s, background 0.15s; } .sf-radio-opt.selected { border-color: var(--gold); background: var(--surface-soft); color: var(--gold-deep); font-weight: 600; } .sf-btn { width: 100%; padding: 13px; border: none; border-radius: 10px; background: var(--ink); color: var(--on-solid); font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .sf-btn:hover { opacity: 0.88; } .sf-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sf-btn--gold { background: var(--gold-deep); color: var(--on-solid); } .sf-error { color: var(--danger); font-size: 12.5px; min-height: 18px; margin-bottom: 12px; text-align: center; } .sf-success { color: var(--ok); font-size: 13px; text-align: center; padding: 16px; background: var(--ai-bg); border: 1px solid var(--ai-border); border-radius: 10px; } .sf-footer-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gold-line); font-size: 11.5px; color: var(--ink4); text-align: center; line-height: 1.7; } .sf-footer-note a { color: var(--gold-deep); text-decoration: none; } .sf-link-switch { text-align: center; font-size: 13px; margin-top: 16px; color: var(--ink3); } .sf-link-switch a { color: var(--gold-deep); text-decoration: none; font-weight: 600; }