/* ══════════════════════════════════════════════════════════════════════ SHUBBAK STOREFRONT — 10 Premium Store Themes 4 Super Premium + 6 Premium Applied via [data-store-theme="..."] on ══════════════════════════════════════════════════════════════════════ Variables used throughout the store: --s-primary Main brand color --s-primary-dark Darker shade --s-accent Accent/secondary --s-bg Page background --s-surface Card/surface background --s-surface-2 Slightly elevated surface --s-text Main text color --s-text-muted Secondary text --s-border Border color --s-shadow Box shadow --s-hero-bg Hero section background --s-hero-text Hero text color --s-radius Border radius for cards --s-radius-btn Border radius for buttons --s-font Font stack --s-nav-bg Navigation background --s-footer-bg Footer background */ /* ══════════════════════════════════════════════════════════ ⭐⭐⭐ SUPER PREMIUM THEMES ⭐⭐⭐ ══════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────── 1. 💎 CRYSTAL — Glassmorphism Ultra-Modern Frosted glass, sky blue, clean & luminous ───────────────────────────────────────────────────────── */ [data-store-theme="crystal"] { --s-primary: #0ea5e9; --s-primary-dark: #0284c7; --s-primary-light: #38bdf8; --s-accent: #f59e0b; --s-bg: #f0f9ff; --s-surface: rgba(255,255,255,0.85); --s-surface-2: rgba(255,255,255,0.95); --s-glass: rgba(255,255,255,0.65); --s-glass-border: rgba(255,255,255,0.4); --s-text: #0c1832; --s-text-muted: #4a6580; --s-border: rgba(14,165,233,0.15); --s-shadow: 0 8px 32px rgba(14,165,233,0.12); --s-shadow-hover: 0 16px 48px rgba(14,165,233,0.2); --s-hero-bg: linear-gradient(135deg, #0c1832 0%, #0c4a6e 40%, #0ea5e9 100%); --s-hero-text: #ffffff; --s-radius: 20px; --s-radius-btn: 50px; --s-radius-sm: 12px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(255,255,255,0.75); --s-nav-blur: blur(24px); --s-footer-bg: #0c1832; --s-badge-bg: rgba(14,165,233,0.1); --s-badge-text: #0ea5e9; --s-price-color: #0ea5e9; --s-btn-shadow: 0 4px 20px rgba(14,165,233,0.4); --s-card-overlay: linear-gradient(to top, rgba(12,24,50,0.8) 0%, transparent 60%); --s-heading-weight: 800; } /* ───────────────────────────────────────────────────────── 2. 🖤 NOIR — Dark Luxury Editorial Pitch black, gold, editorial magazine ───────────────────────────────────────────────────────── */ [data-store-theme="noir"] { --s-primary: #d4af37; --s-primary-dark: #b8961e; --s-primary-light: #f0d060; --s-accent: #ffffff; --s-bg: #080808; --s-surface: #111111; --s-surface-2: #1a1a1a; --s-glass: rgba(20,20,20,0.9); --s-glass-border: rgba(212,175,55,0.2); --s-text: #f0f0f0; --s-text-muted: #888888; --s-border: rgba(212,175,55,0.2); --s-shadow: 0 8px 32px rgba(0,0,0,0.6); --s-shadow-hover: 0 16px 48px rgba(212,175,55,0.15); --s-hero-bg: linear-gradient(135deg, #000000 0%, #1a1106 60%, #2d1f00 100%); --s-hero-text: #f0f0f0; --s-radius: 4px; --s-radius-btn: 4px; --s-radius-sm: 4px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(8,8,8,0.97); --s-nav-blur: blur(20px); --s-footer-bg: #050505; --s-badge-bg: rgba(212,175,55,0.1); --s-badge-text: #d4af37; --s-price-color: #d4af37; --s-btn-shadow: 0 4px 20px rgba(212,175,55,0.3); --s-card-overlay: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%); --s-heading-weight: 900; } /* ───────────────────────────────────────────────────────── 3. 🌈 AURORA — Vibrant Gradient Mesh Rich gradients, violet-to-pink, dynamic & fresh ───────────────────────────────────────────────────────── */ [data-store-theme="aurora"] { --s-primary: #8b5cf6; --s-primary-dark: #7c3aed; --s-primary-light: #a78bfa; --s-accent: #ec4899; --s-bg: #faf5ff; --s-surface: rgba(255,255,255,0.9); --s-surface-2: #ffffff; --s-glass: rgba(139,92,246,0.08); --s-glass-border: rgba(139,92,246,0.2); --s-text: #1e1b4b; --s-text-muted: #6b7280; --s-border: rgba(139,92,246,0.15); --s-shadow: 0 8px 32px rgba(139,92,246,0.15); --s-shadow-hover: 0 16px 48px rgba(139,92,246,0.25); --s-hero-bg: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 30%, #7c3aed 60%, #ec4899 100%); --s-hero-text: #ffffff; --s-radius: 24px; --s-radius-btn: 50px; --s-radius-sm: 14px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(255,255,255,0.85); --s-nav-blur: blur(24px); --s-footer-bg: #1e1b4b; --s-badge-bg: rgba(139,92,246,0.1); --s-badge-text: #8b5cf6; --s-price-color: #7c3aed; --s-btn-shadow: 0 4px 24px rgba(139,92,246,0.45); --s-card-overlay: linear-gradient(to top, rgba(30,27,75,0.8) 0%, transparent 60%); --s-heading-weight: 800; } /* ───────────────────────────────────────────────────────── 4. 🤍 MARBLE — White Luxury Premium Pure white, marble texture effect, luxury minimal ───────────────────────────────────────────────────────── */ [data-store-theme="marble"] { --s-primary: #1a1a1a; --s-primary-dark: #000000; --s-primary-light: #333333; --s-accent: #c9a96e; --s-bg: #fafafa; --s-surface: #ffffff; --s-surface-2: #f5f5f5; --s-glass: rgba(255,255,255,0.9); --s-glass-border: rgba(0,0,0,0.06); --s-text: #1a1a1a; --s-text-muted: #777777; --s-border: rgba(0,0,0,0.07); --s-shadow: 0 2px 20px rgba(0,0,0,0.06); --s-shadow-hover: 0 8px 40px rgba(0,0,0,0.1); --s-hero-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%); --s-hero-text: #ffffff; --s-radius: 8px; --s-radius-btn: 8px; --s-radius-sm: 6px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(255,255,255,0.98); --s-nav-blur: none; --s-footer-bg: #1a1a1a; --s-badge-bg: rgba(201,169,110,0.1); --s-badge-text: #c9a96e; --s-price-color: #1a1a1a; --s-btn-shadow: 0 2px 12px rgba(0,0,0,0.2); --s-card-overlay: linear-gradient(to top, rgba(26,26,26,0.75) 0%, transparent 55%); --s-heading-weight: 700; } /* ══════════════════════════════════════════════════════════ ✨ PREMIUM THEMES ══════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────── 5. ⬜ MINIMAL — Ultra Clean & Simple ───────────────────────────────────────────────────────── */ [data-store-theme="minimal"] { --s-primary: #2563eb; --s-primary-dark: #1d4ed8; --s-primary-light: #3b82f6; --s-accent: #f59e0b; --s-bg: #ffffff; --s-surface: #ffffff; --s-surface-2: #f9fafb; --s-glass: rgba(255,255,255,0.9); --s-glass-border: rgba(0,0,0,0.06); --s-text: #111827; --s-text-muted: #6b7280; --s-border: #e5e7eb; --s-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); --s-shadow-hover: 0 4px 20px rgba(0,0,0,0.1); --s-hero-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); --s-hero-text: #ffffff; --s-radius: 12px; --s-radius-btn: 8px; --s-radius-sm: 8px; --s-font: 'Tajawal', system-ui; --s-nav-bg: #ffffff; --s-nav-blur: none; --s-footer-bg: #111827; --s-badge-bg: #eff6ff; --s-badge-text: #2563eb; --s-price-color: #2563eb; --s-btn-shadow: 0 2px 10px rgba(37,99,235,0.25); --s-card-overlay: linear-gradient(to top, rgba(17,24,39,0.7) 0%, transparent 50%); --s-heading-weight: 700; } /* ───────────────────────────────────────────────────────── 6. 🌿 TROPICAL — Fresh Jungle Green ───────────────────────────────────────────────────────── */ [data-store-theme="tropical"] { --s-primary: #16a34a; --s-primary-dark: #15803d; --s-primary-light: #22c55e; --s-accent: #eab308; --s-bg: #f0fdf4; --s-surface: #ffffff; --s-surface-2: #f0fdf4; --s-glass: rgba(255,255,255,0.85); --s-glass-border: rgba(22,163,74,0.2); --s-text: #052e16; --s-text-muted: #166534; --s-border: rgba(22,163,74,0.15); --s-shadow: 0 4px 20px rgba(22,163,74,0.1); --s-shadow-hover: 0 8px 30px rgba(22,163,74,0.18); --s-hero-bg: linear-gradient(135deg, #052e16 0%, #14532d 40%, #16a34a 100%); --s-hero-text: #ffffff; --s-radius: 20px; --s-radius-btn: 50px; --s-radius-sm: 12px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(255,255,255,0.9); --s-nav-blur: blur(20px); --s-footer-bg: #052e16; --s-badge-bg: rgba(22,163,74,0.1); --s-badge-text: #16a34a; --s-price-color: #16a34a; --s-btn-shadow: 0 4px 18px rgba(22,163,74,0.4); --s-card-overlay: linear-gradient(to top, rgba(5,46,22,0.8) 0%, transparent 55%); --s-heading-weight: 700; } /* ───────────────────────────────────────────────────────── 7. 🌸 SAKURA — Japanese Pink Blossom ───────────────────────────────────────────────────────── */ [data-store-theme="sakura"] { --s-primary: #ec4899; --s-primary-dark: #db2777; --s-primary-light: #f472b6; --s-accent: #8b5cf6; --s-bg: #fdf2f8; --s-surface: #ffffff; --s-surface-2: #fdf2f8; --s-glass: rgba(255,255,255,0.85); --s-glass-border: rgba(236,72,153,0.2); --s-text: #500724; --s-text-muted: #9d174d; --s-border: rgba(236,72,153,0.15); --s-shadow: 0 4px 20px rgba(236,72,153,0.1); --s-shadow-hover: 0 8px 30px rgba(236,72,153,0.18); --s-hero-bg: linear-gradient(135deg, #500724 0%, #9d174d 40%, #ec4899 100%); --s-hero-text: #ffffff; --s-radius: 20px; --s-radius-btn: 50px; --s-radius-sm: 14px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(255,255,255,0.9); --s-nav-blur: blur(20px); --s-footer-bg: #500724; --s-badge-bg: rgba(236,72,153,0.1); --s-badge-text: #ec4899; --s-price-color: #db2777; --s-btn-shadow: 0 4px 18px rgba(236,72,153,0.4); --s-card-overlay: linear-gradient(to top, rgba(80,7,36,0.8) 0%, transparent 55%); --s-heading-weight: 700; } /* ───────────────────────────────────────────────────────── 8. 🌊 DEEP SEA — Ocean Dark Blue ───────────────────────────────────────────────────────── */ [data-store-theme="deepsea"] { --s-primary: #22d3ee; --s-primary-dark: #0891b2; --s-primary-light: #67e8f9; --s-accent: #818cf8; --s-bg: #020e1f; --s-surface: rgba(255,255,255,0.04); --s-surface-2: rgba(255,255,255,0.07); --s-glass: rgba(2,20,40,0.8); --s-glass-border: rgba(34,211,238,0.15); --s-text: #e2f8ff; --s-text-muted: #7dd3fc; --s-border: rgba(34,211,238,0.15); --s-shadow: 0 8px 32px rgba(0,0,0,0.5); --s-shadow-hover: 0 16px 48px rgba(34,211,238,0.15); --s-hero-bg: linear-gradient(135deg, #020e1f 0%, #0c2a4a 50%, #0e4f6b 100%); --s-hero-text: #ffffff; --s-radius: 16px; --s-radius-btn: 12px; --s-radius-sm: 10px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(2,14,31,0.9); --s-nav-blur: blur(20px); --s-footer-bg: #010a14; --s-badge-bg: rgba(34,211,238,0.1); --s-badge-text: #22d3ee; --s-price-color: #22d3ee; --s-btn-shadow: 0 4px 20px rgba(34,211,238,0.35); --s-card-overlay: linear-gradient(to top, rgba(2,14,31,0.9) 0%, transparent 55%); --s-heading-weight: 700; } /* ───────────────────────────────────────────────────────── 9. 🏜️ DESERT — Warm Earthy Terracotta ───────────────────────────────────────────────────────── */ [data-store-theme="desert"] { --s-primary: #d97706; --s-primary-dark: #b45309; --s-primary-light: #f59e0b; --s-accent: #dc2626; --s-bg: #fffbeb; --s-surface: #ffffff; --s-surface-2: #fef3c7; --s-glass: rgba(255,255,255,0.85); --s-glass-border: rgba(217,119,6,0.2); --s-text: #431407; --s-text-muted: #92400e; --s-border: rgba(217,119,6,0.15); --s-shadow: 0 4px 20px rgba(217,119,6,0.1); --s-shadow-hover: 0 8px 30px rgba(217,119,6,0.18); --s-hero-bg: linear-gradient(135deg, #431407 0%, #7c2d12 40%, #d97706 100%); --s-hero-text: #ffffff; --s-radius: 16px; --s-radius-btn: 12px; --s-radius-sm: 10px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(255,255,255,0.92); --s-nav-blur: blur(16px); --s-footer-bg: #431407; --s-badge-bg: rgba(217,119,6,0.1); --s-badge-text: #d97706; --s-price-color: #d97706; --s-btn-shadow: 0 4px 18px rgba(217,119,6,0.4); --s-card-overlay: linear-gradient(to top, rgba(67,20,7,0.8) 0%, transparent 55%); --s-heading-weight: 700; } /* ───────────────────────────────────────────────────────── 10. ⚡ NEON CITY — Cyberpunk Dark ───────────────────────────────────────────────────────── */ [data-store-theme="neon"] { --s-primary: #a855f7; --s-primary-dark: #9333ea; --s-primary-light: #c084fc; --s-accent: #00ff88; --s-bg: #050010; --s-surface: rgba(255,255,255,0.03); --s-surface-2: rgba(168,85,247,0.05); --s-glass: rgba(5,0,16,0.85); --s-glass-border: rgba(168,85,247,0.25); --s-text: #f0e6ff; --s-text-muted: #a78bfa; --s-border: rgba(168,85,247,0.2); --s-shadow: 0 8px 32px rgba(0,0,0,0.7); --s-shadow-hover: 0 16px 48px rgba(168,85,247,0.2), 0 0 60px rgba(168,85,247,0.1); --s-hero-bg: linear-gradient(135deg, #050010 0%, #160030 50%, #300060 100%); --s-hero-text: #f0e6ff; --s-radius: 12px; --s-radius-btn: 8px; --s-radius-sm: 8px; --s-font: 'Tajawal', system-ui; --s-nav-bg: rgba(5,0,16,0.92); --s-nav-blur: blur(20px); --s-footer-bg: #030008; --s-badge-bg: rgba(168,85,247,0.12); --s-badge-text: #c084fc; --s-price-color: #00ff88; --s-btn-shadow: 0 0 20px rgba(168,85,247,0.5), 0 4px 20px rgba(168,85,247,0.3); --s-card-overlay: linear-gradient(to top, rgba(5,0,16,0.9) 0%, transparent 55%); --s-heading-weight: 800; } /* ══════════════════════════════════════════════════════════════════════ GLOBAL THEME APPLICATION These rules apply CSS variables to the actual Tailwind elements ensuring all themes render correctly ══════════════════════════════════════════════════════════════════════ */ /* ── Universal Overrides (all themes) ─────────────────────────────── */ /* Body & Layout */ [data-store-theme] body, [data-store-theme] { background: var(--s-bg) !important; } [data-store-theme] .store-nav { background: var(--s-nav-bg) !important; backdrop-filter: var(--s-nav-blur, none) !important; -webkit-backdrop-filter: var(--s-nav-blur, none) !important; border-bottom: 1px solid var(--s-border) !important; } /* Product Cards — use theme surface instead of hardcoded bg-white */ [data-store-theme] .group.relative.bg-white, [data-store-theme] .store-card, [data-store-theme] [class*="rounded"][class*="border"][class*="overflow-hidden"]:not(.fi-) { background: var(--s-surface) !important; border-color: var(--s-border) !important; } /* Text colors for cards */ [data-store-theme] .store-card .text-gray-900, [data-store-theme] .group .text-gray-900 { color: var(--s-text) !important; } [data-store-theme] .store-card .text-gray-500, [data-store-theme] .group .text-gray-500, [data-store-theme] .store-card .text-gray-400, [data-store-theme] .group .text-gray-400 { color: var(--s-text-muted) !important; } /* Section backgrounds */ [data-store-theme] .bg-gray-50 { background: var(--s-surface-2) !important; } [data-store-theme] .bg-white:not(.fi-):not([class*="fi-"]) { background: var(--s-surface) !important; } /* Headings */ [data-store-theme] h1:not(.fi-), [data-store-theme] h2:not(.fi-), [data-store-theme] h3:not(.fi-), [data-store-theme] h4:not(.fi-) { color: var(--s-text) !important; } /* Paragraph & body text */ [data-store-theme] p.text-gray-600, [data-store-theme] p.text-gray-700 { color: var(--s-text-muted) !important; } /* Input fields */ [data-store-theme] input:not([type="hidden"]):not(.fi-), [data-store-theme] textarea:not(.fi-), [data-store-theme] select:not(.fi-) { background: var(--s-surface) !important; border-color: var(--s-border) !important; color: var(--s-text) !important; } /* ── DARK THEME FIXES (Noir, Deep Sea, Neon) ──────────────────────── */ /* Fix white-on-white in navigation for dark themes */ [data-store-theme="noir"] .store-nav a, [data-store-theme="noir"] .store-nav button, [data-store-theme="deepsea"] .store-nav a, [data-store-theme="deepsea"] .store-nav button, [data-store-theme="neon"] .store-nav a, [data-store-theme="neon"] .store-nav button { color: var(--s-text) !important; } /* Dark theme: product card image placeholder */ [data-store-theme="noir"] .group .bg-gray-50, [data-store-theme="deepsea"] .group .bg-gray-50, [data-store-theme="neon"] .group .bg-gray-50 { background: var(--s-surface-2) !important; } /* Dark theme: "out of stock" badge contrast */ [data-store-theme="noir"] .bg-white\/90, [data-store-theme="deepsea"] .bg-white\/90, [data-store-theme="neon"] .bg-white\/90 { background: rgba(255,255,255,0.15) !important; color: white !important; } /* ── CRYSTAL — Extra glass effect on cards ────────────────────────── */ [data-store-theme="crystal"] .group.relative { background: rgba(255,255,255,0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-color: rgba(255,255,255,0.6) !important; } [data-store-theme="crystal"] .group.relative:hover { background: rgba(255,255,255,0.9) !important; } /* ── NOIR — Gold accents on cards ─────────────────────────────────── */ [data-store-theme="noir"] .group.relative { border-color: rgba(212,175,55,0.2) !important; } [data-store-theme="noir"] .group.relative:hover { border-color: rgba(212,175,55,0.5) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,175,55,0.25) !important; } /* ── AURORA — Gradient glow on hover ──────────────────────────────── */ [data-store-theme="aurora"] .group.relative:hover { box-shadow: 0 16px 48px rgba(139,92,246,0.2) !important; } /* ── MARBLE — Ultra-clean minimal ─────────────────────────────────── */ [data-store-theme="marble"] .group.relative { border-color: rgba(0,0,0,0.05) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.04) !important; } [data-store-theme="marble"] .group.relative:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; border-color: rgba(0,0,0,0.12) !important; } /* ── NEON — Glow on cards ─────────────────────────────────────────── */ [data-store-theme="neon"] .group.relative { border-color: rgba(168,85,247,0.15) !important; } [data-store-theme="neon"] .group.relative:hover { box-shadow: 0 0 40px rgba(168,85,247,0.2), 0 16px 48px rgba(0,0,0,0.8) !important; border-color: rgba(168,85,247,0.5) !important; } /* ── DEEP SEA — Ocean card effect ─────────────────────────────────── */ [data-store-theme="deepsea"] .group.relative { border-color: rgba(34,211,238,0.15) !important; } [data-store-theme="deepsea"] .group.relative:hover { box-shadow: 0 8px 32px rgba(34,211,238,0.15), 0 16px 48px rgba(0,0,0,0.6) !important; border-color: rgba(34,211,238,0.4) !important; } /* ── ALL THEMES — Hero section ────────────────────────────────────── */ [data-store-theme] .store-hero { background: var(--s-hero-bg) !important; } [data-store-theme] .store-hero * { color: var(--s-hero-text) !important; } [data-store-theme] .store-hero .text-white, [data-store-theme] .store-hero h1, [data-store-theme] .store-hero h2, [data-store-theme] .store-hero p { color: var(--s-hero-text) !important; } /* ── Footer ───────────────────────────────────────────────────────── */ [data-store-theme] .store-footer, [data-store-theme] footer.bg-gray-900 { background: var(--s-footer-bg) !important; } /* ── Buttons across all store pages ──────────────────────────────── */ [data-store-theme] .store-btn-primary, [data-store-theme] button[style*="var(--color-primary)"], [data-store-theme] button[style*="var(--s-primary)"] { border-radius: var(--s-radius-btn) !important; box-shadow: var(--s-btn-shadow) !important; transition: all 0.25s ease !important; } /* ── Border radius consistency ────────────────────────────────────── */ [data-store-theme="marble"] .rounded-2xl, [data-store-theme="marble"] .rounded-xl { border-radius: 8px !important; } [data-store-theme="obsidian"] .rounded-2xl, [data-store-theme="obsidian"] .rounded-xl { border-radius: 0 !important; } [data-store-theme="emerald"] .rounded-2xl { border-radius: 28px !important; } [data-store-theme="aurora"] .rounded-2xl { border-radius: 24px !important; } /* ── Neumorphism for Emerald ──────────────────────────────────────── */ [data-store-theme="emerald"] .group.relative { background: #e8f7f0 !important; border: none !important; box-shadow: 8px 8px 20px rgba(5,46,22,0.12), -8px -8px 20px rgba(255,255,255,0.8) !important; } [data-store-theme="emerald"] .group.relative:hover { box-shadow: 10px 10px 28px rgba(5,46,22,0.16), -6px -6px 16px rgba(255,255,255,0.9) !important; transform: translateY(-3px) !important; } /* ── Tag / Badge on product images ───────────────────────────────── */ [data-store-theme="noir"] .store-badge, [data-store-theme="neon"] .store-badge, [data-store-theme="deepsea"] .store-badge { background: rgba(255,255,255,0.1) !important; color: white !important; } /* ══════════════════════════════════════════════════════════════════════ COMPREHENSIVE COLOR CONSISTENCY FIX Overrides ALL remaining hardcoded Tailwind gray classes in store pages ══════════════════════════════════════════════════════════════════════ */ /* ── Backgrounds ──────────────────────────────────────────────────── */ [data-store-theme] .bg-white:not([class*="fi-"]):not([class*="dark:"]) { background-color: var(--s-surface) !important; } [data-store-theme] .bg-gray-50:not([class*="fi-"]) { background-color: var(--s-surface-2) !important; } [data-store-theme] .bg-gray-100:not([class*="fi-"]) { background-color: color-mix(in srgb, var(--s-border) 50%, var(--s-surface)) !important; } [data-store-theme] .bg-gray-200:not([class*="fi-"]) { background-color: var(--s-border) !important; } /* ── Borders ──────────────────────────────────────────────────────── */ [data-store-theme] .border-gray-50, [data-store-theme] .border-gray-100, [data-store-theme] .border-gray-200 { border-color: var(--s-border) !important; } /* ── Text colors ──────────────────────────────────────────────────── */ [data-store-theme] .text-gray-900, [data-store-theme] .text-gray-800 { color: var(--s-text) !important; } [data-store-theme] .text-gray-700, [data-store-theme] .text-gray-600 { color: color-mix(in srgb, var(--s-text) 80%, transparent) !important; } [data-store-theme] .text-gray-500 { color: var(--s-text-muted) !important; } [data-store-theme] .text-gray-400, [data-store-theme] .text-gray-300 { color: color-mix(in srgb, var(--s-text-muted) 70%, transparent) !important; } /* ── Divide & Ring ────────────────────────────────────────────────── */ [data-store-theme] .divide-gray-100 > * + * { border-color: var(--s-border) !important; } /* ── Rounded cards ────────────────────────────────────────────────── */ [data-store-theme] .rounded-3xl.border, [data-store-theme] .rounded-2xl.border { background: var(--s-surface) !important; border-color: var(--s-border) !important; } /* ── Input & Form controls ────────────────────────────────────────── */ [data-store-theme] input:not([type="hidden"]):not([type="submit"]):not(.fi-), [data-store-theme] textarea:not(.fi-), [data-store-theme] select:not(.fi-) { background: var(--s-surface) !important; border-color: var(--s-border) !important; color: var(--s-text) !important; } [data-store-theme] input::placeholder, [data-store-theme] textarea::placeholder { color: var(--s-text-muted) !important; opacity: 0.6; } [data-store-theme] input:focus, [data-store-theme] textarea:focus, [data-store-theme] select:focus { border-color: var(--s-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-primary) 20%, transparent) !important; outline: none !important; } /* ── Quantity buttons ─────────────────────────────────────────────── */ [data-store-theme] .border.border-gray-200.rounded-xl, [data-store-theme] .border.border-gray-200.rounded-2xl { border-color: var(--s-border) !important; background: var(--s-surface) !important; } /* ── Sticky filter bar ────────────────────────────────────────────── */ [data-store-theme] .sticky.top-16 { background: var(--s-nav-bg) !important; backdrop-filter: var(--s-nav-blur, none) !important; border-color: var(--s-border) !important; } /* ── Order tracker steps ──────────────────────────────────────────── */ [data-store-theme] .absolute.top-5.h-0\.5 { background: var(--s-border) !important; } /* ── Shadows ──────────────────────────────────────────────────────── */ [data-store-theme] .shadow-sm { box-shadow: var(--s-shadow) !important; } /* ── Checkout & Order pages ───────────────────────────────────────── */ [data-store-theme] .border-t.border-gray-100, [data-store-theme] .border-b.border-gray-100, [data-store-theme] .border-b.border-gray-50 { border-color: var(--s-border) !important; } /* ── Product image placeholder ────────────────────────────────────── */ [data-store-theme] .bg-gray-100.flex.items-center, [data-store-theme] .bg-gray-100.rounded-xl { background: var(--s-surface-2) !important; } /* ── Hover state overrides ────────────────────────────────────────── */ [data-store-theme] a:hover .text-gray-700, [data-store-theme] a:hover .text-gray-800, [data-store-theme] a:hover .text-gray-900 { color: var(--s-primary) !important; } /* ── Scroll to top button ─────────────────────────────────────────── */ [data-store-theme] .fixed.bottom-6.right-4 { background: var(--s-primary) !important; border-radius: var(--s-radius-btn) !important; } /* ── Category cards ───────────────────────────────────────────────── */ [data-store-theme] .rounded-3xl.border-2 { background: var(--s-surface) !important; border-color: var(--s-border) !important; } [data-store-theme] .rounded-3xl.border-2:hover, [data-store-theme] .group:hover .rounded-3xl.border-2 { border-color: var(--s-primary) !important; box-shadow: var(--s-shadow-hover) !important; } /* ── Toast / Notification ─────────────────────────────────────────── */ [data-store-theme] .rounded-2xl.border.border-green-200, [data-store-theme] .rounded-2xl.border.border-red-200 { background: var(--s-surface) !important; } /* ── Badge: "آخر X قطع" ──────────────────────────────────────────── */ [data-store-theme] .bg-amber-500 { background: var(--s-accent, #f59e0b) !important; } /* ── Progress bar in toast ────────────────────────────────────────── */ [data-store-theme] .to-green-500 { --tw-gradient-to: var(--s-primary) !important; } /* ───────────────────────────────────────────────────────────────────── DARK THEME SPECIFIC: Extra fixes for Noir, Neon, DeepSea ───────────────────────────────────────────────────────────────────── */ /* Navigation links color on dark themes */ [data-store-theme="noir"] nav a, [data-store-theme="noir"] header a, [data-store-theme="neon"] nav a, [data-store-theme="neon"] header a, [data-store-theme="deepsea"] nav a, [data-store-theme="deepsea"] header a { color: var(--s-text) !important; } [data-store-theme="noir"] nav a:hover, [data-store-theme="neon"] nav a:hover, [data-store-theme="deepsea"] nav a:hover { color: var(--s-primary) !important; } /* SVG icons in dark themes */ [data-store-theme="noir"] svg:not([class*="text-green"]):not([class*="text-red"]):not([class*="text-amber"]):not([fill="currentColor"]), [data-store-theme="neon"] svg:not([class*="text-green"]):not([class*="text-red"]):not([fill="currentColor"]), [data-store-theme="deepsea"] svg:not([class*="text-green"]):not([class*="text-red"]):not([fill="currentColor"]) { stroke: var(--s-text-muted) !important; } /* Product image border */ [data-store-theme="noir"] .aspect-square, [data-store-theme="neon"] .aspect-square, [data-store-theme="deepsea"] .aspect-square { background: var(--s-surface-2) !important; } /* Footer text */ [data-store-theme] .store-footer .text-gray-400, [data-store-theme] footer .text-gray-400 { color: rgba(255,255,255,0.45) !important; } [data-store-theme] .store-footer .text-gray-300, [data-store-theme] footer .text-gray-300 { color: rgba(255,255,255,0.7) !important; } /* ───────────────────────────────────────────────────────────────────── ORDER TRACKER: Status step circles ───────────────────────────────────────────────────────────────────── */ [data-store-theme] .border-transparent[style*="background"] { /* Active/done steps already use primary color */ } [data-store-theme] .bg-white.border-gray-200 { background: var(--s-surface) !important; border-color: var(--s-border) !important; } /* ───────────────────────────────────────────────────────────────────── MARBLE THEME: Signature clean overrides ───────────────────────────────────────────────────────────────────── */ [data-store-theme="marble"] .text-gray-900, [data-store-theme="marble"] .text-gray-800 { color: #1a1a1a !important; } [data-store-theme="marble"] .border-gray-100 { border-color: rgba(0,0,0,0.06) !important; } [data-store-theme="marble"] .bg-gray-50 { background: #f5f5f5 !important; } /* ───────────────────────────────────────────────────────────────────── TROPICAL: Crisp green elements ───────────────────────────────────────────────────────────────────── */ [data-store-theme="tropical"] .bg-gray-50 { background: #ecfdf5 !important; } [data-store-theme="tropical"] .border-gray-100 { border-color: rgba(22,163,74,0.1) !important; } /* ───────────────────────────────────────────────────────────────────── SAKURA: Soft pink elements ───────────────────────────────────────────────────────────────────── */ [data-store-theme="sakura"] .bg-gray-50 { background: #fff0f7 !important; } [data-store-theme="sakura"] .border-gray-100 { border-color: rgba(236,72,153,0.1) !important; } /* ───────────────────────────────────────────────────────────────────── DESERT: Warm sandy tones ───────────────────────────────────────────────────────────────────── */ [data-store-theme="desert"] .bg-gray-50 { background: #fef9e7 !important; } [data-store-theme="desert"] .border-gray-100 { border-color: rgba(217,119,6,0.1) !important; } /* ══ Store utility classes mapping ══ */ [data-store-theme] .store-text-main { color: var(--s-text) !important; } [data-store-theme] .store-text-dark { color: color-mix(in srgb, var(--s-text) 90%, transparent) !important; } [data-store-theme] .store-text-secondary { color: color-mix(in srgb, var(--s-text) 70%, transparent) !important; } [data-store-theme] .store-text-muted { color: var(--s-text-muted) !important; } [data-store-theme] .store-text-faint { color: color-mix(in srgb, var(--s-text-muted) 60%, transparent) !important; } [data-store-theme] .store-surface { background: var(--s-surface) !important; } [data-store-theme] .store-surface-2 { background: var(--s-surface-2) !important; } [data-store-theme] .store-surface-3 { background: color-mix(in srgb, var(--s-border) 30%, var(--s-surface)) !important; } [data-store-theme] .store-border { border-color: var(--s-border) !important; } [data-store-theme] .store-border-faint { border-color: color-mix(in srgb, var(--s-border) 50%, transparent) !important; }