/* ===================================================== VideoHub — 40 Site Themes Applied via . Default = style.css :root ===================================================== */ /* ---------- 2. Ocean Blue ---------- */ [data-theme="ocean"] { --bg: #0a1628; --bg-elevated: #0f1f38; --card: #13243f; --card-hover: #1a3054; --border: #1e3a5f; --accent: #00b4d8; --accent-soft: rgba(0, 180, 216, 0.16); --accent-glow: rgba(0, 180, 216, 0.38); --text: #e8f4fc; --text-dim: #8eb8d4; --text-faint: #5a8aaa; } [data-theme="ocean"] .vh-header { background: linear-gradient(180deg, rgba(10, 22, 40, 0.95), rgba(10, 22, 40, 0.78)); border-bottom: 2px solid var(--accent); box-shadow: 0 4px 24px rgba(0, 180, 216, 0.12); } [data-theme="ocean"] .vh-footer { background: linear-gradient(0deg, #061018, var(--bg-elevated)); border-top: 2px solid var(--accent); text-align: left; } [data-theme="ocean"] .vh-hero { background: linear-gradient(135deg, #0c2840 0%, #0a1628 70%); border-radius: 4px 24px 4px 24px; } [data-theme="ocean"] .vh-hero h1 { letter-spacing: -0.03em; text-shadow: 0 2px 20px rgba(0, 180, 216, 0.25); } [data-theme="ocean"] .vh-hero .eyebrow { letter-spacing: 0.2em; } [data-theme="ocean"] .vh-buffering { background: repeating-linear-gradient(135deg, #0c1e30, #0c1e30 10px, #102840 10px, #102840 20px); } [data-theme="ocean"] .thumb-spinner .ring, [data-theme="ocean"] .vh-buffering .ring, [data-theme="ocean"] .vh-loader .spin { border-top-color: var(--accent); border-right-color: rgba(0, 180, 216, 0.35); } /* ---------- 3. Neon Green ---------- */ [data-theme="neon"] { --bg: #050805; --bg-elevated: #080d08; --card: #0c120c; --card-hover: #111a11; --border: #1a2e1a; --accent: #39ff14; --accent-soft: rgba(57, 255, 20, 0.12); --accent-glow: rgba(57, 255, 20, 0.4); --text: #e8ffe8; --text-dim: #7acc6a; --text-faint: #4a8040; --radius-md: 4px; --radius-lg: 6px; } [data-theme="neon"] .vh-header { background: #050805; border-bottom: 1px solid var(--accent); box-shadow: 0 0 20px rgba(57, 255, 20, 0.15); } [data-theme="neon"] .vh-logo { text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.25rem; } [data-theme="neon"] .vh-footer { background: #030503; border-top: 1px solid var(--accent); box-shadow: inset 0 1px 0 rgba(57, 255, 20, 0.1); } [data-theme="neon"] .vh-hero { background: linear-gradient(180deg, #0a1808 0%, #050805 100%); border: 1px solid var(--accent); border-radius: 4px; } [data-theme="neon"] .vh-hero h1 { text-transform: uppercase; font-size: clamp(1.6rem, 3.5vw, 2.6rem); letter-spacing: 0.04em; } [data-theme="neon"] .vh-hero .eyebrow { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); } [data-theme="neon"] .vh-buffering { background: #080d08; border: 1px dashed var(--border); } [data-theme="neon"] .thumb-spinner .ring, [data-theme="neon"] .vh-buffering .ring, [data-theme="neon"] .vh-loader .spin { border-width: 2px; border-top-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: spin 0.6s linear infinite; } /* ---------- 4. Sunset Blaze ---------- */ [data-theme="sunset"] { --bg: #1a0f0a; --bg-elevated: #22140e; --card: #2a1a12; --card-hover: #352018; --border: #4a3020; --accent: #ff6b35; --accent-soft: rgba(255, 107, 53, 0.15); --accent-glow: rgba(255, 107, 53, 0.4); --text: #fff5f0; --text-dim: #d4a090; --text-faint: #906850; } [data-theme="sunset"] .vh-header { background: linear-gradient(90deg, rgba(42, 20, 10, 0.95), rgba(26, 15, 10, 0.9)); border-bottom: none; box-shadow: 0 4px 20px rgba(255, 107, 53, 0.2); } [data-theme="sunset"] .vh-footer { background: linear-gradient(180deg, var(--bg-elevated), #120a06); border-top: 3px solid var(--accent); } [data-theme="sunset"] .vh-hero { background: linear-gradient(120deg, #4a2010 0%, #1a0f0a 50%, #2a1508 100%); border-radius: var(--radius-lg); min-height: 380px; } [data-theme="sunset"] .vh-hero-content { text-align: left; max-width: 720px; } [data-theme="sunset"] .vh-hero h1 { font-weight: 800; line-height: 1.1; } [data-theme="sunset"] .vh-hero p { font-size: 1.1rem; font-style: italic; color: #e8c4b0; } [data-theme="sunset"] .vh-buffering { background: linear-gradient(135deg, #22140e, #2a1a12); } /* ---------- 5. Royal Purple ---------- */ [data-theme="royal"] { --bg: #120a1f; --bg-elevated: #1a1028; --card: #221430; --card-hover: #2c1a3e; --border: #3d2858; --accent: #c9a227; --accent-soft: rgba(201, 162, 39, 0.14); --accent-glow: rgba(201, 162, 39, 0.35); --text: #f5f0ff; --text-dim: #b8a0d0; --text-faint: #7860a0; --font-display: 'Sora', Georgia, serif; } [data-theme="royal"] .vh-header { background: rgba(18, 10, 31, 0.92); border-bottom: 2px solid var(--accent); } [data-theme="royal"] .vh-logo .dot { color: var(--accent); } [data-theme="royal"] .vh-cat-pill.active { background: linear-gradient(135deg, #a855f7, var(--accent)); border-color: var(--accent); } [data-theme="royal"] .vh-footer { background: #0e0818; border-top: 1px solid var(--accent); padding: 4rem 0 2rem; } [data-theme="royal"] .vh-footer h6 { color: var(--accent); letter-spacing: 0.12em; } [data-theme="royal"] .vh-hero { background: linear-gradient(135deg, #2a1040 0%, #120a1f 60%); border: 1px solid var(--accent); } [data-theme="royal"] .vh-hero h1 { font-family: var(--font-display); font-weight: 800; } [data-theme="royal"] .vh-hero .eyebrow { color: var(--accent); } /* ---------- 6. Forest Green ---------- */ [data-theme="forest"] { --bg: #0a140e; --bg-elevated: #0e1a12; --card: #122018; --card-hover: #182a1e; --border: #243830; --accent: #22c55e; --accent-soft: rgba(34, 197, 94, 0.14); --accent-glow: rgba(34, 197, 94, 0.35); --text: #ecfdf5; --text-dim: #86b89a; --text-faint: #508060; } [data-theme="forest"] .vh-header { background: rgba(10, 20, 14, 0.88); border-bottom: 1px solid #1a4030; } [data-theme="forest"] .vh-footer { background: #060e0a; border-top: 1px solid #1a4030; } [data-theme="forest"] .vh-hero { background: linear-gradient(160deg, #0e2818 0%, #0a140e 100%); border-radius: 18px; } [data-theme="forest"] .vh-hero h1 { color: #d1fae5; } [data-theme="forest"] .vh-buffering { background: repeating-linear-gradient(45deg, #0e1a12, #0e1a12 8px, #122018 8px, #122018 16px); } /* ---------- 7. Midnight Blue ---------- */ [data-theme="midnight"] { --bg: #070b14; --bg-elevated: #0c1220; --card: #101828; --card-hover: #152035; --border: #1e3050; --accent: #3b82f6; --accent-soft: rgba(59, 130, 246, 0.14); --accent-glow: rgba(59, 130, 246, 0.38); --text: #f0f4ff; --text-dim: #90a8d0; --text-faint: #5878a8; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; } [data-theme="midnight"] .vh-header { background: #070b14; border-bottom: 1px solid var(--border); backdrop-filter: none; } [data-theme="midnight"] .vh-footer { background: #050810; padding: 2.5rem 0 1.2rem; } [data-theme="midnight"] .vh-footer .row { text-align: center; } [data-theme="midnight"] .vh-footer .vh-logo { justify-content: center; } [data-theme="midnight"] .vh-hero { background: #0c1220; border: 1px solid var(--border); min-height: 300px; } [data-theme="midnight"] .vh-hero-content { padding: 2.5rem; } [data-theme="midnight"] .vh-hero h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; } [data-theme="midnight"] .vh-hero .eyebrow { font-size: 0.7rem; } /* ---------- 8. Candy Pop ---------- */ [data-theme="candy"] { --bg: #150d18; --bg-elevated: #1c1220; --card: #241828; --card-hover: #2e2034; --border: #402848; --accent: #ec4899; --accent-soft: rgba(236, 72, 153, 0.16); --accent-glow: rgba(236, 72, 153, 0.4); --text: #fdf2f8; --text-dim: #d8a0c0; --text-faint: #a07090; --radius-pill: 999px; --radius-lg: 28px; } [data-theme="candy"] .vh-header { background: rgba(21, 13, 24, 0.85); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #ec4899, #a855f7) 1; } [data-theme="candy"] .vh-footer { background: linear-gradient(180deg, #1c1220, #120a14); border-top: none; border-radius: 28px 28px 0 0; margin-top: 3rem; } [data-theme="candy"] .vh-hero { background: linear-gradient(135deg, #3a1848 0%, #150d18 70%); border-radius: 28px; } [data-theme="candy"] .vh-hero h1 { background: linear-gradient(90deg, #f9a8d4, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="candy"] .vh-cat-pill { border-radius: 999px; } /* ---------- 9. Crimson Edge ---------- */ [data-theme="crimson"] { --bg: #140808; --bg-elevated: #1a0c0c; --card: #220e0e; --card-hover: #2c1212; --border: #401818; --accent: #ef4444; --accent-soft: rgba(239, 68, 68, 0.15); --accent-glow: rgba(239, 68, 68, 0.4); --text: #fff5f5; --text-dim: #d09090; --text-faint: #905858; } [data-theme="crimson"] .vh-header { background: #140808; border-bottom: 4px solid var(--accent); } [data-theme="crimson"] .vh-footer { background: #100606; border-top: 4px solid var(--accent); } [data-theme="crimson"] .vh-hero { background: linear-gradient(90deg, #2a0808 0%, #140808 100%); border-left: 6px solid var(--accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } [data-theme="crimson"] .vh-hero h1 { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; } [data-theme="crimson"] .vh-hero .eyebrow { color: var(--accent); font-weight: 800; } /* ---------- 10. Gold Luxe ---------- */ [data-theme="gold"] { --bg: #14100a; --bg-elevated: #1c1610; --card: #241c14; --card-hover: #2e2418; --border: #403020; --accent: #f59e0b; --accent-soft: rgba(245, 158, 11, 0.14); --accent-glow: rgba(245, 158, 11, 0.38); --text: #fffbeb; --text-dim: #c4a060; --text-faint: #887040; } [data-theme="gold"] .vh-header { background: linear-gradient(180deg, #1c1610, rgba(20, 16, 10, 0.95)); border-bottom: 1px solid var(--accent); box-shadow: 0 2px 16px rgba(245, 158, 11, 0.1); } [data-theme="gold"] .vh-logo { color: var(--accent); } [data-theme="gold"] .vh-footer { background: #100c08; border-top: 1px solid #403020; } [data-theme="gold"] .vh-footer h6 { color: var(--accent); } [data-theme="gold"] .vh-hero { background: linear-gradient(135deg, #2a2010 0%, #14100a 100%); border: 1px solid #403020; } [data-theme="gold"] .vh-hero h1 { color: var(--accent); font-weight: 800; } [data-theme="gold"] .vh-hero p { color: #d4c4a0; } /* ---------- 11. Arctic Ice ---------- */ [data-theme="arctic"] { --bg: #0c1418; --bg-elevated: #101c22; --card: #14242c; --card-hover: #1a2e38; --border: #243840; --accent: #67e8f9; --accent-soft: rgba(103, 232, 249, 0.14); --accent-glow: rgba(103, 232, 249, 0.35); --text: #ecfeff; --text-dim: #90c8d8; --text-faint: #588898; } [data-theme="arctic"] .vh-header { background: rgba(12, 20, 24, 0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(103, 232, 249, 0.2); } [data-theme="arctic"] .vh-footer { background: rgba(16, 28, 34, 0.9); backdrop-filter: blur(12px); border-top: 1px solid rgba(103, 232, 249, 0.15); } [data-theme="arctic"] .vh-hero { background: linear-gradient(180deg, #142830 0%, #0c1418 100%); border: 1px solid rgba(103, 232, 249, 0.2); } [data-theme="arctic"] .vh-hero h1 { font-weight: 700; letter-spacing: -0.01em; } [data-theme="arctic"] .vh-buffering { background: #101c22; } /* ---------- 12. Lavender Dream ---------- */ [data-theme="lavender"] { --bg: #120f1a; --bg-elevated: #181420; --card: #1e1a28; --card-hover: #262030; --border: #342c48; --accent: #c084fc; --accent-soft: rgba(192, 132, 252, 0.15); --accent-glow: rgba(192, 132, 252, 0.38); --text: #faf5ff; --text-dim: #c0a8e0; --text-faint: #8878b0; --radius-md: 18px; --radius-lg: 24px; } [data-theme="lavender"] .vh-header { background: rgba(18, 15, 26, 0.9); border-bottom: none; border-radius: 0 0 20px 20px; margin-bottom: 0.5rem; } [data-theme="lavender"] .vh-footer { background: #0e0c14; border-radius: 24px 24px 0 0; border-top: none; box-shadow: 0 -4px 24px rgba(192, 132, 252, 0.08); } [data-theme="lavender"] .vh-hero { background: linear-gradient(145deg, #2a1840 0%, #120f1a 100%); border-radius: 24px; } [data-theme="lavender"] .vh-hero h1 { font-weight: 700; line-height: 1.2; } [data-theme="lavender"] .vh-hero p { line-height: 1.7; } /* ---------- 13. Cyber Punk ---------- */ [data-theme="cyber"] { --bg: #0a0a12; --bg-elevated: #101018; --card: #14141f; --card-hover: #1a1a28; --border: #2a2a40; --accent: #facc15; --accent-soft: rgba(250, 204, 21, 0.12); --accent-glow: rgba(250, 204, 21, 0.4); --text: #fafafa; --text-dim: #a0a0c0; --text-faint: #606080; --radius-sm: 0; --radius-md: 2px; --radius-lg: 4px; } [data-theme="cyber"] .vh-header { background: #0a0a12; border-bottom: 2px solid var(--accent); box-shadow: 4px 4px 0 #06b6d4; } [data-theme="cyber"] .vh-logo { font-family: monospace; letter-spacing: 0.1em; } [data-theme="cyber"] .vh-footer { background: #06060c; border-top: 2px solid #06b6d4; box-shadow: inset 0 2px 0 var(--accent); } [data-theme="cyber"] .vh-hero { background: linear-gradient(135deg, #1a1a28 0%, #0a0a12 100%); border: 2px solid var(--accent); border-radius: 2px; } [data-theme="cyber"] .vh-hero h1 { font-family: monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } [data-theme="cyber"] .vh-hero .eyebrow { color: #06b6d4; } [data-theme="cyber"] .thumb-spinner .ring, [data-theme="cyber"] .vh-loader .spin { border-radius: 2px; animation: spin 0.5s linear infinite; } /* ---------- 14. Ruby Rose ---------- */ [data-theme="ruby"] { --bg: #160a10; --bg-elevated: #1e1018; --card: #28141c; --card-hover: #321a24; --border: #482030; --accent: #f43f5e; --accent-soft: rgba(244, 63, 94, 0.15); --accent-glow: rgba(244, 63, 94, 0.4); --text: #fff1f2; --text-dim: #d890a0; --text-faint: #985868; } [data-theme="ruby"] .vh-header { background: linear-gradient(90deg, rgba(40, 10, 20, 0.95), rgba(22, 10, 16, 0.9)); border-bottom: 1px solid var(--border); } [data-theme="ruby"] .vh-footer { background: #100608; } [data-theme="ruby"] .vh-hero { background: radial-gradient(ellipse at top left, #3a1020, #160a10 70%); min-height: 360px; } [data-theme="ruby"] .vh-hero-content { max-width: 100%; text-align: center; margin: 0 auto; } [data-theme="ruby"] .vh-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); } [data-theme="ruby"] .vh-hero p { max-width: 520px; margin-left: auto; margin-right: auto; } /* ---------- 15. Fresh Mint ---------- */ [data-theme="mint"] { --bg: #081410; --bg-elevated: #0c1a16; --card: #102018; --card-hover: #142a20; --border: #1e3830; --accent: #34d399; --accent-soft: rgba(52, 211, 153, 0.14); --accent-glow: rgba(52, 211, 153, 0.35); --text: #ecfdf5; --text-dim: #80c8a8; --text-faint: #509078; } [data-theme="mint"] .vh-header { background: rgba(8, 20, 16, 0.9); border-bottom: 1px solid #1e3830; } [data-theme="mint"] .vh-footer { background: #060e0c; border-top: 2px dashed #1e3830; } [data-theme="mint"] .vh-hero { background: linear-gradient(120deg, #0e2820 0%, #081410 100%); border-radius: 16px; } [data-theme="mint"] .vh-hero h1 { font-weight: 700; } [data-theme="mint"] .vh-hero .eyebrow .pulse-dot { background: var(--accent); } /* ---------- 16. Slate Pro ---------- */ [data-theme="slate"] { --bg: #111318; --bg-elevated: #161920; --card: #1c1f28; --card-hover: #242830; --border: #2e3340; --accent: #94a3b8; --accent-soft: rgba(148, 163, 184, 0.12); --accent-glow: rgba(148, 163, 184, 0.3); --text: #f1f5f9; --text-dim: #94a3b8; --text-faint: #64748b; --radius-md: 10px; --radius-lg: 12px; } [data-theme="slate"] .vh-header { background: #161920; border-bottom: 1px solid var(--border); backdrop-filter: none; } [data-theme="slate"] .vh-footer { background: #0e1014; padding: 2rem 0 1rem; font-size: 0.9rem; } [data-theme="slate"] .vh-hero { background: #1c1f28; border: 1px solid var(--border); min-height: 280px; } [data-theme="slate"] .vh-hero h1 { font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem); } [data-theme="slate"] .vh-hero .eyebrow { color: var(--text-dim); letter-spacing: 0.1em; } [data-theme="slate"] .btn-vh-play { background: #475569; box-shadow: none; } /* ---------- 17. Blaze Fire ---------- */ [data-theme="blaze"] { --bg: #1a0c06; --bg-elevated: #221008; --card: #2a140a; --card-hover: #341a0e; --border: #4a2810; --accent: #fb923c; --accent-soft: rgba(251, 146, 60, 0.16); --accent-glow: rgba(251, 146, 60, 0.42); --text: #fff7ed; --text-dim: #d4a070; --text-faint: #a07040; } [data-theme="blaze"] .vh-header { background: linear-gradient(180deg, #3a1808, #1a0c06); border-bottom: none; } [data-theme="blaze"] .vh-footer { background: linear-gradient(0deg, #0a0604, #1a0c06); text-align: center; } [data-theme="blaze"] .vh-footer .row > div { text-align: center !important; } [data-theme="blaze"] .vh-footer a.link { display: inline-block; margin: 0 0.5rem 0.4rem; } [data-theme="blaze"] .vh-hero { background: linear-gradient(180deg, #4a2008 0%, #1a0c06 80%); text-align: center; } [data-theme="blaze"] .vh-hero-content { margin: 0 auto; text-align: center; max-width: 800px; } [data-theme="blaze"] .vh-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; } [data-theme="blaze"] .vh-hero .eyebrow { justify-content: center; } /* ---------- 18. Cosmic Space ---------- */ [data-theme="cosmic"] { --bg: #0a0818; --bg-elevated: #100e22; --card: #16122c; --card-hover: #1e1838; --border: #2a2448; --accent: #818cf8; --accent-soft: rgba(129, 140, 248, 0.15); --accent-glow: rgba(129, 140, 248, 0.4); --text: #eef2ff; --text-dim: #a0a8e0; --text-faint: #6868a8; } [data-theme="cosmic"] .vh-header { background: rgba(10, 8, 24, 0.88); border-bottom: 1px solid rgba(129, 140, 248, 0.25); box-shadow: 0 0 40px rgba(129, 140, 248, 0.06); } [data-theme="cosmic"] .vh-footer { background: radial-gradient(ellipse at bottom, #1a1440, #0a0818); border-top: 1px solid #2a2448; } [data-theme="cosmic"] .vh-hero { background: radial-gradient(ellipse at 30% 20%, #2a1858, #0a0818 60%); border: 1px solid #2a2448; } [data-theme="cosmic"] .vh-hero h1 { text-shadow: 0 0 30px rgba(129, 140, 248, 0.3); } [data-theme="cosmic"] .vh-buffering { background: #100e22; } [data-theme="cosmic"] .thumb-spinner .ring, [data-theme="cosmic"] .vh-loader .spin { border-top-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } /* ---------- 19. Emerald City ---------- */ [data-theme="emerald"] { --bg: #061410; --bg-elevated: #0a1c18; --card: #0e241e; --card-hover: #122e26; --border: #1a4034; --accent: #10b981; --accent-soft: rgba(16, 185, 129, 0.14); --accent-glow: rgba(16, 185, 129, 0.38); --text: #d1fae5; --text-dim: #6ee7b7; --text-faint: #34a880; } [data-theme="emerald"] .vh-header { background: #061410; border-bottom: 3px solid var(--accent); } [data-theme="emerald"] .vh-cat-strip { border-top: 1px solid #1a4034; } [data-theme="emerald"] .vh-footer { background: #040e0c; border-top: 3px solid var(--accent); } [data-theme="emerald"] .vh-hero { background: linear-gradient(90deg, #0a2820 0%, #061410 100%); border-radius: 0; border-left: 8px solid var(--accent); } [data-theme="emerald"] .vh-hero h1 { color: #a7f3d0; font-weight: 800; } /* ---------- 20. Noir Mono ---------- */ [data-theme="noir"] { --bg: #000000; --bg-elevated: #0a0a0a; --card: #111111; --card-hover: #1a1a1a; --border: #333333; --accent: #ffffff; --accent-soft: rgba(255, 255, 255, 0.08); --accent-glow: rgba(255, 255, 255, 0.2); --text: #ffffff; --text-dim: #aaaaaa; --text-faint: #666666; --radius-md: 0; --radius-lg: 0; --radius-pill: 0; } [data-theme="noir"] .vh-header { background: #000; border-bottom: 2px solid #fff; backdrop-filter: none; } [data-theme="noir"] .vh-logo { font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; font-size: 1.2rem; } [data-theme="noir"] .vh-cat-pill { border-radius: 0; } [data-theme="noir"] .vh-cat-pill.active { background: #fff; color: #000; } [data-theme="noir"] .vh-footer { background: #000; border-top: 2px solid #fff; text-transform: uppercase; letter-spacing: 0.05em; } [data-theme="noir"] .vh-footer h6 { color: #fff; } [data-theme="noir"] .vh-hero { background: #000; border: 2px solid #fff; border-radius: 0; min-height: 320px; } [data-theme="noir"] .vh-hero h1 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.5rem, 4vw, 2.8rem); } [data-theme="noir"] .vh-hero .eyebrow { color: #fff; } [data-theme="noir"] .vh-hero p { color: #aaa; font-family: Georgia, serif; font-style: italic; } [data-theme="noir"] .btn-vh-play { background: #fff; color: #000; box-shadow: none; } [data-theme="noir"] .btn-vh-play:hover { background: #ddd; color: #000; } [data-theme="noir"] .vh-buffering { background: #111; border: 1px solid #333; } [data-theme="noir"] .thumb-spinner .ring, [data-theme="noir"] .vh-buffering .ring, [data-theme="noir"] .vh-loader .spin { border-color: #333; border-top-color: #fff; } /* ---------- Premium themes (21–40) ---------- */ [data-theme="velvet"] { --bg: #180810; --bg-elevated: #200a14; --card: #2a0e18; --card-hover: #361220; --border: #4a1830; --accent: #be123c; --accent-soft: rgba(190, 18, 60, 0.18); --accent-glow: rgba(190, 18, 60, 0.4); --text: #fce7f3; --text-dim: #d4a0b0; --text-faint: #9a6070; } [data-theme="velvet"] .vh-header { background: linear-gradient(180deg, #200a14, rgba(24, 8, 16, 0.9)); border-bottom: 2px solid var(--accent); } [data-theme="velvet"] .vh-footer { background: #120608; border-top: 2px solid #4a1830; } [data-theme="velvet"] .vh-hero { background: linear-gradient(135deg, #3a1020, #180810); border-radius: 0 0 24px 24px; } [data-theme="velvet"] .vh-hero h1 { color: #fecdd3; font-weight: 800; } [data-theme="velvet"] .thumb-spinner .ring, [data-theme="velvet"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="sapphire"] { --bg: #0a1020; --bg-elevated: #0e1628; --card: #121e38; --card-hover: #182848; --border: #1e3a6e; --accent: #2563eb; --accent-soft: rgba(37, 99, 235, 0.16); --accent-glow: rgba(37, 99, 235, 0.38); --text: #e8f0ff; --text-dim: #94b0e0; --text-faint: #6080b0; } [data-theme="sapphire"] .vh-header { background: rgba(10, 16, 32, 0.96); border-bottom: 2px solid var(--accent); box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15); } [data-theme="sapphire"] .vh-footer { background: #060c18; border-top: 1px solid #1e3a6e; } [data-theme="sapphire"] .vh-hero { background: linear-gradient(160deg, #102050, #0a1020); } [data-theme="sapphire"] .vh-hero h1 { text-shadow: 0 2px 16px rgba(37, 99, 235, 0.3); } [data-theme="sapphire"] .thumb-spinner .ring, [data-theme="sapphire"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="coral"] { --bg: #0f1a18; --bg-elevated: #142220; --card: #1a2e2a; --card-hover: #223a34; --border: #2a5048; --accent: #fb7185; --accent-soft: rgba(251, 113, 133, 0.16); --accent-glow: rgba(251, 113, 133, 0.35); --text: #fef2f2; --text-dim: #c0a8a8; --text-faint: #887878; } [data-theme="coral"] .vh-header { background: linear-gradient(90deg, #142220, #1a2e2a); border-bottom: 2px solid var(--accent); } [data-theme="coral"] .vh-footer { background: #0a1210; border-top: 2px solid #2a5048; } [data-theme="coral"] .vh-hero { background: linear-gradient(135deg, #1a3830, #0f1a18); border-radius: 16px; } [data-theme="coral"] .vh-hero h1 { color: #fecdd3; } [data-theme="coral"] .thumb-spinner .ring, [data-theme="coral"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="amber"] { --bg: #1a1208; --bg-elevated: #22180c; --card: #2e2010; --card-hover: #3a2814; --border: #5a4020; --accent: #fbbf24; --accent-soft: rgba(251, 191, 36, 0.16); --accent-glow: rgba(251, 191, 36, 0.38); --text: #fef9e7; --text-dim: #d4b880; --text-faint: #a08050; } [data-theme="amber"] .vh-header { background: #22180c; border-bottom: 2px solid var(--accent); } [data-theme="amber"] .vh-footer { background: #120c06; border-top: 1px solid #5a4020; } [data-theme="amber"] .vh-hero { background: linear-gradient(180deg, #3a2810, #1a1208); } [data-theme="amber"] .vh-hero h1 { color: var(--accent); font-weight: 800; } [data-theme="amber"] .thumb-spinner .ring, [data-theme="amber"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="plum"] { --bg: #140a1e; --bg-elevated: #1a1026; --card: #221430; --card-hover: #2c1a3e; --border: #4a2860; --accent: #9333ea; --accent-soft: rgba(147, 51, 234, 0.18); --accent-glow: rgba(147, 51, 234, 0.4); --text: #f3e8ff; --text-dim: #c4a0e0; --text-faint: #9070b0; } [data-theme="plum"] .vh-header { background: rgba(20, 10, 30, 0.95); border-bottom: 2px solid var(--accent); } [data-theme="plum"] .vh-footer { background: #0e0614; border-top: 2px solid #4a2860; } [data-theme="plum"] .vh-hero { background: linear-gradient(135deg, #2a1040, #140a1e); border-radius: 20px; } [data-theme="plum"] .vh-hero .eyebrow { color: var(--accent); } [data-theme="plum"] .thumb-spinner .ring, [data-theme="plum"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="teal"] { --bg: #081614; --bg-elevated: #0c1e1c; --card: #102824; --card-hover: #143430; --border: #1e4840; --accent: #14b8a6; --accent-soft: rgba(20, 184, 166, 0.16); --accent-glow: rgba(20, 184, 166, 0.35); --text: #ecfdf5; --text-dim: #90c8b8; --text-faint: #609080; } [data-theme="teal"] .vh-header { background: #0c1e1c; border-bottom: 2px solid var(--accent); } [data-theme="teal"] .vh-footer { background: #060e0c; border-top: 1px solid #1e4840; } [data-theme="teal"] .vh-hero { background: linear-gradient(160deg, #0e3830, #081614); } [data-theme="teal"] .vh-hero h1 { color: #a7f3d0; } [data-theme="teal"] .thumb-spinner .ring, [data-theme="teal"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="bronze"] { --bg: #141008; --bg-elevated: #1a140c; --card: #241c10; --card-hover: #2e2414; --border: #4a3820; --accent: #d97706; --accent-soft: rgba(217, 119, 6, 0.16); --accent-glow: rgba(217, 119, 6, 0.38); --text: #fef3c7; --text-dim: #c4a870; --text-faint: #907848; } [data-theme="bronze"] .vh-header { background: linear-gradient(180deg, #1a140c, #141008); border-bottom: 2px solid var(--accent); } [data-theme="bronze"] .vh-footer { background: #0c0a06; border-top: 2px solid #4a3820; } [data-theme="bronze"] .vh-hero { background: linear-gradient(135deg, #302010, #141008); } [data-theme="bronze"] .vh-logo { color: var(--accent); } [data-theme="bronze"] .thumb-spinner .ring, [data-theme="bronze"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="cherry"] { --bg: #1a1014; --bg-elevated: #22141a; --card: #2e1a22; --card-hover: #3a222c; --border: #5a3040; --accent: #fda4af; --accent-soft: rgba(253, 164, 175, 0.16); --accent-glow: rgba(253, 164, 175, 0.35); --text: #fff1f2; --text-dim: #d4a0a8; --text-faint: #a07078; } [data-theme="cherry"] .vh-header { background: rgba(26, 16, 20, 0.95); border-bottom: 2px solid var(--accent); border-radius: 0 0 16px 16px; } [data-theme="cherry"] .vh-footer { background: #12080c; border-top: 2px solid #5a3040; border-radius: 16px 16px 0 0; } [data-theme="cherry"] .vh-hero { background: linear-gradient(135deg, #3a2030, #1a1014); border-radius: 20px; } [data-theme="cherry"] .vh-hero h1 { color: #fecdd3; font-weight: 700; } [data-theme="cherry"] .thumb-spinner .ring, [data-theme="cherry"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="indigo"] { --bg: #0a0a18; --bg-elevated: #0e0e22; --card: #141430; --card-hover: #1a1a3e; --border: #2a2a60; --accent: #6366f1; --accent-soft: rgba(99, 102, 241, 0.16); --accent-glow: rgba(99, 102, 241, 0.38); --text: #eef2ff; --text-dim: #a0a8e0; --text-faint: #7078b0; } [data-theme="indigo"] .vh-header { background: #0e0e22; border-bottom: 2px solid var(--accent); box-shadow: 0 0 20px rgba(99, 102, 241, 0.12); } [data-theme="indigo"] .vh-footer { background: #060610; border-top: 1px solid #2a2a60; } [data-theme="indigo"] .vh-hero { background: linear-gradient(160deg, #1a1a40, #0a0a18); } [data-theme="indigo"] .vh-hero h1 { text-shadow: 0 0 24px rgba(99, 102, 241, 0.25); } [data-theme="indigo"] .thumb-spinner .ring, [data-theme="indigo"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="peach"] { --bg: #1a120e; --bg-elevated: #221812; --card: #2e2018; --card-hover: #3a2820; --border: #5a4030; --accent: #fdba74; --accent-soft: rgba(253, 186, 116, 0.16); --accent-glow: rgba(253, 186, 116, 0.35); --text: #fff7ed; --text-dim: #d4b898; --text-faint: #a08068; } [data-theme="peach"] .vh-header { background: #221812; border-bottom: 2px solid var(--accent); } [data-theme="peach"] .vh-footer { background: #120c08; border-top: 1px solid #5a4030; } [data-theme="peach"] .vh-hero { background: linear-gradient(180deg, #3a2818, #1a120e); border-radius: 12px; } [data-theme="peach"] .vh-hero p { color: #fed7aa; font-style: italic; } [data-theme="peach"] .thumb-spinner .ring, [data-theme="peach"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="jade"] { --bg: #061410; --bg-elevated: #0a1a14; --card: #0e2418; --card-hover: #123020; --border: #1a4830; --accent: #059669; --accent-soft: rgba(5, 150, 105, 0.16); --accent-glow: rgba(5, 150, 105, 0.35); --text: #ecfdf5; --text-dim: #80c8a8; --text-faint: #509070; } [data-theme="jade"] .vh-header { background: linear-gradient(180deg, #0a1a14, #061410); border-bottom: 3px solid var(--accent); } [data-theme="jade"] .vh-footer { background: #040c08; border-top: 2px solid #1a4830; } [data-theme="jade"] .vh-hero { background: linear-gradient(135deg, #0e3828, #061410); border-left: 4px solid var(--accent); } [data-theme="jade"] .vh-hero h1 { color: #a7f3d0; font-weight: 800; } [data-theme="jade"] .thumb-spinner .ring, [data-theme="jade"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="rosegold"] { --bg: #1a1014; --bg-elevated: #22141a; --card: #2e1c24; --card-hover: #3a2430; --border: #5a3848; --accent: #e879a8; --accent-soft: rgba(232, 121, 168, 0.16); --accent-glow: rgba(232, 121, 168, 0.38); --text: #fdf2f8; --text-dim: #d4a0b8; --text-faint: #a07088; } [data-theme="rosegold"] .vh-header { background: rgba(26, 16, 20, 0.96); border-bottom: 2px solid var(--accent); box-shadow: 0 4px 16px rgba(232, 121, 168, 0.12); } [data-theme="rosegold"] .vh-footer { background: #100810; border-top: 1px solid #5a3848; } [data-theme="rosegold"] .vh-hero { background: linear-gradient(135deg, #3a2030, #1a1014); } [data-theme="rosegold"] .vh-hero h1 { background: linear-gradient(90deg, #fbcfe8, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="rosegold"] .thumb-spinner .ring, [data-theme="rosegold"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="graphite"] { --bg: #0c0e12; --bg-elevated: #101318; --card: #161a20; --card-hover: #1c222a; --border: #2a3038; --accent: #64748b; --accent-soft: rgba(100, 116, 139, 0.16); --accent-glow: rgba(100, 116, 139, 0.3); --text: #f1f5f9; --text-dim: #94a3b8; --text-faint: #64748b; } [data-theme="graphite"] .vh-header { background: #101318; border-bottom: 1px solid #2a3038; } [data-theme="graphite"] .vh-footer { background: #080a0e; border-top: 1px solid #2a3038; } [data-theme="graphite"] .vh-hero { background: linear-gradient(180deg, #161a20, #0c0e12); } [data-theme="graphite"] .vh-hero h1 { font-weight: 600; letter-spacing: -0.02em; } [data-theme="graphite"] .btn-vh-play { background: #475569; box-shadow: none; } [data-theme="graphite"] .thumb-spinner .ring, [data-theme="graphite"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="aqua"] { --bg: #081418; --bg-elevated: #0c1c20; --card: #102830; --card-hover: #143440; --border: #1e5058; --accent: #22d3ee; --accent-soft: rgba(34, 211, 238, 0.16); --accent-glow: rgba(34, 211, 238, 0.38); --text: #ecfeff; --text-dim: #90d8e0; --text-faint: #58a8b0; } [data-theme="aqua"] .vh-header { background: rgba(8, 20, 24, 0.96); border-bottom: 2px solid var(--accent); } [data-theme="aqua"] .vh-footer { background: #060e10; border-top: 2px solid #1e5058; } [data-theme="aqua"] .vh-hero { background: linear-gradient(135deg, #0e4048, #081418); border-radius: 4px 20px 4px 20px; } [data-theme="aqua"] .vh-hero h1 { text-shadow: 0 0 20px rgba(34, 211, 238, 0.2); } [data-theme="aqua"] .thumb-spinner .ring, [data-theme="aqua"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="wine"] { --bg: #120608; --bg-elevated: #18080c; --card: #220c12; --card-hover: #2c1018; --border: #4a1828; --accent: #881337; --accent-soft: rgba(136, 19, 55, 0.2); --accent-glow: rgba(136, 19, 55, 0.45); --text: #fce7f3; --text-dim: #c49098; --text-faint: #906068; } [data-theme="wine"] .vh-header { background: #18080c; border-bottom: 2px solid #be123c; } [data-theme="wine"] .vh-footer { background: #0a0406; border-top: 2px solid #4a1828; } [data-theme="wine"] .vh-hero { background: linear-gradient(160deg, #3a1020, #120608); } [data-theme="wine"] .vh-hero h1 { color: #fecdd3; font-weight: 800; } [data-theme="wine"] .thumb-spinner .ring, [data-theme="wine"] .vh-loader .spin { border-top-color: #be123c; } [data-theme="honey"] { --bg: #161008; --bg-elevated: #1c140c; --card: #261c10; --card-hover: #302414; --border: #504020; --accent: #eab308; --accent-soft: rgba(234, 179, 8, 0.16); --accent-glow: rgba(234, 179, 8, 0.38); --text: #fefce8; --text-dim: #d4c060; --text-faint: #a09040; } [data-theme="honey"] .vh-header { background: linear-gradient(90deg, #1c140c, #261c10); border-bottom: 2px solid var(--accent); } [data-theme="honey"] .vh-footer { background: #0e0a06; border-top: 1px solid #504020; } [data-theme="honey"] .vh-hero { background: linear-gradient(180deg, #3a3010, #161008); } [data-theme="honey"] .vh-hero h1 { color: var(--accent); } [data-theme="honey"] .thumb-spinner .ring, [data-theme="honey"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="storm"] { --bg: #0a0c10; --bg-elevated: #0e1016; --card: #141820; --card-hover: #1a2028; --border: #2a3440; --accent: #475569; --accent-soft: rgba(71, 85, 105, 0.18); --accent-glow: rgba(71, 85, 105, 0.35); --text: #e2e8f0; --text-dim: #94a3b8; --text-faint: #64748b; } [data-theme="storm"] .vh-header { background: rgba(10, 12, 16, 0.97); border-bottom: 1px solid #334155; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } [data-theme="storm"] .vh-footer { background: #060810; border-top: 1px solid #2a3440; } [data-theme="storm"] .vh-hero { background: linear-gradient(135deg, #1a2430, #0a0c10); } [data-theme="storm"] .vh-hero h1 { font-weight: 700; color: #cbd5e1; } [data-theme="storm"] .thumb-spinner .ring, [data-theme="storm"] .vh-loader .spin { border-top-color: #64748b; } [data-theme="sakura"] { --bg: #180c14; --bg-elevated: #20101a; --card: #2a1422; --card-hover: #361a2c; --border: #5a2848; --accent: #f472b6; --accent-soft: rgba(244, 114, 182, 0.16); --accent-glow: rgba(244, 114, 182, 0.38); --text: #fdf2f8; --text-dim: #d4a0c0; --text-faint: #a07090; } [data-theme="sakura"] .vh-header { background: rgba(24, 12, 20, 0.95); border-bottom: 2px solid var(--accent); border-radius: 0 0 18px 18px; } [data-theme="sakura"] .vh-footer { background: #100610; border-top: 2px solid #5a2848; border-radius: 18px 18px 0 0; } [data-theme="sakura"] .vh-hero { background: linear-gradient(135deg, #3a1830, #180c14); border-radius: 24px; } [data-theme="sakura"] .vh-hero h1 { color: #fbcfe8; font-weight: 700; } [data-theme="sakura"] .vh-cat-pill { border-radius: 999px; } [data-theme="sakura"] .thumb-spinner .ring, [data-theme="sakura"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="cobalt"] { --bg: #080c18; --bg-elevated: #0c1020; --card: #101830; --card-hover: #142040; --border: #1a3060; --accent: #1d4ed8; --accent-soft: rgba(29, 78, 216, 0.16); --accent-glow: rgba(29, 78, 216, 0.4); --text: #eff6ff; --text-dim: #90b0e0; --text-faint: #5880c0; } [data-theme="cobalt"] .vh-header { background: #0c1020; border-bottom: 3px solid var(--accent); } [data-theme="cobalt"] .vh-footer { background: #060810; border-top: 2px solid #1a3060; } [data-theme="cobalt"] .vh-hero { background: linear-gradient(160deg, #102858, #080c18); } [data-theme="cobalt"] .vh-hero h1 { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; } [data-theme="cobalt"] .thumb-spinner .ring, [data-theme="cobalt"] .vh-loader .spin { border-top-color: var(--accent); } [data-theme="obsidian"] { --bg: #080808; --bg-elevated: #0c0c0c; --card: #121212; --card-hover: #181818; --border: #2a2a2a; --accent: #d4af37; --accent-soft: rgba(212, 175, 55, 0.14); --accent-glow: rgba(212, 175, 55, 0.35); --text: #f5f5f5; --text-dim: #a0a0a0; --text-faint: #707070; } [data-theme="obsidian"] .vh-header { background: #0c0c0c; border-bottom: 2px solid var(--accent); } [data-theme="obsidian"] .vh-footer { background: #040404; border-top: 2px solid #2a2a2a; } [data-theme="obsidian"] .vh-footer h6 { color: var(--accent); letter-spacing: 0.1em; } [data-theme="obsidian"] .vh-hero { background: linear-gradient(135deg, #181808, #080808); border: 1px solid #2a2a2a; } [data-theme="obsidian"] .vh-hero h1 { color: var(--accent); font-weight: 800; letter-spacing: 0.04em; } [data-theme="obsidian"] .vh-logo { color: var(--accent); } [data-theme="obsidian"] .btn-vh-play { background: linear-gradient(135deg, #d4af37, #b8942e); color: #080808; } [data-theme="obsidian"] .thumb-spinner .ring, [data-theme="obsidian"] .vh-loader .spin { border-top-color: var(--accent); } /* ===================================================== Mobile polish (all themes) ===================================================== */ @media (max-width: 768px) { [data-theme="blaze"] .vh-footer a.link { display: block; margin: 0 0 0.55rem; } [data-theme="midnight"] .vh-footer .row > [class*="col"] { text-align: left !important; } [data-theme="midnight"] .vh-footer .vh-logo { justify-content: flex-start; } [data-theme="cyber"] .vh-header { box-shadow: 2px 2px 0 #06b6d4; } [data-theme="ruby"] .vh-hero-content, [data-theme="blaze"] .vh-hero-content { padding: 1.6rem 1.2rem; } [data-theme="emerald"] .vh-hero { border-left-width: 4px; } [data-theme="crimson"] .vh-hero { border-left-width: 4px; } [data-theme="lavender"] .vh-header { border-radius: 0 0 14px 14px; } [data-theme="candy"] .vh-footer, [data-theme="lavender"] .vh-footer { border-radius: 18px 18px 0 0; } [data-theme="noir"] .vh-hero h1 { letter-spacing: 0.04em; font-size: clamp(1.35rem, 6vw, 2rem); } [data-theme="neon"] .vh-logo { font-size: 1.1rem; } }