Video Streaming - Free HTML/CSS UI Kit
A premium cinematic dark-themed Video Streaming & OTT Website UI Kit featuring obsidian backgrounds, cinema red glowing actions, bold Outfit typography, and video-centric layouts.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Obsidian Deep
#08080C
Cinema Crimson
#E50914
Dark Coal
#101016
Text White
#FFFFFF
Muted Grey
#9CA3AF
Typography
Hero Sections
Featured Spotlight Banner
HTML
<section class="vid-hero-centered">
<div class="vid-hero-meta">
<span class="vid-badge vid-badge-primary">Original Series</span>
<span class="vid-match-score">98% Match</span>
<span class="vid-hero-year">2026</span>
<span class="vid-hero-age">18+</span>
<span class="vid-hero-seasons">3 Seasons</span>
<span class="vid-badge-uhd">UHD 4K</span>
</div>
<h1 class="vid-hero-title">THE CHRONICLES OF NEURAL LINK</h1>
<p class="vid-hero-subtitle">Deep in the cyber underground of Neo-Seoul, a blind programmer accidentally compiles an ancient validation node that unlocks synthetic telepathic connections across the grid, triggering an obsidian agency hunt.</p>
<!-- Hero Actions -->
<div class="vid-hero-actions">
<button class="vid-btn vid-btn-primary vid-btn-lg">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:20px;height:20px;margin-right:4px;"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
Play Episode 1
</button>
<button class="vid-btn vid-btn-outline vid-btn-lg">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:18px;height:18px;margin-right:4px;"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
Add to List
</button>
</div>
<!-- Featured Spotlight Visual Card -->
<div class="vid-hero-visual-deck">
<img src="https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?auto=format&fit=crop&w=1200&q=80" alt="Cinematic dark virtual reality screen" class="vid-hero-cover-img">
<div class="vid-hero-overlay"></div>
</div>
</section>
CSS (Component Only)
/* Component: Featured Spotlight Banner */
/* NOTE: This component requires base.css to be included in your page. */
.vid-hero-centered {
width: 100%;
max-width: 950px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
}
.vid-hero-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 0.825rem;
font-weight: 600;
color: var(--vid-text-muted);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.vid-match-score {
color: var(--vid-success);
font-weight: 700;
}
.vid-badge-uhd {
font-size: 0.65rem;
font-weight: 800;
border: 1px solid var(--vid-border-strong);
padding: 0.15rem 0.4rem;
border-radius: var(--vid-radius-sm);
color: var(--vid-text-muted);
}
.vid-hero-title {
font-family: var(--vid-font-heading);
font-size: 3.5rem;
font-weight: 900;
color: var(--vid-text);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
max-width: 850px;
}
.vid-hero-subtitle {
font-size: 1rem;
color: var(--vid-text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 760px;
}
/* Actions Row */
.vid-hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-bottom: 3.5rem;
}
/* Covered Banner */
.vid-hero-visual-deck {
width: 100%;
position: relative;
border-radius: var(--vid-radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: var(--vid-shadow);
border: 1px solid var(--vid-border-strong);
}
.vid-hero-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--vid-transition);
}
.vid-hero-visual-deck:hover .vid-hero-cover-img {
transform: scale(1.02);
}
/* Vignette overlay */
.vid-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(8, 8, 12, 0.9) 100%);
pointer-events: none;
}
@media (max-width: 768px) {
.vid-hero-title {
font-size: 2.5rem;
}
.vid-hero-subtitle {
font-size: 0.9rem;
}
.vid-hero-actions {
flex-direction: column;
width: 100%;
gap: 0.85rem;
}
.vid-hero-actions .vid-btn {
width: 100%;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-hero-centered {
width: 100%;
max-width: 950px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
}
.vid-hero-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 0.825rem;
font-weight: 600;
color: var(--vid-text-muted);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.vid-match-score {
color: var(--vid-success);
font-weight: 700;
}
.vid-badge-uhd {
font-size: 0.65rem;
font-weight: 800;
border: 1px solid var(--vid-border-strong);
padding: 0.15rem 0.4rem;
border-radius: var(--vid-radius-sm);
color: var(--vid-text-muted);
}
.vid-hero-title {
font-family: var(--vid-font-heading);
font-size: 3.5rem;
font-weight: 900;
color: var(--vid-text);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
max-width: 850px;
}
.vid-hero-subtitle {
font-size: 1rem;
color: var(--vid-text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 760px;
}
/* Actions Row */
.vid-hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-bottom: 3.5rem;
}
/* Covered Banner */
.vid-hero-visual-deck {
width: 100%;
position: relative;
border-radius: var(--vid-radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: var(--vid-shadow);
border: 1px solid var(--vid-border-strong);
}
.vid-hero-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--vid-transition);
}
.vid-hero-visual-deck:hover .vid-hero-cover-img {
transform: scale(1.02);
}
/* Vignette overlay */
.vid-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(8, 8, 12, 0.9) 100%);
pointer-events: none;
}
@media (max-width: 768px) {
.vid-hero-title {
font-size: 2.5rem;
}
.vid-hero-subtitle {
font-size: 0.9rem;
}
.vid-hero-actions {
flex-direction: column;
width: 100%;
gap: 0.85rem;
}
.vid-hero-actions .vid-btn {
width: 100%;
}
}
Cinematic Teaser Grid
HTML
<section class="vid-hero-split">
<!-- Left Info Row -->
<div class="vid-split-left">
<div class="vid-show-badge-row">
<span class="vid-badge vid-badge-accent">Trending #1 Movie</span>
<span class="vid-match-score">99% Match</span>
</div>
<h2 class="vid-split-title">ASYNCHRONOUS DECAY</h2>
<p class="vid-split-desc">
In the year 2084, humanity survives inside heavily isolated geodesic domes. When a deep-space communications array picks up an asynchronous signal echoing from a dead planet, an astrophysicist must decipher the code before the dome's thermal grids collapse.
</p>
<!-- Cast & Director Summaries -->
<div class="vid-split-cast">
<div class="vid-cast-member">
<span class="vid-cast-role">Director</span>
<span class="vid-cast-name">Marcus Sterling</span>
</div>
<div class="vid-cast-member">
<span class="vid-cast-role">Starring</span>
<span class="vid-cast-name">Elena Rostova, Dr. Julian Cho</span>
</div>
</div>
<!-- Cinema action play triggers -->
<div class="vid-split-actions">
<button class="vid-btn vid-btn-primary">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:18px;height:18px;margin-right:4px;"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
Watch Movie
</button>
<button class="vid-btn vid-btn-outline">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:16px;height:16px;margin-right:4px;"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
Add to Watchlist
</button>
</div>
</div>
<!-- Right Media Mockup Card Column -->
<div class="vid-split-right">
<div class="vid-cinema-poster-wrapper">
<img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=600&q=80" alt="Cinematic vintage neon theater projector movie screen" class="vid-cinema-poster">
<span class="vid-poster-badge">New Release</span>
<div class="vid-poster-overlay">
<button class="vid-poster-play-btn" aria-label="Watch Trailer">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
</button>
<span class="vid-poster-play-label">Watch Teaser Trailer</span>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Cinematic Teaser Grid */
/* NOTE: This component requires base.css to be included in your page. */
.vid-hero-split {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3.5rem;
padding: 3rem 2rem;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
align-items: center;
}
/* Left Content Column */
.vid-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vid-show-badge-row {
display: flex;
align-items: center;
gap: 1rem;
}
.vid-split-title {
font-family: var(--vid-font-heading);
font-size: 2.75rem;
font-weight: 900;
line-height: 1.15;
letter-spacing: -0.01em;
}
.vid-split-desc {
font-size: 0.95rem;
color: var(--vid-text-muted);
line-height: 1.6;
}
/* Cast Details */
.vid-split-cast {
display: flex;
flex-direction: column;
gap: 0.5rem;
border-left: 3px solid var(--vid-primary);
padding-left: 1rem;
margin: 0.5rem 0;
}
.vid-cast-member {
font-size: 0.85rem;
display: flex;
gap: 0.5rem;
}
.vid-cast-role {
font-weight: 700;
color: var(--vid-text-light);
text-transform: uppercase;
font-size: 0.725rem;
letter-spacing: 0.05em;
width: 80px;
}
.vid-cast-name {
color: var(--vid-text-muted);
}
/* Actions Row */
.vid-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right Media Poster Column */
.vid-split-right {
display: flex;
justify-content: center;
align-items: center;
}
.vid-cinema-poster-wrapper {
position: relative;
width: 100%;
max-width: 340px;
aspect-ratio: 2 / 3;
border-radius: var(--vid-radius-lg);
overflow: hidden;
box-shadow: var(--vid-shadow), 0 20px 40px rgba(0,0,0,0.6);
border: 1px solid var(--vid-border-strong);
}
.vid-cinema-poster {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--vid-transition);
}
.vid-poster-badge {
position: absolute;
top: 1rem;
left: 1rem;
background-color: var(--vid-primary);
color: #fff;
font-family: var(--vid-font-heading);
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.35rem 0.75rem;
border-radius: var(--vid-radius-sm);
z-index: 3;
box-shadow: var(--vid-shadow-sm);
}
/* Poster Overlay Play controls */
.vid-poster-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8,8,12,0.95) 0%, rgba(8,8,12,0.4) 60%, transparent 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 2.5rem;
gap: 0.75rem;
opacity: 0.85;
transition: var(--vid-transition);
}
.vid-poster-play-btn {
width: 54px;
height: 54px;
border-radius: 50%;
background-color: var(--vid-primary);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--vid-shadow-glow);
transition: var(--vid-transition);
}
.vid-poster-play-btn svg {
width: 20px;
height: 20px;
margin-left: 2px;
}
.vid-poster-play-label {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
}
/* Hover effects */
.vid-cinema-poster-wrapper:hover .vid-cinema-poster {
transform: scale(1.04);
}
.vid-cinema-poster-wrapper:hover .vid-poster-overlay {
opacity: 1;
background: linear-gradient(to top, rgba(8,8,12,0.95) 0%, rgba(8,8,12,0.6) 80%, transparent 100%);
}
.vid-cinema-poster-wrapper:hover .vid-poster-play-btn {
transform: scale(1.1);
background-color: var(--vid-primary-hover);
box-shadow: var(--vid-shadow-glow-lg);
}
@media (max-width: 992px) {
.vid-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.vid-split-right {
order: -1;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-hero-split {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3.5rem;
padding: 3rem 2rem;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
align-items: center;
}
/* Left Content Column */
.vid-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vid-show-badge-row {
display: flex;
align-items: center;
gap: 1rem;
}
.vid-split-title {
font-family: var(--vid-font-heading);
font-size: 2.75rem;
font-weight: 900;
line-height: 1.15;
letter-spacing: -0.01em;
}
.vid-split-desc {
font-size: 0.95rem;
color: var(--vid-text-muted);
line-height: 1.6;
}
/* Cast Details */
.vid-split-cast {
display: flex;
flex-direction: column;
gap: 0.5rem;
border-left: 3px solid var(--vid-primary);
padding-left: 1rem;
margin: 0.5rem 0;
}
.vid-cast-member {
font-size: 0.85rem;
display: flex;
gap: 0.5rem;
}
.vid-cast-role {
font-weight: 700;
color: var(--vid-text-light);
text-transform: uppercase;
font-size: 0.725rem;
letter-spacing: 0.05em;
width: 80px;
}
.vid-cast-name {
color: var(--vid-text-muted);
}
/* Actions Row */
.vid-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right Media Poster Column */
.vid-split-right {
display: flex;
justify-content: center;
align-items: center;
}
.vid-cinema-poster-wrapper {
position: relative;
width: 100%;
max-width: 340px;
aspect-ratio: 2 / 3;
border-radius: var(--vid-radius-lg);
overflow: hidden;
box-shadow: var(--vid-shadow), 0 20px 40px rgba(0,0,0,0.6);
border: 1px solid var(--vid-border-strong);
}
.vid-cinema-poster {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--vid-transition);
}
.vid-poster-badge {
position: absolute;
top: 1rem;
left: 1rem;
background-color: var(--vid-primary);
color: #fff;
font-family: var(--vid-font-heading);
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.35rem 0.75rem;
border-radius: var(--vid-radius-sm);
z-index: 3;
box-shadow: var(--vid-shadow-sm);
}
/* Poster Overlay Play controls */
.vid-poster-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8,8,12,0.95) 0%, rgba(8,8,12,0.4) 60%, transparent 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 2.5rem;
gap: 0.75rem;
opacity: 0.85;
transition: var(--vid-transition);
}
.vid-poster-play-btn {
width: 54px;
height: 54px;
border-radius: 50%;
background-color: var(--vid-primary);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--vid-shadow-glow);
transition: var(--vid-transition);
}
.vid-poster-play-btn svg {
width: 20px;
height: 20px;
margin-left: 2px;
}
.vid-poster-play-label {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
}
/* Hover effects */
.vid-cinema-poster-wrapper:hover .vid-cinema-poster {
transform: scale(1.04);
}
.vid-cinema-poster-wrapper:hover .vid-poster-overlay {
opacity: 1;
background: linear-gradient(to top, rgba(8,8,12,0.95) 0%, rgba(8,8,12,0.6) 80%, transparent 100%);
}
.vid-cinema-poster-wrapper:hover .vid-poster-play-btn {
transform: scale(1.1);
background-color: var(--vid-primary-hover);
box-shadow: var(--vid-shadow-glow-lg);
}
@media (max-width: 992px) {
.vid-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.vid-split-right {
order: -1;
}
}
Forms
Viewer Access Portal
HTML
<div class="vid-login-card">
<div class="vid-login-header">
<span class="vid-logo-icon">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px;"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</span>
<h2 class="vid-login-title">Sign In</h2>
<p class="vid-login-desc">Enter your credentials to unlock personalized watchlists, offline sync, and UHD streaming feeds.</p>
</div>
<form class="vid-login-form" onsubmit="return false;">
<div class="vid-form-group">
<label for="email" class="vid-label">Email or Phone Number</label>
<input type="email" id="email" class="vid-input" placeholder="[email protected]" required>
</div>
<div class="vid-form-group">
<div class="vid-label-row">
<label for="password" class="vid-label">Password</label>
<a href="#" class="vid-form-link">Need assistance?</a>
</div>
<input type="password" id="password" class="vid-input" placeholder="••••••••••••" required>
</div>
<div class="vid-form-remember">
<label class="vid-checkbox-wrapper">
<input type="checkbox" name="remember" class="vid-checkbox" checked>
<span class="vid-checkbox-label">Remember my login on this device</span>
</label>
</div>
<button type="submit" class="vid-btn vid-btn-primary vid-btn-block">
Sign In
</button>
<div class="vid-login-footer">
<span class="vid-signup-prompt">New to Cineverse? <a href="#" class="vid-signup-link">Sign up now.</a></span>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Viewer Access Portal */
/* NOTE: This component requires base.css to be included in your page. */
.vid-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 3rem 2.5rem;
}
.vid-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.vid-login-header .vid-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.vid-login-title {
font-family: var(--vid-font-heading);
font-size: 1.75rem;
font-weight: 900;
margin-bottom: 0.5rem;
}
.vid-login-desc {
font-size: 0.825rem;
color: var(--vid-text-muted);
line-height: 1.5;
}
.vid-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vid-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.vid-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.vid-label-row .vid-label {
margin-bottom: 0;
}
.vid-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--vid-text-muted);
text-decoration: none;
transition: var(--vid-transition);
}
.vid-form-link:hover {
color: var(--vid-primary-hover);
text-decoration: underline;
}
/* Custom Checkbox */
.vid-form-remember {
display: flex;
align-items: center;
}
.vid-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.vid-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--vid-border-strong);
border-radius: var(--vid-radius-sm);
outline: none;
background-color: var(--vid-bg);
cursor: pointer;
transition: var(--vid-transition);
position: relative;
flex-shrink: 0;
}
.vid-checkbox:checked {
background-color: var(--vid-primary);
border-color: var(--vid-primary);
}
.vid-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.vid-checkbox-label {
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* Footer sign up prompt */
.vid-login-footer {
border-top: 1px solid var(--vid-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.vid-signup-prompt {
font-size: 0.8rem;
color: var(--vid-text-muted);
}
.vid-signup-link {
color: #fff;
font-weight: 700;
text-decoration: none;
transition: var(--vid-transition);
}
.vid-signup-link:hover {
color: var(--vid-primary-hover);
text-decoration: underline;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 3rem 2.5rem;
}
.vid-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.vid-login-header .vid-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.vid-login-title {
font-family: var(--vid-font-heading);
font-size: 1.75rem;
font-weight: 900;
margin-bottom: 0.5rem;
}
.vid-login-desc {
font-size: 0.825rem;
color: var(--vid-text-muted);
line-height: 1.5;
}
.vid-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vid-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.vid-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.vid-label-row .vid-label {
margin-bottom: 0;
}
.vid-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--vid-text-muted);
text-decoration: none;
transition: var(--vid-transition);
}
.vid-form-link:hover {
color: var(--vid-primary-hover);
text-decoration: underline;
}
/* Custom Checkbox */
.vid-form-remember {
display: flex;
align-items: center;
}
.vid-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.vid-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--vid-border-strong);
border-radius: var(--vid-radius-sm);
outline: none;
background-color: var(--vid-bg);
cursor: pointer;
transition: var(--vid-transition);
position: relative;
flex-shrink: 0;
}
.vid-checkbox:checked {
background-color: var(--vid-primary);
border-color: var(--vid-primary);
}
.vid-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.vid-checkbox-label {
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* Footer sign up prompt */
.vid-login-footer {
border-top: 1px solid var(--vid-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.vid-signup-prompt {
font-size: 0.8rem;
color: var(--vid-text-muted);
}
.vid-signup-link {
color: #fff;
font-weight: 700;
text-decoration: none;
transition: var(--vid-transition);
}
.vid-signup-link:hover {
color: var(--vid-primary-hover);
text-decoration: underline;
}
Plan Settings Billing
HTML
<div class="vid-dispatch-card">
<div class="vid-dispatch-header">
<span class="vid-dispatch-tag">Plan Settings</span>
<h2 class="vid-dispatch-title">Stream Configuration</h2>
<p class="vid-dispatch-desc">Select your resolution coordinates, concurrent stream capacities, and active billing cycle thresholds.</p>
</div>
<form class="vid-dispatch-form" onsubmit="return false;">
<!-- Selection dropdown -->
<div class="pod-form-group">
<label for="plan-tier" class="pod-label">Selected Tier Plan</label>
<select id="plan-tier" class="pod-select">
<option value="basic">Standard - 1080p Full HD ($9.99/mo)</option>
<option value="premium" selected>Premium - 4K Ultra HD & Dolby Atmos ($15.99/mo)</option>
<option value="fellow">Cineverse Fellow - Unlimited Screens ($24.99/mo)</option>
</select>
</div>
<div class="vid-form-group">
<label class="vid-label">Active Modules Enabled</label>
<div class="vid-checkbox-grid">
<label class="vid-checkbox-wrapper">
<input type="checkbox" class="vid-checkbox" checked>
<span class="vid-checkbox-label">Early Pre-Release Screenings</span>
</label>
<label class="vid-checkbox-wrapper">
<input type="checkbox" class="vid-checkbox" checked>
<span class="vid-checkbox-label">4 Concurrent Screens Capacity</span>
</label>
<label class="vid-checkbox-wrapper">
<input type="checkbox" class="vid-checkbox">
<span class="vid-checkbox-label">Dolby Atmos Audio Codecs</span>
</label>
<label class="vid-checkbox-wrapper">
<input type="checkbox" class="vid-checkbox">
<span class="vid-checkbox-label">Offline Sync Modes</span>
</label>
</div>
</div>
<button type="submit" class="vid-btn vid-btn-primary vid-btn-block">
Apply Configuration Changes
</button>
<span class="vid-form-privacy">Your card (ending in •••• 4242) will be billed $15.99 on June 19, 2026.</span>
</form>
</div>
CSS (Component Only)
/* Component: Plan Settings Billing */
/* NOTE: This component requires base.css to be included in your page. */
.vid-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 3rem 2.5rem;
}
.vid-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.vid-dispatch-tag {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--vid-primary-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.vid-dispatch-title {
font-family: var(--vid-font-heading);
font-size: 1.75rem;
font-weight: 900;
margin-bottom: 0.75rem;
}
.vid-dispatch-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.6;
}
.vid-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vid-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--vid-bg);
border: 1px solid var(--vid-border);
padding: 1.25rem;
border-radius: var(--vid-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.vid-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.vid-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--vid-border-strong);
border-radius: var(--vid-radius-sm);
outline: none;
background-color: var(--vid-surface);
cursor: pointer;
transition: var(--vid-transition);
position: relative;
flex-shrink: 0;
}
.vid-checkbox:checked {
background-color: var(--vid-primary);
border-color: var(--vid-primary);
}
.vid-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.vid-checkbox-label {
font-size: 0.8rem;
color: var(--vid-text-muted);
line-height: 1.2;
}
.vid-form-privacy {
font-size: 0.725rem;
color: var(--vid-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.vid-checkbox-grid {
grid-template-columns: 1fr;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 3rem 2.5rem;
}
.vid-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.vid-dispatch-tag {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--vid-primary-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.vid-dispatch-title {
font-family: var(--vid-font-heading);
font-size: 1.75rem;
font-weight: 900;
margin-bottom: 0.75rem;
}
.vid-dispatch-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.6;
}
.vid-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vid-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--vid-bg);
border: 1px solid var(--vid-border);
padding: 1.25rem;
border-radius: var(--vid-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.vid-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.vid-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--vid-border-strong);
border-radius: var(--vid-radius-sm);
outline: none;
background-color: var(--vid-surface);
cursor: pointer;
transition: var(--vid-transition);
position: relative;
flex-shrink: 0;
}
.vid-checkbox:checked {
background-color: var(--vid-primary);
border-color: var(--vid-primary);
}
.vid-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.vid-checkbox-label {
font-size: 0.8rem;
color: var(--vid-text-muted);
line-height: 1.2;
}
.vid-form-privacy {
font-size: 0.725rem;
color: var(--vid-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.vid-checkbox-grid {
grid-template-columns: 1fr;
}
}
Cards
Video Stream Cards
HTML
<div class="vid-cards-grid">
<!-- Vertical Movie Card -->
<article class="vid-stream-card vid-card">
<div class="vid-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=600&q=80" alt="Cinematic vintage neon projector" class="vid-card-img">
<span class="vid-card-badge">Sci-Fi Thriller</span>
<!-- Overlay Play Hover Trigger -->
<button class="vid-card-play-overlay" aria-label="Watch this movie now">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
</button>
</div>
<div class="vid-card-body">
<div class="vid-card-meta">
<span class="vid-score">95% Match</span>
<span class="vid-bullet">•</span>
<span>2h 14m</span>
<span class="vid-bullet">•</span>
<span class="vid-card-quality">Ultra HD</span>
</div>
<h3 class="vid-card-title">
<a href="#" class="vid-card-link">Asynchronous Decay: Geodesic Geometries</a>
</h3>
<p class="vid-card-excerpt">Deciphering deep-space coordinates inside geodetic dome networks before atmospheric collapse triggers total structural failure.</p>
<div class="vid-card-footer">
<div class="vid-card-cast">
<span class="vid-cast-by">Starring</span>
<span class="vid-card-cast-names">Elena Rostova, Julian Cho</span>
</div>
<span class="vid-watch-cta">Play Now</span>
</div>
</div>
</article>
<!-- Horizontal Movie Card with active viewing progress line -->
<article class="vid-stream-card-horizontal vid-card">
<div class="vid-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&w=600&q=80" alt="Cyber abstract sound wavelength" class="vid-card-img">
<span class="vid-card-badge">Futuristic</span>
<!-- Active progress bar overlay at the base of the image -->
<div class="vid-image-progress-bar">
<div class="vid-image-progress-fill" style="width: 48%;"></div>
</div>
<!-- Overlay Play Hover Trigger -->
<button class="vid-card-play-overlay" aria-label="Resume movie">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
</button>
</div>
<div class="vid-card-body">
<div class="vid-card-meta">
<span class="vid-score">92% Match</span>
<span class="vid-bullet">•</span>
<span>48 mins left</span>
</div>
<h3 class="vid-card-title">
<a href="#" class="vid-card-link">The Quantum Code: Neural Singularity</a>
</h3>
<p class="vid-card-excerpt">Season 2, Episode 3: Marcus Vance navigates critical hardware firewalls to validate artificial telepathic synapses.</p>
<div class="vid-card-footer">
<div class="vid-card-cast">
<span class="vid-cast-by">Starring</span>
<span class="vid-card-cast-names">Marcus Vance, Silvia Cho</span>
</div>
<span class="vid-watch-cta">Resume Stream</span>
</div>
</div>
</article>
</div>
CSS (Component Only)
/* Component: Video Stream Cards */
/* NOTE: This component requires base.css to be included in your page. */
.vid-cards-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.vid-stream-card, .vid-stream-card-horizontal {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 !important; /* override default card padding */
background-color: var(--vid-surface);
}
.vid-card-img-wrapper {
position: relative;
width: 100%;
overflow: hidden;
cursor: pointer;
}
.vid-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--vid-transition);
}
.vid-card-badge {
position: absolute;
top: 1.25rem;
left: 1.25rem;
background-color: var(--vid-primary);
color: #fff;
font-family: var(--vid-font-heading);
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.35rem 0.75rem;
border-radius: var(--vid-radius-sm);
z-index: 3;
box-shadow: var(--vid-shadow-sm);
}
/* Base progress line at image foot */
.vid-image-progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: rgba(255, 255, 255, 0.25);
z-index: 3;
}
.vid-image-progress-fill {
height: 100%;
background-color: var(--vid-primary);
box-shadow: 0 0 10px var(--vid-primary);
}
/* Play Hover Overlay */
.vid-card-play-overlay {
position: absolute;
inset: 0;
background-color: rgba(8, 8, 12, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
border: none;
cursor: pointer;
z-index: 2;
transition: var(--vid-transition);
}
.vid-card-play-overlay svg {
width: 48px;
height: 48px;
color: #fff;
background-color: var(--vid-primary);
border-radius: 50%;
padding: 12px;
box-shadow: var(--vid-shadow-glow-lg);
transform: scale(0.85);
transition: var(--vid-transition);
}
.vid-card-img-wrapper:hover .vid-card-play-overlay {
opacity: 1;
}
.vid-card-img-wrapper:hover .vid-card-play-overlay svg {
transform: scale(1);
background-color: var(--vid-primary-hover);
}
.vid-card-img-wrapper:hover .vid-card-img {
transform: scale(1.04);
}
/* Body */
.vid-card-body {
display: flex;
flex-direction: column;
padding: 2rem;
gap: 0.85rem;
flex: 1;
}
.vid-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--vid-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-score {
color: var(--vid-success);
font-weight: 800;
}
.vid-card-quality {
border: 1px solid var(--vid-border-strong);
padding: 0.1rem 0.35rem;
font-size: 0.65rem;
border-radius: var(--vid-radius-sm);
}
.vid-bullet {
color: var(--vid-border-strong);
}
.vid-card-title {
font-family: var(--vid-font-heading);
font-size: 1.35rem;
font-weight: 800;
line-height: 1.3;
}
.vid-card-link {
color: #fff;
text-decoration: none;
transition: var(--vid-transition);
}
.vid-card-link:hover {
color: var(--vid-primary-hover);
}
.vid-card-excerpt {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Footer cast info */
.vid-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--vid-border);
padding-top: 1.25rem;
margin-top: auto;
}
.vid-card-cast {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
.vid-cast-by {
font-size: 0.65rem;
color: var(--vid-text-light);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.vid-card-cast-names {
font-size: 0.75rem;
font-weight: 700;
color: #fff;
}
.vid-watch-cta {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 800;
color: var(--vid-primary-hover);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--vid-transition);
}
.vid-stream-card-horizontal:hover .vid-watch-cta,
.vid-stream-card:hover .vid-watch-cta {
color: #fff;
}
/* Sizing specific horizontal vs vertical */
.vid-stream-card .vid-card-img-wrapper {
height: 240px;
}
.vid-stream-card-horizontal {
flex-direction: row;
}
.vid-stream-card-horizontal .vid-card-img-wrapper {
width: 40%;
height: 100%;
min-height: 100%;
}
@media (max-width: 992px) {
.vid-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 576px) {
.vid-stream-card-horizontal {
flex-direction: column;
}
.vid-stream-card-horizontal .vid-card-img-wrapper {
width: 100%;
height: 200px;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-cards-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.vid-stream-card, .vid-stream-card-horizontal {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 !important; /* override default card padding */
background-color: var(--vid-surface);
}
.vid-card-img-wrapper {
position: relative;
width: 100%;
overflow: hidden;
cursor: pointer;
}
.vid-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--vid-transition);
}
.vid-card-badge {
position: absolute;
top: 1.25rem;
left: 1.25rem;
background-color: var(--vid-primary);
color: #fff;
font-family: var(--vid-font-heading);
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.35rem 0.75rem;
border-radius: var(--vid-radius-sm);
z-index: 3;
box-shadow: var(--vid-shadow-sm);
}
/* Base progress line at image foot */
.vid-image-progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: rgba(255, 255, 255, 0.25);
z-index: 3;
}
.vid-image-progress-fill {
height: 100%;
background-color: var(--vid-primary);
box-shadow: 0 0 10px var(--vid-primary);
}
/* Play Hover Overlay */
.vid-card-play-overlay {
position: absolute;
inset: 0;
background-color: rgba(8, 8, 12, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
border: none;
cursor: pointer;
z-index: 2;
transition: var(--vid-transition);
}
.vid-card-play-overlay svg {
width: 48px;
height: 48px;
color: #fff;
background-color: var(--vid-primary);
border-radius: 50%;
padding: 12px;
box-shadow: var(--vid-shadow-glow-lg);
transform: scale(0.85);
transition: var(--vid-transition);
}
.vid-card-img-wrapper:hover .vid-card-play-overlay {
opacity: 1;
}
.vid-card-img-wrapper:hover .vid-card-play-overlay svg {
transform: scale(1);
background-color: var(--vid-primary-hover);
}
.vid-card-img-wrapper:hover .vid-card-img {
transform: scale(1.04);
}
/* Body */
.vid-card-body {
display: flex;
flex-direction: column;
padding: 2rem;
gap: 0.85rem;
flex: 1;
}
.vid-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--vid-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-score {
color: var(--vid-success);
font-weight: 800;
}
.vid-card-quality {
border: 1px solid var(--vid-border-strong);
padding: 0.1rem 0.35rem;
font-size: 0.65rem;
border-radius: var(--vid-radius-sm);
}
.vid-bullet {
color: var(--vid-border-strong);
}
.vid-card-title {
font-family: var(--vid-font-heading);
font-size: 1.35rem;
font-weight: 800;
line-height: 1.3;
}
.vid-card-link {
color: #fff;
text-decoration: none;
transition: var(--vid-transition);
}
.vid-card-link:hover {
color: var(--vid-primary-hover);
}
.vid-card-excerpt {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Footer cast info */
.vid-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--vid-border);
padding-top: 1.25rem;
margin-top: auto;
}
.vid-card-cast {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
.vid-cast-by {
font-size: 0.65rem;
color: var(--vid-text-light);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.vid-card-cast-names {
font-size: 0.75rem;
font-weight: 700;
color: #fff;
}
.vid-watch-cta {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 800;
color: var(--vid-primary-hover);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--vid-transition);
}
.vid-stream-card-horizontal:hover .vid-watch-cta,
.vid-stream-card:hover .vid-watch-cta {
color: #fff;
}
/* Sizing specific horizontal vs vertical */
.vid-stream-card .vid-card-img-wrapper {
height: 240px;
}
.vid-stream-card-horizontal {
flex-direction: row;
}
.vid-stream-card-horizontal .vid-card-img-wrapper {
width: 40%;
height: 100%;
min-height: 100%;
}
@media (max-width: 992px) {
.vid-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 576px) {
.vid-stream-card-horizontal {
flex-direction: column;
}
.vid-stream-card-horizontal .vid-card-img-wrapper {
width: 100%;
height: 200px;
}
}
Viewer Stream Metrics
HTML
<div class="vid-stats-row">
<!-- Stat 1 -->
<div class="vid-stat-card vid-card">
<div class="vid-stat-icon-wrapper vid-badge-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5v14M22 9v6M7 8v8M2 10v4"></path></svg>
</div>
<div class="vid-stat-details">
<span class="vid-stat-label">Viewing History Duration</span>
<div class="vid-stat-value-group">
<span class="vid-stat-value">142.5K</span>
<span class="vid-stat-change positive">Mins</span>
</div>
<span class="vid-stat-desc">Total screening minutes synchronized this season across all screens.</span>
</div>
</div>
<!-- Stat 2 -->
<div class="vid-stat-card vid-card">
<div class="vid-stat-icon-wrapper vid-badge-accent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
<div class="vid-stat-details">
<span class="vid-stat-label">Active Profiles</span>
<div class="vid-stat-value-group">
<span class="vid-stat-value">4 / 5</span>
<span class="vid-stat-change positive">Active</span>
</div>
<span class="vid-stat-desc">Active viewer slots assigned under standard credentials.</span>
</div>
</div>
<!-- Stat 3 -->
<div class="vid-stat-card vid-card">
<div class="vid-stat-icon-wrapper vid-badge-default">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
<div class="vid-stat-details">
<span class="vid-stat-label">Stream Quality Match</span>
<div class="vid-stat-value-group">
<span class="vid-stat-value">4.9 / 5</span>
<span class="vid-stat-change positive">Perfect</span>
</div>
<!-- Progress mini bar representing proportion of UHD stream successful matches -->
<div class="vid-stat-progress-wrapper">
<div class="vid-stat-progress-bar" style="width: 96%;"></div>
</div>
<span class="vid-stat-desc">Ratio of streams completed in 2160p 4K resolution matches.</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Viewer Stream Metrics */
/* NOTE: This component requires base.css to be included in your page. */
.vid-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.vid-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.vid-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--vid-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.vid-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.vid-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.vid-stat-label {
font-family: var(--vid-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vid-text-light);
}
.vid-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.vid-stat-value {
font-family: var(--vid-font-heading);
font-size: 2rem;
font-weight: 900;
color: #fff;
line-height: 1;
}
.vid-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--vid-radius-sm);
}
.vid-stat-change.positive {
color: var(--vid-primary-hover);
}
.vid-stat-desc {
font-size: 0.725rem;
color: var(--vid-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.vid-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--vid-border-strong);
border-radius: var(--vid-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.vid-stat-progress-bar {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
box-shadow: 0 0 8px var(--vid-primary);
}
@media (max-width: 992px) {
.vid-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.vid-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.vid-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--vid-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.vid-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.vid-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.vid-stat-label {
font-family: var(--vid-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vid-text-light);
}
.vid-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.vid-stat-value {
font-family: var(--vid-font-heading);
font-size: 2rem;
font-weight: 900;
color: #fff;
line-height: 1;
}
.vid-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--vid-radius-sm);
}
.vid-stat-change.positive {
color: var(--vid-primary-hover);
}
.vid-stat-desc {
font-size: 0.725rem;
color: var(--vid-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.vid-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--vid-border-strong);
border-radius: var(--vid-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.vid-stat-progress-bar {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
box-shadow: 0 0 8px var(--vid-primary);
}
@media (max-width: 992px) {
.vid-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Tables
Media Archives Table
HTML
<div class="vid-table-wrapper vid-card">
<div class="vid-table-header">
<h3 class="vid-table-title">Cinematic Database Directory</h3>
<p class="vid-table-desc">Explore Cineverse releases, cast listings, duration specs, and direct screening launchers.</p>
</div>
<div class="vid-table-scroll">
<table class="vid-table">
<thead>
<tr>
<th>Title Details</th>
<th>Director</th>
<th>Genre</th>
<th>Duration</th>
<th>Release</th>
<th>Watch</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td class="vid-title-cell">
<span class="vid-episode-title">The Chronicles of Neural Link: Season 3</span>
<span class="vid-episode-release">98% Match rating score</span>
</td>
<td>
<div class="vid-table-guest">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=80&q=80" alt="Sarah Cole" class="vid-table-avatar">
<span>Dr. Silvia Cho</span>
</div>
</td>
<td><span class="vid-badge vid-badge-primary">Original Series</span></td>
<td>3 Seasons</td>
<td>2026</td>
<td>
<button class="vid-btn vid-btn-outline vid-btn-sm">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:12px;height:12px;margin-right:2px;"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
Play
</button>
</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="vid-title-cell">
<span class="vid-episode-title">Asynchronous Decay: Geodesic Geometries</span>
<span class="vid-episode-release">95% Match rating score</span>
</td>
<td>
<div class="vid-table-guest">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80" alt="Marcus Vance" class="vid-table-avatar">
<span>Marcus Sterling</span>
</div>
</td>
<td><span class="vid-badge vid-badge-accent">Sci-Fi Thriller</span></td>
<td>2h 14m</td>
<td>2026</td>
<td>
<button class="vid-btn vid-btn-outline vid-btn-sm">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:12px;height:12px;margin-right:2px;"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
Play
</button>
</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="vid-title-cell">
<span class="vid-episode-title">The Quantum Code: Neural Singularity</span>
<span class="vid-episode-release">92% Match rating score</span>
</td>
<td>
<div class="vid-table-guest">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100&q=80" alt="Arthur Pendelton" class="vid-table-avatar">
<span>Marcus Vance</span>
</div>
</td>
<td><span class="vid-badge vid-badge-primary">Original Series</span></td>
<td>2 Seasons</td>
<td>2025</td>
<td>
<button class="vid-btn vid-btn-outline vid-btn-sm">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:12px;height:12px;margin-right:2px;"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
Play
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS (Component Only)
/* Component: Media Archives Table */
/* NOTE: This component requires base.css to be included in your page. */
.vid-table-wrapper {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.vid-table-header {
margin-bottom: 1.5rem;
}
.vid-table-title {
font-family: var(--vid-font-heading);
font-size: 1.5rem;
font-weight: 900;
margin-bottom: 0.35rem;
}
.vid-table-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
}
.vid-table-scroll {
width: 100%;
overflow-x: auto;
}
.vid-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--vid-font-body);
}
.vid-table th {
font-family: var(--vid-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vid-text-light);
border-bottom: 2px solid var(--vid-border);
padding: 1rem;
}
.vid-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--vid-border);
font-size: 0.85rem;
color: var(--vid-text-muted);
vertical-align: middle;
}
.vid-table tr:hover td {
background-color: var(--vid-surface-2);
}
/* Specific Cells */
.vid-title-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.vid-episode-title {
font-family: var(--vid-font-heading);
font-size: 1.05rem;
font-weight: 800;
color: #fff;
}
.vid-episode-release {
font-size: 0.7rem;
color: var(--vid-success);
font-weight: 700;
}
.vid-table-guest {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #fff;
}
.vid-table-avatar {
width: 24px;
height: 24px;
border-radius: var(--vid-radius-pill);
object-fit: cover;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-table-wrapper {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.vid-table-header {
margin-bottom: 1.5rem;
}
.vid-table-title {
font-family: var(--vid-font-heading);
font-size: 1.5rem;
font-weight: 900;
margin-bottom: 0.35rem;
}
.vid-table-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
}
.vid-table-scroll {
width: 100%;
overflow-x: auto;
}
.vid-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--vid-font-body);
}
.vid-table th {
font-family: var(--vid-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vid-text-light);
border-bottom: 2px solid var(--vid-border);
padding: 1rem;
}
.vid-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--vid-border);
font-size: 0.85rem;
color: var(--vid-text-muted);
vertical-align: middle;
}
.vid-table tr:hover td {
background-color: var(--vid-surface-2);
}
/* Specific Cells */
.vid-title-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.vid-episode-title {
font-family: var(--vid-font-heading);
font-size: 1.05rem;
font-weight: 800;
color: #fff;
}
.vid-episode-release {
font-size: 0.7rem;
color: var(--vid-success);
font-weight: 700;
}
.vid-table-guest {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #fff;
}
.vid-table-avatar {
width: 24px;
height: 24px;
border-radius: var(--vid-radius-pill);
object-fit: cover;
}
Lists
Viewer Activity Feed
HTML
<div class="vid-activity-wrapper vid-card">
<div class="vid-activity-header">
<h3 class="vid-activity-title">Viewer Account Log Feed</h3>
<p class="vid-activity-desc">Track real-time profile activity, shared recommendations, and screening records across standard slots.</p>
</div>
<div class="vid-timeline">
<!-- Comment 1 -->
<div class="vid-timeline-item">
<div class="vid-timeline-icon vid-timeline-comment">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<div class="vid-timeline-content">
<div class="vid-timeline-meta">
<span class="vid-activity-user">Elena Rostova (Main Profile)</span>
<span class="vid-activity-action">rated series</span>
<span class="vid-activity-timestamp">5 Stars</span>
<span class="vid-activity-time">2 Min Ago</span>
</div>
<p class="vid-timeline-text">
"Season 3 of The Chronicles of Neural Link is stellar. The script writing, sound design, and the CGI surrounding Neo-Seoul virtual networks is world-class!"
</p>
</div>
</div>
<!-- System Alert / Bookmark -->
<div class="vid-timeline-item">
<div class="vid-timeline-icon vid-timeline-bookmark">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
</div>
<div class="vid-timeline-content">
<div class="vid-timeline-meta">
<span class="vid-activity-user">Kid Profile Slot</span>
<span class="vid-activity-action">completed watching</span>
<span class="vid-activity-timestamp">Cartoon Loop</span>
<span class="vid-activity-time">15 Min Ago</span>
</div>
<p class="vid-timeline-text">
Finished streaming "Cyber-Critters: Ep. 12" in 1080p Resolution.
</p>
</div>
</div>
<!-- Guest Response -->
<div class="vid-timeline-item">
<div class="vid-timeline-icon vid-timeline-reply">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
</div>
<div class="vid-timeline-content">
<div class="vid-timeline-meta">
<span class="vid-activity-user text-primary">Billing System (Cineverse)</span>
<span class="vid-activity-action">processed cycle</span>
<span class="vid-activity-timestamp">Paid</span>
<span class="vid-activity-time">1 Hour Ago</span>
</div>
<p class="vid-timeline-text">
Successfully processed regular monthly subscription invoice ($15.99). Next billing threshold configured for June 19, 2026.
</p>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Viewer Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */
.vid-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.vid-activity-header {
margin-bottom: 2rem;
}
.vid-activity-title {
font-family: var(--vid-font-heading);
font-size: 1.5rem;
font-weight: 900;
margin-bottom: 0.35rem;
}
.vid-activity-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
}
/* Timeline Wrapper */
.vid-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.vid-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.vid-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.vid-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--vid-border);
}
.vid-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.vid-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--vid-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--vid-text);
border: 1px solid var(--vid-border);
background-color: var(--vid-surface);
z-index: 2;
}
.vid-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.vid-timeline-comment {
background-color: var(--vid-primary-muted);
color: var(--vid-primary-hover);
border-color: var(--vid-primary);
}
.vid-timeline-bookmark {
background-color: var(--vid-accent-muted);
color: var(--vid-accent);
border-color: var(--vid-accent);
}
.vid-timeline-reply {
background-color: var(--vid-success-muted);
color: var(--vid-success);
border-color: var(--vid-success);
}
/* Contents */
.vid-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vid-timeline-meta {
font-size: 0.8rem;
color: var(--vid-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.vid-activity-user {
font-weight: 700;
color: #fff;
}
.vid-activity-action {
color: var(--vid-text-light);
}
.vid-activity-timestamp {
font-family: var(--vid-font-heading);
font-weight: 700;
font-size: 0.75rem;
color: var(--vid-primary-hover);
background-color: var(--vid-surface-2);
padding: 0.15rem 0.45rem;
border-radius: var(--vid-radius-sm);
}
.vid-activity-time {
color: var(--vid-text-light);
font-size: 0.725rem;
margin-left: auto;
}
.vid-timeline-text {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.5;
background-color: var(--vid-bg);
border: 1px solid var(--vid-border);
padding: 1rem 1.25rem;
border-radius: var(--vid-radius-lg);
margin: 0;
}
@media (max-width: 576px) {
.vid-activity-time {
margin-left: 0;
width: 100%;
margin-top: 0.15rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.vid-activity-header {
margin-bottom: 2rem;
}
.vid-activity-title {
font-family: var(--vid-font-heading);
font-size: 1.5rem;
font-weight: 900;
margin-bottom: 0.35rem;
}
.vid-activity-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
}
/* Timeline Wrapper */
.vid-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.vid-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.vid-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.vid-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--vid-border);
}
.vid-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.vid-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--vid-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--vid-text);
border: 1px solid var(--vid-border);
background-color: var(--vid-surface);
z-index: 2;
}
.vid-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.vid-timeline-comment {
background-color: var(--vid-primary-muted);
color: var(--vid-primary-hover);
border-color: var(--vid-primary);
}
.vid-timeline-bookmark {
background-color: var(--vid-accent-muted);
color: var(--vid-accent);
border-color: var(--vid-accent);
}
.vid-timeline-reply {
background-color: var(--vid-success-muted);
color: var(--vid-success);
border-color: var(--vid-success);
}
/* Contents */
.vid-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vid-timeline-meta {
font-size: 0.8rem;
color: var(--vid-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.vid-activity-user {
font-weight: 700;
color: #fff;
}
.vid-activity-action {
color: var(--vid-text-light);
}
.vid-activity-timestamp {
font-family: var(--vid-font-heading);
font-weight: 700;
font-size: 0.75rem;
color: var(--vid-primary-hover);
background-color: var(--vid-surface-2);
padding: 0.15rem 0.45rem;
border-radius: var(--vid-radius-sm);
}
.vid-activity-time {
color: var(--vid-text-light);
font-size: 0.725rem;
margin-left: auto;
}
.vid-timeline-text {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.5;
background-color: var(--vid-bg);
border: 1px solid var(--vid-border);
padding: 1rem 1.25rem;
border-radius: var(--vid-radius-lg);
margin: 0;
}
@media (max-width: 576px) {
.vid-activity-time {
margin-left: 0;
width: 100%;
margin-top: 0.15rem;
}
}
Modals
Premium Stream Unlock
HTML
<div class="vid-modal-overlay">
<div class="vid-modal-card">
<!-- Close Button -->
<button class="vid-modal-close" aria-label="Close dialog">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<div class="vid-modal-body">
<!-- Projector/Ticket Badge -->
<div class="vid-modal-badge-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line></svg>
</div>
<span class="vid-modal-tag">Premium Access Only</span>
<h2 class="vid-modal-title">Unlock Ultra HD 4K streaming</h2>
<p class="vid-modal-desc">
Stream Cineverse Originals, exclusive pre-release theatrical screenings, and full concert sets in pristine 2160p 4K with Dolby Atmos Spatial soundscapes.
</p>
<!-- Plan details -->
<div class="vid-plan-box">
<div class="vid-plan-details">
<span class="vid-plan-name">Premium Cinema Tier</span>
<span class="vid-plan-desc">4 Concurrent Screens + UHD + Dolby Atmos</span>
</div>
<div class="vid-plan-price">
<span class="vid-plan-amount">$15.99</span>
<span class="vid-plan-period">/ month</span>
</div>
</div>
<div class="vid-modal-actions">
<button class="vid-btn vid-btn-primary vid-btn-block">
Start 7-Day Free Trial
</button>
<button class="vid-btn vid-btn-outline vid-btn-block">
Enter Voucher Access Key
</button>
</div>
<a href="#" class="vid-modal-cancel">Return to Public Stream</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Premium Stream Unlock */
/* NOTE: This component requires base.css to be included in your page. */
.vid-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow-glow-lg);
position: relative;
overflow: hidden;
}
.vid-modal-card {
padding: 3rem 2.5rem;
}
.vid-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--vid-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--vid-radius);
transition: var(--vid-transition);
}
.vid-modal-close:hover {
background-color: var(--vid-surface-2);
color: #fff;
}
.vid-modal-close svg {
width: 18px;
height: 18px;
}
.vid-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.vid-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--vid-radius-pill);
background-color: var(--vid-primary-muted);
color: var(--vid-primary-hover);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--vid-shadow-glow);
}
.vid-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.vid-modal-tag {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--vid-primary-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.vid-modal-title {
font-family: var(--vid-font-heading);
font-size: 1.85rem;
font-weight: 900;
line-height: 1.2;
margin: 0;
}
.vid-modal-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.vid-plan-box {
width: 100%;
background-color: var(--vid-bg);
border: 1px solid var(--vid-border);
padding: 1.25rem 1.5rem;
border-radius: var(--vid-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.vid-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.vid-plan-name {
font-family: var(--vid-font-heading);
font-size: 1.1rem;
font-weight: 800;
color: #fff;
}
.vid-plan-desc {
font-size: 0.75rem;
color: var(--vid-text-light);
}
.vid-plan-price {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.vid-plan-amount {
font-family: var(--vid-font-heading);
font-size: 1.65rem;
font-weight: 900;
color: var(--vid-primary-hover);
line-height: 1;
}
.vid-plan-period {
font-size: 0.7rem;
color: var(--vid-text-light);
}
/* Actions */
.vid-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.vid-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--vid-text-light);
text-decoration: none;
transition: var(--vid-transition);
}
.vid-modal-cancel:hover {
color: var(--vid-text-muted);
text-decoration: underline;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Video Streaming Design System (vid-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--vid-bg: #08080C; /* Obsidian Charcoal */
--vid-surface: #101016; /* Dark Coal */
--vid-surface-2: #1A1A24; /* Muted Coal Card */
--vid-surface-glow: rgba(229, 9, 20, 0.05);
/* Brand Palette */
--vid-primary: #E50914; /* Cinematic Crimson */
--vid-primary-hover: #FF3E3E;
--vid-primary-muted: rgba(229, 9, 20, 0.15);
--vid-accent: #F59E0B; /* Amber Rating Accent */
--vid-accent-hover: #FBBF24;
--vid-accent-muted: rgba(245, 158, 11, 0.15);
--vid-success: #10B981;
--vid-success-muted: rgba(16, 185, 129, 0.15);
/* Text */
--vid-text: #FFFFFF; /* White */
--vid-text-muted: #9CA3AF; /* Grey Muted */
--vid-text-light: #6B7280;
/* Borders */
--vid-border: #1A1A24; /* Cyber Dark Border */
--vid-border-strong: #2D2D3D;
--vid-border-glow: rgba(229, 9, 20, 0.3);
/* Geometric Rounded Shapes */
--vid-radius-sm: 4px;
--vid-radius: 8px;
--vid-radius-lg: 12px;
--vid-radius-pill: 999px;
/* Fonts */
--vid-font-heading: 'Outfit', sans-serif;
--vid-font-body: 'Inter', sans-serif;
/* Shadows */
--vid-shadow-sm: 0 2px 10px rgba(0,0,0,0.6);
--vid-shadow: 0 8px 30px rgba(0,0,0,0.8);
--vid-shadow-glow: 0 0 20px rgba(229, 9, 20, 0.15);
--vid-shadow-glow-lg:0 0 45px rgba(229, 9, 20, 0.35);
/* Transition */
--vid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--vid-font-body);
color: var(--vid-text);
background-color: var(--vid-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.vid-card {
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow);
padding: 2.25rem;
transition: var(--vid-transition);
}
.vid-card:hover {
border-color: var(--vid-border-glow);
box-shadow: var(--vid-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vid-font-heading);
font-weight: 700;
margin: 0;
color: var(--vid-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--vid-font-body);
color: var(--vid-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.vid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--vid-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--vid-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--vid-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vid-btn-primary {
background-color: var(--vid-primary);
color: var(--vid-text);
border-color: var(--vid-primary);
box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.vid-btn-primary:hover {
background-color: var(--vid-primary-hover);
border-color: var(--vid-primary-hover);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65);
transform: translateY(-1px);
}
.vid-btn-accent {
background-color: var(--vid-accent);
color: var(--vid-bg);
border-color: var(--vid-accent);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.vid-btn-accent:hover {
background-color: var(--vid-accent-hover);
border-color: var(--vid-accent-hover);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
transform: translateY(-1px);
}
.vid-btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vid-text);
border-color: var(--vid-border-strong);
}
.vid-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--vid-text-muted);
}
.vid-btn-ghost {
background-color: transparent;
color: var(--vid-text-muted);
border-color: transparent;
}
.vid-btn-ghost:hover {
background-color: var(--vid-surface-2);
color: var(--vid-text);
}
.vid-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.vid-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.vid-btn-block { width: 100%; }
.vid-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--vid-radius); }
/* ── Form Controls ────────────── */
.vid-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius);
font-family: var(--vid-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--vid-text);
background-color: var(--vid-bg);
outline: none;
transition: var(--vid-transition);
}
.vid-input::placeholder { color: var(--vid-text-light); }
.vid-input:focus {
border-color: var(--vid-primary);
background-color: rgba(229, 9, 20, 0.01);
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.vid-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--vid-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--vid-text-muted);
}
/* ── Badges ───────────────────── */
.vid-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--vid-radius-sm);
font-family: var(--vid-font-heading);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
}
.vid-badge-primary { background-color: var(--vid-primary-muted); color: var(--vid-primary-hover); border-color: rgba(229, 9, 20, 0.3); }
.vid-badge-accent { background-color: var(--vid-accent-muted); color: var(--vid-accent); border-color: rgba(245, 158, 11, 0.3); }
.vid-badge-success { background-color: var(--vid-success-muted); color: var(--vid-success); border-color: rgba(16, 185, 129, 0.3); }
.vid-badge-default { background-color: var(--vid-surface-2); color: var(--vid-text-muted); border-color: var(--vid-border); }
/* ── Video Progress Indicator ─── */
.vid-progress-line {
width: 100%;
height: 4px;
background-color: rgba(255,255,255,0.2);
border-radius: var(--vid-radius-pill);
position: relative;
overflow: hidden;
}
.vid-progress-fill {
height: 100%;
background-color: var(--vid-primary);
border-radius: var(--vid-radius-pill);
position: absolute;
left: 0;
top: 0;
box-shadow: 0 0 8px var(--vid-primary);
}
/* ── Divider ──────────────────── */
.vid-divider { border: none; border-top: 1px solid var(--vid-border); margin: 0; }
/* ── Logo ─────────────────────── */
.vid-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--vid-font-heading);
font-size: 1.45rem;
color: var(--vid-text);
font-weight: 900;
letter-spacing: -0.03em;
}
.vid-logo-icon {
width: 30px;
height: 30px;
background-color: var(--vid-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
font-weight: 900;
border-radius: var(--vid-radius-sm);
box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--vid-primary) !important; }
.text-accent { color: var(--vid-accent) !important; }
.text-success { color: var(--vid-success) !important; }
.text-muted { color: var(--vid-text-muted) !important; }
.text-light { color: var(--vid-text-light) !important; }
/* --- COMPONENT STYLES --- */
.vid-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--vid-surface);
border: 1px solid var(--vid-border);
border-radius: var(--vid-radius-lg);
box-shadow: var(--vid-shadow-glow-lg);
position: relative;
overflow: hidden;
}
.vid-modal-card {
padding: 3rem 2.5rem;
}
.vid-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--vid-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--vid-radius);
transition: var(--vid-transition);
}
.vid-modal-close:hover {
background-color: var(--vid-surface-2);
color: #fff;
}
.vid-modal-close svg {
width: 18px;
height: 18px;
}
.vid-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.vid-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--vid-radius-pill);
background-color: var(--vid-primary-muted);
color: var(--vid-primary-hover);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--vid-shadow-glow);
}
.vid-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.vid-modal-tag {
font-family: var(--vid-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--vid-primary-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.vid-modal-title {
font-family: var(--vid-font-heading);
font-size: 1.85rem;
font-weight: 900;
line-height: 1.2;
margin: 0;
}
.vid-modal-desc {
font-size: 0.85rem;
color: var(--vid-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.vid-plan-box {
width: 100%;
background-color: var(--vid-bg);
border: 1px solid var(--vid-border);
padding: 1.25rem 1.5rem;
border-radius: var(--vid-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.vid-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.vid-plan-name {
font-family: var(--vid-font-heading);
font-size: 1.1rem;
font-weight: 800;
color: #fff;
}
.vid-plan-desc {
font-size: 0.75rem;
color: var(--vid-text-light);
}
.vid-plan-price {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.vid-plan-amount {
font-family: var(--vid-font-heading);
font-size: 1.65rem;
font-weight: 900;
color: var(--vid-primary-hover);
line-height: 1;
}
.vid-plan-period {
font-size: 0.7rem;
color: var(--vid-text-light);
}
/* Actions */
.vid-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.vid-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--vid-text-light);
text-decoration: none;
transition: var(--vid-transition);
}
.vid-modal-cancel:hover {
color: var(--vid-text-muted);
text-decoration: underline;
}