.new-design-page { background: #f3f7fb; } .new-design-page .new-site-header { display: flex; width: min(1180px, calc(100% - 32px)); min-height: 76px; margin: 0 auto; padding: 0; align-items: center; gap: 18px; background: transparent; box-shadow: none; } .new-design-page .new-site-header .site-logo { margin: 0 auto 0 0; }.new-design-page .new-site-header .hamburger-menu { position: static; order: 3; flex: 0 0 44px; transform: none; } .new-design-page .site-logo, .new-design-page .site-logo:hover, .new-design-page .site-logo:focus-visible { color: #10243b; }.new-design-page .site-logo__mark { color: #2d73b9; }.new-design-page .site-logo__name, .new-design-page .site-logo__name strong { color: #10243b; } .new-site-menu { display: flex; align-items: center; gap: 20px; color: #4c6179; font-size: .88rem; font-weight: 650; }.new-site-menu a { color: inherit; text-decoration: none; }.new-site-menu a:hover, .new-site-menu a[aria-current="page"] { color: #113b65; }.new-site-menu__action { padding: 9px 13px; border: 1px solid #c8d9e9; border-radius: 9px; color: #113b65 !important; background: #fff; } .homepage-concept { width: min(1180px, calc(100% - 32px)); margin: 26px auto 40px; color: #10243b; } .homepage-concept *, .homepage-concept *::before, .homepage-concept *::after { box-sizing: border-box; } .homepage-concept a { color: inherit; text-decoration: none; } .homepage-concept__hero { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 58px); border-radius: 24px; color: #fff; background: radial-gradient(circle at 85% 15%, #438fd0 0, transparent 26%), radial-gradient(circle at 94% 94%, #215b95 0, transparent 31%), linear-gradient(128deg, #0d2c4b, #164b78); box-shadow: 0 18px 38px #10243b2b; } .homepage-concept__hero::after { position: absolute; top: -170px; right: 14%; width: 420px; height: 420px; border: 1px solid #ffffff24; border-radius: 50%; content: ''; } .homepage-concept__eyebrow { display: flex; position: relative; z-index: 1; align-items: center; gap: 7px; margin: 0 0 12px; color: #cfe9ff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .homepage-concept__eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #36c97d; box-shadow: 0 0 0 4px #36c97d27; } .homepage-concept__hero h1 { position: relative; z-index: 1; max-width: 650px; margin: 0; color: #fff; font-size: clamp(2rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -.055em; } .homepage-concept__hero > p:not(.homepage-concept__eyebrow) { position: relative; z-index: 1; max-width: 600px; margin: 18px 0 25px; color: #d9e9f7; font-size: clamp(.95rem, 1.5vw, 1.08rem); line-height: 1.55; } .homepage-concept__search { display: flex; position: relative; z-index: 1; max-width: 690px; gap: 7px; padding: 6px; border: 1px solid #ffffff33; border-radius: 15px; background: #fff; box-shadow: 0 12px 20px #071d3338; } .homepage-concept__search input { min-width: 0; flex: 1; padding: 12px 15px; border: 0; color: #10243b; outline: none; } .homepage-concept__search button { padding: 11px 17px; border: 0; border-radius: 10px; color: #fff; background: #ff785a; font-weight: 800; cursor: pointer; } .homepage-concept__hero-meta { display: flex; position: relative; z-index: 1; flex-wrap: wrap; gap: 19px; margin-top: 21px; color: #c8def1; font-size: .79rem; }.homepage-concept__hero-meta strong { color: #fff; } .homepage-concept__grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; margin-top: 26px; align-items: start; } .homepage-concept__stations, .homepage-concept__side-card { padding: 22px; border: 1px solid #dce5ee; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px #10243b0a; } .homepage-concept__stations > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }.homepage-concept h2 { margin: 0; color: #10243b; font-size: 1.24rem; letter-spacing: -.035em; }.homepage-concept__stations header p, .homepage-concept__side-card p { margin: 5px 0 0; color: #607187; font-size: .84rem; line-height: 1.4; } .homepage-concept__filter { padding: 8px 10px; border: 1px solid #dce5ee; border-radius: 8px; color: #113b65 !important; background: #f8fbfe; font-size: .77rem; font-weight: 750; white-space: nowrap; } .homepage-concept__station-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }.homepage-concept__station { padding: 13px; border: 1px solid #e3ebf3; border-radius: 13px; background: linear-gradient(145deg, #fff, #f8fbfe); transition: .18s ease; }.homepage-concept__station:hover { border-color: #a9c9e6; box-shadow: 0 9px 18px #183e6714; transform: translateY(-2px); } .homepage-concept__station-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 13px; }.homepage-concept__station-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }.homepage-concept__station-top em { color: #2a9963; font-size: .65rem; font-style: normal; white-space: nowrap; } .homepage-concept__track { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; }.homepage-concept__track img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 9px #10243b25; }.homepage-concept__track strong, .homepage-concept__track small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.homepage-concept__track strong { color: #10243b; font-size: .8rem; }.homepage-concept__track small { margin-top: 3px; color: #607187; font-size: .72rem; } .homepage-concept__more { display: inline-flex; gap: 6px; margin-top: 17px; color: #2d73b9 !important; font-size: .82rem; font-weight: 800; } .homepage-concept__discover { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }.homepage-concept__discover-card { min-height: 198px; padding: 18px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #276da9, #164675); }.homepage-concept__discover-card--new { background: linear-gradient(135deg, #7853aa, #3c2b75); }.homepage-concept__discover-card--tip { background: linear-gradient(135deg, #e57655, #b13e47); }.homepage-concept__discover-card p { margin: 0 0 8px; color: #ffffffb8; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.homepage-concept__discover-card h2 { margin-bottom: 12px; color: #fff; font-size: 1.2rem; }.homepage-concept__discover-card ol { margin: 0; padding: 0; list-style: none; font-size: .76rem; line-height: 1.65; }.homepage-concept__discover-card li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.homepage-concept__discover-card li span { font-weight: 800; }.homepage-concept__discover-card small { color: #ffffffc9; }.homepage-concept__discover-link { display: inline-block; margin-top: 11px; color: #fff !important; font-size: .75rem; font-weight: 800; } .homepage-concept__sidebar { display: grid; gap: 14px; }.homepage-concept__side-card { padding: 18px; }.homepage-concept__status { display: flex; align-items: center; gap: 10px; }.homepage-concept__status > span { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: #e8f9f0; }.homepage-concept__status > span::before { display: block; width: 10px; height: 10px; margin: 14px; border-radius: 50%; background: #36c97d; box-shadow: 0 0 0 6px #36c97d29; content: ''; }.homepage-concept__status strong { font-size: 1.05rem; }.homepage-concept__status small { display: block; margin-top: 2px; color: #607187; font-size: .72rem; } .homepage-concept__my-radio { color: #fff; background: linear-gradient(145deg, #154b7a, #0e2d4c); }.homepage-concept__my-radio h2 { color: #fff; }.homepage-concept__my-radio p { color: #c8e2f6; }.homepage-concept__my-radio a { display: block; margin-top: 15px; padding: 10px; border-radius: 9px; color: #123858 !important; background: #fff; font-size: .82rem; font-weight: 800; text-align: center; }.homepage-concept__stats dl { margin: 13px 0 0; }.homepage-concept__stats dl div { display: flex; justify-content: space-between; gap: 9px; padding: 10px 0; border-top: 1px solid #e7edf4; font-size: .78rem; }.homepage-concept__stats dt { color: #607187; }.homepage-concept__stats dd { margin: 0; font-weight: 800; } @media (max-width: 900px) { .homepage-concept__grid { grid-template-columns: 1fr; }.homepage-concept__sidebar { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .new-design-page .new-site-header { width: min(100% - 22px, 1180px); min-height: 62px; }.new-site-menu a:not(.new-site-menu__action) { display: none; }.new-site-menu { gap: 9px; }.new-site-menu__action { padding: 8px 10px; font-size: .78rem; } } @media (max-width: 680px) { .homepage-concept { width: min(100% - 22px, 1180px); margin-top: 16px; }.homepage-concept__hero { border-radius: 18px; }.homepage-concept__station-grid, .homepage-concept__discover { grid-template-columns: repeat(2, minmax(0, 1fr)); }.homepage-concept__sidebar { grid-template-columns: 1fr; } } @media (max-width: 410px) { .homepage-concept__station-grid { grid-template-columns: 1fr; }.homepage-concept__search button { padding: 10px; font-size: .8rem; } } .homepage-concept__featured { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 100% 0, #f59d72 0, transparent 42%), linear-gradient(145deg, #7e4fb2, #3d347d); box-shadow: 0 12px 23px #503b7b2b; }.homepage-concept__featured::after { position: absolute; right: -44px; bottom: -72px; width: 170px; height: 170px; border: 1px solid #ffffff30; border-radius: 50%; content: ''; }.homepage-concept__featured > * { position: relative; z-index: 1; }.homepage-concept__featured-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.homepage-concept__featured-heading h2 { color: #fff; }.homepage-concept__featured-eyebrow { margin: 0 0 5px !important; color: #f4d9ff !important; font-size: .65rem !important; font-weight: 850 !important; letter-spacing: .1em; text-transform: uppercase; }.homepage-concept__featured > p:not(.homepage-concept__featured-eyebrow) { margin: 6px 0 14px; color: #eadff8; font-size: .75rem; line-height: 1.4; }.homepage-concept__featured-spark { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #ffffff38; border-radius: 10px; color: #ffe8a8; background: #ffffff18; font-size: 1rem; }.homepage-concept__featured-list { display: grid; gap: 8px; }.homepage-concept__featured-artist { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px; border: 1px solid #ffffff24; border-radius: 11px; background: #ffffff12; transition: background .18s ease, transform .18s ease; }.homepage-concept__featured-artist:hover, .homepage-concept__featured-artist:focus-visible { background: #ffffff24; transform: translateY(-1px); }.homepage-concept__featured-artist img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; }.homepage-concept__featured-artist strong, .homepage-concept__featured-artist small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.homepage-concept__featured-artist strong { color: #fff; font-size: .77rem; }.homepage-concept__featured-artist small { margin-top: 4px; color: #eadff8; font-size: .67rem; }.homepage-concept__featured-artist small span { display: inline-block; margin-left: 3px; transition: transform .18s ease; }.homepage-concept__featured-artist:hover small span, .homepage-concept__featured-artist:focus-visible small span { transform: translateX(3px); } .homepage-concept__station-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.homepage-concept__track .song-time { margin-top: 2px; color: #8a9aac; font-size: .64rem; } .homepage-concept__country-switcher { margin: -3px 0 17px; padding: 10px; border: 1px solid #e0eaf3; border-radius: 12px; background: #f8fbfe; }.homepage-concept__country-switcher-label { margin-bottom: 8px; color: #607187; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.homepage-concept__country-options { display: flex; flex-wrap: wrap; gap: 7px; }.homepage-concept__country-option { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #d5e3ef; border-radius: 999px; color: #36536f; background: #fff; font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }.homepage-concept__country-option:hover, .homepage-concept__country-option:focus-visible { border-color: #91bddc; color: #174c78; background: #eef7fd; transform: translateY(-1px); }.homepage-concept__country-option.is-active { border-color: #1d639e; color: #fff; background: #1d639e; }.homepage-concept__country-flag { display: inline-flex; align-items: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1rem; line-height: 1; }.homepage-concept__country-option small { opacity: .75; font-size: .65rem; } .homepage-concept__status { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }.homepage-concept__status-link { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 1px solid #e7edf4; color: #2d73b9 !important; font-size: .73rem; font-weight: 850; }.homepage-concept__status-link span, .homepage-concept__freshness-link span { transition: transform .18s ease; }.homepage-concept__status-link:hover span, .homepage-concept__status-link:focus-visible span, .homepage-concept__freshness-link:hover span, .homepage-concept__freshness-link:focus-visible span { transform: translateX(3px); } .homepage-concept__freshness { color: #10243b; background: linear-gradient(145deg, #fffaf0, #fff); }.homepage-concept__freshness-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.homepage-concept__freshness-heading p { margin: 0 0 4px; color: #b1741f; font-size: .65rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }.homepage-concept__freshness-heading h2 { font-size: 1rem; }.homepage-concept__freshness-heading > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #9b6514; background: #fff0c9; font-weight: 900; }.homepage-concept__freshness > p { margin: 8px 0 12px; color: #607187; font-size: .73rem; line-height: 1.4; }.homepage-concept__freshness ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.homepage-concept__freshness li { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 7px; align-items: center; font-size: .72rem; }.homepage-concept__freshness li > span { width: 7px; height: 7px; border-radius: 50%; background: #efa83a; }.homepage-concept__freshness li.is-critical > span { background: #df5a63; }.homepage-concept__freshness li a { min-width: 0; overflow: hidden; color: #36536f; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.homepage-concept__freshness li small { color: #8b7a63; font-size: .64rem; white-space: nowrap; }.homepage-concept__freshness-link { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: #a16516 !important; font-size: .72rem; font-weight: 850; } .homepage-concept__my-radio-eyebrow { margin: 0 0 5px !important; color: #a9d5f4 !important; font-size: .65rem !important; font-weight: 850 !important; letter-spacing: .1em; text-transform: uppercase; }.homepage-concept__my-radio.has-playlist { background: linear-gradient(145deg, #1f6c85, #123d66); }.homepage-concept__my-radio.has-playlist a { color: #123858 !important; background: #d9f4ed; } .new-design-page .new-design-drawer-nav, .new-design-proxy .new-design-drawer-nav { display: grid; gap: 0; margin-bottom: 22px; }.new-design-page .new-design-drawer-nav a, .new-design-proxy .new-design-drawer-nav a { display: block; padding: 10px 2px; border-bottom: 1px solid #ffffff1a; color: #fff; font-size: .84rem; text-decoration: none; }.new-design-page .new-design-drawer-nav a:hover, .new-design-page .new-design-drawer-nav a:focus-visible, .new-design-page .new-design-drawer-nav a[aria-current="page"], .new-design-proxy .new-design-drawer-nav a:hover, .new-design-proxy .new-design-drawer-nav a:focus-visible, .new-design-proxy .new-design-drawer-nav a[aria-current="page"] { color: #9bd5fa; }.new-design-page .new-design-drawer-heading, .new-design-proxy .new-design-drawer-heading { margin: 0 0 8px; color: #91cef5; font-size: .67rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.new-design-page .new-design-drawer-stations > ul, .new-design-proxy .new-design-drawer-stations > ul { margin: 0; padding: 0; list-style: none; } @media (max-width: 560px) { .homepage-concept__country-options { flex-wrap: wrap; overflow: visible; padding-bottom: 0; gap: 6px; }.homepage-concept__country-option { flex: 0 0 auto; min-height: 32px; justify-content: center; padding: 5px 8px; }.homepage-concept__country-name { display: none; }.homepage-concept__country-flag { display: inline-flex; } } /* Regional-indicator emoji fall back to plain letters on some desktop browsers. Use CSS-painted flags so the country switcher is consistent. */ .homepage-concept__country-flag { position: relative; width: 22px; height: 15px; flex: 0 0 22px; overflow: hidden; border-radius: 2px; font-size: 0; box-shadow: 0 0 0 1px #10243b24; } .homepage-concept__country-flag::before, .homepage-concept__country-flag::after { position: absolute; content: ''; } .homepage-concept__country-flag[data-country="NL"] { background: linear-gradient(#ae1c28 0 33.33%, #fff 33.33% 66.66%, #21468b 66.66%); } .homepage-concept__country-flag[data-country="BE"] { background: linear-gradient(90deg, #171717 0 33.33%, #f7d117 33.33% 66.66%, #ef3340 66.66%); } .homepage-concept__country-flag[data-country="GB"] { background: linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%), linear-gradient(0deg, transparent 39%, #fff 39% 61%, transparent 61%), linear-gradient(90deg, transparent 47%, #cf142b 47% 53%, transparent 53%), linear-gradient(0deg, transparent 44%, #cf142b 44% 56%, transparent 56%), #1c3f94; } .homepage-concept__country-flag[data-country="DE"] { background: linear-gradient(#171717 0 33.33%, #dd1f26 33.33% 66.66%, #ffcc29 66.66%); } .homepage-concept__country-flag[data-country="FR"] { background: linear-gradient(90deg, #1d3f96 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%); } .homepage-concept__country-flag[data-country="ES"] { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); } .homepage-concept__country-flag[data-country="IT"] { background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%); } .homepage-concept__country-flag[data-country="AT"] { background: linear-gradient(#ed2939 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%); } .homepage-concept__country-flag[data-country="CH"] { background: #d52b1e; } .homepage-concept__country-flag[data-country="CH"]::before, .homepage-concept__country-flag[data-country="DK"]::before, .homepage-concept__country-flag[data-country="NO"]::before, .homepage-concept__country-flag[data-country="SE"]::before, .homepage-concept__country-flag[data-country="FI"]::before { top: 5px; left: 0; width: 100%; height: 5px; background: #fff; } .homepage-concept__country-flag[data-country="CH"]::after { top: 0; left: 8px; width: 6px; height: 15px; background: #fff; } .homepage-concept__country-flag[data-country="IE"] { background: linear-gradient(90deg, #169b62 0 33.33%, #fff 33.33% 66.66%, #ff883e 66.66%); } .homepage-concept__country-flag[data-country="LU"] { background: linear-gradient(#ed2939 0 33.33%, #fff 33.33% 66.66%, #00a1de 66.66%); } .homepage-concept__country-flag[data-country="DK"] { background: #c8102e; } .homepage-concept__country-flag[data-country="DK"]::after, .homepage-concept__country-flag[data-country="NO"]::after, .homepage-concept__country-flag[data-country="SE"]::after, .homepage-concept__country-flag[data-country="FI"]::after { top: 0; left: 6px; width: 4px; height: 15px; background: #fff; } .homepage-concept__country-flag[data-country="NO"] { background: #ba0c2f; }.homepage-concept__country-flag[data-country="NO"]::before, .homepage-concept__country-flag[data-country="NO"]::after { background: #fff; }.homepage-concept__country-flag[data-country="NO"]::after { box-shadow: 0 0 0 2px #00205b; }.homepage-concept__country-flag[data-country="SE"] { background: #006aa7; }.homepage-concept__country-flag[data-country="SE"]::before, .homepage-concept__country-flag[data-country="SE"]::after { background: #fecc00; }.homepage-concept__country-flag[data-country="FI"] { background: #fff; }.homepage-concept__country-flag[data-country="FI"]::before, .homepage-concept__country-flag[data-country="FI"]::after { background: #003580; } .homepage-concept__country-flag[data-country="PT"] { background: linear-gradient(90deg, #046a38 0 40%, #da291c 40%); } .homepage-concept__country-flag:not([data-country]) { background: #78909c; } .new-design-content { width: min(1040px, calc(100% - 32px)); margin: 34px auto 48px; color: #10243b; }.new-design-content *, .new-design-content *::before, .new-design-content *::after { box-sizing: border-box; }.new-design-content a { text-decoration: none; }.new-design-page-hero { padding: clamp(28px, 4vw, 46px); border-radius: 22px; color: #fff; background: radial-gradient(circle at 90% 15%, #438fd0, transparent 30%), linear-gradient(125deg, #103354, #1d5e95); box-shadow: 0 16px 34px #10243b22; }.new-design-page-hero p, .new-design-section-heading p { margin: 0 0 8px; color: #bcdcf6; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.new-design-page-hero h1 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(2rem, 4.2vw, 3.45rem); line-height: 1.04; letter-spacing: -.05em; }.new-design-page-hero > span { display: block; max-width: 670px; margin-top: 15px; color: #d8e9f8; line-height: 1.55; }.new-design-page-hero--compact { padding-block: 30px; }.new-design-panel { margin-top: 22px; padding: 24px; border: 1px solid #dce5ee; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px #10243b0a; }.new-design-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }.new-design-section-heading h2, .new-design-panel h2 { margin: 0; color: #10243b; font-size: 1.25rem; letter-spacing: -.035em; }.new-design-section-heading > span { color: #607187; font-size: .8rem; white-space: nowrap; } .new-design-artists .artist-search-hero { margin: 0; padding: 0; background: none; }.new-design-artists .artist-search-hero h1 { display: none; }.new-design-artists .artist-search-eyebrow { display: none; }.new-design-artists .artist-search-intro { margin-top: 0; }.new-design-artist-ranking ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }.new-design-artist-ranking li { min-width: 0; }.new-design-artist-ranking li a { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 78px; padding: 10px; border: 1px solid #e3ebf3; border-radius: 12px; color: #10243b; background: #fbfdff; }.new-design-artist-ranking img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; }.new-design-artist-ranking small, .new-design-artist-ranking strong, .new-design-artist-ranking em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-artist-ranking small { color: #2d73b9; font-size: .68rem; font-weight: 800; }.new-design-artist-ranking strong { margin-top: 2px; font-size: .84rem; }.new-design-artist-ranking em { margin-top: 3px; color: #607187; font-size: .7rem; font-style: normal; }.new-design-artist-ranking b { color: #2d73b9; } .new-design-genre-search { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid #dce5ee; border-radius: 13px; background: #f8fbfe; }.new-design-genre-search label { color: #254c6d; font-size: .83rem; font-weight: 800; }.new-design-genre-search input { min-width: 0; padding: 11px 13px; border: 1px solid #cbd9e6; border-radius: 9px; font: inherit; }.new-design-genre-search span { color: #607187; font-size: .78rem; white-space: nowrap; }.new-design-alphabet { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }.new-design-alphabet a { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: #174c78; background: #eaf3fb; font-size: .78rem; font-weight: 800; }.new-design-genre-letter { scroll-margin-top: 20px; margin-top: 24px; }.new-design-genre-letter > h2 { margin-bottom: 10px; color: #2d73b9; font-size: 1rem; }.new-design-genre-letter > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.new-design-genre-letter a { display: flex; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #e3ebf3; border-radius: 10px; color: #10243b; font-size: .84rem; }.new-design-genre-letter b { color: #2d73b9; } .new-design-chart-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid #e6edf4; }.new-design-chart-header p { margin: 0 0 4px; color: #2d73b9; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.new-design-chart-header h2 { font-size: 1.35rem; }.new-design-chart-header select { padding: 10px 28px 10px 11px; border: 1px solid #cbd9e6; border-radius: 9px; color: #174c78; background: #f8fbfe; font: inherit; font-size: .82rem; }.new-design-chart-list { margin: 0; padding: 0; list-style: none; }.new-design-chart-list li { border-bottom: 1px solid #e8eef4; }.new-design-chart-list li:last-child { border-bottom: 0; }.new-design-chart-list a { display: grid; grid-template-columns: 38px 64px minmax(0, 1fr) auto 15px; gap: 13px; align-items: center; padding: 12px 5px; color: #10243b; }.new-design-chart-list .is-podium a { background: linear-gradient(90deg, #edf7ff, transparent); }.new-design-chart-position { color: #2d73b9; font-size: 1.05rem; font-weight: 850; text-align: center; }.new-design-chart-list img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }.new-design-chart-track strong, .new-design-chart-track small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-chart-track strong { font-size: .94rem; }.new-design-chart-track small { margin-top: 4px; color: #607187; font-size: .8rem; }.new-design-chart-move { color: #58718a; font-size: .76rem; font-weight: 750; white-space: nowrap; }.new-design-empty { color: #607187; } .new-design-station-hero { position: relative; padding: 30px; border-radius: 20px; color: #fff; background: linear-gradient(125deg, #103354, #1d5e95); }.new-design-back { display: inline-block; margin-bottom: 24px; color: #cfe8fc; font-size: .82rem; font-weight: 750; }.new-design-station-hero > p { margin: 0 0 7px; color: #c2dff5; font-size: .78rem; }.new-design-station-hero h1 { margin: 0; color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.05em; }.new-design-freshness { display: inline-block; margin-top: 12px; padding: 6px 9px; border-radius: 99px; background: #ffffff20; color: #e1f4e9; font-size: .74rem; font-weight: 800; }.new-design-freshness.is-warning { color: #fff0c7; }.new-design-freshness.is-critical { color: #ffd5d5; }.new-design-now-playing { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 13px; max-width: 420px; margin-top: 25px; padding: 11px; border: 1px solid #ffffff2e; border-radius: 13px; color: #fff; background: #ffffff12; }.new-design-now-playing img { width: 72px; height: 72px; border-radius: 9px; object-fit: cover; }.new-design-now-playing small, .new-design-now-playing strong, .new-design-now-playing em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-now-playing small { margin-top: 6px; color: #cce5f8; font-size: .7rem; }.new-design-now-playing strong { margin-top: 5px; font-size: .95rem; }.new-design-now-playing em { margin-top: 3px; color: #d6e9f7; font-size: .78rem; font-style: normal; }.new-design-station-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; margin-top: 22px; }.new-design-playlist { margin-top: 0; }.new-design-playlist ol { margin: 0; padding: 0; list-style: none; }.new-design-playlist li { border-top: 1px solid #e8eef4; }.new-design-playlist a { display: grid; grid-template-columns: 46px 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; color: #10243b; }.new-design-playlist time { color: #607187; font-size: .78rem; }.new-design-playlist img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }.new-design-playlist strong, .new-design-playlist small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-playlist strong { font-size: .87rem; }.new-design-playlist small { margin-top: 3px; color: #607187; font-size: .76rem; }.new-design-station-side { display: grid; align-content: start; gap: 14px; }.new-design-station-side .new-design-panel { margin-top: 0; padding: 18px; }.new-design-station-stats dl { margin: 13px 0 0; }.new-design-station-stats dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #e7edf4; font-size: .78rem; }.new-design-station-stats dt { color: #607187; }.new-design-station-stats dd { margin: 0; font-weight: 800; }.new-design-station-genres > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }.new-design-station-genres a { padding: 7px 8px; border-radius: 7px; color: #1d5b8f; background: #ebf4fb; font-size: .76rem; font-weight: 700; } .new-site-footer { display: flex; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 32px; align-items: center; justify-content: space-between; gap: 20px; color: #607187; font-size: .78rem; }.new-site-footer p { margin: 0; font-weight: 800; }.new-site-footer nav { display: flex; flex-wrap: wrap; gap: 15px; }.new-site-footer a { color: inherit; } @media (max-width: 800px) { .new-design-artist-ranking ol, .new-design-genre-letter > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }.new-design-station-grid { grid-template-columns: 1fr; }.new-design-station-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }.new-design-station-side { grid-template-columns: 1fr; } @media (max-width: 600px) { .new-design-content { width: min(100% - 22px, 1040px); margin-top: 18px; }.new-design-page-hero, .new-design-panel, .new-design-station-hero { padding: 18px; border-radius: 15px; }.new-design-genre-search { grid-template-columns: 1fr; }.new-design-artist-ranking ol, .new-design-genre-letter > div, .new-design-station-side { grid-template-columns: 1fr; }.new-design-chart-list a { grid-template-columns: 30px 52px minmax(0, 1fr) 12px; gap: 9px; }.new-design-chart-list img { width: 52px; height: 52px; }.new-design-chart-move { display: none; }.new-design-chart-header { align-items: flex-start; flex-direction: column; }.new-site-footer { width: min(100% - 22px, 1180px); align-items: flex-start; flex-direction: column; }.new-design-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; } } .new-design-detail-hero { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); gap: clamp(20px, 4vw, 42px); align-items: center; padding: clamp(24px, 4vw, 42px); border-radius: 22px; color: #fff; background: radial-gradient(circle at 88% 8%, #438fd0, transparent 30%), linear-gradient(125deg, #103354, #1d5e95); }.new-design-detail-hero > img { width: 100%; max-width: 240px; aspect-ratio: 1; border-radius: 16px; object-fit: cover; box-shadow: 0 14px 28px #071d3340; }.new-design-detail-hero .new-design-back { margin-bottom: 20px; }.new-design-detail-hero p { margin: 0 0 8px; color: #cbe5f8; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.new-design-detail-hero h1 { margin: 0; color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.05em; }.new-design-biography { max-width: 680px; margin-top: 16px; color: #e1effa; font-size: .9rem; line-height: 1.55; }.new-design-biography p { color: inherit; font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; }.new-design-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }.new-design-tags a { padding: 6px 8px; border-radius: 7px; color: #fff; background: #ffffff1a; font-size: .76rem; font-weight: 700; }.new-design-track-artists { margin-top: 10px; color: #dceefa; font-size: 1rem; }.new-design-track-artists a { color: #fff; font-weight: 750; }.new-design-track-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }.new-design-track-actions a, .new-design-track-actions span { padding: 8px 10px; border-radius: 8px; color: #173e61; background: #fff; font-size: .78rem; font-weight: 800; }.new-design-track-actions span { color: #dceefa; background: #ffffff1a; }.new-design-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; margin-top: 22px; }.new-design-detail-grid .new-design-panel { margin-top: 0; }.new-design-detail-tracks ol, .new-design-recent-plays ol, .new-design-station-ranking ol { margin: 0; padding: 0; list-style: none; }.new-design-detail-tracks li { border-top: 1px solid #e7edf4; }.new-design-detail-tracks li a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; color: #10243b; }.new-design-detail-tracks img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; }.new-design-detail-tracks strong, .new-design-detail-tracks small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-detail-tracks strong { font-size: .88rem; }.new-design-detail-tracks small { margin-top: 3px; color: #607187; font-size: .76rem; }.new-design-detail-tracks em { color: #2d73b9; font-size: .77rem; font-style: normal; font-weight: 800; }.new-design-detail-side { display: grid; align-content: start; gap: 14px; }.new-design-detail-side .new-design-panel { padding: 18px; }.new-design-simple-stats { margin: 12px 0 0; }.new-design-simple-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #e7edf4; font-size: .8rem; }.new-design-simple-stats dt { color: #607187; }.new-design-simple-stats dd { margin: 0; font-weight: 800; }.new-design-recent-plays ol { margin-top: 11px; }.new-design-recent-plays li { border-top: 1px solid #e7edf4; }.new-design-recent-plays a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; color: #10243b; font-size: .78rem; }.new-design-recent-plays strong, .new-design-recent-plays small { display: block; }.new-design-recent-plays small, .new-design-recent-plays time { margin-top: 2px; color: #607187; font-size: .7rem; }.new-design-station-ranking li { border-top: 1px solid #e7edf4; }.new-design-station-ranking li a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; color: #10243b; }.new-design-station-ranking b { color: #2d73b9; text-align: center; }.new-design-station-ranking em { color: #607187; font-size: .78rem; font-style: normal; }.new-design-facts ul { margin: 12px 0 0; padding-left: 18px; color: #344c62; font-size: .82rem; line-height: 1.55; }.new-design-facts li + li { margin-top: 8px; } @media (max-width: 760px) { .new-design-detail-hero { grid-template-columns: 110px minmax(0, 1fr); padding: 22px; }.new-design-detail-hero > img { max-width: 110px; border-radius: 12px; }.new-design-detail-grid { grid-template-columns: 1fr; }.new-design-detail-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .new-design-detail-hero { grid-template-columns: 1fr; }.new-design-detail-hero > img { max-width: 140px; }.new-design-detail-side { grid-template-columns: 1fr; } } /* A station page is intentionally a small listening snapshot, rather than a dashboard: the latest song, a little context and a short history. */ .new-design-station-page { max-width: 920px; }.new-design-station-focus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(24px, 5vw, 54px); align-items: center; padding: clamp(25px, 5vw, 48px); border-radius: 23px; color: #fff; background: radial-gradient(circle at 89% 10%, #438fd0, transparent 31%), linear-gradient(125deg, #103354, #1d5e95); box-shadow: 0 16px 34px #10243b22; }.new-design-station-intro .new-design-back { margin-bottom: 25px; }.new-design-station-intro > p { margin: 0 0 8px; color: #cbe5f8; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.new-design-station-intro h1 { margin: 0; color: #fff; font-size: clamp(2.15rem, 4.6vw, 3.7rem); line-height: 1; letter-spacing: -.055em; }.new-design-station-focus .new-design-freshness { margin-top: 15px; }.new-design-now-playing--featured { grid-template-columns: 112px minmax(0, 1fr); max-width: none; margin: 0; padding: 12px; border-radius: 15px; transition: transform .18s ease, background .18s ease; }.new-design-now-playing--featured:hover { background: #ffffff1c; transform: translateY(-2px); }.new-design-now-playing--featured img { width: 112px; height: 112px; border-radius: 11px; }.new-design-now-playing--featured small { margin-top: 10px; text-transform: uppercase; letter-spacing: .08em; }.new-design-now-playing--featured strong { margin-top: 7px; font-size: 1.08rem; }.new-design-now-playing--featured em { font-size: .84rem; }.new-design-now-playing--featured b { display: block; margin-top: 13px; color: #fff; font-size: .76rem; }.new-design-now-playing--empty { display: block; max-width: none; margin: 0; padding: 24px; }.new-design-now-playing--empty small, .new-design-now-playing--empty strong, .new-design-now-playing--empty em { display: block; }.new-design-now-playing--empty strong { margin-top: 7px; font-size: 1rem; }.new-design-now-playing--empty em { margin-top: 5px; color: #d6e9f7; font-size: .8rem; } .new-design-station-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 17px 20px; border: 1px solid #dce5ee; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px #10243b0a; }.new-design-station-summary dl { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: 22px; margin: 0; }.new-design-station-summary dt { color: #607187; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.new-design-station-summary dd { margin: 5px 0 0; color: #10243b; font-size: 1.12rem; font-weight: 850; }.new-design-station-summary dd small { display: block; margin-top: 3px; color: #718297; font-size: .67rem; font-weight: 500; }.new-design-station-summary .new-design-station-genres { display: flex; align-items: center; gap: 9px; }.new-design-station-summary .new-design-station-genres > span { color: #607187; font-size: .72rem; font-weight: 750; white-space: nowrap; }.new-design-station-summary .new-design-station-genres > div { display: flex; flex-wrap: wrap; gap: 6px; }.new-design-station-summary .new-design-station-genres a { padding: 6px 7px; border-radius: 7px; color: #1d5b8f; background: #ebf4fb; font-size: .7rem; font-weight: 750; } .new-design-playlist--focused { margin-top: 18px; }.new-design-playlist--focused a { grid-template-columns: 76px 52px minmax(0, 1fr) 16px; padding: 11px 4px; }.new-design-playlist--focused img { width: 52px; height: 52px; }.new-design-playlist--focused b { color: #2d73b9; font-size: .9rem; text-align: right; } .new-design-station-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }.new-design-station-actions a { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; padding: 9px 11px; border: 1px solid #ffffff45; border-radius: 9px; color: #fff; background: #ffffff12; font-size: .76rem; font-weight: 800; text-decoration: none; transition: background .18s ease, transform .18s ease; }.new-design-station-actions a:hover, .new-design-station-actions a:focus-visible { background: #ffffff24; transform: translateY(-1px); }.new-design-station-actions a.is-primary { border-color: #fff; color: #173e61; background: #fff; }.new-design-station-actions a.is-primary:hover, .new-design-station-actions a.is-primary:focus-visible { background: #eaf4fc; }.new-design-playlist-link { color: #246da8; font-size: .76rem; font-weight: 800; text-decoration: none; }.new-design-playlist-link:hover, .new-design-playlist-link:focus-visible { color: #103e66; text-decoration: underline; } @media (max-width: 760px) { .new-design-station-focus { grid-template-columns: 1fr; gap: 24px; padding: 24px; border-radius: 17px; }.new-design-now-playing--featured { max-width: 410px; }.new-design-station-summary { align-items: flex-start; flex-direction: column; }.new-design-station-summary dl { width: 100%; }.new-design-station-summary .new-design-station-genres { align-items: flex-start; flex-direction: column; } } @media (max-width: 500px) { .new-design-station-summary dl { grid-template-columns: 1fr; gap: 13px; }.new-design-station-summary dd { margin-top: 2px; }.new-design-station-summary dd small { display: inline; margin-left: 6px; }.new-design-now-playing--featured { grid-template-columns: 78px minmax(0, 1fr); }.new-design-now-playing--featured img { width: 78px; height: 78px; }.new-design-now-playing--featured small { margin-top: 2px; }.new-design-now-playing--featured b { margin-top: 8px; }.new-design-playlist--focused a { grid-template-columns: 62px 46px minmax(0, 1fr) 13px; gap: 9px; }.new-design-playlist--focused img { width: 46px; height: 46px; } } /* Track and artist pages keep the same editorial focus as the station page: identity first, then a short list that answers the visitor's next question. */ .new-design-focus-page { max-width: 920px; }.new-design-focus-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(24px, 5vw, 46px); align-items: center; padding: clamp(25px, 5vw, 48px); border-radius: 23px; color: #fff; background: radial-gradient(circle at 90% 9%, #438fd0, transparent 31%), linear-gradient(125deg, #103354, #1d5e95); box-shadow: 0 16px 34px #10243b22; }.new-design-focus-hero > img { width: 190px; height: 190px; border-radius: 15px; object-fit: cover; box-shadow: 0 14px 28px #071d3340; }.new-design-focus-hero .new-design-back { margin-bottom: 21px; }.new-design-focus-hero > div > p { margin: 0 0 8px; color: #cbe5f8; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.new-design-focus-hero h1 { margin: 0; color: #fff; font-size: clamp(2.05rem, 4.6vw, 3.6rem); line-height: 1.03; letter-spacing: -.055em; }.new-design-focus-artist { margin-top: 11px; color: #e0effa; font-size: 1rem; }.new-design-focus-artist a { color: #fff; font-weight: 750; }.new-design-focus-action { display: inline-block; margin-top: 20px; padding: 9px 11px; border-radius: 8px; color: #173e61; background: #fff; font-size: .78rem; font-weight: 800; text-decoration: none; }.new-design-focus-hero--artist .new-design-tags { margin-top: 17px; }.new-design-focus-list { margin-top: 18px; }.new-design-focus-list .new-design-section-heading { margin-bottom: 8px; }.new-design-focus-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: 18px; margin-top: 18px; }.new-design-focus-columns .new-design-panel { margin-top: 0; }.new-design-focus-columns .new-design-section-heading { margin-bottom: 8px; } @media (max-width: 680px) { .new-design-focus-hero { grid-template-columns: 125px minmax(0, 1fr); padding: 24px; border-radius: 17px; }.new-design-focus-hero > img { width: 125px; height: 125px; border-radius: 12px; }.new-design-focus-columns { grid-template-columns: 1fr; } } @media (max-width: 460px) { .new-design-focus-hero { grid-template-columns: 1fr; }.new-design-focus-hero > img { width: 130px; height: 130px; }.new-design-focus-hero .new-design-back { margin-bottom: 17px; } } .new-design-chart-page { max-width: 920px; }.new-design-chart-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; padding: 12px; border: 1px solid #e1eaf2; border-radius: 12px; background: #f8fbfe; }.new-design-chart-controls label { display: grid; gap: 5px; color: #607187; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.new-design-chart-controls select { min-width: 175px; min-height: 38px; padding: 8px 28px 8px 10px; border: 1px solid #cbd9e6; border-radius: 8px; color: #174c78; background: #fff; font: inherit; font-size: .8rem; letter-spacing: normal; text-transform: none; }.new-design-chart-page .new-design-chart-list a { grid-template-columns: 38px 64px minmax(0, 1fr) 14px; }.new-design-chart-list--tip a { grid-template-columns: 38px 64px minmax(0, 1fr) auto 14px !important; }.new-design-chart-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; }.new-design-chart-stats b, .new-design-chart-stats em { font-size: .68rem; font-style: normal; }.new-design-chart-stats b { padding: 3px 6px; border-radius: 999px; color: #596f83; background: #edf3f7; font-weight: 850; }.new-design-chart-stats b.is-up { color: #237a50; background: #e8f7ef; }.new-design-chart-stats b.is-down { color: #a3474e; background: #fff0f1; }.new-design-chart-stats b.is-new { color: #7256a1; background: #f1ebfb; }.new-design-chart-stats em { color: #607187; }.new-design-chart-growth { color: #287a51; font-size: .76rem; font-weight: 850; white-space: nowrap; } @media (max-width: 600px) { .new-design-chart-controls { align-items: stretch; flex-direction: column; }.new-design-chart-controls select { width: 100%; }.new-design-chart-page .new-design-chart-list a { grid-template-columns: 30px 52px minmax(0, 1fr) 12px; }.new-design-chart-list--tip a { grid-template-columns: 30px 52px minmax(0, 1fr) 12px !important; }.new-design-chart-growth { display: none; } } .new-design-track-actions .new-design-track-plays { min-width: 224px; padding: 11px 13px; color: #fff; background: #ff785a; box-shadow: 0 8px 18px #071d3330; }.new-design-track-actions .new-design-track-plays small { display: block; margin-bottom: 3px; color: #fff0e9; font-size: .64rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }.new-design-track-actions .new-design-track-plays span { margin-left: 5px; }.new-design-track-actions .new-design-track-plays:hover, .new-design-track-actions .new-design-track-plays:focus-visible { color: #fff; background: #ee6548; transform: translateY(-1px); }.new-design-detail-grid > :only-child { grid-column: 1 / -1; } .new-design-new-page { max-width: 1040px; }.new-design-new-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-top: 18px; padding: 14px; border: 1px solid #dce5ee; border-radius: 15px; background: #fff; box-shadow: 0 6px 18px #10243b0a; }.new-design-new-filters label { display: grid; gap: 6px; color: #597087; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.new-design-new-filters select { min-width: 0; padding: 10px 28px 10px 10px; border: 1px solid #cbd9e6; border-radius: 8px; color: #173e61; background: #f8fbfe; font: inherit; font-size: .82rem; letter-spacing: normal; text-transform: none; }.new-design-new-filters button { min-height: 39px; padding: 10px 14px; border: 0; border-radius: 8px; color: #fff; background: #1d639e; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }.new-design-new-results { margin-top: 25px; }.new-design-new-results > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }.new-design-new-results > header p { margin: 0; color: #10243b; font-size: 1rem; font-weight: 850; }.new-design-new-results > header span { color: #607187; font-size: .76rem; }.new-design-new-day + .new-design-new-day { margin-top: 28px; }.new-design-new-day h2 { margin: 0 0 11px; color: #2d73b9; font-size: .88rem; letter-spacing: -.01em; }.new-design-new-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }.new-design-new-card { min-width: 0; }.new-design-new-card a { display: grid; grid-template-columns: 72px minmax(0, 1fr) 12px; gap: 11px; align-items: center; min-height: 94px; padding: 10px; border: 1px solid #dfe9f2; border-radius: 13px; color: #10243b; background: #fff; box-shadow: 0 4px 12px #10243b08; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.new-design-new-card a:hover, .new-design-new-card a:focus-visible { border-color: #a9c9e6; box-shadow: 0 9px 18px #183e6714; transform: translateY(-2px); }.new-design-new-card img { width: 72px; height: 72px; border-radius: 9px; object-fit: cover; }.new-design-new-card-copy { min-width: 0; }.new-design-new-card-copy small, .new-design-new-card-copy strong, .new-design-new-card-copy em, .new-design-new-card-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-new-card-copy small { color: #2d73b9; font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }.new-design-new-card-copy strong { margin-top: 4px; font-size: .86rem; }.new-design-new-card-copy em { margin-top: 3px; color: #607187; font-size: .75rem; font-style: normal; }.new-design-new-card-copy > span { margin-top: 6px; color: #45627c; font-size: .68rem; }.new-design-new-card b { color: #2d73b9; font-size: .92rem; }.new-design-new-page .new-design-empty { margin-top: 20px; } @media (max-width: 860px) { .new-design-new-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.new-design-new-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }.new-design-new-filters button { grid-column: 1 / -1; } } @media (max-width: 560px) { .new-design-new-filters, .new-design-new-grid { grid-template-columns: 1fr; }.new-design-new-results > header { align-items: flex-start; flex-direction: column; gap: 5px; }.new-design-new-card a { grid-template-columns: 62px minmax(0, 1fr) 12px; min-height: 82px; }.new-design-new-card img { width: 62px; height: 62px; } } /* Genres work best as a quick discovery route first, then a complete directory. */ .new-design-genres-page { max-width: 1000px; }.new-design-genres-hero { padding-bottom: clamp(34px, 5vw, 54px); }.new-design-genre-featured { margin: -18px 20px 0; padding: 20px; border: 1px solid #dce5ee; border-radius: 17px; background: #fff; box-shadow: 0 10px 25px #10243b12; }.new-design-genre-featured header, .new-design-genre-directory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }.new-design-genre-featured header p, .new-design-genre-directory-heading p { margin: 0 0 5px; color: #2d73b9; font-size: .69rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }.new-design-genre-featured h2, .new-design-genre-directory-heading h2 { margin: 0; color: #10243b; font-size: 1.24rem; letter-spacing: -.035em; }.new-design-genre-featured header > span, .new-design-genre-directory-heading > span { color: #607187; font-size: .76rem; text-align: right; }.new-design-genre-featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }.new-design-genre-featured-grid a { min-width: 0; padding: 14px; border: 1px solid #e0eaf3; border-radius: 12px; color: #10243b; background: linear-gradient(145deg, #fff, #f5faff); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.new-design-genre-featured-grid a:hover, .new-design-genre-featured-grid a:focus-visible { border-color: #a9c9e6; box-shadow: 0 9px 18px #183e6714; transform: translateY(-2px); }.new-design-genre-featured-grid span, .new-design-genre-featured-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-genre-featured-grid span { font-size: .9rem; font-weight: 850; }.new-design-genre-featured-grid small { margin-top: 5px; color: #607187; font-size: .7rem; }.new-design-genre-featured-grid b { margin-left: 5px; color: #2d73b9; font-size: .84rem; }.new-design-genre-directory { margin-top: 26px; }.new-design-genre-directory-heading { margin-bottom: 16px; }.new-design-genre-search { grid-template-columns: 142px minmax(0, 1fr) auto; border-color: #d5e3ef; background: #f7fbfe; }.new-design-genre-search input:focus { border-color: #4b8dc3; outline: 3px solid #dceefa; }.new-design-alphabet { padding-bottom: 18px; border-bottom: 1px solid #e7eef5; }.new-design-alphabet a { transition: background .18s ease, color .18s ease, transform .18s ease; }.new-design-alphabet a:hover, .new-design-alphabet a:focus-visible { color: #fff; background: #1d639e; transform: translateY(-1px); }.new-design-genre-letter { margin-top: 26px; }.new-design-genre-letter > h2 { display: grid; width: 30px; height: 30px; place-items: center; margin-bottom: 11px; border-radius: 8px; color: #fff; background: #1d639e; font-size: .83rem; }.new-design-genre-letter > div { gap: 10px; }.new-design-genre-letter a { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; min-height: 51px; padding: 11px 12px; border-color: #e0eaf3; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.new-design-genre-letter a:hover, .new-design-genre-letter a:focus-visible { border-color: #a9c9e6; box-shadow: 0 7px 15px #183e6712; transform: translateY(-1px); }.new-design-genre-letter a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }.new-design-genre-letter small { color: #718297; font-size: .67rem; white-space: nowrap; }.new-design-genre-letter b { font-size: .88rem; } @media (max-width: 760px) { .new-design-genre-featured { margin-inline: 12px; }.new-design-genre-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.new-design-genre-featured header, .new-design-genre-directory-heading { align-items: flex-start; flex-direction: column; gap: 6px; }.new-design-genre-featured header > span, .new-design-genre-directory-heading > span { text-align: left; } } @media (max-width: 520px) { .new-design-genre-featured { margin: -12px 0 0; padding: 16px; }.new-design-genre-featured-grid { grid-template-columns: 1fr; }.new-design-genre-directory { margin-top: 18px; }.new-design-genre-letter a { grid-template-columns: minmax(0, 1fr) 11px; }.new-design-genre-letter small { display: none; } } /* A genre detail is a listening guide: its identity, its artists, then the stations visitors can use to hear it. */ .new-design-genre-page { max-width: 1040px; }.new-design-genre-focus { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: clamp(26px, 5vw, 50px); border-radius: 23px; color: #fff; background: radial-gradient(circle at 87% 12%, #438fd0, transparent 30%), radial-gradient(circle at 96% 94%, #215b95, transparent 32%), linear-gradient(125deg, #103354, #1d5e95); box-shadow: 0 16px 34px #10243b22; }.new-design-genre-focus > div:first-child { max-width: 690px; }.new-design-genre-focus .new-design-back { margin-bottom: 25px; }.new-design-genre-focus p { margin: 0 0 8px; color: #cbe5f8; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.new-design-genre-focus h1 { margin: 0; color: #fff; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -.06em; }.new-design-genre-focus > div:first-child > span { display: block; max-width: 610px; margin-top: 16px; color: #dcecf9; font-size: .94rem; line-height: 1.55; }.new-design-genre-total { min-width: 160px; padding: 18px; border: 1px solid #ffffff2b; border-radius: 14px; background: #ffffff14; }.new-design-genre-total strong, .new-design-genre-total span { display: block; }.new-design-genre-total strong { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.055em; }.new-design-genre-total span { margin-top: 7px; color: #d4e8f8; font-size: .75rem; font-weight: 700; }.new-design-genre-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #dce5ee; border-radius: 16px; background: #dce5ee; box-shadow: 0 6px 18px #10243b0a; }.new-design-genre-summary > div { padding: 16px 19px; background: #fff; }.new-design-genre-summary span, .new-design-genre-summary strong, .new-design-genre-summary small { display: block; }.new-design-genre-summary span { color: #607187; font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }.new-design-genre-summary strong { margin-top: 5px; color: #10243b; font-size: 1.1rem; letter-spacing: -.025em; }.new-design-genre-summary small { margin-top: 3px; color: #718297; font-size: .7rem; }.new-design-genre-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 20px; margin-top: 20px; align-items: start; }.new-design-genre-layout .new-design-panel { margin-top: 0; }.new-design-genre-artists .new-design-section-heading { margin-bottom: 16px; }.new-design-genre-artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.new-design-genre-artist-grid a { display: grid; grid-template-columns: 47px minmax(0, 1fr) 11px; gap: 9px; align-items: center; min-width: 0; min-height: 66px; padding: 9px; border: 1px solid #e0eaf3; border-radius: 11px; color: #10243b; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.new-design-genre-artist-grid a:hover, .new-design-genre-artist-grid a:focus-visible { border-color: #a9c9e6; box-shadow: 0 8px 16px #183e6712; transform: translateY(-1px); }.new-design-genre-artist-grid img { width: 47px; height: 47px; border-radius: 8px; object-fit: cover; }.new-design-genre-artist-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 800; }.new-design-genre-artist-grid b { color: #2d73b9; font-size: .85rem; }.new-design-genre-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }.new-design-genre-pagination > a, .new-design-genre-pagination > div a { display: inline-grid; min-width: 34px; min-height: 34px; place-items: center; padding: 6px 9px; border: 1px solid #d5e2ec; border-radius: 8px; color: #225982; background: #fff; font-size: .75rem; font-weight: 800; }.new-design-genre-pagination > div { display: flex; align-items: center; gap: 5px; }.new-design-genre-pagination > div span { color: #718297; }.new-design-genre-pagination a[aria-current="page"] { border-color: #1d639e; color: #fff; background: #1d639e; }.new-design-genre-stations { padding: 19px; }.new-design-genre-stations header > p { margin: 0 0 5px; color: #2d73b9; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.new-design-genre-stations header h2 { margin: 0; color: #10243b; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.035em; }.new-design-genre-stations header > span { display: block; margin-top: 8px; color: #607187; font-size: .73rem; line-height: 1.45; }.new-design-genre-stations ol { margin: 15px 0 0; padding: 0; list-style: none; }.new-design-genre-stations li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid #e7eef5; }.new-design-genre-stations li > b { color: #2d73b9; font-size: .73rem; text-align: center; }.new-design-genre-stations li a { min-width: 0; color: #10243b; }.new-design-genre-stations li a strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .77rem; }.new-design-genre-stations li a span { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #e5eff7; }.new-design-genre-stations li a i { display: block; width: var(--genre-station-width); height: 100%; border-radius: inherit; background: #4a92c7; }.new-design-genre-stations li em { color: #607187; font-size: .69rem; font-style: normal; font-weight: 750; white-space: nowrap; } @media (max-width: 880px) { .new-design-genre-layout { grid-template-columns: 1fr; }.new-design-genre-stations { max-width: none; }.new-design-genre-stations ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }.new-design-genre-stations li { min-width: 0; } } @media (max-width: 680px) { .new-design-genre-focus { align-items: flex-start; flex-direction: column; gap: 22px; padding: 25px; border-radius: 17px; }.new-design-genre-total { min-width: 0; }.new-design-genre-summary { grid-template-columns: 1fr; }.new-design-genre-artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .new-design-genre-artist-grid, .new-design-genre-stations ol { grid-template-columns: 1fr; }.new-design-genre-pagination { align-items: stretch; flex-direction: column; }.new-design-genre-pagination > a { justify-content: center; }.new-design-genre-pagination > div { justify-content: center; } } /* Keep every dedicated new-design page on the same responsive canvas. */ .new-design-content { width: min(1180px, calc(100% - 32px)); max-width: 1180px; } .new-design-page .new-site-menu { margin-left: 0; justify-content: flex-end; } .new-design-page .hamburger-menu { display: inline-flex; width: auto; min-height: 42px; flex: 0 0 auto !important; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid #c2d8e9; border-radius: 10px; color: #174c78; background: #fff; box-shadow: 0 4px 12px #10243b0c; font-size: .76rem; font-weight: 800; } .new-design-page .hamburger-menu:hover, .new-design-page .hamburger-menu:focus-visible { border-color: #8fb9d9; color: #103e66; background: #f1f8fd; } .new-design-page .hamburger-menu__bars { width: 17px; gap: 3px; }.new-design-page .hamburger-menu__bars span { width: 17px; height: 2px; }.new-design-page .hamburger-label { display: inline; } @media (max-width: 860px) { .new-design-page .new-site-menu a:not(.new-site-menu__action) { display: none; }.new-design-page .new-site-menu { gap: 8px; }.new-design-page .new-site-header { width: min(100% - 22px, 1180px); }.new-design-page .new-site-header .hamburger-menu { min-height: 40px; }.new-design-content { width: min(100% - 22px, 1180px); } } @media (max-width: 420px) { .new-design-page .hamburger-label { display: none; }.new-design-page .hamburger-menu { width: 40px; padding: 0; } } /* Status is operational information, so the design makes the current signal easy to scan before showing the detailed seven-day history. */ .new-design-status-page { max-width: 1080px; }.new-design-status-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: clamp(28px, 5vw, 52px); border-radius: 23px; color: #fff; background: radial-gradient(circle at 88% 8%, #438fd0, transparent 29%), radial-gradient(circle at 96% 94%, #215b95, transparent 31%), linear-gradient(125deg, #103354, #1d5e95); box-shadow: 0 16px 34px #10243b22; }.new-design-status-hero > div { max-width: 650px; }.new-design-status-hero p { margin: 0 0 9px; color: #cbe5f8; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.new-design-status-hero h1 { margin: 0; color: #fff; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -.06em; }.new-design-status-hero > div > span { display: block; margin-top: 17px; color: #dcecf9; font-size: .93rem; line-height: 1.55; }.new-design-status-hero time { flex: 0 0 auto; padding: 10px 12px; border: 1px solid #ffffff2f; border-radius: 9px; color: #dcecf9; background: #ffffff12; font-size: .74rem; font-weight: 750; white-space: nowrap; }.new-design-status-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #dce5ee; border-radius: 16px; background: #dce5ee; box-shadow: 0 6px 18px #10243b0a; }.new-design-status-summary article { position: relative; padding: 17px 19px; background: #fff; }.new-design-status-summary article > span { display: block; width: 8px; height: 8px; margin-bottom: 13px; border-radius: 50%; background: #36c97d; box-shadow: 0 0 0 5px #36c97d1f; }.new-design-status-summary article.is-warning > span { background: #efa83a; box-shadow: 0 0 0 5px #efa83a1e; }.new-design-status-summary article.is-critical > span { background: #df5a63; box-shadow: 0 0 0 5px #df5a631c; }.new-design-status-summary article.is-availability > span { background: #4a92c7; box-shadow: 0 0 0 5px #4a92c71d; }.new-design-status-summary strong, .new-design-status-summary small { display: block; }.new-design-status-summary strong { color: #10243b; font-size: 1.42rem; letter-spacing: -.04em; }.new-design-status-summary small { margin-top: 4px; color: #607187; font-size: .71rem; font-weight: 750; }.new-design-status-guide { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; padding: 18px 20px; border: 1px solid #dce7f0; border-radius: 15px; background: #f8fbfe; }.new-design-status-guide p { margin: 0 0 5px; color: #2d73b9; font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.new-design-status-guide h2 { margin: 0; color: #10243b; font-size: 1.08rem; letter-spacing: -.03em; }.new-design-status-guide div > span { display: block; max-width: 560px; margin-top: 6px; color: #607187; font-size: .76rem; line-height: 1.45; }.new-design-status-guide ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 13px; margin: 0; padding: 0; color: #526b82; list-style: none; font-size: .7rem; font-weight: 700; }.new-design-status-guide li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }.new-design-status-guide i, .new-design-status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #36c97d; }.new-design-status-guide .is-warning i, .new-design-status-pill.is-warning i { background: #efa83a; }.new-design-status-guide .is-critical i, .new-design-status-pill.is-critical i { background: #df5a63; }.new-design-status-list { margin-top: 18px; }.new-design-status-rows { margin-top: 8px; }.new-design-status-row { display: grid; grid-template-columns: minmax(155px, .8fr) minmax(180px, .9fr) minmax(330px, 2.2fr); gap: 18px; align-items: center; padding: 15px 0; border-top: 1px solid #e5edf4; }.new-design-status-station a { color: #10243b; font-size: .86rem; font-weight: 850; text-decoration: none; }.new-design-status-station a:hover, .new-design-status-station a:focus-visible { color: #216ca7; text-decoration: underline; }.new-design-status-station span { display: block; margin-top: 4px; color: #718297; font-size: .68rem; }.new-design-status-current { display: grid; gap: 6px; }.new-design-status-pill { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: #23724c; background: #eaf8f0; font-size: .68rem; }.new-design-status-pill.is-warning { color: #9b6514; background: #fff7e7; }.new-design-status-pill.is-critical { color: #a03c44; background: #fff0f1; }.new-design-status-current > span { color: #607187; font-size: .7rem; }.new-design-status-days { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 5px; color: #718297; font-size: .61rem; font-weight: 750; text-align: center; }.new-design-status-graph { display: grid; grid-template-columns: repeat(168, minmax(1px, 1fr)); gap: 1px; }.new-design-status-graph i { display: block; min-width: 1px; height: 10px; border-radius: 1px; background: #35bf76; }.new-design-status-graph i.is-warning { background: #eeae43; }.new-design-status-graph i.is-critical { background: #df5a63; }.new-design-status-graph i.is-future { background: #dce5ed; }.new-design-status-graph i.is-day-start { box-shadow: -1px 0 #8aa4bb; }.new-design-status-history small { display: block; margin-top: 6px; color: #718297; font-size: .65rem; }.new-design-status-history small strong { color: #245e8d; }.new-design-status-row.is-critical { background: linear-gradient(90deg, #fff7f7, transparent 42%); } .new-design-stations-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #dce5ee; border-radius: 16px; background: #dce5ee; box-shadow: 0 6px 18px #10243b0a; }.new-design-stations-summary > div { padding: 18px 20px; background: #fff; }.new-design-stations-summary strong, .new-design-stations-summary span { display: block; }.new-design-stations-summary strong { color: #174c78; font-size: 1.55rem; letter-spacing: -.04em; }.new-design-stations-summary span { margin-top: 4px; color: #607187; font-size: .73rem; }.new-design-stations-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }.new-design-station-country { margin-top: 0; }.new-design-station-country .new-design-section-heading { margin-bottom: 12px; }.new-design-station-country .new-design-section-heading p { margin-bottom: 4px; color: #2d73b9; }.new-design-station-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.new-design-station-directory-grid a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 11px 12px; border: 1px solid #e0eaf3; border-radius: 10px; color: #10243b; background: #fbfdff; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.new-design-station-directory-grid a:hover, .new-design-station-directory-grid a:focus-visible { border-color: #a9c9e6; box-shadow: 0 7px 15px #183e6712; transform: translateY(-1px); }.new-design-station-directory-grid span { min-width: 0; }.new-design-station-directory-grid strong, .new-design-station-directory-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.new-design-station-directory-grid strong { font-size: .78rem; }.new-design-station-directory-grid small { margin-top: 3px; color: #718297; font-size: .66rem; }.new-design-station-directory-grid b { color: #2d73b9; font-size: .9rem; } @media (max-width: 820px) { .new-design-status-hero, .new-design-status-guide { align-items: flex-start; flex-direction: column; }.new-design-status-guide ul { justify-content: flex-start; }.new-design-status-summary { grid-template-columns: repeat(2, 1fr); }.new-design-status-row { grid-template-columns: minmax(0, 1fr) minmax(170px, .7fr); }.new-design-status-history { grid-column: 1 / -1; } } @media (max-width: 520px) { .new-design-status-hero { gap: 18px; padding: 25px; border-radius: 17px; }.new-design-status-hero time { white-space: normal; }.new-design-status-summary { grid-template-columns: 1fr; }.new-design-status-guide { padding: 17px; }.new-design-status-row { grid-template-columns: 1fr; gap: 11px; }.new-design-status-history { grid-column: auto; }.new-design-status-graph { gap: 1px; }.new-design-status-graph i { height: 8px; } } @media (max-width: 760px) { .new-design-stations-directory { grid-template-columns: 1fr; }.new-design-station-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .new-design-stations-summary { grid-template-columns: 1fr; }.new-design-station-directory-grid { grid-template-columns: 1fr; } } .new-design-chart-tip-stats { display: grid; gap: 3px; min-width: 105px; }.new-design-chart-tip-stats strong { color: #287a51; font-size: .78rem; }.new-design-chart-tip-stats small { color: #607187; font-size: .65rem; white-space: nowrap; } @media (max-width: 600px) { .new-design-chart-list--tip .new-design-chart-tip-stats { grid-column: 3; grid-row: 2; min-width: 0; }.new-design-chart-list--tip .new-design-chart-tip-stats small { overflow: hidden; text-overflow: ellipsis; }.new-design-chart-list--tip a > span:last-child { grid-column: 4; grid-row: 1; } } /* Top and Tip share a readable chart-card treatment. Movement is intentionally high contrast so the weekly change is visible at a glance. */ .new-design-chart { padding: clamp(22px, 3vw, 34px); }.new-design-chart-header { padding-bottom: 22px; }.new-design-chart-header h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); }.new-design-chart-controls { margin-top: 20px; padding: 16px; }.new-design-chart-controls label { font-size: .76rem; }.new-design-chart-controls select { min-height: 44px; font-size: .9rem; } .new-design-chart-list { display: grid; gap: 10px; margin-top: 20px; }.new-design-chart-list li, .new-design-chart-list li:last-child { border: 1px solid #dce7f0; border-radius: 14px; background: #fff; box-shadow: 0 5px 14px #10243b08; }.new-design-chart-list li.is-podium { border-color: #b9d7ed; background: linear-gradient(105deg, #f0f8fe, #fff 70%); }.new-design-chart-list a, .new-design-chart-page .new-design-chart-list a, .new-design-chart-list--tip a { min-height: 96px; padding: 14px 16px; gap: 16px; }.new-design-chart-list img { width: 76px; height: 76px; border-radius: 12px; }.new-design-chart-position { color: #1d639e; font-size: 1.25rem; }.new-design-chart-track strong { font-size: 1.05rem; }.new-design-chart-track small { margin-top: 5px; font-size: .88rem; }.new-design-chart-stats { gap: 9px; margin-top: 9px; }.new-design-chart-stats b { padding: 5px 9px; font-size: .78rem; letter-spacing: .01em; }.new-design-chart-stats em { font-size: .78rem; }.new-design-chart-tip-stats { min-width: 135px; }.new-design-chart-tip-stats strong { font-size: .92rem; }.new-design-chart-tip-stats small { font-size: .72rem; }.new-design-chart-list a > span:last-child { color: #2d73b9; font-size: 1.25rem; font-weight: 850; }.new-design-chart-stats b.is-up { color: #fff; background: #16834f; }.new-design-chart-stats b.is-down { color: #fff; background: #c74650; }.new-design-chart-stats b.is-new { color: #fff; background: #7351a4; }.new-design-chart-stats b.is-equal { color: #fff; background: #62798d; } @media (max-width: 700px) { .new-design-chart { padding: 18px; }.new-design-chart-list a, .new-design-chart-page .new-design-chart-list a, .new-design-chart-list--tip a { min-height: 88px; padding: 12px; gap: 10px; }.new-design-chart-list img { width: 60px; height: 60px; border-radius: 10px; }.new-design-chart-position { font-size: 1.05rem; }.new-design-chart-track strong { font-size: .96rem; }.new-design-chart-track small { font-size: .8rem; }.new-design-chart-stats { gap: 6px; margin-top: 7px; }.new-design-chart-stats b { padding: 4px 7px; font-size: .72rem; }.new-design-chart-stats em { font-size: .72rem; }.new-design-chart-tip-stats { min-width: 0; }.new-design-chart-tip-stats strong { font-size: .82rem; }.new-design-chart-tip-stats small { font-size: .65rem; }.new-design-chart-list--tip .new-design-chart-tip-stats { grid-column: 3; grid-row: 2; }.new-design-chart-list--tip a > span:last-child { grid-column: 4; grid-row: 1; } } /* Movement sits in a dedicated right-side column; Tip keeps its movement immediately before the growth/view statistics. */ .new-design-chart-page .new-design-chart-list a { grid-template-columns: 38px 76px minmax(0, 1fr) 132px 20px; }.new-design-chart-page .new-design-chart-list > li > a > .new-design-chart-stats { justify-self: end; align-self: center; margin-top: 0; }.new-design-chart-list--tip a { grid-template-columns: 38px 76px minmax(0, 1fr) 132px 145px 20px !important; }.new-design-chart-list--tip .new-design-chart-stats { justify-self: end; align-self: center; margin-top: 0; }.new-design-chart-list--tip .new-design-chart-tip-stats { justify-self: end; } @media (max-width: 700px) { .new-design-chart-page .new-design-chart-list a { grid-template-columns: 30px 60px minmax(0, 1fr) 98px 16px; }.new-design-chart-page .new-design-chart-list > li > a > .new-design-chart-stats { grid-column: 4; grid-row: 1; justify-self: end; }.new-design-chart-list--tip a { grid-template-columns: 30px 60px minmax(0, 1fr) 92px 118px 16px !important; }.new-design-chart-list--tip .new-design-chart-stats { grid-column: 4; grid-row: 1; }.new-design-chart-list--tip .new-design-chart-tip-stats { grid-column: 5; grid-row: 1; justify-self: end; }.new-design-chart-list--tip a > span:last-child { grid-column: 6; grid-row: 1; } } .new-design-top-page .new-design-chart-track strong, .new-design-top-page .new-design-chart-track small { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } @media (max-width: 700px) { .new-design-top-page .new-design-chart-list a { grid-template-columns: 24px 58px minmax(0, 1fr) 16px; grid-template-areas: "position image track arrow" ". image stats arrow"; column-gap: 8px; row-gap: 2px; align-items: start; min-height: 0; } .new-design-top-page .new-design-chart-list a > .new-design-chart-position { grid-area: position; padding-top: 4px; } .new-design-top-page .new-design-chart-list a > img { grid-area: image; width: 58px; height: 58px; } .new-design-top-page .new-design-chart-list a > .new-design-chart-track { grid-area: track; min-width: 0; padding-top: 1px; } .new-design-top-page .new-design-chart-list a > .new-design-chart-stats { grid-area: stats; justify-self: start; align-self: start; margin-top: 2px; } .new-design-top-page .new-design-chart-list a > span:last-child { grid-area: arrow; align-self: start; padding-top: 2px; } } .new-design-tip-page .new-design-chart-track strong, .new-design-tip-page .new-design-chart-track small { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .new-design-tip-page .new-design-chart-tip-stats small { white-space: normal; overflow-wrap: anywhere; } @media (max-width: 700px) { .new-design-tip-page .new-design-chart-list--tip a { grid-template-columns: 24px 58px minmax(0, 1fr) 16px !important; grid-template-areas: "position image track arrow" ". image movement arrow" ". image tip arrow"; column-gap: 8px; row-gap: 2px; align-items: start; min-height: 0; } .new-design-tip-page .new-design-chart-list--tip a > .new-design-chart-position { grid-area: position; padding-top: 4px; } .new-design-tip-page .new-design-chart-list--tip a > img { grid-area: image; width: 58px; height: 58px; } .new-design-tip-page .new-design-chart-list--tip a > .new-design-chart-track { grid-area: track; min-width: 0; padding-top: 1px; } .new-design-tip-page .new-design-chart-list--tip a > .new-design-chart-stats { grid-area: movement; justify-self: start; align-self: start; margin-top: 2px; } .new-design-tip-page .new-design-chart-list--tip a > .new-design-chart-tip-stats { grid-area: tip; justify-self: start; align-self: start; min-width: 0; margin-top: 1px; } .new-design-tip-page .new-design-chart-list--tip .new-design-chart-tip-stats strong { font-size: .82rem; } .new-design-tip-page .new-design-chart-list--tip .new-design-chart-tip-stats small { font-size: .65rem; line-height: 1.25; } .new-design-tip-page .new-design-chart-list--tip a > span:last-child { grid-area: arrow; align-self: start; padding-top: 2px; } } /* SPA transitions can begin with the homepage stylesheet still active. Keep the track action legible during that transition as well as after refresh. */ .new-design-track-proxy .playlist-button, .new-design-track-proxy .playlist-button .playlist-button-label { color: #173e61 !important; } .new-design-track-proxy .new-design-track-actions .playlist-button-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #1d639e !important; background: #eaf4fc; font-size: 1.05rem; font-weight: 850; line-height: 1; } .new-design-track-proxy .new-design-track-actions .playlist-button.is-saved .playlist-button-icon { color: #16834f !important; background: #e5f7ed; } .new-design-track-proxy .new-design-track-actions #playlist-status { color: #e5f3ff !important; font-size: .72rem; font-weight: 800; white-space: nowrap; } .new-design-track-proxy .new-design-track-actions #playlist-status:not(:empty) { padding: 6px 10px; border: 1px solid #ffffff2b; border-radius: 8px; background: #2d73b9; box-shadow: 0 5px 12px #071d3330; } .new-design-page .site-search-trigger, .new-design-proxy .site-search-trigger { position: static; inset: auto; display: inline-flex; width: auto; height: 42px; min-height: 42px; flex: 0 0 auto; order: 4; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid #c2d8e9; border-radius: 10px; color: #174c78; background: #fff; box-shadow: 0 4px 12px #10243b0c; transform: none; } .new-design-page .site-search-trigger:hover, .new-design-page .site-search-trigger:focus-visible, .new-design-proxy .site-search-trigger:hover, .new-design-proxy .site-search-trigger:focus-visible { border-color: #8fb9d9; color: #103e66; background: #f1f8fd; } .new-design-page .site-search-trigger-icon, .new-design-proxy .site-search-trigger-icon { width: 18px; height: 18px; }.new-design-page .site-search-trigger-label, .new-design-proxy .site-search-trigger-label { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; color: inherit; font-size: .76rem; font-weight: 800; white-space: nowrap; } @media (max-width: 420px) { .new-design-page .site-search-trigger, .new-design-proxy .site-search-trigger { width: 40px; padding: 0; }.new-design-page .site-search-trigger-label, .new-design-proxy .site-search-trigger-label { display: none; } } .new-design-page .sidebar-overlay, .new-design-proxy .sidebar-overlay { background: rgba(10, 20, 34, .18); backdrop-filter: blur(2px); } .new-design-page .sidebar, .new-design-proxy .sidebar { position: fixed; top: 0; bottom: 0; height: 100vh; height: 100dvh; min-height: 0; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .new-design-page .sidebar-overlay, .new-design-proxy .sidebar-overlay { background: rgba(10, 20, 34, .12); backdrop-filter: blur(1px); } .new-design-page .sidebar.is-open, .new-design-proxy .sidebar.is-open { left: 0; z-index: 1100; visibility: visible; pointer-events: auto; } /* Station details keep the descriptive and programming information from the original page, but present it as two calm, scannable cards. */ .new-design-station-info-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 18px; margin-top: 18px; } .new-design-station-info-card { min-width: 0; padding: 21px 22px; border: 1px solid #dce5ee; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px #10243b0a; } .new-design-station-info-card header { padding-bottom: 13px; border-bottom: 1px solid #e7eef5; } .new-design-station-info-card header p { margin: 0 0 5px; color: #2d73b9; font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .new-design-station-info-card h2 { margin: 0; color: #10243b; font-size: 1.2rem; letter-spacing: -.035em; } .new-design-station-description { margin: 15px 0 0; color: #435b72; line-height: 1.6; } .new-design-station-description--empty { color: #718297; font-style: italic; } .new-design-station-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 18px 0 0; } .new-design-station-meta div { min-width: 0; padding: 10px 11px; border: 1px solid #e1eaf2; border-radius: 9px; background: #f8fbfe; } .new-design-station-meta dt { color: #718297; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .new-design-station-meta dd { margin: 3px 0 0; overflow: hidden; color: #173e61; font-size: .8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .new-design-station-monthly-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; color: #1d639e !important; font-size: .78rem; font-weight: 850; } .new-design-station-monthly-link span { font-size: 1rem; transition: transform .18s ease; } .new-design-station-monthly-link:hover span, .new-design-station-monthly-link:focus-visible span { transform: translateX(3px); } .new-design-station-program-card { display: flex; flex-direction: column; } .new-design-program-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e7eef5; } .new-design-program-row:first-of-type { margin-top: 4px; } .new-design-program-row > span { color: #2d73b9; font-size: .7rem; font-weight: 850; text-transform: uppercase; } .new-design-program-row a { min-width: 0; overflow: hidden; color: #173e61; font-size: .84rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .new-design-program-row a:hover, .new-design-program-row a:focus-visible { color: #1d73b7; text-decoration: underline; } .new-design-program-row time { color: #718297; font-size: .72rem; white-space: nowrap; } .new-design-program-empty { margin: 17px 0 0; color: #718297; font-size: .82rem; } /* Keep the shared archive picker compact on the redesigned station page, matching the picker used by the redesigned daily playlist page. */ .new-design-page .new-design-station-page .playlist-date-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 18px 26px; align-items: center; margin: 18px 0 22px; padding: 18px; border: 1px solid #dce5ee; border-radius: 14px; background: #f8fbfe; box-shadow: none; } .new-design-page .new-design-station-page .playlist-date-eyebrow { color: #2d73b9 !important; font-size: .68rem !important; } .new-design-page .new-design-station-page .playlist-date-picker h2 { color: #10243b; font-size: 1.12rem; } .new-design-page .new-design-station-page .playlist-date-heading > p:last-child { color: #607187; font-size: .78rem; line-height: 1.45; } .new-design-page .new-design-station-page .playlist-date-label { color: #567087; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; } .new-design-page .new-design-station-page .playlist-date-navigation { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; } .new-design-page .new-design-station-page .playlist-date-step { height: 42px; border-color: #c7d9e8; border-radius: 9px; color: #174c78; background: #fff; } .new-design-page .new-design-station-page .playlist-date-step:hover, .new-design-page .new-design-station-page .playlist-date-step:focus-visible { border-color: #7eafd1; color: #174c78; background: #eaf4fc; } .new-design-page .new-design-station-page .playlist-date-input-wrap input { height: 42px; border: 1px solid #c7d9e8; border-radius: 9px; color: #173e61; font-size: .84rem; } .new-design-page .new-design-station-page .playlist-date-shortcuts { margin-top: 8px; } .new-design-page .new-design-station-page .playlist-date-shortcuts a { min-height: 32px; padding: 5px 10px; border-color: #c7d9e8; color: #174c78; background: #fff; font-size: .7rem; } .new-design-page .new-design-station-page .playlist-date-shortcuts a[aria-current="date"] { border-color: #1d639e; color: #fff; background: #1d639e; } /* Keep the genre label anchored to the top of its chips instead of letting flex centering make it look detached from the rest of the summary. */ .new-design-station-summary .new-design-station-genres { align-items: center; padding-top: 0; } .new-design-station-summary .new-design-station-genres > span { padding-top: 0; line-height: 1.2; } @media (max-width: 760px) { .new-design-page .new-design-station-page .playlist-date-picker { grid-template-columns: 1fr; } .new-design-station-info-grid { grid-template-columns: 1fr; } .new-design-station-summary .new-design-station-genres { align-items: flex-start; flex-direction: column; padding-top: 0; } .new-design-station-summary .new-design-station-genres > span { padding-top: 0; } } @media (max-width: 460px) { .new-design-station-meta { grid-template-columns: 1fr; } .new-design-program-row { grid-template-columns: 42px minmax(0, 1fr); } .new-design-program-row time { grid-column: 2; } } /* Keep the primary navigation visible at the top on phones. The station drawer remains available through the menu button, while these links wrap into a compact second header row instead of disappearing. */ @media (max-width: 860px) { .new-design-page .new-site-header, .new-design-proxy .new-site-header { height: auto; min-height: 0; overflow: visible; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; row-gap: 8px; } .new-design-page .new-site-header .site-logo, .new-design-proxy .new-site-header .site-logo { min-width: 0; flex: 1 1 auto; } .new-design-page .new-site-menu, .new-design-proxy .new-site-menu { order: 5; width: 100%; min-width: 0; flex: 0 0 100%; justify-content: flex-start; flex-wrap: wrap; gap: 5px; margin: 0; padding: 2px 0 3px; overflow: visible; } .new-design-page .new-site-menu a, .new-design-proxy .new-site-menu a, .new-design-page .new-site-menu a:not(.new-site-menu__action), .new-design-proxy .new-site-menu a:not(.new-site-menu__action) { display: inline-flex !important; flex: 0 0 auto; align-items: center; min-height: 32px; padding: 6px 9px; border: 1px solid transparent; border-radius: 8px; font-size: .74rem; white-space: nowrap; } .new-design-page .new-site-menu a:hover, .new-design-page .new-site-menu a:focus-visible, .new-design-page .new-site-menu a[aria-current="page"], .new-design-proxy .new-site-menu a:hover, .new-design-proxy .new-site-menu a:focus-visible, .new-design-proxy .new-site-menu a[aria-current="page"] { border-color: #c8ddeb; color: #113b65; background: #eef7fd; } .new-design-page .new-site-menu__action, .new-design-proxy .new-site-menu__action { border-color: #c8d9e9 !important; background: #fff; } } @media (max-width: 560px) { .new-design-page .new-site-header .site-logo, .new-design-proxy .new-site-header .site-logo { gap: 7px; } .new-design-page .new-site-header .site-logo__mark, .new-design-proxy .new-site-header .site-logo__mark { width: 34px; height: 34px; flex-basis: 34px; } .new-design-page .new-site-header .site-logo__name, .new-design-proxy .new-site-header .site-logo__name { font-size: 1.05rem; } .new-design-page .hamburger-label, .new-design-proxy .hamburger-label, .new-design-page .site-search-trigger-label, .new-design-proxy .site-search-trigger-label { display: none; } .new-design-page .hamburger-menu, .new-design-proxy .hamburger-menu, .new-design-page .site-search-trigger, .new-design-proxy .site-search-trigger { width: 40px; padding-right: 0; padding-left: 0; } } .new-design-page .privacy-settings-button, .new-design-proxy .privacy-settings-button { position: static; z-index: auto; display: block; margin: 16px 0 32px; } .new-design-page .new-site-footer .privacy-settings-button, .new-design-proxy .new-site-footer .privacy-settings-button { align-self: flex-start; margin: 12px 0 0; } @media (max-width: 760px) { .new-design-page .privacy-settings-button, .new-design-proxy .privacy-settings-button { margin-bottom: 40px; } .new-design-page #scrollTopBtn, .new-design-proxy #scrollTopBtn { bottom: calc(92px + env(safe-area-inset-bottom)); } }