/* * themes.css — palette overrides driven by `data-theme` on . * * Default (no attribute) keeps the purple palette from common.css. Each named * theme remaps the full --c-p-* scale (50→900) plus the marketing gradient * anchors so the change ripples through login, marketing LP and the dashboard * without per-surface forks. * * Add a new theme by mirroring the same eleven custom-property names below. */ /* ── Navy (anchor #3c4764 — Nyo wordmark color) ─────────────────────────── */ html[data-theme="navy"] { --c-p-50: #eff3ff; --c-p-100: #d6dffd; --c-p-200: #b5c2f7; --c-p-300: #8c9eea; --c-p-400: #6b7fd9; --c-p-500: #4b5fbf; --c-p-600: #3c4764; --c-p-700: #2f3854; --c-p-800: #232a42; --c-p-900: #161b2d; --mkt-grad-1: #161b2d; --mkt-grad-2: #2f3854; --mkt-grad-3: #3c4764; } /* ── Red (anchor #b91c1c — current Vault accent in the logo) ────────────── */ html[data-theme="red"] { --c-p-50: #fef2f2; --c-p-100: #fee2e2; --c-p-200: #fecaca; --c-p-300: #fca5a5; --c-p-400: #f87171; --c-p-500: #ef4444; --c-p-600: #dc2626; --c-p-700: #b91c1c; --c-p-800: #991b1b; --c-p-900: #7f1d1d; --mkt-grad-1: #7f1d1d; --mkt-grad-2: #991b1b; --mkt-grad-3: #b91c1c; } /* ── Emerald ────────────────────────────────────────────────────────────── */ html[data-theme="emerald"] { --c-p-50: #ecfdf5; --c-p-100: #d1fae5; --c-p-200: #a7f3d0; --c-p-300: #6ee7b7; --c-p-400: #34d399; --c-p-500: #10b981; --c-p-600: #059669; --c-p-700: #047857; --c-p-800: #065f46; --c-p-900: #064e3b; --mkt-grad-1: #064e3b; --mkt-grad-2: #047857; --mkt-grad-3: #10b981; } /* ── Amber ──────────────────────────────────────────────────────────────── */ html[data-theme="amber"] { --c-p-50: #fffbeb; --c-p-100: #fef3c7; --c-p-200: #fde68a; --c-p-300: #fcd34d; --c-p-400: #fbbf24; --c-p-500: #f59e0b; --c-p-600: #d97706; --c-p-700: #b45309; --c-p-800: #92400e; --c-p-900: #78350f; --mkt-grad-1: #78350f; --mkt-grad-2: #b45309; --mkt-grad-3: #d97706; } /* ── Sky ────────────────────────────────────────────────────────────────── */ html[data-theme="sky"] { --c-p-50: #f0f9ff; --c-p-100: #e0f2fe; --c-p-200: #bae6fd; --c-p-300: #7dd3fc; --c-p-400: #38bdf8; --c-p-500: #0ea5e9; --c-p-600: #0284c7; --c-p-700: #0369a1; --c-p-800: #075985; --c-p-900: #0c4a6e; --mkt-grad-1: #0c4a6e; --mkt-grad-2: #0369a1; --mkt-grad-3: #0284c7; } /* ── Slate (cool neutral, anchor next to navy) ──────────────────────────── */ html[data-theme="slate"] { --c-p-50: #f8fafc; --c-p-100: #f1f5f9; --c-p-200: #e2e8f0; --c-p-300: #cbd5e1; --c-p-400: #94a3b8; --c-p-500: #64748b; --c-p-600: #475569; --c-p-700: #334155; --c-p-800: #1e293b; --c-p-900: #0f172a; --mkt-grad-1: #0f172a; --mkt-grad-2: #334155; --mkt-grad-3: #475569; } /* ── Theme switcher widget — floating, top-right; only injected when the * theme-switcher.js opt-in is active. */ .nyo-theme-switcher { position: fixed; top: 12px; right: 12px; z-index: 100000; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px) saturate(140%); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; padding: 6px 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px; color: #1e293b; display: inline-flex; align-items: center; gap: 8px; } .nyo-theme-switcher-label { font-weight: 600; letter-spacing: .2px; color: #64748b; text-transform: uppercase; font-size: 10px; } .nyo-theme-switcher-swatches { display: inline-flex; gap: 4px; } .nyo-theme-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .12s, border-color .12s; font-size: 0; } .nyo-theme-swatch:hover { transform: scale(1.12); } .nyo-theme-swatch.is-active { border-color: #0d0c1f; } .nyo-theme-switcher-close { background: transparent; border: none; color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; } .nyo-theme-switcher-close:hover { color: #1e293b; } /* Color picker bullet — sits next to named swatches; the native is visually hidden but still receives clicks so the OS * color dialog opens on click. */ .nyo-theme-picker { display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } .nyo-theme-picker input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; background: none; padding: 0; } .nyo-theme-picker-bullet { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); transition: transform .12s, border-color .12s; } .nyo-theme-picker:hover .nyo-theme-picker-bullet { transform: scale(1.12); } .nyo-theme-picker.is-active .nyo-theme-picker-bullet { border-color: #0d0c1f; }