/* ============================================================================= Rate Mates — Styles ============================================================================= Layout, spacing, and static component styles are handled by Tailwind utilities in ratemates.html. This file covers only what Tailwind cannot: 1. CSS custom properties (theme tokens — also consumed by JS inline styles) 2. Dark mode token overrides 3. Base styles that reference tokens (font, bg, color, theme transition) 4. Screen show/hide (toggled by JS via classList) 5. Draggable slider (class names set programmatically by JS — cannot be expressed as static Tailwind classes in markup) 6. Glass card, top-nav, and decorative background elements ============================================================================= */ /* ----------------------------------------------------------------------------- 1. CSS Custom Properties — Light Mode ----------------------------------------------------------------------------- */ :root { /* Backgrounds */ --bg: #f3f2ff; --bg-gradient: none; --surface: rgba(255, 255, 255, 0.82); --surface-border: rgba(99, 102, 241, 0.16); --surface-shadow: 0 8px 48px rgba(99, 102, 241, 0.13), 0 1px 3px rgba(99, 102, 241, 0.07); --flash-buy: #d1fae5; /* Text */ --text: #1e1b4b; --text-muted: #7e7eb5; /* Interactive elements */ --btn-bg: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); --btn-text: #FFFFFF; --link-color: #6366f1; /* Number buttons — default state */ --num-border: rgba(99, 102, 241, 0.22); --num-hover: rgba(99, 102, 241, 0.09); /* Number buttons — selected state */ --num-selected-bg: #6366f1; --num-selected-text:#FFFFFF; /* Inputs */ --input-border: rgba(99, 102, 241, 0.24); /* Outcome accent colours */ --buy-accent: #059669; --buy-accent-2: #34d399; --skip-accent: #9ca3af; /* Accent */ --accent: #6366f1; --accent-glow: rgba(99, 102, 241, 0.32); } /* ----------------------------------------------------------------------------- 2. Dark Mode Overrides Applied via data-theme="dark" on , set by the in-app toggle. ----------------------------------------------------------------------------- */ [data-theme="dark"] { --bg: #06060c; --bg-gradient: none; --surface: rgba(255, 255, 255, 0.05); --surface-border: rgba(139, 92, 246, 0.22); --surface-shadow: 0 8px 48px rgba(0, 0, 0, 0.60), 0 1px 0 rgba(139, 92, 246, 0.10); --flash-buy: #064e3b; --text: #ede9fe; --text-muted: #7c7ca8; --btn-bg: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); --btn-text: #FFFFFF; --link-color: #818cf8; --num-border: rgba(139, 92, 246, 0.26); --num-hover: rgba(139, 92, 246, 0.12); --num-selected-bg: #6366f1; --num-selected-text:#FFFFFF; --input-border: rgba(139, 92, 246, 0.26); --buy-accent: #34d399; --buy-accent-2: #6ee7b7; --skip-accent: #6b7280; --accent: #818cf8; --accent-glow: rgba(129, 140, 248, 0.32); } /* ----------------------------------------------------------------------------- 3. Base — font, background, colour, and theme-switch transition ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: 'Heebo', sans-serif; background: var(--bg); color: var(--text); transition: background 0.35s, color 0.35s; } /* ----------------------------------------------------------------------------- 4. Screen Show / Hide ----------------------------------------------------------------------------- */ .screen { display: none; position: relative; z-index: 1; } .screen.active { display: flex; overflow-y: auto; animation: screenEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes screenEnter { from { opacity: 0; transform: translateY(20px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ----------------------------------------------------------------------------- 5. Glass Card ----------------------------------------------------------------------------- */ .glass-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 40px; box-shadow: var(--surface-shadow); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); padding: 32px 28px 28px; } /* ----------------------------------------------------------------------------- 6. Top Navigation Bar ----------------------------------------------------------------------------- */ .top-bar { background: transparent; border-bottom: 1px solid transparent; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: background 0.35s, border-color 0.35s; } .app-name { font-size: 15px; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--accent) 0%, #a855f7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; user-select: none; } .top-bar-btn { background: transparent; border: 1.5px solid var(--num-border); color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: 9999px; cursor: pointer; letter-spacing: 0.06em; transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: 'Heebo', sans-serif; -webkit-tap-highlight-color: transparent; } .top-bar-btn:hover { background: var(--num-hover); color: var(--text); } /* Icon-only variant — square-ish pill for the theme icon button */ .top-bar-btn svg { display: block; } #theme-toggle { display: flex; align-items: center; justify-content: center; padding: 7px 10px; } /* ----------------------------------------------------------------------------- 7. Draggable Slider ----------------------------------------------------------------------------- */ .slider-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; user-select: none; -webkit-user-select: none; direction: ltr; /* always 1→10 left to right, regardless of RTL */ } /* Giant coloured number that shows the current rating */ .slider-number { font-size: 88px; font-weight: 900; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; transition: color 0.18s ease, transform 0.13s ease-out; min-height: 1em; } /* Pill-shaped track */ .slider-track { position: relative; width: 100%; height: 60px; border-radius: 9999px; background: var(--num-hover); border: 1.5px solid var(--num-border); cursor: pointer; touch-action: none; overflow: visible; -webkit-tap-highlight-color: transparent; } /* Coloured fill that grows from the left as value increases */ .slider-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9999px; pointer-events: none; transition: width 0.07s ease-out, background 0.18s ease; } /* Round thumb knob */ .slider-thumb { position: absolute; width: 52px; height: 52px; border-radius: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); border: 2.5px solid rgba(255, 255, 255, 0.85); pointer-events: none; z-index: 1; transition: left 0.07s ease-out, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } /* Tick labels 1–10 beneath the track */ .slider-ticks { display: flex; justify-content: space-between; width: 100%; padding: 0 4px; } .slider-ticks span { font-size: 11px; font-weight: 700; color: var(--text-muted); width: 20px; text-align: center; letter-spacing: 0; opacity: 0.7; } /* ----------------------------------------------------------------------------- 8. Score Chips — Screen 4 result breakdown ----------------------------------------------------------------------------- */ .score-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .score-chip { background: var(--num-hover); border: 1px solid var(--num-border); border-radius: 18px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; } .chip-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .chip-value { font-size: 38px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }