/* Oirizz — theme tokens, UI_SPEC.md §2-5. Loaded as a static asset (no Vite build step needed) so the solo-founder vibe-coding workflow can just refresh the browser. */ :root { /* §2 Color tokens */ --bg: #15111C; --surface: #1F1928; --surface-2: #2A2233; --hairline: #382E45; --text: #F2ECE6; --text-muted: #9A8FA8; --accent-gold: #D9A44A; --accent-coral: #E8735C; --accent-teal: #5FA89F; /* §4 Spacing & shape */ --space-1: 4px; --radius-card: 16px; --radius-pill: 9999px; --screen-padding: 24px; /* Bootstrap components (.card, .btn, .form-control, etc) read color from their own --bs-* variables, NOT from inherited `color` on body — overriding body's color alone does not cascade into them. Without this, Bootstrap's .card falls back to its own default #212529 text color, which is nearly invisible on our dark backgrounds. */ --bs-body-color: var(--text); --bs-body-bg: var(--bg); --bs-card-bg: var(--surface); --bs-card-color: var(--text); --bs-border-color: var(--hairline); --bs-secondary-color: var(--text-muted); --bs-emphasis-color: var(--text); } /* Light theme — toggled via [data-theme="light"] on . Same variable names as the dark palette above, so every existing component re-themes automatically with zero per-component CSS changes. Warmer/softer palette, still avoids literal pink/red per UI_SPEC.md §1's original rationale — leans blush/peach instead. */ :root[data-theme="light"] { --bg: #FFF6F0; --surface: #FFFFFF; --surface-2: #FFEDE2; --hairline: #F3D9C6; --text: #3B2A26; --text-muted: #9C7D74; --accent-gold: #E8A33D; --accent-coral: #F2637A; --accent-teal: #3FA79A; } * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--text); min-height: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.4; padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* §8 room for bottom tab bar */ } /* §3 Typography */ h1, h2, .display { font-family: 'Newsreader', Georgia, serif; line-height: 1.3; } h1 { font-size: 24px; } h2 { font-size: 22px; } .label, .meta { font-size: 11px; line-height: 1.3; color: var(--text-muted); } .quote { font-family: 'Newsreader', Georgia, serif; font-style: italic; line-height: 1.5; } .screen { max-width: 420px; margin: 0 auto; padding: var(--screen-padding); } /* §5 Core components */ .card { background: var(--surface); color: var(--text); /* explicit safety net alongside the --bs-card-color override above */ border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 16px; margin-bottom: 16px; } .card-title { font-family: 'Newsreader', Georgia, serif; font-size: 15px; margin-bottom: 8px; color: var(--text-muted); } .card--coral { border-color: var(--accent-coral); background: color-mix(in srgb, var(--accent-coral) 10%, var(--surface)); } .card--teal { border-color: var(--accent-teal); background: color-mix(in srgb, var(--accent-teal) 10%, var(--surface)); } .btn-primary-oirizz { background: var(--accent-gold); color: #15111C; border: none; border-radius: var(--radius-pill); padding: 12px 24px; font-weight: 600; width: 100%; } .btn-primary-oirizz:disabled { opacity: 0.5; } .btn-primary-oirizz:active { transform: scale(0.98); } .btn-text-oirizz { background: none; border: none; color: var(--text-muted); text-decoration: underline dotted; font-size: 13px; } .form-control-oirizz { width: 100%; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; color: var(--text); padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: 14px; } .form-control-oirizz:focus { outline: 2px solid var(--accent-gold); outline-offset: 1px; } .progress-track { background: var(--surface-2); border-radius: var(--radius-pill); height: 8px; overflow: hidden; } .progress-fill { height: 100%; border-radius: var(--radius-pill); } .progress-fill--teal { background: var(--accent-teal); } .progress-fill--coral { background: var(--accent-coral); } .progress-fill--gold { background: var(--accent-gold); } .pill { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 12px; margin: 0 4px 4px 0; } .pill--coral { background: color-mix(in srgb, var(--accent-coral) 25%, var(--surface-2)); color: var(--accent-coral); } .pill--teal { background: color-mix(in srgb, var(--accent-teal) 25%, var(--surface-2)); color: var(--accent-teal); } .pill--gold { background: color-mix(in srgb, var(--accent-gold) 25%, var(--surface-2)); color: var(--accent-gold); } .confidence-badge { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--accent-coral); color: var(--accent-coral); } /* §5 Bottom tab bar */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--hairline); display: flex; justify-content: space-around; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); /* §8 iOS safe area */ max-width: 420px; margin: 0 auto; } .tab-item { color: var(--text-muted); text-decoration: none; font-size: 11px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .tab-item.active { color: var(--text); font-weight: 600; } .tab-item.active .tab-dot { display: block; } .tab-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-gold); display: none; } .reply-tabs { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; } .reply-tab { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; color: var(--text-muted); white-space: nowrap; cursor: pointer; } .reply-tab.active { background: var(--accent-gold); color: #15111C; border-color: var(--accent-gold); } /* Loading state, §6 */ .loading-line { color: var(--text-muted); font-size: 13px; text-align: center; padding: 40px 0; } @media (prefers-reduced-motion: reduce) { .loading-line[data-animated] { animation: none !important; } } /* ===== Fun layer: theme toggle, micro-animations, emoji bursts ===== */ .theme-toggle { position: fixed; top: 12px; right: 12px; z-index: 50; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--hairline); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: transform 0.2s ease; } .theme-toggle:hover { transform: scale(1.08) rotate(-8deg); } .theme-toggle:active { transform: scale(0.92); } @keyframes oirizz-bounce-tap { 0% { transform: scale(1); } 40% { transform: scale(0.93); } 100% { transform: scale(1); } } .oirizz-bounce { animation: oirizz-bounce-tap 0.28s ease; } @keyframes oirizz-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .screen .card { animation: oirizz-card-in 0.35s ease both; } .screen .card:nth-of-type(1) { animation-delay: 0ms; } .screen .card:nth-of-type(2) { animation-delay: 60ms; } .screen .card:nth-of-type(3) { animation-delay: 120ms; } .screen .card:nth-of-type(4) { animation-delay: 180ms; } .screen .card:nth-of-type(5) { animation-delay: 240ms; } .screen .card:nth-of-type(6) { animation-delay: 300ms; } .screen .card:nth-of-type(7) { animation-delay: 360ms; } @keyframes oirizz-burst-float { 0% { opacity: 1; transform: translate(0, 0) scale(0.6) rotate(0deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -60px) scale(1.1) rotate(20deg); } } .oirizz-burst-emoji { position: fixed; pointer-events: none; z-index: 999; font-size: 18px; animation: oirizz-burst-float 0.85s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .oirizz-bounce, .screen .card, .oirizz-burst-emoji { animation: none !important; } } /* ===== Brand logo — dark mark by design, needs to flip white on our dark theme ===== */ .brand-logo { height: 28px; width: auto; filter: brightness(0) invert(1); /* dark theme (default): force pure white */ vertical-align: middle; } :root[data-theme="light"] .brand-logo { filter: none; /* light theme: original dark mark already reads fine on light bg */ } /* ===== Landing page sections ===== */ .step-number { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-gold); color: #15111C; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .pain-chip { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; font-size: 13px; height: 100%; } .section-label { font-family: 'Newsreader', serif; font-size: 17px; margin-bottom: 16px; } .trust-line { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; }