/* ============================================================================ ShiftPulse — Theme Presets (Phase 73) ============================================================================ Eight premium palettes, selectable per-user via Settings → Appearance. Each preset overrides `--primary`, `--primary-hover`, `--primary-soft`, `--accent`, `--accent-hover`, and a `--gradient-hero` used by the auth pages and decorative surfaces. Activated via `data-preset` attribute on : The base `data-theme` (light/dark/auto) is preserved for foreground colors and surface elevation — the preset only overrides the brand accents. ============================================================================ */ /* ---------------- Preset: NAVY (default — matches current brand) ---------- */ :root[data-preset="navy"] { --primary: #0B2545; --primary-hover: #13315C; --primary-soft: rgba(11, 37, 69, 0.10); --accent: #D4A537; --accent-hover: #C09525; --gradient-hero: linear-gradient(135deg, #0B2545 0%, #13315C 45%, #284B6E 100%); --gradient-glow: radial-gradient(circle at 20% 80%, rgba(212,165,55,0.20), transparent 55%), radial-gradient(circle at 80% 20%, rgba(91,141,239,0.18), transparent 55%); } :root[data-theme="dark"][data-preset="navy"] { --primary: #5B8DEF; --primary-hover: #7BA5F2; --accent: #E8C97A; } /* ---------------- Preset: ROYAL PURPLE -------------------------------------- */ :root[data-preset="royal"] { --primary: #6D28D9; --primary-hover: #5B21B6; --primary-soft: rgba(109, 40, 217, 0.10); --accent: #EC4899; --accent-hover: #DB2777; --gradient-hero: linear-gradient(135deg, #4C1D95 0%, #6D28D9 45%, #A78BFA 100%); --gradient-glow: radial-gradient(circle at 25% 75%, rgba(236,72,153,0.28), transparent 55%), radial-gradient(circle at 75% 25%, rgba(167,139,250,0.30), transparent 55%); } :root[data-theme="dark"][data-preset="royal"] { --primary: #A78BFA; --primary-hover: #C4B5FD; --accent: #F472B6; } /* ---------------- Preset: OCEAN TEAL ---------------------------------------- */ :root[data-preset="ocean"] { --primary: #0891B2; --primary-hover: #0E7490; --primary-soft: rgba(8, 145, 178, 0.10); --accent: #14B8A6; --accent-hover: #0F9990; --gradient-hero: linear-gradient(135deg, #155E75 0%, #0891B2 45%, #22D3EE 100%); --gradient-glow: radial-gradient(circle at 20% 80%, rgba(20,184,166,0.28), transparent 55%), radial-gradient(circle at 80% 20%, rgba(34,211,238,0.26), transparent 55%); } :root[data-theme="dark"][data-preset="ocean"] { --primary: #22D3EE; --primary-hover: #67E8F9; --accent: #2DD4BF; } /* ---------------- Preset: SUNSET ORANGE ------------------------------------- */ :root[data-preset="sunset"] { --primary: #EA580C; --primary-hover: #C2410C; --primary-soft: rgba(234, 88, 12, 0.10); --accent: #F59E0B; --accent-hover: #D97706; --gradient-hero: linear-gradient(135deg, #9A3412 0%, #EA580C 50%, #FBBF24 100%); --gradient-glow: radial-gradient(circle at 25% 75%, rgba(251,191,36,0.32), transparent 55%), radial-gradient(circle at 75% 25%, rgba(239,68,68,0.24), transparent 55%); } :root[data-theme="dark"][data-preset="sunset"] { --primary: #FB923C; --primary-hover: #FDBA74; --accent: #FBBF24; } /* ---------------- Preset: FOREST EMERALD ------------------------------------ */ :root[data-preset="emerald"] { --primary: #059669; --primary-hover: #047857; --primary-soft: rgba(5, 150, 105, 0.10); --accent: #84CC16; --accent-hover: #65A30D; --gradient-hero: linear-gradient(135deg, #064E3B 0%, #059669 45%, #34D399 100%); --gradient-glow: radial-gradient(circle at 30% 70%, rgba(132,204,22,0.28), transparent 55%), radial-gradient(circle at 70% 30%, rgba(52,211,153,0.30), transparent 55%); } :root[data-theme="dark"][data-preset="emerald"] { --primary: #34D399; --primary-hover: #6EE7B7; --accent: #A3E635; } /* ---------------- Preset: ROSE PINK ----------------------------------------- */ :root[data-preset="rose"] { --primary: #E11D48; --primary-hover: #BE123C; --primary-soft: rgba(225, 29, 72, 0.10); --accent: #F472B6; --accent-hover: #EC4899; --gradient-hero: linear-gradient(135deg, #881337 0%, #E11D48 50%, #FB7185 100%); --gradient-glow: radial-gradient(circle at 20% 80%, rgba(244,114,182,0.30), transparent 55%), radial-gradient(circle at 80% 20%, rgba(251,113,133,0.28), transparent 55%); } :root[data-theme="dark"][data-preset="rose"] { --primary: #FB7185; --primary-hover: #FDA4AF; --accent: #F9A8D4; } /* ---------------- Preset: SLATE MONO (minimal, professional) --------------- */ :root[data-preset="slate"] { --primary: #1F2937; --primary-hover: #111827; --primary-soft: rgba(31, 41, 55, 0.10); --accent: #6B7280; --accent-hover: #4B5563; --gradient-hero: linear-gradient(135deg, #111827 0%, #1F2937 45%, #4B5563 100%); --gradient-glow: radial-gradient(circle at 25% 75%, rgba(156,163,175,0.18), transparent 55%), radial-gradient(circle at 75% 25%, rgba(209,213,219,0.16), transparent 55%); } :root[data-theme="dark"][data-preset="slate"] { --primary: #9CA3AF; --primary-hover: #D1D5DB; --accent: #6B7280; } /* ---------------- Preset: CYBER NEON (dark-leaning, vivid) ----------------- */ :root[data-preset="cyber"] { --primary: #7C3AED; --primary-hover: #6D28D9; --primary-soft: rgba(124, 58, 237, 0.12); --accent: #06B6D4; --accent-hover: #0891B2; --gradient-hero: linear-gradient(135deg, #1E1B4B 0%, #312E81 35%, #7C3AED 70%, #06B6D4 100%); --gradient-glow: radial-gradient(circle at 20% 80%, rgba(6,182,212,0.36), transparent 55%), radial-gradient(circle at 80% 20%, rgba(124,58,237,0.34), transparent 55%), radial-gradient(circle at 50% 50%, rgba(236,72,153,0.18), transparent 60%); } :root[data-theme="dark"][data-preset="cyber"] { --primary: #A78BFA; --primary-hover: #C4B5FD; --accent: #22D3EE; } /* ============================================================================ AUTH SHELL — Centered card layout used by login, MFA, reauth pages ============================================================================ Replaces the broken split layout. Single full-viewport gradient with a centered card. Works perfectly in LTR and RTL — no directional assumptions. ============================================================================ */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--gradient-hero, linear-gradient(135deg, #0B2545 0%, #13315C 100%)); position: relative; overflow: hidden; } .auth-shell::before { content: ''; position: absolute; inset: 0; background: var(--gradient-glow, none); pointer-events: none; animation: auth-glow-drift 18s ease-in-out infinite alternate; } .auth-shell::after { /* Subtle dot pattern overlay */ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; opacity: 0.5; } @keyframes auth-glow-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-4%, 3%, 0) scale(1.08); } } .auth-card { position: relative; z-index: 2; width: 100%; max-width: 440px; background: var(--bg-elev-1); border-radius: var(--radius-xl); box-shadow: 0 32px 64px -12px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05); padding: 36px 36px 28px; animation: auth-card-rise 480ms cubic-bezier(0.16, 1, 0.3, 1); } @media (max-width: 480px) { .auth-card { padding: 28px 22px 22px; border-radius: var(--radius-lg); } } @keyframes auth-card-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .auth-card .auth-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .auth-card .auth-logo-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--gradient-hero); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 16px -4px var(--primary-soft, rgba(11,37,69,0.25)); } .auth-card h1.auth-title { font-size: 24px; font-weight: 700; text-align: center; margin: 0 0 6px; letter-spacing: -0.02em; color: var(--text); } .auth-card .auth-subtitle { font-size: 14px; color: var(--text-muted); text-align: center; margin: 0 0 26px; line-height: 1.5; } .auth-card .auth-identity { background: var(--bg-subtle); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); border: 1px solid var(--border); } .auth-card .auth-identity .lbl { color: var(--text-muted); font-size: 12px; } /* Big code input used by MFA and reauth */ .auth-card .auth-code-input { width: 100%; font-size: 28px; text-align: center; letter-spacing: 0.45em; padding: 14px 14px; font-family: var(--font-mono); font-weight: 700; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-elev-1); color: var(--text); transition: border-color var(--tx-base), box-shadow var(--tx-base); } .auth-card .auth-code-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .auth-card .auth-alt-methods { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .auth-card .auth-alt-methods .heading { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; } .auth-card .auth-alt-methods a, .auth-card .auth-alt-methods button { display: flex; gap: 8px; align-items: center; background: none; border: none; padding: 6px 0; color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; } .auth-card .auth-alt-methods a:hover, .auth-card .auth-alt-methods button:hover { color: var(--primary-hover); } /* ============================================================================ APP FOOTER (Phase 73) ============================================================================ */ .app-footer { padding: 22px 28px; border-top: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text-muted); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; } .app-footer .copy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .app-footer .copy a { color: var(--primary); text-decoration: none; font-weight: 600; } .app-footer .copy a:hover { text-decoration: underline; } .app-footer .build { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-subtle); } .app-footer .build .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .auth-footer { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; z-index: 2; font-size: 12px; color: rgba(255, 255, 255, 0.75); } .auth-footer a { color: rgba(255, 255, 255, 0.95); font-weight: 600; text-decoration: none; } .auth-footer a:hover { text-decoration: underline; } /* ============================================================================ SETTINGS HUB ============================================================================ */ .settings-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .settings-tile { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 12px; transition: transform var(--tx-base), box-shadow var(--tx-base), border-color var(--tx-base); position: relative; overflow: hidden; } .settings-tile::before { content: ''; position: absolute; inset: 0; background: var(--tile-tint, transparent); opacity: 0.06; pointer-events: none; } .settings-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); } .settings-tile-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tile-tint, var(--primary-soft)); color: var(--tile-color, var(--primary)); } .settings-tile-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--text); } .settings-tile-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0; } .settings-tile-foot { margin-top: auto; padding-top: 8px; font-size: 11.5px; color: var(--text-subtle); display: flex; align-items: center; gap: 4px; } .settings-section-heading { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 700; margin: 28px 0 12px; } .settings-section-heading:first-child { margin-top: 4px; } /* Theme preset picker */ .theme-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .theme-preset { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 12px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--bg-elev-1); transition: border-color var(--tx-base), transform var(--tx-base); text-align: center; } .theme-preset:hover { transform: translateY(-2px); } .theme-preset.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .theme-preset .swatch { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; position: relative; overflow: hidden; } .theme-preset .swatch::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.2), transparent 55%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 55%); } .theme-preset .name { font-size: 12.5px; font-weight: 600; color: var(--text); } .theme-preset input { display: none; }