/* ------------------------------------------------ C9 Radio — Light theme (white & blue) Loaded after main.css. The dark purple template styles stay the default ("dark mode"); everything here only applies when . Theme is resolved by the inline script in the layout head: cookie ("theme") first, otherwise the prefers-color-scheme media query. ------------------------------------------------ Palette — strict TWO-TONE from Flat UI "GB": Vanadyl Blue #0097e6 — all text, titles, icons, links, accents Lynx White #f5f6fa — background (plus plain white surfaces) Everything else (muted text, borders, shadows) is Vanadyl Blue at reduced opacity. No other hues. ------------------------------------------------ */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ---------- Global tweaks (BOTH themes) ---------- This file always loads, so unscoped rules apply in dark mode too. */ /* About page: no divider borders around the stat/fact boxes */ .three-sells-block { border-bottom: 0 !important; border-right: 0 !important; } .inner__container.features { border-bottom: 0 !important; } /* ...including the line just above the boxes (previous section's border) */ .inner__container:has(+ .inner__container.features) { border-bottom: 0 !important; } /* Now-playing marquee: seamless two-half track (see TopNowPlayingText.jsx). The track slides by exactly one half (-50%), and the halves are identical, so the loop restart is invisible at any content width. Duration is set inline by the component for a constant pixel speed. */ .flexMarquee { overflow: hidden; } .c9-marquee-track { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-animation: c9scroll 20s linear infinite; -moz-animation: c9scroll 20s linear infinite; animation: c9scroll 20s linear infinite; will-change: transform; } .c9-marquee-half { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; } @-webkit-keyframes c9scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes c9scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } /* ---------- Base surfaces ---------- */ html[data-theme="light"] body, html[data-theme="light"] .main, html[data-theme="light"] .inner__content, html[data-theme="light"] .inner__media, html[data-theme="light"] .popup__content, html[data-theme="light"] .menu, html[data-theme="light"] .menu__content { background-color: #f5f6fa !important; } /* ---------- Header: inverted — Vanadyl bar, white contents ---------- */ html[data-theme="light"] .header { background-color: #0097e6 !important; } html[data-theme="light"] .header a:link, html[data-theme="light"] .header a:visited, html[data-theme="light"] .header a:active { color: #ffffff !important; } html[data-theme="light"] .header a:hover { color: rgba(255, 255, 255, 0.8) !important; } /* ---------- Background blob layers (light SVG variants) ---------- */ html[data-theme="light"] .svg-layer-1 { background-image: url("../img/svg/main-landscape-light-5.svg") !important; } html[data-theme="light"] .svg-layer-2 { background-image: url("../img/svg/main-landscape-top-light-5.svg") !important; } html[data-theme="light"] .svg-layer-menu { background-image: url("../img/svg/menu-landscape-light-5.svg") !important; } @media (orientation: portrait) { html[data-theme="light"] .svg-layer-1, html[data-theme="light"] .svg-layer-2 { background-image: url("../img/svg/main-portrait-light-5.svg") !important; } } /* ---------- Typography ---------- */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6, html[data-theme="light"] .headline__title, html[data-theme="light"] .features__title { color: #0097e6; } html[data-theme="light"] p { color: #0097e6; } html[data-theme="light"] p span { color: #0097e6; } html[data-theme="light"] .listen-streams { color: #0097e6; } /* Links: the template forces white; force navy/blue back */ html[data-theme="light"] a:link, html[data-theme="light"] a:visited, html[data-theme="light"] a:active { color: #0097e6 !important; } html[data-theme="light"] a:hover { color: #0097e6 !important; } html[data-theme="light"] p a, html[data-theme="light"] .content-block a { color: #0097e6 !important; } ::selection { /* keep template default in dark */ } html[data-theme="light"] ::selection { background-color: #0097e6; color: #ffffff; } /* ---------- Header / menu ---------- */ /* Structural lines in the header: white tint on the Vanadyl bar */ html[data-theme="light"] .header { border-bottom: 0 !important; } html[data-theme="light"] .controls__block { border-left: 1px solid rgba(255, 255, 255, 0.35) !important; } html[data-theme="light"] .header.header-transparent, html[data-theme="light"] .header.header-transparent .controls__block { border-color: rgba(255, 255, 255, 0.35) !important; } /* White logo on the Vanadyl header bar (same filter as dark theme) */ html[data-theme="light"] .header__logo img { filter: brightness(0) invert(1) !important; -webkit-filter: brightness(0) invert(1) !important; } /* Hamburger / close icon: white on the Vanadyl bar */ html[data-theme="light"] .menu-trigger .menu-objects::before, html[data-theme="light"] .menu-trigger .menu-objects::after, html[data-theme="light"] .menu-trigger .menu-close::before, html[data-theme="light"] .menu-trigger .menu-close::after { background-color: #ffffff !important; } html[data-theme="light"] .navigation__link { color: #0097e6 !important; } html[data-theme="light"] .navigation li a.active-link { color: rgba(0, 151, 230, 0.5) !important; } /* Nav hover marquee strip: inverted (Vanadyl bg, white text), no borders */ html[data-theme="light"] .navigation li .marquee-link { background-color: #0097e6 !important; border-top: 0 !important; border-bottom: 0 !important; } html[data-theme="light"] .navigation li .marquee-link .marquee-link-content span { color: #ffffff !important; } html[data-theme="light"] .navigation li .marquee-link .marquee-link-content span::after { color: rgba(255, 255, 255, 0.7) !important; } /* Same as the header bg so the container is invisible, like dark-on-dark in dark mode */ html[data-theme="light"] .header__socials { background-color: #0097e6 !important; } html[data-theme="light"] p.additional-text a { color: #0097e6 !important; } html[data-theme="light"] .no-touch p.additional-text:hover a { color: #0097e6 !important; } html[data-theme="light"] p.copyright a { color: #0097e6 !important; } html[data-theme="light"] p.additional-text.locale-switch label, html[data-theme="light"] p.additional-text.locale-switch select, html[data-theme="light"] p.additional-text.locale-switch .locale-caret { color: #0097e6 !important; } /* ---------- Bottom marquee (now playing): inverted like the header ---------- */ html[data-theme="light"] .marquee { background-color: #0097e6 !important; border-top: 0 !important; } html[data-theme="light"] .marquee span { color: #ffffff; } html[data-theme="light"] .marquee span::after { color: rgba(255, 255, 255, 0.7); } html[data-theme="light"] .marquee.opposite { background-color: #0097e6 !important; border-top: 0 !important; } html[data-theme="light"] .marquee.opposite span { color: rgba(255, 255, 255, 0.75); } html[data-theme="light"] .marquee.opposite span::after { color: rgba(255, 255, 255, 0.7); } /* Square separator in the now-playing marquee (React component) */ html[data-theme="light"] .tmr { color: #ffffff !important; } /* ---------- Buttons ---------- */ /* Mobile (<768px): headline buttons render as pills — make them solid Vanadyl / white text */ @media only screen and (max-width: 767px) { html[data-theme="light"] .btn-s.btn-mute, html[data-theme="light"] .btn-s.btn-light { background-color: #0097e6 !important; border: 1px solid #0097e6 !important; color: #ffffff !important; } } html[data-theme="light"] .btn-light { background-color: #ffffff !important; border: 1px solid rgba(0, 151, 230, 0.25) !important; } html[data-theme="light"] .btn-dark, html[data-theme="light"] .btn-s.btn-light:hover, html[data-theme="light"] .btn-s.btn-light:focus { background-color: #0097e6 !important; } html[data-theme="light"] .btn-mute { border-color: rgba(0, 151, 230, 0.25) !important; } /* ---------- Header icon buttons: white on the Vanadyl bar ---------- */ html[data-theme="light"] .top-play-button, html[data-theme="light"] .top-listen-text, html[data-theme="light"] .socials-trigger, html[data-theme="light"] .socials__close span::before, html[data-theme="light"] .socials__close span::after { color: #ffffff !important; } html[data-theme="light"] .socials__close span::before, html[data-theme="light"] .socials__close span::after { background-color: #ffffff !important; } /* ---------- Custom cursor ---------- */ html[data-theme="light"] .cursor { background-color: #0097e6 !important; } html[data-theme="light"] .cursor-m-opposite, html[data-theme="light"] .cursor-l-arrow { background-color: #0097e6 !important; } /* ---------- Playlist cards ---------- */ /* Border removed 2026-08 (kept for easy restore): html[data-theme="light"] .card-def { border: 1px solid rgba(0, 151, 230, 0.25) !important; -webkit-box-shadow: 0 2px 12px rgba(0, 151, 230, 0.06); box-shadow: 0 2px 12px rgba(0, 151, 230, 0.06); } */