/* SamduraFM theme - modern dark, inspired by trucking radio UI */
/* Atkinson Hyperlegible Font */
@font-face {
font-family: 'Atkinson Hyperlegible';
src: url('assets/fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
src: url('assets/fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
src: url('assets/fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible';
src: url('assets/fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* Funnel Display Font */
@font-face {
font-family: 'Funnel Display';
src: url('assets/fonts/FunnelDisplay/FunnelDisplay-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root{
--bg:#0f2230;
--bg-elev:#173246;
--panel:#23394b;
--text:#e9f1f7;
--muted:#8fa6b7;
--brand:#f91e5a;
--accent:#6b4c93;
--live:#ff4d6d;
--warning:#ff6b35;
--border:rgba(255,255,255,0.08);
--radius:14px;
--shadow:0 10px 30px rgba(0,0,0,.25);
}
/* Loading states */
.loading-state {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
color: var(--muted);
text-align: center;
}
.loading-state::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--muted);
border-radius: 50%;
border-top-color: var(--brand);
animation: spin 1s linear infinite;
margin-right: 0.5rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.no-events, .no-posts {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
color: var(--muted);
text-align: center;
}
*{box-sizing:border-box}
html{height:100%}
body{min-height:100%}
html{background:#16213e}
p{margin-top:5px;margin-bottom:0;padding-top:0;padding-bottom:0}
img{margin-left:0px;margin-right:50px}
body{
margin:0;
font-family:'Atkinson Hyperlegible',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:var(--text);
background:transparent;
position: relative;
overflow-x: hidden;
touch-action: manipulation;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* Side decorations - full page height, scroll with page, aspect ratio 292:1551 */
.ribbon-side {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
background-color: transparent;
}
.ribbon-side-left {
left: 0;
width: auto;
aspect-ratio: 292 / 3181;
background-image: url('assets/decoration-left.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left top;
opacity: 0.3;
}
.ribbon-side-right {
right: 0;
width: auto;
aspect-ratio: 292 / 3159;
background-image: url('assets/decoration-right.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: right top;
opacity: 0.3;
}
/* Mobile: show only right decoration */
@media (max-width: 768px) {
.ribbon-side-left {
display: none;
}
}
.container{width:min(1200px,92%);margin:0 auto;padding-left:0px;padding-right:0px}
/* Hero Header - Used on all pages */
.hero-header{width:100%;padding:16px 0 12px 0;background:transparent;position:relative}
.hero-header-inner{display:flex;align-items:center;justify-content:space-between}
/* When hero-header is inside a grid (home page hero section), span full width */
.hero .hero-header{grid-column:1/-1;margin-bottom:12px;padding-bottom:0}
/* Hero header background color with 50% opacity for non-home pages (direct child of site-main, not inside .hero) */
.site-main > .hero-header{background-color:rgba(91, 65, 254, 0.5) !important}
.brand{color:var(--text);text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.brand-mark{font-weight:800;letter-spacing:.2px;font-size:30px;font-family:'Funnel Display',sans-serif}
.brand-mark span{color:#f91e5a}
.brand-subtitle{font-size:12px;opacity:0.6;font-weight:400;color:var(--muted);line-height:1.2}
.nav-toggle{display:none;background:none;border:none;padding:12px;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;border-radius:8px;transition:background 0.2s ease}
.nav-toggle:hover{background:rgba(255,255,255,0.1)}
.hamburger-line{display:block;width:24px;height:2px;background:#f91e5a;border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-list{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.nav-cta .btn.primary:hover{transform:none}
.cta-row.cta-row-mobile{display:none}
.nav-list a{color:var(--muted);text-decoration:none;text-transform:lowercase;font-weight:600;font-size:20px;transition:color 0.2s ease;position:relative;padding-bottom:4px}
.nav-list a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#f91e5a;border-radius:2px;transition:width 0.3s ease}
.nav-list a:hover::after,.nav-list a.active::after{width:100%}
.nav-list a.active,.nav-list a:hover{color:#f91e5a}
.hero .nav-list a{color:white}
.hero .nav-list a:hover,.hero .nav-list a.active{color:#f91e5a}
.hero-header .nav-list a{color:white}
.hero-header .nav-list a:hover,.hero-header .nav-list a.active{color:#f91e5a}
/* Navigation Dropdown Menu - PC Only */
.nav-dropdown{position:relative}
.nav-dropdown .dropdown-menu{position:absolute;top:25px;left:-90.0781px;list-style:none;padding:8px 0;margin:8px 0 0 0;background:rgba(255,255,255,0.03) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s ease;box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,0.08);z-index:1000}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown .dropdown-menu li{margin:0;padding:0}
.nav-dropdown .dropdown-menu a{display:block;padding:12px 20px;color:var(--muted);text-decoration:none;text-transform:lowercase;font-weight:600;font-size:16px;transition:all 0.2s ease;position:relative;padding-bottom:12px}
.nav-dropdown .dropdown-menu a::after{content:'';position:absolute;bottom:8px;left:20px;width:0;height:2px;background:#f91e5a;border-radius:2px;transition:width 0.3s ease}
.nav-dropdown .dropdown-menu a:hover{color:#f91e5a;background:rgba(249,30,90,0.1)}
.nav-dropdown .dropdown-menu a:hover::after{width:calc(100% - 40px)}
.hero .nav-dropdown .dropdown-menu a{color:white}
.hero .nav-dropdown .dropdown-menu a:hover{color:#f91e5a}
.hero-header .nav-dropdown .dropdown-menu a{color:white}
.hero-header .nav-dropdown .dropdown-menu a:hover{color:#f91e5a}
/* Show dropdown items as regular menu items in mobile hamburger menu */
@media (max-width:900px){
.nav-dropdown{display:contents;position:static !important;margin:0 !important;padding:0 !important;width:auto !important;height:auto !important}
.nav-dropdown > a{display:none !important;margin:0 !important;padding:0 !important;width:0 !important;height:0 !important;visibility:hidden !important}
.nav-dropdown:hover .dropdown-menu{opacity:1 !important;visibility:visible !important;transform:none !important}
.nav-dropdown .dropdown-menu{display:contents !important;position:static !important;opacity:1 !important;visibility:visible !important;transform:none !important;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border:none !important;box-shadow:none !important;min-width:auto !important;padding:0 !important;margin:0 !important;top:auto !important;left:auto !important;z-index:auto !important;width:auto !important;height:auto !important}
.nav-dropdown .dropdown-menu li{padding:12px 0 !important;margin:0 !important;list-style:none;display:list-item !important}
.nav-dropdown .dropdown-menu a{display:inline-block !important;padding:0 !important;padding-bottom:4px !important;margin:0 !important;color:inherit !important;text-decoration:none !important;text-transform:lowercase !important;font-weight:600 !important;font-size:16px !important;transition:color 0.2s ease !important;position:relative !important;background:transparent !important;width:auto !important;height:auto !important}
.nav-dropdown .dropdown-menu a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#f91e5a;border-radius:2px;transition:width 0.3s ease}
.nav-dropdown .dropdown-menu a:hover{color:#f91e5a !important;background:transparent !important}
.nav-dropdown .dropdown-menu a:hover::after{width:100%}
.nav-dropdown .dropdown-menu a.active{color:#f91e5a !important}
.nav-dropdown .dropdown-menu a.active::after{width:100%}
}
/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr;gap:28px;align-items:stretch;padding:0 0 0px 0}
.hero-player-section{background:linear-gradient(180deg, rgba(91, 65, 254, 0.5) 0%, rgba(45, 55, 72, 0) 100%);position:relative;overflow:hidden}
.hero-player-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,');z-index:0;pointer-events:none}
.hero-player-section .container{position:relative;z-index:1}
/* Non-home pages: hero live player (schedule-style) – same layout, padding, px, no shadow, hide manualDJ */
body:not(.page-home) .hero-player-section .hero-live-embed .hero-live-player,
body:not(.page-home) .hero-player-section .hero-live-embed .hero-presenter-card {
box-shadow: none !important;
}
body:not(.page-home) .hero-player-section .hero-live-embed .hero-live-request {
display: none !important;
}
body:not(.page-home) .hero-player-section {
padding: 40px 0 20px 0;
}
@media (max-width: 768px) {
body:not(.page-home) .hero-player-section {
padding: 20px 0 10px 0;
}
body:not(.page-home) .hero-player-section .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
@media (max-width: 480px) {
body:not(.page-home) .hero-player-section .container {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
@media (min-width: 1025px) {
body:not(.page-home) .hero-player-section .hero-live-embed {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
}
body:not(.page-home) .hero-player-section .hero-live-embed .hero-live-player {
height: 250px !important;
min-height: 250px !important;
flex: 1 1 50% !important;
max-width: 50% !important;
border-radius: 16px 0 0 16px !important;
margin-right: -12px !important;
box-shadow: none !important;
z-index: 2 !important;
box-sizing: border-box !important;
justify-content: flex-start !important;
align-items: center !important;
}
body:not(.page-home) .hero-player-section .hero-live-embed .hero-live-player .hero-live-player-inner {
min-height: 206px !important;
height: 206px !important;
justify-content: flex-start !important;
align-items: center !important;
}
body:not(.page-home) .hero-player-section .hero-live-embed .hero-presenter-card {
flex: 1 1 50% !important;
min-height: 250px !important;
height: 250px !important;
margin-top: 0 !important;
margin-left: -12px !important;
border-radius: 0 16px 16px 0 !important;
box-shadow: none !important;
z-index: 1 !important;
}
body:not(.page-home) .hero-player-section .hero-live-embed .hero-presenter-inner {
height: 206px !important;
min-height: 206px !important;
}
body:not(.page-home) .hero-player-section .hero-live-embed .hero-presenter-info {
justify-content: center !important;
align-items: flex-start !important;
margin-left: 30px !important;
}
}
.hero-latest{display:grid;grid-template-columns:1fr;gap:12px;position:relative;background:#45576a;border-radius:16px;padding:22px 26px;margin:0;border:1px solid rgba(255,255,255,0.18);box-shadow:0 10px 30px rgba(0,0,0,0.35);filter:brightness(0.5);transition:filter 0.25s ease}
.hero-latest:hover,.hero-latest.hero-latest--playing{filter:brightness(1)}
#hero-latest{margin-top:0px;margin-bottom:0px}
/* Hide Mixcloud player behind custom UI */
#mixcloud-player-container {
position: fixed;
bottom: -400px; /* Hidden below viewport */
left: 0;
width: 100%;
height: 400px;
opacity: 0;
pointer-events: none;
z-index: -1;
overflow: hidden;
transition: bottom 0.3s ease;
background: #21055f; /* Official samudrafm purple background */
}
#mixcloud-player {
width: 100%;
height: 100%;
border: none;
background: #21055f; /* Official samudrafm purple background */
}
/* Ensure custom player controls are above the hidden player */
.player-widget {
position: relative;
z-index: 10;
background: rgba(91, 65, 254, 0.3);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
gap: 16px;
align-items: center;
justify-content: flex-start;
padding: 16px;
overflow: hidden;
}
.player-widget::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('assets/background/playerbackground.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.5;
z-index: -1;
border-radius: var(--radius);
}
.player-content-row{display:flex;align-items:center;gap:16px;width:100%;justify-content:flex-start}
.player-left{position:relative;flex:0 0 152px;max-width:152px;height:152px}
.hero-latest-cover{width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast}
.live-badge{position:absolute;top:8px;left:8px;background:#f91e5a;color:white;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.hero-latest-cover.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);
background:
radial-gradient(600px 300px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
#142636 url('images/SamudraFMLogo1.png') center/42% no-repeat;
}
.play-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.2);border-radius:12px;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.2s;pointer-events:none}
.play-pause-btn{background:transparent;border:none;width:64px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:auto;z-index:10;position:relative;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.play-pause-btn{font-size:48px;color:white;font-weight:bold}
.play-pause-btn:hover{transform:scale(1.08)}
.play-pause-btn:active{transform:scale(0.95)}
.player-right{flex:1;min-width:0;min-height:152px}
.player-info{margin-bottom:0}
.spotify-logo{width:24px;height:24px;background:var(--brand);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:white;font-weight:bold}
.track-title{font-size:14px;font-weight:700;margin:0;color:var(--text)}
#hero-ep-title{font-size:20px;margin-bottom:0}
.track-artist{font-size:12px;color:var(--muted);margin:0}
#hero-ep-artist{font-size:15px;color:white !important;font-family:'Atkinson Hyperlegible',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.player-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;margin-top:5px}
.volume-control{display:flex;align-items:center;gap:8px;overflow:hidden}
.volume-icon{font-size:16px}
.volume-slider{width:100px}
.volume-bar{
height:4px;
background:#333;
border-radius:2px;
position:relative;
cursor:pointer;
transition:all 0.2s ease,transform 0.1s;
user-select:none;
touch-action:none;
}
.volume-bar:hover{
background:#444;
height:6px;
margin-top:-1px;
}
.volume-fill{
height:100%;
background:#f91e5a;
border-radius:2px;
transition:width 0.1s;
will-change:width;
}
.volume-handle{
position:absolute;
top:-4px;
right:0;
width:12px;
height:12px;
background:#f91e5a;
border-radius:50%;
cursor:grab;
transition:all 0.2s ease;
border:2px solid white;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
user-select:none;
touch-action:none;
will-change:left,transform;
}
.volume-handle:hover{
transform:scale(1.2);
box-shadow:0 4px 8px rgba(0,0,0,0.3);
}
.volume-handle:active{
cursor:grabbing;
transform:scale(1.1);
}
.request-btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:12px 16px;border-radius:12px;text-decoration:none;font-size:12px;font-weight:600;transition:all 0.2s ease}
#hero-open{overflow:hidden}
.request-btn:hover{background:var(--bg-elev) !important;border-color:#f91e5a !important;color:#f91e5a !important}
.progress-container{
margin-top: 0;
padding: 0 4px;
}
.progress{
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
position: relative;
cursor: pointer;
transition: all 0.2s ease;
}
.progress:hover{
background: rgba(255, 255, 255, 0.3);
transform: scaleY(1.1);
}
.progress .bar{
height: 100%;
background: linear-gradient(90deg, #f91e5a, #8b4c93);
border-radius: 4px;
transition: width 0.1s ease;
position: relative;
}
.progress-handle{
position: absolute;
top: 50%;
left: 0;
width: 16px;
height: 16px;
background: #f91e5a;
border: 2px solid white;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.progress:hover .progress-handle{
opacity: 1;
}
.time-display{
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
margin-top: 6px;
font-weight: 500;
}
.hero-embed iframe{width:100%;height:120px;border:0;border-radius:10px}
.hero .hero-copy{grid-column:1;min-width:0;overflow:hidden}
.hero-live-embed{display:flex;flex-direction:column;gap:0;grid-column:2;min-width:0;position:relative}
.hero-live-offline{display:none;flex:1;min-width:0;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;color:var(--muted);letter-spacing:0.02em}
.hero-live-embed.hero-live-text-pending .hero-live-offline{display:none}
.hero-live-embed.hero-live-text-pending .hero-presenter-status,
.hero-live-embed.hero-live-text-pending .hero-presenter-name,
.hero-live-embed.hero-live-text-pending .hero-presenter-subtitle,
.hero-live-embed.hero-live-text-pending .hero-presenter-meta,
.hero-live-embed.hero-live-text-pending .hero-presenter-socials,
.hero-live-embed.hero-live-text-pending .hero-live-request{visibility:hidden}
.hero-live-player{width:100%;max-width:100%;min-height:250px;background:#343e57;padding:22px 26px;border-radius:16px;flex-shrink:0;position:relative;z-index:2}
#home .hero-live-player{box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.hero-live-player-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;height:100%;min-width:0}
.hero-live-left{position:relative;flex-shrink:0;width:200px;height:200px}
.hero-live-cover{width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--panel)}
.hero-live-badge{position:absolute;top:4px;right:4px;font-size:12px;font-weight:700;letter-spacing:0.05em;background:#f91e5a;color:#fff;padding:4px 8px;border-radius:4px}
.hero-live-badge.hero-live-badge--offline{background:var(--muted);color:#fff}
#hero-live-spotify-row{margin-bottom:5px}
#hero-live-spotify-row .hero-live-badge{position:static;top:auto;right:auto;flex-shrink:0;margin-left:auto}
.hero-live-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);border-radius:12px;opacity:0;transition:opacity 0.2s;pointer-events:auto}
.hero-live-player:hover .hero-live-play-overlay,.hero-live-play-overlay:focus-within{opacity:1}
.hero-live-play-pause{width:70%;height:70%;max-width:105px;max-height:105px;border-radius:50%;border:0;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:6.5rem;transition:transform 0.2s;pointer-events:auto}
.hero-live-play-pause i{font-size:1em;display:flex;align-items:center;justify-content:center;width:1em;height:1em}
.hero-live-play-pause:hover{transform:scale(1.08);background:transparent}
/* PC only: show overlay on load and on hover; hide after 5s when not hovering (JS adds .hero-live-play-overlay-hidden) */
@media (min-width: 1025px) {
.hero-live-play-overlay { opacity: 1; }
.hero-live-play-overlay.hero-live-play-overlay-hidden { opacity: 0; }
.hero-live-player:hover .hero-live-play-overlay { opacity: 1 !important; }
/* Center hero-live-player-inner inside hero-live-player (horizontal + vertical) */
.hero-live-player { display: flex; align-items: center; justify-content: center; }
/* Sync hero-live-info height with hero-live-left (200px) so overlay and info align; vertical center */
.hero-live-player-inner { min-height: 200px; height: 200px; align-items: center; }
#hero-live-info.hero-live-info {
height: 200px;
min-height: 200px;
max-height: 200px;
justify-content: flex-start;
}
#hero-live-info.hero-live-info .hero-live-controls-row { margin-top: auto; }
}
@media (max-width: 1024px) {
.hero-live-play-overlay.hero-live-play-overlay-hidden { opacity: 1; }
}
/* Mobile and tablet: play button always visible, no blur/dark overlay */
@media (max-width: 1024px) {
.hero-live-play-overlay {
opacity: 1;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* Mobile only (phones): hero-live-info = 100% width of player-inner (fill remaining space), height 150px */
@media (max-width: 768px) {
#hero-live-info.hero-live-info,
.hero-live-player-inner .hero-live-info {
flex: 1 1 0% !important;
min-width: 100px !important;
max-width: none !important;
width: auto !important;
box-sizing: border-box;
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
}
}
/* Mobile/tablet (max-width 768px): hero live – volume above request link, full width; cover 166x166; info auto-resizes */
@media (max-width: 768px) {
.hero-live-player .hero-live-player-inner {
min-width: 0;
}
.hero-live-player-inner {
flex-wrap: nowrap;
}
.hero-live-player-inner .hero-live-left {
width: 166px !important;
height: 166px !important;
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
.hero-live-player-inner .hero-live-play-overlay {
border-radius: 12px;
}
.hero-live-player-inner .hero-live-info {
flex: 1 1 0% !important;
min-width: 100px !important;
max-width: none !important;
width: auto !important;
align-items: flex-start;
text-align: left;
overflow: hidden;
box-sizing: border-box;
}
.hero-live-player-inner .hero-live-info .hero-live-title {
flex-shrink: 0;
min-height: 1.2em;
}
.hero-live-player-inner .hero-live-info .hero-live-title,
.hero-live-player-inner .hero-live-info .hero-live-subtitle {
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}
.hero-live-player-inner .hero-live-info .hero-live-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
width: 100%;
display: block;
box-sizing: border-box;
}
.hero-live-player-inner .hero-live-info .hero-live-subtitle,
.hero-live-subtitle {
margin: 0;
}
.hero-live-player-inner .hero-live-info .hero-live-status-row,
.hero-live-player-inner .hero-live-info .hero-live-subtitle,
.hero-live-player-inner .hero-live-info .hero-live-controls-row {
text-align: left;
align-self: flex-start;
}
.hero-live-player-inner .hero-live-info .hero-live-title {
align-self: stretch;
text-align: left;
}
.hero-live-player-inner .hero-live-info #hero-live-spotify-row {
flex: 0 0 auto;
width: 100%;
min-width: 0;
}
.hero-live-player-inner .hero-live-info .hero-live-controls-row {
margin: 0;
margin-top: auto;
}
.hero-live-controls-row {
width: 100%;
min-width: 0;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
margin: 0;
margin-top: auto;
}
.hero-live-controls-row .hero-live-request {
align-self: flex-start;
margin-right: auto;
}
.hero-live-volume-wrap {
flex: 0 0 auto;
width: 100%;
min-width: 0;
}
.hero-live-volume {
flex: 1;
min-width: 0;
width: 100%;
}
.hero-live-subtitle {
margin-top: 0;
}
.hero-live-request {
padding: 7px 20px;
}
}
.hero-live-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;height:100%;gap:0}
.hero-live-info.hero-live-info-hidden{display:none!important}
.hero-live-status-row{display:flex;align-items:center;gap:8px;margin:0;min-height:24px;letter-spacing:0.24em;font-size:0.72rem;text-transform:uppercase;color:#fff}
.hero-live-status-dot{width:10px;height:10px;border-radius:999px;background:var(--live);box-shadow:0 0 0 4px rgba(249,30,90,0.3)}
.hero-presenter-status .hero-live-status-dot{width:14px;height:14px;box-shadow:0 0 0 5px rgba(249,30,90,0.3)}
.hero-live-status-label{font-weight:700}
.hero-presenter-status .hero-live-status-label{font-size:1.15rem}
.hero-live-spotify-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;line-height:0}
.hero-live-spotify-link:hover{opacity:0.9}
.hero-live-spotify-icon{width:24px;height:24px;min-width:24px;min-height:24px;display:block;flex-shrink:0;vertical-align:middle}
#hero-live-spotify-row .hero-live-spotify-icon{visibility:visible;opacity:1}
.hero-live-spotify-link--unavailable{pointer-events:none;cursor:default}
.hero-live-spotify-link--unavailable .hero-live-spotify-icon{filter:grayscale(1);opacity:0.6}
.hero-live-spotify-link--unavailable:hover{opacity:1}
.hero-live-title{font-size:1.35rem;font-weight:800;margin:0;color:#fff}
.hero-live-subtitle{font-size:0.95rem;color:var(--muted);margin:0}
.hero-live-title,
.hero-live-subtitle {
transition: opacity 0.25s ease;
}
.hero-live-info.hero-live-text-updating .hero-live-title,
.hero-live-info.hero-live-text-updating .hero-live-subtitle {
opacity: 0;
}
.hero-live-controls-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0;margin-top:auto;flex-wrap:wrap}
.hero-live-volume-wrap{display:flex;align-items:center;gap:10px}
.hero-live-volume-icon{font-size:14px}
.hero-live-volume{width:130px;height:6px;accent-color:#f91e5a;cursor:pointer;min-width:0}
/* iOS/touch: larger tap target so volume slider responds reliably */
@media (pointer: coarse) {
.hero-live-volume-wrap { min-height: 44px; justify-content: flex-start; }
.hero-live-volume { min-height: 28px; padding: 8px 0; box-sizing: content-box; }
}
.hero-live-request{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:8px;background:#e5e7eb;color:#111827;font-size:0.8rem;font-weight:600;text-decoration:none;text-transform:none;box-shadow:0 2px 6px rgba(0,0,0,0.25);transition:background 0.15s ease,color 0.15s ease,transform 0.15s ease}
.hero-live-request:hover{background:#111827;color:#f9fafb;transform:translateY(-1px)}
/* AzuraCast song request modal (hero "send a request" button) */
.azuracast-request-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);padding:20px;box-sizing:border-box}
.azuracast-request-modal{background:var(--panel, #1a1a1a);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,0.5);max-width:420px;width:100%;max-height:90vh;display:flex;flex-direction:column;border:1px solid var(--border, rgba(255,255,255,0.1))}
.azuracast-request-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border, rgba(255,255,255,0.1))}
.azuracast-request-title{margin:0;font-size:1.15rem;font-weight:700;color:#fff}
.azuracast-request-close{width:36px;height:36px;border:0;background:transparent;color:var(--muted, #9ca3af);font-size:24px;line-height:1;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color 0.15s,background 0.15s}
.azuracast-request-close:hover{color:#fff;background:rgba(255,255,255,0.08)}
.azuracast-request-body{padding:16px 20px;overflow:auto;flex:1;min-height:0}
.azuracast-request-search{width:100%;padding:12px 14px;border:1px solid var(--border, rgba(255,255,255,0.2));border-radius:10px;background:rgba(0,0,0,0.3);color:#fff;font-size:0.95rem;margin-bottom:12px;box-sizing:border-box}
.azuracast-request-search::placeholder{color:var(--muted, #6b7280)}
.azuracast-request-search:focus{outline:none;border-color:#f91e5a}
.azuracast-request-results{max-height:min(400px,50vh);overflow:auto}
.azuracast-request-row{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:0;border-radius:10px;background:transparent;color:#fff;text-align:left;cursor:pointer;transition:background 0.15s;font:inherit;margin-bottom:4px}
.azuracast-request-row:hover{background:rgba(249,30,90,0.15)}
.azuracast-request-row:last-child{margin-bottom:0}
.azuracast-request-row-title{font-weight:600;font-size:0.95rem}
.azuracast-request-row-artist{font-size:0.85rem;color:var(--muted, #9ca3af)}
.azuracast-request-empty{padding:20px 0;text-align:center;color:var(--muted, #9ca3af);font-size:0.9rem;margin:0}
.azuracast-request-status{padding:8px 0 0;font-size:0.85rem;color:var(--muted, #9ca3af);min-height:1.4em}
.azuracast-request-status-error{color:#f87171}
/* Toast at top of page (after closing request modal) */
.azuracast-toast{position:fixed;top:0;left:0;right:0;z-index:10000;padding:28px 20px;text-align:center;font-size:1.1rem;font-weight:500;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.3);animation:azuracast-toast-in 0.3s ease}
.azuracast-toast-success{background:#166534;color:#dcfce7;border-bottom:1px solid rgba(220,252,231,0.3)}
.azuracast-toast-error{background:#7f1d1d;color:#fecaca;border-bottom:1px solid rgba(254,202,202,0.3)}
.azuracast-toast-hide{animation:azuracast-toast-out 0.3s ease forwards}
@keyframes azuracast-toast-in{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes azuracast-toast-out{from{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}
/* Hero presenter card (below live stream) */
.hero-presenter-card{width:100%;max-width:100%;background:#1d2844;padding:22px 26px 18px 26px;border:0;border-radius:0px 0px 20px 20px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,0.55);flex:1;min-height:200px;margin-top:-12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative;z-index:1;overflow:hidden}
.hero-presenter-inner{display:flex;align-items:stretch;justify-content:space-between;gap:20px;flex-wrap:wrap;min-width:0;width:100%;max-width:100%;height:200px;box-sizing:border-box}
.hero-presenter-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.hero-presenter-status{margin:0;padding:0;font-size:1rem;min-height:32px;letter-spacing:0.2em}
.hero-presenter-name{font-size:26px;font-weight:800;margin:0;padding:0;color:#fff;height:35px}
.hero-presenter-name-link{color:inherit;text-decoration:none;cursor:pointer;display:inline-block}
.hero-presenter-name-link:hover{color:var(--muted);text-decoration:none}
.hero-presenter-subtitle{font-size:0.95rem;margin:0;padding:0;color:var(--muted)}
.hero-presenter-meta{font-size:16px;margin:6px 0 0;padding:0;color:var(--muted);margin-top:auto}
.hero-presenter-socials{display:flex;align-items:center;gap:10px;margin-top:auto}
.hero-presenter-social-icon{width:28px;height:28px;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;color:#e5e7eb;font-size:0.8rem;background:transparent;line-height:1;text-align:center;text-decoration:none}
.hero-presenter-social-icon i{pointer-events:none;font-size:1.35rem}
.hero-presenter-avatar-wrap{flex-shrink:0;width:150px;max-width:150px;display:flex;align-items:center}
.hero-presenter-avatar{width:150px;height:150px;flex-shrink:0;aspect-ratio:1/1;border-radius:14px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--panel);border:none}
.hero-copy h1{font-size:54px;line-height:1.05;margin:0 0 12px}
.hero-copy h1 .underlined-word{text-decoration:underline;text-decoration-color:#f91e5a;padding:0}
.hero-copy h1 .pink-punctuation{color:#f91e5a}
.hero-copy p{color:var(--muted);margin:0 0 20px;font-size:20px}
.cta-row{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;background:transparent;border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600;cursor:pointer;transition:all 0.2s ease}
.btn:hover:not(:disabled){background:var(--bg-elev);border-color:#f91e5a;color:#f91e5a}
.btn:disabled{cursor:not-allowed;opacity:0.6}
button.btn{opacity:1}
.btn.primary{background:linear-gradient(135deg,#f91e5a,#ff4d6d);color:white;border:0;padding:18px 32px;font-size:18px;font-weight:700;min-height:56px;box-shadow:0 4px 15px rgba(249,30,90,0.3);animation:pulse 2s infinite}
.btn.primary:hover{background:transparent;border:0;color:#f91e5a;transform:translateY(-4px);box-shadow:0 8px 25px rgba(249,30,90,0.3), inset 0 0 0 2px #f91e5a;border-radius:12px;padding:18px 32px;font-size:18px;font-weight:700;min-height:56px}
.btn.small{padding:8px 12px;font-size:14px}
.hero-art{border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),url('images/hero.jpg') center/cover no-repeat;min-height:280px;box-shadow:var(--shadow);border:1px solid var(--border)}
/* Ad space banner (click to contact) - contained in hero-copy */
.ad-banner-section{margin:20px 0 0;max-width:100%;overflow:hidden;position:relative}
.ad-banner-link{display:block;text-decoration:none;color:inherit;cursor:pointer;max-width:100%}
.ad-banner-track{display:flex;width:400%;max-width:400%;transition:transform 0.5s ease;will-change:transform}
.ad-banner-slide{flex:0 0 25%;width:25%;min-width:0;aspect-ratio:1440/900;background-size:cover;background-position:center;background-repeat:no-repeat}
.ad-banner-dots{display:flex;justify-content:center;gap:10px;position:absolute;bottom:14px;left:0;right:0;z-index:2;pointer-events:none}
.ad-banner-dots .ad-banner-dot{pointer-events:auto;width:15px;height:15px;border-radius:4px;border:2px solid rgba(255,255,255,.9);background:transparent;cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.ad-banner-dots .ad-banner-dot:hover{background:rgba(255,255,255,.5)}
.ad-banner-dots .ad-banner-dot.active{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.95)}
@media (max-width:768px){
.ad-banner-dots{bottom:10px}.ad-banner-dots .ad-banner-dot{width:12px;height:12px;border-radius:3px}
.ad-banner-slide{aspect-ratio:1440/900;height:auto;max-height:none}
}
/* Panels */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(116,211,255,.12)}
.dot.live{background:var(--live);box-shadow:0 0 0 4px rgba(255,77,109,.15)}
.now-live .live-body{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.live-host{display:flex;gap:14px;align-items:center}
.live-host img{width:84px;height:84px;border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.host-name{font-weight:700;margin:0}
.show-desc{margin:6px 0 10px;color:var(--muted)}
.icon{background:#102837;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
.icon:hover{background:#15344a}
.live-track .muted{color:var(--muted);margin:0 0 6px}
.track-title{margin:0 0 10px}
.progress{height:16px;background:#102837;border-radius:999px;border:1px solid var(--border);overflow:hidden}
.progress .bar{height:100%;background:#f91e5a}
/* Main Content Grid Layout */
.main-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin: 0px 0 50px 0;
align-items: start; /* Align both sections to the top */
padding-top: 0;
padding-bottom: 0;
}
/* Ensure both sections have consistent content alignment */
.instagram-section,
.coming {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
/* Desktop-only: Enforce 50/50 split between Instagram and Coming Up sections */
@media (min-width: 769px) {
.main-content-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important; /* Explicit 50/50 split */
gap: 28px !important;
align-items: stretch; /* Ensure equal height columns */
min-height: 400px; /* Minimum height to prevent overlap */
max-width: 1200px; /* Limit total grid width */
margin: 28px auto; /* Center the grid */
width: 100%;
}
.instagram-section {
height: auto; /* Allow natural height */
min-height: 400px; /* Minimum height for consistency */
align-self: stretch; /* Fill available height */
max-width: 100% !important; /* Don't exceed grid column width */
width: 100% !important; /* Fill exactly 50% of available space */
flex: none !important; /* Prevent flex from overriding grid */
}
.coming {
height: auto; /* Allow natural height */
min-height: 400px; /* Minimum height for consistency */
align-self: stretch; /* Fill available height */
max-width: 100% !important; /* Don't exceed grid column width */
width: 100% !important; /* Fill exactly 50% of available space */
flex: none !important; /* Prevent flex from overriding grid */
}
/* Ensure proper spacing between sections */
.instagram-section,
.coming {
overflow: visible; /* Prevent content clipping */
box-sizing: border-box; /* Include padding in width calculation */
}
/* Aggressive fix for Instagram content on desktop */
.instagram-section * {
max-width: 100% !important;
box-sizing: border-box !important;
}
.instagram-feed {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
display: flex !important;
flex-wrap: nowrap !important;
}
.instagram-feed .instagram-card {
flex: 0 0 calc(50% - 7px) !important; /* 2 cards per row with gap */
min-width: 0 !important;
max-width: calc(50% - 7px) !important;
width: calc(50% - 7px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Ensure Instagram posts grid doesn't exceed container */
.instagram-posts {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.instagram-post {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Force container constraints */
.instagram-section {
contain: layout style !important;
overflow: hidden !important;
}
}
.instagram-section .section-head,
.coming .section-head {
margin-bottom: 14px;
}
/* Previously played (from live stream) */
.recently-played-section {
margin-top: 28px;
margin-bottom: 28px;
padding-top: 0;
padding-bottom: 0;
}
.recently-played-section .section-head {
margin-bottom: 14px;
}
.recently-played-section .section-head h2 {
display: flex;
align-items: center;
}
.recently-played-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
height: 100px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
}
.recently-played-empty {
grid-column: 1 / -1;
margin: 0;
padding: 20px 18px;
color: var(--muted);
font-size: 0.95rem;
}
.recently-played-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
min-height: 72px;
height: 100%;
border-right: 1px solid var(--border);
box-shadow: none;
border-radius: 0 20px 20px 0;
transition: background 0.15s, transform 0.2s ease, box-shadow 0.2s ease;
}
.recently-played-row:first-child {
border-radius: 16px 20px 20px 16px;
}
.recently-played-row:last-child {
border-right: 0;
border-radius: 0 16px 16px 0;
}
.recently-played-row:only-child {
border-radius: 16px;
}
.recently-played-art {
aspect-ratio: 1 / 1;
height: 80%;
width: auto;
flex-shrink: 0;
border-radius: 8px;
background-size: cover;
background-position: center;
background-color: var(--panel);
}
.recently-played-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.recently-played-title {
display: block;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.recently-played-artist {
display: block;
color: var(--muted);
font-size: 0.9rem;
}
.recently-played-link {
color: #1db954;
padding: 8px;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
}
.recently-played-link:hover {
color: #1ed760;
background: rgba(29, 185, 84, 0.1);
}
.recently-played-link--unavailable {
color: var(--muted);
cursor: default;
pointer-events: none;
}
.recently-played-link--unavailable:hover {
color: var(--muted);
background: transparent;
}
.recently-played-link--spotify-grey {
color: var(--muted);
}
.recently-played-link--spotify-grey:hover {
color: var(--muted);
background: transparent;
}
/* Instagram Section */
.instagram-section {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
width: 100%; /* Responsive width */
display: flex;
flex-direction: column;
}
.instagram-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.instagram-icon {
width: 32px;
height: 32px;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}
.instagram-posts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.instagram-post {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.instagram-post:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-color: var(--brand);
}
.post-image {
width: 100%;
height: 120px;
background: linear-gradient(135deg, #f91e5a, #8b4c93);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
position: relative;
overflow: hidden;
}
.post-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.post-content {
padding: 12px;
}
.post-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0 0 4px 0;
line-height: 1.3;
}
.post-meta {
font-size: 12px;
color: var(--muted);
margin: 0;
}
.video-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.instagram-header {
cursor: pointer;
transition: opacity 0.2s ease;
}
.instagram-header:hover {
opacity: 0.8;
}
/* Instagram Cards - Matching episode cards exactly */
.instagram-card {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border);
border-radius: 14px;
filter: brightness(0.5);
transition: transform 0.2s ease, filter 0.2s ease;
}
.instagram-card:hover {
filter: brightness(1);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-color: var(--brand);
}
.instagram-section:hover .instagram-card {
filter: brightness(1);
}
.instagram-cover {
position: relative;
height: 230px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 48px;
border-radius: 8px;
overflow: hidden;
}
.instagram-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f91e5a, #8b4c93);
color: white;
font-size: 48px;
}
.video-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
transition: all 0.2s ease;
}
.instagram-card:hover .video-overlay {
background: rgba(0, 0, 0, 0.8);
transform: translate(-50%, -50%) scale(1.1);
}
.instagram-card .play-link {
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
margin-top: 8px;
}
.instagram-card .play-link:hover {
color: var(--brand);
}
.instagram-card .play-link i {
font-size: 12px;
}
.instagram-card .meta {
color: var(--muted);
font-size: 14px;
margin: 4px 0 8px 0;
}
.instagram-card .title {
font-size: 16px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 8px 0;
color: var(--text);
}
/* New Instagram API styles */
.instagram-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.instagram-card:hover .instagram-overlay {
opacity: 1;
}
.instagram-link {
color: white;
font-size: 24px;
text-decoration: none;
transition: transform 0.3s ease;
}
.instagram-link:hover {
transform: scale(1.2);
}
.instagram-content {
padding: 12px;
}
.instagram-caption {
font-size: 14px;
color: var(--text);
margin: 0 0 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.instagram-date {
font-size: 12px;
color: var(--muted);
margin: 0;
}
/* Instagram date overlay - positioned at top of cover */
.instagram-date-overlay {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
padding: 4px 8px;
border-radius: 6px;
z-index: 2;
}
.instagram-date-overlay .instagram-date {
color: white;
font-size: 11px;
font-weight: 500;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Instagram Feed - Horizontal scrolling like episodes */
.instagram-feed {
display: flex;
gap: 14px;
flex: 1;
min-height: 275px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding-bottom: 0;
}
/* Hide scrollbar but keep functionality */
.instagram-feed::-webkit-scrollbar {
display: none;
}
.instagram-feed {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Instagram cards - fixed width for horizontal scroll */
.instagram-feed .instagram-card {
flex: 0 0 calc(33.333% - 10px); /* 3 cards visible at a time */
min-width: 150px;
height: 100%;
}
/* Instagram Navigation Controls - Top Right */
.instagram-nav-controls {
display: flex;
gap: 8px;
margin-left: auto;
align-items: center;
}
.instagram-section .section-head,
.episodes .section-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.episodes .section-head h2,
.instagram-section .section-head h2 {
display: flex;
align-items: center;
flex-grow: 1;
margin: 0;
}
/* Episodes Navigation Buttons */
.episodes-nav-controls {
display: flex;
gap: 8px;
align-items: center;
}
.episodes-nav-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10;
}
.episodes-nav-btn:hover {
background: #f91e5a;
border-color: #f91e5a;
color: white;
transform: scale(1.1);
}
.episodes-nav-btn:active {
transform: scale(0.95);
}
.episodes-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}
.episodes-nav-btn i {
font-size: 12px;
}
/* Instagram Navigation Buttons */
.instagram-nav-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10;
}
.instagram-nav-btn:hover {
background: #f91e5a;
border-color: #f91e5a;
color: white;
transform: scale(1.1);
}
.instagram-nav-btn:active {
transform: scale(0.95);
}
.instagram-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}
.instagram-nav-btn i {
font-size: 12px;
}
/* Instagram Slider Controls */
.instagram-slider-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.instagram-slider-controls .slider-btn {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
font-size: 16px;
}
.instagram-slider-controls .slider-btn:hover {
background: var(--brand);
color: white;
border-color: var(--brand);
transform: scale(1.05);
}
.instagram-slider-controls .slider-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.instagram-slider-controls .slider-dots {
display: flex;
justify-content: center;
gap: 8px;
}
.instagram-slider-controls .slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: all 0.2s ease;
}
.instagram-slider-controls .slider-dot.active {
background: var(--brand);
transform: scale(1.2);
}
.instagram-loading {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--muted);
text-align: center;
}
.instagram-loading i {
font-size: 48px;
color: var(--brand);
margin-bottom: 16px;
animation: pulse 2s ease-in-out infinite;
}
.instagram-loading p {
font-size: 14px;
margin: 0;
}
.instagram-post {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.instagram-post:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.instagram-post-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #f91e5a, #8b4c93);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
position: relative;
overflow: hidden;
}
.instagram-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.instagram-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f91e5a, #8b4c93);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 48px;
}
.instagram-post-content {
padding: 16px;
}
.instagram-post-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0 0 8px 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.instagram-post-description {
font-size: 12px;
color: var(--muted);
margin: 0 0 8px 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.instagram-post-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--muted);
}
.instagram-post-date {
margin: 0;
}
.instagram-post-link {
color: var(--brand);
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.instagram-post-link:hover {
color: var(--text);
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
/* Privacy Policy Page Styles */
.privacy-policy {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.privacy-content {
line-height: 1.7;
color: var(--text);
}
.privacy-section {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.privacy-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.privacy-section h2 {
color: var(--brand);
font-size: 24px;
font-weight: 700;
margin-bottom: 16px;
margin-top: 0;
}
.privacy-section h3 {
color: var(--text);
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
margin-top: 20px;
}
.privacy-section p {
margin-bottom: 16px;
color: var(--muted);
}
.privacy-section ul {
margin-bottom: 16px;
padding-left: 20px;
}
.privacy-section li {
margin-bottom: 8px;
color: var(--muted);
}
.privacy-section strong {
color: var(--text);
font-weight: 600;
}
.contact-info {
position: relative;
top: 25px;
background: rgba(255,255,255,0.03) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 20px;
margin-top: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.contact-info p {
margin-bottom: 8px;
}
.contact-info a {
color: var(--brand);
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
.section-subtitle {
color: var(--muted);
font-size: 14px;
margin-top: 8px;
margin-bottom: 0;
}
/* Instagram grid - single row to match Coming up section */
#instagram-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
/* Section subtitle styling */
.section-subtitle {
color: var(--muted);
font-size: 14px;
margin: 4px 0 0 0;
font-weight: 400;
}
/* Dot particle styling */
.dot-particle {
display: inline-block;
width: 12px;
height: 12px;
background: #f91e5a;
border-radius: 50%;
margin-right: 16px;
position: relative;
vertical-align: middle;
box-shadow: 0 0 15px rgba(249, 30, 90, 0.6);
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 15px rgba(249, 30, 90, 0.6);
transform: scale(1);
}
50% {
box-shadow: 0 0 25px rgba(249, 30, 90, 0.9);
transform: scale(1.05);
}
}
/* Heading line styling */
.heading-line {
display: inline-block;
height: 2px;
background: linear-gradient(90deg, #f91e5a, #8b4c93);
margin-left: 15px;
margin-right: 15px;
flex-grow: 1;
position: relative;
border-radius: 1px;
}
/* Make the heading container flex to properly align the line */
#coming-heading, #episodes-heading {
display: flex;
align-items: center;
width: 100%;
}
#coming-heading {
margin-top: 35px;
}
/* Cards */
.recent h2,.coming h2{margin:28px 0 14px}
.card-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card-col{display:grid;grid-template-columns:1fr;gap:14px}
/* Coming up section - no scrolling needed since we only show 2 items */
.card-col {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
/* Coming up cards - horizontal layout with cover on left */
.coming .card {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 24px;
min-height: 120px;
width: 100%;
box-sizing: border-box;
}
.coming .card .cover {
width: 100px;
height: 100px;
flex-shrink: 0;
border-radius: 16px;
}
.coming .card .content {
flex: 1;
min-width: 0;
}
/* Coming up time display (date and day) */
.coming-up-card {
position: relative;
background: rgba(255, 255, 255, 0.03) !important;
}
/* Colorful text styling for coming-up cards */
.coming-up-card .title {
color: #fff;
font-size: 16px;
}
.coming-up-card .meta {
color: rgba(255, 255, 255, 0.75);
}
.coming-up-card .content .meta:nth-of-type(2) {
color: var(--brand);
font-weight: 600;
}
.coming-up-card .date-day {
color: var(--accent);
font-weight: 500;
}
.coming-up-card.card .content {
padding: 0;
margin-top: 0;
margin-bottom: 0;
height: 99px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.coming-up-time {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: var(--brand);
color: white;
padding: 12px 16px;
border-radius: 8px;
text-align: center;
min-width: 80px;
}
.coming-up-date {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.coming-up-day {
font-size: 12px;
font-weight: 400;
opacity: 0.9;
margin-top: 2px;
}
/* Loading and no-events states for coming up section */
.loading-state,
.no-events {
text-align: center;
padding: 40px 20px;
color: var(--muted);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
margin: 20px 0;
}
.loading-state {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: transparent !important;
border: none !important;
padding: 20px !important;
}
.loading-state::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid var(--border);
border-top: 2px solid var(--brand);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Coming Section - Remove min-height for natural alignment */
.coming {
height: auto; /* Natural height based on content */
}
/* Episodes Slider - Horizontal Scrollable */
.episodes-slider-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
margin-top: 20px;
margin-bottom: 20px;
scrollbar-width: none;
-ms-overflow-style: none;
width: 100%;
max-width: 100%;
}
.episodes-slider-container::-webkit-scrollbar {
display: none;
}
.episodes-slider {
display: flex;
gap: 14px;
width: max-content;
padding-bottom: 0px;
min-width: 100%;
flex-wrap: nowrap;
}
#episodes-slider {
padding-bottom: 0px;
}
.episodes-slider .card {
flex: 0 0 220px;
min-width: 220px;
filter: brightness(0.5);
transition: filter 0.2s ease;
display: flex;
flex-direction: column;
}
.episodes-slider .card .content {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.episodes-slider .card .play-link {
margin-top: auto;
}
.episodes-slider .card:hover {
filter: brightness(1);
}
#episodes:hover .episodes-slider .card {
filter: brightness(1);
}
.slider-controls {
display: none;
}
.slider-btn {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
font-size: 16px;
}
.slider-btn:hover {
background: var(--brand);
color: white;
border-color: var(--brand);
transform: scale(1.05);
}
.slider-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.slider-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: all 0.2s ease;
}
.slider-dot.active {
background: var(--brand);
transform: scale(1.2);
}
/* Placeholder Section */
.placeholder-section {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;overflow:hidden}
article.card{margin-top:0px;margin-bottom:0px}
.clickable-card{cursor:pointer;transition:all 0.2s ease}
.clickable-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.15);border-color:var(--brand)}
.card .cover{height:120px;background:#0f1e2a center/cover no-repeat}
.cover.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);
background:
radial-gradient(600px 300px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
#142636 url('images/SamudraFMLogo1.png') center/42% no-repeat;
}
.hero-art.placeholder{background:
radial-gradient(800px 400px at 0% -10%, rgba(255,255,255,.06), transparent 60%),
#152b3b url('images/SamudraFMLogo1.png') center/160px no-repeat;
}
.avatar-placeholder{width:84px;height:84px;border-radius:12px;display:flex;align-items:center;justify-content:center;
background:#102837 url('images/SamudraFMLogo1.png') center/60% no-repeat;
color:var(--muted);border:1px solid var(--border);font-weight:700}
.card .content{padding:12px;border-radius:29px}
.card .title{font-weight:700;margin:0}
.card .meta{color:var(--muted);margin:0 0 5px 0}
/* Episodes */
.episodes .card .cover{height:140px}
.episodes-card {
background: rgba(255, 255, 255, 0.03) !important;
}
.episodes .play-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;color:#f91e5a;text-decoration:none;font-weight:600;border:1px solid #f91e5a;padding:8px 12px;border-radius:6px;transition:all 0.3s ease;width:100%;box-sizing:border-box}
.episodes .play-link:hover{color:#f91e5a;border-color:#f91e5a;background:rgba(249,30,90,0.1);opacity:1}
.episodes .embed{border-top:1px solid var(--border);}
/* Request Page Icons - Make all Font Awesome icons pink */
.request-form-section .fas,
.request-form-section .fa,
.request-hero .fas,
.request-hero .fa,
.request-sidebar .fas,
.request-sidebar .fa,
.form-group .fas,
.form-group .fa,
.form-header .fas,
.form-header .fa,
.guidelines-list .fas,
.guidelines-list .fa,
.steps .fas,
.steps .fa,
.recent-requests .fas,
.recent-requests .fa {
color: #f91e5a !important;
}
/* Font Awesome icons opacity */
i.fas {
opacity: 1;
}
/* Contact Page Icons - Make all Font Awesome icons pink */
.contact-form-section .fas,
.contact-form-section .fa,
.contact-hero .fas,
.contact-hero .fa,
.contact-sidebar .fas,
.contact-sidebar .fa,
.form-header .fas,
.form-header .fa,
.quick-actions .fas,
.quick-actions .fa,
.faq-list .fas,
.faq-list .fa,
.response-times .fas,
.response-times .fa {
color: #f91e5a !important;
}
/* Contact form submit button icon: white when not hovering (override pink above) */
.contact-form-section .form-actions .btn.primary i.fas,
.contact-form-section .form-actions .btn.primary .fa-paper-plane,
#contact-form .form-actions .btn.primary i {
color: #fff !important;
}
/* Request Page Hero */
.request-hero{background:transparent;padding:0 0 0px 0;text-align:center;position:relative;overflow:hidden}
.request-hero::before{display:none}
.request-hero .hero-header{padding:24px 0 40px 0;text-align:left;position:relative;z-index:10}
.request-hero .nav-list a{color:white}
.request-hero .nav-list a:hover,.request-hero .nav-list a.active{color:#f91e5a}
.hero-content{position:relative;z-index:1;overflow:hidden;margin-top:0;margin-bottom:0;padding-bottom:0px}
.hero-icon{width:80px;height:80px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;backdrop-filter:blur(10px)}
.hero-icon i{font-size:32px;color:#f91e5a !important}
.request-hero h1{color:white;font-size:48px;font-weight:800;margin:0 0 16px;text-shadow:0 2px 4px rgba(0,0,0,0.1)}
.request-hero p{color:rgba(255,255,255,0.9);font-size:18px;max-width:600px;margin:0 auto;line-height:1.6}
/* Request Layout */
.request-layout{display:grid;grid-template-columns:1fr 350px;gap:40px;margin:40px 0}
@media (max-width:768px){.request-layout{grid-template-columns:1fr;gap:30px}}
/* Request Hero Mobile */
@media (max-width:768px){.request-hero{padding:0 0 30px 0}.request-hero .hero-header{padding:16px 0 24px 0}.request-hero h1{font-size:36px}.request-hero p{font-size:16px}}
/* Form Card */
.form-card{background:rgba(255, 255, 255, 0.03) !important;border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.form-header{text-align:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.form-header h2{color:var(--text);font-size:28px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;justify-content:center;gap:12px}
.form-header h2 i{color:var(--brand)}
.form-header p{color:var(--muted);margin:0;font-size:16px}
/* Form Styles */
.request-form{max-width:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media (max-width:480px){.form-row{grid-template-columns:1fr}}
.form-group{margin-bottom:24px}
.form-group label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600;color:var(--text);font-size:14px}
.form-group label i{color:var(--brand);width:16px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:16px 20px;border:2px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-family:inherit;font-size:16px;transition:all 0.2s;box-sizing:border-box}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(74,44,138,0.1)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;cursor:pointer}
.submit-btn{width:100%;padding:16px 24px;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;opacity:1}
.submit-btn i.fa-paper-plane,
.submit-btn i.fas.fa-paper-plane{color:white !important;opacity:1 !important}
.submit-btn:hover i.fa-paper-plane,
.submit-btn:hover i.fas.fa-paper-plane{color:#f91e5a !important}
.submit-btn:hover{opacity:1}
/* Success Message */
.success-message{text-align:center;padding:48px 24px;background:var(--bg-elev);border-radius:16px;border:1px solid var(--border)}
.success-icon{width:80px;height:80px;background:var(--brand);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;position:relative;z-index:1}
.success-icon i{font-size:32px;color:white !important;z-index:10;position:relative;text-shadow:0 0 0 white}
.success-message h3{color:var(--text);margin:0 0 12px;font-size:24px;font-weight:700}
.success-message p{color:var(--muted);margin:0 0 32px;font-size:16px;line-height:1.6}
.success-actions{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;max-width:400px;margin:0 auto}
.success-actions .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:12px 24px;border-radius:8px;font-weight:600;transition:all 0.2s;flex:1;justify-content:center;min-width:140px}
.success-actions .btn.primary{background:#f91e5a;color:white;border:none;cursor:pointer}
.success-actions .btn.primary:hover{background:transparent;border:2px solid #f91e5a;color:#f91e5a;transform:translateY(-4px);box-shadow:0 8px 25px rgba(249,30,90,0.3), 0 0 0 1px rgba(249,30,90,0.2);border-radius:12px}
.success-actions .btn.secondary{background:var(--bg);color:var(--text);border:2px solid var(--border);cursor:pointer}
.success-actions .btn.secondary:hover{background:var(--bg-elev);border-color:var(--brand);transform:translateY(-1px)}
.success-actions .btn.secondary:last-child{background:var(--bg-elev);border-color:var(--brand);color:var(--brand)}
.success-actions .btn.secondary:last-child:hover{background:var(--brand);color:white;border-color:var(--brand)}
@media (max-width:480px){.success-actions{flex-direction:column;gap:12px}.success-actions .btn{min-width:auto}}
/* Pulse animation for primary button */
@keyframes pulse {
0% { box-shadow: 0 4px 15px rgba(249,30,90,0.3); }
50% { box-shadow: 0 4px 25px rgba(249,30,90,0.5); }
100% { box-shadow: 0 4px 15px rgba(249,30,90,0.3); }
}
/* Sidebar */
.request-sidebar{display:flex;flex-direction:column;gap:24px}
.sidebar-card{background:rgba(255, 255, 255, 0.03) !important;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow);margin-bottom:25px}
.sidebar-card h3{color:var(--text);font-size:18px;font-weight:700;margin:0 0 20px;display:flex;align-items:center;gap:8px}
.sidebar-card h3 i{color:var(--brand)}
/* Steps */
.steps{display:flex;flex-direction:column;gap:16px}
.step{display:flex;align-items:flex-start;gap:16px}
.step-number{width:32px;height:32px;background:#f91e5a;color:white;opacity:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.step-content h4{color:var(--text);margin:0 0 4px;font-size:16px;font-weight:600}
.step-content p{color:var(--muted);margin:0;font-size:14px;line-height:1.4}
/* Guidelines */
.guidelines-list{list-style:none;padding:0;margin:0}
.guidelines-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;padding:12px;background:rgba(255, 255, 255, 0.03) !important;border-radius:8px;border:1px solid var(--border)}
.guidelines-list li i{color:var(--brand);margin-top:2px;flex-shrink:0;font-size:12px}
.guidelines-list li:last-child{margin-bottom:0}
/* Google Form Integration */
.google-form-container{margin:24px 0;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.google-form-container iframe{width:100%;height:600px;border:none;display:block}
.fallback-form{display:none}
/* Recent Requests */
.recent-requests{display:flex;flex-direction:column;gap:12px}
.request-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(255, 255, 255, 0.03) !important;border-radius:8px;border:1px solid var(--border)}
.request-info{display:flex;flex-direction:column;gap:2px}
.request-info strong{color:var(--text);font-size:14px;font-weight:600}
.request-info span{color:var(--muted);font-size:12px}
.request-info small{color:var(--muted);font-size:11px}
.request-time{color:var(--muted);font-size:12px;font-weight:500}
.request-message{color:var(--muted);font-size:11px;margin-top:4px;padding:4px 8px;background:var(--bg-elev);border-radius:4px}
.refresh-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:4px;transition:all 0.2s}
.refresh-btn:hover{color:var(--brand);background:var(--bg-elev)}
.refresh-btn.spinning i{animation:spin 0.6s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Loading States */
.loading-requests{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;color:var(--muted);font-size:14px}
.loading-requests i{font-size:16px;color:var(--brand)}
.no-requests{text-align:center;padding:24px;color:var(--muted)}
/* Button Loading States */
.submit-btn:disabled{opacity:0.7;cursor:not-allowed}
.btn-loading{display:none;align-items:center;gap:8px}
.btn-loading i{font-size:14px}
/* Error Messages */
.error-message{display:none;align-items:center;gap:8px;padding:12px 16px;background:#fee;border:1px solid #fcc;border-radius:8px;color:#c33;font-size:14px;margin-top:16px}
/* Contact Page Hero */
.contact-hero{background:transparent;padding:0 0 0px 0;text-align:center;position:relative;overflow:hidden}
.contact-hero .hero-header{padding:24px 0 40px 0;text-align:left;position:relative;z-index:10}
.contact-hero::before{display:none}
.contact-hero .hero-content{position:relative;z-index:1}
.contact-hero .hero-icon{width:80px;height:80px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;backdrop-filter:blur(10px)}
.contact-hero .hero-icon i{font-size:32px;color:#f91e5a !important}
.contact-hero h1{color:white;font-size:48px;font-weight:800;margin:0 0 16px;text-shadow:0 2px 4px rgba(0,0,0,0.1)}
.contact-hero p{color:rgba(255,255,255,0.9);font-size:18px;max-width:600px;margin:0 auto;line-height:1.6}
.contact-hero .nav-list a{color:white}
.contact-hero .nav-list a:hover,.contact-hero .nav-list a.active{color:#f91e5a}
/* Contact Hero Mobile */
@media (max-width:768px){
.contact-hero{padding:0 0 30px 0}
.contact-hero .hero-header{padding:16px 0 24px 0}
.contact-hero h1{font-size:36px}
.contact-hero p{font-size:16px}
}
/* Schedule Page Hero */
.schedule-hero{background:transparent;padding:0 0 0px 0;text-align:center;position:relative;overflow:hidden}
.schedule-hero .hero-header{padding:24px 0 40px 0;text-align:left;position:relative;z-index:10}
.schedule-hero .hero-content{position:relative;z-index:1}
.schedule-hero .hero-icon{width:80px;height:80px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;backdrop-filter:blur(10px)}
.schedule-hero .hero-icon i{font-size:32px;color:#f91e5a !important}
.schedule-hero h1{color:white;font-size:48px;font-weight:800;margin:0 0 16px;text-shadow:0 2px 4px rgba(0,0,0,0.1)}
.schedule-hero p{color:rgba(255,255,255,0.9);font-size:18px;max-width:600px;margin:0 auto;line-height:1.6}
.schedule-hero .nav-list a{color:white}
.schedule-hero .nav-list a:hover,.schedule-hero .nav-list a.active{color:#f91e5a}
/* Schedule Hero Mobile */
@media (max-width:768px){
.schedule-hero{padding:0 0 0px 0}
.schedule-hero .hero-header{padding:16px 0 24px 0}
.schedule-hero h1{font-size:36px}
.schedule-hero p{font-size:16px}
}
/* Contact Layout */
.contact-layout{display:grid;grid-template-columns:1fr 350px;gap:40px;margin:40px 0}
@media (max-width:768px){.contact-layout{grid-template-columns:1fr;gap:30px}}
/* Google Form Container */
.google-form-container{border-radius:12px;overflow:hidden;margin:24px 0;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.google-form-container iframe{border:none;width:100%;min-height:600px}
/* Contact Sidebar */
.contact-sidebar{display:flex;flex-direction:column;gap:0px}
/* Quick Actions */
.quick-actions{display:flex;flex-direction:column;gap:12px}
.quick-action-btn{display:flex;align-items:center;gap:12px;padding:16px;background:rgba(255, 255, 255, 0.03) !important;border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all 0.2s ease}
.quick-action-btn:hover{background:var(--panel);border-color:var(--brand);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.quick-action-btn i{font-size:18px;color:var(--brand);width:20px;text-align:center}
.quick-action-btn div{display:flex;flex-direction:column;gap:2px}
.quick-action-btn strong{color:var(--text);font-size:14px;font-weight:600}
.quick-action-btn span{color:var(--muted);font-size:12px}
/* FAQ List */
.faq-list{display:flex;flex-direction:column;gap:16px}
.faq-item{padding:16px;background:rgba(255, 255, 255, 0.03) !important;border-radius:8px;border:1px solid var(--border)}
.faq-item strong{color:var(--text);font-size:14px;font-weight:600;display:block;margin-bottom:8px}
.faq-item p{color:var(--muted);font-size:13px;margin:0;line-height:1.4}
/* Response Times */
.response-times{display:flex;flex-direction:column;gap:12px}
.response-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255, 255, 255, 0.03) !important;border-radius:8px;border:1px solid var(--border)}
.response-item i{font-size:16px;color:var(--brand);width:20px;text-align:center}
.response-item div{display:flex;flex-direction:column;gap:2px}
.response-item strong{color:var(--text);font-size:13px;font-weight:600}
.response-item span{color:var(--muted);font-size:11px;font-weight:500}
.error-message i{color:#c33;font-size:16px}
.episodes iframe{width:100%;height:120px;border:0;border-radius:0 0 14px 14px;display:block}
/* About */
.about{padding:42px 0}
#about{padding-top:0px;padding-bottom:0px;margin-top:50px;margin-bottom:50px}
.about h2{margin:0 0 20px;text-align:left;border-bottom:2px solid #f91e5a;padding-bottom:0px;display:inline-block}
.about-content{max-width:800px;margin:0;text-align:left}
.about-content p{font-size:16px;line-height:1.6;margin:0 0 16px;color:var(--text)}
.about-content p:last-child{margin-bottom:0}
/* Footer */
.site-footer {
background: transparent;
padding: 20px 0 20px;
color: #e0e0e0;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-column h3 {
color: white;
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* First column stays left-aligned */
.footer-column:nth-child(1) {
text-align: left;
}
/* Align the second column (Connect & Listen) to the right with padding */
.footer-column:nth-child(2) {
text-align: right;
padding-right: 20px;
}
.footer-column:nth-child(2) h3 {
text-align: right;
margin-bottom: 12px;
}
.footer-column:nth-child(2) .social-links {
text-align: right;
margin-top: 0;
margin-bottom: 0;
}
.footer-column:nth-child(2) .social-links li {
text-align: right;
margin-bottom: 8px;
}
.footer-column:nth-child(2) .social-links .social-link {
justify-content: flex-end;
}
/* Align the third column (Links) to the right with padding */
.footer-column:nth-child(3) {
text-align: right;
padding-right: 20px;
}
.footer-column:nth-child(3) h3 {
text-align: left;
margin-bottom: 12px;
}
.footer-column:nth-child(3) .footer-links {
text-align: left;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.footer-column:nth-child(3) .footer-links li {
text-align: left;
margin-bottom: 8px;
}
.footer-logo {
margin-bottom: 15px;
}
.footer-logo img {
width: 80px;
height: 80px;
border-radius: 8px;
margin-top: 20px;
}
.footer-brand-title {
font-family: 'Funnel Display', sans-serif;
color: white;
font-size: 28px;
font-weight: 800;
margin: 0 0 15px 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
letter-spacing: -0.02em;
}
.footer-description {
color: #b0b0b0;
line-height: 1.6;
font-size: 14px;
margin: 0;
}
.footer-programme {
color: #8fa6b7;
font-size: 13px;
line-height: 1.5;
margin: 12px 0 0 0;
font-style: normal;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
justify-content: flex-start;
align-items: flex-end;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #b0b0b0;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #f91e5a;
}
.footer-links .hero-live-request {
display: inline;
padding: 0;
background: none;
color: #b0b0b0;
font-size: inherit;
font-weight: inherit;
text-transform: none;
box-shadow: none;
border-radius: 0;
}
.footer-links .hero-live-request:hover {
background: none;
transform: none;
color: #f91e5a;
}
.social-links .social-link {
display: flex;
align-items: center;
gap: 8px;
}
.social-links .social-link i {
font-size: 24px;
width: 28px;
}
.footer-bottom {
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-bottom p {
color: #b0b0b0;
font-size: 14px;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}
.muted{color:var(--muted)}
/* Mobile responsiveness for footer - Compact version */
@media (max-width: 768px) {
.site-footer {
padding: 30px 0 20px; /* Reduced from 60px 0 30px */
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 20px; /* Reduced from 30px */
text-align: center;
}
/* First column spans full width and stays left-aligned */
.footer-column:nth-child(1) {
grid-column: 1 / -1;
text-align: left;
}
/* Second column (Connect & Listen) on the left */
.footer-column:nth-child(2) {
text-align: left;
}
/* Third column (Links) on the right column, but left-aligned content */
.footer-column:nth-child(3) {
text-align: left;
}
.footer-column h3 {
margin-bottom: 10px; /* Reduced from 15px */
font-size: 14px; /* Reduced from 16px */
}
.footer-column:nth-child(2) h3 {
text-align: left;
}
.footer-column:nth-child(3) h3 {
text-align: left;
}
.footer-brand-title {
font-size: 22px; /* Reduced from 28px */
margin: 0 0 10px 0; /* Reduced margin */
}
.footer-description {
font-size: 12px; /* Reduced from 14px */
margin: 0;
}
.footer-programme {
font-size: 11px; /* Reduced from 13px */
margin: 8px 0 0 0; /* Reduced margin */
}
.footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px; /* Reduced from 20px */
}
.footer-links li {
margin-bottom: 0;
}
.footer-links a {
font-size: 12px; /* Reduced from 14px */
}
.footer-bottom p {
font-size: 12px; /* Reduced from 14px */
}
.social-links .social-link i {
font-size: 20px; /* Reduced from 24px */
width: 24px; /* Reduced from 28px */
}
/* Override desktop right-alignment for second column on mobile */
.footer-column:nth-child(2) .social-links {
text-align: left;
}
.footer-column:nth-child(2) .social-links li {
text-align: left;
}
.footer-column:nth-child(2) .social-links .social-link {
justify-content: flex-start;
}
}
/* Responsive */
@media (max-width: 900px){
.hero{grid-template-columns:1fr;gap:18px}
.hero .hero-copy,.hero-live-embed{grid-column:1}
.hero-header-inner{position:relative;flex-wrap:wrap}
.now-live .live-body{grid-template-columns:1fr}
.nav-toggle{display:flex;width:56px !important;height:56px !important;padding:16px !important}
.hamburger-line{width:28px !important;height:3px !important}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1){transform:translateY(9px) rotate(45deg) !important}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3){transform:translateY(-9px) rotate(-45deg) !important}
.nav{position:static;width:100%;order:2;margin-top:0}
.nav-list{display:none;flex-direction:column;gap:0;width:100%;background:rgba(23,50,70,0.4);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:12px 20px;margin-top:16px;box-shadow:0 8px 32px rgba(0,0,0,0.37),inset 0 1px 0 rgba(255,255,255,0.1);position:relative;overflow:hidden}
.nav-list::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);pointer-events:none}
.nav-list.open{display:flex}
.nav-list li{padding:12px 0;margin:0}
.nav-list a{font-size:16px;display:inline-block;position:relative;padding-bottom:4px}
.nav-list a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#f91e5a;border-radius:2px;transition:width 0.3s ease}
.nav-list a:hover::after,.nav-list a.active::after{width:100%}
.brand{order:0}
.nav .nav-toggle{position:absolute;right:0;top:0}
.main-content-grid{grid-template-columns:1fr;gap:4px}
.instagram-posts{grid-template-columns:1fr 1fr}
.nav-cta{display:none}
.cta-row.cta-row-mobile{display:flex}
}
@media (max-width: 768px){
/* Hide only the manualDJ button in hero live player controls row on phone */
.hero-live-embed .hero-live-controls-row .hero-live-request {
display: none !important;
}
.instagram-posts{grid-template-columns:1fr 1fr}
.instagram-feed {
display: flex;
gap: 12px;
flex: 1;
min-height: 275px; /* Match desktop height for consistency */
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding-bottom: 0;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.instagram-feed::-webkit-scrollbar {
display: none;
}
/* Instagram navigation controls on mobile */
.instagram-nav-controls {
gap: 6px;
}
.instagram-nav-btn {
width: 48px;
height: 48px;
}
.instagram-nav-btn i {
font-size: 16px;
}
/* Instagram cards on mobile - 2 visible at a time with better width */
.instagram-feed .instagram-card {
flex: 0 0 calc(50% - 6px);
min-width: 160px;
max-width: 170px;
height: 100%;
display: flex;
flex-direction: column;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s ease;
}
/* Instagram cover on mobile */
.instagram-cover {
height: 230px !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
border-radius: 0;
}
/* Instagram content on mobile */
.instagram-content {
flex: 1;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Instagram caption on mobile */
.instagram-caption {
font-size: 12px;
line-height: 1.3;
color: var(--text);
margin: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
/* Instagram section width fix for mobile */
.instagram-section {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Instagram feed container width fix */
.instagram-feed {
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
/* Reorder sections on mobile - Coming Up above Latest Posts */
.main-content-grid {
display: flex;
flex-direction: column;
}
.coming {
order: 1;
margin: 0;
padding: 0;
width: 100%;
}
.coming h2 {
margin: 8px 0 14px 0;
}
.instagram-section {
order: 2;
margin-top: 56px; /* 2cm gap (56px = 2cm at 72dpi) */
margin-bottom: 28px; /* Add bottom margin to prevent overlap */
height: 400px !important;
}
.episodes {
order: 3;
margin-top: 28px; /* Add top margin to episodes section */
}
/* Instagram date overlay on mobile */
.instagram-date-overlay {
top: 6px;
left: 6px;
padding: 3px 6px;
}
.instagram-date-overlay .instagram-date {
font-size: 10px;
}
/* Instagram section width on mobile */
.instagram-section {
max-width: 100%;
width: 100%;
}
}
/* Phone and tablet: remove brightness on Instagram, episodes slider, and hero-latest */
@media (max-width: 1024px) {
.instagram-section .instagram-card,
.instagram-section:hover .instagram-card {
filter: none;
}
.episodes-slider .card,
.episodes-slider .card:hover,
#episodes:hover .episodes-slider .card {
filter: none;
}
.hero-latest,
.hero-latest:hover,
.hero-latest.hero-latest--playing {
filter: none;
}
}
/* Mobile-specific improvements - placed at end for highest priority */
@media (max-width: 768px) {
/* Initially hide play button on mobile until Mixcloud is ready */
.play-pause-btn,
#hero-play-pause,
.play-overlay .play-pause-btn,
.player-widget .play-pause-btn {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* Show play button when Mixcloud is ready */
.play-pause-btn.mixcloud-ready,
#hero-play-pause.mixcloud-ready,
.play-overlay .play-pause-btn.mixcloud-ready,
.player-widget .play-pause-btn.mixcloud-ready {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
position: relative !important;
left: auto !important;
top: auto !important;
width: 72px !important;
height: 72px !important;
overflow: visible !important;
transition: opacity 0.3s ease-in-out !important;
}
.play-pause-btn {
width: 72px;
height: 72px;
font-size: 52px;
min-height: 44px;
min-width: 44px;
background: transparent !important;
color: white !important;
}
/* Enhanced mobile progress bar interactivity */
.progress-bar {
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.progress-bar:hover,
.progress-bar:active {
opacity: 0.9;
}
.progress-handle {
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform 0.1s ease;
}
.progress-handle:active {
transform: scale(1.2);
}
/* Larger touch targets for mobile */
.progress-bar {
min-height: 44px;
padding: 8px 0;
}
.progress-handle {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
}
/* Player width on mobile - make it more compact */
.hero-latest {
width: 100%;
max-width: 100%;
padding: 16px;
margin: 16px 0;
gap: 16px;
}
/* Make player layout 50/50 on mobile */
.player-left {
flex: 0 0 50%;
max-width: 50%;
aspect-ratio: 1;
}
.player-right {
flex: 0 0 50%;
max-width: 50%;
}
.hero-latest-cover {
width: 100%;
height: 100%;
border-radius: 10px;
}
.play-overlay {
pointer-events: auto;
border-radius: 10px;
}
.play-pause-btn {
width: 60px;
height: 60px;
font-size: 42px;
}
/* Player content area - more compact */
.player-content {
flex: 1;
min-width: 0;
padding-left: 12px;
}
.player-content h3 {
font-size: 16px;
margin: 0 0 4px;
line-height: 1.2;
}
.player-content p {
font-size: 12px;
margin: 0 0 8px;
opacity: 0.8;
}
/* Player controls - more compact */
.player-controls {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.volume-control {
flex: 1;
min-width: 0;
}
.volume-slider {
width: 100%;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
.volume-slider::-webkit-slider-track {
background: rgba(255, 255, 255, 0.2);
height: 4px;
border-radius: 2px;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: var(--brand);
border-radius: 50%;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.volume-slider::-moz-range-track {
background: rgba(255, 255, 255, 0.2);
height: 4px;
border-radius: 2px;
border: none;
}
.volume-slider::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--brand);
border-radius: 50%;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Progress bar - more compact */
.progress-container {
margin-top: 12px;
}
.progress-bar {
height: 3px;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 100%;
}
.progress-bar::-webkit-slider-track {
background: rgba(255, 255, 255, 0.2);
height: 3px;
border-radius: 1.5px;
}
.progress-bar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
background: var(--brand);
border-radius: 50%;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.progress-bar::-moz-range-track {
background: rgba(255, 255, 255, 0.2);
height: 3px;
border-radius: 1.5px;
border: none;
}
.progress-bar::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--brand);
border-radius: 50%;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.progress-time {
font-size: 11px;
margin-top: 6px;
}
/* Coming up cards on mobile - maintain horizontal layout but adjust spacing */
.coming .card {
padding: 18px;
gap: 16px;
min-height: 100px;
}
/* Episode Cards */
.episodes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
.episode-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
transition: transform 0.2s ease;
}
.episode-card:hover {
transform: translateY(-4px);
}
.episode-card h3 {
color: var(--text);
font-size: 20px;
font-weight: 700;
margin: 0 0 12px;
}
.episode-card p {
color: var(--muted);
margin: 0 0 16px;
line-height: 1.6;
}
.episode-date {
color: var(--accent);
font-size: 14px;
font-weight: 600;
}
/* Team Page - Modern Design */
/* Hero Section */
.team-hero {
padding: 80px 0;
background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #1a1a1a 100%);
position: relative;
overflow: hidden;
}
.team-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.team-hero .hero-card {
padding: 0;
text-align: left;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.team-hero .hero-card h1 {
font-size: 3.5rem;
font-weight: 800;
color: white;
margin: 0 0 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.team-hero .hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
font-weight: 400;
}
/* Team Main Section */
.team-main {
padding: 80px 0;
background-color: rgba(22, 33, 62, 1);
background-image: none;
position: relative;
overflow: visible;
}
.team-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
}
.team-intro {
text-align: left;
max-width: 800px;
margin: 0 auto 60px;
position: relative;
z-index: 1;
}
.team-intro h1 {
font-size: 3.5rem;
font-weight: 800;
color: white;
margin: 0 0 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.team-intro .hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 40px;
font-weight: 400;
}
.team-intro h2 {
font-size: 2.5rem;
font-weight: 700;
color: white;
margin: 0 0 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.team-intro p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
margin: 0;
}
/* Team Grid */
.team-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
gap: 40px !important;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Team Card Styles - Based on Founders Design */
.team-card {
background: #173246 !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 16px !important;
padding: 32px !important;
text-align: center !important;
position: relative !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
.team-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(249, 30, 90, 0.05) 0%, rgba(249, 30, 90, 0.02) 100%);
border-radius: 16px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.team-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
border-color: #f91e5a !important;
}
.team-card:hover::before {
opacity: 1;
}
.team-card.founder {
border: 2px solid rgba(249, 30, 90, 0.3) !important;
box-shadow: 0 8px 20px rgba(249, 30, 90, 0.15) !important;
}
.team-card.founder:hover {
box-shadow: 0 16px 32px rgba(249, 30, 90, 0.25) !important;
border-color: #f91e5a !important;
}
/* Team Image - Larger Profile Pictures */
.team-image {
width: 150px !important;
height: 150px !important;
margin: 0 auto 20px !important;
border-radius: 50% !important;
overflow: hidden !important;
border: 3px solid rgba(249, 30, 90, 0.2) !important;
position: relative !important;
}
.team-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.3s ease !important;
}
.team-card:hover .team-image img {
transform: scale(1.05) !important;
}
/* Team Info */
.team-info {
padding: 0 !important;
position: relative !important;
z-index: 1 !important;
}
.team-info h3 {
color: #e9f1f7 !important;
font-size: 20px !important;
font-weight: 700 !important;
margin: 0 0 6px !important;
}
.team-role {
color: #f91e5a !important;
font-size: 14px !important;
font-weight: 600 !important;
margin: 0 0 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.team-bio {
color: #8fa6b7 !important;
font-size: 13px !important;
line-height: 1.5 !important;
margin: 0 0 20px !important;
font-style: italic;
}
/* Team Social */
.team-social {
display: flex !important;
gap: 12px !important;
justify-content: center !important;
}
.team-social .social-link {
width: 36px !important;
height: 36px !important;
background: #23394b !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #8fa6b7 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
}
.team-social .social-link:hover {
background: #f91e5a !important;
color: white !important;
border-color: #f91e5a !important;
transform: translateY(-2px) !important;
}
/* Join Team Section */
.join-team {
text-align: center;
max-width: 800px;
margin: 80px auto 0;
padding: 60px 40px;
background: linear-gradient(145deg, #2a2a2a 0%, #1e1e1e 100%);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 1;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.join-team h2 {
font-size: 2.2rem;
font-weight: 700;
color: white;
margin: 0 0 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
padding-left: 30px;
padding-right: 30px;
}
.join-team p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
margin: 0 0 30px;
padding-left: 30px;
padding-right: 30px;
}
.join-buttons {
display: flex;
gap: 0px;
justify-content: center;
flex-wrap: wrap;
padding-left: 30px;
padding-right: 30px;
}
.join-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
border-radius: 12px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.join-btn.primary {
background: linear-gradient(135deg, #f91e5a 0%, #e01a4f 100%);
color: white;
box-shadow: 0 6px 20px rgba(249, 30, 90, 0.3);
}
.join-btn.primary:hover {
background: linear-gradient(135deg, #ff2d6b 0%, #f91e5a 100%);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(249, 30, 90, 0.4);
}
.join-btn.secondary {
background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.join-btn.secondary:hover {
background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
/* Primary Card (Website) */
.listen-card.primary {
background: linear-gradient(145deg, #f91e5a 0%, #e01a4f 100%) !important;
border: 2px solid #f91e5a !important;
box-shadow: 0 8px 30px rgba(249, 30, 90, 0.3) !important;
position: relative;
overflow: hidden;
}
.listen-card.primary::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.listen-card.primary:hover::after {
opacity: 1;
animation: shimmer 1.5s ease-in-out;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.listen-card.primary:hover {
box-shadow: 0 20px 50px rgba(249, 30, 90, 0.4) !important;
transform: translateY(-12px) scale(1.03) !important;
}
/* Card Header */
.card-header {
display: flex !important;
align-items: center !important;
padding: 24px !important;
background: rgba(255, 255, 255, 0.03) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
gap: 18px !important;
position: relative;
}
.card-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.card-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 14px;
}
.listen-card.primary .card-icon {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.card-icon.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
box-shadow: 0 6px 20px rgba(240, 148, 51, 0.3);
}
.card-icon.facebook {
background: linear-gradient(135deg, #1877f2, #166fe5);
box-shadow: 0 6px 20px rgba(24, 119, 242, 0.3);
}
.card-icon i {
font-size: 1.6rem;
color: white;
position: relative;
z-index: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.listen-card.primary .card-icon i {
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.card-title {
flex: 1;
}
.card-title h2 {
font-size: 1.4rem;
font-weight: 700;
color: white;
margin: 0 0 6px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
letter-spacing: -0.02em;
}
.listen-card.primary .card-title h2 {
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.card-title p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
margin: 0;
font-weight: 500;
}
.listen-card.primary .card-title p {
color: rgba(255, 255, 255, 0.9);
}
.card-badge {
margin-left: auto;
}
.badge {
padding: 6px 14px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.badge:hover::before {
left: 100%;
}
.badge.live {
background: linear-gradient(135deg, #ff4444, #cc0000);
color: white;
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3); }
50% { box-shadow: 0 4px 16px rgba(255, 68, 68, 0.5); }
}
.badge.archive {
background: linear-gradient(135deg, #666, #444);
color: white;
}
/* Card Content */
.card-content {
padding: 24px !important;
position: relative;
}
.card-content p {
color: rgba(255, 255, 255, 0.8);
margin: 0 0 24px;
line-height: 1.7;
font-size: 1rem;
font-weight: 400;
}
.listen-card.primary .card-content p {
color: rgba(255, 255, 255, 0.9);
}
.card-features {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.feature {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
position: relative;
}
.feature::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, #4caf50, #66bb6a);
transition: width 0.3s ease;
}
.feature:hover::before {
width: 20px;
}
.feature i {
color: #4caf50;
font-size: 1rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
.feature span {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
font-weight: 500;
position: relative;
z-index: 1;
}
/* Card Buttons */
.card-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 700;
font-size: 0.95rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.card-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.card-btn:hover::before {
left: 100%;
}
.card-btn:hover {
background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.2);
}
.primary-btn {
background: linear-gradient(135deg, #f91e5a 0%, #e01a4f 100%);
color: white;
border: 1px solid #f91e5a;
box-shadow: 0 6px 20px rgba(249, 30, 90, 0.3);
}
.primary-btn:hover {
background: linear-gradient(135deg, #ff2d6b 0%, #f91e5a 100%);
box-shadow: 0 10px 30px rgba(249, 30, 90, 0.4);
transform: translateY(-3px);
}
.social-btn.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: white;
border: none;
}
.social-btn.instagram:hover {
background: linear-gradient(45deg, #e6683c, #dc2743, #cc2366, #bc1888, #962f8a);
}
.social-btn.facebook {
background: #1877f2;
color: white;
border: none;
}
.social-btn.facebook:hover {
background: #166fe5;
}
/* Card Types */
.listen-card.social {
border-left: 4px solid #f91e5a;
}
.listen-card.info {
border-left: 4px solid #4caf50;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.team-main {
padding: 60px 0;
background-color: rgba(0, 0, 0, 1) !important;
background-image: none !important;
}
.team-intro {
margin: 0 auto 40px;
padding: 0 20px;
}
.team-intro h1 {
font-size: 2.5rem;
}
.team-intro .hero-subtitle {
font-size: 1.1rem;
}
.team-intro h2 {
font-size: 2rem;
}
.team-intro p {
font-size: 1rem;
}
.team-grid {
grid-template-columns: 1fr;
gap: 30px;
padding: 0 20px;
}
.team-image {
width: 120px !important;
height: 120px !important;
}
.team-info h3 {
font-size: 18px !important;
}
.team-role {
font-size: 12px !important;
}
.team-bio {
font-size: 12px !important;
}
.team-social .social-link {
width: 32px !important;
height: 32px !important;
font-size: 12px !important;
}
.join-team {
margin: 60px auto 0;
padding: 40px 20px;
}
.join-team h2 {
font-size: 1.8rem;
}
.join-buttons {
flex-direction: column;
align-items: center;
}
.join-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 480px) {
.team-intro {
padding: 0 10px;
}
.team-intro h1 {
font-size: 2rem;
}
.team-intro .hero-subtitle {
font-size: 1rem;
}
.team-grid {
padding: 0 10px;
}
.team-image {
width: 100px !important;
height: 100px !important;
}
.team-card {
padding: 24px !important;
}
.join-team {
padding: 30px 15px;
}
.join-team h2 {
font-size: 1.6rem;
}
}
/* Contact Grid */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 30px;
}
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 30px;
}
}
.contact-item {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.contact-item i {
font-size: 24px;
color: var(--live);
width: 32px;
}
.contact-item h3 {
color: var(--text);
font-size: 16px;
font-weight: 700;
margin: 0 0 4px;
}
.contact-item p {
color: var(--muted);
margin: 0;
}
.contact-item a {
color: var(--live);
text-decoration: none;
}
.contact-item a:hover {
text-decoration: underline;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 16px;
}
/* About Content */
.about-content h2 {
color: var(--text);
font-size: 24px;
font-weight: 700;
margin: 40px 0 16px;
}
.about-content h2:first-child {
margin-top: 0;
}
.about-content p {
color: var(--muted);
line-height: 1.6;
margin-bottom: 20px;
}
.about-content ul {
color: var(--muted);
line-height: 1.6;
padding-left: 20px;
}
.about-content li {
margin-bottom: 8px;
}
/* About Page Hero */
.about-hero {
background: #16213e;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.about-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.about-hero-content {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
.about-hero-text {
max-width: 800px;
text-align: center;
}
.about-hero-text h1 {
color: white;
font-size: 48px;
font-weight: 800;
margin: 0 0 20px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: left;
}
.about-hero-text h1 .brand-mark {
font-size: inherit;
display: inline-block;
}
.about-hero-subtitle {
color: #f91e5a;
font-size: 24px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 30px;
text-align: center;
vertical-align: middle;
}
.about-hero-story {
color: rgba(255,255,255,0.9);
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px;
text-align: left;
}
.about-hero-tagline {
color: #f91e5a;
font-size: 18px;
font-weight: 700;
line-height: 1.6;
margin: 30px 0 30px;
text-align: left;
}
.about-hero-stats {
display: flex;
gap: 40px;
}
.stat-item {
text-align: center;
}
.stat-number {
color: #f91e5a;
font-size: 32px;
font-weight: 800;
margin-bottom: 8px;
}
.stat-label {
color: rgba(255,255,255,0.8);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.about-hero-visual {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
}
.about-hero-image {
position: relative;
z-index: 2;
}
.about-hero-image img {
width: 120px;
height: 120px;
object-fit: contain;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}
.about-hero-decoration {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.decoration-circle {
width: 200px;
height: 200px;
border: 2px solid rgba(249, 30, 90, 0.3);
border-radius: 50%;
animation: pulse 3s ease-in-out infinite;
}
.decoration-wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
border: 1px solid rgba(249, 30, 90, 0.1);
border-radius: 50%;
animation: wave 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.6; }
}
@keyframes wave {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
}
/* About Story Section */
.about-story {
padding: 80px 0;
background: var(--bg);
}
.about-story-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.about-story-text h2 {
color: var(--text);
font-size: 36px;
font-weight: 800;
margin: 0 0 20px;
}
.about-story-lead {
color: var(--brand);
font-size: 20px;
font-weight: 600;
margin: 0 0 24px;
line-height: 1.4;
}
.about-story-text p {
color: var(--muted);
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px;
}
.about-story-visual {
display: flex;
flex-direction: column;
gap: 24px;
}
.story-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
text-align: center;
transition: all 0.3s ease;
}
.story-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
border-color: var(--brand);
}
.story-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--brand), #ff6b9d);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.story-icon i {
font-size: 24px;
color: white;
}
.story-card h3 {
color: var(--text);
font-size: 20px;
font-weight: 700;
margin: 0 0 12px;
}
.story-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* About Mission Section */
.about-mission {
padding: 80px 0;
background: var(--panel);
}
.about-mission-content {
max-width: 1000px;
margin: 0 auto;
}
.mission-main {
text-align: center;
margin-bottom: 60px;
}
.mission-main h2 {
color: var(--text);
font-size: 36px;
font-weight: 800;
margin: 0 0 24px;
}
.mission-statement {
color: var(--muted);
font-size: 20px;
line-height: 1.6;
margin: 0;
max-width: 800px;
margin: 0 auto;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.value-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
text-align: center;
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
border-color: var(--brand);
}
.value-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--brand), #ff6b9d);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.value-icon i {
font-size: 24px;
color: white;
}
.value-card h3 {
color: var(--text);
font-size: 20px;
font-weight: 700;
margin: 0 0 12px;
}
.value-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* About Services Section */
.about-services {
padding: 80px 0;
background: var(--bg);
}
.about-services-content {
max-width: 1200px;
margin: 0 auto;
}
.about-services h2 {
color: var(--text);
font-size: 36px;
font-weight: 800;
text-align: center;
margin: 0 0 20px;
}
.services-intro {
color: var(--muted);
font-size: 18px;
text-align: center;
margin: 0 0 60px;
max-width: 600px;
margin: 0 auto 60px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.service-item {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
text-align: center;
transition: all 0.3s ease;
}
.service-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
border-color: var(--brand);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--brand), #ff6b9d);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.service-icon i {
font-size: 24px;
color: white;
}
.service-item h3 {
color: var(--text);
font-size: 20px;
font-weight: 700;
margin: 0 0 12px;
}
.service-item p {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* About CTA Section */
.about-cta {
padding: 80px 0;
background: linear-gradient(135deg, var(--brand), #ff6b9d);
text-align: center;
}
.about-cta-content h2 {
color: white;
font-size: 36px;
font-weight: 800;
margin: 0 0 20px;
}
.about-cta-content p {
color: rgba(255,255,255,0.9);
font-size: 18px;
line-height: 1.6;
margin: 0 0 40px;
max-width: 600px;
margin: 0 auto 40px;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn {
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.cta-buttons .btn-primary {
background: white;
color: var(--brand);
border: 2px solid white;
}
.cta-buttons .btn-primary:hover {
background: transparent;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.cta-buttons .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-buttons .btn-secondary:hover {
background: white;
color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
/* About Page Mobile Responsive */
@media (max-width: 768px) {
.about-hero {
padding: 60px 0;
}
.about-hero-content {
text-align: center;
}
.about-hero-text h1 {
font-size: 36px;
}
.about-hero-text h1 .brand-mark {
font-size: inherit;
}
.about-hero-subtitle {
font-size: 20px;
}
.about-hero-story {
font-size: 15px;
}
.about-hero-tagline {
font-size: 16px;
}
.about-hero-stats {
justify-content: center;
gap: 30px;
}
.about-hero-image img {
width: 100px;
height: 100px;
}
.decoration-circle {
width: 150px;
height: 150px;
}
.decoration-wave {
width: 180px;
height: 180px;
}
.about-story {
padding: 60px 0;
}
.about-story-content {
grid-template-columns: 1fr;
gap: 40px;
}
.about-story-text h2 {
font-size: 28px;
}
.about-story-lead {
font-size: 18px;
}
.about-mission {
padding: 60px 0;
}
.mission-main h2 {
font-size: 28px;
}
.mission-statement {
font-size: 18px;
}
.values-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.about-services {
padding: 60px 0;
}
.about-services h2 {
font-size: 28px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.about-cta {
padding: 60px 0;
}
.about-cta-content h2 {
font-size: 28px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* About Founders Section */
.about-founders {
padding: 50px 0;
background: var(--bg);
}
.about-founders-content {
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-title {
color: var(--text) !important;
font-size: 36px !important;
font-weight: 800 !important;
margin: 0 0 20px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
}
.section-line {
width: 100px;
height: 4px;
background: linear-gradient(135deg, var(--brand), #ff6b9d);
margin: 0 auto;
}
.founders-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.founder-card {
background: var(--bg-elev) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
padding: 32px !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}
.founder-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, var(--brand), #ff6b9d);
}
.founder-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
border-color: var(--brand);
}
.founder-image {
width: 100px;
height: 100px;
margin: 0 auto 20px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--brand);
position: relative;
}
.founder-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.founder-card:hover .founder-image img {
transform: scale(1.05);
}
.founder-info h3 {
color: var(--text);
font-size: 20px;
font-weight: 700;
margin: 0 0 6px;
}
.founder-role {
color: var(--brand);
font-size: 14px;
font-weight: 600;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.founder-bio {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
margin: 0 0 20px;
font-style: italic;
}
.founder-social {
display: flex;
gap: 12px;
justify-content: center;
}
.founder-social .social-link {
width: 36px;
height: 36px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
text-decoration: none;
transition: all 0.3s ease;
font-size: 14px;
}
.founder-social .social-link:hover {
background: var(--brand);
color: white;
border-color: var(--brand);
transform: translateY(-2px);
}
/* Founders Mobile Responsive */
@media (max-width: 768px) {
.about-founders {
padding: 60px 0;
}
.section-title {
font-size: 28px;
}
.founders-grid {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 40px;
}
.founder-card {
padding: 24px;
}
.founder-image {
width: 80px;
height: 80px;
}
.founder-info h3 {
font-size: 18px;
}
.founder-role {
font-size: 12px;
}
.founder-bio {
font-size: 12px;
}
.station-manager-bio {
font-size: 12px;
}
.founder-social .social-link {
width: 32px;
height: 32px;
font-size: 12px;
}
}
/* Force Founders Section Styles */
.about-founders .section-header {
text-align: center !important;
margin-bottom: 60px !important;
}
.about-founders .section-title {
color: #e9f1f7 !important;
font-size: 36px !important;
font-weight: 800 !important;
margin: 0 0 20px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
}
.about-founders .section-line {
width: 100px !important;
height: 4px !important;
background: linear-gradient(135deg, #f91e5a, #ff6b9d) !important;
margin: 0 auto !important;
}
.about-founders .founders-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
gap: 40px !important;
margin-bottom: 60px !important;
}
.about-founders .founder-card {
background: #173246 !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 16px !important;
padding: 32px !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}
.about-founders .founder-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(135deg, #f91e5a, #ff6b9d) !important;
}
.about-founders .founder-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
border-color: #f91e5a !important;
}
.about-founders .founder-image {
width: 100px !important;
height: 100px !important;
margin: 0 auto 20px !important;
border-radius: 50% !important;
overflow: hidden !important;
border: 3px solid #f91e5a !important;
position: relative !important;
}
.about-founders .founder-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.3s ease !important;
}
.about-founders .founder-card:hover .founder-image img {
transform: scale(1.05) !important;
}
.about-founders .founder-info h3 {
color: #e9f1f7 !important;
font-size: 20px !important;
font-weight: 700 !important;
margin: 0 0 6px !important;
}
.about-founders .founder-role {
color: #f91e5a !important;
font-size: 14px !important;
font-weight: 600 !important;
margin: 0 0 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.about-founders .founder-bio {
color: #8fa6b7 !important;
font-size: 13px !important;
line-height: 1.5 !important;
margin: 0 0 20px !important;
font-style: italic !important;
}
.about-founders .founder-social {
display: flex !important;
gap: 12px !important;
justify-content: center !important;
}
.about-founders .founder-social .social-link {
width: 36px !important;
height: 36px !important;
background: #23394b !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #8fa6b7 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
}
.about-founders .founder-social .social-link:hover {
background: #f91e5a !important;
color: white !important;
border-color: #f91e5a !important;
transform: translateY(-2px) !important;
}
/* Station Manager Bio */
.station-manager-bio {
color: #8fa6b7;
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
font-style: italic;
}
/* Live Now Card */
.live-now-card {
background: var(--panel);
border: 2px solid var(--live);
border-radius: var(--radius);
padding: 32px;
text-align: center;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.live-now-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--live), #ff6b8a, var(--live));
animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.live-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--live);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.live-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: liveBlink 1s ease-in-out infinite;
}
@keyframes liveBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.live-now-card h3 {
color: var(--text);
font-size: 28px;
font-weight: 800;
margin: 0 0 12px;
}
.live-now-card p {
color: var(--muted);
font-size: 16px;
margin: 0 0 24px;
line-height: 1.6;
}
.live-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.live-actions .btn {
min-width: 160px;
}
/* Schedule Section Styling */
.schedule-section {
padding: 0;
position: relative;
overflow: hidden;
}
.schedule-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
z-index: 0;
pointer-events: none;
}
.schedule-section .container {
position: relative;
z-index: 1;
}
.schedule-section h2 {
color: var(--text);
font-size: 32px;
font-weight: 800;
text-align: center;
margin: 0 0 40px;
position: relative;
}
.schedule-section h2::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--live), var(--accent));
border-radius: 2px;
}
/* Schedule List */
.schedule-list {
display: flex;
flex-direction: column;
gap: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
}
.schedule-item {
background: #1d283c;
border: none;
border-radius: 10px;
padding: 0;
display: flex;
align-items: stretch;
gap: 0;
transition: all 0.3s ease;
position: relative;
margin-bottom: 24px;
overflow: hidden;
min-height: auto;
width: 100%;
}
.schedule-item:hover {
background: var(--bg-elev);
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.schedule-image {
display: none;
padding: 0;
border-radius: 14px 0 0 14px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.08);
border-right: none;
background: rgba(255, 255, 255, 0.03) !important;
}
.schedule-image img {
width: 100%;
height: 100%;
max-width: 200px;
object-fit: cover;
border-radius: 14px 0 0 14px;
}
@media (min-width: 1280px) {
.schedule-image {
display: flex;
justify-content: center;
align-items: center;
}
}
.schedule-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 16px 0;
padding-left: 0;
padding-right: 0;
min-height: 100px;
position: relative;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: none;
border-radius: 0 14px 14px 0;
}
@media (min-width: 1280px) {
.schedule-content {
padding: 32px;
padding-left: 0;
}
}
.presenter-name {
color: white;
font-size: 33px;
font-weight: bold;
margin: 0;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.show-title {
color: white;
font-size: 18px;
font-weight: normal;
margin: 0;
margin-top: 8px;
line-height: 1.2;
display: block;
}
.schedule-actions {
display: flex;
align-items: flex-end;
gap: 10px;
margin-top: auto;
font-size: 18px;
line-height: 0;
position: absolute;
bottom: 16px;
left: 0;
right: 0;
}
@media (min-width: 1280px) {
.schedule-actions {
bottom: 32px;
}
}
.action-btn {
background: none;
border: none;
color: white;
opacity: 0.25;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
pointer-events: none;
padding: 0;
}
.action-btn:hover {
opacity: 1;
color: var(--accent, #4a2c8a);
}
.action-btn.active {
opacity: 1;
color: #f91e5a; /* Pink for active social icons */
}
.action-btn.active:hover {
color: #4a90e2; /* Blue on hover */
transform: scale(1.1);
}
.schedule-time {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #5b41fe;
padding: 20px;
font-weight: 300;
color: #ffffff;
font-size: 18px;
width: auto;
margin-left: auto;
border-radius: 0 10px 10px 0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
min-width: 120px;
}
@media (min-width: 1280px) {
.schedule-time {
padding: 40px 60px;
width: 320px;
font-size: 32px;
min-width: 200px;
}
.time-range {
font-size: 0.6em;
}
}
.time-slot {
background: none;
color: inherit;
padding: 0;
border-radius: 0;
font-size: inherit;
font-weight: inherit;
white-space: nowrap;
min-width: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-direction: column;
}
.time-slot > div:first-child::after {
content: '—';
padding: 0 8px;
font-weight: 400;
opacity: 0.7;
}
.date-day {
font-size: 0.7em;
opacity: 0.8;
margin-bottom: 2px;
font-weight: 400;
}
.time-range {
font-size: 0.8em;
font-weight: 500;
margin-top: 4px;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.schedule-item {
flex-direction: column;
text-align: center;
gap: 16px;
}
.schedule-content {
align-items: center;
}
.schedule-actions {
justify-content: center;
}
/* Add gap between coming-up cards on mobile */
article.card.coming-up-card {
margin-bottom: 16px !important;
}
article.card.coming-up-card:last-child {
margin-bottom: 0 !important;
}
/* Ensure card-col gap works on mobile */
.card-col {
gap: 16px !important;
}
/* Add gap to schedule-list container on mobile */
.schedule-list {
gap: 16px !important;
}
}
.coming .card .cover {
width: 80px;
height: 80px;
}
/* Coming up time display on mobile */
.coming-up-time {
right: 12px;
padding: 8px 12px;
min-width: 70px;
}
.coming-up-date {
font-size: 12px;
}
.coming-up-day {
font-size: 10px;
}
}
/* Extra small mobile screens (phones in portrait) */
@media (max-width: 480px) {
/* Even more compact player for small phones */
.hero-latest {
padding: 12px;
margin: 12px 0;
gap: 12px;
}
.player-left {
flex: 0 0 50%;
max-width: 50%;
aspect-ratio: 1;
}
.player-right {
flex: 0 0 50%;
max-width: 50%;
}
.hero-latest-cover {
width: 100%;
height: 100%;
border-radius: 8px;
}
.play-overlay {
border-radius: 8px;
}
.play-pause-btn {
width: 50px;
height: 50px;
font-size: 36px;
}
.player-content h3 {
font-size: 14px;
margin: 0 0 2px;
}
.player-content p {
font-size: 11px;
margin: 0 0 6px;
}
.player-controls {
gap: 8px;
margin-top: 6px;
}
.volume-slider {
height: 3px;
}
.progress-container {
margin-top: 8px;
}
.progress-bar {
height: 2px;
}
.progress-time {
font-size: 10px;
margin-top: 4px;
}
/* Make buttons more touch-friendly */
.btn {
padding: 12px 16px;
font-size: 14px;
min-height: 44px;
}
/* Adjust hero section for small screens - keep same as 501px so no layout jump at 480px */
.hero {
padding: 0 !important;
padding-bottom: 0px !important; /* Force bottom padding to 0 */
}
/* Presenter time: no margin on mobile */
/* Align presenter-time + socials to bottom on phone */
#presenter-time,
.hero-presenter-info .hero-presenter-meta {
margin: 0 !important;
margin-top: auto !important;
}
p.hero-live-subtitle,
.hero-live-subtitle {
margin: 0;
}
}
/* Mobile (viewport ~500px): hero live embed and recently played fit narrow viewport */
@media (max-width: 500px) {
/* Hero live embed - scale to fit 500px width */
#hero-live-embed,
.hero-live-embed {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.hero-live-player {
padding: 6px 7px;
height: 200px;
min-height: 200px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.hero-live-player .hero-live-player-inner {
min-width: 0;
width: 95%;
max-width: 95%;
box-sizing: border-box;
}
.hero-live-player-inner {
gap: 12px;
flex-wrap: nowrap;
}
.hero-live-player-inner .hero-live-left {
width: 150px !important;
min-width: 150px;
height: 150px !important;
min-height: 150px;
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
.hero-live-player-inner .hero-live-play-overlay {
min-width: 150px;
min-height: 150px;
}
.hero-live-player-inner .hero-live-info {
flex: 1 1 0% !important;
min-width: 100px !important;
max-width: none !important;
width: auto !important;
overflow: visible;
box-sizing: border-box;
height: auto;
min-height: 150px;
max-height: none;
padding-bottom: 6px;
}
.hero-live-player-inner .hero-live-info .hero-live-title {
flex-shrink: 0;
min-height: 1.2em;
}
#hero-live-spotify-row {
margin-bottom: 0;
flex: 1;
min-width: 0;
}
.hero-live-player-inner .hero-live-info .hero-live-title,
.hero-live-player-inner .hero-live-info .hero-live-subtitle {
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}
.hero-live-player-inner .hero-live-info .hero-live-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
width: 100%;
display: block;
box-sizing: border-box;
align-self: stretch;
}
.hero-live-player-inner .hero-live-info .hero-live-controls-row {
margin: 0;
margin-top: auto;
}
/* Play icon: 70% of art (art is 150px on mobile → 105px) */
.hero-live-play-pause {
width: 70%;
height: 70%;
max-width: 105px;
max-height: 105px;
font-size: 6.5rem;
}
.hero-live-controls-row {
width: 100%;
min-width: 0;
margin: 0;
margin-top: auto;
}
.hero-live-volume-wrap {
flex: 1;
min-width: 0;
gap: 0;
}
.hero-live-volume {
flex: 1;
min-width: 0;
width: auto;
}
.hero-live-title {
font-size: 1.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
width: 100%;
display: block;
box-sizing: border-box;
}
.hero-live-subtitle {
font-size: 0.85rem;
margin: 0;
}
/* Presenter card: auto-resize; padding-top clears overlap so status dot isn't clipped */
.hero-presenter-card {
padding: 32px 16px 12px;
min-height: 140px;
margin: -18px 0 0 0 !important;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
border-radius: 0 0 14px 14px;
overflow: visible;
}
.hero-presenter-inner {
height: auto;
min-height: 100px;
gap: 12px;
margin: 20px 0 0 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.hero-presenter-info {
width: 100%;
max-width: 100%;
min-width: 0;
flex: 1 1 0%;
overflow: visible;
box-sizing: border-box;
margin: 0;
}
.hero-presenter-info .hero-presenter-name,
.hero-presenter-info .hero-presenter-subtitle,
.hero-presenter-info .hero-presenter-meta {
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
margin: 0;
}
.hero-presenter-info .hero-presenter-status,
.hero-presenter-info .hero-presenter-socials {
margin: 0;
}
/* Align presenter-time + socials to bottom on phone */
.hero-presenter-info .hero-presenter-meta,
#presenter-time {
margin: 0 !important;
margin-top: auto !important;
}
.hero-presenter-info .hero-presenter-socials {
margin: 0;
}
.hero-presenter-name {
font-size: 18px;
height: auto;
}
.hero-presenter-subtitle {
font-size: 0.85rem;
}
.hero-presenter-avatar-wrap {
width: 140px;
min-width: 140px;
max-width: 140px;
}
.hero-presenter-avatar {
width: 140px;
min-width: 140px;
height: 140px;
min-height: 140px;
border-radius: 12px;
}
.hero-presenter-social-icon {
width: 24px;
height: 24px;
}
.hero-presenter-social-icon i {
font-size: 1rem;
}
/* Recently played section - mobile: song cards, synced to container width */
#recently-played-section,
.recently-played-section {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
overflow: hidden;
}
.recently-played-list {
grid-template-columns: 1fr;
height: auto;
min-height: 168px;
gap: 0;
margin: 0;
padding: 0;
border-radius: var(--radius);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
}
.recently-played-empty {
min-height: 168px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.recently-played-row {
min-height: 56px;
min-width: 0;
max-width: 100%;
padding: 12px 14px;
border-right: 0;
border-bottom: 1px solid var(--border);
border-radius: 0;
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
.recently-played-row:first-child {
border-radius: 12px 12px 0 0;
}
.recently-played-row:last-child {
border-bottom: 0;
border-radius: 0 0 12px 12px;
}
.recently-played-row:only-child {
border-radius: 12px;
}
.recently-played-art {
height: 44px;
width: 44px;
min-width: 44px;
border-radius: 6px;
flex-shrink: 0;
}
.recently-played-info {
min-width: 0;
margin: 0;
flex: 1 1 0%;
overflow: hidden;
}
.recently-played-title,
.recently-played-artist {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.recently-played-section .section-head h2 {
font-size: 1.1rem;
}
}
/* Desktop player layout */
@media (min-width: 769px) {
/* Ensure desktop player layout is horizontal */
.player-widget {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 16px !important;
padding: 16px !important;
}
/* Hide the full-width progress bar on desktop */
.player-widget > .progress-container {
display: none;
}
/* Show the progress bar in player-right on desktop */
.player-widget .player-right .progress-container {
display: block;
}
/* Ensure player content row doesn't interfere on desktop */
.player-widget .player-content-row {
display: contents;
}
}
/* Mobile Player and Quick Access Styles */
@media (max-width: 768px) {
/* Hero section - reduced gap between nav and text on mobile */
.hero {
padding: 0 !important;
padding-bottom: 0px !important; /* Force bottom padding to 0 */
}
/* Change hero text to two lines on mobile */
.hero-copy h1 {
font-size: 48px;
line-height: 1.1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Remove pseudo-elements on mobile to show actual content with underlines */
.hero-copy h1::before,
.hero-copy h1::after {
display: none;
}
/* First line: "Your study," - align left */
.hero-copy h1 .hero-line-1 {
display: block;
text-align: left;
width: 100%;
}
/* Second line: "your music." - align right */
.hero-copy h1 .hero-line-2 {
display: block;
text-align: right;
width: 100%;
margin-top: 0.1em;
}
/* Change hero subtitle to two lines on mobile */
.hero-copy p {
white-space: pre-line;
}
/* Presenter card: auto-resize; background extends up a little on mobile */
.hero-presenter-card {
margin: -18px 0 0 0 !important;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.hero-presenter-inner {
margin: 20px 0 0 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.hero-presenter-info {
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
flex: 1 1 0%;
box-sizing: border-box;
}
.hero-presenter-info .hero-presenter-status,
.hero-presenter-info .hero-presenter-name,
.hero-presenter-info .hero-presenter-subtitle,
.hero-presenter-info .hero-presenter-socials {
margin: 0;
}
/* Align presenter-time + socials to bottom on phone */
.hero-presenter-info .hero-presenter-meta,
#presenter-time {
margin: 0 !important;
margin-top: auto !important;
}
/* Keep navigation bar fixed on mobile */
.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 100 !important;
}
/* Add top padding to main content to account for fixed header */
.site-main {
padding-top: 0 !important;
}
/* Hide Send a request buttons on mobile */
.cta-row .btn[href="request.html"],
.request-btn {
display: none !important;
}
/* Ensure episodes slider works on mobile */
.episodes-slider-container {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-behavior: smooth !important;
}
.episodes-slider {
display: flex !important;
flex-wrap: nowrap !important;
width: max-content !important;
}
/* Recent shows mobile styles - Schedule style */
.recent-shows-section {
padding: 40px 0;
}
.recent-shows-section h2 {
font-size: 24px;
}
.recent-show-item {
flex-direction: column;
text-align: center;
gap: 16px;
}
.recent-show-content {
align-items: center;
}
.recent-show-actions {
justify-content: center;
}
.recent-show-image {
display: flex !important;
padding: 20px !important;
}
.recent-show-image img {
width: 80px !important;
height: 80px !important;
}
.recent-show-title {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--text, white) !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.recent-show-description {
font-size: 14px !important;
font-weight: 400 !important;
color: var(--muted, rgba(255,255,255,0.7)) !important;
margin: 0 !important;
line-height: 1.3 !important;
white-space: normal !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
line-clamp: 2 !important;
}
.recent-show-time {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: #220660 !important;
color: white !important;
padding: 8px 10px !important;
border-radius: 8px !important;
text-align: center !important;
min-width: 65px !important;
font-size: 12px !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(34, 6, 96, 0.3) !important;
border: none !important;
margin: 0 !important;
width: auto !important;
flex-shrink: 0 !important;
min-height: 50px !important;
}
.recent-show-time-slot {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1px !important;
text-align: center !important;
line-height: 1.1 !important;
}
.recent-show-date {
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.1 !important;
margin-bottom: 1px !important;
}
.recent-show-content {
margin-right: 100px !important;
padding-right: 10px !important;
}
/* Past shows mobile styles - Schedule style */
.past-shows-section {
padding: 40px 0;
}
.past-shows-section h2 {
font-size: 24px;
}
.past-show-item {
flex-direction: column;
text-align: center;
gap: 16px;
}
.past-show-content {
align-items: center;
}
.past-show-actions {
justify-content: center;
}
.past-show-image {
display: flex !important;
padding: 20px !important;
}
.past-show-image img {
width: 80px !important;
height: 80px !important;
}
.past-show-title {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--text, white) !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.past-show-description {
font-size: 14px !important;
font-weight: 400 !important;
color: var(--muted, rgba(255,255,255,0.7)) !important;
margin: 0 !important;
line-height: 1.3 !important;
white-space: normal !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
line-clamp: 2 !important;
}
.past-show-time {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: #220660 !important;
color: white !important;
padding: 8px 10px !important;
border-radius: 8px !important;
text-align: center !important;
min-width: 65px !important;
font-size: 12px !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(34, 6, 96, 0.3) !important;
border: none !important;
margin: 0 !important;
width: auto !important;
flex-shrink: 0 !important;
min-height: 50px !important;
}
.past-show-time-slot {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1px !important;
text-align: center !important;
line-height: 1.1 !important;
}
.past-show-date {
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.1 !important;
margin-bottom: 1px !important;
}
.past-show-content {
margin-right: 100px !important;
padding-right: 10px !important;
}
/* Hero latest panel - full width layout */
.hero-latest {
display: flex;
flex-direction: column;
gap: 8px;
min-height: auto;
margin: 24px 0 4px 0;
}
/* Player widget - full width */
.player-widget {
width: 100%;
min-height: 120px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
}
/* Mobile player content row */
.player-widget .player-content-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 16px !important;
flex: 1 !important;
width: 100% !important;
}
/* Mobile player left and right - 50/50 split with max size limit */
.player-widget .player-left {
flex: 0 0 50% !important;
width: 50% !important;
max-width: min(50%, 180px) !important; /* Limit maximum size to 180px or 50%, whichever is smaller */
aspect-ratio: 1 !important;
height: auto !important;
position: relative !important;
}
/* Ensure cover image maintains 1:1 aspect ratio and doesn't exceed max size */
.player-widget .hero-latest-cover {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 !important;
object-fit: cover !important;
}
.player-widget .player-right {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* Mobile progress bar - full width below cover */
.player-widget .progress-container {
width: 100%;
margin: 0;
padding: 0 4px;
}
/* Hide progress bar in player-right on mobile since it's now full-width below */
.player-widget .player-right .progress-container {
display: none;
}
/* Hide send a request button on mobile */
.player-widget .request-btn {
display: none;
}
/* Make volume slider shorter on mobile */
.player-widget .volume-slider {
width: 60px;
}
/* Ensure play overlay is visible on mobile */
.player-widget .play-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
transition: opacity 0.2s !important;
pointer-events: none !important;
z-index: 10 !important;
visibility: visible !important;
}
/* Ensure play button is visible and clickable on mobile */
.player-widget .play-pause-btn {
background: transparent !important;
border: none !important;
width: 70% !important;
height: 70% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
pointer-events: auto !important;
z-index: 15 !important;
position: relative !important;
line-height: 1 !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
font-size: 48px !important;
color: white !important;
font-weight: bold !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure play/pause icons are visible on mobile */
.player-widget .play-pause-btn i {
font-size: 96px !important; /* 100% larger than 48px */
color: inherit !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Live status styling */
.live-status {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.live-dot {
width: 8px;
height: 8px;
background: #f91e5a;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.live-text {
font-size: 12px;
font-weight: 600;
color: #f91e5a;
text-transform: uppercase;
letter-spacing: 0.5px;
}
}
/* Animation fixes for mobile visibility */
.fade-in-left {
opacity: 1;
transform: translateX(0);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in-right {
opacity: 1;
transform: translateX(0);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.elastic-in {
opacity: 1;
transform: scale(1) translateY(0);
transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slide-rotate-in {
opacity: 1;
transform: translateX(0) rotate(0deg);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.glow-in {
opacity: 1;
transform: translateY(0);
box-shadow: 0 10px 30px rgba(74, 44, 138, 0.3);
transition: all 0.8s ease-out;
}
.wave-in {
opacity: 1;
transform: translateY(0) scale(1);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Force initial mobile state - Show content by default */
@media (max-width: 768px) {
.main-content-grid > *:not(.hero):not(.hero-latest) {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.main-content-grid > *:not(.hero) {
opacity: 1;
transform: translateY(0);
transition: all 0.6s ease-out;
pointer-events: auto;
}
/* Mobile: Remove primary button animations on home page */
@media (max-width: 768px) {
.btn.primary {
animation: none !important;
}
.btn.primary:hover {
transform: none !important;
box-shadow: 0 4px 15px rgba(249,30,90,0.3) !important;
}
.cta-buttons .btn-primary:hover {
transform: none !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
}
.success-actions .btn.primary:hover {
transform: none !important;
box-shadow: 0 8px 25px rgba(249, 30, 90, 0.3), 0 0 0 1px rgba(249, 30, 90, 0.2) !important;
}
.join-btn.primary:hover {
transform: none !important;
box-shadow: 0 6px 20px rgba(249, 30, 90, 0.3) !important;
}
.primary-btn:hover {
transform: none !important;
box-shadow: 0 6px 20px rgba(249, 30, 90, 0.3) !important;
}
}
/* Contact Form Styling - Similar to Request Page */
.contact-form {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow);
}
.contact-form .form-header {
text-align: center;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 2px solid var(--border);
}
.contact-form .form-header h2 {
color: var(--text);
font-size: 24px;
font-weight: 700;
margin: 0 0 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.contact-form .form-header h2 i {
color: var(--brand);
font-size: 20px;
}
.contact-form .form-header p {
color: var(--muted);
font-size: 16px;
margin: 0;
}
.contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.contact-form .form-group {
margin-bottom: 24px;
}
.contact-form .form-group label {
display: block;
color: var(--text);
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.contact-form .form-group label i {
color: var(--brand);
font-size: 12px;
width: 16px;
}
.contact-form .form-group input,
.contact-form .form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: 8px;
background: var(--bg);
color: var(--text);
font-size: 16px;
font-family: inherit;
transition: all 0.3s ease;
box-sizing: border-box;
}
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(249, 30, 90, 0.1);
}
.contact-form .form-group textarea {
resize: vertical;
min-height: 120px;
}
.contact-form .form-actions {
display: flex;
justify-content: center;
margin-top: 0px;
padding-top: 0px;
}
.contact-form .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
justify-content: center;
}
.contact-form .btn.primary {
background: linear-gradient(135deg, #f91e5a, #ff4d6d);
color: white;
border: 0;
padding: 18px 32px;
font-size: 18px;
font-weight: 700;
min-height: 56px;
box-shadow: 0 4px 15px rgba(249, 30, 90, 0.3);
animation: pulse 2s infinite;
opacity: 1;
}
.contact-form-section .contact-form .btn.primary i,
.contact-form-section .contact-form .btn.primary .fas,
.contact-form-section .form-actions .btn.primary i,
.contact-form-section .form-actions .btn.primary .fas,
.contact-form .btn.primary i,
.contact-form .btn.primary .fas {
color: #fff !important;
opacity: 1 !important;
}
.contact-form-section .contact-form .btn.primary:hover i,
.contact-form-section .contact-form .btn.primary:hover .fas,
.contact-form-section .form-actions .btn.primary:hover i,
.contact-form-section .form-actions .btn.primary:hover .fas,
.contact-form .btn.primary:hover i,
.contact-form .btn.primary:hover .fas {
color: #f91e5a !important;
}
.contact-form .btn.primary:hover {
background: transparent;
border: 2px solid #f91e5a;
color: #f91e5a;
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(249, 30, 90, 0.3), 0 0 0 1px rgba(249, 30, 90, 0.2);
border-radius: 12px;
padding: 18px 32px;
font-size: 18px;
font-weight: 700;
min-height: 56px;
opacity: 1;
}
.contact-form .btn.secondary {
background: transparent;
color: var(--text);
border: 2px solid var(--border);
}
.contact-form .btn.secondary:hover {
background: var(--bg-elev);
border-color: var(--brand);
color: var(--brand);
}
/* Mobile Responsive for Contact Form */
@media (max-width: 768px) {
.contact-form .form-row {
grid-template-columns: 1fr;
gap: 0;
}
.contact-form .btn {
width: 100%;
max-width: 300px;
}
}
/* Presenter on phones: auto-resize; background extends up a little (final override) */
@media (max-width: 768px) {
.hero-presenter-card {
margin: -18px 0 0 0 !important;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.hero-presenter-inner {
margin: 20px 0 0 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.hero-presenter-info {
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
flex: 1 1 0%;
box-sizing: border-box;
}
.hero-presenter-info .hero-presenter-status,
.hero-presenter-info .hero-presenter-name,
.hero-presenter-info .hero-presenter-subtitle,
.hero-presenter-info .hero-presenter-socials {
margin: 0 !important;
}
/* Align presenter-time + socials to bottom on phone */
.hero-presenter-info .hero-presenter-meta,
#presenter-time {
margin: 0 !important;
margin-top: auto !important;
}
}