/* brand-2-palettes.css Palette overrides for Brand-2. Usage: Rules: - Only color-related CSS custom properties are overridden here. - No layout/typography/radius/shadow/transition rules in this file. */ /* ========================= Emerald ========================= */ html[data-brand2-palette="emerald-light"] { --color-bg: #f6fbf9; --color-surface: rgba(255, 255, 255, 0.96); --color-surface-alt: rgba(248, 250, 252, 0.92); --color-header-translucent: rgba(255, 255, 255, 0.82); --color-overlay: rgba(15, 23, 42, 0.55); --color-text: #0f172a; --color-muted: rgba(15, 23, 42, 0.64); --color-text-inverse: #ffffff; --color-border: rgba(15, 23, 42, 0.10); --color-border-soft: rgba(15, 23, 42, 0.06); --color-border-strong: rgba(15, 23, 42, 0.18); --color-primary: #10b981; --color-primary-warm: #34d399; --color-on-primary: #052e24; --color-primary-solid: #059669; --color-primary-tint: rgba(16, 185, 129, 0.14); --color-primary-glow: rgba(16, 185, 129, 0.20); --color-primary-shadow: rgba(16, 185, 129, 0.26); --color-primary-hover: var(--color-primary-warm); --color-secondary: #0ea5e9; --color-secondary-glow: rgba(14, 165, 233, 0.18); --color-secondary-tint: rgba(14, 165, 233, 0.12); --color-glass-strong: rgba(15, 23, 42, 0.14); --color-glass-mid: rgba(15, 23, 42, 0.10); --color-glass-soft: rgba(15, 23, 42, 0.07); --color-glass-faint: rgba(15, 23, 42, 0.05); --color-glass-ultra: rgba(15, 23, 42, 0.03); --header-cta-chip-bg: rgba(15, 23, 42, 0.06); --header-cta-login-bg: rgba(14, 165, 233, 0.12); --header-cta-login-fg: #0284c7; --header-cta-login-border: rgba(14, 165, 233, 0.36); --hero-gift-border: #059669; --hero-gift-fg: #0f172a; --provider-card-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.20), rgba(14, 165, 233, 0.14)); --provider-card-border: rgba(16, 185, 129, 0.22); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(15, 23, 42, 0.10), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(16, 185, 129, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: #ffffff; --article-table-row-alt-bg: rgba(15, 23, 42, 0.03); } html[data-brand2-palette="emerald-dark"] { --color-bg: #060b0a; --color-surface: rgba(12, 18, 18, 0.92); --color-surface-alt: rgba(16, 24, 24, 0.90); --color-header-translucent: rgba(7, 12, 12, 0.86); --color-overlay: rgba(0, 0, 0, 0.65); --color-text: #f1f5f9; --color-muted: rgba(241, 245, 249, 0.70); --color-text-inverse: #0b1211; --color-border: rgba(255, 255, 255, 0.10); --color-border-soft: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.16); --color-primary: #10b981; --color-primary-warm: #34d399; --color-on-primary: #052e24; --color-primary-solid: #34d399; --color-primary-tint: rgba(16, 185, 129, 0.16); --color-primary-glow: rgba(16, 185, 129, 0.26); --color-primary-shadow: rgba(16, 185, 129, 0.34); --color-primary-hover: var(--color-primary-warm); --color-secondary: #22c55e; --color-secondary-glow: rgba(34, 197, 94, 0.22); --color-secondary-tint: rgba(34, 197, 94, 0.14); --color-glass-strong: rgba(255, 255, 255, 0.12); --color-glass-mid: rgba(255, 255, 255, 0.08); --color-glass-soft: rgba(255, 255, 255, 0.06); --color-glass-faint: rgba(255, 255, 255, 0.04); --color-glass-ultra: rgba(255, 255, 255, 0.02); --header-cta-chip-bg: rgba(255, 255, 255, 0.06); --header-cta-login-bg: rgba(34, 197, 94, 0.12); --header-cta-login-fg: #22c55e; --header-cta-login-border: rgba(34, 197, 94, 0.40); --hero-gift-border: #34d399; --hero-gift-fg: #f1f5f9; --provider-card-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(34, 197, 94, 0.12)); --provider-card-border: rgba(16, 185, 129, 0.28); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(16, 185, 129, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: rgba(255, 255, 255, 0.05); --article-table-row-alt-bg: rgba(255, 255, 255, 0.03); } /* ========================= Sapphire ========================= */ html[data-brand2-palette="sapphire-light"] { --color-bg: #f6f8ff; --color-surface: rgba(255, 255, 255, 0.96); --color-surface-alt: rgba(249, 250, 255, 0.92); --color-header-translucent: rgba(255, 255, 255, 0.82); --color-overlay: rgba(15, 23, 42, 0.55); --color-text: #0f172a; --color-muted: rgba(15, 23, 42, 0.64); --color-text-inverse: #ffffff; --color-border: rgba(15, 23, 42, 0.10); --color-border-soft: rgba(15, 23, 42, 0.06); --color-border-strong: rgba(15, 23, 42, 0.18); --color-primary: #4f46e5; --color-primary-warm: #6366f1; --color-on-primary: #ffffff; --color-primary-solid: #4338ca; --color-primary-tint: rgba(79, 70, 229, 0.14); --color-primary-glow: rgba(79, 70, 229, 0.18); --color-primary-shadow: rgba(79, 70, 229, 0.26); --color-primary-hover: var(--color-primary-warm); --color-secondary: #0ea5e9; --color-secondary-glow: rgba(14, 165, 233, 0.18); --color-secondary-tint: rgba(14, 165, 233, 0.12); --color-glass-strong: rgba(15, 23, 42, 0.14); --color-glass-mid: rgba(15, 23, 42, 0.10); --color-glass-soft: rgba(15, 23, 42, 0.07); --color-glass-faint: rgba(15, 23, 42, 0.05); --color-glass-ultra: rgba(15, 23, 42, 0.03); --header-cta-chip-bg: rgba(15, 23, 42, 0.06); --header-cta-login-bg: rgba(79, 70, 229, 0.10); --header-cta-login-fg: #4338ca; --header-cta-login-border: rgba(79, 70, 229, 0.34); --hero-gift-border: #4338ca; --hero-gift-fg: #0f172a; --provider-card-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.20), rgba(14, 165, 233, 0.14)); --provider-card-border: rgba(79, 70, 229, 0.22); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(15, 23, 42, 0.10), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(79, 70, 229, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: #ffffff; --article-table-row-alt-bg: rgba(15, 23, 42, 0.03); } html[data-brand2-palette="sapphire-dark"] { --color-bg: #070914; --color-surface: rgba(12, 14, 28, 0.92); --color-surface-alt: rgba(16, 18, 34, 0.90); --color-header-translucent: rgba(8, 9, 18, 0.86); --color-overlay: rgba(0, 0, 0, 0.65); --color-text: #f8fafc; --color-muted: rgba(248, 250, 252, 0.70); --color-text-inverse: #0b1020; --color-border: rgba(255, 255, 255, 0.10); --color-border-soft: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.16); --color-primary: #6366f1; --color-primary-warm: #8b5cf6; --color-on-primary: #ffffff; --color-primary-solid: #818cf8; --color-primary-tint: rgba(99, 102, 241, 0.16); --color-primary-glow: rgba(99, 102, 241, 0.26); --color-primary-shadow: rgba(99, 102, 241, 0.34); --color-primary-hover: var(--color-primary-warm); --color-secondary: #22d3ee; --color-secondary-glow: rgba(34, 211, 238, 0.22); --color-secondary-tint: rgba(34, 211, 238, 0.14); --color-glass-strong: rgba(255, 255, 255, 0.12); --color-glass-mid: rgba(255, 255, 255, 0.08); --color-glass-soft: rgba(255, 255, 255, 0.06); --color-glass-faint: rgba(255, 255, 255, 0.04); --color-glass-ultra: rgba(255, 255, 255, 0.02); --header-cta-chip-bg: rgba(255, 255, 255, 0.06); --header-cta-login-bg: rgba(34, 211, 238, 0.12); --header-cta-login-fg: #22d3ee; --header-cta-login-border: rgba(34, 211, 238, 0.42); --hero-gift-border: #818cf8; --hero-gift-fg: #f8fafc; --provider-card-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(34, 211, 238, 0.12)); --provider-card-border: rgba(99, 102, 241, 0.28); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(99, 102, 241, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: rgba(255, 255, 255, 0.05); --article-table-row-alt-bg: rgba(255, 255, 255, 0.03); } /* ========================= Ruby ========================= */ html[data-brand2-palette="ruby-light"] { --color-bg: #fff7f9; --color-surface: rgba(255, 255, 255, 0.96); --color-surface-alt: rgba(255, 247, 250, 0.92); --color-header-translucent: rgba(255, 255, 255, 0.82); --color-overlay: rgba(15, 23, 42, 0.55); --color-text: #111827; --color-muted: rgba(17, 24, 39, 0.64); --color-text-inverse: #ffffff; --color-border: rgba(17, 24, 39, 0.10); --color-border-soft: rgba(17, 24, 39, 0.06); --color-border-strong: rgba(17, 24, 39, 0.18); --color-primary: #e11d48; --color-primary-warm: #fb7185; --color-on-primary: #ffffff; --color-primary-solid: #be123c; --color-primary-tint: rgba(225, 29, 72, 0.14); --color-primary-glow: rgba(225, 29, 72, 0.18); --color-primary-shadow: rgba(225, 29, 72, 0.24); --color-primary-hover: var(--color-primary-warm); --color-secondary: #f59e0b; --color-secondary-glow: rgba(245, 158, 11, 0.18); --color-secondary-tint: rgba(245, 158, 11, 0.12); --color-glass-strong: rgba(17, 24, 39, 0.14); --color-glass-mid: rgba(17, 24, 39, 0.10); --color-glass-soft: rgba(17, 24, 39, 0.07); --color-glass-faint: rgba(17, 24, 39, 0.05); --color-glass-ultra: rgba(17, 24, 39, 0.03); --header-cta-chip-bg: rgba(17, 24, 39, 0.06); --header-cta-login-bg: rgba(245, 158, 11, 0.12); --header-cta-login-fg: #b45309; --header-cta-login-border: rgba(245, 158, 11, 0.36); --hero-gift-border: #be123c; --hero-gift-fg: #111827; --provider-card-bg: linear-gradient(135deg, rgba(225, 29, 72, 0.18), rgba(245, 158, 11, 0.12)); --provider-card-border: rgba(225, 29, 72, 0.22); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(17, 24, 39, 0.10), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(245, 158, 11, 0.20), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: #ffffff; --article-table-row-alt-bg: rgba(17, 24, 39, 0.03); } html[data-brand2-palette="ruby-dark"] { --color-bg: #12060b; --color-surface: rgba(22, 10, 14, 0.92); --color-surface-alt: rgba(28, 12, 18, 0.90); --color-header-translucent: rgba(18, 8, 12, 0.86); --color-overlay: rgba(0, 0, 0, 0.65); --color-text: #f8fafc; --color-muted: rgba(248, 250, 252, 0.70); --color-text-inverse: #18070c; --color-border: rgba(255, 255, 255, 0.10); --color-border-soft: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.16); --color-primary: #fb7185; --color-primary-warm: #fda4af; --color-on-primary: #2a0a14; --color-primary-solid: #f43f5e; --color-primary-tint: rgba(251, 113, 133, 0.16); --color-primary-glow: rgba(251, 113, 133, 0.26); --color-primary-shadow: rgba(251, 113, 133, 0.34); --color-primary-hover: var(--color-primary-warm); --color-secondary: #f59e0b; --color-secondary-glow: rgba(245, 158, 11, 0.22); --color-secondary-tint: rgba(245, 158, 11, 0.14); --color-glass-strong: rgba(255, 255, 255, 0.12); --color-glass-mid: rgba(255, 255, 255, 0.08); --color-glass-soft: rgba(255, 255, 255, 0.06); --color-glass-faint: rgba(255, 255, 255, 0.04); --color-glass-ultra: rgba(255, 255, 255, 0.02); --header-cta-chip-bg: rgba(255, 255, 255, 0.06); --header-cta-login-bg: rgba(245, 158, 11, 0.12); --header-cta-login-fg: #fbbf24; --header-cta-login-border: rgba(245, 158, 11, 0.44); --hero-gift-border: #f43f5e; --hero-gift-fg: #f8fafc; --provider-card-bg: linear-gradient(135deg, rgba(251, 113, 133, 0.18), rgba(245, 158, 11, 0.12)); --provider-card-border: rgba(251, 113, 133, 0.28); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(245, 158, 11, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: rgba(255, 255, 255, 0.05); --article-table-row-alt-bg: rgba(255, 255, 255, 0.03); } /* ========================= Violet ========================= */ html[data-brand2-palette="violet-light"] { --color-bg: #faf7ff; --color-surface: rgba(255, 255, 255, 0.96); --color-surface-alt: rgba(250, 247, 255, 0.92); --color-header-translucent: rgba(255, 255, 255, 0.82); --color-overlay: rgba(15, 23, 42, 0.55); --color-text: #0f172a; --color-muted: rgba(15, 23, 42, 0.64); --color-text-inverse: #ffffff; --color-border: rgba(15, 23, 42, 0.10); --color-border-soft: rgba(15, 23, 42, 0.06); --color-border-strong: rgba(15, 23, 42, 0.18); --color-primary: #8b5cf6; --color-primary-warm: #a78bfa; --color-on-primary: #ffffff; --color-primary-solid: #7c3aed; --color-primary-tint: rgba(139, 92, 246, 0.14); --color-primary-glow: rgba(139, 92, 246, 0.18); --color-primary-shadow: rgba(139, 92, 246, 0.24); --color-primary-hover: var(--color-primary-warm); --color-secondary: #06b6d4; --color-secondary-glow: rgba(6, 182, 212, 0.18); --color-secondary-tint: rgba(6, 182, 212, 0.12); --color-glass-strong: rgba(15, 23, 42, 0.14); --color-glass-mid: rgba(15, 23, 42, 0.10); --color-glass-soft: rgba(15, 23, 42, 0.07); --color-glass-faint: rgba(15, 23, 42, 0.05); --color-glass-ultra: rgba(15, 23, 42, 0.03); --header-cta-chip-bg: rgba(15, 23, 42, 0.06); --header-cta-login-bg: rgba(6, 182, 212, 0.12); --header-cta-login-fg: #0891b2; --header-cta-login-border: rgba(6, 182, 212, 0.36); --hero-gift-border: #7c3aed; --hero-gift-fg: #0f172a; --provider-card-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(6, 182, 212, 0.14)); --provider-card-border: rgba(139, 92, 246, 0.22); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(15, 23, 42, 0.10), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(139, 92, 246, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: #ffffff; --article-table-row-alt-bg: rgba(15, 23, 42, 0.03); } html[data-brand2-palette="violet-dark"] { --color-bg: #0c0816; --color-surface: rgba(16, 12, 28, 0.92); --color-surface-alt: rgba(20, 14, 34, 0.90); --color-header-translucent: rgba(12, 9, 20, 0.86); --color-overlay: rgba(0, 0, 0, 0.65); --color-text: #f8fafc; --color-muted: rgba(248, 250, 252, 0.70); --color-text-inverse: #100a1b; --color-border: rgba(255, 255, 255, 0.10); --color-border-soft: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.16); --color-primary: #a78bfa; --color-primary-warm: #c4b5fd; --color-on-primary: #1b102f; --color-primary-solid: #8b5cf6; --color-primary-tint: rgba(167, 139, 250, 0.16); --color-primary-glow: rgba(167, 139, 250, 0.26); --color-primary-shadow: rgba(167, 139, 250, 0.34); --color-primary-hover: var(--color-primary-warm); --color-secondary: #22d3ee; --color-secondary-glow: rgba(34, 211, 238, 0.22); --color-secondary-tint: rgba(34, 211, 238, 0.14); --color-glass-strong: rgba(255, 255, 255, 0.12); --color-glass-mid: rgba(255, 255, 255, 0.08); --color-glass-soft: rgba(255, 255, 255, 0.06); --color-glass-faint: rgba(255, 255, 255, 0.04); --color-glass-ultra: rgba(255, 255, 255, 0.02); --header-cta-chip-bg: rgba(255, 255, 255, 0.06); --header-cta-login-bg: rgba(34, 211, 238, 0.12); --header-cta-login-fg: #22d3ee; --header-cta-login-border: rgba(34, 211, 238, 0.42); --hero-gift-border: #8b5cf6; --hero-gift-fg: #f8fafc; --provider-card-bg: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(34, 211, 238, 0.12)); --provider-card-border: rgba(167, 139, 250, 0.28); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(167, 139, 250, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: rgba(255, 255, 255, 0.05); --article-table-row-alt-bg: rgba(255, 255, 255, 0.03); } /* ========================= Amber ========================= */ html[data-brand2-palette="amber-light"] { --color-bg: #fffbf2; --color-surface: rgba(255, 255, 255, 0.96); --color-surface-alt: rgba(255, 250, 238, 0.92); --color-header-translucent: rgba(255, 255, 255, 0.82); --color-overlay: rgba(15, 23, 42, 0.55); --color-text: #111827; --color-muted: rgba(17, 24, 39, 0.64); --color-text-inverse: #ffffff; --color-border: rgba(17, 24, 39, 0.10); --color-border-soft: rgba(17, 24, 39, 0.06); --color-border-strong: rgba(17, 24, 39, 0.18); --color-primary: #f59e0b; --color-primary-warm: #fbbf24; --color-on-primary: #1f1300; --color-primary-solid: #d97706; --color-primary-tint: rgba(245, 158, 11, 0.14); --color-primary-glow: rgba(245, 158, 11, 0.18); --color-primary-shadow: rgba(245, 158, 11, 0.24); --color-primary-hover: var(--color-primary-warm); --color-secondary: #0ea5e9; --color-secondary-glow: rgba(14, 165, 233, 0.18); --color-secondary-tint: rgba(14, 165, 233, 0.12); --color-glass-strong: rgba(17, 24, 39, 0.14); --color-glass-mid: rgba(17, 24, 39, 0.10); --color-glass-soft: rgba(17, 24, 39, 0.07); --color-glass-faint: rgba(17, 24, 39, 0.05); --color-glass-ultra: rgba(17, 24, 39, 0.03); --header-cta-chip-bg: rgba(17, 24, 39, 0.06); --header-cta-login-bg: rgba(14, 165, 233, 0.12); --header-cta-login-fg: #0284c7; --header-cta-login-border: rgba(14, 165, 233, 0.36); --hero-gift-border: #d97706; --hero-gift-fg: #111827; --provider-card-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(14, 165, 233, 0.12)); --provider-card-border: rgba(245, 158, 11, 0.22); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(17, 24, 39, 0.10), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(245, 158, 11, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: #ffffff; --article-table-row-alt-bg: rgba(17, 24, 39, 0.03); } html[data-brand2-palette="amber-dark"] { --color-bg: #0f0a05; --color-surface: rgba(18, 12, 7, 0.92); --color-surface-alt: rgba(24, 16, 10, 0.90); --color-header-translucent: rgba(14, 10, 6, 0.86); --color-overlay: rgba(0, 0, 0, 0.65); --color-text: #f8fafc; --color-muted: rgba(248, 250, 252, 0.70); --color-text-inverse: #120c07; --color-border: rgba(255, 255, 255, 0.10); --color-border-soft: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.16); --color-primary: #fbbf24; --color-primary-warm: #fde68a; --color-on-primary: #231500; --color-primary-solid: #f59e0b; --color-primary-tint: rgba(251, 191, 36, 0.16); --color-primary-glow: rgba(251, 191, 36, 0.26); --color-primary-shadow: rgba(251, 191, 36, 0.34); --color-primary-hover: var(--color-primary-warm); --color-secondary: #22d3ee; --color-secondary-glow: rgba(34, 211, 238, 0.22); --color-secondary-tint: rgba(34, 211, 238, 0.14); --color-glass-strong: rgba(255, 255, 255, 0.12); --color-glass-mid: rgba(255, 255, 255, 0.08); --color-glass-soft: rgba(255, 255, 255, 0.06); --color-glass-faint: rgba(255, 255, 255, 0.04); --color-glass-ultra: rgba(255, 255, 255, 0.02); --header-cta-chip-bg: rgba(255, 255, 255, 0.06); --header-cta-login-bg: rgba(34, 211, 238, 0.12); --header-cta-login-fg: #22d3ee; --header-cta-login-border: rgba(34, 211, 238, 0.42); --hero-gift-border: #f59e0b; --hero-gift-fg: #f8fafc; --provider-card-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(34, 211, 238, 0.12)); --provider-card-border: rgba(251, 191, 36, 0.28); --provider-card-overlay: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 70%); --provider-card-sheen: linear-gradient(160deg, rgba(251, 191, 36, 0.22), transparent 45%); --feature-icon-bg: #ffffff; --sidebar-icon-bg: #ffffff; --payment-card-bg: rgba(255, 255, 255, 0.05); --article-table-row-alt-bg: rgba(255, 255, 255, 0.03); }