/* ========================================================================== Island Blend Radio - Theme: Warm Caribbean Defines CSS variables for both dark and light modes. Selected by [data-theme-mode] attribute on element. v0.4 ========================================================================== */ /* ======================================== DARK MODE - default Green Caribbean gradient, cream text, orange/gold accents ======================================== */ [data-theme-mode="dark"]{ /* Core surfaces */ --bg-deep:#0d1a0a; --bg-section:#0d1a0a; --bg-green:#0f2a10; --bg-green-mid:#1a3d18; --bg-card:#1a2e16; --bg-card-hover:#223a1e; --bg-footer:#060d05; /* Brand (stay constant across dark/light) */ --orange:#F47B20; --orange-deep:#C75D11; --gold:#FFC93C; --teal:#2FB8C6; /* Text */ --text-main:#FFFAF2; --text-muted:rgba(255,250,242,0.75); --text-faint:rgba(255,250,242,0.4); /* Lines */ --line:rgba(255,250,242,0.06); /* Nav */ --nav-bg:rgba(13,26,10,0.88); --nav-shadow:none; --nav-hover:var(--gold); /* Hero */ --hero-gradient:linear-gradient(135deg,#0a3d0e 0%,#0d1a0a 40%,#1a0d08 100%); --hero-bg-image:url('../img/hero.jpg'); --hero-bg-opacity:0.75; --hero-bg-filter:saturate(1.2); --hero-overlay: radial-gradient(ellipse at 70% 40%,rgba(244,123,32,0.2),transparent 55%), radial-gradient(ellipse at 30% 80%,rgba(60,176,67,0.12),transparent 50%), linear-gradient(180deg,rgba(13,26,10,0.15) 0%,rgba(13,26,10,0.65) 100%); --hero-onair-bg:rgba(255,201,60,0.12); --hero-onair-border:rgba(255,201,60,0.4); --hero-onair-text:var(--gold); --hero-eyebrow-color:var(--orange); --hero-title-color:var(--text-main); --hero-title-shadow:0 4px 40px rgba(0,0,0,0.3); --hero-tagline-color:var(--text-muted); --hero-sub-color:var(--gold); --hero-text-shadow:none; /* Buttons */ --btn-ghost-bg:transparent; --btn-ghost-color:var(--text-main); --btn-ghost-border:rgba(255,250,242,0.25); --btn-ghost-border-hover:var(--text-muted); --btn-ghost-bg-hover:rgba(255,250,242,0.05); /* Hero now-playing card */ --hero-now-bg:rgba(10,6,4,0.6); --hero-now-border:rgba(255,250,242,0.1); --hero-now-border-left:none; --hero-now-shadow:none; --play-circle-bg:var(--gold); --play-circle-shadow:0 8px 24px rgba(255,201,60,0.4); --play-circle-arrow:#1a0d08; --now-label-color:var(--text-faint); --now-title-color:var(--text-main); --now-host-color:var(--text-muted); --now-time-color:var(--gold); /* Section link */ --section-link-border:1px solid var(--text-faint); --section-link-hover:var(--gold); /* Show card */ --show-card-border-left:none; --show-card-shadow:none; --show-card-shadow-hover:none; /* Events */ --events-bg:linear-gradient(180deg,var(--bg-green) 0%,var(--bg-deep) 100%); --event-card-shadow:none; --event-card-shadow-hover:none; --event-overlay-bg:linear-gradient(180deg,transparent 0%,rgba(13,26,10,0.95) 100%); /* Listen / chat */ --listen-bg:var(--bg-deep); --listen-player-shadow:none; --player-status-color:var(--gold); --vol-bar-bg:rgba(255,250,242,0.1); --vol-fill-color:var(--gold); --chat-header-bg:rgba(255,250,242,0.03); --chat-avatar-bg:var(--bg-green-mid); --chat-avatar-color:var(--text-main); --chat-input-bg:rgba(255,250,242,0.05); --chat-input-bg-focus:rgba(255,250,242,0.08); /* Footer */ --footer-link-color:var(--text-muted); --footer-text-color:var(--text-faint); /* Stream bar */ --stream-bar-bg:rgba(6,13,5,0.96); --stream-bar-border:rgba(255,201,60,0.2); --stream-bar-shadow:none; --bar-play-bg:var(--gold); --bar-play-shadow:none; --bar-play-arrow:#1a0d08; --bar-title-color:var(--text-main); --bar-vol-color:var(--text-muted); } /* ======================================== LIGHT MODE Aqua/teal/cream Caribbean, ink text, orange accents ======================================== */ [data-theme-mode="light"]{ /* Core surfaces */ --bg-deep:#E8F7F5; --bg-section:#FFF8ED; /* cream */ --bg-green:#D4EEEA; --bg-green-mid:#B8DFD9; --bg-card:#FFFFFF; --bg-card-hover:#F5FAF9; --bg-footer:#1A7F89; /* teal-deep */ /* Brand (stay constant) */ --orange:#F47B20; --orange-deep:#C75D11; --gold:#FFC93C; --teal:#2FB8C6; /* Text */ --text-main:#0A2E2B; /* ink */ --text-muted:#5A7874; --text-faint:#8FA8A4; /* Lines */ --line:rgba(10,46,43,0.08); /* Nav */ --nav-bg:rgba(255,248,237,0.92); --nav-shadow:0 2px 20px rgba(10,46,43,0.04); --nav-hover:var(--orange); /* Hero */ --hero-gradient:linear-gradient(135deg,#6BCFC4 0%,#2FB8C6 40%,#1A7F89 100%); --hero-bg-image:url('../img/hero.jpg'); --hero-bg-opacity:0.75; --hero-bg-filter:saturate(1.2); --hero-overlay: radial-gradient(ellipse at 70% 40%,rgba(255,201,60,0.18),transparent 55%), radial-gradient(ellipse at 30% 80%,rgba(107,207,196,0.3),transparent 50%), linear-gradient(180deg,rgba(107,207,196,0.1) 0%,rgba(26,127,137,0.55) 100%); --hero-onair-bg:rgba(255,255,255,0.15); --hero-onair-border:rgba(255,248,237,0.6); --hero-onair-text:#FFF8ED; --hero-eyebrow-color:#FFF8ED; --hero-title-color:#FFF8ED; --hero-title-shadow:0 4px 40px rgba(10,46,43,0.35); --hero-tagline-color:#FFF8ED; --hero-sub-color:var(--gold); --hero-text-shadow:0 2px 8px rgba(10,46,43,0.3); /* Buttons */ --btn-ghost-bg:rgba(255,255,255,0.15); --btn-ghost-color:#FFF8ED; --btn-ghost-border:rgba(255,248,237,0.5); --btn-ghost-border-hover:#FFF8ED; --btn-ghost-bg-hover:rgba(255,255,255,0.25); /* Hero now-playing card */ --hero-now-bg:rgba(255,255,255,0.95); --hero-now-border:rgba(10,46,43,0.08); --hero-now-border-left:4px solid var(--orange); --hero-now-shadow:0 20px 60px rgba(10,46,43,0.15); --play-circle-bg:var(--orange); --play-circle-shadow:0 8px 24px rgba(244,123,32,0.4); --play-circle-arrow:#fff; --now-label-color:var(--text-faint); --now-title-color:var(--text-main); --now-host-color:var(--text-muted); --now-time-color:var(--orange); /* Section link */ --section-link-border:2px solid var(--orange); --section-link-hover:var(--orange); /* Show card */ --show-card-border-left:4px solid var(--teal); --show-card-shadow:0 2px 8px rgba(10,46,43,0.04); --show-card-shadow-hover:0 12px 32px rgba(10,46,43,0.1); /* Events */ --events-bg:linear-gradient(180deg,var(--bg-green) 0%,var(--bg-section) 100%); --event-card-shadow:0 8px 24px rgba(10,46,43,0.1); --event-card-shadow-hover:0 16px 40px rgba(10,46,43,0.18); --event-overlay-bg:linear-gradient(180deg,transparent 0%,rgba(10,46,43,0.95) 100%); /* Listen / chat */ --listen-bg:linear-gradient(180deg,var(--bg-section) 0%,var(--bg-green) 100%); --listen-player-shadow:0 12px 40px rgba(10,46,43,0.08); --player-status-color:var(--orange); --vol-bar-bg:rgba(10,46,43,0.1); --vol-fill-color:var(--orange); --chat-header-bg:var(--bg-green); --chat-avatar-bg:var(--teal); --chat-avatar-color:#fff; --chat-input-bg:#F5FAF9; --chat-input-bg-focus:#fff; /* Footer */ --footer-link-color:rgba(255,248,237,0.75); --footer-text-color:rgba(255,248,237,0.55); /* Stream bar */ --stream-bar-bg:var(--bg-footer); --stream-bar-border:rgba(244,123,32,0.3); --stream-bar-shadow:0 -8px 32px rgba(10,46,43,0.15); --bar-play-bg:var(--orange); --bar-play-shadow:0 4px 12px rgba(244,123,32,0.4); --bar-play-arrow:#fff; --bar-title-color:#FFF8ED; --bar-vol-color:rgba(255,248,237,0.7); }