/* ========================================================================== Knack color themes (Arc-style, per-user). A theme class can sit on (the logged-in user's personal experience) OR on any wrapper element (a creator's public page branding). Each theme re-tints the accent + signature gradient; surfaces/text stay token-driven so contrast is always safe in both light and dark. ========================================================================== */ :root { --knack-theme-gradient: linear-gradient(135deg, #6d5efc, #a855f7); } /* ── Midnight (default) ─────────────────────────────────────────────── */ .ks-theme-midnight { --knack-accent: #6d5efc; --knack-accent-hover: #5b4ee0; --knack-link: #6d5efc; --knack-link-hover: #5b4ee0; --knack-theme-gradient: linear-gradient(135deg, #6d5efc, #a855f7); } .aoty-dark-mode.ks-theme-midnight, .aoty-dark-mode .ks-theme-midnight { --knack-accent: #8b7dff; --knack-accent-hover: #6d5efc; --knack-link: #8b7dff; --knack-link-hover: #a99cff; } /* ── Sunset ─────────────────────────────────────────────────────────── */ .ks-theme-sunset { --knack-accent: #f97316; --knack-accent-hover: #ea6a0c; --knack-link: #f97316; --knack-link-hover: #ea6a0c; --knack-theme-gradient: linear-gradient(135deg, #f97316, #ec4899); } .aoty-dark-mode.ks-theme-sunset, .aoty-dark-mode .ks-theme-sunset { --knack-accent: #fb923c; --knack-accent-hover: #f97316; --knack-link: #fb923c; --knack-link-hover: #fdba74; } /* ── Forest ─────────────────────────────────────────────────────────── */ .ks-theme-forest { --knack-accent: #059669; --knack-accent-hover: #047857; --knack-link: #059669; --knack-link-hover: #047857; --knack-theme-gradient: linear-gradient(135deg, #059669, #10b981); } .aoty-dark-mode.ks-theme-forest, .aoty-dark-mode .ks-theme-forest { --knack-accent: #10b981; --knack-accent-hover: #059669; --knack-link: #34d399; --knack-link-hover: #6ee7b7; } /* ── Ocean ──────────────────────────────────────────────────────────── */ .ks-theme-ocean { --knack-accent: #0284c7; --knack-accent-hover: #0369a1; --knack-link: #0284c7; --knack-link-hover: #0369a1; --knack-theme-gradient: linear-gradient(135deg, #0284c7, #06b6d4); } .aoty-dark-mode.ks-theme-ocean, .aoty-dark-mode .ks-theme-ocean { --knack-accent: #38bdf8; --knack-accent-hover: #0ea5e9; --knack-link: #38bdf8; --knack-link-hover: #7dd3fc; } /* ── Rose ───────────────────────────────────────────────────────────── */ .ks-theme-rose { --knack-accent: #e11d48; --knack-accent-hover: #be123c; --knack-link: #e11d48; --knack-link-hover: #be123c; --knack-theme-gradient: linear-gradient(135deg, #e11d48, #ec4899); } .aoty-dark-mode.ks-theme-rose, .aoty-dark-mode .ks-theme-rose { --knack-accent: #fb7185; --knack-accent-hover: #f43f5e; --knack-link: #fb7185; --knack-link-hover: #fda4af; } /* ── Slate (monochrome) ─────────────────────────────────────────────── */ .ks-theme-slate { --knack-accent: #475569; --knack-accent-hover: #334155; --knack-link: #475569; --knack-link-hover: #334155; --knack-theme-gradient: linear-gradient(135deg, #475569, #1e293b); } .aoty-dark-mode.ks-theme-slate, .aoty-dark-mode .ks-theme-slate { --knack-accent: #64748b; --knack-accent-hover: #475569; --knack-link: #94a3b8; --knack-link-hover: #cbd5e1; } /* ── Signature-gradient surfaces (the visible "theme" moment) ───────── */ .knack-theme-gradient, .ks-dash-hero, .ks-overview-greeting, .ks-welcome { background-image: var(--knack-theme-gradient) !important; color: #fff !important; border-color: transparent !important; } .ks-welcome .ks-welcome-heading, .ks-welcome .ks-welcome-sub { color: #fff !important; } .ks-welcome .ks-welcome-sub { opacity: .92; }