/* ============================================================ Jeff Quiz — Design Themes 6 themes inspired by: Linear, Apple, Notion, Spotify, Stripe, Raycast Usage: add class to element, e.g. ============================================================ */ /* ── Theme Switcher UI ── */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-family: var(--font-body, system-ui, sans-serif); } .theme-switcher-toggle { background: var(--color-primary, #6c3ce0); color: #fff; border: none; border-radius: 50px; padding: 10px 18px; font-size: 0.85rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: transform 0.15s, box-shadow 0.15s; display: flex; align-items: center; gap: 6px; } .theme-switcher-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } .theme-switcher-panel { display: none; background: rgba(30, 30, 40, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); min-width: 200px; } .theme-switcher-panel.open { display: block; } .theme-switcher-panel h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 10px 0; } .theme-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background 0.15s; color: rgba(255,255,255,0.85); font-size: 0.88rem; font-weight: 500; border: none; background: transparent; width: 100%; text-align: left; } .theme-option:hover { background: rgba(255,255,255,0.1); } .theme-option.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 700; } .theme-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.2); } /* ── DEFAULT (current purple/indigo theme — no extra class needed) ── */ :root { --font-heading: 'Nunito', 'Noto Sans SC', -apple-system, sans-serif; --font-body: 'Noto Sans SC', 'Nunito', -apple-system, sans-serif; --color-primary: #6c3ce0; --color-primary-light: #8b5cf6; --color-primary-dark: #4c1d95; --color-secondary: #818cf8; --color-accent: #a78bfa; --gradient-main: linear-gradient(135deg, #6c3ce0 0%, #4338ca 50%, #3b82f6 100%); --gradient-shop: linear-gradient(135deg, #6c3ce0 0%, #7c3aed 50%, #8b5cf6 100%); --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); --color-text: #ffffff; --color-text-secondary: rgba(255,255,255,0.8); --color-text-muted: rgba(255,255,255,0.6); --color-text-dark: #1e1b4b; --color-surface: rgba(255,255,255,0.15); --color-surface-hover: rgba(255,255,255,0.25); --color-card: rgba(255,255,255,0.95); --color-success: #34d399; --color-error: #f87171; --color-warning: #fbbf24; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 9999px; --shadow-card: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06); --shadow-elevated: 0 12px 40px rgba(0,0,0,0.15); } /* ══════════════════════════════════════════ THEME: LINEAR Dark-mode-first. Near-black canvas. Purple accent. Ultra-minimal, precise. ══════════════════════════════════════════ */ html.theme-linear { --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --color-primary: #5e6ad2; --color-primary-light: #7c8ae2; --color-primary-dark: #4a54b8; --color-secondary: #8b92e8; --color-accent: #5e6ad2; --gradient-main: linear-gradient(135deg, #08090a 0%, #13141a 50%, #1a1b23 100%); --gradient-shop: linear-gradient(135deg, #5e6ad2 0%, #4a54b8 100%); --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); --color-text: #f7f8f8; --color-text-secondary: rgba(247,248,248,0.7); --color-text-muted: rgba(247,248,248,0.4); --color-text-dark: #08090a; --color-surface: rgba(255,255,255,0.05); --color-surface-hover: rgba(255,255,255,0.09); --color-card: rgba(255,255,255,0.05); --color-success: #4caf94; --color-error: #e5533d; --color-warning: #d97706; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; --shadow-card: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4); --shadow-card-hover: 0 0 0 1px rgba(94,106,210,0.4), 0 4px 20px rgba(0,0,0,0.5); --shadow-elevated: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.6); } html.theme-linear body { background: #08090a !important; font-feature-settings: "cv01", "ss03"; } /* ══════════════════════════════════════════ THEME: APPLE Cinematic black & white. Reductive luxury. SF-inspired system fonts, tight spacing. ══════════════════════════════════════════ */ html.theme-apple { --font-heading: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif; --font-body: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif; --color-primary: #2997ff; --color-primary-light: #42a5ff; --color-primary-dark: #0071e3; --color-secondary: #6e6e73; --color-accent: #2997ff; --gradient-main: linear-gradient(180deg, #000000 0%, #1a1a1a 100%); --gradient-shop: linear-gradient(135deg, #2997ff 0%, #0071e3 100%); --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); --color-text: #f5f5f7; --color-text-secondary: rgba(245,245,247,0.72); --color-text-muted: rgba(245,245,247,0.4); --color-text-dark: #1d1d1f; --color-surface: rgba(255,255,255,0.08); --color-surface-hover: rgba(255,255,255,0.14); --color-card: rgba(255,255,255,0.06); --color-success: #30d158; --color-error: #ff453a; --color-warning: #ffd60a; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 9999px; --shadow-card: 0 4px 24px rgba(0,0,0,0.5); --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.6); --shadow-elevated: 0 16px 64px rgba(0,0,0,0.7); } html.theme-apple body { background: #000000 !important; } /* ══════════════════════════════════════════ THEME: NOTION Warm neutrals, blank-canvas light mode. Cozy paper feel, analog warmth. ══════════════════════════════════════════ */ html.theme-notion { --font-heading: 'Georgia', 'Charter', 'Cambria', serif; --font-body: ui-sans-serif, -apple-system, system-ui, 'Segoe UI', sans-serif; --color-primary: #2383e2; --color-primary-light: #4a9ee9; --color-primary-dark: #1a6bb8; --color-secondary: #615d59; --color-accent: #d9730d; --gradient-main: linear-gradient(135deg, #ffffff 0%, #f6f5f4 100%); --gradient-shop: linear-gradient(135deg, #2383e2 0%, #1a6bb8 100%); --gradient-card: linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01)); --color-text: rgba(0,0,0,0.95); --color-text-secondary: rgba(0,0,0,0.65); --color-text-muted: rgba(0,0,0,0.4); --color-text-dark: rgba(0,0,0,0.95); --color-surface: rgba(0,0,0,0.04); --color-surface-hover: rgba(0,0,0,0.07); --color-card: #ffffff; --color-success: #0f7b6c; --color-error: #e03e3e; --color-warning: #d9730d; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 9999px; --shadow-card: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06); --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08); --shadow-elevated: 0 8px 32px rgba(0,0,0,0.16); } html.theme-notion body { background: #ffffff !important; color: rgba(0,0,0,0.95) !important; } /* ══════════════════════════════════════════ THEME: SPOTIFY Content-first darkness. Theater mode. Near-black surfaces + electric green accent. ══════════════════════════════════════════ */ html.theme-spotify { --font-heading: 'Circular', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Circular', 'Helvetica Neue', Helvetica, Arial, sans-serif; --color-primary: #1ed760; --color-primary-light: #3be377; --color-primary-dark: #17b84f; --color-secondary: #535353; --color-accent: #1ed760; --gradient-main: linear-gradient(180deg, #121212 0%, #181818 100%); --gradient-shop: linear-gradient(135deg, #1ed760 0%, #17b84f 100%); --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); --color-text: #ffffff; --color-text-secondary: #b3b3b3; --color-text-muted: #6a6a6a; --color-text-dark: #121212; --color-surface: rgba(255,255,255,0.07); --color-surface-hover: rgba(255,255,255,0.12); --color-card: #282828; --color-success: #1ed760; --color-error: #f15e6c; --color-warning: #f59b23; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 9999px; --shadow-card: 0 4px 20px rgba(0,0,0,0.5); --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.6); --shadow-elevated: 0 16px 48px rgba(0,0,0,0.7); } html.theme-spotify body { background: #121212 !important; } /* ══════════════════════════════════════════ THEME: STRIPE Technical luxury. Clean white + deep navy. Rich purple accent, premium fintech feel. ══════════════════════════════════════════ */ html.theme-stripe { --font-heading: 'sohne-var', 'Söhne', ui-sans-serif, system-ui, sans-serif; --font-body: 'sohne-var', 'Söhne', ui-sans-serif, system-ui, sans-serif; --color-primary: #533afd; --color-primary-light: #7059fd; --color-primary-dark: #3d28d6; --color-secondary: #425466; --color-accent: #533afd; --gradient-main: linear-gradient(135deg, #f6f9fc 0%, #e6f0fb 100%); --gradient-shop: linear-gradient(135deg, #533afd 0%, #3d28d6 100%); --gradient-card: linear-gradient(135deg, rgba(83,58,253,0.06), rgba(83,58,253,0.01)); --color-text: #061b31; --color-text-secondary: #425466; --color-text-muted: #8898aa; --color-text-dark: #061b31; --color-surface: rgba(83,58,253,0.06); --color-surface-hover: rgba(83,58,253,0.1); --color-card: #ffffff; --color-success: #3ecf8e; --color-error: #cd3d64; --color-warning: #e8a042; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 9999px; --shadow-card: 0 2px 6px rgba(6,27,49,0.06), 0 0 0 1px rgba(6,27,49,0.06); --shadow-card-hover: 0 6px 20px rgba(6,27,49,0.1), 0 0 0 1px rgba(83,58,253,0.2); --shadow-elevated: 0 16px 48px rgba(6,27,49,0.15); } html.theme-stripe body { background: #f6f9fc !important; color: #061b31 !important; } /* ══════════════════════════════════════════ THEME: RAYCAST Precision instrument. Obsidian blue-black. Raycast Red accent. macOS-native feel. ══════════════════════════════════════════ */ html.theme-raycast { --font-heading: -apple-system, 'SF Pro Display', 'Inter', sans-serif; --font-body: -apple-system, 'SF Pro Text', 'Inter', sans-serif; --color-primary: #ff6363; --color-primary-light: #ff8080; --color-primary-dark: #e04444; --color-secondary: #8e8e93; --color-accent: #ff6363; --gradient-main: linear-gradient(180deg, #07080a 0%, #0d0e12 100%); --gradient-shop: linear-gradient(135deg, #ff6363 0%, #e04444 100%); --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); --color-text: rgba(255,255,255,0.92); --color-text-secondary: rgba(255,255,255,0.6); --color-text-muted: rgba(255,255,255,0.35); --color-text-dark: #07080a; --color-surface: rgba(255,255,255,0.06); --color-surface-hover: rgba(255,255,255,0.1); --color-card: rgba(255,255,255,0.05); --color-success: #30d158; --color-error: #ff6363; --color-warning: #ffd60a; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 9999px; /* macOS window-chrome layered shadows */ --shadow-card: 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 12px rgba(0,0,0,0.5); --shadow-card-hover: 0 0 0 1px rgba(255,99,99,0.35), inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 24px rgba(0,0,0,0.6); --shadow-elevated: 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 40px rgba(0,0,0,0.7); } html.theme-raycast body { background: #07080a !important; } /* ── Light theme body text overrides ── */ html.theme-notion *, html.theme-stripe * { /* ensure text inherits correctly on light themes */ --skeleton-base: rgba(0,0,0,0.06); --skeleton-shine: rgba(0,0,0,0.12); }