/* ===================================================== VideoHub — 20 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; } /* ===================================================== 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; } }