/* Compatibility layer for old Smart TV browsers (Chrome < 80). Loaded only when PHP adds the legacy class to . */ html { min-width: 960px; } body.legacy, body.legacy.dark { min-width: 960px; margin: 0; color: #172033; background: #f4f7fb; font-family: Arial, Helvetica, sans-serif; } .legacy a { color: #0065a8; } .legacy .container { width: 94%; max-width: 1200px; margin-right: auto; margin-left: auto; } /* Always use the TV/desktop header. Samsung 2017 reports a narrow CSS viewport. */ .legacy .site-header__inner { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .legacy .site-logo { position: static; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } .legacy .site-nav--desktop { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-right: 8px; margin-left: auto; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } .legacy .site-nav__link { padding: 10px; color: #fff; } .legacy .menu-toggle, .legacy .mobile-menu, .legacy .site-backdrop { display: none !important; } .legacy .intro { background: #0b5c91; } .legacy .hero h1, .legacy .hero p { color: #fff; } /* Chrome 47 has no CSS Grid. */ .legacy .catalog-layout { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; } .legacy .catalog-content { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 60%; min-width: 0; } .legacy .catalog-sidebar { position: static; -webkit-box-flex: 0; -webkit-flex: 0 0 360px; flex: 0 0 360px; width: 360px; margin-left: 12px; } .legacy .content-box, .legacy .sidebar-card, .legacy .radio-child-categories, .legacy .station-single, .legacy #view .card, .legacy .location-card, .legacy .tv-guide__list, .legacy .tv-guide__item { color: #172033; background: #fff; border-color: #d7dfeb; } .legacy .section__title, .legacy .sidebar-card__title, .legacy .sidebar-nav__link, .legacy .sidebar-recommendation, .legacy #view .title, .legacy .meta-card__value { color: #172033; } .legacy .section__desc, .legacy .sidebar-card__text, .legacy #view .categories, .legacy .meta-card__label, .legacy .tv-guide__time { color: #65738a; } .legacy .sidebar-nav__link, .legacy .sidebar-recommendation { border-color: #d7dfeb; } .legacy .sidebar-recommendation { display: -webkit-box; display: -webkit-flex; display: flex; } .legacy .sidebar-recommendation__media { -webkit-box-flex: 0; -webkit-flex: 0 0 45px; flex: 0 0 45px; margin-right: 8px; } .legacy .sidebar-recommendation__content { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .legacy .locations-grid, .legacy .categories-grid, .legacy .radio-child-categories__grid, .legacy .radio-info-grid, .legacy #view { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: auto; margin-right: -6px; margin-left: -6px; } .legacy .locations-grid > *, .legacy .categories-grid > *, .legacy .radio-child-categories__grid > *, .legacy .radio-info-grid > * { -webkit-box-sizing: border-box; box-sizing: border-box; width: 31%; margin: 6px 1%; } .legacy #view.grid > .item { -webkit-box-sizing: border-box; box-sizing: border-box; width: 23%; margin: 6px 1%; } /* Webcams need wider cards because their thumbnails are 16:9. */ body.legacy.page-cam #view.grid > .item { width: 31%; margin: 6px 1%; } .legacy #view.list > .item { -webkit-box-sizing: border-box; box-sizing: border-box; width: 98%; margin: 6px 1%; } /* Old Chromium does not understand fit-content reliably. Webcam thumbnails are 256x144, so reserve an explicit 16:9 box in list view. */ body.legacy.page-cam #view.list .card-image { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 180px; flex: 0 0 180px; width: 180px !important; height: 101px !important; min-width: 180px; min-height: 101px; max-width: 180px; max-height: 101px; padding: 0 !important; overflow: hidden; } body.legacy.page-cam #view.list .card-image img { display: block; width: 180px !important; height: 101px !important; max-width: 180px; max-height: 101px; object-fit: cover; } body.legacy.page-cam #view.list .card-body { -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } body.legacy.page-cam #view.list .card-content { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; } /* Chrome 47 has no flex-gap: keep mainland globe / flags away from labels. */ .legacy .location-card__media { -webkit-box-flex: 0; -webkit-flex: 0 0 30px; flex: 0 0 30px; width: 30px; margin-right: 9px; } .legacy .location-card--mainland .location-card__media--mainland { -webkit-box-flex: 0; -webkit-flex: 0 0 24px; flex: 0 0 24px; width: 24px; height: 24px; margin-right: 9px; } .legacy .location-card__body { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; } .legacy .station-single__top { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .legacy .station-single__logo-wrap { -webkit-box-flex: 0; -webkit-flex: 0 0 160px; flex: 0 0 160px; margin-right: 24px; } .legacy .station-single__info { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; } .legacy .station-single__meta { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .legacy .station-single__meta > * { -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; padding-right: 8px; } .legacy .station-single__meta > .meta-card--full { width: 100%; } .legacy .site-footer__grid { display: -webkit-box; display: -webkit-flex; display: flex; } .legacy .site-footer__brand { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-right: 32px; } .legacy .site-footer__col { -webkit-box-flex: 0; -webkit-flex: 0 0 160px; flex: 0 0 160px; } .legacy .tv-guide__item { display: -webkit-box; display: -webkit-flex; display: flex; } .legacy .tv-guide__time { -webkit-box-flex: 0; -webkit-flex: 0 0 125px; flex: 0 0 125px; } .legacy .tv-guide__content { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .legacy .tv-guide__item.is-current { color: #172033; background: #eaf5fc; box-shadow: inset 4px 0 0 #0065a8; } /* Stable 16:9 box without aspect-ratio. */ .legacy .player__media { position: relative; width: 100%; height: 0; min-height: 0; padding-bottom: 56.25%; overflow: hidden; background: #000; } .legacy .player__stage, .legacy .player__poster, .legacy .player__video, .legacy .player__iframe, .legacy .player__blocked { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .legacy .player__stage:empty { min-height: 0; } .legacy .player__loader { top: 0; right: 0; bottom: 0; left: 0; } .legacy .player__controls { right: 0; bottom: 0; left: 0; } .legacy .player__controls-bottom, .legacy .player__controls-left, .legacy .player__controls-right { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .legacy .player__controls-bottom { width: 100%; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .legacy .player__controls-bottom > * + * { margin-left: 12px; } .legacy .player__controls-left > * + *, .legacy .player__controls-right > * + * { margin-left: 10px; } .legacy .player__btn:focus, .legacy .player__volume:focus { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; } .legacy .player__play { width: 84px; height: 84px; border-radius: 50%; background: #0065a8; } .legacy .player__play:before { display: none; } .legacy .player__play-icon { display: block; width: 42px; height: 42px; } .legacy .player__play-icon svg { display: block; width: 42px; height: 42px; fill: #fff; } .legacy .player__play:focus { outline: 4px solid #ffd21c; outline-offset: 5px; } .legacy .player__video--legacy { object-fit: contain; } /* SamsungBrowser 2.0 can draw native controls even when video.controls=false. */ .legacy .player__video--legacy::-webkit-media-controls { display: none !important; visibility: hidden !important; opacity: 0 !important; } .legacy .player__video--legacy::-webkit-media-controls-enclosure { display: none !important; } .legacy .player__video--legacy::-webkit-media-controls-panel { display: none !important; } .legacy .player__video--legacy::-webkit-media-controls-overlay-play-button { display: none !important; } .legacy .player__video--legacy::-webkit-media-controls-start-playback-button { display: none !important; } /* Restore the original VitsTV control colors after generic legacy form rules. */ .legacy .player input { color: #fff; border: 0; } .legacy .player__progress, .legacy .player__volume { background: rgba(255, 255, 255, 0.28); } .legacy .player__error--legacy { position: absolute; top: 50%; right: 20px; left: 20px; z-index: 8; padding: 18px; color: #fff; background: #a51f1f; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .legacy input, .legacy textarea, .legacy select { color: #172033; background: #fff; border-color: #aeb9c8; } .legacy .cookie-notice { color: #172033; background: #fff; border: 1px solid #aeb9c8; } /* ========================= HOME PAGE ========================= */ body.legacy.home-page, body.legacy.home-page.dark { color: #172033; background: #f3f7fd; } .legacy .shape path { fill: #f3f7fd; } .legacy .home-hero__grid { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .legacy .home-hero__content { -webkit-box-flex: 1; -webkit-flex: 1 1 55%; flex: 1 1 55%; min-width: 0; margin-right: 28px; } .legacy .home-hero__title { font-size: 46px; } .legacy .home-hero__actions > * { margin-right: 12px; margin-bottom: 12px; } .legacy .featured-card { -webkit-box-flex: 0; -webkit-flex: 0 0 42%; flex: 0 0 42%; } .legacy .featured-card__media { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .legacy .featured-card__poster, .legacy .featured-card__logo-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .legacy .featured-card__logo { width: 50%; max-width: 240px; height: auto; } .legacy .section-grid, .legacy .cards-grid { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: auto; margin-right: -1%; margin-left: -1%; } .legacy .section-grid > .section-tile { -webkit-box-sizing: border-box; box-sizing: border-box; width: 31.333%; margin: 9px 1%; } .legacy .cards-grid > .media-card { -webkit-box-sizing: border-box; box-sizing: border-box; width: 23%; margin: 9px 1%; } .legacy .cards-grid--tv > .media-card, .legacy .cards-grid--radio > .media-card, .legacy .cards-grid--mixed > .media-card { width: 18%; } .legacy .cards-grid--cam > .media-card { width: 31.333%; } .legacy .section-tile, .legacy .media-card, .legacy .home-text__box, .legacy .country-chip, .legacy .empty-state { color: #172033; background: #fff; border-color: rgba(15, 23, 42, .08); } .legacy .section-tile__title, .legacy .block-head__eyebrow, .legacy .block-head__title, .legacy .block-head__link, .legacy .media-card__title, .legacy .country-chip, .legacy .home-text__box h2 { color: #172033; } .legacy .section-tile__text, .legacy .media-card__meta, .legacy .country-chip small, .legacy .empty-state, .legacy .home-text__box p { color: #64748b; } .legacy .block-head { -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .legacy .block-head__title { font-size: 34px; } .legacy .media-card__media { position: relative; width: 100%; height: 0; padding: 0 0 100%; overflow: hidden; background: #eef4fb; } .legacy .media-card__media--landscape, .legacy .cards-grid--cam .media-card__media { padding-bottom: 56.25%; } .legacy .media-card__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .legacy .media-card__media--logo .media-card__image { top: 24px; right: 24px; bottom: 24px; left: 24px; width: calc(100% - 48px); height: calc(100% - 48px); } .legacy .country-chips { margin-right: -6px; margin-left: -6px; } .legacy .country-chip { margin: 6px; } /* ========================= RADIO PLAYER ========================= */ .legacy .radio-player-shell { position: relative; width: 100%; height: 0; min-height: 0; padding-bottom: 56.25%; overflow: hidden; background: #e8eef7; } .legacy .radio-player-shell__bg, .legacy .radio-player-shell__poster, .legacy .radio-player-shell__waves { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .legacy .radio-player-shell__waves, .legacy .radio-player-shell.waves-static .radio-player-shell__waves { background: #e8eef7; background-image: linear-gradient(160deg, rgba(188, 204, 255, 0.22) 0%, transparent 45%), repeating-linear-gradient( -15deg, rgba(73, 105, 190, 0.10), rgba(73, 105, 190, 0.10) 1px, transparent 1px, transparent 14px ); } .legacy .radio-player-shell__waves-canvas { display: block; width: 100%; height: 100%; } .legacy .radio-player { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; height: 100%; min-height: 0; padding: 20px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .legacy .radio-player__inner { -webkit-box-sizing: border-box; box-sizing: border-box; width: 210px; max-width: 210px; color: #fff; background: rgba(0, 0, 0, 0.68); border-color: #d6deea; } .legacy .radio-player__logo-row, .legacy .radio-player__bitrate-row, .legacy .radio-player__playlist, .legacy .radio-player__controls, .legacy .radio-player__loading { display: -webkit-box; display: -webkit-flex; display: flex; } .legacy .radio-player__logo-row, .legacy .radio-player__bitrate-row, .legacy .radio-player__playlist, .legacy .radio-player__loading { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .legacy .radio-player__logo-row, .legacy .radio-player__bitrate-row, .legacy .radio-player__loading { -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .legacy .radio-player__bitrate-row, .legacy .radio-player__playlist { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .legacy .radio-player__bitrate-label, .legacy .radio-player__playlist-item { margin-right: 4px; margin-left: 4px; color: #fff; } .legacy .radio-player__playlist-item.active { color: #ffa500; } .legacy .radio-player__controls { -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .legacy .radio-player__controls > * + * { margin-left: 10px; } .legacy .radio-player__visual, .legacy .radio-player__logo-box { -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.35); } .legacy .radio-player__visual { border-radius: 12px; } .legacy .radio-player__logo-box { border-radius: 5px; } .legacy .radio-player__bars, .legacy .radio-player__loading { top: 0; right: 0; bottom: 0; left: 0; } .legacy .radio-player__volume { display: block; width: 100%; height: 4px; padding: 0; color: #fff; background: linear-gradient( to right, #ff0000 0%, #ff0000 30%, #cccccc 30%, #cccccc 100% ); border: 0; } .legacy .radio-player-shell.is-fullscreen { width: 100%; height: 100%; min-height: 100%; padding-bottom: 0; background: #000; } .legacy .radio-player-shell:-webkit-full-screen { width: 100%; height: 100%; min-height: 100%; padding-bottom: 0; background: #000; } .legacy .radio-player-shell:fullscreen { width: 100%; height: 100%; min-height: 100%; padding-bottom: 0; background: #000; } .legacy .radio-player-shell.is-fullscreen .radio-player__inner { width: 230px; max-width: 230px; } .legacy .radio-player-shell:-webkit-full-screen .radio-player__inner { width: 230px; max-width: 230px; } .legacy .radio-player-shell:fullscreen .radio-player__inner { width: 230px; max-width: 230px; } /* ========================= LEGACY HEADER / TOPBAR / SEARCH Samsung Smart TV: old Chromium has no flex-gap and does not understand width: revert. Keep the desktop header on one row and reserve explicit widths for the language selector and theme button. ========================= */ .legacy .site-header__inner { min-height: 60px; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .legacy .site-nav, .legacy .site-nav--desktop { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; white-space: nowrap; } .legacy .site-nav .ui-select { width: 118px !important; min-width: 118px; max-width: 118px; margin-left: 4px; -webkit-box-flex: 0; -webkit-flex: 0 0 118px; flex: 0 0 118px; } .legacy .site-nav .ui-select__head { width: 118px; min-width: 118px; max-width: 118px; min-height: 40px; height: 40px; padding: 0 7px; color: #fff; background: transparent; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 500; text-align: left; } .legacy .site-nav .ui-select__head-text { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 100%; padding-right: 0; white-space: nowrap; } .legacy .site-nav .ui-select__head-text::after { position: static; display: inline-block; margin-left: 8px; margin-right: 1px; -webkit-box-flex: 0; -webkit-flex: 0 0 9px; flex: 0 0 9px; vertical-align: 2px; } .legacy .section__more::after { position: static; display: inline-block; margin-left: 7px; vertical-align: 2px; } .legacy .site-nav .ui-select__icon { margin-right: 6px; } .legacy .site-nav .ui-select__dropdown { width: 150px; } .legacy .site-nav .ui-select__list { width: 150px; color: #172033; background: #fff; border-color: #d7dfeb; } .legacy .site-nav .ui-select__item { color: #172033; background: #fff; } .legacy .site-nav .ui-select__item:hover, .legacy .site-nav .ui-select__item.is-selected { background: #eef4fb; } /* Real desktop theme button for old TV. */ .legacy .theme-toggle { position: relative !important; top: auto; right: auto; bottom: auto; left: auto; display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; width: 38px; height: 38px; margin-left: 8px; padding: 0; border: 0; color: #fff; background: rgba(255, 255, 255, 0.12); -webkit-box-flex: 0; -webkit-flex: 0 0 38px; flex: 0 0 38px; -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; cursor: pointer; } .legacy .theme-toggle:focus { outline: 2px solid #fff; outline-offset: 2px; } .legacy .theme-toggle__icon { position: absolute; top: 8px; left: 8px; display: block; width: 22px; height: 22px; margin: 0; } .legacy .theme-toggle__icon svg { display: block; width: 22px; height: 22px; margin: 0; } /* Old Chromium ignores flex-gap. Give breadcrumbs real spacing. */ .legacy .site-topbar__inner { display: -webkit-box; display: -webkit-flex; display: flex; min-height: 54px; padding-top: 9px; padding-bottom: 9px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .legacy .site-topbar__breadcrumbs { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; padding-top: 4px; padding-bottom: 4px; margin-right: 20px; line-height: 1.5; } .legacy .breadcrumbs__list { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .legacy .breadcrumbs__item { display: -webkit-box; display: -webkit-flex; display: flex; margin-right: 6px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .legacy .breadcrumbs__item:not(:last-child)::after { margin-left: 6px; } .legacy .search-container, .legacy .search-vtv { width: 360px; max-width: 360px; -webkit-box-flex: 0; -webkit-flex: 0 0 360px; flex: 0 0 360px; } .legacy .search-form-input { width: 100%; color: #172033; background: #fff; border: 1px solid #aeb9c8; } /* Explicit colours because CSS custom properties are unreliable on this TV. */ .legacy .ajax-search { width: 100%; color: #172033; background: #fff; border: 1px solid #d7dfeb; box-shadow: 0 10px 28px rgba(23, 32, 51, 0.18); } .legacy .ajax-search__title { color: #65738a; background: #eef4fb; } .legacy .ajax-search__item + .ajax-search__item { border-top-color: #d7dfeb; } .legacy .ajax-search__link, .legacy .ajax-search__name { color: #172033; } .legacy .ajax-search__link:hover, .legacy .ajax-search__image { background: #eef4fb; } .legacy .ajax-search__meta, .legacy .ajax-search__empty { color: #65738a; } .legacy .search-types__dropdown { color: #172033; background: #fff; border: 1px solid #d7dfeb; box-shadow: 0 8px 22px rgba(23, 32, 51, 0.18); } .legacy .search-types__item { color: #172033; } /* ========================= LEGACY DARK MODE The old browser cannot rely on CSS custom properties, so use explicit fallback colours for the components overridden by legacy.css. ========================= */ body.legacy.dark { color: #f9fafb; background: #0b1220; } body.legacy.dark .intro { background: #111827; } body.legacy.dark .content-box, body.legacy.dark .sidebar-card, body.legacy.dark .radio-child-categories, body.legacy.dark .station-single, body.legacy.dark #view .card, body.legacy.dark .location-card, body.legacy.dark .tv-guide__list, body.legacy.dark .tv-guide__item { color: #f9fafb; background: #111827; border-color: #374151; } body.legacy.dark .section__title, body.legacy.dark .sidebar-card__title, body.legacy.dark .sidebar-nav__link, body.legacy.dark .sidebar-recommendation, body.legacy.dark #view .title, body.legacy.dark .meta-card__value, body.legacy.dark .radio-info-card .info-card__label, body.legacy.dark .radio-now-playing__track, body.legacy.dark .radio-history__track { color: #f9fafb; } body.legacy.dark .section__desc, body.legacy.dark .sidebar-card__text, body.legacy.dark #view .categories, body.legacy.dark .meta-card__label, body.legacy.dark .tv-guide__time, body.legacy.dark .radio-now-playing__label, body.legacy.dark .radio-history__time { color: #cbd5e1; } body.legacy.dark .sidebar-nav__link, body.legacy.dark .sidebar-recommendation, body.legacy.dark .radio-history__list, body.legacy.dark .radio-history__item { border-color: #374151; } body.legacy.dark input, body.legacy.dark textarea, body.legacy.dark select { color: #f9fafb; background: #0a111e; border-color: #374151; } body.legacy.dark .search-form-input { color: #f9fafb; background: #0a111e; border-color: #475569; } body.legacy.dark .ajax-search, body.legacy.dark .search-types__dropdown { color: #f9fafb; background: #111827; border-color: #374151; } body.legacy.dark .ajax-search__title, body.legacy.dark .ajax-search__link:hover, body.legacy.dark .ajax-search__image, body.legacy.dark .site-nav .ui-select__item:hover, body.legacy.dark .site-nav .ui-select__item.is-selected { background: #1f2937; } body.legacy.dark .ajax-search__link, body.legacy.dark .ajax-search__name, body.legacy.dark .search-types__item, body.legacy.dark .site-nav .ui-select__item { color: #f9fafb; } body.legacy.dark .ajax-search__meta, body.legacy.dark .ajax-search__empty, body.legacy.dark .ajax-search__title { color: #cbd5e1; } body.legacy.dark .ajax-search__item + .ajax-search__item, body.legacy.dark .site-nav .ui-select__list { border-color: #374151; } body.legacy.dark .site-nav .ui-select__list, body.legacy.dark .site-nav .ui-select__item { color: #f9fafb; background: #111827; } body.legacy.dark .radio-player-shell, body.legacy.dark .radio-player-shell__waves, body.legacy.dark .radio-player-shell.waves-static .radio-player-shell__waves { background-color: #0f172a; } body.legacy.dark .cookie-notice { color: #f9fafb; background: #111827; border-color: #374151; } /* ========================================================= LEGACY HOME PAGE — CURRENT 2026 MARKUP Current homepage uses .grid/.grid--6/.grid--3 + .card--media. Old Samsung Chromium does not reliably support CSS Grid, gap or aspect-ratio. ========================================================= */ .legacy .home-hero__actions .btn, .legacy .home-hero__actions .btn:link, .legacy .home-hero__actions .btn:visited, .legacy .home-hero__actions .btn:hover, .legacy .home-hero__actions .btn:focus, .legacy .home-hero__actions .btn:active { color: #fff !important; text-decoration: none; } .legacy .home-hero__actions .btn--ghost { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); } .legacy .home-hero__actions .btn--ghost:hover, .legacy .home-hero__actions .btn--ghost:focus { color: #fff !important; background: rgba(255, 255, 255, .17); } .legacy .home-block .grid { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: auto; margin-right: -.5%; margin-left: -.5%; } .legacy .home-block .grid--6 > .card--media { -webkit-box-sizing: border-box; box-sizing: border-box; width: 15.666%; margin: 7px .5%; -webkit-box-flex: 0; -webkit-flex: 0 0 15.666%; flex: 0 0 15.666%; } .legacy .home-block .grid--3 > .card--media { -webkit-box-sizing: border-box; box-sizing: border-box; width: 32.333%; margin: 7px .5%; -webkit-box-flex: 0; -webkit-flex: 0 0 32.333%; flex: 0 0 32.333%; } .legacy .home-block .card--media { height: auto; overflow: hidden; color: #172033; background: #fff; border: 1px solid #d7dfeb; border-radius: 18px; } .legacy .home-block .card__image-wrap { position: relative; display: block; width: 100%; height: 0 !important; min-height: 0; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; } .legacy .home-block .card__image-wrap--square { padding: 0 0 100% !important; } .legacy .home-block .card__image-wrap--landscape { padding: 0 0 56.25% !important; } .legacy .home-block .card__image-wrap > .card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; background: #eef4fb; } .legacy .home-block .card__image-wrap--square > .card-image { padding: 18px; } .legacy .home-block .card__image-wrap--landscape > .card-image { padding: 0; } .legacy .home-block .card__image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; } .legacy .home-block .card__image-wrap--landscape .card__image { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } .legacy .home-block .card__body { padding: 12px 10px 14px; } .legacy .home-block .card__title { color: #172033; font-size: 15px; line-height: 1.3; } .legacy .home-block .card__meta { color: #65738a; } /* ========================================================= LEGACY HEADER — LANGUAGE CHEVRON ========================================================= */ .legacy .site-nav .ui-select { width: 128px !important; min-width: 128px; max-width: 128px; -webkit-flex-basis: 128px; flex-basis: 128px; } .legacy .site-nav .ui-select__head { width: 128px; min-width: 128px; max-width: 128px; } .legacy .site-nav .ui-select__head-text { position: relative; width: 100%; padding-right: 21px; -webkit-box-sizing: border-box; box-sizing: border-box; } .legacy .site-nav .ui-select__head-text::after { position: absolute; top: 50%; right: 2px; margin: -6px 0 0 0; display: block; width: 9px; height: 9px; } .legacy .site-nav .ui-select__icon { margin-right: 8px; } /* ========================================================= LEGACY AJAX SEARCH — replace unsupported flex gap with margins ========================================================= */ .legacy .ajax-search__link { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 5px 5px; } .legacy .ajax-search__image { -webkit-box-flex: 0; -webkit-flex: 0 0 46px; flex: 0 0 46px; width: 46px; height: 46px; margin-right: 12px; } .legacy .ajax-search__info { display: block; min-width: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .legacy .ajax-search__meta { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-top: 3px; } .legacy .ajax-search__meta img { display: inline-block; width: 16px; height: 12px; margin-right: 6px; -webkit-box-flex: 0; -webkit-flex: 0 0 16px; flex: 0 0 16px; } .legacy .search-types__item input { margin-right: 8px; }