/* ============================================== Disco Cowboy Hat — Custom Stylesheet (Supplement to Tailwind CDN) ============================================== */ /* ── Particles ─────────────────────────────── */ .particle { position: absolute; border-radius: 50%; animation: dc-float linear infinite; pointer-events: none; } @keyframes dc-float { 0% { transform: translateY(0) translateX(0); opacity: 0.6; } 25% { transform: translateY(-30px) translateX(12px); opacity: 0.35; } 50% { transform: translateY(-18px) translateX(-10px); opacity: 0.7; } 75% { transform: translateY(-42px) translateX(6px); opacity: 0.3; } 100% { transform: translateY(0) translateX(0); opacity: 0.6; } } /* ── Toast Notifications ────────────────────── */ #toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem; width: 100%; pointer-events: none; } .toast { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; border: 1px solid; pointer-events: auto; animation: dc-toast-in 0.3s ease-out forwards; box-shadow: 0 10px 40px rgba(0,0,0,0.45); backdrop-filter: blur(8px); } @keyframes dc-toast-in { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .toast-success { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); color: #6ee7b7; } .toast-error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #fca5a5; } .toast-info { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.35); color: #c4b5fd; } /* ── Range input accent ─────────────────────── */ input[type="range"] { accent-color: #d946ef; } /* ── Smooth scroll ──────────────────────────── */ html { scroll-behavior: smooth; } /* ── Scrollbar styling ──────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #171717; } ::-webkit-scrollbar-thumb { background: #404040; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #d946ef; } /* ── Focus ring ─────────────────────────────── */ :focus-visible { outline: 2px solid #d946ef; outline-offset: 2px; } /* ══════════════════════════════════════════════ Light Mode — Public pages (home, shop, blog, etc.) Toggled by adding .light-mode to Uses neutral-* Tailwind classes ══════════════════════════════════════════════ */ html.light-mode { color-scheme: light; } html.light-mode body { background-color: #f8fafc !important; background-image: none !important; color: #0f172a !important; } /* ── Core text: white → near-black ── */ html.light-mode .text-white { color: #0f172a !important; } html.light-mode h1.text-white, html.light-mode h2.text-white, html.light-mode h3.text-white { color: #0f172a !important; } /* ── Nav / header ── */ html.light-mode #siteHeader { background: rgba(255,255,255,0.95) !important; border-bottom-color: #e2e8f0 !important; box-shadow: 0 1px 12px rgba(0,0,0,0.06) !important; } html.light-mode #siteHeader a { color: #374151 !important; } html.light-mode #siteHeader nav a { color: #374151 !important; } html.light-mode #siteHeader nav a:hover { color: #a21caf !important; } html.light-mode #mobileMenu { background: #ffffff !important; border-top-color: #e2e8f0 !important; } /* ── Backgrounds — attribute selector catches /50 /80 /30 variants too ── */ html.light-mode [class*="bg-neutral-950"] { background-color: #f8fafc !important; } html.light-mode [class*="bg-neutral-900"] { background-color: #f1f5f9 !important; } html.light-mode [class*="bg-neutral-800"] { background-color: #e2e8f0 !important; } html.light-mode [class*="bg-neutral-700"] { background-color: #cbd5e1 !important; } html.light-mode [class*="bg-black"] { background-color: #f8fafc !important; } /* ── Borders ── */ html.light-mode [class*="border-neutral-800"] { border-color: #cbd5e1 !important; } html.light-mode [class*="border-neutral-700"] { border-color: #d1d5db !important; } html.light-mode [class*="divide-neutral-800"] > * + * { border-color: #e2e8f0 !important; } /* ── Text colors ── */ html.light-mode [class~="text-neutral-100"] { color: #0f172a !important; } html.light-mode [class~="text-neutral-200"] { color: #1e293b !important; } html.light-mode [class~="text-neutral-300"] { color: #334155 !important; } html.light-mode [class~="text-neutral-400"] { color: #4b5563 !important; } html.light-mode [class~="text-neutral-500"] { color: #6b7280 !important; } html.light-mode [class~="text-neutral-600"] { color: #6b7280 !important; } /* ── Section backgrounds with inline gradients ── */ html.light-mode section[style*="radial-gradient"] { background: linear-gradient(135deg, #fdf4ff 0%, #ede9fe 50%, #f3e8ff 100%) !important; } html.light-mode body[style*="radial-gradient"], html.light-mode body[style*="linear-gradient"] { background: #f8fafc !important; } /* ── Cards / product cards ── */ html.light-mode [class*="rounded"][class*="border"][class*="bg-neutral"] { box-shadow: 0 1px 6px rgba(0,0,0,0.06); } /* ── Buttons with neutral backgrounds ── */ html.light-mode [class*="hover:bg-neutral-800"]:hover { background-color: #e2e8f0 !important; } html.light-mode [class*="hover:bg-neutral-700"]:hover { background-color: #cbd5e1 !important; } /* ── Inputs / Forms ── */ html.light-mode input:not([type="submit"]):not([type="button"]):not([type="range"]), html.light-mode textarea, html.light-mode select { background-color: #ffffff !important; border-color: #d1d5db !important; color: #0f172a !important; } html.light-mode input::placeholder, html.light-mode textarea::placeholder { color: #9ca3af !important; } /* ── Search results dropdown ── */ html.light-mode #searchResults { background: #ffffff !important; border-color: #e2e8f0 !important; } /* ── Cookie banner ── */ html.light-mode #cookieConsent { background: rgba(255,255,255,0.97) !important; border-top-color: #e2e8f0 !important; color: #374151 !important; } /* ── Cart / Wishlist drawer ── */ html.light-mode #cartDrawer, html.light-mode [id*="Drawer"] { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } /* ── Footer ── */ html.light-mode footer { background-color: #f1f5f9 !important; border-top-color: #e2e8f0 !important; color: #374151 !important; } /* ── Separators (w-px h-12 bg-neutral-800) ── */ html.light-mode [class*="w-px"][class*="bg-neutral"] { background-color: #cbd5e1 !important; } /* ── Backdrop overlays ── */ html.light-mode [class*="bg-black/"] { background-color: rgba(0,0,0,0.25) !important; } /* ── Theme icon ── */ html.light-mode #navThemeIcon { display: block; } /* ── Hero section: image card wrapper ── */ html.light-mode [class*="bg-gradient-to-br"][class*="from-neutral-900"] { background: #e2e8f0 !important; border-color: #cbd5e1 !important; } html.light-mode [class*="bg-neutral-900/95"] { background: rgba(255,255,255,0.97) !important; border-color: #e2e8f0 !important; color: #0f172a !important; } /* ── Stats / separators under hero ── */ html.light-mode .text-2xl.font-bold { color: #0f172a !important; } html.light-mode [class*="text-neutral-500"] { color: #6b7280 !important; } /* ── Body: override the inline dark gradient ── */ html.light-mode body { background: #f8fafc !important; background-image: none !important; color: #0f172a !important; } /* ── Particle canvas / decorative blobs ── */ html.light-mode canvas { opacity: 0.25 !important; } /* ── Section: any inline radial/linear gradient section backgrounds ── */ html.light-mode section[style] { background-image: none !important; background-color: transparent !important; } /* ── Mobile menu active link ── */ html.light-mode #mobileMenu a[class*="bg-neutral-800"] { background-color: #e2e8f0 !important; color: #0f172a !important; } html.light-mode #mobileMenu a { color: #374151 !important; } /* ── Newsletter / CTA section dark backgrounds ── */ html.light-mode [class*="from-fuchsia"][class*="to-purple"] { /* keep fuchsia CTAs as-is */ } html.light-mode [class*="from-neutral-900"][class*="to-neutral"] { background: #e2e8f0 !important; } /* ── Product / blog cards ── */ html.light-mode [class*="bg-neutral-900"][class*="border"] { background-color: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 8px rgba(0,0,0,0.06); } html.light-mode [class*="bg-neutral-800"][class*="rounded"] { background-color: #f1f5f9 !important; } /* ── Inline style body gradient (direct override) ── */ html.light-mode body[style] { background: #f8fafc !important; } /* ── Password strength bar ──────────────────── */ .strength-bar { height: 4px; border-radius: 2px; transition: width 0.3s ease, background-color 0.3s ease; } /* ── Auth pages: gradient body override ─────── */ .auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, rgba(217,70,239,0.15) 0%, transparent 60%), linear-gradient(180deg, #0a0a0a 0%, #171717 100%); } /* ── Page header offset ─────────────────────── */ .page-content { padding-top: 4rem; } /* ── Admin / dashboard table ────────────────── */ .dc-table { border-collapse: collapse; width: 100%; } .dc-table th, .dc-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #262626; font-size: 0.875rem; } .dc-table thead th { background: #1c1c1c; color: #a3a3a3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; } .dc-table tbody tr:hover { background: rgba(255,255,255,0.03); } /* ── Status badges ──────────────────────────── */ .badge-active { background: rgba(16,185,129,0.15); color:#6ee7b7; } .badge-pending { background: rgba(245,158,11,0.15); color:#fcd34d; } .badge-inactive { background: rgba(239,68,68,0.15); color:#fca5a5; } .badge-base { padding: 0.2rem 0.6rem; border-radius: 9999px; font-size:0.75rem; font-weight:600; } /* ── Responsive images ──────────────────────── */ img { max-width: 100%; height: auto; } /* ── Guide prose (inline accordion content) ─── */ .guide-prose p { margin-bottom: 1rem; line-height: 1.8; color: #94a3b8; } .guide-prose h2 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: #e2e8f0; } .guide-prose h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.4rem; color: #cbd5e1; } .guide-prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; color: #94a3b8; } .guide-prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; color: #94a3b8; } .guide-prose li { margin-bottom: 0.35rem; line-height: 1.7; } .guide-prose strong { color: #f1f5f9; } .guide-prose a { color: #d946ef; text-decoration: underline; } .guide-prose blockquote { border-left: 3px solid #d946ef; padding-left: 1rem; margin: 1rem 0; color: #94a3b8; font-style: italic; } .guide-prose img { border-radius: 0.75rem; margin: 1rem 0; } /* ── Details/summary chevron rotate ────────── */ details summary::-webkit-details-marker { display: none; } details[open] > summary .iconify[data-icon="lucide:chevron-down"] { transform: rotate(180deg); }