Podcast Cyber-Audio - Free HTML/CSS UI Kit
A high-end, premium dark-themed Podcast & Audio Website UI Kit featuring deep obsidian slate surfaces, glowing electric violet accents, Outfit geometric typography, and audio-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
#090D16
Electric Violet
#8B5CF6
Dark Slate
#121824
Text White
#FFFFFF
Muted Slate
#94A3B8
Typography
Hero Sections
Featured Episode Cover
HTML
<section class="pod-hero-centered">
<div class="pod-hero-meta">
<span class="pod-badge pod-badge-primary">Season 3 • Ep. 12</span>
<span class="pod-hero-date">May 19, 2026</span>
<span class="pod-hero-duration">1h 24m</span>
</div>
<h1 class="pod-hero-title">The Singularity and Quantum Leap: Bio-Hacking Human Intellect</h1>
<p class="pod-hero-subtitle">We sit down with cyberneticist Dr. Evelyn Thorne to explore neural link upgrades, biological memory expansions, and the ethical crossroads of human-machine integrations.</p>
<!-- Glowing Circle Play Button -->
<div class="pod-hero-play-wrapper">
<button class="pod-hero-play-btn" aria-label="Play Episode Now">
<svg viewBox="0 0 24 24" fill="currentColor" class="pod-play-icon"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
</button>
<span class="pod-play-label">Play Episode Now</span>
</div>
<!-- Featured Visual Deck -->
<div class="pod-hero-visual-deck">
<div class="pod-visual-wave-container">
<div class="pod-audio-bar-visual animate-bar-1"></div>
<div class="pod-audio-bar-visual animate-bar-2"></div>
<div class="pod-audio-bar-visual animate-bar-3"></div>
<div class="pod-audio-bar-visual animate-bar-4"></div>
<div class="pod-audio-bar-visual animate-bar-5"></div>
<div class="pod-audio-bar-visual animate-bar-6"></div>
<div class="pod-audio-bar-visual animate-bar-7"></div>
</div>
<img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?auto=format&fit=crop&w=1200&q=80" alt="Futuristic neon cybernetic workspace" class="pod-hero-cover-img">
</div>
</section>
CSS (Component Only)
/* Component: Featured Episode Cover */
/* NOTE: This component requires base.css to be included in your page. */
.pod-hero-centered {
width: 100%;
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
}
.pod-hero-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--pod-text-muted);
margin-bottom: 1.5rem;
}
.pod-hero-title {
font-family: var(--pod-font-heading);
font-size: 3.25rem;
font-weight: 800;
color: var(--pod-text);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
max-width: 820px;
}
.pod-hero-subtitle {
font-size: 1.05rem;
color: var(--pod-text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 720px;
}
/* Glowing Play controls */
.pod-hero-play-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-bottom: 3.5rem;
cursor: pointer;
}
.pod-hero-play-btn {
width: 80px;
height: 80px;
border-radius: var(--pod-radius-pill);
background-color: var(--pod-primary);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--pod-shadow-glow-lg);
transition: var(--pod-transition);
}
.pod-hero-play-btn:hover {
transform: scale(1.08);
background-color: var(--pod-primary-hover);
box-shadow: 0 0 35px var(--pod-primary);
}
.pod-play-icon {
width: 28px;
height: 28px;
margin-left: 4px; /* play icon alignment center offset */
}
.pod-play-label {
font-family: var(--pod-font-heading);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pod-primary-hover);
}
/* Visual cover deck */
.pod-hero-visual-deck {
width: 100%;
position: relative;
border-radius: var(--pod-radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: var(--pod-shadow);
}
.pod-hero-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Live glowing audio bars overlaid on the visual cover */
.pod-visual-wave-container {
position: absolute;
bottom: 2rem;
left: 2rem;
display: flex;
align-items: flex-end;
gap: 6px;
z-index: 5;
background-color: rgba(9, 13, 22, 0.75);
backdrop-filter: blur(10px);
border: 1px solid var(--pod-border);
padding: 1rem 1.5rem;
border-radius: var(--pod-radius-lg);
}
.pod-audio-bar-visual {
width: 4px;
height: 40px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
box-shadow: var(--pod-shadow-glow);
}
.animate-bar-1 { animation: visual-bounce-1 1s ease-in-out infinite alternate; }
.animate-bar-2 { animation: visual-bounce-2 0.8s ease-in-out infinite alternate; }
.animate-bar-3 { animation: visual-bounce-3 1.2s ease-in-out infinite alternate; }
.animate-bar-4 { animation: visual-bounce-1 0.7s ease-in-out infinite alternate; }
.animate-bar-5 { animation: visual-bounce-2 1.1s ease-in-out infinite alternate; }
.animate-bar-6 { animation: visual-bounce-3 0.9s ease-in-out infinite alternate; }
.animate-bar-7 { animation: visual-bounce-1 1.3s ease-in-out infinite alternate; }
@keyframes visual-bounce-1 {
0% { height: 10px; }
100% { height: 50px; }
}
@keyframes visual-bounce-2 {
0% { height: 25px; }
100% { height: 60px; }
}
@keyframes visual-bounce-3 {
0% { height: 15px; }
100% { height: 40px; }
}
@media (max-width: 768px) {
.pod-hero-title {
font-size: 2.25rem;
}
.pod-hero-subtitle {
font-size: 0.95rem;
}
.pod-hero-play-btn {
width: 68px;
height: 68px;
}
}
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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-hero-centered {
width: 100%;
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
}
.pod-hero-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--pod-text-muted);
margin-bottom: 1.5rem;
}
.pod-hero-title {
font-family: var(--pod-font-heading);
font-size: 3.25rem;
font-weight: 800;
color: var(--pod-text);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
max-width: 820px;
}
.pod-hero-subtitle {
font-size: 1.05rem;
color: var(--pod-text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 720px;
}
/* Glowing Play controls */
.pod-hero-play-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-bottom: 3.5rem;
cursor: pointer;
}
.pod-hero-play-btn {
width: 80px;
height: 80px;
border-radius: var(--pod-radius-pill);
background-color: var(--pod-primary);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--pod-shadow-glow-lg);
transition: var(--pod-transition);
}
.pod-hero-play-btn:hover {
transform: scale(1.08);
background-color: var(--pod-primary-hover);
box-shadow: 0 0 35px var(--pod-primary);
}
.pod-play-icon {
width: 28px;
height: 28px;
margin-left: 4px; /* play icon alignment center offset */
}
.pod-play-label {
font-family: var(--pod-font-heading);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pod-primary-hover);
}
/* Visual cover deck */
.pod-hero-visual-deck {
width: 100%;
position: relative;
border-radius: var(--pod-radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: var(--pod-shadow);
}
.pod-hero-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Live glowing audio bars overlaid on the visual cover */
.pod-visual-wave-container {
position: absolute;
bottom: 2rem;
left: 2rem;
display: flex;
align-items: flex-end;
gap: 6px;
z-index: 5;
background-color: rgba(9, 13, 22, 0.75);
backdrop-filter: blur(10px);
border: 1px solid var(--pod-border);
padding: 1rem 1.5rem;
border-radius: var(--pod-radius-lg);
}
.pod-audio-bar-visual {
width: 4px;
height: 40px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
box-shadow: var(--pod-shadow-glow);
}
.animate-bar-1 { animation: visual-bounce-1 1s ease-in-out infinite alternate; }
.animate-bar-2 { animation: visual-bounce-2 0.8s ease-in-out infinite alternate; }
.animate-bar-3 { animation: visual-bounce-3 1.2s ease-in-out infinite alternate; }
.animate-bar-4 { animation: visual-bounce-1 0.7s ease-in-out infinite alternate; }
.animate-bar-5 { animation: visual-bounce-2 1.1s ease-in-out infinite alternate; }
.animate-bar-6 { animation: visual-bounce-3 0.9s ease-in-out infinite alternate; }
.animate-bar-7 { animation: visual-bounce-1 1.3s ease-in-out infinite alternate; }
@keyframes visual-bounce-1 {
0% { height: 10px; }
100% { height: 50px; }
}
@keyframes visual-bounce-2 {
0% { height: 25px; }
100% { height: 60px; }
}
@keyframes visual-bounce-3 {
0% { height: 15px; }
100% { height: 40px; }
}
@media (max-width: 768px) {
.pod-hero-title {
font-size: 2.25rem;
}
.pod-hero-subtitle {
font-size: 0.95rem;
}
.pod-hero-play-btn {
width: 68px;
height: 68px;
}
}
Rotating Vinyl Split
HTML
<section class="pod-hero-split">
<!-- Left Info & Player Row -->
<div class="pod-split-left">
<div class="pod-show-badge-row">
<span class="pod-badge pod-badge-accent">Live Broadcast</span>
<span class="pod-listener-count">
<span class="pod-pulse-dot"></span>
12.4K listening
</span>
</div>
<h2 class="pod-split-title">Wavelength: Soundscapes of the Future</h2>
<p class="pod-split-desc">
A weekly deep-dive audio exploration into the sonic codes, synth wave architectures, and bio-hacking mechanics shaping tomorrow's digital civilizations.
</p>
<!-- Host Detail Cards -->
<div class="pod-split-hosts">
<div class="pod-host-profile">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80" alt="Marcus Vance" class="pod-host-avatar">
<div class="pod-host-info">
<span class="pod-host-role">Audio Engineer</span>
<h5 class="pod-host-name">Marcus Vance</h5>
</div>
</div>
<div class="pod-host-profile">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=100&q=80" alt="Dr. Helen Cho" class="pod-host-avatar">
<div class="pod-host-info">
<span class="pod-host-role">Neuroscientist</span>
<h5 class="pod-host-name">Dr. Helen Cho</h5>
</div>
</div>
</div>
<!-- Action Links -->
<div class="pod-split-actions">
<button class="pod-btn pod-btn-primary">
<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>
Listen Now
</button>
<div class="pod-stream-platforms">
<a href="#" class="pod-platform-icon" title="Spotify">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M8 12h8M9 9h6M10 15h4"></path></svg>
</a>
<a href="#" class="pod-platform-icon" title="Apple Podcasts">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v12M8 10h8M10 14h4"></path></svg>
</a>
<a href="#" class="pod-platform-icon" title="YouTube Audio">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="21" ry="21"></rect><polygon points="10 9 15 12 10 15 10 9"></polygon></svg>
</a>
</div>
</div>
</div>
<!-- Right Column: Interactive Rotating Vinyl/Cover Deck -->
<div class="pod-split-right">
<div class="pod-vinyl-wrapper">
<div class="pod-vinyl-plate">
<div class="pod-vinyl-grooves"></div>
<div class="pod-vinyl-center">
<div class="pod-vinyl-spindle"></div>
</div>
</div>
<div class="pod-cover-glowing-wrapper">
<img src="https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&w=600&q=80" alt="Wavelength Neon Cover Art" class="pod-neon-cover">
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Rotating Vinyl Split */
/* NOTE: This component requires base.css to be included in your page. */
.pod-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(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
align-items: center;
}
/* Left Content Column */
.pod-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pod-show-badge-row {
display: flex;
align-items: center;
gap: 1rem;
}
.pod-listener-count {
font-size: 0.8rem;
font-weight: 600;
color: var(--pod-text-muted);
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.pod-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--pod-accent);
box-shadow: 0 0 10px var(--pod-accent);
display: inline-block;
animation: live-indicator-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes live-indicator-pulse {
0% { transform: scale(0.9); opacity: 0.7; }
100% { transform: scale(1.3); opacity: 1; }
}
.pod-split-title {
font-family: var(--pod-font-heading);
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
}
.pod-split-desc {
font-size: 0.95rem;
color: var(--pod-text-muted);
line-height: 1.6;
}
/* Hosts Avatars */
.pod-split-hosts {
display: flex;
align-items: center;
gap: 2rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.pod-host-profile {
display: flex;
align-items: center;
gap: 0.75rem;
}
.pod-host-avatar {
width: 44px;
height: 44px;
border-radius: var(--pod-radius-pill);
object-fit: cover;
border: 2px solid var(--pod-border-strong);
}
.pod-host-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pod-host-role {
font-size: 0.7rem;
color: var(--pod-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.pod-host-name {
font-family: var(--pod-font-heading);
font-size: 0.9rem;
font-weight: 700;
}
/* Actions Row */
.pod-split-actions {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.pod-stream-platforms {
display: flex;
align-items: center;
gap: 0.85rem;
}
.pod-platform-icon {
width: 38px;
height: 38px;
border-radius: var(--pod-radius-pill);
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--pod-text-muted);
transition: var(--pod-transition);
}
.pod-platform-icon:hover {
color: var(--pod-primary-hover);
border-color: var(--pod-primary);
box-shadow: var(--pod-shadow-glow);
transform: translateY(-2px);
}
.pod-platform-icon svg {
width: 18px;
height: 18px;
}
/* Right Interactive Rotating Vinyl Column */
.pod-split-right {
display: flex;
justify-content: center;
align-items: center;
}
.pod-vinyl-wrapper {
position: relative;
width: 320px;
height: 320px;
display: flex;
justify-content: center;
align-items: center;
}
/* Outer Plate vinyl record */
.pod-vinyl-plate {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #0d0d0d;
box-shadow: var(--pod-shadow), 0 0 15px rgba(0, 0, 0, 0.8) inset;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transition: var(--pod-transition);
animation: spin-vinyl 12s linear infinite;
}
/* Grooves styling on the record */
.pod-vinyl-grooves {
position: absolute;
inset: 15px;
border-radius: 50%;
border: 1px double #1a1a1a;
box-shadow: 0 0 10px #000 inset, 0 0 10px #000;
}
.pod-vinyl-center {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
}
.pod-vinyl-spindle {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--pod-border-strong);
box-shadow: 0 0 4px #000 inset;
}
/* Album Cover Overlay slightly offset to reveal record */
.pod-cover-glowing-wrapper {
position: absolute;
width: 180px;
height: 180px;
border-radius: var(--pod-radius-lg);
overflow: hidden;
z-index: 2;
left: 20px;
box-shadow: var(--pod-shadow-sm), 0 10px 30px rgba(0,0,0,0.6);
transition: var(--pod-transition);
border: 1px solid var(--pod-border-strong);
}
.pod-neon-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hover effects */
.pod-vinyl-wrapper:hover .pod-vinyl-plate {
transform: translateX(35px); /* slips out on hover! */
box-shadow: var(--pod-shadow-glow-lg);
}
.pod-vinyl-wrapper:hover .pod-cover-glowing-wrapper {
transform: scale(1.04) rotate(-3deg);
border-color: var(--pod-primary);
box-shadow: var(--pod-shadow-glow);
}
@keyframes spin-vinyl {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 992px) {
.pod-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.pod-split-right {
order: -1; /* visual cover on top on mobile */
}
}
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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-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(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
align-items: center;
}
/* Left Content Column */
.pod-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pod-show-badge-row {
display: flex;
align-items: center;
gap: 1rem;
}
.pod-listener-count {
font-size: 0.8rem;
font-weight: 600;
color: var(--pod-text-muted);
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.pod-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--pod-accent);
box-shadow: 0 0 10px var(--pod-accent);
display: inline-block;
animation: live-indicator-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes live-indicator-pulse {
0% { transform: scale(0.9); opacity: 0.7; }
100% { transform: scale(1.3); opacity: 1; }
}
.pod-split-title {
font-family: var(--pod-font-heading);
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
}
.pod-split-desc {
font-size: 0.95rem;
color: var(--pod-text-muted);
line-height: 1.6;
}
/* Hosts Avatars */
.pod-split-hosts {
display: flex;
align-items: center;
gap: 2rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.pod-host-profile {
display: flex;
align-items: center;
gap: 0.75rem;
}
.pod-host-avatar {
width: 44px;
height: 44px;
border-radius: var(--pod-radius-pill);
object-fit: cover;
border: 2px solid var(--pod-border-strong);
}
.pod-host-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pod-host-role {
font-size: 0.7rem;
color: var(--pod-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.pod-host-name {
font-family: var(--pod-font-heading);
font-size: 0.9rem;
font-weight: 700;
}
/* Actions Row */
.pod-split-actions {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.pod-stream-platforms {
display: flex;
align-items: center;
gap: 0.85rem;
}
.pod-platform-icon {
width: 38px;
height: 38px;
border-radius: var(--pod-radius-pill);
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--pod-text-muted);
transition: var(--pod-transition);
}
.pod-platform-icon:hover {
color: var(--pod-primary-hover);
border-color: var(--pod-primary);
box-shadow: var(--pod-shadow-glow);
transform: translateY(-2px);
}
.pod-platform-icon svg {
width: 18px;
height: 18px;
}
/* Right Interactive Rotating Vinyl Column */
.pod-split-right {
display: flex;
justify-content: center;
align-items: center;
}
.pod-vinyl-wrapper {
position: relative;
width: 320px;
height: 320px;
display: flex;
justify-content: center;
align-items: center;
}
/* Outer Plate vinyl record */
.pod-vinyl-plate {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #0d0d0d;
box-shadow: var(--pod-shadow), 0 0 15px rgba(0, 0, 0, 0.8) inset;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transition: var(--pod-transition);
animation: spin-vinyl 12s linear infinite;
}
/* Grooves styling on the record */
.pod-vinyl-grooves {
position: absolute;
inset: 15px;
border-radius: 50%;
border: 1px double #1a1a1a;
box-shadow: 0 0 10px #000 inset, 0 0 10px #000;
}
.pod-vinyl-center {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
}
.pod-vinyl-spindle {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--pod-border-strong);
box-shadow: 0 0 4px #000 inset;
}
/* Album Cover Overlay slightly offset to reveal record */
.pod-cover-glowing-wrapper {
position: absolute;
width: 180px;
height: 180px;
border-radius: var(--pod-radius-lg);
overflow: hidden;
z-index: 2;
left: 20px;
box-shadow: var(--pod-shadow-sm), 0 10px 30px rgba(0,0,0,0.6);
transition: var(--pod-transition);
border: 1px solid var(--pod-border-strong);
}
.pod-neon-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hover effects */
.pod-vinyl-wrapper:hover .pod-vinyl-plate {
transform: translateX(35px); /* slips out on hover! */
box-shadow: var(--pod-shadow-glow-lg);
}
.pod-vinyl-wrapper:hover .pod-cover-glowing-wrapper {
transform: scale(1.04) rotate(-3deg);
border-color: var(--pod-primary);
box-shadow: var(--pod-shadow-glow);
}
@keyframes spin-vinyl {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 992px) {
.pod-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.pod-split-right {
order: -1; /* visual cover on top on mobile */
}
}
Forms
Listener Portal Login
HTML
<div class="pod-login-card">
<div class="pod-login-header">
<span class="pod-logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:16px;height:16px;"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>
</span>
<h2 class="pod-login-title">Enter the Wavelength</h2>
<p class="pod-login-desc">Unlock lossless HD audio streaming, live listener rooms, and subscriber-only episodes.</p>
</div>
<form class="pod-login-form" onsubmit="return false;">
<div class="pod-form-group">
<label for="email" class="pod-label">Listener Email</label>
<input type="email" id="email" class="pod-input" placeholder="[email protected]" required>
</div>
<div class="pod-form-group">
<div class="pod-label-row">
<label for="password" class="pod-label">Listener Key (Password)</label>
<a href="#" class="pod-form-link">Lost your key?</a>
</div>
<input type="password" id="password" class="pod-input" placeholder="••••••••••••" required>
</div>
<div class="pod-form-remember">
<label class="pod-checkbox-wrapper">
<input type="checkbox" name="remember" class="pod-checkbox">
<span class="pod-checkbox-label">Keep session verified on this device</span>
</label>
</div>
<button type="submit" class="pod-btn pod-btn-primary pod-btn-block">
Start Listening
</button>
</form>
</div>
CSS (Component Only)
/* Component: Listener Portal Login */
/* NOTE: This component requires base.css to be included in your page. */
.pod-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 3rem 2.5rem;
}
.pod-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.pod-login-header .pod-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.pod-login-title {
font-family: var(--pod-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.pod-login-desc {
font-size: 0.825rem;
color: var(--pod-text-muted);
line-height: 1.5;
}
.pod-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pod-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.pod-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.pod-label-row .pod-label {
margin-bottom: 0;
}
.pod-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--pod-primary-hover);
text-decoration: none;
transition: var(--pod-transition);
}
.pod-form-link:hover {
color: #fff;
text-decoration: underline;
}
/* Custom Checkbox */
.pod-form-remember {
display: flex;
align-items: center;
}
.pod-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.pod-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--pod-border-strong);
border-radius: var(--pod-radius-sm);
outline: none;
background-color: var(--pod-bg);
cursor: pointer;
transition: var(--pod-transition);
position: relative;
flex-shrink: 0;
}
.pod-checkbox:checked {
background-color: var(--pod-primary);
border-color: var(--pod-primary);
}
.pod-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);
}
.pod-checkbox-label {
font-size: 0.8rem;
color: var(--pod-text-muted);
}
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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 3rem 2.5rem;
}
.pod-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.pod-login-header .pod-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.pod-login-title {
font-family: var(--pod-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.pod-login-desc {
font-size: 0.825rem;
color: var(--pod-text-muted);
line-height: 1.5;
}
.pod-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pod-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.pod-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.pod-label-row .pod-label {
margin-bottom: 0;
}
.pod-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--pod-primary-hover);
text-decoration: none;
transition: var(--pod-transition);
}
.pod-form-link:hover {
color: #fff;
text-decoration: underline;
}
/* Custom Checkbox */
.pod-form-remember {
display: flex;
align-items: center;
}
.pod-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.pod-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--pod-border-strong);
border-radius: var(--pod-radius-sm);
outline: none;
background-color: var(--pod-bg);
cursor: pointer;
transition: var(--pod-transition);
position: relative;
flex-shrink: 0;
}
.pod-checkbox:checked {
background-color: var(--pod-primary);
border-color: var(--pod-primary);
}
.pod-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);
}
.pod-checkbox-label {
font-size: 0.8rem;
color: var(--pod-text-muted);
}
Episode Dispatch Subscribe
HTML
<div class="pod-dispatch-card">
<div class="pod-dispatch-header">
<span class="pod-dispatch-tag">Join the Signal</span>
<h2 class="pod-dispatch-title">Subscribe to Episode Alerts</h2>
<p class="pod-dispatch-desc">Never miss a live room broadcast. Get immediate alerts when new guest sessions drop, including exclusive backstage notes.</p>
</div>
<form class="pod-dispatch-form" onsubmit="return false;">
<div class="pod-form-group">
<label for="dispatch-email" class="pod-label">Your Email Address</label>
<input type="email" id="dispatch-email" class="pod-input" placeholder="[email protected]" required>
</div>
<div class="pod-form-group">
<label class="pod-label">Selected Streams</label>
<div class="pod-checkbox-grid">
<label class="pod-checkbox-wrapper">
<input type="checkbox" class="pod-checkbox" checked>
<span class="pod-checkbox-label">Tech Singularity</span>
</label>
<label class="pod-checkbox-wrapper">
<input type="checkbox" class="pod-checkbox" checked>
<span class="pod-checkbox-label">Soundscape Beats</span>
</label>
<label class="pod-checkbox-wrapper">
<input type="checkbox" class="pod-checkbox">
<span class="pod-checkbox-label">Neuro Science</span>
</label>
<label class="pod-checkbox-wrapper">
<input type="checkbox" class="pod-checkbox">
<span class="pod-checkbox-label">Backstage Notes</span>
</label>
</div>
</div>
<button type="submit" class="pod-btn pod-btn-accent pod-btn-block">
Connect to Stream
</button>
<span class="pod-form-privacy">We respect the bandwidth. Safe feed. No tracking. Unsubscribe instantly.</span>
</form>
</div>
CSS (Component Only)
/* Component: Episode Dispatch Subscribe */
/* NOTE: This component requires base.css to be included in your page. */
.pod-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 3rem 2.5rem;
}
.pod-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.pod-dispatch-tag {
font-family: var(--pod-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--pod-accent-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.pod-dispatch-title {
font-family: var(--pod-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.75rem;
}
.pod-dispatch-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.6;
}
.pod-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pod-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
padding: 1.25rem;
border-radius: var(--pod-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.pod-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.pod-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--pod-border-strong);
border-radius: var(--pod-radius-sm);
outline: none;
background-color: var(--pod-surface);
cursor: pointer;
transition: var(--pod-transition);
position: relative;
flex-shrink: 0;
}
.pod-checkbox:checked {
background-color: var(--pod-accent);
border-color: var(--pod-accent);
}
.pod-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid var(--pod-bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pod-checkbox-label {
font-size: 0.8rem;
color: var(--pod-text-muted);
line-height: 1.2;
}
.pod-form-privacy {
font-size: 0.725rem;
color: var(--pod-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.pod-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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 3rem 2.5rem;
}
.pod-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.pod-dispatch-tag {
font-family: var(--pod-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--pod-accent-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.pod-dispatch-title {
font-family: var(--pod-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.75rem;
}
.pod-dispatch-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.6;
}
.pod-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pod-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
padding: 1.25rem;
border-radius: var(--pod-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.pod-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.pod-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--pod-border-strong);
border-radius: var(--pod-radius-sm);
outline: none;
background-color: var(--pod-surface);
cursor: pointer;
transition: var(--pod-transition);
position: relative;
flex-shrink: 0;
}
.pod-checkbox:checked {
background-color: var(--pod-accent);
border-color: var(--pod-accent);
}
.pod-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid var(--pod-bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pod-checkbox-label {
font-size: 0.8rem;
color: var(--pod-text-muted);
line-height: 1.2;
}
.pod-form-privacy {
font-size: 0.725rem;
color: var(--pod-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.pod-checkbox-grid {
grid-template-columns: 1fr;
}
}
Cards
Audio Episode Cards
HTML
<div class="pod-cards-grid">
<!-- Vertical Episode Card -->
<article class="pod-episode-card pod-card">
<div class="pod-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?auto=format&fit=crop&w=600&q=80" alt="Retro metal studio microphone" class="pod-card-img">
<span class="pod-card-badge">Tech Singularity</span>
<!-- Overlay Play Hover Trigger -->
<button class="pod-card-play-overlay" aria-label="Play this episode">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
</button>
</div>
<div class="pod-card-body">
<div class="pod-card-meta">
<span>Episode 41</span>
<span class="pod-bullet">•</span>
<span>1h 12m</span>
</div>
<h3 class="pod-card-title">
<a href="#" class="pod-card-link">#41: Decentralized Minds and the Cryptography of Consciousness</a>
</h3>
<p class="pod-card-excerpt">Could blockchain networks anchor neural storage matrices? We dive into structural data security, quantum decryption, and future human storage nodes.</p>
<div class="pod-card-footer">
<div class="pod-card-guest">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=80&q=80" alt="Silvia Martinez avatar guest" class="pod-card-avatar">
<div class="pod-card-guest-info">
<span class="pod-guest-by">Guest Speaker</span>
<span class="pod-card-guest-name">Dr. Sarah Cole</span>
</div>
</div>
<span class="pod-listen-cta-text">Play Episode</span>
</div>
</div>
</article>
<!-- Horizontal Episode Card -->
<article class="pod-episode-card-horizontal pod-card">
<div class="pod-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1618107095181-e3ba0f53ee59?auto=format&fit=crop&w=600&q=80" alt="Techno DJ neon turntable boards" class="pod-card-img">
<span class="pod-card-badge">Soundscapes</span>
<!-- Overlay Play Hover Trigger -->
<button class="pod-card-play-overlay" aria-label="Play this episode">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
</button>
</div>
<div class="pod-card-body">
<div class="pod-card-meta">
<span>Episode 40</span>
<span class="pod-bullet">•</span>
<span>54 Min</span>
</div>
<h3 class="pod-card-title">
<a href="#" class="pod-card-link">#40: Synth waves and the Neurology of Binaural Beats</a>
</h3>
<p class="pod-card-excerpt">Exploring the neurological impact of specific wave forms, low-frequency hums, and analog synthesizer nodes on task performance.</p>
<div class="pod-card-footer">
<div class="pod-card-guest">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80" alt="Julian Sterling guest avatar" class="pod-card-avatar">
<div class="pod-card-guest-info">
<span class="pod-guest-by">Guest Artist</span>
<span class="pod-card-guest-name">Aero Synth</span>
</div>
</div>
<span class="pod-listen-cta-text">Play Episode</span>
</div>
</div>
</article>
</div>
CSS (Component Only)
/* Component: Audio Episode Cards */
/* NOTE: This component requires base.css to be included in your page. */
.pod-cards-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.pod-episode-card, .pod-episode-card-horizontal {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 !important; /* override default card padding */
background-color: var(--pod-surface);
}
.pod-card-img-wrapper {
position: relative;
width: 100%;
overflow: hidden;
cursor: pointer;
}
.pod-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--pod-transition);
}
.pod-card-badge {
position: absolute;
top: 1.25rem;
left: 1.25rem;
background-color: var(--pod-primary);
color: #fff;
font-family: var(--pod-font-heading);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.35rem 0.75rem;
border-radius: var(--pod-radius-sm);
z-index: 3;
box-shadow: var(--pod-shadow-sm);
}
/* Play Hover Overlay */
.pod-card-play-overlay {
position: absolute;
inset: 0;
background-color: rgba(9, 13, 22, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
border: none;
cursor: pointer;
z-index: 2;
transition: var(--pod-transition);
}
.pod-card-play-overlay svg {
width: 48px;
height: 48px;
color: #fff;
background-color: var(--pod-primary);
border-radius: 50%;
padding: 12px;
box-shadow: var(--pod-shadow-glow-lg);
transform: scale(0.85);
transition: var(--pod-transition);
}
.pod-card-img-wrapper:hover .pod-card-play-overlay {
opacity: 1;
}
.pod-card-img-wrapper:hover .pod-card-play-overlay svg {
transform: scale(1);
background-color: var(--pod-primary-hover);
}
.pod-card-img-wrapper:hover .pod-card-img {
transform: scale(1.04);
}
/* Body */
.pod-card-body {
display: flex;
flex-direction: column;
padding: 2rem;
gap: 0.85rem;
flex: 1;
}
.pod-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--pod-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pod-bullet {
color: var(--pod-border-strong);
}
.pod-card-title {
font-family: var(--pod-font-heading);
font-size: 1.35rem;
font-weight: 800;
line-height: 1.3;
}
.pod-card-link {
color: #fff;
text-decoration: none;
transition: var(--pod-transition);
}
.pod-card-link:hover {
color: var(--pod-primary-hover);
}
.pod-card-excerpt {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Footer guest info */
.pod-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--pod-border);
padding-top: 1.25rem;
margin-top: auto;
}
.pod-card-guest {
display: flex;
align-items: center;
gap: 0.65rem;
}
.pod-card-avatar {
width: 32px;
height: 32px;
border-radius: var(--pod-radius-pill);
object-fit: cover;
border: 1px solid var(--pod-border-strong);
}
.pod-card-guest-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pod-guest-by {
font-size: 0.65rem;
color: var(--pod-text-light);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.pod-card-guest-name {
font-size: 0.75rem;
font-weight: 700;
color: #fff;
}
.pod-listen-cta-text {
font-family: var(--pod-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--pod-primary-hover);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-episode-card-horizontal:hover .pod-listen-cta-text,
.pod-episode-card:hover .pod-listen-cta-text {
color: #fff;
}
/* Sizing specific horizontal vs vertical */
.pod-episode-card .pod-card-img-wrapper {
height: 240px;
}
.pod-episode-card-horizontal {
flex-direction: row;
}
.pod-episode-card-horizontal .pod-card-img-wrapper {
width: 40%;
height: 100%;
min-height: 100%;
}
@media (max-width: 992px) {
.pod-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 576px) {
.pod-episode-card-horizontal {
flex-direction: column;
}
.pod-episode-card-horizontal .pod-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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-cards-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.pod-episode-card, .pod-episode-card-horizontal {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 !important; /* override default card padding */
background-color: var(--pod-surface);
}
.pod-card-img-wrapper {
position: relative;
width: 100%;
overflow: hidden;
cursor: pointer;
}
.pod-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--pod-transition);
}
.pod-card-badge {
position: absolute;
top: 1.25rem;
left: 1.25rem;
background-color: var(--pod-primary);
color: #fff;
font-family: var(--pod-font-heading);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.35rem 0.75rem;
border-radius: var(--pod-radius-sm);
z-index: 3;
box-shadow: var(--pod-shadow-sm);
}
/* Play Hover Overlay */
.pod-card-play-overlay {
position: absolute;
inset: 0;
background-color: rgba(9, 13, 22, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
border: none;
cursor: pointer;
z-index: 2;
transition: var(--pod-transition);
}
.pod-card-play-overlay svg {
width: 48px;
height: 48px;
color: #fff;
background-color: var(--pod-primary);
border-radius: 50%;
padding: 12px;
box-shadow: var(--pod-shadow-glow-lg);
transform: scale(0.85);
transition: var(--pod-transition);
}
.pod-card-img-wrapper:hover .pod-card-play-overlay {
opacity: 1;
}
.pod-card-img-wrapper:hover .pod-card-play-overlay svg {
transform: scale(1);
background-color: var(--pod-primary-hover);
}
.pod-card-img-wrapper:hover .pod-card-img {
transform: scale(1.04);
}
/* Body */
.pod-card-body {
display: flex;
flex-direction: column;
padding: 2rem;
gap: 0.85rem;
flex: 1;
}
.pod-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--pod-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pod-bullet {
color: var(--pod-border-strong);
}
.pod-card-title {
font-family: var(--pod-font-heading);
font-size: 1.35rem;
font-weight: 800;
line-height: 1.3;
}
.pod-card-link {
color: #fff;
text-decoration: none;
transition: var(--pod-transition);
}
.pod-card-link:hover {
color: var(--pod-primary-hover);
}
.pod-card-excerpt {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Footer guest info */
.pod-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--pod-border);
padding-top: 1.25rem;
margin-top: auto;
}
.pod-card-guest {
display: flex;
align-items: center;
gap: 0.65rem;
}
.pod-card-avatar {
width: 32px;
height: 32px;
border-radius: var(--pod-radius-pill);
object-fit: cover;
border: 1px solid var(--pod-border-strong);
}
.pod-card-guest-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pod-guest-by {
font-size: 0.65rem;
color: var(--pod-text-light);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.pod-card-guest-name {
font-size: 0.75rem;
font-weight: 700;
color: #fff;
}
.pod-listen-cta-text {
font-family: var(--pod-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--pod-primary-hover);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-episode-card-horizontal:hover .pod-listen-cta-text,
.pod-episode-card:hover .pod-listen-cta-text {
color: #fff;
}
/* Sizing specific horizontal vs vertical */
.pod-episode-card .pod-card-img-wrapper {
height: 240px;
}
.pod-episode-card-horizontal {
flex-direction: row;
}
.pod-episode-card-horizontal .pod-card-img-wrapper {
width: 40%;
height: 100%;
min-height: 100%;
}
@media (max-width: 992px) {
.pod-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 576px) {
.pod-episode-card-horizontal {
flex-direction: column;
}
.pod-episode-card-horizontal .pod-card-img-wrapper {
width: 100%;
height: 200px;
}
}
Audio Analytics metrics
HTML
<div class="pod-stats-row">
<!-- Stat 1 -->
<div class="pod-stat-card pod-card">
<div class="pod-stat-icon-wrapper pod-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="pod-stat-details">
<span class="pod-stat-label">Total Streams / Plays</span>
<div class="pod-stat-value-group">
<span class="pod-stat-value">4.2M</span>
<span class="pod-stat-change positive">+18.4%</span>
</div>
<span class="pod-stat-desc">Lossless audio downloads and stream events this season.</span>
</div>
</div>
<!-- Stat 2 -->
<div class="pod-stat-card pod-card">
<div class="pod-stat-icon-wrapper pod-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="pod-stat-details">
<span class="pod-stat-label">Verified Members</span>
<div class="pod-stat-value-group">
<span class="pod-stat-value">128,950</span>
<span class="pod-stat-change positive">+9.2%</span>
</div>
<span class="pod-stat-desc">Listeners connected to active private terminal feeds.</span>
</div>
</div>
<!-- Stat 3 -->
<div class="pod-stat-card pod-card">
<div class="pod-stat-icon-wrapper pod-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="pod-stat-details">
<span class="pod-stat-label">Listener Rating</span>
<div class="pod-stat-value-group">
<span class="pod-stat-value">4.9 / 5</span>
<span class="pod-stat-change positive">12K votes</span>
</div>
<!-- Progress mini bar representing ratings proportion -->
<div class="pod-stat-progress-wrapper">
<div class="pod-stat-progress-bar" style="width: 98%;"></div>
</div>
<span class="pod-stat-desc">Consistently ranked Top 5 in Technological Audio category.</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Audio Analytics metrics */
/* NOTE: This component requires base.css to be included in your page. */
.pod-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.pod-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.pod-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--pod-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pod-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.pod-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.pod-stat-label {
font-family: var(--pod-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pod-text-light);
}
.pod-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.pod-stat-value {
font-family: var(--pod-font-heading);
font-size: 2rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.pod-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--pod-radius-sm);
}
.pod-stat-change.positive {
color: var(--pod-accent);
}
.pod-stat-desc {
font-size: 0.725rem;
color: var(--pod-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.pod-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--pod-border-strong);
border-radius: var(--pod-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.pod-stat-progress-bar {
height: 100%;
background-color: var(--pod-accent);
border-radius: var(--pod-radius-pill);
box-shadow: 0 0 8px var(--pod-accent);
}
@media (max-width: 992px) {
.pod-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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.pod-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.pod-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--pod-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pod-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.pod-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.pod-stat-label {
font-family: var(--pod-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pod-text-light);
}
.pod-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.pod-stat-value {
font-family: var(--pod-font-heading);
font-size: 2rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.pod-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--pod-radius-sm);
}
.pod-stat-change.positive {
color: var(--pod-accent);
}
.pod-stat-desc {
font-size: 0.725rem;
color: var(--pod-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.pod-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--pod-border-strong);
border-radius: var(--pod-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.pod-stat-progress-bar {
height: 100%;
background-color: var(--pod-accent);
border-radius: var(--pod-radius-pill);
box-shadow: 0 0 8px var(--pod-accent);
}
@media (max-width: 992px) {
.pod-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Tables
Episode Directory Archive
HTML
<div class="pod-table-wrapper pod-card">
<div class="pod-table-header">
<h3 class="pod-table-title">Episode Directory Archive</h3>
<p class="pod-table-desc">Explore past broadcasts, guest summaries, durational stats, and direct listening links.</p>
</div>
<div class="pod-table-scroll">
<table class="pod-table">
<thead>
<tr>
<th>Episode Details</th>
<th>Guest Host</th>
<th>Category</th>
<th>Duration</th>
<th>Plays</th>
<th>Listen</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td class="pod-title-cell">
<span class="pod-episode-title">#42: Neural Interface protocols and the Memory Grid</span>
<span class="pod-episode-release">Released May 19, 2026</span>
</td>
<td>
<div class="pod-table-guest">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=80&q=80" alt="Sarah Cole" class="pod-table-avatar">
<span>Dr. Sarah Cole</span>
</div>
</td>
<td><span class="pod-badge pod-badge-primary">Tech Singularity</span></td>
<td>1h 24m</td>
<td>248,500</td>
<td>
<button class="pod-btn pod-btn-outline pod-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="pod-title-cell">
<span class="pod-episode-title">#41: Decentralized Minds and the Cryptography of Consciousness</span>
<span class="pod-episode-release">Released May 12, 2026</span>
</td>
<td>
<div class="pod-table-guest">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80" alt="Marcus Vance" class="pod-table-avatar">
<span>Marcus Vance</span>
</div>
</td>
<td><span class="pod-badge pod-badge-primary">Tech Singularity</span></td>
<td>1h 12m</td>
<td>310,200</td>
<td>
<button class="pod-btn pod-btn-outline pod-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="pod-title-cell">
<span class="pod-episode-title">#40: Synth waves and the Neurology of Binaural Beats</span>
<span class="pod-episode-release">Released May 05, 2026</span>
</td>
<td>
<div class="pod-table-guest">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100&q=80" alt="Arthur Pendelton" class="pod-table-avatar">
<span>Aero Synth</span>
</div>
</td>
<td><span class="pod-badge pod-badge-accent">Soundscapes</span></td>
<td>54m</td>
<td>189,400</td>
<td>
<button class="pod-btn pod-btn-outline pod-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: Episode Directory Archive */
/* NOTE: This component requires base.css to be included in your page. */
.pod-table-wrapper {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.pod-table-header {
margin-bottom: 1.5rem;
}
.pod-table-title {
font-family: var(--pod-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
}
.pod-table-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
}
.pod-table-scroll {
width: 100%;
overflow-x: auto;
}
.pod-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--pod-font-body);
}
.pod-table th {
font-family: var(--pod-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pod-text-light);
border-bottom: 2px solid var(--pod-border);
padding: 1rem;
}
.pod-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--pod-border);
font-size: 0.85rem;
color: var(--pod-text-muted);
vertical-align: middle;
}
.pod-table tr:hover td {
background-color: var(--pod-surface-2);
}
/* Specific Cells */
.pod-title-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.pod-episode-title {
font-family: var(--pod-font-heading);
font-size: 1.05rem;
font-weight: 700;
color: #fff;
}
.pod-episode-release {
font-size: 0.7rem;
color: var(--pod-text-light);
}
.pod-table-guest {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #fff;
}
.pod-table-avatar {
width: 24px;
height: 24px;
border-radius: var(--pod-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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-table-wrapper {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.pod-table-header {
margin-bottom: 1.5rem;
}
.pod-table-title {
font-family: var(--pod-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
}
.pod-table-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
}
.pod-table-scroll {
width: 100%;
overflow-x: auto;
}
.pod-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--pod-font-body);
}
.pod-table th {
font-family: var(--pod-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pod-text-light);
border-bottom: 2px solid var(--pod-border);
padding: 1rem;
}
.pod-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--pod-border);
font-size: 0.85rem;
color: var(--pod-text-muted);
vertical-align: middle;
}
.pod-table tr:hover td {
background-color: var(--pod-surface-2);
}
/* Specific Cells */
.pod-title-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.pod-episode-title {
font-family: var(--pod-font-heading);
font-size: 1.05rem;
font-weight: 700;
color: #fff;
}
.pod-episode-release {
font-size: 0.7rem;
color: var(--pod-text-light);
}
.pod-table-guest {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #fff;
}
.pod-table-avatar {
width: 24px;
height: 24px;
border-radius: var(--pod-radius-pill);
object-fit: cover;
}
Lists
Live Audio Comments Feed
HTML
<div class="pod-activity-wrapper pod-card">
<div class="pod-activity-header">
<h3 class="pod-activity-title">Live Room Discussion Feed</h3>
<p class="pod-activity-desc">Track real-time listener feedback, live bookmarks, and guest replies during active streams.</p>
</div>
<div class="pod-timeline">
<!-- Comment 1 -->
<div class="pod-timeline-item">
<div class="pod-timeline-icon pod-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="pod-timeline-content">
<div class="pod-timeline-meta">
<span class="pod-activity-user">Elena Vance</span>
<span class="pod-activity-action">commented at</span>
<span class="pod-activity-timestamp">24:18</span>
<span class="pod-activity-time">5 Min Ago</span>
</div>
<p class="pod-timeline-text">
"Cole's explanation of quantum neuro-encryption is mind-blowing. The concept that our synaptic nodes could represent localized blockchain validation targets is genius."
</p>
</div>
</div>
<!-- System Alert / Bookmark -->
<div class="pod-timeline-item">
<div class="pod-timeline-icon pod-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="pod-timeline-content">
<div class="pod-timeline-meta">
<span class="pod-activity-user">Aero Listener</span>
<span class="pod-activity-action">pinned timestamp at</span>
<span class="pod-activity-timestamp">18:40</span>
<span class="pod-activity-time">12 Min Ago</span>
</div>
<p class="pod-timeline-text">
Pinned discussing synaesthetic response cycles to 40Hz binaural frequencies under laboratory tasks.
</p>
</div>
</div>
<!-- Guest Response -->
<div class="pod-timeline-item">
<div class="pod-timeline-icon pod-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="pod-timeline-content">
<div class="pod-timeline-meta">
<span class="pod-activity-user text-primary">Dr. Sarah Cole (Guest)</span>
<span class="pod-activity-action">replied to Vance</span>
<span class="pod-activity-timestamp">26:05</span>
<span class="pod-activity-time">2 Min Ago</span>
</div>
<p class="pod-timeline-text">
"Exactly, Elena! The key is looking at the latency. The bio-synaptic transition is only ~1ms, which makes highly decentralized biological validating pools incredibly viable if we can stabilize the heat coordinates."
</p>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Live Audio Comments Feed */
/* NOTE: This component requires base.css to be included in your page. */
.pod-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.pod-activity-header {
margin-bottom: 2rem;
}
.pod-activity-title {
font-family: var(--pod-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
}
.pod-activity-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
}
/* Timeline Wrapper */
.pod-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.pod-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.pod-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.pod-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--pod-border);
}
.pod-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.pod-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--pod-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--pod-text);
border: 1px solid var(--pod-border);
background-color: var(--pod-surface);
z-index: 2;
}
.pod-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.pod-timeline-comment {
background-color: var(--pod-primary-muted);
color: var(--pod-primary-hover);
border-color: var(--pod-primary);
}
.pod-timeline-bookmark {
background-color: var(--pod-accent-muted);
color: var(--pod-accent-hover);
border-color: var(--pod-accent);
}
.pod-timeline-reply {
background-color: var(--pod-danger-muted);
color: var(--pod-danger);
border-color: var(--pod-danger);
}
/* Contents */
.pod-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pod-timeline-meta {
font-size: 0.8rem;
color: var(--pod-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.pod-activity-user {
font-weight: 700;
color: #fff;
}
.pod-activity-action {
color: var(--pod-text-light);
}
.pod-activity-timestamp {
font-family: var(--pod-font-heading);
font-weight: 700;
font-size: 0.75rem;
color: var(--pod-primary-hover);
background-color: var(--pod-surface-2);
padding: 0.15rem 0.45rem;
border-radius: var(--pod-radius-sm);
}
.pod-activity-time {
color: var(--pod-text-light);
font-size: 0.725rem;
margin-left: auto;
}
.pod-timeline-text {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.5;
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
padding: 1rem 1.25rem;
border-radius: var(--pod-radius-lg);
margin: 0;
}
@media (max-width: 576px) {
.pod-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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.pod-activity-header {
margin-bottom: 2rem;
}
.pod-activity-title {
font-family: var(--pod-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
}
.pod-activity-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
}
/* Timeline Wrapper */
.pod-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.pod-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.pod-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.pod-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--pod-border);
}
.pod-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.pod-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--pod-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--pod-text);
border: 1px solid var(--pod-border);
background-color: var(--pod-surface);
z-index: 2;
}
.pod-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.pod-timeline-comment {
background-color: var(--pod-primary-muted);
color: var(--pod-primary-hover);
border-color: var(--pod-primary);
}
.pod-timeline-bookmark {
background-color: var(--pod-accent-muted);
color: var(--pod-accent-hover);
border-color: var(--pod-accent);
}
.pod-timeline-reply {
background-color: var(--pod-danger-muted);
color: var(--pod-danger);
border-color: var(--pod-danger);
}
/* Contents */
.pod-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pod-timeline-meta {
font-size: 0.8rem;
color: var(--pod-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.pod-activity-user {
font-weight: 700;
color: #fff;
}
.pod-activity-action {
color: var(--pod-text-light);
}
.pod-activity-timestamp {
font-family: var(--pod-font-heading);
font-weight: 700;
font-size: 0.75rem;
color: var(--pod-primary-hover);
background-color: var(--pod-surface-2);
padding: 0.15rem 0.45rem;
border-radius: var(--pod-radius-sm);
}
.pod-activity-time {
color: var(--pod-text-light);
font-size: 0.725rem;
margin-left: auto;
}
.pod-timeline-text {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.5;
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
padding: 1rem 1.25rem;
border-radius: var(--pod-radius-lg);
margin: 0;
}
@media (max-width: 576px) {
.pod-activity-time {
margin-left: 0;
width: 100%;
margin-top: 0.15rem;
}
}
Modals
Premium Audio Unlock
HTML
<div class="pod-modal-overlay">
<div class="pod-modal-card">
<!-- Close Button -->
<button class="pod-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="pod-modal-body">
<!-- Headphones Icon/Badge -->
<div class="pod-modal-badge-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
</div>
<span class="pod-modal-tag">Subscribers Only</span>
<h2 class="pod-modal-title">Unlock HD Lossless Master Audio</h2>
<p class="pod-modal-desc">
Listen in ultimate clarity. Subscribers unlock 24-bit/96kHz studio masters, the complete backlog of past sessions, and private host chat rooms.
</p>
<!-- Plan details -->
<div class="pod-plan-box">
<div class="pod-plan-details">
<span class="pod-plan-name">Studio Fellowship</span>
<span class="pod-plan-desc">Lossless FLAC feed + Discord backroom access</span>
</div>
<div class="pod-plan-price">
<span class="pod-plan-amount">$4</span>
<span class="pod-plan-period">/ month</span>
</div>
</div>
<div class="pod-modal-actions">
<button class="pod-btn pod-btn-primary pod-btn-block">
Start 7-Day Free Trial
</button>
<button class="pod-btn pod-btn-outline pod-btn-block">
Verify Listener Key
</button>
</div>
<a href="#" class="pod-modal-cancel">Return to Public Stream</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Premium Audio Unlock */
/* NOTE: This component requires base.css to be included in your page. */
.pod-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow-glow-lg);
position: relative;
overflow: hidden;
}
.pod-modal-card {
padding: 3rem 2.5rem;
}
.pod-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--pod-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--pod-radius);
transition: var(--pod-transition);
}
.pod-modal-close:hover {
background-color: var(--pod-surface-2);
color: #fff;
}
.pod-modal-close svg {
width: 18px;
height: 18px;
}
.pod-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.pod-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--pod-radius-pill);
background-color: var(--pod-primary-muted);
color: var(--pod-primary-hover);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--pod-shadow-glow);
}
.pod-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.pod-modal-tag {
font-family: var(--pod-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--pod-primary-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pod-modal-title {
font-family: var(--pod-font-heading);
font-size: 1.85rem;
font-weight: 800;
line-height: 1.2;
margin: 0;
}
.pod-modal-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.pod-plan-box {
width: 100%;
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
padding: 1.25rem 1.5rem;
border-radius: var(--pod-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.pod-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.pod-plan-name {
font-family: var(--pod-font-heading);
font-size: 1.1rem;
font-weight: 700;
color: #fff;
}
.pod-plan-desc {
font-size: 0.75rem;
color: var(--pod-text-light);
}
.pod-plan-price {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.pod-plan-amount {
font-family: var(--pod-font-heading);
font-size: 1.65rem;
font-weight: 800;
color: var(--pod-accent-hover);
line-height: 1;
}
.pod-plan-period {
font-size: 0.7rem;
color: var(--pod-text-light);
}
/* Actions */
.pod-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.pod-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--pod-text-light);
text-decoration: none;
transition: var(--pod-transition);
}
.pod-modal-cancel:hover {
color: var(--pod-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');
/* =========================================
Podcast Cyber-Audio Design System (pod-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--pod-bg: #090D16; /* Obsidian Deep */
--pod-surface: #121824; /* Dark Slate */
--pod-surface-2: #1E2638; /* Muted Slate Card */
--pod-surface-glow: rgba(139, 92, 246, 0.05);
/* Brand Palette */
--pod-primary: #8B5CF6; /* Electric Violet */
--pod-primary-hover: #A78BFA;
--pod-primary-muted: rgba(139, 92, 246, 0.15);
--pod-accent: #10B981; /* Electric Emerald */
--pod-accent-hover: #34D399;
--pod-accent-muted: rgba(16, 185, 129, 0.15);
--pod-danger: #EF4444;
--pod-danger-muted: rgba(239, 68, 68, 0.15);
/* Text */
--pod-text: #FFFFFF; /* White */
--pod-text-muted: #94A3B8; /* Slate Muted */
--pod-text-light: #64748B;
/* Borders */
--pod-border: #1E2638; /* Cyber Dark Slate Border */
--pod-border-strong: #334155;
--pod-border-glow: rgba(139, 92, 246, 0.3);
/* Geometric Rounded Shapes */
--pod-radius-sm: 4px;
--pod-radius: 8px;
--pod-radius-lg: 16px;
--pod-radius-pill: 999px;
/* Fonts */
--pod-font-heading: 'Outfit', sans-serif;
--pod-font-body: 'Inter', sans-serif;
/* Shadows */
--pod-shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
--pod-shadow: 0 8px 30px rgba(0,0,0,0.7);
--pod-shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
--pod-shadow-glow-lg:0 0 40px rgba(139, 92, 246, 0.3);
/* Transition */
--pod-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--pod-font-body);
color: var(--pod-text);
background-color: var(--pod-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.pod-card {
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow);
padding: 2.25rem;
transition: var(--pod-transition);
}
.pod-card:hover {
border-color: var(--pod-border-glow);
box-shadow: var(--pod-shadow-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pod-font-heading);
font-weight: 700;
margin: 0;
color: var(--pod-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
p {
font-family: var(--pod-font-body);
color: var(--pod-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.pod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--pod-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--pod-radius-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--pod-transition);
white-space: nowrap;
user-select: none;
}
.pod-btn-primary {
background-color: var(--pod-primary);
color: var(--pod-text);
border-color: var(--pod-primary);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.pod-btn-primary:hover {
background-color: var(--pod-primary-hover);
border-color: var(--pod-primary-hover);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
transform: translateY(-1px);
}
.pod-btn-accent {
background-color: var(--pod-accent);
color: var(--pod-bg);
border-color: var(--pod-accent);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.pod-btn-accent:hover {
background-color: var(--pod-accent-hover);
border-color: var(--pod-accent-hover);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
transform: translateY(-1px);
}
.pod-btn-outline {
background-color: transparent;
color: var(--pod-text);
border-color: var(--pod-border-strong);
}
.pod-btn-outline:hover {
background-color: var(--pod-surface-2);
border-color: var(--pod-primary);
}
.pod-btn-ghost {
background-color: transparent;
color: var(--pod-text-muted);
border-color: transparent;
}
.pod-btn-ghost:hover {
background-color: var(--pod-surface-2);
color: var(--pod-text);
}
.pod-btn-sm { padding: 0.5rem 1.15rem; font-size: 0.8rem; }
.pod-btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.pod-btn-block { width: 100%; }
.pod-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pod-radius-pill); }
/* ── Form Controls ────────────── */
.pod-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
outline: none;
transition: var(--pod-transition);
}
.pod-input::placeholder { color: var(--pod-text-light); }
.pod-input:focus {
border-color: var(--pod-primary);
background-color: rgba(139, 92, 246, 0.02);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pod-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--pod-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--pod-text-muted);
}
.pod-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius);
font-family: var(--pod-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--pod-text);
background-color: var(--pod-bg);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--pod-transition);
}
.pod-select:focus { border-color: var(--pod-primary); }
/* ── Badges ───────────────────── */
.pod-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--pod-radius-pill);
font-family: var(--pod-font-heading);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.pod-badge-primary { background-color: var(--pod-primary-muted); color: var(--pod-primary-hover); border-color: rgba(139, 92, 246, 0.3); }
.pod-badge-accent { background-color: var(--pod-accent-muted); color: var(--pod-accent-hover); border-color: rgba(16, 185, 129, 0.3); }
.pod-badge-danger { background-color: var(--pod-danger-muted); color: var(--pod-danger); border-color: rgba(239, 68, 68, 0.3); }
.pod-badge-default { background-color: var(--pod-surface-2); color: var(--pod-text-muted); border-color: var(--pod-border); }
/* ── Audio Wave indicator ─────── */
.pod-wave {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
width: 20px;
}
.pod-wave-bar {
width: 3px;
background-color: var(--pod-primary);
border-radius: var(--pod-radius-pill);
height: 30%;
animation: wave-bounce 1s ease-in-out infinite alternate;
}
.pod-wave-bar:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.pod-wave-bar:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.pod-wave-bar:nth-child(4) { height: 45%; animation-delay: 0.45s; }
@keyframes wave-bounce {
0% { height: 20%; }
100% { height: 100%; }
}
/* ── Divider ──────────────────── */
.pod-divider { border: none; border-top: 1px solid var(--pod-border); margin: 0; }
/* ── Logo ─────────────────────── */
.pod-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--pod-font-heading);
font-size: 1.35rem;
color: var(--pod-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.pod-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--pod-primary) 0%, #7C3AED 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--pod-radius);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--pod-primary) !important; }
.text-accent { color: var(--pod-accent) !important; }
.text-danger { color: var(--pod-danger) !important; }
.text-muted { color: var(--pod-text-muted) !important; }
.text-light { color: var(--pod-text-light) !important; }
/* --- COMPONENT STYLES --- */
.pod-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--pod-surface);
border: 1px solid var(--pod-border);
border-radius: var(--pod-radius-lg);
box-shadow: var(--pod-shadow-glow-lg);
position: relative;
overflow: hidden;
}
.pod-modal-card {
padding: 3rem 2.5rem;
}
.pod-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--pod-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--pod-radius);
transition: var(--pod-transition);
}
.pod-modal-close:hover {
background-color: var(--pod-surface-2);
color: #fff;
}
.pod-modal-close svg {
width: 18px;
height: 18px;
}
.pod-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.pod-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--pod-radius-pill);
background-color: var(--pod-primary-muted);
color: var(--pod-primary-hover);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--pod-shadow-glow);
}
.pod-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.pod-modal-tag {
font-family: var(--pod-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--pod-primary-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pod-modal-title {
font-family: var(--pod-font-heading);
font-size: 1.85rem;
font-weight: 800;
line-height: 1.2;
margin: 0;
}
.pod-modal-desc {
font-size: 0.85rem;
color: var(--pod-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.pod-plan-box {
width: 100%;
background-color: var(--pod-bg);
border: 1px solid var(--pod-border);
padding: 1.25rem 1.5rem;
border-radius: var(--pod-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.pod-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.pod-plan-name {
font-family: var(--pod-font-heading);
font-size: 1.1rem;
font-weight: 700;
color: #fff;
}
.pod-plan-desc {
font-size: 0.75rem;
color: var(--pod-text-light);
}
.pod-plan-price {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.pod-plan-amount {
font-family: var(--pod-font-heading);
font-size: 1.65rem;
font-weight: 800;
color: var(--pod-accent-hover);
line-height: 1;
}
.pod-plan-period {
font-size: 0.7rem;
color: var(--pod-text-light);
}
/* Actions */
.pod-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.pod-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--pod-text-light);
text-decoration: none;
transition: var(--pod-transition);
}
.pod-modal-cancel:hover {
color: var(--pod-text-muted);
text-decoration: underline;
}