/* ─── OTT Store — 22 Theme Definitions ─────────────────────────────────────── */ /* Applied via: */ /* Each theme sets these variables used throughout store CSS: */ /* --th-bg page background */ /* --th-hero-bg hero radial/gradient overlay */ /* --th-card card bg (semi-transparent for glass) */ /* --th-card-solid opaque card bg */ /* --th-border border color */ /* --th-accent primary accent */ /* --th-accent-end gradient end color */ /* --th-text main text */ /* --th-muted secondary text */ /* --th-glow accent glow (box-shadow) */ /* --th-btn button gradient */ /* --th-blob1/2/3 hero background blob colors */ /* --th-nav-bg navbar backdrop */ /* --th-badge-bg gradient for feature badges */ /* --th-stat-bg stats card tint */ /* --th-step-bg how-it-works step tint */ /* --th-faq-bg faq row bg */ /* ──────────────────────────────────────────────────────────────────────────── */ /* ── 1. Midnight Purple (default) ─────────────────────────────────────────── */ [data-store-theme="midnight-purple"] { --th-bg: #080b14; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #1e0a3c 0%, #080b14 65%); --th-card: rgba(255,255,255,.04); --th-card-solid: #0e1020; --th-border: rgba(255,255,255,.09); --th-accent: #7c3aed; --th-accent-end: #4f46e5; --th-accent-pop: #06b6d4; --th-text: #f1f5f9; --th-muted: #94a3b8; --th-glow: rgba(124,58,237,.45); --th-btn: linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%); --th-blob1: rgba(124,58,237,.18); --th-blob2: rgba(6,182,212,.12); --th-blob3: rgba(236,72,153,.09); --th-nav-bg: rgba(8,11,20,.88); --th-badge-bg: linear-gradient(135deg,#7c3aed,#ec4899); --th-stat-bg: rgba(124,58,237,.08); --th-step-bg: rgba(124,58,237,.1); --th-faq-bg: rgba(255,255,255,.03); --th-hero-line: #c4b5fd; --th-dark: 1; } /* ── 2. Neon Dark ─────────────────────────────────────────────────────────── */ [data-store-theme="neon-dark"] { --th-bg: #030a0d; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #001a1f 0%, #030a0d 65%); --th-card: rgba(0,255,200,.03); --th-card-solid: #071012; --th-border: rgba(0,255,180,.12); --th-accent: #00ffc6; --th-accent-end: #00b8ff; --th-accent-pop: #ff00aa; --th-text: #e0fff8; --th-muted: #7ecdc0; --th-glow: rgba(0,255,198,.4); --th-btn: linear-gradient(135deg,#00ffc6 0%,#00b8ff 100%); --th-blob1: rgba(0,255,198,.15); --th-blob2: rgba(0,184,255,.1); --th-blob3: rgba(255,0,170,.07); --th-nav-bg: rgba(3,10,13,.9); --th-badge-bg: linear-gradient(135deg,#00ffc6,#00b8ff); --th-stat-bg: rgba(0,255,198,.06); --th-step-bg: rgba(0,255,198,.07); --th-faq-bg: rgba(0,255,198,.025); --th-hero-line: #00ffc6; --th-dark: 1; } /* ── 3. Ocean Deep ────────────────────────────────────────────────────────── */ [data-store-theme="ocean-deep"] { --th-bg: #030d1a; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #001f40 0%, #030d1a 65%); --th-card: rgba(0,100,200,.05); --th-card-solid: #071525; --th-border: rgba(30,144,255,.14); --th-accent: #1d9bf0; --th-accent-end: #0066cc; --th-accent-pop: #00d4ff; --th-text: #e2f4ff; --th-muted: #7db8d8; --th-glow: rgba(29,155,240,.45); --th-btn: linear-gradient(135deg,#1d9bf0 0%,#0052cc 100%); --th-blob1: rgba(29,155,240,.15); --th-blob2: rgba(0,212,255,.1); --th-blob3: rgba(0,82,204,.1); --th-nav-bg: rgba(3,13,26,.9); --th-badge-bg: linear-gradient(135deg,#1d9bf0,#00d4ff); --th-stat-bg: rgba(29,155,240,.08); --th-step-bg: rgba(0,212,255,.08); --th-faq-bg: rgba(29,155,240,.04); --th-hero-line: #7dd3fc; --th-dark: 1; } /* ── 4. Cosmic Space ──────────────────────────────────────────────────────── */ [data-store-theme="cosmic"] { --th-bg: #020408; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #0d0830 0%, #020408 65%); --th-card: rgba(255,255,255,.03); --th-card-solid: #06080f; --th-border: rgba(99,102,241,.15); --th-accent: #818cf8; --th-accent-end: #6366f1; --th-accent-pop: #c084fc; --th-text: #f0f0ff; --th-muted: #9090c0; --th-glow: rgba(129,140,248,.45); --th-btn: linear-gradient(135deg,#818cf8 0%,#6366f1 100%); --th-blob1: rgba(99,102,241,.18); --th-blob2: rgba(192,132,252,.1); --th-blob3: rgba(236,72,153,.07); --th-nav-bg: rgba(2,4,8,.9); --th-badge-bg: linear-gradient(135deg,#818cf8,#c084fc); --th-stat-bg: rgba(129,140,248,.07); --th-step-bg: rgba(129,140,248,.08); --th-faq-bg: rgba(129,140,248,.03); --th-hero-line: #c4b5fd; --th-dark: 1; } /* ── 5. Sunset Glow ───────────────────────────────────────────────────────── */ [data-store-theme="sunset-glow"] { --th-bg: #0d0407; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #2d0a00 0%, #0d0407 65%); --th-card: rgba(255,100,0,.04); --th-card-solid: #140508; --th-border: rgba(251,113,48,.14); --th-accent: #f97316; --th-accent-end: #ec4899; --th-accent-pop: #fbbf24; --th-text: #fff1ec; --th-muted: #c4845a; --th-glow: rgba(249,115,22,.45); --th-btn: linear-gradient(135deg,#f97316 0%,#ec4899 100%); --th-blob1: rgba(249,115,22,.18); --th-blob2: rgba(236,72,153,.12); --th-blob3: rgba(251,191,36,.1); --th-nav-bg: rgba(13,4,7,.9); --th-badge-bg: linear-gradient(135deg,#f97316,#ec4899); --th-stat-bg: rgba(249,115,22,.08); --th-step-bg: rgba(249,115,22,.09); --th-faq-bg: rgba(249,115,22,.04); --th-hero-line: #fdba74; --th-dark: 1; } /* ── 6. Forest Dark ───────────────────────────────────────────────────────── */ [data-store-theme="forest-dark"] { --th-bg: #040d06; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #062010 0%, #040d06 65%); --th-card: rgba(0,200,80,.04); --th-card-solid: #071009; --th-border: rgba(34,197,94,.13); --th-accent: #22c55e; --th-accent-end: #15803d; --th-accent-pop: #86efac; --th-text: #ecfdf5; --th-muted: #6aad7a; --th-glow: rgba(34,197,94,.4); --th-btn: linear-gradient(135deg,#22c55e 0%,#15803d 100%); --th-blob1: rgba(34,197,94,.16); --th-blob2: rgba(134,239,172,.1); --th-blob3: rgba(5,150,105,.1); --th-nav-bg: rgba(4,13,6,.9); --th-badge-bg: linear-gradient(135deg,#22c55e,#06b6d4); --th-stat-bg: rgba(34,197,94,.07); --th-step-bg: rgba(34,197,94,.08); --th-faq-bg: rgba(34,197,94,.03); --th-hero-line: #86efac; --th-dark: 1; } /* ── 7. Royal Gold ────────────────────────────────────────────────────────── */ [data-store-theme="royal-gold"] { --th-bg: #090600; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #1e1000 0%, #090600 65%); --th-card: rgba(255,200,0,.04); --th-card-solid: #0f0a01; --th-border: rgba(245,158,11,.13); --th-accent: #f59e0b; --th-accent-end: #d97706; --th-accent-pop: #fde68a; --th-text: #fffbeb; --th-muted: #b08030; --th-glow: rgba(245,158,11,.45); --th-btn: linear-gradient(135deg,#f59e0b 0%,#b45309 100%); --th-blob1: rgba(245,158,11,.18); --th-blob2: rgba(253,230,138,.1); --th-blob3: rgba(180,83,9,.12); --th-nav-bg: rgba(9,6,0,.9); --th-badge-bg: linear-gradient(135deg,#f59e0b,#ef4444); --th-stat-bg: rgba(245,158,11,.08); --th-step-bg: rgba(245,158,11,.09); --th-faq-bg: rgba(245,158,11,.04); --th-hero-line: #fde68a; --th-dark: 1; } /* ── 8. Rose Noir ─────────────────────────────────────────────────────────── */ [data-store-theme="rose-noir"] { --th-bg: #0d0409; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #2a0519 0%, #0d0409 65%); --th-card: rgba(244,63,94,.04); --th-card-solid: #130509; --th-border: rgba(244,63,94,.14); --th-accent: #f43f5e; --th-accent-end: #e11d48; --th-accent-pop: #fb7185; --th-text: #fff1f5; --th-muted: #c06880; --th-glow: rgba(244,63,94,.45); --th-btn: linear-gradient(135deg,#f43f5e 0%,#9f1239 100%); --th-blob1: rgba(244,63,94,.18); --th-blob2: rgba(251,113,133,.1); --th-blob3: rgba(192,38,211,.09); --th-nav-bg: rgba(13,4,9,.9); --th-badge-bg: linear-gradient(135deg,#f43f5e,#c026d3); --th-stat-bg: rgba(244,63,94,.07); --th-step-bg: rgba(244,63,94,.08); --th-faq-bg: rgba(244,63,94,.03); --th-hero-line: #fda4af; --th-dark: 1; } /* ── 9. Arctic Light ──────────────────────────────────────────────────────── */ [data-store-theme="arctic-light"] { --th-bg: #f0f6ff; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #dbeafe 0%, #f0f6ff 65%); --th-card: rgba(255,255,255,.8); --th-card-solid: #ffffff; --th-border: rgba(30,100,220,.14); --th-accent: #2563eb; --th-accent-end: #7c3aed; --th-accent-pop: #06b6d4; --th-text: #0f172a; --th-muted: #475569; --th-glow: rgba(37,99,235,.25); --th-btn: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%); --th-blob1: rgba(37,99,235,.12); --th-blob2: rgba(124,58,237,.08); --th-blob3: rgba(6,182,212,.08); --th-nav-bg: rgba(240,246,255,.92); --th-badge-bg: linear-gradient(135deg,#2563eb,#7c3aed); --th-stat-bg: rgba(37,99,235,.06); --th-step-bg: rgba(37,99,235,.07); --th-faq-bg: rgba(37,99,235,.04); --th-hero-line: #2563eb; --th-dark: 0; } /* ── 10. Sakura ───────────────────────────────────────────────────────────── */ [data-store-theme="sakura"] { --th-bg: #fff5f8; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #ffe4ee 0%, #fff5f8 65%); --th-card: rgba(255,255,255,.85); --th-card-solid: #ffffff; --th-border: rgba(236,72,153,.15); --th-accent: #ec4899; --th-accent-end: #db2777; --th-accent-pop: #f472b6; --th-text: #1a0a12; --th-muted: #9d4a6e; --th-glow: rgba(236,72,153,.25); --th-btn: linear-gradient(135deg,#ec4899 0%,#a21caf 100%); --th-blob1: rgba(236,72,153,.12); --th-blob2: rgba(244,114,182,.09); --th-blob3: rgba(168,85,247,.07); --th-nav-bg: rgba(255,245,248,.92); --th-badge-bg: linear-gradient(135deg,#ec4899,#8b5cf6); --th-stat-bg: rgba(236,72,153,.07); --th-step-bg: rgba(236,72,153,.08); --th-faq-bg: rgba(236,72,153,.04); --th-hero-line: #ec4899; --th-dark: 0; } /* ── 11. Slate Minimal ────────────────────────────────────────────────────── */ [data-store-theme="slate-minimal"] { --th-bg: #0c0e11; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #1a1d24 0%, #0c0e11 65%); --th-card: rgba(255,255,255,.04); --th-card-solid: #13151a; --th-border: rgba(255,255,255,.08); --th-accent: #6366f1; --th-accent-end: #4f46e5; --th-accent-pop: #a5b4fc; --th-text: #f8fafc; --th-muted: #64748b; --th-glow: rgba(99,102,241,.4); --th-btn: linear-gradient(135deg,#6366f1 0%,#4338ca 100%); --th-blob1: rgba(99,102,241,.12); --th-blob2: rgba(165,180,252,.07); --th-blob3: rgba(99,102,241,.07); --th-nav-bg: rgba(12,14,17,.9); --th-badge-bg: linear-gradient(135deg,#6366f1,#a855f7); --th-stat-bg: rgba(99,102,241,.07); --th-step-bg: rgba(99,102,241,.08); --th-faq-bg: rgba(255,255,255,.025); --th-hero-line: #a5b4fc; --th-dark: 1; } /* ── 12. Cyberpunk ────────────────────────────────────────────────────────── */ [data-store-theme="cyberpunk"] { --th-bg: #05020f; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #10001a 0%, #05020f 65%); --th-card: rgba(255,255,0,.03); --th-card-solid: #0a0515; --th-border: rgba(255,220,0,.12); --th-accent: #facc15; --th-accent-end: #f97316; --th-accent-pop: #f0abfc; --th-text: #fefce8; --th-muted: #a0906a; --th-glow: rgba(250,204,21,.45); --th-btn: linear-gradient(135deg,#facc15 0%,#f97316 100%); --th-blob1: rgba(250,204,21,.14); --th-blob2: rgba(240,171,252,.1); --th-blob3: rgba(249,115,22,.09); --th-nav-bg: rgba(5,2,15,.9); --th-badge-bg: linear-gradient(135deg,#facc15,#f0abfc); --th-stat-bg: rgba(250,204,21,.07); --th-step-bg: rgba(250,204,21,.08); --th-faq-bg: rgba(250,204,21,.03); --th-hero-line: #fef08a; --th-dark: 1; } /* ── 13. Aurora Teal ──────────────────────────────────────────────────────── */ [data-store-theme="aurora-teal"] { --th-bg: #030f0e; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #061e1c 0%, #030f0e 65%); --th-card: rgba(20,184,166,.04); --th-card-solid: #061413; --th-border: rgba(20,184,166,.13); --th-accent: #14b8a6; --th-accent-end: #0f766e; --th-accent-pop: #2dd4bf; --th-text: #f0fdfa; --th-muted: #5fb3a8; --th-glow: rgba(20,184,166,.42); --th-btn: linear-gradient(135deg,#14b8a6 0%,#0e7490 100%); --th-blob1: rgba(20,184,166,.17); --th-blob2: rgba(45,212,191,.1); --th-blob3: rgba(6,182,212,.1); --th-nav-bg: rgba(3,15,14,.9); --th-badge-bg: linear-gradient(135deg,#14b8a6,#3b82f6); --th-stat-bg: rgba(20,184,166,.07); --th-step-bg: rgba(20,184,166,.08); --th-faq-bg: rgba(20,184,166,.035); --th-hero-line: #5eead4; --th-dark: 1; } /* ── 14. Volcano ──────────────────────────────────────────────────────────── */ [data-store-theme="volcano"] { --th-bg: #0d0300; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #250600 0%, #0d0300 65%); --th-card: rgba(239,68,68,.04); --th-card-solid: #130300; --th-border: rgba(239,68,68,.14); --th-accent: #ef4444; --th-accent-end: #dc2626; --th-accent-pop: #fca5a5; --th-text: #fff1f1; --th-muted: #b05050; --th-glow: rgba(239,68,68,.45); --th-btn: linear-gradient(135deg,#ef4444 0%,#7f1d1d 100%); --th-blob1: rgba(239,68,68,.18); --th-blob2: rgba(249,115,22,.12); --th-blob3: rgba(220,38,38,.1); --th-nav-bg: rgba(13,3,0,.9); --th-badge-bg: linear-gradient(135deg,#ef4444,#f97316); --th-stat-bg: rgba(239,68,68,.08); --th-step-bg: rgba(239,68,68,.08); --th-faq-bg: rgba(239,68,68,.035); --th-hero-line: #fca5a5; --th-dark: 1; } /* ── 15. Lavender Mist ────────────────────────────────────────────────────── */ [data-store-theme="lavender-mist"] { --th-bg: #faf5ff; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #ede9fe 0%, #faf5ff 65%); --th-card: rgba(255,255,255,.85); --th-card-solid: #ffffff; --th-border: rgba(139,92,246,.16); --th-accent: #8b5cf6; --th-accent-end: #7c3aed; --th-accent-pop: #a78bfa; --th-text: #1e1030; --th-muted: #6b5b95; --th-glow: rgba(139,92,246,.25); --th-btn: linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%); --th-blob1: rgba(139,92,246,.12); --th-blob2: rgba(167,139,250,.09); --th-blob3: rgba(236,72,153,.07); --th-nav-bg: rgba(250,245,255,.92); --th-badge-bg: linear-gradient(135deg,#8b5cf6,#ec4899); --th-stat-bg: rgba(139,92,246,.07); --th-step-bg: rgba(139,92,246,.08); --th-faq-bg: rgba(139,92,246,.05); --th-hero-line: #8b5cf6; --th-dark: 0; } /* ── 16. Navy Classic ─────────────────────────────────────────────────────── */ [data-store-theme="navy-classic"] { --th-bg: #020a1a; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #041030 0%, #020a1a 65%); --th-card: rgba(30,80,200,.05); --th-card-solid: #040e24; --th-border: rgba(59,130,246,.14); --th-accent: #3b82f6; --th-accent-end: #1d4ed8; --th-accent-pop: #93c5fd; --th-text: #f0f4ff; --th-muted: #6080b0; --th-glow: rgba(59,130,246,.42); --th-btn: linear-gradient(135deg,#3b82f6 0%,#1e3a8a 100%); --th-blob1: rgba(59,130,246,.15); --th-blob2: rgba(147,197,253,.09); --th-blob3: rgba(99,102,241,.1); --th-nav-bg: rgba(2,10,26,.9); --th-badge-bg: linear-gradient(135deg,#3b82f6,#8b5cf6); --th-stat-bg: rgba(59,130,246,.07); --th-step-bg: rgba(59,130,246,.08); --th-faq-bg: rgba(59,130,246,.035); --th-hero-line: #93c5fd; --th-dark: 1; } /* ── 17. Emerald City ─────────────────────────────────────────────────────── */ [data-store-theme="emerald-city"] { --th-bg: #020d08; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #041a0e 0%, #020d08 65%); --th-card: rgba(16,185,129,.04); --th-card-solid: #04110a; --th-border: rgba(16,185,129,.13); --th-accent: #10b981; --th-accent-end: #059669; --th-accent-pop: #6ee7b7; --th-text: #f0fdf4; --th-muted: #4a9a72; --th-glow: rgba(16,185,129,.42); --th-btn: linear-gradient(135deg,#10b981 0%,#065f46 100%); --th-blob1: rgba(16,185,129,.16); --th-blob2: rgba(110,231,183,.1); --th-blob3: rgba(5,150,105,.1); --th-nav-bg: rgba(2,13,8,.9); --th-badge-bg: linear-gradient(135deg,#10b981,#3b82f6); --th-stat-bg: rgba(16,185,129,.07); --th-step-bg: rgba(16,185,129,.08); --th-faq-bg: rgba(16,185,129,.04); --th-hero-line: #6ee7b7; --th-dark: 1; } /* ── 18. Crystal Clean ────────────────────────────────────────────────────── */ [data-store-theme="crystal-clean"] { --th-bg: #f8faff; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #e8f0ff 0%, #f8faff 65%); --th-card: rgba(255,255,255,.9); --th-card-solid: #ffffff; --th-border: rgba(100,100,255,.12); --th-accent: #4f46e5; --th-accent-end: #7c3aed; --th-accent-pop: #818cf8; --th-text: #0f0f2d; --th-muted: #6060a0; --th-glow: rgba(79,70,229,.22); --th-btn: linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%); --th-blob1: rgba(79,70,229,.1); --th-blob2: rgba(139,92,246,.07); --th-blob3: rgba(6,182,212,.07); --th-nav-bg: rgba(248,250,255,.95); --th-badge-bg: linear-gradient(135deg,#4f46e5,#06b6d4); --th-stat-bg: rgba(79,70,229,.05); --th-step-bg: rgba(79,70,229,.06); --th-faq-bg: rgba(79,70,229,.04); --th-hero-line: #4f46e5; --th-dark: 0; } /* ── 19. Obsidian Gold ────────────────────────────────────────────────────── */ [data-store-theme="obsidian-gold"] { --th-bg: #020200; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #120d00 0%, #020200 65%); --th-card: rgba(255,200,0,.03); --th-card-solid: #080700; --th-border: rgba(212,175,55,.14); --th-accent: #d4af37; --th-accent-end: #b8860b; --th-accent-pop: #ffd700; --th-text: #fffef0; --th-muted: #997a20; --th-glow: rgba(212,175,55,.45); --th-btn: linear-gradient(135deg,#d4af37 0%,#8b6914 100%); --th-blob1: rgba(212,175,55,.17); --th-blob2: rgba(255,215,0,.1); --th-blob3: rgba(184,134,11,.1); --th-nav-bg: rgba(2,2,0,.92); --th-badge-bg: linear-gradient(135deg,#d4af37,#ef4444); --th-stat-bg: rgba(212,175,55,.07); --th-step-bg: rgba(212,175,55,.08); --th-faq-bg: rgba(212,175,55,.03); --th-hero-line: #ffd700; --th-dark: 1; } /* ── 20. Electric Blue ────────────────────────────────────────────────────── */ [data-store-theme="electric-blue"] { --th-bg: #010512; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #020d30 0%, #010512 65%); --th-card: rgba(0,100,255,.04); --th-card-solid: #02071a; --th-border: rgba(0,140,255,.14); --th-accent: #0080ff; --th-accent-end: #00ccff; --th-accent-pop: #60c8ff; --th-text: #e8f4ff; --th-muted: #4080b0; --th-glow: rgba(0,128,255,.5); --th-btn: linear-gradient(135deg,#0080ff 0%,#00ccff 100%); --th-blob1: rgba(0,128,255,.18); --th-blob2: rgba(0,204,255,.12); --th-blob3: rgba(0,60,200,.1); --th-nav-bg: rgba(1,5,18,.9); --th-badge-bg: linear-gradient(135deg,#0080ff,#00ccff); --th-stat-bg: rgba(0,128,255,.08); --th-step-bg: rgba(0,128,255,.09); --th-faq-bg: rgba(0,128,255,.04); --th-hero-line: #60c8ff; --th-dark: 1; } /* ── 21. Crimson Tide ─────────────────────────────────────────────────────── */ [data-store-theme="crimson-tide"] { --th-bg: #0e0003; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #200008 0%, #0e0003 65%); --th-card: rgba(185,28,28,.04); --th-card-solid: #130004; --th-border: rgba(185,28,28,.15); --th-accent: #b91c1c; --th-accent-end: #991b1b; --th-accent-pop: #fca5a5; --th-text: #fff5f5; --th-muted: #a05060; --th-glow: rgba(185,28,28,.45); --th-btn: linear-gradient(135deg,#b91c1c 0%,#7f1d1d 100%); --th-blob1: rgba(185,28,28,.18); --th-blob2: rgba(220,38,38,.12); --th-blob3: rgba(239,68,68,.09); --th-nav-bg: rgba(14,0,3,.9); --th-badge-bg: linear-gradient(135deg,#b91c1c,#f97316); --th-stat-bg: rgba(185,28,28,.07); --th-step-bg: rgba(185,28,28,.08); --th-faq-bg: rgba(185,28,28,.035); --th-hero-line: #fca5a5; --th-dark: 1; } /* ── 22. Teal Ocean ───────────────────────────────────────────────────────── */ [data-store-theme="teal-ocean"] { --th-bg: #020e10; --th-hero-bg: radial-gradient(ellipse 130% 70% at 50% -5%, #041c20 0%, #020e10 65%); --th-card: rgba(8,145,178,.04); --th-card-solid: #041416; --th-border: rgba(8,145,178,.13); --th-accent: #0891b2; --th-accent-end: #0e7490; --th-accent-pop: #67e8f9; --th-text: #ecfeff; --th-muted: #4090a0; --th-glow: rgba(8,145,178,.43); --th-btn: linear-gradient(135deg,#0891b2 0%,#0e4f66 100%); --th-blob1: rgba(8,145,178,.17); --th-blob2: rgba(103,232,249,.1); --th-blob3: rgba(20,184,166,.1); --th-nav-bg: rgba(2,14,16,.9); --th-badge-bg: linear-gradient(135deg,#0891b2,#8b5cf6); --th-stat-bg: rgba(8,145,178,.07); --th-step-bg: rgba(8,145,178,.08); --th-faq-bg: rgba(8,145,178,.04); --th-hero-line: #67e8f9; --th-dark: 1; } /* ── 23. MovieVerse (cinematic gold/red/purple) ───────────────────────────── */ /* Colors lifted from the MovieVerse preview file: */ /* gold #ffd36a · red #ff2a4d · purple #8d5cff · orange #ff8b22 */ [data-store-theme="movieverse"] { --th-bg: #050814; --th-hero-bg: radial-gradient(circle at 15% 6%, rgba(43,111,255,.32), transparent 30%), radial-gradient(circle at 86% 14%, rgba(141,92,255,.26), transparent 30%), radial-gradient(circle at 50% 92%, rgba(255,211,106,.18), transparent 32%), linear-gradient(180deg, #050814 0%, #0b0f22 55%, #04060f 100%); --th-card: rgba(255,255,255,.08); --th-card-solid: #0a0c1a; --th-border: rgba(255,255,255,.16); --th-accent: #2b6fff; --th-accent-end: #8d5cff; --th-accent-pop: #ffd36a; --th-text: #f4f7ff; --th-muted: #aab4cf; --th-glow: rgba(255,211,106,.35); --th-btn: linear-gradient(135deg,#2b6fff 0%,#8d5cff 100%); --th-blob1: rgba(43,111,255,.20); --th-blob2: rgba(141,92,255,.16); --th-blob3: rgba(255,211,106,.14); --th-nav-bg: rgba(6,10,24,.66); --th-badge-bg: linear-gradient(135deg,#ffd36a,#f0a51e); --th-stat-bg: rgba(255,255,255,.075); --th-step-bg: rgba(255,255,255,.065); --th-faq-bg: rgba(255,255,255,.05); --th-hero-line: #ffd36a; --th-dark: 1; } /* MovieVerse-specific decorative layers: gold-button variant + cinema accents. These apply on top of any storefront page when the theme is active. */ [data-store-theme="movieverse"] body::before { /* film grain overlay */ content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); } [data-store-theme="movieverse"] .btn-gold, [data-store-theme="movieverse"] .nav-account, [data-store-theme="movieverse"] .snav-login { color: #1b0d02 !important; background: linear-gradient(135deg, #ffd36a, #f0a51e) !important; box-shadow: 0 22px 60px rgba(255,211,106,.25) !important; } /* ── MovieVerse overrides for plans.html storefront vars (st-*) ─────────────── */ /* plans.html uses --st-* tokens (declared in store-theme.css). Remap them to the MovieVerse palette so the existing markup gets cinematic colors. */ [data-store-theme="movieverse"] { --st-bg: #050814; --st-card: rgba(255,255,255,.08); --st-card-solid: #0a0c1a; --st-border: rgba(255,255,255,.16); --st-accent: #2b6fff; --st-accent-end: #8d5cff; --st-text: #f4f7ff; --st-muted: #aab4cf; --st-btn: linear-gradient(135deg,#2b6fff 0%,#8d5cff 100%); --st-nav: rgba(6,10,24,.66); /* re-tint store-theme.css base tokens too */ --bg: #050814; --text: #f4f7ff; --muted: #aab4cf; --red: #2b6fff; --orange: #8d5cff; --purple: #8d5cff; --header-bg: rgba(6,10,24,.72); --card: rgba(255,255,255,.08); --card-solid: #0a0c1a; --border: rgba(255,255,255,.16); --glass: rgba(255,255,255,.075); --glass2: rgba(255,255,255,.12); } /* MovieVerse body gradient — replace the default red/cyan/purple radial mix with a gold/red/purple cinema gradient. */ [data-store-theme="movieverse"] body { background: radial-gradient(circle at 15% 6%, rgba(43,111,255,.32), transparent 30%), radial-gradient(circle at 86% 14%, rgba(141,92,255,.26), transparent 30%), radial-gradient(circle at 50% 92%, rgba(255,211,106,.18), transparent 32%), linear-gradient(180deg,#050814 0%, #0b0f22 55%, #04060f 100%) !important; } /* Plans grid: poster-style cards on plans.html. plans.html uses .st-card / .plan-card / .plan-grid classes. */ [data-store-theme="movieverse"] .st-card, [data-store-theme="movieverse"] .plan-card, [data-store-theme="movieverse"] .plan-item { background: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.052)) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 26px !important; backdrop-filter: blur(18px); box-shadow: 0 22px 75px rgba(0,0,0,.24); } [data-store-theme="movieverse"] .plan-card:hover, [data-store-theme="movieverse"] .plan-item:hover { border-color: rgba(255,211,106,.4) !important; transform: translateY(-4px); } /* Price text in MovieVerse → gold */ [data-store-theme="movieverse"] .plan-price, [data-store-theme="movieverse"] .price, [data-store-theme="movieverse"] .grad-text { background: linear-gradient(135deg,#ffd36a,#f0a51e) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Buy / primary buttons stay red→orange (already correct via --th-btn) but force the gradient on .btn.primary too */ [data-store-theme="movieverse"] .btn.primary, [data-store-theme="movieverse"] .btn-primary { background: linear-gradient(135deg,#2b6fff,#8d5cff) !important; box-shadow: 0 22px 60px rgba(43,111,255,.35) !important; color: #fff !important; } /* ── MovieVerse overrides for /my (my.html) ──────────────────────────────── */ /* my.html uses --header-bg / --card / --grad-1 / --grad-2 / --grad-3 tokens. The token remaps above cover most; the gradients need explicit re-aliasing. */ [data-store-theme="movieverse"] { --grad-1: #2b6fff; --grad-2: #8d5cff; --grad-3: #8d5cff; } [data-store-theme="movieverse"] .dash-hero { background: radial-gradient(circle at 14% 20%, rgba(43,111,255,.30), transparent 40%), radial-gradient(circle at 86% 16%, rgba(255,211,106,.20), transparent 40%), rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; } [data-store-theme="movieverse"] .my-stat-card { background: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.052)) !important; } [data-store-theme="movieverse"] .my-topup-m { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.13) !important; } [data-store-theme="movieverse"] .my-topup-m:hover { border-color: rgba(255,211,106,.4) !important; } /* ── MovieVerse overrides for server-rendered legal / blog / about / contact / privacy / terms / refund pages (uses --sp-* tokens) ───────────── */ [data-store-theme="movieverse"] { --sp-bg: #050814; --sp-card: rgba(255,255,255,.08); --sp-card2: rgba(255,255,255,.12); --sp-border: rgba(255,255,255,.16); --sp-text: #f4f7ff; --sp-muted: #aab4cf; --sp-nav: rgba(6,10,24,.78); --sp-accent: #2b6fff; --sp-accent2: #8d5cff; --sp-btn: linear-gradient(135deg,#2b6fff,#8d5cff); } /* Cinematic background gradient for those server-rendered pages too */ [data-store-theme="movieverse"] body { background: radial-gradient(circle at 15% 6%, rgba(43,111,255,.32), transparent 30%), radial-gradient(circle at 86% 14%, rgba(141,92,255,.26), transparent 30%), radial-gradient(circle at 50% 92%, rgba(255,211,106,.18), transparent 32%), linear-gradient(180deg,#050814 0%, #0b0f22 55%, #04060f 100%) !important; } /* Legal / About / Contact / Privacy / Terms / Refund — glass document card */ [data-store-theme="movieverse"] .legal-page, [data-store-theme="movieverse"] .blog-post-page { background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 28px !important; padding: 2.5rem 2rem !important; backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0,0,0,.32); margin-top: 2rem; } [data-store-theme="movieverse"] .legal-page h1, [data-store-theme="movieverse"] .blog-post-page h1 { background: linear-gradient(135deg,#ffd36a,#f0a51e) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; letter-spacing: -1.5px; } [data-store-theme="movieverse"] .legal-body, [data-store-theme="movieverse"] .blog-body { color: #ddd2e5; } [data-store-theme="movieverse"] .legal-updated { color: #aab4cf; font-size: .8rem; opacity: .7; margin-bottom: 1.25rem; } /* Blog grid → poster-style cards */ [data-store-theme="movieverse"] .blog-card { background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)) !important; border-radius: 24px !important; border: 1px solid rgba(255,255,255,.16) !important; } [data-store-theme="movieverse"] .blog-card:hover { border-color: rgba(255,211,106,.4) !important; box-shadow: 0 18px 50px rgba(43,111,255,.22) !important; } [data-store-theme="movieverse"] .blog-card h2 a { color: #f4f7ff !important; } [data-store-theme="movieverse"] .blog-page-header h1 { background: linear-gradient(90deg,#fff,#ffd36a 50%,#fff) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* sp-nav (the shared header on legal/blog/about/contact pages) */ [data-store-theme="movieverse"] .sp-nav { background: rgba(6,10,24,.78) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; } [data-store-theme="movieverse"] .sp-logo, [data-store-theme="movieverse"] .sp-footer-brand { background: linear-gradient(135deg,#ffd36a,#f0a51e) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-store-theme="movieverse"] .sp-links .sp-cta { background: linear-gradient(135deg,#2b6fff,#8d5cff) !important; box-shadow: 0 8px 24px rgba(43,111,255,.32) !important; } /* ── MovieVerse overrides for /my SPA — auth, dashboard, orders, checkout ── */ [data-store-theme="movieverse"] .my-auth-card { background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 32px !important; box-shadow: 0 34px 100px rgba(0,0,0,.45) !important; backdrop-filter: blur(22px); } [data-store-theme="movieverse"] .my-auth-logo .al-icon { background: linear-gradient(135deg,#2b6fff,#ffd36a) !important; box-shadow: 0 18px 50px rgba(43,111,255,.35), inset 0 2px 14px rgba(255,255,255,.3) !important; } [data-store-theme="movieverse"] .mam-btn.active, [data-store-theme="movieverse"] .my-tab-btn.active { color: #ffd36a !important; border-bottom-color: #ffd36a !important; } [data-store-theme="movieverse"] .my-bnav-btn.active { color: #ffd36a !important; } /* /my Quick Action tiles */ [data-store-theme="movieverse"] .my-qa-tile { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; transition: transform .2s, border-color .2s; } [data-store-theme="movieverse"] .my-qa-tile:hover { border-color: rgba(255,211,106,.45) !important; transform: translateY(-3px); } [data-store-theme="movieverse"] .my-qa-icon-wrap { background: linear-gradient(135deg,#2b6fff,#8d5cff) !important; } /* Order rows + plan tiles inside /my */ [data-store-theme="movieverse"] .my-order, [data-store-theme="movieverse"] .my-plan-card, [data-store-theme="movieverse"] .my-order-item { background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 18px !important; } [data-store-theme="movieverse"] .my-plan-card:hover { border-color: rgba(255,211,106,.4) !important; } /* Form inputs everywhere */ [data-store-theme="movieverse"] .form-input, [data-store-theme="movieverse"] input.my-input, [data-store-theme="movieverse"] textarea.form-input { background: rgba(255,255,255,.06) !important; border: 1.5px solid rgba(255,255,255,.18) !important; color: #f4f7ff !important; } [data-store-theme="movieverse"] .form-input:focus { border-color: #ffd36a !important; box-shadow: 0 0 0 3px rgba(255,211,106,.15) !important; } /* Checkout modal */ [data-store-theme="movieverse"] .modal-overlay { background: rgba(0,0,0,.78) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Modal needs a solid, opaque base so page content can't bleed through and kill text contrast. The cinema gradient sits ON TOP of the solid base. */ [data-store-theme="movieverse"] .modal { background: #0a0c1a linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important; border: 1px solid rgba(255,211,106,.22) !important; border-radius: 28px !important; box-shadow: 0 34px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset !important; color: #f4f7ff !important; } [data-store-theme="movieverse"] .modal-header h3, [data-store-theme="movieverse"] .modal-body, [data-store-theme="movieverse"] .modal-body div, [data-store-theme="movieverse"] .modal-body span, [data-store-theme="movieverse"] .modal-body strong, [data-store-theme="movieverse"] .modal-body p { color: #f4f7ff !important; } [data-store-theme="movieverse"] .modal-body div[style*="color:var(--muted)"], [data-store-theme="movieverse"] .modal-body span[style*="color:var(--muted)"] { color: #c9c2d9 !important; } [data-store-theme="movieverse"] .modal-footer { background: rgba(0,0,0,.18); } [data-store-theme="movieverse"] .modal-footer .btn-secondary { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #f4f7ff !important; } [data-store-theme="movieverse"] .modal-footer .btn-secondary:hover { background: rgba(255,211,106,.18) !important; border-color: rgba(255,211,106,.4) !important; } /* Alerts (info / success / warn / error) */ [data-store-theme="movieverse"] .alert-info { background: rgba(141,92,255,.12) !important; border: 1px solid rgba(141,92,255,.32) !important; color: #e8defe !important; } [data-store-theme="movieverse"] .alert-success { background: rgba(52,245,155,.12) !important; border: 1px solid rgba(52,245,155,.32) !important; color: #d8ffec !important; } [data-store-theme="movieverse"] .alert-warn { background: rgba(255,211,106,.14) !important; border: 1px solid rgba(255,211,106,.4) !important; color: #ffe9b3 !important; } [data-store-theme="movieverse"] .alert-error { background: rgba(43,111,255,.14) !important; border: 1px solid rgba(43,111,255,.4) !important; color: #ffd0d5 !important; } /* Badges */ [data-store-theme="movieverse"] .badge-active, [data-store-theme="movieverse"] .badge-completed { background: rgba(52,245,155,.16) !important; color: #34f59b !important; border-color: rgba(52,245,155,.32) !important; } [data-store-theme="movieverse"] .badge-pending { background: rgba(255,211,106,.14) !important; color: #ffd36a !important; border-color: rgba(255,211,106,.32) !important; } [data-store-theme="movieverse"] .badge-expired, [data-store-theme="movieverse"] .badge-failed { background: rgba(43,111,255,.14) !important; color: #ff7b92 !important; border-color: rgba(43,111,255,.32) !important; } /* Toasts */ [data-store-theme="movieverse"] .toast { background: linear-gradient(180deg, rgba(20,15,30,.95), rgba(10,8,22,.92)) !important; border: 1px solid rgba(255,211,106,.3) !important; box-shadow: 0 18px 60px rgba(0,0,0,.5) !important; } /* Spinner — gold ring on MovieVerse */ [data-store-theme="movieverse"] .spinner { border-color: rgba(255,255,255,.12) !important; border-top-color: #ffd36a !important; } /* Reduced-motion respect — applies globally inside MovieVerse */ @media (prefers-reduced-motion: reduce) { [data-store-theme="movieverse"] * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ════════════════════════════════════════════════════════════════════════ MovieVerse → premium PURE-BLACK + blue-sparing "liquid glass" retune. Accent from the OTT24x7 logo: blue #2b6fff → violet #8d5cff; gold #ffd36a kept ONLY as a tiny FEATURED pop. Appended last so it wins by source order. ════════════════════════════════════════════════════════════════════════ */ [data-store-theme="movieverse"]{ --th-bg:#0a0a0c; --st-bg:#0a0a0c; --sp-bg:#0a0a0c; --bg:#0a0a0c; --page-bg:#0a0a0c; --th-card:rgba(255,255,255,.06); --st-card:rgba(255,255,255,.06); --card:rgba(255,255,255,.06); --glass:rgba(255,255,255,.05); --glass2:rgba(255,255,255,.1); --th-card-solid:#16171c; --st-card-solid:#16171c; --card-solid:#16171c; --th-border:rgba(255,255,255,.12); --st-border:rgba(255,255,255,.12); --sp-border:rgba(255,255,255,.12); --border:rgba(255,255,255,.12); --th-text:#fff; --st-text:#fff; --sp-text:#fff; --text:#fff; --th-muted:#9a9ba4; --st-muted:#9a9ba4; --sp-muted:#9a9ba4; --muted:#9a9ba4; --th-accent:#2b6fff; --th-accent-end:#8d5cff; --th-accent-pop:#7aa6ff; --btn-ink:#fff; --th-glow:rgba(43,111,255,.30); --th-hero-line:#7aa6ff; --th-blob1:rgba(43,111,255,.16); --th-blob2:rgba(141,92,255,.1); --th-blob3:rgba(43,111,255,.06); --th-btn:linear-gradient(135deg,#2f63ef,#7c4ef0); --st-btn:linear-gradient(135deg,#2f63ef,#7c4ef0); --sp-btn:linear-gradient(135deg,#2f63ef,#7c4ef0); --th-nav-bg:rgba(10,10,14,.72); --st-nav:rgba(10,10,14,.72); --sp-nav:rgba(10,10,14,.78); --header-bg:rgba(10,10,14,.72); --grad-1:#2b6fff; --grad-2:#6a4ff0; --grad-3:#8d5cff; } /* pure-black body + ONE faint blue hero glow (replaces the navy/gold cinema mix) */ [data-store-theme="movieverse"] body{ background:radial-gradient(125% 480px at 50% 0%,rgba(43,111,255,.12),transparent 70%),#000 !important; } [data-store-theme="movieverse"] body::before{opacity:.05 !important} /* prices → blue accent (not gold) */ [data-store-theme="movieverse"] .plan-price, [data-store-theme="movieverse"] .price, [data-store-theme="movieverse"] .grad-text{ background:linear-gradient(135deg,#6ea0ff,#a98bff) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important; } /* headings → white→blue (drop gold) */ [data-store-theme="movieverse"] .legal-page h1, [data-store-theme="movieverse"] .blog-post-page h1, [data-store-theme="movieverse"] .sp-logo, [data-store-theme="movieverse"] .sp-footer-brand, [data-store-theme="movieverse"] .blog-page-header h1{ background:linear-gradient(120deg,#fff,#bcd1ff 60%,#9b8cff) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important; } /* charcoal glass cards (not navy-tinted) */ [data-store-theme="movieverse"] .st-card, [data-store-theme="movieverse"] .plan-card, [data-store-theme="movieverse"] .plan-item{ background:linear-gradient(157deg,rgba(255,255,255,.1),rgba(255,255,255,.04) 30%,rgba(255,255,255,.022)) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16) !important; } /* hover borders → blue (not gold) */ [data-store-theme="movieverse"] .plan-card:hover, [data-store-theme="movieverse"] .plan-item:hover, [data-store-theme="movieverse"] .my-plan-card:hover, [data-store-theme="movieverse"] .my-qa-tile:hover, [data-store-theme="movieverse"] .blog-card:hover{ border-color:rgba(43,111,255,.5) !important; } /* form focus → blue */ [data-store-theme="movieverse"] .form-input:focus, [data-store-theme="movieverse"] input.my-input:focus, [data-store-theme="movieverse"] textarea.form-input:focus{ border-color:#2b6fff !important;box-shadow:0 0 0 3px rgba(43,111,255,.18) !important; } /* /my active tabs → blue (not gold) */ [data-store-theme="movieverse"] .mam-btn.active, [data-store-theme="movieverse"] .my-tab-btn.active{color:#7aa6ff !important;border-bottom-color:#2b6fff !important;} [data-store-theme="movieverse"] .my-bnav-btn.active{color:#7aa6ff !important;} [data-store-theme="movieverse"] .my-auth-logo .al-icon{background:linear-gradient(135deg,#2b6fff,#8d5cff) !important;} [data-store-theme="movieverse"] .dash-hero{background:radial-gradient(circle at 50% 0%,rgba(43,111,255,.22),transparent 55%),#16171c !important;border:1px solid rgba(255,255,255,.12) !important;} /* CTAs that were forced gold → blue→violet primary */ [data-store-theme="movieverse"] .btn-gold, [data-store-theme="movieverse"] .nav-account, [data-store-theme="movieverse"] .snav-login{ color:#fff !important;background:linear-gradient(135deg,#2f63ef,#7c4ef0) !important;box-shadow:0 14px 34px rgba(43,111,255,.34) !important; } /* modal hairline → neutral charcoal */ [data-store-theme="movieverse"] .modal{ background:#16171c linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important; border:1px solid rgba(255,255,255,.14) !important; } [data-store-theme="movieverse"] .modal-footer .btn-secondary:hover{border-color:rgba(43,111,255,.45) !important;background:rgba(43,111,255,.16) !important;} /* status colours kept DISTINCT from the blue accent: error → red */ [data-store-theme="movieverse"] .alert-error, [data-store-theme="movieverse"] .badge-expired, [data-store-theme="movieverse"] .badge-failed{ background:rgba(255,75,98,.14) !important;border-color:rgba(255,75,98,.34) !important;color:#ff8796 !important; } [data-store-theme="movieverse"] .spinner{border-top-color:#2b6fff !important;} [data-store-theme="movieverse"] .toast{border:1px solid rgba(255,255,255,.14) !important;} /* /plans storefront cards (splan-*) → charcoal glass + staggered sheen */ [data-store-theme="movieverse"] .splan-card{ position:relative;overflow:hidden; background:linear-gradient(157deg,rgba(255,255,255,.1),rgba(255,255,255,.04) 30%,rgba(255,255,255,.022)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14) !important; } [data-store-theme="movieverse"] .splan-card:hover{border-color:rgba(43,111,255,.5) !important;} [data-store-theme="movieverse"] .splan-card::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-170%);pointer-events:none;z-index:2;animation:splanSheen 7.5s ease-in-out infinite} [data-store-theme="movieverse"] .splan-grid .splan-card:nth-child(3n+2)::after{animation-delay:2.4s} [data-store-theme="movieverse"] .splan-grid .splan-card:nth-child(3n)::after{animation-delay:4.8s} @keyframes splanSheen{0%{transform:translateX(-170%)}16%,100%{transform:translateX(340%)}} @media (prefers-reduced-motion:reduce){[data-store-theme="movieverse"] .splan-card::after{display:none}} /* ════════════════════════════════════════════════════════════════════════ 10 PREMIUM TEMPLATE THEMES · volt · sunset · aqua · plasma · gold ice · mint · rose · cyber · ember Same pure-black "liquid-glass" shell as MovieVerse — only the accent identity changes per theme. Each sets the full --th-/--st-/--sp- alias trio (+ legacy --red/--orange/--bg) so the palette reaches the landing, /plans, /my, single-product and legal pages alike. Appended last → wins. Buttons use the bright accent gradient with a near-black --btn-ink (the source-template look); cyber is the one indigo→cyan case that takes white ink on a slightly deepened gradient for AA contrast. ════════════════════════════════════════════════════════════════════════ */ [data-store-theme="volt"],[data-store-theme="sunset"],[data-store-theme="aqua"],[data-store-theme="plasma"],[data-store-theme="gold"],[data-store-theme="ice"],[data-store-theme="mint"],[data-store-theme="rose"],[data-store-theme="cyber"],[data-store-theme="ember"]{ --th-bg:#0a0a0c; --st-bg:#0a0a0c; --sp-bg:#0a0a0c; --bg:#0a0a0c; --page-bg:#0a0a0c; --th-card:rgba(255,255,255,.06); --st-card:rgba(255,255,255,.06); --card:rgba(255,255,255,.06); --glass:rgba(255,255,255,.05); --glass2:rgba(255,255,255,.1); --th-card-solid:#16171c; --st-card-solid:#16171c; --card-solid:#16171c; --th-border:rgba(255,255,255,.12); --st-border:rgba(255,255,255,.12); --sp-border:rgba(255,255,255,.12); --border:rgba(255,255,255,.12); --th-text:#fff; --st-text:#fff; --sp-text:#fff; --text:#fff; --th-muted:#9a9ba4; --st-muted:#9a9ba4; --sp-muted:#9a9ba4; --muted:#9a9ba4; --th-nav-bg:rgba(10,10,14,.72); --st-nav:rgba(10,10,14,.72); --sp-nav:rgba(10,10,14,.78); --header-bg:rgba(10,10,14,.72); --th-faq-bg:rgba(255,255,255,.03); --th-stat-bg:rgba(255,255,255,.04); --th-step-bg:rgba(255,255,255,.05); --th-dark:1; } [data-store-theme="volt"]{ --th-accent:#9be80f;--st-accent:#9be80f;--sp-accent:#9be80f;--red:#9be80f; --th-accent-end:#00d08a;--st-accent-end:#00d08a;--sp-accent2:#00d08a;--sp-accent-end:#00d08a;--orange:#00d08a;--purple:#00d08a; --th-accent-pop:#b6ff3d;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#9be80f,#00d08a);--st-btn:linear-gradient(135deg,#9be80f,#00d08a);--sp-btn:linear-gradient(135deg,#9be80f,#00d08a);--th-badge-bg:linear-gradient(135deg,#9be80f,#00d08a); --th-glow:rgba(155,232,15,.30);--th-hero-line:#c6ff7a; --th-blob1:rgba(155,232,15,.16);--th-blob2:rgba(0,208,138,.10);--th-blob3:rgba(155,232,15,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(155,232,15,.16),#0a0a0c 62%); --grad-1:#9be80f;--grad-2:#54dc6a;--grad-3:#00d08a; } [data-store-theme="sunset"]{ --th-accent:#fb923c;--st-accent:#fb923c;--sp-accent:#fb923c;--red:#fb923c; --th-accent-end:#f43f5e;--st-accent-end:#f43f5e;--sp-accent2:#f43f5e;--sp-accent-end:#f43f5e;--orange:#f43f5e;--purple:#f43f5e; --th-accent-pop:#ffb37a;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#fb923c,#f43f5e);--st-btn:linear-gradient(135deg,#fb923c,#f43f5e);--sp-btn:linear-gradient(135deg,#fb923c,#f43f5e);--th-badge-bg:linear-gradient(135deg,#fb923c,#f43f5e); --th-glow:rgba(251,146,60,.30);--th-hero-line:#ffc59e; --th-blob1:rgba(251,146,60,.16);--th-blob2:rgba(244,63,94,.10);--th-blob3:rgba(251,146,60,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(251,146,60,.16),#0a0a0c 62%); --grad-1:#fb923c;--grad-2:#f76a4d;--grad-3:#f43f5e; } [data-store-theme="aqua"]{ --th-accent:#22d3ee;--st-accent:#22d3ee;--sp-accent:#22d3ee;--red:#22d3ee; --th-accent-end:#3b82f6;--st-accent-end:#3b82f6;--sp-accent2:#3b82f6;--sp-accent-end:#3b82f6;--orange:#3b82f6;--purple:#3b82f6; --th-accent-pop:#67e8f9;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#22d3ee,#3b82f6);--st-btn:linear-gradient(135deg,#22d3ee,#3b82f6);--sp-btn:linear-gradient(135deg,#22d3ee,#3b82f6);--th-badge-bg:linear-gradient(135deg,#22d3ee,#3b82f6); --th-glow:rgba(34,211,238,.30);--th-hero-line:#9be8fb; --th-blob1:rgba(34,211,238,.16);--th-blob2:rgba(59,130,246,.10);--th-blob3:rgba(34,211,238,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(34,211,238,.16),#0a0a0c 62%); --grad-1:#22d3ee;--grad-2:#2eaaf2;--grad-3:#3b82f6; } [data-store-theme="plasma"]{ --th-accent:#a855f7;--st-accent:#a855f7;--sp-accent:#a855f7;--red:#a855f7; --th-accent-end:#ec4899;--st-accent-end:#ec4899;--sp-accent2:#ec4899;--sp-accent-end:#ec4899;--orange:#ec4899;--purple:#ec4899; --th-accent-pop:#d8b4fe;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#a855f7,#ec4899);--st-btn:linear-gradient(135deg,#a855f7,#ec4899);--sp-btn:linear-gradient(135deg,#a855f7,#ec4899);--th-badge-bg:linear-gradient(135deg,#a855f7,#ec4899); --th-glow:rgba(168,85,247,.30);--th-hero-line:#d8b4fe; --th-blob1:rgba(168,85,247,.16);--th-blob2:rgba(236,72,153,.10);--th-blob3:rgba(168,85,247,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(168,85,247,.16),#0a0a0c 62%); --grad-1:#a855f7;--grad-2:#c96fc8;--grad-3:#ec4899; } [data-store-theme="gold"]{ --th-accent:#fbbf24;--st-accent:#fbbf24;--sp-accent:#fbbf24;--red:#fbbf24; --th-accent-end:#f97316;--st-accent-end:#f97316;--sp-accent2:#f97316;--sp-accent-end:#f97316;--orange:#f97316;--purple:#f97316; --th-accent-pop:#fcd34d;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#fbbf24,#f97316);--st-btn:linear-gradient(135deg,#fbbf24,#f97316);--sp-btn:linear-gradient(135deg,#fbbf24,#f97316);--th-badge-bg:linear-gradient(135deg,#fbbf24,#f97316); --th-glow:rgba(251,191,36,.30);--th-hero-line:#fcd98b; --th-blob1:rgba(251,191,36,.16);--th-blob2:rgba(249,115,22,.10);--th-blob3:rgba(251,191,36,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(251,191,36,.16),#0a0a0c 62%); --grad-1:#fbbf24;--grad-2:#fa9d1d;--grad-3:#f97316; } [data-store-theme="ice"]{ --th-accent:#60a5fa;--st-accent:#60a5fa;--sp-accent:#60a5fa;--red:#60a5fa; --th-accent-end:#818cf8;--st-accent-end:#818cf8;--sp-accent2:#818cf8;--sp-accent-end:#818cf8;--orange:#818cf8;--purple:#818cf8; --th-accent-pop:#bfdbfe;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#60a5fa,#818cf8);--st-btn:linear-gradient(135deg,#60a5fa,#818cf8);--sp-btn:linear-gradient(135deg,#60a5fa,#818cf8);--th-badge-bg:linear-gradient(135deg,#60a5fa,#818cf8); --th-glow:rgba(96,165,250,.30);--th-hero-line:#bcd6ff; --th-blob1:rgba(96,165,250,.16);--th-blob2:rgba(129,140,248,.10);--th-blob3:rgba(96,165,250,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(96,165,250,.16),#0a0a0c 62%); --grad-1:#60a5fa;--grad-2:#6f99f9;--grad-3:#818cf8; } [data-store-theme="mint"]{ --th-accent:#2dd4bf;--st-accent:#2dd4bf;--sp-accent:#2dd4bf;--red:#2dd4bf; --th-accent-end:#4ade80;--st-accent-end:#4ade80;--sp-accent2:#4ade80;--sp-accent-end:#4ade80;--orange:#4ade80;--purple:#4ade80; --th-accent-pop:#5eead4;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#2dd4bf,#4ade80);--st-btn:linear-gradient(135deg,#2dd4bf,#4ade80);--sp-btn:linear-gradient(135deg,#2dd4bf,#4ade80);--th-badge-bg:linear-gradient(135deg,#2dd4bf,#4ade80); --th-glow:rgba(45,212,191,.30);--th-hero-line:#9bf0dd; --th-blob1:rgba(45,212,191,.16);--th-blob2:rgba(74,222,128,.10);--th-blob3:rgba(45,212,191,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(45,212,191,.16),#0a0a0c 62%); --grad-1:#2dd4bf;--grad-2:#3bd9a0;--grad-3:#4ade80; } [data-store-theme="rose"]{ --th-accent:#f472b6;--st-accent:#f472b6;--sp-accent:#f472b6;--red:#f472b6; --th-accent-end:#fb7185;--st-accent-end:#fb7185;--sp-accent2:#fb7185;--sp-accent-end:#fb7185;--orange:#fb7185;--purple:#fb7185; --th-accent-pop:#fbcfe8;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#f472b6,#fb7185);--st-btn:linear-gradient(135deg,#f472b6,#fb7185);--sp-btn:linear-gradient(135deg,#f472b6,#fb7185);--th-badge-bg:linear-gradient(135deg,#f472b6,#fb7185); --th-glow:rgba(244,114,182,.30);--th-hero-line:#fbc7e0; --th-blob1:rgba(244,114,182,.16);--th-blob2:rgba(251,113,133,.10);--th-blob3:rgba(244,114,182,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(244,114,182,.16),#0a0a0c 62%); --grad-1:#f472b6;--grad-2:#f7729e;--grad-3:#fb7185; } [data-store-theme="cyber"]{ --th-accent:#6366f1;--st-accent:#6366f1;--sp-accent:#6366f1;--red:#6366f1; --th-accent-end:#06b6d4;--st-accent-end:#06b6d4;--sp-accent2:#06b6d4;--sp-accent-end:#06b6d4;--orange:#06b6d4;--purple:#06b6d4; --th-accent-pop:#a5b4fc;--btn-ink:#ffffff; --th-btn:linear-gradient(135deg,#5457e8,#0e7490);--st-btn:linear-gradient(135deg,#5457e8,#0e7490);--sp-btn:linear-gradient(135deg,#5457e8,#0e7490);--th-badge-bg:linear-gradient(135deg,#5457e8,#0e7490); --th-glow:rgba(99,102,241,.30);--th-hero-line:#aab1fb; --th-blob1:rgba(99,102,241,.16);--th-blob2:rgba(6,182,212,.10);--th-blob3:rgba(99,102,241,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(99,102,241,.16),#0a0a0c 62%); --grad-1:#6366f1;--grad-2:#3590e3;--grad-3:#06b6d4; } [data-store-theme="ember"]{ --th-accent:#ef4444;--st-accent:#ef4444;--sp-accent:#ef4444;--red:#ef4444; --th-accent-end:#f59e0b;--st-accent-end:#f59e0b;--sp-accent2:#f59e0b;--sp-accent-end:#f59e0b;--orange:#f59e0b;--purple:#f59e0b; --th-accent-pop:#fca5a5;--btn-ink:#0a0b0d; --th-btn:linear-gradient(135deg,#ef4444,#f59e0b);--st-btn:linear-gradient(135deg,#ef4444,#f59e0b);--sp-btn:linear-gradient(135deg,#ef4444,#f59e0b);--th-badge-bg:linear-gradient(135deg,#ef4444,#f59e0b); --th-glow:rgba(239,68,68,.30);--th-hero-line:#ffb3a3; --th-blob1:rgba(239,68,68,.16);--th-blob2:rgba(245,158,11,.10);--th-blob3:rgba(239,68,68,.06); --th-hero-bg:radial-gradient(ellipse 130% 70% at 50% -5%,rgba(239,68,68,.16),#0a0a0c 62%); --grad-1:#ef4444;--grad-2:#f27127;--grad-3:#f59e0b; } /* Premium glass cards + animated sheen for the 10 template themes (reuses @keyframes splanSheen defined above; neutral-white sheen is theme-agnostic, hover border picks up each theme's --st-accent). */ [data-store-theme="volt"] .splan-card,[data-store-theme="sunset"] .splan-card,[data-store-theme="aqua"] .splan-card,[data-store-theme="plasma"] .splan-card,[data-store-theme="gold"] .splan-card,[data-store-theme="ice"] .splan-card,[data-store-theme="mint"] .splan-card,[data-store-theme="rose"] .splan-card,[data-store-theme="cyber"] .splan-card,[data-store-theme="ember"] .splan-card{ position:relative;overflow:hidden; background:linear-gradient(157deg,rgba(255,255,255,.1),rgba(255,255,255,.04) 30%,rgba(255,255,255,.022)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14) !important; } [data-store-theme="volt"] .splan-card:hover,[data-store-theme="sunset"] .splan-card:hover,[data-store-theme="aqua"] .splan-card:hover,[data-store-theme="plasma"] .splan-card:hover,[data-store-theme="gold"] .splan-card:hover,[data-store-theme="ice"] .splan-card:hover,[data-store-theme="mint"] .splan-card:hover,[data-store-theme="rose"] .splan-card:hover,[data-store-theme="cyber"] .splan-card:hover,[data-store-theme="ember"] .splan-card:hover{border-color:var(--st-accent) !important;} [data-store-theme="volt"] .splan-card::after,[data-store-theme="sunset"] .splan-card::after,[data-store-theme="aqua"] .splan-card::after,[data-store-theme="plasma"] .splan-card::after,[data-store-theme="gold"] .splan-card::after,[data-store-theme="ice"] .splan-card::after,[data-store-theme="mint"] .splan-card::after,[data-store-theme="rose"] .splan-card::after,[data-store-theme="cyber"] .splan-card::after,[data-store-theme="ember"] .splan-card::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-170%);pointer-events:none;z-index:2;animation:splanSheen 7.5s ease-in-out infinite} @media (prefers-reduced-motion:reduce){[data-store-theme="volt"] .splan-card::after,[data-store-theme="sunset"] .splan-card::after,[data-store-theme="aqua"] .splan-card::after,[data-store-theme="plasma"] .splan-card::after,[data-store-theme="gold"] .splan-card::after,[data-store-theme="ice"] .splan-card::after,[data-store-theme="mint"] .splan-card::after,[data-store-theme="rose"] .splan-card::after,[data-store-theme="cyber"] .splan-card::after,[data-store-theme="ember"] .splan-card::after{display:none}}