/* ========================================================================== NewTech LLC — Frontend color themes (Admin > Settings > Frontend Style) html[data-ntc-theme] is set on the element in templates/app-layout.php. classic blue / red / yellow ocean blue / light blue / light orange mint teal / light green / gold sunset orange / coral / amber grape violet / pink / gold All themes are light only (no dark mode). Values override the base palette in app.css — surfaces stay neutral white and the accent colors drive buttons, hero, links and stat icons. Enqueued last so it wins. ========================================================================== */ /* ========================================================================== Theme: ocean (blue / light blue / light orange) ========================================================================== */ html[data-ntc-theme="ocean"] { --bg: #f0f7ff; --surface-3: #eaf3ff; --border: #e3eefb; --border-strong: #cfe0f5; --text: #1b2c48; --text-2: #3f5a7d; --text-3: #7f9cc0; --primary: #0284c7; --primary-hover: #0369a1; --primary-2: #38bdf8; --primary-soft: #e0f2fe; --primary-soft-border: #bae6fd; --hero-gradient: linear-gradient(120deg, #0369a1 0%, #0284c7 48%, #7dd3fc 100%); --hero-glow: 0 18px 44px -16px rgba(2, 132, 199, .45); --accent-1: #0284c7; --accent-1-soft: #e0f2fe; --accent-2: #7dd3fc; --accent-2-soft: #e0f2fe; --accent-3: #fb923c; --accent-3-soft: #fffbeb; --accent-4: #38bdf8; --accent-4-soft: #e0f2fe; --accent-5: #f97316; --accent-5-soft: #ffedd5; } /* ========================================================================== Theme: mint (teal / light green / gold) ========================================================================== */ html[data-ntc-theme="mint"] { --bg: #f1fbf6; --surface-3: #e9f6ef; --border: #dcf1e6; --border-strong: #c3e6d4; --text: #12352b; --text-2: #2f5c4e; --text-3: #6fa58f; --primary: #0d9488; --primary-hover: #0f766e; --primary-2: #34d399; --primary-soft: #ccfbf1; --primary-soft-border: #99f6e4; --hero-gradient: linear-gradient(120deg, #0f766e 0%, #0d9488 48%, #22c55e 100%); --hero-glow: 0 18px 44px -16px rgba(13, 148, 136, .45); --accent-1: #0d9488; --accent-1-soft: #ccfbf1; --accent-2: #34d399; --accent-2-soft: #d1fae5; --accent-3: #f59e0b; --accent-3-soft: #fffbeb; --accent-4: #16a34a; --accent-4-soft: #dcfce7; --accent-5: #22c55e; --accent-5-soft: #dcfce7; } /* ========================================================================== Theme: sunset (orange / coral / amber) ========================================================================== */ html[data-ntc-theme="sunset"] { --bg: #fff6f0; --surface-3: #ffefe4; --border: #ffe8d7; --border-strong: #f5d3b6; --text: #3b2113; --text-2: #6e4526; --text-3: #b07a50; --primary: #ea580c; --primary-hover: #c2410c; --primary-2: #fb7185; --primary-soft: #ffedd5; --primary-soft-border: #fed7aa; --hero-gradient: linear-gradient(120deg, #c2410c 0%, #ea580c 48%, #fb7185 100%); --hero-glow: 0 18px 44px -16px rgba(234, 88, 12, .45); --accent-1: #ea580c; --accent-1-soft: #ffedd5; --accent-2: #fb7185; --accent-2-soft: #ffe4e6; --accent-3: #fbbf24; --accent-3-soft: #fef3c7; --accent-4: #fdba74; --accent-4-soft: #ffedd5; --accent-5: #ef4444; --accent-5-soft: #fef2f2; } /* ========================================================================== Theme: grape (violet / pink / gold) ========================================================================== */ html[data-ntc-theme="grape"] { --bg: #f8f4ff; --surface-3: #f1eaff; --border: #e9dcff; --border-strong: #d7c2f8; --text: #2a1848; --text-2: #4f3a77; --text-3: #917bb8; --primary: #7c3aed; --primary-hover: #6d28d9; --primary-2: #ec4899; --primary-soft: #f3e8ff; --primary-soft-border: #ddd6fe; --hero-gradient: linear-gradient(120deg, #6d28d9 0%, #7c3aed 48%, #ec4899 100%); --hero-glow: 0 18px 44px -16px rgba(124, 58, 237, .5); --accent-1: #7c3aed; --accent-1-soft: #f3e8ff; --accent-2: #ec4899; --accent-2-soft: #fdf0f7; --accent-3: #f59e0b; --accent-3-soft: #fffbeb; --accent-4: #8b5cf6; --accent-4-soft: #ede9fe; --accent-5: #d946ef; --accent-5-soft: #fdf4ff; }