/* Storefront color themes (Admin → Dashboard → Appearance). * * The chosen theme is applied as `st-` on the store layout's . * Each theme sets a few CSS variables; the override block below repaints the * storefront's accent utilities (primary buttons, links, hero gradients, * selected filter states) from those variables. No theme class = the classic * blue & violet look, untouched. * * --p primary --pd primary (darker / hover, links) * --pt primary (darkest text) * --g1/--g2 headline gradient stops * --h1/--h2/--h3 hero background wash --b1/--b2 hero blur blobs * --tint selected-state background wash */ /* ---------- theme palettes ---------- */ body.st-ocean { --p:#0ea5e9; --pd:#0284c7; --pt:#075985; --g1:#0369a1; --g2:#06b6d4; --h1:#f0f9ff; --h2:#e0f2fe; --h3:#ecfeff; --b1:rgba(125,211,252,.4); --b2:rgba(103,232,249,.4); --tint:#f0f9ff; } body.st-emerald { --p:#10b981; --pd:#059669; --pt:#065f46; --g1:#047857; --g2:#34d399; --h1:#ecfdf5; --h2:#d1fae5; --h3:#f0fdfa; --b1:rgba(110,231,183,.4); --b2:rgba(94,234,212,.4); --tint:#ecfdf5; } body.st-sunset { --p:#f97316; --pd:#ea580c; --pt:#9a3412; --g1:#ea580c; --g2:#f43f5e; --h1:#fff7ed; --h2:#ffedd5; --h3:#ffe4e6; --b1:rgba(253,186,116,.4); --b2:rgba(253,164,175,.4); --tint:#fff7ed; } body.st-royal { --p:#6366f1; --pd:#4f46e5; --pt:#3730a3; --g1:#4338ca; --g2:#8b5cf6; --h1:#eef2ff; --h2:#ede9fe; --h3:#fdf4ff; --b1:rgba(165,180,252,.4); --b2:rgba(196,181,253,.4); --tint:#eef2ff; } body.st-rose { --p:#f43f5e; --pd:#e11d48; --pt:#9f1239; --g1:#be123c; --g2:#fb7185; --h1:#fff1f2; --h2:#ffe4e6; --h3:#fdf2f8; --b1:rgba(253,164,175,.4); --b2:rgba(249,168,212,.4); --tint:#fff1f2; } body.st-teal { --p:#14b8a6; --pd:#0d9488; --pt:#115e59; --g1:#0f766e; --g2:#2dd4bf; --h1:#f0fdfa; --h2:#ccfbf1; --h3:#ecfeff; --b1:rgba(94,234,212,.4); --b2:rgba(103,232,249,.4); --tint:#f0fdfa; } body.st-amber { --p:#f59e0b; --pd:#d97706; --pt:#92400e; --g1:#b45309; --g2:#fbbf24; --h1:#fffbeb; --h2:#fef3c7; --h3:#fff7ed; --b1:rgba(252,211,77,.4); --b2:rgba(253,186,116,.4); --tint:#fffbeb; } body.st-crimson { --p:#ef4444; --pd:#dc2626; --pt:#991b1b; --g1:#b91c1c; --g2:#f87171; --h1:#fef2f2; --h2:#fee2e2; --h3:#fff1f2; --b1:rgba(252,165,165,.4); --b2:rgba(253,164,175,.4); --tint:#fef2f2; } body.st-slate { --p:#475569; --pd:#334155; --pt:#1e293b; --g1:#1e293b; --g2:#64748b; --h1:#f8fafc; --h2:#f1f5f9; --h3:#e2e8f0; --b1:rgba(148,163,184,.35); --b2:rgba(203,213,225,.4); --tint:#f1f5f9; } body.st-grape { --p:#a855f7; --pd:#9333ea; --pt:#6b21a8; --g1:#7e22ce; --g2:#d946ef; --h1:#faf5ff; --h2:#f3e8ff; --h3:#fdf4ff; --b1:rgba(216,180,254,.4); --b2:rgba(240,171,252,.4); --tint:#faf5ff; } /* ---------- accent overrides (only when a theme class is present) ---------- */ /* primary buttons + badges */ body[class*="st-"] .bg-blue-500 { background-color: var(--p) !important; } body[class*="st-"] .bg-blue-600 { background-color: var(--pd) !important; } body[class*="st-"] .hover\:bg-blue-600:hover { background-color: var(--pd) !important; } body[class*="st-"] .hover\:bg-blue-700:hover { background-color: var(--pt) !important; } /* links + accent text */ body[class*="st-"] .text-blue-600 { color: var(--pd) !important; } body[class*="st-"] .text-blue-700 { color: var(--pd) !important; } body[class*="st-"] .text-blue-800 { color: var(--pt) !important; } body[class*="st-"] .hover\:text-blue-700:hover, body[class*="st-"] .hover\:text-blue-800:hover { color: var(--pt) !important; } body[class*="st-"] .group:hover .group-hover\:text-blue-700 { color: var(--pd) !important; } /* hero: background wash, blur blobs, gradient headline */ body[class*="st-"] .from-blue-50.via-violet-50.to-pink-50 { background-image: linear-gradient(to bottom right, var(--h1), var(--h2), var(--h3)) !important; } body[class*="st-"] .bg-blue-200\/40 { background-color: var(--b1) !important; } body[class*="st-"] .bg-pink-200\/40 { background-color: var(--b2) !important; } body[class*="st-"] .from-blue-600.to-violet-600 { background-image: linear-gradient(to right, var(--g1), var(--g2)) !important; } /* eyebrow pill + rings */ body[class*="st-"] .text-blue-700.bg-white\/70 { color: var(--pd) !important; } body[class*="st-"] .ring-blue-100 { --tw-ring-color: var(--tint) !important; } body[class*="st-"] .bg-blue-500\/10, body[class*="st-"] .bg-blue-100 { background-color: var(--tint) !important; } /* selected filter states (browse sidebar) */ body[class*="st-"] .has-\[\:checked\]\:bg-blue-50:has(:checked) { background-color: var(--tint) !important; } body[class*="st-"] .peer:checked ~ .peer-checked\:text-blue-800 { color: var(--pt) !important; } body[class*="st-"] .bg-blue-50 { background-color: var(--tint) !important; } /* category card hover tint */ body[class*="st-"] .hover\:from-blue-50:hover { background-image: linear-gradient(to bottom right, var(--h1), var(--h2)) !important; }