elements.
========================================================================== */
/* ---------- Part 1: rules copied from custom.css ---------- */
/* from custom.css line 1401 */
.advantageAudioSparx:where(.radio-page) {
padding-bottom: 80px !important;
}
/* from custom.css line 2064 */
@media (min-width: 1200px) {
.look-inside:where(.radio-page) .aae-item-title {
font-size: 1.375rem;
}
}
/* from custom.css line 2068 */
@media (min-width: 1200px) {
.look-inside:where(.radio-page) .aae-item-text {
font-size: 1.125rem;
}
}
/* from custom.css line 4309 */
.about-artist-earn:where(.radio-page) {
text-align: center;
color: #fff;
}
/* from custom.css line 4314 */
:where(.about-artist-earn.radio-page) .aae-title {
font-size: 1.8rem;
font-weight: 5000;
}
/* from custom.css line 4318 */
:where(.about-artist-earn.radio-page) .aae-subtitle {
font-size: 1.37rem;
line-height: 30px;
}
/* from custom.css line 4322 */
:where(.about-artist-earn.radio-page) .aae-item {
background: rgba(255, 255, 255, 0.02);
border: 4px solid rgba(255, 255, 255, 0.24);
border-radius: 24px;
padding: 60px 26px;
gap: 10px;
height: 100%;
}
/* from custom.css line 4330 */
:where(.about-artist-earn.radio-page) .aae-item-title {
font-size: 1.5rem;
font-weight: 500;
line-height: 26px;
}
/* from custom.css line 4335 */
:where(.about-artist-earn.radio-page) .aae-item-text {
font-size: 1.25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 27px;
}
/* from custom.css line 4345 */
:where(.about-artist-earn.radio-page) .aae-item-text {
-webkit-line-clamp: 10;
}
/* from custom.css line 4349 */
:where(.about-artist-earn.radio-page) .aae-item.expanded .aae-item-text {
display: block;
-webkit-line-clamp: initial;
overflow: visible;
text-overflow: initial;
}
/* from custom.css line 4357 */
:where(.about-artist-earn.radio-page) .aae-toggle {
margin-top: .8rem;
border: 1px solid #ccc;
border-radius: 999px;
width: 32px;
height: 32px;
line-height: 30px;
text-align: center;
font-weight: 700;
cursor: pointer;
background: #fff;
user-select: none;
font-size: 1.5rem;
}
/* from custom.css line 4370 */
:where(.about-artist-earn.radio-page) .aae-item-text a {
font-size: 1.25rem;
color: #FFF;
}
/* from custom.css line 4378 */
:where(.about-artist-earn.radio-page) .aae-toggle:focus {
outline: 2px solid #666;
}
/* from custom.css line 8341 */
@media (min-width: 768px) and (max-width: 1024px) {
:where(.about-artist-earn.radio-page) .aae-title {
font-size: 1.75rem;
}
}
/* from custom.css line 8344 */
@media (min-width: 768px) and (max-width: 1024px) {
:where(.about-artist-earn.radio-page) .aae-subtitle {
font-size: 1.2rem;
}
}
/* from custom.css line 8347 */
@media (min-width: 768px) and (max-width: 1024px) {
:where(.about-artist-earn.radio-page) .aae-item-title {
font-size: 1.4rem;
font-weight: 500;
line-height: 26px;
}
}
/* from custom.css line 8352 */
@media (min-width: 768px) and (max-width: 1024px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
font-size: 1.1rem;
line-height: 22px;
}
}
/* from custom.css line 8360 */
@media (min-width: 768px) and (max-width: 1024px) {
:where(.about-artist-earn.radio-page) .aae-title {
font-weight: 5000;
}
}
/* from custom.css line 10753 */
@media only screen and (max-width: 768px) {
:where(.about-artist-earn.radio-page) .aae-title {
font-size: 1.8rem;
line-height: 1.3;
}
}
/* from custom.css line 10761 */
@media only screen and (max-width: 768px) {
:where(.about-artist-earn.radio-page) .aae-subtitle {
font-size: 1.17rem;
line-height: 20px !important;
margin-top: 10px;
}
}
/* from custom.css line 10766 */
@media only screen and (max-width: 768px) {
:where(.about-artist-earn.radio-page) .aae-item-title {
font-size: 1.5rem;
line-height: 25px;
}
}
/* from custom.css line 10770 */
@media only screen and (max-width: 768px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
font-size: 1.1rem;
line-height: 24px;
}
}
/* from custom.css line 10774 */
@media only screen and (max-width: 768px) {
:where(.about-artist-earn.radio-page) .aae-item {
padding: 30px 26px;
}
}
/* from custom.css line 11972 */
@media only screen and (orientation: portrait) and (min-width: 360px) and (max-width: 362px) {
:where(.about-artist-earn.radio-page) .aae-item-title {
font-size: 1.4rem;
}
}
/* from custom.css line 11975 */
@media only screen and (orientation: portrait) and (min-width: 360px) and (max-width: 362px) {
:where(.about-artist-earn.radio-page) .aae-item-text,
:where(.about-artist-earn.radio-page) .aae-subtitle {
font-size: 1rem;
}
}
/* from custom.css line 23611 */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
font-size: 1.1rem;
line-height: 22px;
}
}
/* from custom.css line 23615 */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
:where(.about-artist-earn.radio-page) .aae-subtitle {
font-size: 1.2rem;
}
}
/* from custom.css line 23618 */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
:where(.about-artist-earn.radio-page) .aae-title {
font-size: 2rem;
font-weight: 5000;
}
}
/* from custom.css line 23622 */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
:where(.about-artist-earn.radio-page) .aae-item-title {
font-size: 1.4rem;
font-weight: 500;
line-height: 26px;
}
}
/* from custom.css line 25260 */
@media only screen and (device-width: 768px) and (device-height: 1024px) {
:where(.about-artist-earn.radio-page) .aae-subtitle {
font-size: 1.2rem;
}
}
/* from custom.css line 25266 */
@media only screen and (device-width: 768px) and (device-height: 1024px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
font-size: 1.1rem;
line-height: 22px;
}
}
/* from custom.css line 25270 */
@media only screen and (device-width: 768px) and (device-height: 1024px) {
:where(.about-artist-earn.radio-page) .aae-item-title {
font-size: 1.4rem;
font-weight: 500;
line-height: 26px;
}
}
/* from custom.css line 25275 */
@media only screen and (device-width: 768px) and (device-height: 1024px) {
:where(.about-artist-earn.radio-page) .aae-title {
font-size: 2.5rem;
font-weight: 5000;
}
}
/* from custom.css line 31575 */
@media only screen and (min-width: 1400px) and (max-width: 1511px) {
.cstm-py-1:where(.about-artist-earn.radio-page) {
padding: 40px 0;
}
}
/* from custom.css line 34818 */
@media (width: 1366px) {
.cstm-py-1:where(.about-artist-earn.radio-page) {
padding: 40px 0;
}
.radio-mag .musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) > img.mm-poster-img {
aspect-ratio: 505 / 736 !important;
}
}
/* from custom.css line 39148 */
@media screen and (width: 1280px) {
:where(.about-artist-earn.radio-page) .aar-item-icon img {
width: 70px !important;
}
.rs-play-service-app__bg-title {
font-size: 16.5vw;
top: -40px;
}
}
/* from custom.css line 39560 */
@media screen and (min-width: 1512px) {
.AI-artist-earn:where(.radio-page) .aae-toggle {
display: none;
}
}
/* from custom.css line 39572 */
@media screen and (min-width: 1512px) {
.advantageAudioSparx:where(.radio-page) .aae-toggle {
display: none;
}
}
/* from custom.css line 40025 */
@media screen and (min-width: 1512px) {
.about-artist-earn:where(.radio-page) {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
/* from custom.css line 40753 */
@media screen and (min-width: 1512px) {
.cstm-py-1:where(.about-artist-earn.radio-page) {
padding: 43px 0;
}
}
/* from custom.css line 42987 */
@media screen and (width: 1024px) and (height: 768px) {
:where(.about-artist-earn.radio-page) .aar-item-icon img {
width: 70px !important;
}
}
/* from custom.css line 43164 */
@media only screen and (width: 1366px) {
:where(.about-artist-earn.radio-page) .aae-title {
font-size: 2rem;
}
}
/* from custom.css line 43167 */
@media only screen and (width: 1366px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
font-size: 1rem;
}
}
/* from custom.css line 52398 */
@media screen and (max-width: 767px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
line-height: 1.25 !important;
}
}
/* from custom.css line 52526 */
@media screen and (max-width: 767px) {
.advantageAudioSparx:where(.radio-page) .aae-toggle {
display: none;
}
}
/* from custom.css line 52805 */
@media screen and (max-width: 767px) {
:where(.about-artist-earn.radio-page) .aae-title {
line-height: 30px !important;
margin-top: 10px;
}
}
/* from custom.css line 53054 */
@media screen and (max-width: 767px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
font-size: 1.1rem;
line-height: 21px;
}
}
/* from custom.css line 53897 */
@media screen and (min-width: 300px) and (max-width: 480px) {
.submit-music-page .submit-main {
padding-bottom: 0px;
}
.cstm-py-1:where(.about-artist-earn.radio-page) {
padding: 15px 0;
}
}
/* from custom.css line 54466 */
@media screen and (min-width: 300px) and (max-width: 480px) {
:where(.about-artist-earn.radio-page) .aae-item-title,
:where(.about-artist-earn.radio-page) .aae-item-text {
line-height: 1.2 !important;
}
}
/* from custom.css line 54475 */
@media screen and (min-width: 300px) and (max-width: 480px) {
:where(.about-artist-earn.radio-page) .aae-item-text {
line-height: 1.5 !important;
}
}
/* from custom.css line 54830 */
@media screen and (min-width: 481px) and (max-width: 767px) {
.cstm-py-1:where(.about-artist-earn.radio-page) {
padding: 15px 0;
}
}
/* from custom.css line 56859 */
@media screen and (min-width: 1024px) and (max-width: 1511px) {
.AI-artist-earn:where(.radio-page) .aae-toggle {
display: none;
}
}
/* from custom.css line 56937 */
@media screen and (min-width: 1024px) and (max-width: 1511px) {
.advantageAudioSparx:where(.radio-page) .aae-toggle {
display: none;
}
}
/* from custom.css line 57377 */
@media screen and (min-width: 1024px) and (max-width: 1511px) {
:where(.about-artist-earn.radio-page) .aae-subtitle {
line-height: 27px !important;
font-size: 1.37rem !important;
}
}
/* from custom.css line 57883 */
@media (min-width: 768px) and (max-width: 1024px) {
.AI-artist-earn:where(.radio-page) .custom-row-768-1024 > * {
flex: 0 0 50%;
max-width: 50%;
}
}
/* ---------- Part 2: hero, Look Inside, Details ---------- */
/* ---- shared fixes: phones up to 767px ---- */
@media (max-width: 767px) {
/* Advantages / How to Participate: 40px side padding left ~216px of text at 320 */
.radio-page.AI-artist-earn,
.radio-page.how-to-part {
padding-left: max(8px, env(safe-area-inset-left, 0px));
padding-right: max(8px, env(safe-area-inset-right, 0px));
}
/* ---------- hero ---------- */
.rs-audio-submit { display: flex; flex-direction: column; }
.rs-audio-submit__left { min-height: 0; height: auto; }
.rs-audio-submit__content {
height: auto;
padding: 44px max(20px, env(safe-area-inset-right, 0px)) 44px max(20px, env(safe-area-inset-left, 0px));
}
.rs-audio-submit__title {
font-size: clamp(2.75rem, 14.5vw, 4.375rem);
letter-spacing: -0.5px;
overflow-wrap: break-word;
}
.rs-audio-submit__description {
max-width: 34em;
margin-top: 24px;
font-size: 1.0625rem;
line-height: 1.55 !important;
}
.rs-audio-submit__button {
width: 100%;
max-width: 360px;
height: auto;
min-height: 56px;
margin-top: 28px;
padding: 12px 24px;
font-size: 1.25rem;
text-align: center;
}
.rs-audio-submit__button:focus-visible,
.look__more:focus-visible,
.details__card a:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
/* hero artwork: the desktop three-strip composition, scaled with the screen
instead of a fixed 570px box with a fixed 540px image */
.rs-audio-submit__right { height: auto; aspect-ratio: 760 / 548; }
.rs-audio-submit__strip,
.rs-audio-submit__strip--top,
.rs-audio-submit__strip--middle,
.rs-audio-submit__strip--bottom {
border-radius: 0 999px 999px 0;
background-size: 100% 100%, 100vw auto;
}
.rs-audio-submit__strip--top { top: 14.35%; width: 71.05%; height: 21.84%; }
.rs-audio-submit__strip--middle { top: 40.19%; width: 92.76%; height: 21.84%; }
.rs-audio-submit__strip--bottom { top: 66.45%; width: 76%; height: 21.62%; }
/* ---------- section titles (LOOK INSIDE / DETAILS TO CONSIDER) ---------- */
.look .lookText, .details .lookText { font-size: clamp(2.75rem, 15vw, 4.375rem); margin-left: 0; }
.look .insideText, .details .insideText { font-size: clamp(1.375rem, 7.5vw, 2.1875rem); margin-left: 0; margin-bottom: 0; }
.look__col--1 .li-item,
.details__canvas .li-item {
display: block;
margin: 0;
padding: 28px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
}
/* ---------- Look Inside: natural heights, readable sizes ---------- */
.look__grid { display: block; font-size: 1px; }
.look__col, .look__col--1, .look__col--2, .look__col--3, .look__col--4 { width: auto; }
.look__img,
.look__img--blonde, .look__img--violin, .look__img--teal-singer, .look__img--chair,
.look__img--red-dress, .look__img--drummer, .look__img--leopard, .look__img--curly,
.look__img--headphones, .look__img--band {
height: auto;
max-height: none;
aspect-ratio: 4 / 3;
}
.look__card,
.look__card--storage, .look__card--ringtone, .look__card--royalties, .look__card--control-a,
.look__card--websites, .look__card--money, .look__card--control-b, .look__card--paid,
.look__card--traffic, .look__card--monitoring, .look__card--deals {
height: auto;
--lines: 100;
--pad-right: 0px;
gap: 12px;
padding: 24px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
}
.look__card h3 { font-size: 1.375rem; line-height: 1.25 !important; overflow-wrap: break-word; }
.look__card p { font-size: 0.9375rem; line-height: 1.6 !important; }
.look__list, .look__list--sm { margin-top: -4px; padding-left: 1.4em; font-size: 0.9375rem; line-height: 1.7 !important; }
.look__logo { width: 120px; height: 58px; margin-top: 4px; align-self: flex-start; border-radius: 4px; }
.look__logo span { font-size: 1.5rem; }
.look__more { display: none; }
/* ---------- Details: stacked, readable sizes ---------- */
.details { margin-top: 0; padding-top: 0; }
.details__canvas {
font-size: 1px;
gap: 16px;
padding: 0 max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
}
.details__canvas .li-item { padding-left: 0; padding-right: 0; padding-bottom: 4px; }
.details__card,
.details__card--revenue, .details__card--tracks, .details__card--commitment,
.details__card--nonexclusive, .details__card--why, .details__card--upload {
padding: 22px 20px 26px;
gap: 12px;
border-radius: 16px;
}
.details__card h3,
.details__card--nonexclusive h3,
.details__card--upload h3 { font-size: 1.375rem; line-height: 1.2 !important; overflow-wrap: break-word; }
.details__card p { font-size: 0.9375rem; line-height: 1.65 !important; }
.details__card a { text-decoration: underline; text-underline-offset: 3px; }
}
/* two columns of Look Inside on large phones in landscape / small tablets */
@media (min-width: 600px) and (max-width: 767px) {
.look__grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.look__col, .look__col--1, .look__col--2, .look__col--3, .look__col--4 { width: 50%; }
}
/* touch: no stuck hover lift. reduced motion: no transitions */
@media (max-width: 767px) and (hover: none) {
.rs-audio-submit__button:hover { transform: none; box-shadow: none; }
.rs-audio-submit__button:active { transform: scale(0.98); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.rs-audio-submit__button, .look__more-v { transition: none; }
}
/* ---------- Part 3: Advantages of AudioSparx, How to Participate ---------- */
/* ---- Advantages of AudioSparx + How to Participate: phones up to 767px ---- */
@media (max-width: 767px) {
.about-artist-earn.radio-page {
padding-top: 32px;
padding-bottom: 40px !important;
text-align: left;
}
.about-artist-earn.radio-page > .container {
max-width: none;
padding-left: 8px;
padding-right: 8px;
}
.about-artist-earn.radio-page .aae-title {
margin-top: 0;
font-size: 1.75rem !important;
line-height: 1.2 !important;
overflow-wrap: break-word;
}
.about-artist-earn.radio-page .aae-subtitle {
margin-top: 12px;
margin-bottom: 28px !important;
font-size: 1rem;
line-height: 1.55 !important;
width: 100%;
}
.about-artist-earn.radio-page .fs-2 {
font-size: 1.375rem !important;
line-height: 1.25;
}
.about-artist-earn.radio-page .row {
--bs-gutter-y: 14px;
justify-content: flex-start !important;
}
.about-artist-earn.radio-page .aae-item {
align-items: flex-start !important;
gap: 8px;
padding: 22px 18px;
border-width: 2px;
border-radius: 18px;
text-align: left;
}
.about-artist-earn.radio-page .aar-item-icon img {
width: 56px !important;
height: auto;
}
.about-artist-earn.radio-page .aae-item-title {
font-size: 1.25rem;
line-height: 1.25 !important;
overflow-wrap: break-word;
}
.about-artist-earn.radio-page .aae-item-text {
display: block;
overflow: visible;
-webkit-line-clamp: unset;
line-clamp: unset;
font-size: 1rem;
line-height: 1.55 !important;
overflow-wrap: break-word;
}
.about-artist-earn.radio-page .aae-item-text a {
font-size: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.about-artist-earn.radio-page .aae-item-text a:focus-visible,
.about-artist-earn.radio-page .aae-toggle:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
.about-artist-earn.radio-page .aae-toggle { display: none; }
}
/* ---------- Part 4: Artists Earn With AudioSparx, blue theme ---------- */
/* ---- Artists Earn With AudioSparx (mobile stack): blue theme, phones up to 767px ---- */
@media (max-width: 767px) {
.mobile-earn-section.bg-white {
margin-bottom: 0 !important;
background:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(18, 147, 230, 0.55) 0%, rgba(18, 147, 230, 0) 100%),
#04263b !important;
}
.mobile-earn-section > .container {
padding: 28px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)) !important;
}
.mobile-earn-section .mobile-earn-header {
flex-wrap: wrap;
gap: 14px 16px;
}
.mobile-earn-section .mobile-earn-title-text {
flex: 1 1 12em;
min-width: 0;
color: #fff !important;
font-size: 1.75rem;
font-weight: 400;
line-height: 1.2;
overflow-wrap: break-word;
}
.mobile-earn-section .mobile-earn-header a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 150px;
min-height: 46px;
padding: 10px 22px;
border: 1px solid rgba(95, 199, 247, 0.74);
background: linear-gradient(90deg, #075ca8 0%, #0769b6 63%, #087ec7 100%);
color: #fff;
font-size: 1rem;
font-weight: 600;
}
.mobile-earn-section .mobile-earn-header a.btn:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
/* photo keeps its light and shade, takes the section's blue */
.mobile-earn-section .mobile-earn-item {
height: 128px;
margin-bottom: 2px;
background-color: #0a6fc4;
background-blend-mode: luminosity;
}
.mobile-earn-section .mobile-earn-item:last-child { margin-bottom: 0; }
.mobile-earn-section .mobile-earn-overlay {
justify-content: flex-start;
align-items: flex-end;
padding: 0 max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px));
background: linear-gradient(90deg, rgba(3, 30, 56, 0.86) 0%, rgba(6, 80, 150, 0.5) 60%, rgba(10, 150, 230, 0.12) 100%);
}
.mobile-earn-section .mobile-earn-item h3 {
font-family: "castelia", "Poppins", sans-serif;
font-size: 1.375rem;
font-weight: 400;
line-height: 1.2 !important;
letter-spacing: -0.02em;
text-align: left;
text-transform: uppercase;
overflow-wrap: break-word;
}
}
/* ---------- Part 5: Artists Earn, tap a strip to open it ---------- */
/* ---- Artists Earn: tap a strip to open it (details/summary markup). Structure for every width the stack shows at ---- */
.mobile-earn-section details.mobile-earn-item { display: block; height: auto; }
.mobile-earn-section details.mobile-earn-item > summary {
position: relative;
height: 140px;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.mobile-earn-section details.mobile-earn-item > summary::-webkit-details-marker { display: none; }
.mobile-earn-section details.mobile-earn-item > summary:focus-visible { outline: 3px solid #8fe6ff; outline-offset: -3px; }
.mobile-earn-section details.mobile-earn-item > summary::after {
content: "";
position: absolute;
right: 16px;
bottom: 16px;
width: 30px;
height: 30px;
border: 2px solid #fff;
border-radius: 50%;
background:
linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
linear-gradient(#fff, #fff) center / 2px 12px no-repeat;
}
.mobile-earn-section details.mobile-earn-item[open] > summary::after {
background: linear-gradient(#fff, #fff) center / 12px 2px no-repeat;
}
.mobile-earn-section .mobile-earn-desc {
margin: 0;
padding: 16px 20px 20px;
background: rgba(46, 12, 43, 0.86);
color: #fff;
font-size: 1rem;
line-height: 1.55 !important;
}
@media (prefers-reduced-motion: no-preference) {
.mobile-earn-section details.mobile-earn-item[open] > .mobile-earn-desc { animation: rs-earn-in 0.22s ease-out; }
@keyframes rs-earn-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 767px) {
.mobile-earn-section details.mobile-earn-item > summary { height: 128px; padding-right: 60px; }
.mobile-earn-section .mobile-earn-desc {
padding: 14px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
}
}
/* 1 Accordion Drop: the strip stays, a panel opens under it */
@media (max-width: 767px) {
.mobile-earn-section .mobile-earn-desc { background: linear-gradient(180deg, #073a61 0%, #04263b 100%); }
.mobile-earn-section details.mobile-earn-item[open] > summary { box-shadow: inset 0 -3px 0 #35b4f5; }
}
/* ---------- Part 6: Cinematic Poster layout ---------- */
/* ===== Option B: Cinematic Poster ===== */
@media (max-width: 767px) {
/* hero: artwork first and larger, headline rises over its foot */
.rs-audio-submit__right { order: -1; aspect-ratio: 1 / 0.92; }
.rs-audio-submit__strip,
.rs-audio-submit__strip--top,
.rs-audio-submit__strip--middle,
.rs-audio-submit__strip--bottom { background-size: 100% 100%, 132vw auto; }
.rs-audio-submit__strip--top { top: 7%; width: 78%; height: 25%; }
.rs-audio-submit__strip--middle { top: 36%; width: 100%; height: 25%; border-radius: 0; }
.rs-audio-submit__strip--bottom { top: 65%; width: 84%; height: 25%; }
.rs-audio-submit__left {
margin-top: -84px;
z-index: 4;
border-radius: 0;
background: linear-gradient(180deg, rgba(2, 30, 56, 0) 0, rgba(2, 30, 56, 0.86) 84px, rgba(2, 30, 56, 0.94) 100%);
}
.rs-audio-submit__left::after { display: none; }
.rs-audio-submit__content { padding-top: 20px; padding-bottom: 48px; }
.rs-audio-submit__title { font-size: clamp(2.875rem, 14.9vw, 4.75rem); text-shadow: 0 2px 18px rgba(0, 20, 40, 0.55); }
/* Look Inside: tall photo, its card fades up into it */
.look__img,
.look__img--blonde, .look__img--violin, .look__img--teal-singer, .look__img--chair,
.look__img--red-dress, .look__img--drummer, .look__img--leopard, .look__img--curly,
.look__img--headphones, .look__img--band { aspect-ratio: 5 / 4; }
.look__img + .look__card {
position: relative;
margin-top: -72px;
padding-top: 84px;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px);
mask-image: linear-gradient(180deg, transparent 0, #000 72px);
}
.look__card h3 { font-size: 1.625rem; }
/* Details: full-bleed photos, cards overlap them */
.details__canvas { gap: 0; padding-left: 0; padding-right: 0; }
.details__canvas .li-item { order: 0; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
.details__photo-top,
.details__photo--dj-a,
.details__photo--stage-b,
.details__thumb img { height: auto; aspect-ratio: 5 / 4; border-radius: 0; }
.details__thumb { border-radius: 0; }
.details__card,
.details__card--revenue, .details__card--tracks, .details__card--commitment,
.details__card--nonexclusive, .details__card--why, .details__card--upload {
margin: -56px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
box-shadow: 0 14px 34px rgba(0, 12, 30, 0.45);
}
.details__photo-top { order: 1; }
.details__card--revenue { order: 2; }
.details__photo--dj-a { order: 3; }
.details__card--tracks { order: 4; }
.details__thumb { order: 5; }
.details__card--commitment { order: 6; }
.details__card--nonexclusive { order: 7; margin-top: 0; }
.details__photo--stage-b { order: 8; }
.details__card--why { order: 9; }
.details__card--upload { order: 10; margin-top: 0; margin-bottom: 36px; }
}
/* B: How to Participate reads as numbered steps */
@media (max-width: 767px) {
.how-to-part.radio-page .row { counter-reset: rs-step; }
.how-to-part.radio-page .aae-item { position: relative; counter-increment: rs-step; }
.how-to-part.radio-page .aae-item::before {
content: counter(rs-step, decimal-leading-zero);
position: absolute;
top: 14px;
right: 18px;
font-family: "Antonio", "antonio", sans-serif;
font-size: 2.75rem;
font-weight: 700;
line-height: 1;
color: rgba(143, 230, 255, 0.55);
}
.how-to-part.radio-page .aae-item-title { padding-right: 56px; }
.about-artist-earn.radio-page .aae-item { background: rgba(0, 24, 48, 0.35); border-color: rgba(143, 230, 255, 0.35); }
}
/* ============ end AudioSparx Participation mobile block ============ */
/* ==========================================================================
AUDIOSPARX PARTICIPATION (submit-audio.cfm) - TABLET ONLY, 768px to 1199px
[Option 1, Faithful Fix] with the hero from [Option 2, Poster Tablet]
Added by Claude, 2026-10-06. Every rule is inside a min-width: 768px and
max-width: 1199.98px (or narrower) query. Phones and 1200px+ are untouched.
========================================================================== */
/* ---- shared tablet fixes: 768px to 1199px ---- */
/* hero, landscape tablets (desktop side-by-side layout): the fixed 1512/548 box was
shorter than its text, so the end of the paragraph and the Contact Us button were cut off */
@media (min-width: 992px) and (max-width: 1199.98px) {
.rs-audio-submit { aspect-ratio: auto; min-height: calc(100vw * 548 / 1512); }
.rs-audio-submit__content { height: auto; padding: 36px 24px 40px 30px; }
.rs-audio-submit__title { margin-left: 22px; font-size: clamp(3.25rem, 5.4vw, 4rem); }
.rs-audio-submit__description { margin-top: 26px; margin-left: 22px; font-size: 1.0625rem; }
.rs-audio-submit__description br { display: none; }
.rs-audio-submit__button { width: 248px; height: 58px; margin-top: 28px; margin-left: 22px; font-size: 1.3125rem; }
.rs-audio-submit__strip,
.rs-audio-submit__strip--top,
.rs-audio-submit__strip--middle,
.rs-audio-submit__strip--bottom { background-size: 100% 100%, 50.265vw auto; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.rs-audio-submit__button:focus-visible,
.look__more:focus-visible,
.details__more:focus-visible,
.details__card a:focus-visible,
.about-artist-earn.radio-page .aae-toggle:focus-visible,
.about-artist-earn.radio-page .aae-item-text a:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
/* bigger tap area, same look */
.look__card .look__more::after,
.about-artist-earn.radio-page .aae-toggle::after {
content: "";
position: absolute;
inset: -10px;
}
.about-artist-earn.radio-page .aae-toggle { position: relative; }
.details__card a { text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (hover: none) {
.rs-audio-submit__button:hover { transform: none; box-shadow: none; }
.rs-audio-submit__button:active { transform: scale(0.98); }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
.rs-audio-submit__button, .look__more-v, .earn-thumbnail, .ways-earn-btn { transition: none; }
}
/* ---- Artists Earn, blue theme: stacked strips (768 to 991px) ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
.mobile-earn-section.bg-white {
margin-bottom: 0 !important;
background:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(18, 147, 230, 0.55) 0%, rgba(18, 147, 230, 0) 100%),
#04263b !important;
}
.mobile-earn-section > .container { padding: 32px 24px 22px !important; }
.mobile-earn-section .mobile-earn-title-text {
color: #fff !important;
font-size: 2rem;
font-weight: 400;
line-height: 1.2;
}
.mobile-earn-section .mobile-earn-header a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 160px;
min-height: 46px;
padding: 10px 24px;
border: 1px solid rgba(95, 199, 247, 0.74);
background: linear-gradient(90deg, #075ca8 0%, #0769b6 63%, #087ec7 100%);
color: #fff;
font-size: 1rem;
font-weight: 600;
}
.mobile-earn-section .mobile-earn-header a.btn:focus-visible { outline: 3px solid #8fe6ff; outline-offset: 3px; }
.mobile-earn-section .mobile-earn-item {
margin-bottom: 2px;
background-color: #0a6fc4;
background-blend-mode: luminosity;
}
.mobile-earn-section .mobile-earn-item:last-child { margin-bottom: 0; }
.mobile-earn-section details.mobile-earn-item > summary { padding-right: 70px; }
.mobile-earn-section details.mobile-earn-item > summary::after { right: 24px; bottom: 20px; }
.mobile-earn-section .mobile-earn-overlay {
justify-content: flex-start;
align-items: flex-end;
padding: 0 24px 22px;
background: linear-gradient(90deg, rgba(3, 30, 56, 0.86) 0%, rgba(6, 80, 150, 0.5) 60%, rgba(10, 150, 230, 0.12) 100%);
}
.mobile-earn-section .mobile-earn-item h3 {
font-family: "castelia", "Poppins", sans-serif;
font-size: 1.625rem;
font-weight: 400;
line-height: 1.2 !important;
letter-spacing: -0.02em;
text-align: left;
text-transform: uppercase;
}
.mobile-earn-section .mobile-earn-desc {
padding: 16px 24px 22px;
background: linear-gradient(180deg, #073a61 0%, #04263b 100%);
font-size: 1.0625rem;
}
.mobile-earn-section details.mobile-earn-item[open] > summary { box-shadow: inset 0 -3px 0 #35b4f5; }
}
/* ---- Artists Earn, blue theme: tabbed slider (992 to 1199px) ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
.ways-earn-section.radio-page #we-slider-section {
position: relative;
background-color: #0a5fae;
background-blend-mode: luminosity;
}
.ways-earn-section.radio-page .we-bg-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, rgba(3, 30, 56, 0.86) 0%, rgba(6, 80, 150, 0.55) 55%, rgba(10, 150, 230, 0.2) 100%);
}
.ways-earn-section.radio-page .ways-earn-btn {
border: 1px solid rgba(95, 199, 247, 0.74);
background: linear-gradient(90deg, #075ca8 0%, #0769b6 63%, #087ec7 100%);
}
.ways-earn-section.radio-page .earn-thumbnail { background: #0a4f8f; }
.ways-earn-section.radio-page .earn-thumbnail img { filter: grayscale(1) brightness(0.6); mix-blend-mode: luminosity; }
.ways-earn-section.radio-page .earn-thumbnail.active img { filter: grayscale(1) brightness(1); }
}
/* Details collage (where it is shown): its two-line title was a fixed 70px and ran under the first photo */
@media (min-width: 768px) and (max-width: 1199.98px) {
.details__canvas .lookText { font-size: 70em; }
.details__canvas .insideText { font-size: 35em; margin-bottom: 0; }
.details__canvas .li-item { margin-top: 12em; }
}
/* hero, portrait tablets: artwork first, headline rises over its foot (as on phones) */
@media (min-width: 768px) and (max-width: 991.98px) {
.rs-audio-submit { display: flex; flex-direction: column; }
.rs-audio-submit__right { order: -1; height: auto; aspect-ratio: 760 / 548; }
.rs-audio-submit__strip,
.rs-audio-submit__strip--top,
.rs-audio-submit__strip--middle,
.rs-audio-submit__strip--bottom { background-size: 100% 100%, 100vw auto; }
.rs-audio-submit__left {
min-height: 0;
margin-top: -110px;
z-index: 4;
border-radius: 0;
background: linear-gradient(180deg, rgba(2, 30, 56, 0) 0, rgba(2, 30, 56, 0.86) 110px, rgba(2, 30, 56, 0.94) 100%);
}
.rs-audio-submit__left::after { display: none; }
.rs-audio-submit__content { height: auto; padding: 45px 45px 60px; }
.rs-audio-submit__title { text-shadow: 0 2px 18px rgba(0, 20, 40, 0.55); }
}
/* ---- Look Inside, 768 to 1199px: keep the grid, let cards grow instead of cutting text ---- */
@media (min-width: 768px) and (max-width: 1199.98px) {
.look__card--storage { height: auto; min-height: 578em; }
.look__card--ringtone { height: auto; min-height: 447em; }
.look__card--royalties { height: auto; min-height: 368em; }
.look__card--control-a { height: auto; min-height: 363em; }
.look__card--websites { height: auto; min-height: 301em; }
.look__card--money { height: auto; min-height: 362em; }
.look__card--control-b { height: auto; min-height: 352em; }
.look__card--paid { height: auto; min-height: 313em; }
.look__card--traffic { height: auto; min-height: 363em; }
.look__card--monitoring { height: auto; min-height: 303em; padding-bottom: 24em; }
.look__card--deals { height: auto; min-height: 407em; }
.look__card h3 { font-size: max(33em, 1.125rem); overflow-wrap: break-word; }
.look__card p { font-size: max(21em, 0.875rem); }
.look__list { font-size: max(18em, 0.875rem); }
.look__list--sm { font-size: max(15em, 0.875rem); }
.look__logo { flex: none; }
.look__card .look__more { flex: none; min-width: 24px; min-height: 24px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
/* four narrow columns: the wide right-hand gaps of the desktop design leave too little room for text */
.look__card { --pad-right: 14em; }
}
/* Details, 768 to 1099px: the scaled collage put body text at 9 to 13px. Two columns, real text sizes */
@media (min-width: 768px) and (max-width: 1099.98px) {
.details__canvas {
height: auto;
font-size: 1px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
padding: 0 24px 40px;
}
.details__canvas .li-item { grid-column: 1 / -1; margin-top: 20px; }
.details__card,
.details__photo,
.details__photo-top,
.details__thumb { position: static; width: auto; height: auto; }
.details__photo--dj-b,
.details__photo--stage-a { display: none; }
.details__photo--dj-a,
.details__photo--stage-b { min-height: 260px; background-size: cover; background-position: center top; border-radius: 22px; }
.details__photo-top { width: 100%; height: 100%; min-height: 240px; border-radius: 22px; }
.details__thumb { padding: 0; background: none; }
.details__thumb img { height: 100%; min-height: 220px; border-radius: 22px; }
.details__card { padding: 26px 26px 30px; gap: 14px; border-radius: 22px; }
.details__card h3 { font-size: 1.5rem; line-height: 1.15 !important; }
.details__card p { font-size: 1rem; line-height: 1.65 !important; }
.details__card--upload p { -webkit-line-clamp: unset; line-clamp: unset; }
.details__more { display: none; }
.details__photo-top { order: 1; }
.details__card--revenue { order: 2; }
.details__card--tracks { order: 3; }
.details__photo--dj-a { order: 4; }
.details__thumb { order: 5; }
.details__card--commitment { order: 6; }
.details__card--nonexclusive { order: 7; }
.details__photo--stage-b { order: 8; }
.details__card--why { order: 9; }
.details__card--upload { order: 10; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
.details__canvas .lookText { font-size: 4.375rem; }
.details__canvas .insideText { font-size: 2.1875rem; }
}
/* ============ end AudioSparx Participation tablet block ============ */
/* ==========================================================================
AUDIOSPARX PARTICIPATION (submit-audio.cfm) - PAGE GROUND + DESKTOP
[Desktop option 2, Aligned 1512]
Added by Claude, 2026-10-06.
Part 1 (all widths): the page ground. It styles the .rs-audio-page wrapper
that submit-audio.cfm now has around its sections. Nothing is set on body.
Part 2: desktop fixes, 1200px and up, plus the Details text spacing from
1100px (wherever the Details collage is shown).
Part 3: Look Inside capped at 1512px on wide screens.
========================================================================== */
/* ---------- Part 1: page ground ---------- */
.rs-audio-page {
display: flow-root;
background:
radial-gradient(ellipse 55% 42% at 52% 44%, #1293e6 0%, rgba(18, 147, 230, 0) 100%),
#04263b;
/* paint the same dark blue out to both edges of the window when the page column is narrower than the screen */
box-shadow: 0 0 0 100vmax #04263b;
clip-path: inset(0 -100vmax);
}
/* ---------- Part 2: desktop fixes ---------- */
@media (min-width: 1200px) {
/* hero: let the box grow when its text needs more room than the fixed 1512/548 shape gives */
.rs-audio-submit { aspect-ratio: auto; min-height: min(648px, calc(100vw * 648 / 1512)); }
.rs-audio-submit__content { height: auto; padding-bottom: 32px; }
/* Details sat against the left edge on screens wider than 1512px */
.details { margin-left: auto; margin-right: auto; }
/* Look Inside: cards grow to fit instead of squeezing the paragraph (cut lines, bullets over text) */
.look__card--storage { height: auto; min-height: 578em; }
.look__card--ringtone { height: auto; min-height: 447em; }
.look__card--royalties { height: auto; min-height: 368em; }
.look__card--control-a { height: auto; min-height: 363em; }
.look__card--websites { height: auto; min-height: 301em; }
.look__card--money { height: auto; min-height: 362em; }
.look__card--control-b { height: auto; min-height: 352em; }
.look__card--paid { height: auto; min-height: 313em; }
.look__card--traffic { height: auto; min-height: 363em; }
.look__card--monitoring { height: auto; min-height: 303em; padding-bottom: 24em; }
.look__card--deals { height: auto; min-height: 407em; }
.look__card p,
.look__list,
.look__logo,
.look__card .look__more { flex-shrink: 0; }
.look__list { margin-top: -0.6em; font-size: max(18em, 0.875rem); }
.look__list--sm { margin-top: -0.7em; font-size: max(15em, 0.8125rem); }
.look__card .look__more::after { content: ""; position: absolute; inset: -9px; }
.rs-audio-submit__button:focus-visible,
.look__more:focus-visible,
.details__more:focus-visible,
.details__card a:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
}
/* Details collage (1100px and up): one heading-to-text gap and one line spacing for all six cards */
@media (min-width: 1100px) {
.details__card { gap: 24em; }
.details__card p { line-height: 1.5 !important; }
.details__card--upload p { -webkit-line-clamp: 11; line-clamp: 11; }
/* the two-line title was a fixed 70px and touched the first photo on narrower desktops */
.details__canvas .lookText { font-size: min(70px, 82em); }
.details__canvas .insideText { font-size: min(35px, 41em); }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
.rs-audio-submit__button, .look__more-v { transition: none; }
}
/* ---------- Part 3: Look Inside lines up with the hero and Details on wide screens ---------- */
@media (min-width: 1512px) {
.look { max-width: 1512px; }
}
/* ============ end AudioSparx Participation page ground + desktop block ============ */
/* ==========================================================================
SUBMIT MUSIC (alliance.cfm) - MOBILE ONLY [Option B, Cinematic Poster]
Added by Claude, 2026-10-06. Everything below is inside
@media (max-width: 767px) and limited to .submit-music-page, the wrapper
alliance.cfm uses. 768px and up is untouched.
========================================================================== */
/* ---------- Part 1: readable sizes, tap targets, no fixed heights ---------- */
@media (max-width: 767px) {
/* hero */
.submit-music-page .submit-hero-copy {
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.submit-music-page .submit-hero-copy h1 { overflow-wrap: break-word; }
.submit-music-page .submit-desc,
.submit-music-page .submit-desc-text { font-size: 0.9375rem; line-height: 1.5 !important; }
.submit-music-page .submit-show-more {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 4px;
padding: 8px 14px 8px 0;
font-size: 1rem;
text-decoration: underline;
text-underline-offset: 4px;
touch-action: manipulation;
}
/* What Are We Looking For */
.submit-music-page .submit-needs {
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.submit-music-page .submit-intro h2 { overflow-wrap: break-word; }
.submit-music-page .submit-intro p { margin-top: 20px; font-size: 0.9375rem; line-height: 1.55 !important; }
.submit-music-page .submit-needs-grid { gap: 16px; margin-top: 24px; }
.submit-music-page .submit-need-card { height: auto; }
.submit-music-page .submit-need-card > div { height: auto; min-height: 150px; padding: 14px 12px; }
.submit-music-page .submit-need-card h3 { font-size: 1.1875rem; line-height: 1.2 !important; overflow-wrap: break-word; }
.submit-music-page .submit-need-card p { font-size: 0.875rem; line-height: 1.4 !important; }
.submit-music-page .submit-need-card img { height: 100%; }
/* Participation At AudioSparx */
.submit-music-page .participation-hero-content h2 { overflow-wrap: break-word; }
.submit-music-page .participation-hero-content p { width: auto; max-width: 100%; font-size: 0.9375rem; line-height: 1.5 !important; }
.submit-music-page .participation-hero-content { height: auto; }
.submit-music-page .participation-options { height: auto; gap: 8px; }
.submit-music-page .participation-option {
height: auto;
min-height: 48px;
padding: 10px 12px;
font-size: 0.9375rem;
line-height: 1.35 !important;
overflow-wrap: anywhere;
}
.submit-music-page .participation-arrow { flex: none; }
.submit-music-page .participation-note { height: auto; padding: 24px 7px 14px; }
.submit-music-page .participation-note p { height: auto; font-size: 0.9375rem; line-height: 1.6 !important; }
.submit-music-page .participation-actions { height: auto; gap: 12px; }
.submit-music-page .participation-btn {
height: auto;
min-height: 48px;
padding: 12px 20px;
font-size: 1rem;
touch-action: manipulation;
}
.submit-music-page .participation-footer-text { height: auto; font-size: 0.9375rem; line-height: 1.5 !important; }
.submit-music-page .submit-show-more:focus-visible,
.submit-music-page .participation-btn:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
}
@media (max-width: 767px) and (hover: none) {
.submit-music-page .participation-btn:hover,
.submit-music-page .submit-need-card:hover { transform: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.submit-music-page .participation-btn,
.submit-music-page .submit-need-card,
.submit-music-page .submit-need-card img { transition: none; }
}
/* ---------- Part 2: Cinematic Poster layout ---------- */
@media (max-width: 767px) {
/* cards: photo fills the card, text sits over its foot */
.submit-music-page .submit-need-card { display: block; min-height: 0; }
.submit-music-page .submit-need-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: center top;
}
.submit-music-page .submit-need-card > div {
width: auto;
min-height: 240px;
justify-content: flex-end;
padding: 72px 16px 16px;
background: linear-gradient(180deg, rgba(0, 24, 46, 0) 0%, rgba(0, 24, 46, 0.55) 45%, rgba(0, 24, 46, 0.9) 100%);
margin-bottom: 0px;
}
.submit-music-page .submit-need-card h3 { font-size: 1.5rem; }
.submit-music-page .submit-need-card p { font-size: 0.9375rem; }
/* Participation: the singer comes back as the section's poster */
.submit-music-page .participation-hero {
display: flex;
flex-direction: column-reverse;
/* older rules fix this box at 254px, 300px or 420px, or at a 2.55:1 shape. With the photo back in the flow that made the heading spill over the list below */
height: auto;
min-height: 0;
aspect-ratio: auto;
margin: 0 0 8px;
padding: 0;
}
.submit-music-page .participation-hero-image { display: block; position: static; flex: none; width: auto; height: auto; opacity: 1; }
.submit-music-page .participation-hero-image img {
position: static;
width: 100%;
height: auto !important; /* an older rule sets 100% with !important */
max-height: 240px;
margin-top: 8px;
object-fit: contain;
object-position: right bottom;
}
.submit-music-page .participation-hero-content { flex: none; width: auto; min-height: 0; padding-top: 18px; padding-bottom: 14px; }
}
@media (min-width: 600px) and (max-width: 767px) {
.submit-music-page .submit-needs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* ============ end Submit Music (alliance.cfm) mobile block ============ */
/* ==========================================================================
SUBMIT MUSIC (alliance.cfm) - TABLET ONLY, 768px to 1199px
[Tablet option 1, Minimal Fix]
Added by Claude, 2026-10-06. Every rule is inside a min-width: 768px and
max-width: 1199.98px (or narrower) query and limited to .submit-music-page.
Phones and 1200px+ are untouched. No layout is moved.
========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {
/* genre cards: 13px descriptions; "Contemporary" ran past its text column on narrow tablets */
.submit-music-page .submit-need-card h3 { font-size: clamp(19px, 2.5vw, 26px); overflow-wrap: break-word; }
.submit-music-page .submit-need-card p { font-size: 0.9375rem; }
/* Show more: 21px-tall link. Same look, larger tap area */
.submit-music-page .submit-show-more { position: relative; touch-action: manipulation; }
.submit-music-page .submit-show-more::after { content: ""; position: absolute; inset: -12px -10px; }
.submit-music-page .submit-show-more:focus-visible,
.submit-music-page .participation-btn:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
.submit-music-page .participation-option { overflow-wrap: anywhere; }
.submit-music-page .participation-btn { touch-action: manipulation; }
}
/* opt-in rows were 13px below 1024px */
@media (min-width: 768px) and (max-width: 1023.98px) {
.submit-music-page .participation-option { font-size: 0.9375rem; }
}
/* at exactly 768px (iPad portrait) the phone rule made this line 11px */
@media (min-width: 768px) and (max-width: 768.98px) {
.submit-music-page .participation-hero-content p { font-size: 0.9375rem; }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (hover: none) {
.submit-music-page .participation-btn:hover,
.submit-music-page .submit-need-card:hover { transform: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
.submit-music-page .participation-btn,
.submit-music-page .submit-need-card,
.submit-music-page .submit-need-card img { transition: none; }
}
/* Show more had nothing to open between 769 and 1023px (the paragraph is shown in full there) */
@media (min-width: 769px) and (max-width: 1023.98px) {
.submit-music-page .submit-show-more { display: none; }
}
/* ============ end Submit Music (alliance.cfm) tablet block ============ */
/* ==========================================================================
SUBMIT MUSIC (alliance.cfm) - DESKTOP, 1200px and up
[Desktop option 3, Held at 1512]
Added by Claude, 2026-10-06. Every rule is inside a min-width: 1200px
(or wider) query and limited to .submit-music-page. Phones and tablets
are untouched.
Part 1: small fixes from 1200px.
Part 2: wider than 1512px the page keeps its 1512px composition, centred.
========================================================================== */
/* ---------- Part 1: fixes ---------- */
@media (min-width: 1200px) {
/* Show more: 21px-tall link. Same look, larger click and tap area */
.submit-music-page .submit-show-more { position: relative; }
.submit-music-page .submit-show-more::after { content: ""; position: absolute; inset: -12px -10px; }
.submit-music-page .submit-show-more:focus-visible,
.submit-music-page .participation-btn:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
}
/* "Contemporary Brit Pop" ran past its text column on the narrowest desktop windows */
@media (min-width: 1200px) and (max-width: 1399.98px) {
.submit-music-page .submit-need-card h3 { font-size: min(24px, 1.72vw); }
}
@media (min-width: 1500px) and (max-width: 1579.98px) {
.submit-music-page .submit-need-card h3 { font-size: min(28px, 1.78vw); }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
.submit-music-page .participation-btn,
.submit-music-page .submit-need-card,
.submit-music-page .submit-need-card img { transition: none; }
}
/* ---------- Part 2: held at 1512px ---------- */
/* wider than 1512px: keep the 1512px composition, centred. Section backgrounds still run edge to edge */
@media (min-width: 1513px) {
.submit-music-page .submit-hero-art { left: calc(50% - 659px); }
.submit-music-page .submit-hero-copy { right: calc(50% - 683px); width: 729px; }
.submit-music-page .submit-hero-copy h1 { font-size: 72.576px; line-height: 1; }
.submit-music-page .submit-desc,
.submit-music-page .submit-desc-text { font-size: 17.539px; }
.submit-music-page .submit-needs { padding-left: max(32px, calc((100% - 1448px) / 2)); padding-right: max(32px, calc((100% - 1448px) / 2)); }
.submit-music-page .submit-intro h2 { font-size: 36.288px; }
.submit-music-page .submit-intro p { font-size: 20.563px; }
.submit-music-page .submit-need-card h3 { font-size: 26.9px; }
.submit-music-page .participation-container { max-width: 1480px; }
}
/* ============ end Submit Music (alliance.cfm) desktop block ============ */
/* ==========================================================================
SUBMIT MUSIC (alliance.cfm) - VENDOR PARTICIPATION OPTIONS (all widths)
Added by Claude, 2026-10-06. The two-option section that replaces
"Participation At AudioSparx" on the RadioSparx site, plus the closing
"Welcome" band. Every rule is limited to .submit-music-page and to the new
.vendor-* classes, so no other page or section is affected.
Sizes follow the 1920px design, scaled to the page's 1512px column.
========================================================================== */
/* ---------- section ground and panel ---------- */
.submit-music-page .vendor-options {
position: relative;
padding: clamp(12px, 2.6vw, 39px) clamp(8px, 2.34vw, 36px);
background:
linear-gradient(180deg, rgba(0, 58, 91, 0.64) 0%, rgba(0, 138, 188, 0.64) 100%),
#00466e url("../images/bg-audiosparx-radiosparx.png") center / cover no-repeat;
color: #fff;
font-family: "Roboto", "roboto", sans-serif;
}
.submit-music-page .vendor-options *,
.submit-music-page .vendor-welcome * { box-sizing: border-box; }
.submit-music-page .vendor-options__panel {
display: flex;
flex-direction: column;
gap: clamp(36px, 3.33vw, 50px);
max-width: 1440px;
margin: 0 auto;
padding: clamp(24px, 3.33vw, 50px) clamp(14px, 2.19vw, 33px);
border: 1px solid rgba(50, 190, 240, 0.38);
border-radius: clamp(12px, 1.25vw, 19px);
background: rgba(0, 153, 255, 0.1);
}
/* ---------- heading and intro note ---------- */
.submit-music-page .vendor-options__head h2 {
margin: 0;
padding: 0 0 clamp(14px, 1.35vw, 20px);
border-bottom: 3px solid rgba(20, 169, 255, 0.44);
color: #fff;
font-family: inherit;
font-size: clamp(1.75rem, 3.23vw, 48.8px);
font-weight: 600;
line-height: 1.18 !important;
text-transform: capitalize;
overflow-wrap: break-word;
}
.submit-music-page .vendor-options__head p {
margin: clamp(20px, 2.81vw, 42px) 0 0;
color: #fff;
font-family: inherit;
font-size: clamp(1rem, 1.25vw, 18.9px);
font-weight: 500;
line-height: 1.4 !important;
text-transform: capitalize;
}
/* ---------- one option ---------- */
.submit-music-page .vendor-option { display: flex; flex-direction: column; min-width: 0; }
.submit-music-page .vendor-option__row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 43.75%) minmax(0, 1fr);
align-items: center;
}
/* poster: gradient block, cut-out photo, title */
.submit-music-page .vendor-option__poster {
position: relative;
aspect-ratio: 763 / 535;
display: flex;
align-items: center;
background: linear-gradient(270deg, #0081c7 0%, #003f61 100%);
}
.submit-music-page .vendor-option__poster img {
position: absolute;
bottom: 0;
left: 42.8%;
width: 106.2%;
max-width: none;
height: auto;
pointer-events: none;
}
.submit-music-page .vendor-option__poster h3 {
position: relative;
z-index: 1;
margin: 0;
width: 103%;
flex: none;
padding: 0 0 0 12.4%;
color: #fff;
font-family: inherit;
font-size: clamp(1.75rem, 3.75vw, 56.7px);
font-weight: 300;
line-height: 1.11 !important;
text-transform: capitalize;
text-shadow: 0 2px 14px rgba(0, 30, 50, 0.45);
}
.submit-music-page .vendor-option__poster h3 > * { display: block; }
.submit-music-page .vendor-option__poster h3 strong { font-weight: 600; }
.submit-music-page .vendor-option__poster h3 em { font-style: italic; font-weight: 300; }
/* text column */
.submit-music-page .vendor-option__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: clamp(20px, 2.4vw, 36px);
min-width: 0;
}
.submit-music-page .vendor-option__copy {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 59.8%;
min-width: 0;
}
.submit-music-page .vendor-option__text,
.submit-music-page .vendor-option__text p {
margin: 0;
color: #fff;
font-family: inherit;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.3 !important;
text-align: right;
text-transform: capitalize;
}
.submit-music-page .vendor-option__text p + p { margin-top: 1.46em; }
.submit-music-page .vendor-option__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 9;
line-clamp: 9;
overflow: hidden;
}
.submit-music-page .vendor-option__copy.is-open .vendor-option__text {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
.submit-music-page .vendor-option__more {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: 2px 0 -8px;
padding: 8px 0;
border: 0;
background: none;
color: #fff;
font: inherit;
font-size: clamp(0.9375rem, 1.15vw, 17px);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
touch-action: manipulation;
}
.submit-music-page .vendor-option__more[hidden] { display: none; }
/* the two site links */
.submit-music-page .vendor-option__sites {
display: none !important;
justify-content: flex-end;
gap: clamp(12px, 1.67vw, 25px);
width: 79.6%;
}
.submit-music-page .vendor-option__sites a {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: clamp(48px, 4.48vw, 68px);
padding: 10px 14px;
border: 2px solid rgba(197, 232, 255, 0.34);
border-radius: clamp(8px, 0.63vw, 10px);
background: rgba(4, 127, 249, 0.08);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
color: #fff;
font-family: inherit;
font-size: clamp(0.9375rem, 1.25vw, 18.9px);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
}
/* option 2: mirror image of option 1 */
.submit-music-page .vendor-option--rs .vendor-option__row { grid-template-columns: minmax(0, 1fr) minmax(0, 47.8%); }
.submit-music-page .vendor-option--rs .vendor-option__poster {
order: 2;
aspect-ratio: 747 / 535;
justify-content: flex-end;
background: linear-gradient(270deg, #003f61 0%, #0081c7 100%);
}
.submit-music-page .vendor-option--rs .vendor-option__poster img { left: -24.3%; width: 75.3%; }
.submit-music-page .vendor-option--rs .vendor-option__poster h3 { width: 100%; padding: 0 10% 0 7.3%; text-align: right; }
.submit-music-page .vendor-option--rs .vendor-option__body { align-items: flex-start; }
.submit-music-page .vendor-option--rs .vendor-option__copy { align-items: flex-start; width: 80%; }
.submit-music-page .vendor-option--rs .vendor-option__text,
.submit-music-page .vendor-option--rs .vendor-option__text p { text-align: left; }
.submit-music-page .vendor-option--rs .vendor-option__text { -webkit-line-clamp: 14; line-clamp: 12; }
/* ---------- buttons and notes ---------- */
.submit-music-page .vendor-option__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(12px, 1.25vw, 19px);
margin-top: 30px;
}
.submit-music-page .vendor-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(260px, 23.33vw, 353px);
max-width: 100%;
min-height: clamp(50px, 4.17vw, 63px);
padding: 10px 20px;
border: 2px solid transparent;
border-radius: 2px;
font-family: "Roboto", "roboto", sans-serif;
font-size: clamp(1rem, 1.354vw, 20.5px);
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none;
text-transform: capitalize;
touch-action: manipulation;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.submit-music-page .vendor-btn--outline {
border-color: rgba(54, 180, 255, 0.64);
background: rgba(27, 186, 255, 0.12);
-webkit-backdrop-filter: blur(11px);
backdrop-filter: blur(11px);
color: #fff;
}
.submit-music-page .vendor-btn--light { background: #fff; color: #015999; }
.submit-music-page .vendor-option__note {
margin: clamp(16px, 1.46vw, 22px) 0 0;
color: #fff;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5 !important;
text-align: center;
text-transform: capitalize;
margin-bottom: 20px;
}
@media (hover: hover) {
.submit-music-page .vendor-btn--outline:hover { border-color: rgba(139, 225, 255, 1); background: rgba(27, 186, 255, 0.22); color: #fff; }
.submit-music-page .vendor-btn--light:hover { background: #e6f4ff; color: #015999; }
.submit-music-page .vendor-option__sites a:hover { border-color: rgba(197, 232, 255, 0.7); color: #fff; }
}
.submit-music-page .vendor-btn:active { transform: scale(0.98); }
.submit-music-page .vendor-btn:focus-visible,
.submit-music-page .vendor-option__sites a:focus-visible,
.submit-music-page .vendor-option__more:focus-visible {
outline: 3px solid #8fe6ff;
outline-offset: 3px;
}
/* ---------- closing band ---------- */
.submit-music-page .vendor-welcome {
padding: clamp(28px, 2.19vw, 33px) clamp(16px, 3.33vw, 50px);
background: linear-gradient(90deg, #003859 0%, #008cbf 100%);
color: #fff;
font-family: "Roboto", "roboto", sans-serif;
}
.submit-music-page .vendor-welcome__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(18px, 1.46vw, 22px);
max-width: 1412px;
margin: 0 auto;
}
.submit-music-page .vendor-welcome h2 {
margin: 0;
padding: clamp(8px, 0.94vw, 14px) 0;
color: #fff;
font-family: inherit;
font-size: clamp(1.375rem, 2.19vw, 33px);
font-weight: 600;
line-height: 1.2 !important;
text-align: center;
text-transform: capitalize;
text-wrap: balance;
}
.submit-music-page .vendor-btn--welcome { width: clamp(240px, 20.83vw, 315px); color: #003859; font-weight: 500; }
.submit-music-page .vendor-welcome__note {
width: 100%;
max-width: 1314px;
margin: 0;
padding: clamp(14px, 1.15vw, 17px) clamp(14px, 1.25vw, 19px);
padding-top: 5px;
border-radius: 10px;
color: #fff;
font-family: inherit;
font-size: clamp(0.875rem, 1.04vw, 1rem);
font-weight: 400;
line-height: 1.45 !important;
text-align: center;
text-transform: capitalize;
}
/* ---------- tablets and narrow windows: poster above its text ---------- */
@media (max-width: 991.98px) {
.submit-music-page .vendor-option__row,
.submit-music-page .vendor-option--rs .vendor-option__row { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.submit-music-page .vendor-option__poster,
.submit-music-page .vendor-option--rs .vendor-option__poster { order: 0; aspect-ratio: auto; min-height: clamp(220px, 40vw, 360px); overflow: hidden; }
.submit-music-page .vendor-option__poster img { left: auto; right: -2%; width: auto; height: 94%; }
.submit-music-page .vendor-option--rs .vendor-option__poster img { left: -1%; right: auto; width: auto; height: 94%; }
.submit-music-page .vendor-option__poster h3 { width: 62%; padding: 20px 0 20px clamp(16px, 5vw, 44px); font-size: clamp(1.625rem, 5.6vw, 3rem); }
.submit-music-page .vendor-option--rs .vendor-option__poster h3 { width: 62%; padding: 20px clamp(16px, 5vw, 44px) 20px 0; }
.submit-music-page .vendor-option__body,
.submit-music-page .vendor-option--rs .vendor-option__body { align-items: stretch; gap: 20px; }
.submit-music-page .vendor-option__copy,
.submit-music-page .vendor-option--rs .vendor-option__copy { align-items: flex-start; width: auto; }
.submit-music-page .vendor-option__text,
.submit-music-page .vendor-option__text p { font-size: 1.0625rem; line-height: 1.55 !important; text-align: left; }
.submit-music-page .vendor-option__text,
.submit-music-page .vendor-option--rs .vendor-option__text { -webkit-line-clamp: 7; line-clamp: 7; }
.submit-music-page .vendor-option__sites { justify-content: flex-start; width: auto; }
.submit-music-page .vendor-option__actions { margin-top: 28px; }
.submit-music-page .vendor-btn { width: min(100%, 340px); }
}
/* ---------- phones ---------- */
@media (max-width: 599.98px) {
.submit-music-page .vendor-options { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
.submit-music-page .vendor-option__poster,
.submit-music-page .vendor-option--rs .vendor-option__poster { min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.submit-music-page .vendor-option__poster img,
.submit-music-page .vendor-option--rs .vendor-option__poster img {
position: static;
order: 2;
align-self: flex-end;
width: 88%;
height: auto;
margin-top: -6%;
}
.submit-music-page .vendor-option--rs .vendor-option__poster img { align-self: flex-start; width: 74%; }
.submit-music-page .vendor-option__poster h3,
.submit-music-page .vendor-option--rs .vendor-option__poster h3 { width: auto; padding: 22px 18px 0; font-size: clamp(1.625rem, 8.4vw, 2.25rem); }
.submit-music-page .vendor-option__text,
.submit-music-page .vendor-option__text p { font-size: 1rem; }
.submit-music-page .vendor-option__sites { flex-direction: column; }
.submit-music-page .vendor-option__sites a { flex: none; min-height: 48px; }
.submit-music-page .vendor-option__actions { flex-direction: column; align-items: stretch; }
.submit-music-page .vendor-btn,
.submit-music-page .vendor-btn--welcome { width: 100%; min-height: 50px; }
.submit-music-page .vendor-welcome { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
.submit-music-page .vendor-btn { transition: none; }
.submit-music-page .vendor-btn:active { transform: none; }
}
/* ============ end Vendor Participation Options block ============ */
/* =====================================================================
RADIOSPARX MUSIC BLOG : SECTIONS (hero + Filter By Genres / blogs)
Every rule is scoped to .radio-blog* classes, no body/html/global tags,
so this block can be appended to the shared stylesheet safely.
Fonts used: Antonio (400, 600) and Roboto (400, 500, 600).
Design reference: 1512px frame.
===================================================================== */
.radio-blog,
.radio-blog *,
.radio-blog *::before,
.radio-blog *::after {
box-sizing: border-box;
}
.radio-blog {
width: 100%;
overflow-x: hidden;
font-family: 'Roboto', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.radio-blog h1,
.radio-blog h2,
.radio-blog h3,
.radio-blog p,
.radio-blog ul {
margin: 0;
padding: 0;
}
.radio-blog ul {
list-style: none;
}
.radio-blog a,
.radio-blog a:hover,
.radio-blog a:focus {
text-decoration: none;
}
.radio-blog__sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.radio-blog .radio-blog-icon-fill {
fill: #005695;
}
/* ---------------------------------------------------------------------
SECTION 1 : MUSIC BLOG HERO
--------------------------------------------------------------------- */
.radio-blog-hero {
position: relative;
height: 500px;
overflow: hidden;
background: linear-gradient(90deg, #065f9e 0%, #02365b 100%);
}
.radio-blog-hero__inner {
position: relative;
z-index: 2;
max-width: 1512px;
height: 100%;
margin: 0 auto;
padding: 94px 0 0 104px;
}
.radio-blog-hero__content {
width: min(652px, calc(50vw - 20px));
max-width: 100%;
}
.radio-blog-hero__title {
font-family: 'Antonio', sans-serif;
font-size: 120px;
font-weight: 500;
line-height: 1 !important;
letter-spacing: -5px;
color: #ffffff;
text-transform: none;
}
.radio-blog-hero__lead {
margin-top: 32px !important;
font-size: 24px;
font-weight: 400;
line-height: 1.3 !important;
letter-spacing: -0.15px;
color: #ffffff;
}
.radio-blog-hero__text {
margin-top: 7px !important;
font-size: 24px;
font-weight: 400;
line-height: 31.5px;
letter-spacing: -0.15px;
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.radio-blog-hero__buttons {
display: flex;
gap: 34px;
margin-top: 32px;
}
.radio-blog-hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 55px;
border-radius: 8px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.radio-blog-hero__btn--glass {
color: #ffffff !important;
background: linear-gradient(90deg, #006aa8 0%, #04558a 100%);
border: 1px solid rgba(127, 211, 255, 0.6);
}
.radio-blog-hero__btn--glass:hover,
.radio-blog-hero__btn--glass:focus-visible {
color: #ffffff;
background: linear-gradient(90deg, #0279c0 0%, #05609c 100%);
}
.radio-blog-hero__btn--white {
color: #003c5b !important;
background: #ffffff;
border: 1px solid #ffffff;
}
.radio-blog-hero__btn--white:hover,
.radio-blog-hero__btn--white:focus-visible {
color: #003c5b;
background: #e6f6ff;
}
.radio-blog-hero__img {
position: absolute;
z-index: 1;
right: min(0px, calc(50% - 756px));
bottom: 0;
height: 100%;
width: auto;
max-width: none;
display: block;
pointer-events: none;
}
/* ---------------------------------------------------------------------
SECTION 2 : FILTER BY GENRES + BLOG CARDS
--------------------------------------------------------------------- */
.radio-blog-list {
background: #013e68;
}
.radio-blog-list__inner {
max-width: 1512px;
margin: 0 auto;
padding: 67px 64.5px 42px 64.5px;
}
.radio-blog-list__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 0 10.5px 0 15.5px;
margin-bottom: 30px;
}
.radio-blog-list__title {
font-family: 'Antonio', 'Arial Narrow', sans-serif;
font-size: 58px;
font-weight: 600;
line-height: 58px;
letter-spacing: -1px;
color: #ffffff;
}
.radio-blog-list__filter {
position: relative;
flex: 0 0 318px;
width: 318px;
margin-top: 6px;
}
.radio-blog-list__select {
display: block;
width: 100%;
height: 44px;
margin: 0;
padding: 0 44px 3px 17px;
border: 1.5px solid #2bc2f3;
border-radius: 8px;
background: #fbfeff;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.25px;
color: #15374b;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: none;
}
.radio-blog-list__select:focus-visible {
box-shadow: 0 0 0 3px rgba(43, 194, 243, 0.45);
}
.radio-blog-list__chevron {
position: absolute;
top: 50%;
right: 20px;
width: 13.78px;
height: 8.9px;
margin-top: -4.45px;
fill: #1d3d50;
pointer-events: none;
}
/* ----- Card ----- */
.radio-blog-card {
display: flex;
align-items: flex-start;
justify-content: space-between;
min-height: 545px;
padding: 42.5px 30px 42.8px 80px;
border-radius: 32px;
background: linear-gradient(90deg, #002e52 0%, #00bbff 100%);
box-shadow: 1px 2px 4px rgba(150, 190, 215, 0.22);
}
.radio-blog-card + .radio-blog-card {
margin-top: 25px;
}
.radio-blog-card--reverse {
flex-direction: row-reverse;
padding: 42.5px 74px 42.8px 80px;
background: linear-gradient(270deg, #002e52 0%, #00bbff 100%);
}
.radio-blog-card__body {
flex: 0 1 696px;
min-width: 0;
margin-right: 40px;
padding-top: 20px;
}
.radio-blog-card--reverse .radio-blog-card__body {
margin-right: 0;
margin-left: 40px;
}
.radio-blog-card__title {
font-family: 'Antonio', 'Arial Narrow', sans-serif;
font-size: 40px;
font-weight: 400;
line-height: 51px;
letter-spacing: 0.5px;
color: #ffffff;
overflow-wrap: anywhere;
}
.radio-blog-card__text {
margin-top: 30.5px !important;
font-size: 18px;
font-weight: 400;
line-height: 25.3px;
letter-spacing: 0.45px;
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
.radio-blog-card__date {
margin-top: 19px !important;
font-size: 16px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.25px;
color: #ffffff;
}
.radio-blog-card__links {
display: flex;
align-items: center;
gap: 24px;
margin-top: 139.5px !important;
}
.radio-blog-card__link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #ffffff;
border-radius: 6px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.radio-blog-card__link:hover,
.radio-blog-card__link:focus-visible {
color: #ffffff;
opacity: 0.8;
}
.radio-blog-card__icon {
display: block;
flex: none;
fill: currentColor;
}
.radio-blog-card__icon--disc { width: 35.18px; height: 33.06px; }
.radio-blog-card__icon--artist { width: 33.06px; height: 27.98px; }
.radio-blog-card__icon--playlist { width: 32px; height: 25.01px; }
.radio-blog-card__icon--library { width: 32.85px; height: 33.06px; }
.radio-blog-card__more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 240px;
height: 52px;
margin-top: 0px;
padding-left: 2px;
border-radius: 6px;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0, 20, 40, 0.18);
font-family: 'Roboto', Arial, sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1;
color: #00305c;
transition: background-color 0.2s ease;
}
.radio-blog-card__more:hover,
.radio-blog-card__more:focus-visible {
color: #00305c;
background: #e6f6ff;
}
.radio-blog-card__more-icon {
width: 18.23px;
height: 18.02px;
fill: currentColor;
flex: none;
}
/* ----- Card media (photo + actions) ----- */
.radio-blog-card__media {
flex: 0 0 570px;
width: 700px;
height: 460px;
padding: 0 7px 0 12px;
border-radius: 32px;
background: rgba(0, 143, 255, 0.13);
}
.radio-blog-card--reverse .radio-blog-card__media {
padding: 0 12px 0 6.5px;
}
.radio-blog-card__img {
display: block;
width: 700px;
max-width: 100%;
height: 398px;
object-fit: cover;
border-radius: 28px 28px 22px 22px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
}
.radio-blog-card__actions {
display: flex;
align-items: center;
height: 44px;
margin-top: 18.5px;
padding-left: 55px;
}
.radio-blog-card--reverse .radio-blog-card__actions {
padding-left: 56px;
}
.radio-blog-card__likes {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 56.5px;
font-size: 20px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.5px;
color: #ffffff;
white-space: nowrap;
}
.radio-blog-card--reverse .radio-blog-card__likes {
order: 2;
margin-right: 0;
margin-left: 60px;
}
.radio-blog-card__heart {
width: 25.22px;
height: 22.25px;
fill: currentColor;
flex: none;
}
.radio-blog-card__round {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
color: #ffffff;
cursor: pointer;
transition: filter 0.2s ease, transform 0.2s ease;
}
.radio-blog-card__round + .radio-blog-card__round {
margin-left: 19px;
}
.radio-blog-card__round:hover,
.radio-blog-card__round:focus-visible {
filter: brightness(1.12);
}
.radio-blog-card__round svg {
display: block;
fill: currentColor;
}
.radio-blog-card__round--play svg { width: 14.62px; height: 19.71px; margin-left: 3px; }
.radio-blog-card__round--share svg { width: 16.11px; height: 17.8px; }
.radio-blog-card__round--edit svg { width: 20.98px; height: 20.98px; }
.radio-blog-hero__btn:focus-visible,
.radio-blog-card__link:focus-visible,
.radio-blog-card__more:focus-visible,
.radio-blog-card__round:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* ---------------------------------------------------------------------
RESPONSIVE
1512px and up : the 1512 composition stays centred, backgrounds and the
hero photo run to the screen edges.
1200 - 1511 : same layout, hero photo slides right, text column narrows.
Below 1200 : tablet and mobile fallbacks.
--------------------------------------------------------------------- */
/* ----- Tablet landscape / small laptop : 1024 - 1199 ----- */
@media (max-width: 1199px) {
.radio-blog-hero {
height: 600px;
}
.radio-blog-hero__inner {
padding: 112px 0 0 56px;
}
.radio-blog-hero__content {
width: min(560px, calc(52vw - 40px));
}
.radio-blog-hero__title {
font-size: 120px;
line-height: 120px;
letter-spacing: -4px;
}
.radio-blog-hero__lead {
margin-top: 52px !important;
font-size: 22px;
line-height: 29px;
}
.radio-blog-hero__text {
font-size: 22px;
line-height: 29px;
}
.radio-blog-hero__buttons {
margin-top: 44px;
gap: 24px;
}
.radio-blog-hero__btn {
width: 200px;
height: 52px;
font-size: 19px;
}
.radio-blog-hero__img {
right: -80px;
}
.radio-blog-list__inner {
padding: 56px 32px 40px;
}
.radio-blog-list__head {
align-items: center;
padding: 0 8px;
margin-bottom: 48px;
}
.radio-blog-list__filter {
margin-top: 0;
}
.radio-blog-card,
.radio-blog-card--reverse {
padding: 40px;
}
.radio-blog-card__body {
flex: 1 1 auto;
margin-right: 32px;
padding-top: 24px;
}
.radio-blog-card--reverse .radio-blog-card__body {
margin-left: 32px;
margin-top: 30px;
}
.radio-blog-card__title {
font-size: 46px;
line-height: 50px;
}
.radio-blog-card__links {
gap: 28px;
}
}
/* ----- Tablet portrait : 768 - 1023 ----- */
@media (max-width: 1023px) {
.radio-blog-hero {
height: auto;
}
.radio-blog-hero__inner {
height: auto;
padding: 72px 40px 0;
}
.radio-blog-hero__content {
width: 100%;
max-width: 640px;
}
.radio-blog-hero__title {
font-size: 104px;
line-height: 104px;
letter-spacing: -3.5px;
}
.radio-blog-hero__text {
-webkit-line-clamp: 4;
line-clamp: 4;
}
.radio-blog-hero__img {
position: relative;
right: auto;
bottom: auto;
height: auto;
width: min(100%, 560px);
margin: 40px 0 0 auto;
}
.radio-blog-card,
.radio-blog-card--reverse {
flex-direction: column-reverse;
align-items: stretch;
padding: 32px;
}
.radio-blog-card__body,
.radio-blog-card--reverse .radio-blog-card__body {
flex: none;
margin: 32px 0 0;
padding-top: 0;
}
.radio-blog-card__media,
.radio-blog-card--reverse .radio-blog-card__media {
flex: none;
width: 100%;
max-width: 560px;
height: auto;
margin: 0 auto;
padding: 12px 12px 14px;
border-radius: 28px;
}
.radio-blog-card__img {
width: 100%;
height: auto;
aspect-ratio: 410 / 398;
border-radius: 22px;
}
.radio-blog-card__actions,
.radio-blog-card--reverse .radio-blog-card__actions {
justify-content: center;
margin-top: 16px;
padding-left: 0;
}
.radio-blog-card__likes,
.radio-blog-card--reverse .radio-blog-card__likes {
order: 0;
margin: 0 auto 0 8px;
}
.radio-blog-card__round:last-child {
margin-right: 8px;
}
}
/* ----- Mobile : up to 767 ----- */
@media (max-width: 767px) {
.radio-blog-hero__inner {
padding: 48px 20px 0;
}
.radio-blog-hero__title {
font-size: 76px;
line-height: 78px;
letter-spacing: -2.5px;
}
.radio-blog-hero__lead {
margin-top: 28px !important;
font-size: 19px;
line-height: 26px;
}
.radio-blog-hero__text {
margin-top: 6px !important;
font-size: 17px;
line-height: 25px;
letter-spacing: 0;
}
.radio-blog-hero__buttons {
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
.radio-blog-hero__btn {
flex: 1 1 140px;
width: auto;
height: 50px;
font-size: 17px;
}
.radio-blog-hero__img {
width: min(100%, 420px);
margin-top: 32px;
}
.radio-blog-list__inner {
padding: 40px 16px 32px;
}
.radio-blog-list__head {
flex-direction: column;
align-items: stretch;
gap: 18px;
padding: 0;
margin-bottom: 28px;
}
.radio-blog-list__title {
font-size: 46px;
line-height: 50px;
}
.radio-blog-list__filter {
flex: none;
width: 100%;
}
.radio-blog-card,
.radio-blog-card--reverse {
padding: 14px 14px 26px;
border-radius: 26px;
}
.radio-blog-card + .radio-blog-card {
margin-top: 20px;
}
.radio-blog-card__media,
.radio-blog-card--reverse .radio-blog-card__media {
padding: 8px 8px 12px;
border-radius: 22px;
}
.radio-blog-card__img {
border-radius: 18px;
}
.radio-blog-card__body,
.radio-blog-card--reverse .radio-blog-card__body {
margin-top: 22px;
padding: 0 6px;
}
.radio-blog-card__title {
font-size: 38px;
line-height: 42px;
}
.radio-blog-card__text {
margin-top: 14px !important;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.2px;
}
.radio-blog-card__date {
margin-top: 14px !important;
}
.radio-blog-card__links {
gap: 18px;
margin-top: 18px !important;
}
.radio-blog-card__link {
width: 44px;
height: 44px;
}
.radio-blog-card__more {
width: 100%;
max-width: 280px;
margin-top: 22px;
}
.radio-blog-card__round + .radio-blog-card__round {
margin-left: 12px;
}
.radio-blog-card__likes,
.radio-blog-card--reverse .radio-blog-card__likes {
margin-left: 4px;
font-size: 18px;
}
.radio-blog-card__round:last-child {
margin-right: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.radio-blog-hero__btn,
.radio-blog-card__link,
.radio-blog-card__more,
.radio-blog-card__round {
transition: none;
}
}
@media screen and (width: 1512px) {
.radio-signup-form-panel {
height: 780px;
}.radio-signup-benefits {
margin-top: 5px;
}
}
/* =====================================================================
BLOG PAGER (display_paging.cfm) : RadioSparx Music Blog theme
Hook:
===================================================================== */
.radio_new_paging.pagehopperWrapper,
.radio_new_paging .pagehopperWrapper {
padding: 8px 20px 64px;
background: #013e68;
text-align: center;
font-family: 'Roboto', Arial, sans-serif;
}
.radio_new_paging .text-nowrap {
display: inline-flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 100%;
padding-right: 0 !important;
vertical-align: middle;
}
/* "PAGE 3" label */
.radio_new_paging .lmfont12 {
display: inline-flex !important;
align-items: center;
height: 44px;
margin-right: 8px;
padding: 0 14px 0 20px;
border: 1px solid rgba(43, 194, 243, 0.35);
border-radius: 22px;
background: rgba(0, 143, 255, 0.13);
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.12em;
color: #ffffff;
white-space: nowrap;
}
.radio_new_paging .phDesktopMode {
line-height: 0;
}
/* Page numbers and arrows */
.radio_new_paging .pagehopper,
.radio_new_paging a.pagehopper:link,
.radio_new_paging a.pagehopper:visited {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 44px;
min-width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 1px solid rgba(43, 194, 243, 0.55);
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
color: #ffffff;
text-align: center;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.radio_new_paging a.pagehopper:hover,
.radio_new_paging a.pagehopper:focus-visible {
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
box-shadow: 0 4px 12px rgba(0, 20, 60, 0.35);
color: #ffffff;
text-decoration: none;
}
.radio_new_paging a.pagehopper:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.radio_new_paging .pagehopper:active {
transform: scale(0.94);
}
/* Arrows: glossy round buttons with drawn chevrons (original characters stay in the HTML) */
.radio_new_paging .text-nowrap > a.pagehopper {
position: relative;
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
font-size: 0;
color: #ffffff;
}
.radio_new_paging .text-nowrap > a.pagehopper:hover,
.radio_new_paging .text-nowrap > a.pagehopper:focus-visible {
filter: brightness(1.12);
}
.radio_new_paging .text-nowrap > a.pagehopper::before {
content: "";
display: block;
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* First page and last page arrows get a double chevron */
.radio_new_paging .lmfont12 + a.pagehopper::before,
.radio_new_paging .text-nowrap > a.pagehopper:last-child::before {
width: 24px;
height: 24px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
}
/* Arrows after the page numbers point right (next and last page) */
.radio_new_paging .phDesktopMode ~ a.pagehopper::before {
transform: scaleX(-1);
}
/* Phones (the .cfm already hides the page numbers below 551px) */
@media screen and (max-width: 550px) {
.radio_new_paging.pagehopperWrapper,
.radio_new_paging .pagehopperWrapper {
padding: 4px 16px 44px;
}
.radio_new_paging .text-nowrap {
gap: 8px;
}
.radio_new_paging .lmfont12 {
margin: 0 4px;
padding: 0 14px 0 16px;
}
/* "PAGE n" sits between the back and forward arrows */
.radio_new_paging .lmfont12 + a.pagehopper,
.radio_new_paging .lmfont12 + a.pagehopper + a.pagehopper {
order: -1;
}
}
@media screen and (max-width: 360px) {
.radio_new_paging .text-nowrap {
gap: 6px;
}
.radio_new_paging .pagehopper,
.radio_new_paging a.pagehopper:link,
.radio_new_paging a.pagehopper:visited {
width: 40px;
min-width: 40px;
height: 40px;
}
.radio_new_paging .lmfont12 {
height: 40px;
margin: 0 2px;
padding: 0 10px 0 12px;
font-size: 13px;
letter-spacing: 0.08em;
}
}
@media (prefers-reduced-motion: reduce) {
.radio_new_paging .pagehopper {
transition: none;
}
}
/* =====================================================================
BLOG POST CARD (view.cfm) : Music Blog theme
Builds on the .radio-blog-card rules of the MUSIC BLOG block above.
Every rule here is limited to .radio-view-blog (one blog post), so
nothing else on the site changes.
===================================================================== */
/* Navy behind the list of posts: add class "radio-view-blog-list" to the div that holds them */
.radio-view-blog-list {
background-color: #013e68;
}
.radio-view-blog,
.radio-view-blog *,
.radio-view-blog *::before,
.radio-view-blog *::after {
box-sizing: border-box;
}
.radio-blog-card.radio-view-blog {
width: 100%;
max-width: 1383px;
margin: 0 auto 25px;
font-family: 'Roboto', Arial, sans-serif;
line-height: normal;
text-align: left;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.radio-blog-card.radio-view-blog + .radio-blog-card.radio-view-blog {
margin-top: 0;
}
.radio-view-blog h3,
.radio-view-blog .radio-view-blog__title,
.radio-view-blog .radio-view-blog__date,
.radio-view-blog .radio-view-blog__links,
.radio-view-blog .radio-view-blog__links li {
margin: 0;
padding: 0;
list-style: none;
}
/* ----- Heading: "By author" (design), title underneath ----- */
.radio-view-blog .radio-view-blog__author {
color: #ffffff;
}
.radio-view-blog .radio-view-blog__author--title {
font-size: 40px;
line-height: 1.15;
}
.radio-view-blog .radio-view-blog__title {
margin-top: 16px;
font-size: 17px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.2px;
color: #fff;
overflow-wrap: anywhere;
}
/* ----- Description: 4 lines, then Read more ----- */
.radio-view-blog .radio-view-blog__title + .radio-view-blog__desc {
display: none !important;
margin-top: 18px !important;
}
.radio-view-blog .radio-view-blog__desc {
overflow-wrap: anywhere;
}
.radio-view-blog .radio-view-blog__desc *:not(a) {
color: inherit !important;
background-color: transparent !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
.radio-view-blog .radio-view-blog__desc p {
margin: 0 0 10px;
}
.radio-view-blog .radio-view-blog__desc a,
.radio-view-blog .radio-view-blog__extra a {
color: #7fdcff;
text-decoration: underline;
text-underline-offset: 2px;
}
.radio-view-blog .radio-view-blog__desc a:hover,
.radio-view-blog .radio-view-blog__extra a:hover {
color: #ffffff;
}
.radio-view-blog .radio-view-blog__desc img,
.radio-view-blog .radio-view-blog__extra img {
max-width: 100%;
height: auto;
}
.radio-view-blog .radio-view-blog__desc.is-open,
.radio-view-blog.radio-view-blog--full .radio-view-blog__desc {
display: block;
-webkit-line-clamp: unset;
line-clamp: none;
overflow: visible;
}
.radio-view-blog .radio-view-blog__readmore {
/* display: inline-flex; */
display: none !important;
align-items: center;
gap: 8px;
margin: 10px 0 0;
padding: 4px 0;
border: 0;
background: none;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.3px;
color: #7fdcff;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.radio-view-blog .radio-view-blog__readmore::after {
content: "";
width: 7px;
height: 7px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease, margin 0.2s ease;
}
.radio-view-blog .radio-view-blog__readmore[aria-expanded="true"]::after {
margin-top: 3px;
transform: rotate(-135deg);
}
.radio-view-blog .radio-view-blog__readmore:hover,
.radio-view-blog .radio-view-blog__readmore:focus-visible {
color: #ffffff;
}
/* ----- Icon buttons (track, artist, station, external, similar, video) ----- */
.radio-view-blog .radio-view-blog__links {
flex-wrap: wrap;
row-gap: 16px;
gap: 18px;
}
.radio-view-blog .radio-view-blog__icon {
display: block;
flex: none;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.radio-view-blog .radio-view-blog__icon--track { width: 35.18px; height: 33.06px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 156'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M62.9 4.4C48.1 7.5 35.9 14.1 25 25C-19.2 68.8 6.6 143.1 68.8 150.9C82.4 152.6 105.1 148.3 110.9 142.9C113.9 140.1 113.7 135.5 110.5 133.4C107.6 131.5 105.2 131.8 96.5 135.1C89.1 137.9 72.5 138.9 64.1 137C42.2 132.3 23.6 114.3 18 92.4C12.8 72 18.8 49.5 33.5 34.8C55.9 12.2 89 10 114.8 29.5C122.7 35.4 125.8 36.2 129 33C132.3 29.7 131.5 27 125.2 21.2C118.8 15.2 105.1 8 95.5 5.4C87.1 3.2 71 2.7 62.9 4.4M138.1 32.6L135 35.2 135 62.2L135 89.2 132.8 88.5C131.5 88.1 128.2 87.6 125.4 87.3C105.7 85.3 93.9 108 106.8 123.1C115.9 133.7 131.1 133.7 140.2 123.1C145.6 116.7 146 113.8 146 76.6C146 58.1 146.2 43 146.5 43C146.8 43 149.2 44.4 151.8 46C159 50.4 164 49.4 164 43.6C164 40.8 162.5 39.4 153.4 34.1C145.2 29.3 142.3 29 138.1 32.6M67.4 47.4C54.3 51.6 46.1 63 46 77.1C46 85.8 48.2 91.9 53.6 97.9C68.2 114.1 93.6 111.4 104.5 92.6C113.3 77.4 106.3 55.9 90.1 48.7C84.4 46.2 73.1 45.5 67.4 47.4M69 58.6C61.3 61.9 57 68.7 57 77.5C57 86.6 60.6 92.1 69 95.9C84.3 102.9 100.4 89.4 96.8 72.7C94.3 60.8 80.3 53.7 69 58.6M73.2 73.2C71.4 75 71.8 79.5 74 81.5C78.2 85.3 84.2 80.1 81.6 74.9C80.3 72.2 75.3 71.1 73.2 73.2M32.8 86.1C28.9 88.3 32.9 99.9 40.6 108.8C45.5 114.6 47.5 115.5 50.6 113.5C54.2 111.2 53.7 107.7 49 102.7C46.9 100.3 44 96 42.7 93.2C38.9 85 37 83.6 32.8 86.1M59.9 114.2C55.1 118.1 57.9 122.5 66.3 124.2C71.7 125.3 72.2 125.3 74.2 123.3C76.1 121.4 76.2 120.7 75.2 118.5C73.4 114.5 63.1 111.6 59.9 114.2'/%3E%3C/svg%3E"); }
.radio-view-blog .radio-view-blog__icon--artist { width: 33.06px; height: 27.98px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 132'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M48.3 2.9C18.5 13.2 23.7 57.5 55.1 59.8C73.9 61.1 87.2 48.7 87.1 29.9C87 10.4 67-3.6 48.3 2.9M129 10.1C123.2 12.4 123 13.1 123 42.1L123 68.8 119.2 67.4C104.9 62.3 89.9 73 89.9 88.4C89.9 106.6 110.7 116.8 125.2 105.7C133.5 99.3 133.5 99.3 133.8 58.2L134.1 21.9 140.6 25.6C146.8 29 147.2 29.1 149.5 27.6C154 24.7 152.9 20.6 146.8 16.6C136.4 10 132.7 8.7 129 10.1M51 14.1C41.9 17.7 37.7 29.3 41.9 38.6C48.2 52.5 68.6 51.4 74.5 36.8C80 22.9 65.1 8.5 51 14.1M48.3 65.1C26.7 68.7 8.1 86.7 3.5 108.5C1.3 119.1 1.5 124.3 4.4 127.7L6.8 130.5 57.8 130.5C106.5 130.5 108.9 130.4 110.9 128.6C113.4 126.3 113.6 122.3 111.4 119.2L109.9 117 63.3 117L16.7 117 17.4 112.9C18.5 105.9 23.5 96.4 28.9 91C39.8 80.1 55 76.5 70.4 81C79.3 83.7 82.5 83.2 85 78.7C90 69.7 68.5 61.7 48.3 65.1'/%3E%3C/svg%3E"); }
.radio-view-blog .radio-view-blog__icon--station { width: 32px; height: 25.01px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151 118'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M121.3 8.4L118.5 10.8 118.2 39.9C118 55.9 117.8 69 117.6 69C117.4 69 115.6 68.3 113.7 67.5C101.5 62.4 85.2 70.8 82 83.9C76.5 107.1 104.5 123.8 121.4 107.4C128.7 100.3 128.4 101.9 129 57.8L129.5 18.1 135 21.5C141.3 25.5 144 25.8 146.5 23C149.6 19.5 147.6 16.4 138.7 10.9C129.6 5.2 125.7 4.7 121.3 8.4M4.6 9.1C1.7 11.4 1.3 14.5 3.6 17.8L5.1 20 49.5 20L93.9 20 95.4 17.8C97.6 14.6 97.4 11.7 94.7 9.2C92.4 7 92.1 7 49.8 7C8.3 7 7.2 7 4.6 9.1M4 39C1.4 41.6 1.4 45.4 4 48C5.9 49.9 7.3 50 49.5 50C91.7 50 93.1 49.9 95 48C97.6 45.4 97.6 41.6 95 39C93.1 37.1 91.7 37 49.5 37C7.3 37 5.9 37.1 4 39M3.6 69.2C1.4 72.4 1.6 74.7 4.5 77.5L6.9 80 38.5 80L70.1 80 72.6 77.5C74.6 75.5 75 74.3 74.5 72.2C73.3 67 73.1 67 37.9 67C5.2 67 5.1 67 3.6 69.2M4.6 98.1C1.5 100.5 1.2 103.8 3.9 107.1L5.8 109.5 38.4 109.5C73.8 109.5 73.1 109.6 74.5 103.8C75 101.7 74.6 100.5 72.6 98.5L70.1 96 38.7 96C8.4 96 7.2 96.1 4.6 98.1'/%3E%3C/svg%3E"); }
.radio-view-blog .radio-view-blog__icon--similar { width: 32.85px; height: 33.06px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 155 156'%3E%3Cpath fill='%23005695' fill-rule='evenodd' d='M14.2 31L12 31.9 12 86L12 140.1 14.6 141C16.1 141.6 37.8 142 69.3 142C115 142 121.8 141.8 123.8 140.4L126 138.9 126 86.1C126 38.2 125.8 33.1 124.3 31.9C122.4 30.2 18.2 29.4 14.2 31M74.4 41.8C70.3 45.1 70 47.1 70 69.9L70 91.9 67 90.8C61.4 88.9 51.6 90.2 46.8 93.6C37 100.5 34.1 115 40.7 124.3C51.4 139.6 73.4 137.3 80.5 120.3C81.7 117.4 82 110.6 82 84.9L82 53 88.4 56.2C95.3 59.6 97 59.5 99.5 55.6C102.3 51.4 100.7 49.4 90.9 44.5C81.4 39.7 77.7 39.1 74.4 41.8'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M28.1 4.8C23.5 7.1 20.8 11 20.1 16.2C19.5 20.4 19.4 20.5 15 21C9.6 21.7 7.1 23.2 4.2 27.4C2 30.6 2 30.7 2 85.9C2 147.6 1.7 144.8 9 149.3C12.5 151.5 13 151.5 65.5 151.8C101.6 152 120.1 151.8 123.6 151C130.9 149.4 136 143.5 136 136.4C136 134.4 136.5 134 139.1 134C143.5 134 148.7 131.3 151.3 127.6L153.5 124.5 153.8 70.1C154.1 16.7 154 15.7 152 11.4C150.4 8.3 148.7 6.6 145.6 5.1C141.5 3.1 139.9 3 86.4 3C36.1 3 31.2 3.1 28.1 4.8M30 14.9C29.5 16 29 17.8 29 18.9C29 21 29.2 21 77.4 21L125.7 21 129.1 23.3C136.1 27.9 136 27.2 136 78.8C136 122.4 136.1 125 137.8 125C138.8 125 140.6 124.3 141.8 123.4L144 121.9 144 68.6C144 28.6 143.7 15.1 142.8 14.2C141.9 13.3 128 13 86.3 13C32.7 13 31 13.1 30 14.9M12.6 32.2C11.2 34.2 11 41 11 86.6C11 135.8 11.1 138.8 12.8 140.3C14.5 141.8 19.8 142 68.4 142C103.5 142 122.8 141.6 124.1 141C125.9 140 126 138.3 126 86C126 33.7 125.9 32 124.1 31C122.8 30.4 103.4 30 68.1 30L14.1 30 12.6 32.2M76.4 41C71.3 43.1 71 44.8 71 69.3L71 92.2 68.8 91.5C58.5 88.3 49.4 90.5 43.1 97.6C24.6 118.6 54.6 147.1 74.8 127.7C81.6 121.2 81.5 121.9 81.8 85.8C82 67.7 82.3 53 82.6 53C82.9 53 85.3 54.1 88 55.5C96 59.6 100.5 58.3 99.8 52.3C99.6 50 98.2 48.8 92 45.3C83.8 40.7 79.7 39.5 76.4 41'/%3E%3C/svg%3E"); }
.radio-view-blog .radio-view-blog__icon--external { width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E"); }
.radio-view-blog .radio-view-blog__icon--video { width: 34px; height: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M15 8v8H5V8h10m1-2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4V7c0-.55-.45-1-1-1z'/%3E%3C/svg%3E"); }
.radio-view-blog .radio-view-blog__sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ----- "View more" (readmore field) ----- */
.radio-view-blog .radio-view-blog__viewmore-wrap {
margin-top: 22px;
}
.radio-view-blog a.radio-view-blog__viewmore {
font-size: 16px;
font-weight: 500;
color: #7fdcff;
text-decoration: underline;
text-underline-offset: 3px;
}
.radio-view-blog a.radio-view-blog__viewmore:hover {
color: #ffffff;
}
.radio-view-blog .radio-view-blog__extra {
font-size: 17px;
line-height: 1.6;
color: #ffffff;
overflow-wrap: anywhere;
}
.radio-view-blog .radio-view-blog__extra *:not(a) {
color: inherit !important;
background-color: transparent !important;
}
/* ----- Learn More (the old "see full article" arrow, now the whole button) ----- */
.radio-view-blog .radio-view-blog__more {
position: relative;
cursor: pointer;
user-select: none;
}
.radio-view-blog .radio-view-blog__more-arrow {
display: block;
flex: none;
width: 18.23px;
height: 18.02px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 85'%3E%3Cpath fill='%2300305c' fill-rule='evenodd' d='M41.8 6.1C37.5 8.5 39.5 12 52.7 25.2L65.5 38 37.2 38C7.5 38 5 38.3 5 42.3C5 46.9 5.7 47 36.4 47L65.5 47 52.7 59.8C39.8 72.7 38 75.6 41.2 78.8C44 81.6 46.7 79.7 63.7 62.8C77.2 49.4 81 45 81 43C81 41 77.1 36.5 63.2 22.7C53.4 13 45 5 44.4 5C43.9 5 42.7 5.5 41.8 6.1'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 0.2s ease;
}
.radio-view-blog .radio-view-blog__more:hover .radio-view-blog__more-arrow {
transform: translateX(3px);
}
.radio-view-blog .radio-view-blog__more:hover {
background: #e6f6ff;
}
.radio-view-blog .radio-view-blog__more:focus-within {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.radio-view-blog .radio-view-blog__hit {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
border-radius: inherit;
opacity: 0;
}
.radio-view-blog .radio-view-blog__hit a,
.radio-view-blog .radio-view-blog__hit img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
/* ----- Photo column ----- */
.radio-view-blog .radio-view-blog__media {
height: auto;
}
.radio-view-blog .radio-view-blog__img {
background-color: rgba(0, 30, 60, 0.35);
}
.radio-view-blog .radio-view-blog__actions {
gap: 19px;
padding-left: 0;
}
.radio-view-blog .radio-view-blog__actions > * {
margin: 0;
}
/* No photo: the buttons sit at the bottom of the text side */
.radio-view-blog.radio-view-blog--noimg .radio-view-blog__media {
flex: 0 0 auto;
width: auto;
align-self: flex-end;
padding: 0;
background: transparent;
}
.radio-view-blog.radio-view-blog--noimg .radio-view-blog__actions {
margin-top: 0;
}
/* Play (lspeakerplay26 / lspeakerstop26 link from the player module) */
.radio-view-blog .radio-view-blog__play {
position: relative;
}
.radio-view-blog .radio-view-blog__play > a {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
}
.radio-view-blog .radio-view-blog__play > a img {
filter: brightness(0) invert(1);
}
.radio-view-blog .radio-view-blog__play a.lspeakerplay26,
.radio-view-blog .radio-view-blog__play a.lspeakerplay26:hover {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 93'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.2 6.6L5 8.1 5 46.1C5 70.4 5.4 84.8 6 86.1C8.4 90.4 11.6 88.6 38 68.7C52.1 58.1 63.7 48.7 63.8 47.7C64 46.7 63.4 45 62.4 43.9C60 41.3 11.5 5 10.4 5C9.9 5 8.4 5.7 7.2 6.6'/%3E%3C/svg%3E") 56% 50% / 14.62px 19.71px no-repeat;
}
.lspeakerplay {
display: inline-block;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 93'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.2 6.6L5 8.1 5 46.1C5 70.4 5.4 84.8 6 86.1C8.4 90.4 11.6 88.6 38 68.7C52.1 58.1 63.7 48.7 63.8 47.7C64 46.7 63.4 45 62.4 43.9C60 41.3 11.5 5 10.4 5C9.9 5 8.4 5.7 7.2 6.6'/%3E%3C/svg%3E") 56% 50% / 14.62px 19.71px no-repeat !important;
width: 44px;
height: 44px;
cursor: pointer;
}
.radio-view-blog .radio-view-blog__play a.lspeakerstop26,
.radio-view-blog .radio-view-blog__play a.lspeakerstop26:hover {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23fff' x='5' y='5' width='14' height='14' rx='2.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
/* Share: round button that opens the share popup (bar.cfm with layout="radio") */
.radio-view-blog .radio-view-blog__share {
position: relative;
display: inline-flex;
}
.radio-view-blog .radio-view-blog__share-btn::before {
content: "";
width: 16.11px;
height: 17.8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 84'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M54.4 6.9C51.4 8.7 49 13.3 49 17.1C49 18.4 45.2 21.2 36.3 26.4C24.1 33.6 23.5 33.8 20.9 32.4C16.1 30 12.2 30.6 8.4 34.4C-0.5 43.3 9.6 57.3 20.8 51.6C23.4 50.3 24.1 50.6 36.7 57.9C49.3 65.1 50 65.7 50 68.7C50 72.6 54 77.6 57.9 78.5C64 79.8 71 74.2 71 68C71 60 60.4 54.4 54.3 59.2C52.9 60.3 52.3 60 37.8 51.3C28 45.5 27 44.6 27 42C27 39.3 28.1 38.4 39.7 31.6C51.9 24.4 52.5 24.2 55.1 25.6C59.9 28 63.8 27.4 67.6 23.6C76.9 14.3 65.6 0.1 54.4 6.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-view-blog .radio-view-blog__share.is-open .radio-view-blog__share-btn {
box-shadow: 0 0 0 3px rgba(127, 220, 255, 0.45);
}
.radio-view-blog .radio-view-blog__share-panel {
position: absolute;
left: 50%;
bottom: calc(100% + 16px);
z-index: 30;
width: max-content;
max-width: min(360px, calc(100vw - 32px));
padding: 16px 18px 18px;
border: 1px solid rgba(127, 220, 255, 0.35);
border-radius: 20px;
background: linear-gradient(160deg, #0b5288 0%, #063a62 55%, #04263b 100%);
box-shadow: 0 20px 44px rgba(0, 10, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
color: #ffffff;
text-align: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 8px) scale(0);
transform-origin: 50% 100%;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* little pointer under the popup */
.radio-view-blog .radio-view-blog__share-panel::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 14px;
height: 14px;
margin-left: -7px;
border-right: 1px solid rgba(127, 220, 255, 0.35);
border-bottom: 1px solid rgba(127, 220, 255, 0.35);
background: #04283f;
transform: rotate(45deg);
}
/* invisible bridge so the popup stays open while the mouse moves up to it */
.radio-view-blog .radio-view-blog__share-panel::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -18px;
height: 18px;
}
.radio-view-blog .radio-view-blog__share.is-open .radio-view-blog__share-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
@media (hover: hover) {
.radio-view-blog .radio-view-blog__share:hover .radio-view-blog__share-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
}
/* Popup content */
.radio-view-blog .radio-share {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.radio-view-blog .radio-share__label {
margin: 0;
padding: 0;
font-family: 'Antonio', 'Arial Narrow', sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
}
.radio-view-blog .radio-share__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.radio-view-blog .radio-share__btn {
position: relative;
display: inline-flex;
flex: none;
width: 37px;
height: 37px;
margin: 0;
padding: 0;
border: 1px solid rgba(127, 220, 255, 0.4);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.07);
background-position: center;
background-repeat: no-repeat;
background-size: 18px 18px;
color: #ffffff;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.radio-view-blog .radio-share__btn:hover,
.radio-view-blog .radio-share__btn:focus-visible {
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 10, 30, 0.4);
text-decoration: none;
}
.radio-view-blog .radio-share__btn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.radio-view-blog .radio-share__btn--facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.25-1.5 1.5-1.5h1.6V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21z'/%3E%3C/svg%3E"); background-size: 20px 20px; }
.radio-view-blog .radio-share__btn--x { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); background-size: 16px 16px; }
.radio-view-blog .radio-share__btn--linkedin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.1c0-1.22-.02-2.79-1.7-2.79-1.7 0-1.96 1.33-1.96 2.7V21h-4z'/%3E%3C/svg%3E"); background-size: 17px 17px; }
.radio-view-blog .radio-share__btn--whatsapp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round' d='M12 3.2a8.8 8.8 0 0 0-7.6 13.2L3.2 20.8l4.5-1.2A8.8 8.8 0 1 0 12 3.2z'/%3E%3Cpath fill='%23fff' d='M9.1 7.6c-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.9 4.5 3.9 2.2.9 2.7.7 3.2.7.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.2-.2-.5-.3l-1.7-.8c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.3-.8-.7-1.3-1.5-1.4-1.8-.1-.3 0-.4.1-.5l.4-.4c.1-.2.2-.3.3-.5.1-.2 0-.3 0-.4l-.8-1.9z'/%3E%3C/svg%3E"); background-size: 21px 21px; }
.radio-view-blog .radio-share__btn--email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z'/%3E%3C/svg%3E"); }
.radio-view-blog .radio-share__btn--copy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E"); background-size: 20px 20px; }
.radio-view-blog .radio-share__btn--facebook:hover, .radio-view-blog .radio-share__btn--facebook:focus-visible { background-color: #1877f2; }
.radio-view-blog .radio-share__btn--x:hover, .radio-view-blog .radio-share__btn--x:focus-visible { background-color: #000000; }
.radio-view-blog .radio-share__btn--linkedin:hover, .radio-view-blog .radio-share__btn--linkedin:focus-visible { background-color: #0a66c2; }
.radio-view-blog .radio-share__btn--whatsapp:hover, .radio-view-blog .radio-share__btn--whatsapp:focus-visible { background-color: #25d366; }
.radio-view-blog .radio-share__btn--email:hover, .radio-view-blog .radio-share__btn--email:focus-visible,
.radio-view-blog .radio-share__btn--copy:hover, .radio-view-blog .radio-share__btn--copy:focus-visible { background-color: #1a8fe0; }
/* Copy link: green tick and a "Copied" bubble for 2 seconds */
.radio-view-blog .radio-share__btn--copy.is-copied {
border-color: transparent;
background-color: #19a463;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.radio-view-blog .radio-share__btn--copy.is-copied::after {
content: "Copied";
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
padding: 4px 8px;
border-radius: 6px;
background: #ffffff;
font-family: 'Roboto', Arial, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
color: #00305c;
white-space: nowrap;
transform: translateX(-50%);
}
@media (max-width: 360px) {
.radio-view-blog .radio-view-blog__share-panel {
padding: 14px 12px 16px;
}
.radio-view-blog .radio-share__row {
gap: 8px;
}
.radio-view-blog .radio-share__btn {
width: 36px;
height: 36px;
}
}
/* Staff edit: pencil drawn here, the module's own link covers the circle */
.radio-view-blog .radio-view-blog__edit {
position: relative;
}
.radio-view-blog .radio-view-blog__edit::before {
content: "";
width: 20.98px;
height: 20.98px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 99'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M70.4 10.2L64.9 15.5 74.3 24.8L83.6 34.1 88.8 28.6C91.7 25.6 94 22.6 94 21.9C94 20.2 78.7 5 77.1 5C76.4 5 73.4 7.4 70.4 10.2M32.2 48.3L5 75.5 5 84.8L5 94 14.3 94L23.5 94 50.8 66.7L78 39.5 68.7 30.2L59.5 21 32.2 48.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-view-blog .radio-view-blog__edit > :not(script):not(style) {
position: absolute;
inset: 0;
z-index: 1;
display: block;
border-radius: 50%;
overflow: hidden;
opacity: 0;
}
.radio-view-blog .radio-view-blog__edit a,
.radio-view-blog .radio-view-blog__edit img {
display: block;
width: 100%;
height: 100%;
}
/* Keyboard focus */
.radio-view-blog .radio-view-blog__play:focus-within,
.radio-view-blog .radio-view-blog__edit:focus-within,
.radio-view-blog .radio-view-blog__readmore:focus-visible,
.radio-view-blog a.radio-view-blog__viewmore:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* ----- Smaller screens ----- */
@media (max-width: 1199px) {
.radio-view-blog .radio-view-blog__author--title {
font-size: 34px;
}
}
@media (max-width: 1023px) {
/* photo on top, text below: darken towards the text so it stays readable */
.radio-blog-card.radio-view-blog,
.radio-blog-card.radio-view-blog.radio-blog-card--reverse {
max-width: 760px;
min-height: 0;
background: linear-gradient(180deg, #00b4f7 0%, #00609c 48%, #002e52 100%);
}
.radio-blog-card.radio-view-blog--noimg {
flex-direction: column;
}
.radio-view-blog.radio-view-blog--noimg .radio-view-blog__body {
margin-top: 0;
}
.radio-view-blog.radio-view-blog--noimg .radio-view-blog__media {
align-self: flex-start;
margin: 24px 0 0;
}
}
@media (max-width: 767px) {
.radio-blog-card.radio-view-blog {
margin-bottom: 20px;
}
.radio-view-blog .radio-view-blog__author--title {
font-size: 28px;
}
.radio-view-blog .radio-view-blog__title {
margin-top: 12px;
font-size: 15px;
}
.radio-view-blog .radio-view-blog__title + .radio-view-blog__desc {
margin-top: 14px !important;
}
.radio-view-blog .radio-view-blog__links {
gap: 18px;
}
.radio-view-blog .radio-view-blog__more {
width: 100%;
max-width: 280px;
}
.radio-view-blog .radio-view-blog__actions {
gap: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.radio-view-blog .radio-view-blog__readmore::after,
.radio-view-blog .radio-view-blog__more-arrow,
.radio-view-blog .radio-view-blog__share-panel,
.radio-view-blog .radio-share__btn {
transition: none;
}
}
/* ============ end BLOG POST CARD (view.cfm) ============ */
/* =====================================================================
MUSIC BLOG LIST (list.cfm) : PHONES, "Compact Feed" (picked 2026-10-07)
Hero with a small photo beside the title, slim post cards with 3-line
excerpts, icons + Learn More on one row, share sheet from the bottom,
themed pager. Phones only (max-width 767px): tablet and desktop are
untouched. Every rule sits under .radio-blog / .radio-blog-list, which
only list.cfm has, so other pages and detail.cfm do not change.
===================================================================== */
/* ---------- shared phone fixes (every option) ---------- */
@media (max-width: 767px) {
/* Stop sideways scroll without turning .radio-blog into a scroll box
(overflow-x:hidden makes overflow-y compute to auto). Old browsers keep "hidden". */
.radio-blog {
overflow-x: hidden;
overflow-x: clip;
}
/* Respect notches / rounded corners in landscape */
.radio-blog .radio-blog-hero__inner {
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.radio-blog .radio-blog-list__inner {
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* "Music Blog" stays on one line down to 320px */
.radio-blog .radio-blog-hero__title {
font-size: clamp(56px, 19vw, 76px);
line-height: 1.02;
}
/* Hero copy: show the whole sentence (it was cut at "Hot Pic...") */
.radio-blog .radio-blog-hero__text {
display: block;
-webkit-line-clamp: unset;
line-clamp: none;
overflow: visible;
}
.radio-blog .radio-blog-hero__btn {
min-height: 48px;
}
/* Blog photos carry the station name inside the picture: show the whole photo */
.radio-blog-list .radio-view-blog .radio-view-blog__img {
width: 100%;
height: auto;
aspect-ratio: auto;
max-height: min(115vw, 560px);
object-fit: cover;
}
/* Read more: 44px touch target */
.radio-blog-list .radio-view-blog .radio-view-blog__readmore {
min-height: 44px;
margin-top: 2px;
}
/* Share popup: 44px buttons in a 3 x 2 grid, never wider than the screen */
.radio-blog-list .radio-view-blog .radio-share__row {
display: grid;
grid-template-columns: repeat(3, 44px);
gap: 12px 14px;
justify-content: center;
}
.radio-blog-list .radio-view-blog .radio-share__btn {
width: 44px;
height: 44px;
}
/* ----- Pager: display_paging_V3 has no "radio_new_paging" class, so it was
showing the old grey 30 x 20 boxes with dark text on navy. Hook on the section instead. ----- */
.radio-blog-list .pagehopperWrapper {
padding: 4px 0 28px;
text-align: center;
font-family: 'Roboto', Arial, sans-serif;
}
.radio-blog-list .pagehopperWrapper .text-nowrap {
display: inline-flex !important; /* beats the inline display:inline-block */
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 100%;
padding-right: 0 !important; /* beats the inline padding-right:30px that pushed it off centre */
vertical-align: middle;
}
.radio-blog-list .pagehopperWrapper .lmfont12 {
display: inline-flex !important; /* beats the inline display:inline */
align-items: center;
height: 44px;
margin: 0;
padding: 0 10px 0 14px;
border: 1px solid rgba(43, 194, 243, 0.35);
border-radius: 22px;
background: rgba(0, 143, 255, 0.13);
font-family: 'Roboto', Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.08em;
color: #ffffff;
white-space: nowrap;
}
.radio-blog-list .pagehopperWrapper .phDesktopMode {
line-height: 0;
}
.radio-blog-list .pagehopperWrapper a.pagehopper,
.radio-blog-list .pagehopperWrapper a.pagehopper:link,
.radio-blog-list .pagehopperWrapper a.pagehopper:visited {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 44px;
min-width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 1px solid rgba(43, 194, 243, 0.55);
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.radio-blog-list .pagehopperWrapper a.pagehopper:hover,
.radio-blog-list .pagehopperWrapper a.pagehopper:focus-visible {
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
color: #ffffff;
}
.radio-blog-list .pagehopperWrapper a.pagehopper:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* arrows: glossy circles with drawn chevrons (the characters stay in the HTML for screen readers) */
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:link,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:visited {
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
font-size: 0;
}
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper::before {
content: "";
display: block;
width: 22px;
height: 22px;
background-color: #ffffff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper::before,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:last-child::before {
width: 24px;
height: 24px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
}
.radio-blog-list .pagehopperWrapper .phDesktopMode ~ a.pagehopper::before {
transform: scaleX(-1);
}
/* back arrows sit before "PAGE n", forward arrows after it */
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper,
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper + a.pagehopper {
order: -1;
}
}
/* 551-767px: the page numbers show too, so they shrink a little to keep the pager on one line */
@media (min-width: 551px) and (max-width: 767px) {
.radio-blog-list .pagehopperWrapper .text-nowrap {
gap: 5px;
}
.radio-blog-list .pagehopperWrapper .phDesktopMode a.pagehopper,
.radio-blog-list .pagehopperWrapper .phDesktopMode a.pagehopper:link,
.radio-blog-list .pagehopperWrapper .phDesktopMode a.pagehopper:visited {
width: 40px;
min-width: 40px;
height: 40px;
}
}
/* very narrow phones: tighter pager so "PAGE 12" and four arrows fit on one line */
@media (max-width: 360px) {
.radio-blog-list .pagehopperWrapper .text-nowrap {
gap: 6px;
}
.radio-blog-list .pagehopperWrapper .lmfont12 {
padding: 0 8px 0 11px;
letter-spacing: 0.04em;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.radio-blog-list .pagehopperWrapper a.pagehopper,
.radio-blog-list .radio-view-blog .radio-view-blog__share-panel {
transition: none;
}
}
@media (max-width: 767px) {
/* ----- Hero: title + photo side by side ----- */
.radio-blog-card__links {
gap: 5px !important;
}
.radio-blog .radio-blog-hero {
/* display: grid; */
grid-template-columns: minmax(0, 1fr) min(40%, 230px);
grid-template-areas:
"title img"
"lead img"
"text text"
"btns btns";
grid-template-rows: auto 1fr auto auto;
align-items: start;
column-gap: 6px;
height: auto;
padding: 26px max(18px, env(safe-area-inset-right, 0px)) 28px max(18px, env(safe-area-inset-left, 0px));
}
.radio-blog .radio-blog-hero__inner,
.radio-blog .radio-blog-hero__content {
display: contents;
}
.radio-blog .radio-blog-hero__title {
grid-area: title;
align-self: start;
font-size: clamp(54px, 17vw, 76px);
line-height: 0.95;
letter-spacing: -0.03em;
}
.radio-blog .radio-blog-hero__img {
grid-area: img;
position: relative;
right: auto;
bottom: auto;
align-self: end;
width: calc(100% + max(18px, env(safe-area-inset-right, 0px)));
max-width: none;
height: auto;
margin: 0;
justify-self: start;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
}
.radio-blog .radio-blog-hero__lead {
grid-area: lead;
margin-top: 12px !important;
font-size: 16px;
font-weight: 500;
line-height: 1.3 !important;
letter-spacing: 0;
}
.radio-blog .radio-blog-hero__text {
grid-area: text;
margin-top: 14px !important;
font-size: 15px;
line-height: 22px;
color: rgba(255, 255, 255, 0.9);
}
.radio-blog .radio-blog-hero__buttons {
grid-area: btns;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px;
}
.radio-blog .radio-blog-hero__btn {
width: auto;
height: 46px;
min-height: 46px;
font-size: 16px;
}
/* ----- Filter head ----- */
.radio-blog .radio-blog-list__inner {
padding-top: 26px;
}
.radio-blog .radio-blog-list__head {
gap: 12px;
margin-bottom: 18px;
}
.radio-blog .radio-blog-list__title {
font-size: 34px;
line-height: 1.05;
}
/* ----- Card: slim, photo on top with controls on it ----- */
.radio-blog-list .radio-blog-card.radio-view-blog,
.radio-blog-list .radio-blog-card.radio-view-blog.radio-blog-card--reverse {
margin-bottom: 14px;
padding: 0;
border-radius: 20px;
background: linear-gradient(180deg, #035a92 0%, #013c66 55%, #002e52 100%);
box-shadow: 0 10px 24px rgba(0, 10, 30, 0.3), inset 0 0 0 1px rgba(127, 220, 255, 0.14);
}
.radio-blog-list .radio-view-blog .radio-view-blog__media {
position: relative;
max-width: none;
padding: 0;
border-radius: 20px 20px 0 0;
background: rgba(0, 30, 60, 0.35);
}
.radio-blog-list .radio-view-blog .radio-view-blog__img {
max-height: min(62vw, 340px);
border-radius: 20px 20px 0 0;
box-shadow: none;
}
.radio-blog-list .radio-view-blog .radio-view-blog__actions {
position: absolute;
right: 10px;
bottom: 10px;
height: auto;
margin: 0;
gap: 8px;
}
.radio-blog-list .radio-view-blog .radio-blog-card__round {
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
/* body as a wrapping row so small pieces can share a line */
.radio-blog-list .radio-view-blog .radio-view-blog__body {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
margin-top: 0;
padding: 14px 16px 16px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__body > * {
flex: 0 0 100%;
min-width: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__author {
font-size: 30px;
line-height: 1.05;
}
.radio-blog-list .radio-view-blog .radio-view-blog__title {
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: #7fdcff;
}
.radio-blog-list .radio-view-blog .radio-view-blog__desc {
margin-top: 10px !important;
font-size: 15px;
line-height: 22px;
-webkit-line-clamp: 3;
line-clamp: 3;
}
/* Read more and the date share one line */
.radio-blog-list .radio-view-blog .radio-view-blog__readmore {
flex: 0 0 auto;
font-size: 15px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__date {
flex: 1 1 auto;
margin-top: 2px !important;
font-size: 13px;
font-weight: 400;
text-align: right;
color: rgba(255, 255, 255, 0.72);
}
/* no Read more (short post, or hidden by radioBlogInitDesc): date goes back under the text */
.radio-blog-list .radio-view-blog .radio-view-blog__desc + .radio-view-blog__date,
.radio-blog-list .radio-view-blog .radio-view-blog__readmore[style*="none"] ~ .radio-view-blog__date {
flex-basis: 100%;
margin-top: 10px !important;
text-align: left;
}
/* icons and Learn More on one row (Learn More drops below when there is no room) */
.radio-blog-list .radio-view-blog .radio-view-blog__links {
flex: 0 1 auto;
flex-wrap: nowrap;
gap: 2px;
margin-top: 10px !important;
row-gap: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__link {
width: 44px;
height: 44px;
border-radius: 12px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__link:active {
background: rgba(255, 255, 255, 0.12);
}
.radio-blog-list .radio-view-blog .radio-view-blog__links .radio-view-blog__icon {
transform: scale(0.82);
}
.radio-blog-list .radio-view-blog .radio-view-blog__more {
flex: 1 0 128px;
gap: 10px;
width: auto;
max-width: none;
height: 44px;
margin-top: 10px;
font-size: 17px;
border-radius: 22px;
padding: 18px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__more-arrow {
width: 15px;
height: 15px;
}
/* icons + Learn More always start their own row, under Read more and the date */
.radio-blog-list .radio-view-blog .radio-view-blog__body::after {
content: "";
order: 1;
flex: 0 0 100%;
height: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__links,
.radio-blog-list .radio-view-blog .radio-view-blog__more,
.radio-blog-list .radio-view-blog .radio-view-blog__viewmore-wrap,
.radio-blog-list .radio-view-blog .radio-view-blog__extra {
order: 2;
}
/* ----- Share: bottom sheet ----- */
.radio-blog-list .radio-view-blog .radio-view-blog__share-panel {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
width: auto;
max-width: none;
padding: 12px max(20px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
border-width: 1px 0 0;
border-radius: 22px 22px 0 0;
box-shadow: 0 -16px 40px rgba(0, 10, 30, 0.55);
transform: translateY(105%);
transform-origin: 50% 100%;
transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0.22s;
}
.radio-blog-list .radio-view-blog .radio-view-blog__share.is-open .radio-view-blog__share-panel {
transform: none;
transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s;
}
.radio-blog-list .radio-view-blog .radio-view-blog__share-panel::before,
.radio-blog-list .radio-view-blog .radio-view-blog__share-panel::after {
display: none;
}
/* grab handle */
.radio-blog-list .radio-view-blog .radio-share::before {
content: "";
display: block;
width: 40px;
height: 4px;
margin: 0 auto 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.35);
}
.radio-blog-list .radio-view-blog .radio-share__row {
grid-template-columns: repeat(6, 44px);
justify-content: space-between;
gap: 0;
width: 100%;
max-width: 420px;
}
.radio-blog-list .radio-view-blog .radio-share {
gap: 12px;
}
/* no photo: controls go back into the flow */
.radio-blog-list .radio-view-blog.radio-view-blog--noimg .radio-view-blog__media {
padding: 0 16px 16px;
background: transparent;
}
.radio-blog-list .radio-view-blog.radio-view-blog--noimg .radio-view-blog__actions {
position: relative;
right: auto;
bottom: auto;
}
}
/* Mouse users on a narrow window: the sheet opens on click only, not on hover */
@media (max-width: 767px) and (hover: hover) {
.radio-blog-list .radio-view-blog .radio-view-blog__share:not(.is-open):hover .radio-view-blog__share-panel {
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(105%);
}
}
/* ============ end MUSIC BLOG LIST (list.cfm) : PHONES ============ */
/* =====================================================================
MUSIC BLOG LIST (list.cfm) : TABLETS, "Compact Grid" (picked 2026-10-07)
768-1199px only (767.02px so fractional widths are covered); phones
(max-width 767px) and desktop (1200px and up) are untouched.
Every tablet: themed round pager, full hero sentence, 44px invisible
tap areas, hero grows with zoom, whole blog photos.
Portrait tablets (768-1023): phone "Compact Feed" hero and cards,
two posts per row, share popup above the play/share buttons.
Landscape tablets (1024-1199): today's side-by-side cards, whole photos.
Every rule sits under .radio-blog / .radio-blog-list (list.cfm only).
===================================================================== */
/* ---------- shared tablet fixes (every option), 768-1199px ----------
767.02px instead of 768px so fractional widths (767.5px on some Android tablets) are not left out;
phones (max-width 767px) and desktop (1200px and up) are not touched. */
@media (min-width: 767.02px) and (max-width: 1199px) {
/* Keep the hero photo's intentional bleed clipped without making .radio-blog a scroll box */
.radio-blog {
overflow-x: hidden;
overflow-x: clip;
}
/* Hero copy: show the whole sentence (landscape tablets cut it at "Dropdown Below And...") */
.radio-blog .radio-blog-hero__text {
display: block;
-webkit-line-clamp: unset;
line-clamp: none;
overflow: visible;
}
/* Invisible 44px tap areas; nothing moves or changes colour */
.radio-blog-list .radio-view-blog .radio-view-blog__link {
position: relative;
}
.radio-blog-list .radio-view-blog .radio-view-blog__link::before {
content: "";
position: absolute;
inset: -4px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__readmore {
position: relative;
}
.radio-blog-list .radio-view-blog .radio-view-blog__readmore::before {
content: "";
position: absolute;
top: -8px;
right: -6px;
bottom: -8px;
left: -6px;
}
/* ----- Pager: display_paging_V3 has no "radio_new_paging" class, so tablets showed the old
grey 40 x 24 boxes with dark "PAGE n" on navy. Same round pager as the theme, hooked on the section. ----- */
.radio-blog-list .pagehopperWrapper {
padding: 0 0 32px;
text-align: center;
font-family: 'Roboto', Arial, sans-serif;
}
.radio-blog-list .pagehopperWrapper .text-nowrap {
display: inline-flex !important; /* beats the inline display:inline-block */
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 100%;
padding-right: 0 !important; /* beats the inline padding-right:30px that pushed it off centre */
vertical-align: middle;
}
.radio-blog-list .pagehopperWrapper .lmfont12 {
display: inline-flex !important; /* beats the inline display:inline */
align-items: center;
height: 44px;
margin: 0;
padding: 0 10px 0 14px;
border: 1px solid rgba(43, 194, 243, 0.35);
border-radius: 22px;
background: rgba(0, 143, 255, 0.13);
font-family: 'Roboto', Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.08em;
color: #ffffff;
white-space: nowrap;
}
.radio-blog-list .pagehopperWrapper .phDesktopMode {
line-height: 0;
}
.radio-blog-list .pagehopperWrapper a.pagehopper,
.radio-blog-list .pagehopperWrapper a.pagehopper:link,
.radio-blog-list .pagehopperWrapper a.pagehopper:visited {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 44px;
min-width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 1px solid rgba(43, 194, 243, 0.55);
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.radio-blog-list .pagehopperWrapper a.pagehopper:hover,
.radio-blog-list .pagehopperWrapper a.pagehopper:focus-visible {
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
color: #ffffff;
}
.radio-blog-list .pagehopperWrapper a.pagehopper:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* arrows: glossy circles with drawn chevrons (the characters stay in the HTML for screen readers) */
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:link,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:visited {
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
font-size: 0;
}
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper::before {
content: "";
display: block;
width: 22px;
height: 22px;
background-color: #ffffff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper::before,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:last-child::before {
width: 24px;
height: 24px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
}
.radio-blog-list .pagehopperWrapper .phDesktopMode ~ a.pagehopper::before {
transform: scaleX(-1);
}
/* back arrows sit before "PAGE n", forward arrows after it */
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper,
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper + a.pagehopper {
order: -1;
}
}
/* Landscape tablets (1024-1199): the hero keeps its 600px look but can grow with
browser zoom or larger text instead of clipping the buttons */
@media (min-width: 1023.02px) and (max-width: 1199px) {
.radio-blog .radio-blog-hero {
height: auto;
min-height: 600px;
}
}
@media (min-width: 767.02px) and (max-width: 1199px) and (prefers-reduced-motion: reduce) {
.radio-blog-list .pagehopperWrapper a.pagehopper {
transition: none;
}
}
@media (min-width: 767.02px) and (max-width: 1199px) {
.radio-blog-list .radio-view-blog .radio-view-blog__img {
height: auto;
aspect-ratio: auto;
max-height: 560px;
object-fit: cover;
}
}
@media (min-width: 1023.02px) and (max-width: 1199px) {
.radio-blog-list .radio-view-blog:not(.radio-view-blog--noimg) .radio-view-blog__media {
align-self: center;
margin-top: 30px;
}
}
@media (min-width: 767.02px) and (max-width: 1023px) {
/* ----- Hero: title + photo side by side ----- */
.radio-blog .radio-blog-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) min(40%, 230px);
grid-template-areas:
"title img"
"lead img"
"text text"
"btns btns";
grid-template-rows: auto 1fr auto auto;
align-items: start;
column-gap: 6px;
height: auto;
padding: 26px max(18px, env(safe-area-inset-right, 0px)) 28px max(18px, env(safe-area-inset-left, 0px));
}
.radio-blog .radio-blog-hero__inner,
.radio-blog .radio-blog-hero__content {
display: contents;
}
.radio-blog .radio-blog-hero__title {
grid-area: title;
align-self: start;
font-size: clamp(54px, 17vw, 76px);
line-height: 0.95;
letter-spacing: -0.03em;
}
.radio-blog .radio-blog-hero__img {
grid-area: img;
position: relative;
right: auto;
bottom: auto;
align-self: end;
width: calc(100% + max(18px, env(safe-area-inset-right, 0px)));
max-width: none;
height: auto;
margin: 0;
justify-self: start;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
}
.radio-blog .radio-blog-hero__lead {
grid-area: lead;
margin-top: 12px !important;
font-size: 16px;
font-weight: 500;
line-height: 1.3 !important;
letter-spacing: 0;
}
.radio-blog .radio-blog-hero__text {
grid-area: text;
margin-top: 14px !important;
font-size: 15px;
line-height: 22px;
color: rgba(255, 255, 255, 0.9);
}
.radio-blog .radio-blog-hero__buttons {
grid-area: btns;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px;
}
.radio-blog .radio-blog-hero__btn {
width: auto;
height: 46px;
min-height: 46px;
font-size: 16px;
}
/* ----- Filter head ----- */
.radio-blog .radio-blog-list__inner {
padding-top: 26px;
}
.radio-blog .radio-blog-list__head {
gap: 12px;
margin-bottom: 18px;
}
.radio-blog .radio-blog-list__title {
font-size: 34px;
line-height: 1.05;
}
/* ----- Card: slim, photo on top with controls on it ----- */
.radio-blog-list .radio-blog-card.radio-view-blog,
.radio-blog-list .radio-blog-card.radio-view-blog.radio-blog-card--reverse {
margin-bottom: 14px;
padding: 0;
border-radius: 20px;
background: linear-gradient(180deg, #035a92 0%, #013c66 55%, #002e52 100%);
box-shadow: 0 10px 24px rgba(0, 10, 30, 0.3), inset 0 0 0 1px rgba(127, 220, 255, 0.14);
}
.radio-blog-list .radio-view-blog .radio-view-blog__media {
position: relative;
max-width: none;
padding: 0;
border-radius: 20px 20px 0 0;
background: rgba(0, 30, 60, 0.35);
}
.radio-blog-list .radio-view-blog .radio-view-blog__img {
max-height: min(62vw, 340px);
border-radius: 20px 20px 0 0;
box-shadow: none;
}
.radio-blog-list .radio-view-blog .radio-view-blog__actions {
position: absolute;
right: 10px;
bottom: 10px;
height: auto;
margin: 0;
gap: 8px;
}
.radio-blog-list .radio-view-blog .radio-blog-card__round {
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
/* body as a wrapping row so small pieces can share a line */
.radio-blog-list .radio-view-blog .radio-view-blog__body {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
margin-top: 0;
padding: 14px 16px 16px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__body > * {
flex: 0 0 100%;
min-width: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__author {
font-size: 30px;
line-height: 1.05;
}
.radio-blog-list .radio-view-blog .radio-view-blog__title {
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: #7fdcff;
}
.radio-blog-list .radio-view-blog .radio-view-blog__desc {
margin-top: 10px !important;
font-size: 15px;
line-height: 22px;
-webkit-line-clamp: 3;
line-clamp: 3;
}
/* Read more and the date share one line */
.radio-blog-list .radio-view-blog .radio-view-blog__readmore {
flex: 0 0 auto;
font-size: 15px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__date {
flex: 1 1 auto;
margin-top: 2px !important;
font-size: 13px;
font-weight: 400;
text-align: right;
color: rgba(255, 255, 255, 0.72);
}
/* no Read more (short post, or hidden by radioBlogInitDesc): date goes back under the text */
.radio-blog-list .radio-view-blog .radio-view-blog__desc + .radio-view-blog__date,
.radio-blog-list .radio-view-blog .radio-view-blog__readmore[style*="none"] ~ .radio-view-blog__date {
flex-basis: 100%;
margin-top: 10px !important;
text-align: left;
}
/* icons and Learn More on one row (Learn More drops below when there is no room) */
.radio-blog-list .radio-view-blog .radio-view-blog__links {
flex: 0 1 auto;
flex-wrap: nowrap;
gap: 2px;
margin-top: 10px !important;
row-gap: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__link {
width: 44px;
height: 44px;
border-radius: 12px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__link:active {
background: rgba(255, 255, 255, 0.12);
}
.radio-blog-list .radio-view-blog .radio-view-blog__links .radio-view-blog__icon {
transform: scale(0.82);
}
.radio-blog-list .radio-view-blog .radio-view-blog__more {
flex: 1 0 128px;
gap: 10px;
width: auto;
max-width: none;
height: 44px;
margin-top: 10px;
font-size: 17px;
border-radius: 22px;
padding: 18px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__more-arrow {
width: 15px;
height: 15px;
}
/* icons + Learn More always start their own row, under Read more and the date */
.radio-blog-list .radio-view-blog .radio-view-blog__body::after {
content: "";
order: 1;
flex: 0 0 100%;
height: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__links,
.radio-blog-list .radio-view-blog .radio-view-blog__more,
.radio-blog-list .radio-view-blog .radio-view-blog__viewmore-wrap,
.radio-blog-list .radio-view-blog .radio-view-blog__extra {
order: 2;
}
/* no photo: controls go back into the flow */
.radio-blog-list .radio-view-blog.radio-view-blog--noimg .radio-view-blog__media {
padding: 0 16px 16px;
background: transparent;
}
.radio-blog-list .radio-view-blog.radio-view-blog--noimg .radio-view-blog__actions {
position: relative;
right: auto;
bottom: auto;
}
}
@media (min-width: 767.02px) and (max-width: 1023px) {
.radio-blog .radio-blog-hero {
grid-template-columns: minmax(0, 1fr) min(38%, 300px);
grid-template-areas:
"title img"
"lead img"
"text img"
"btns img";
grid-template-rows: auto auto auto 1fr;
column-gap: 24px;
padding: 44px max(32px, env(safe-area-inset-right, 0px)) 40px max(32px, env(safe-area-inset-left, 0px));
}
.radio-blog .radio-blog-hero__title {
font-size: clamp(76px, 11vw, 104px);
}
.radio-blog .radio-blog-hero__lead {
font-size: 19px;
}
.radio-blog .radio-blog-hero__text {
max-width: 640px;
font-size: 17px;
line-height: 26px;
}
.radio-blog .radio-blog-hero__buttons {
max-width: 460px;
}
.radio-blog .radio-blog-hero__img {
width: calc(100% + max(32px, env(safe-area-inset-right, 0px)));
}
.radio-blog .radio-blog-list__title {
font-size: 46px;
}
/* two posts per row */
.radio-blog-list .flex-container {
/* display: grid; */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: start;
margin-bottom: 28px;
}
.radio-blog-card__media{
flex: 0 0 0px !important;
}
.radio-blog-list .radio-blog-card.radio-view-blog,
.radio-blog-list .radio-blog-card.radio-view-blog.radio-blog-card--reverse {
width: auto;
max-width: none;
margin: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__img {
max-height: 300px;
}
/* share popup: anchored to the card photo so it stays inside the column */
.radio-blog-list .radio-view-blog .radio-view-blog__share {
position: static;
}
.radio-blog-list .radio-view-blog .radio-view-blog__share-panel {
left: auto;
right: -4px;
bottom: calc(100% + 14px);
transform: translateY(8px) scale(0.92);
transform-origin: 100% 100%;
}
.radio-blog-list .radio-view-blog .radio-view-blog__share.is-open .radio-view-blog__share-panel {
transform: none;
}
.radio-blog-list .radio-view-blog .radio-view-blog__share-panel::after {
left: auto;
right: 18px;
margin-left: 0;
}
.radio-blog-list .radio-view-blog .radio-view-blog__share:not(:last-child) .radio-view-blog__share-panel::after {
right: 70px;
}
.radio-blog-list .radio-view-blog .radio-share__row {
display: grid;
grid-template-columns: repeat(3, 44px);
gap: 12px 14px;
justify-content: center;
}
.radio-blog-list .radio-view-blog .radio-share__btn {
width: 44px;
height: 44px;
}
}
@media (min-width: 767.02px) and (max-width: 1023px) and (hover: hover) {
.radio-blog-list .radio-view-blog .radio-view-blog__share:hover .radio-view-blog__share-panel {
transform: none;
}
}
/* ============ end MUSIC BLOG LIST (list.cfm) : TABLETS ============ */
/* =====================================================================
MUSIC BLOG LIST (list.cfm) : DESKTOP, "Held at 1512" (picked 2026-10-07)
1200px and up only (1199.02px so fractional widths are covered); phones
and tablets (up to 1199px) are untouched.
Every desktop: themed round pager, invisible 44px tap areas for touch
laptops, hero can grow with text-only zoom, overflow-x clip.
Wider than 1512: the hero photo stays at the right edge of the 1512
frame and its dark edge carries on to the screen edge (no seam).
Every rule sits under .radio-blog / .radio-blog-list (list.cfm only).
===================================================================== */
/* ---------- shared desktop fixes (every option), 1200px and up ----------
1199.02px so fractional widths between the tablet and desktop ranges are covered;
phones and tablets (up to 1199px) are not touched. */
@media (min-width: 1199.02px) {
/* Keep the hero photo's intentional bleed clipped without making .radio-blog a scroll box */
.radio-blog {
overflow-x: hidden;
overflow-x: clip;
}
/* The hero keeps its 500px look but can grow (text-only zoom, minimum font size)
instead of clipping the buttons */
.radio-blog .radio-blog-hero {
height: auto;
min-height: 600px;
}
/* Invisible 44px tap areas for touch laptops; nothing moves or changes colour */
.radio-blog-list .radio-view-blog .radio-view-blog__link {
position: relative;
}
.radio-blog-list .radio-view-blog .radio-view-blog__link::before {
content: "";
position: absolute;
inset: -4px;
}
.radio-blog-list .radio-view-blog .radio-view-blog__readmore {
position: relative;
}
.radio-blog-list .radio-view-blog .radio-view-blog__readmore::before {
content: "";
position: absolute;
top: -8px;
right: -6px;
bottom: -8px;
left: -6px;
}
/* ----- Pager: display_paging_V3 has no "radio_new_paging" class, so desktop showed the old
grey 40 x 24 boxes with dark "PAGE n" on navy. Same round pager as the theme, hooked on the section. ----- */
.radio-blog-list .pagehopperWrapper {
padding: 0 0 36px;
text-align: center;
font-family: 'Roboto', Arial, sans-serif;
}
.radio-blog-list .pagehopperWrapper .text-nowrap {
display: inline-flex !important; /* beats the inline display:inline-block */
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
max-width: 100%;
padding-right: 0 !important; /* beats the inline padding-right:30px that pushed it off centre */
vertical-align: middle;
}
.radio-blog-list .pagehopperWrapper .lmfont12 {
display: inline-flex !important; /* beats the inline display:inline */
align-items: center;
height: 44px;
margin: 0;
padding: 0 13px 0 18px;
border: 1px solid rgba(43, 194, 243, 0.35);
border-radius: 22px;
background: rgba(0, 143, 255, 0.13);
font-family: 'Roboto', Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.08em;
color: #ffffff;
white-space: nowrap;
}
.radio-blog-list .pagehopperWrapper .phDesktopMode {
line-height: 0;
}
.radio-blog-list .pagehopperWrapper a.pagehopper,
.radio-blog-list .pagehopperWrapper a.pagehopper:link,
.radio-blog-list .pagehopperWrapper a.pagehopper:visited {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 44px;
min-width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 1px solid rgba(43, 194, 243, 0.55);
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.radio-blog-list .pagehopperWrapper a.pagehopper:hover,
.radio-blog-list .pagehopperWrapper a.pagehopper:focus-visible {
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
color: #ffffff;
}
.radio-blog-list .pagehopperWrapper a.pagehopper:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* arrows: glossy circles with drawn chevrons (the characters stay in the HTML for screen readers) */
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:link,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:visited {
border-color: transparent;
background: radial-gradient(circle at 32% 24%, #5cdcf8 0%, #2a9be6 30%, #1673d6 58%, #0b4db6 84%, #083b9c 100%);
font-size: 0;
}
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper::before {
content: "";
display: block;
width: 22px;
height: 22px;
background-color: #ffffff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper::before,
.radio-blog-list .pagehopperWrapper .text-nowrap > a.pagehopper:last-child::before {
width: 24px;
height: 24px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 7.4 17 6l-6 6 6 6 1.4-1.4L13.8 12z'/%3E%3Cpath d='M12.4 7.4 11 6l-6 6 6 6 1.4-1.4L7.8 12z'/%3E%3C/svg%3E");
}
.radio-blog-list .pagehopperWrapper .phDesktopMode ~ a.pagehopper::before {
transform: scaleX(-1);
}
/* back arrows sit before "PAGE n", forward arrows after it */
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper,
.radio-blog-list .pagehopperWrapper .lmfont12 + a.pagehopper + a.pagehopper {
order: -1;
}
}
@media (min-width: 1199.02px) and (prefers-reduced-motion: reduce) {
.radio-blog-list .pagehopperWrapper a.pagehopper {
transition: none;
}
}
/* Screens wider than 1512: the hero photo stays at the right edge of the 1512 frame,
next to the text, instead of drifting to the edge of the monitor */
@media (min-width: 1512px) {
.radio-blog .radio-blog-hero__img {
right: calc(50% - 756px);
}
/* the photo's dark right edge carries on to the screen edge, so there is no seam */
.radio-blog .radio-blog-hero {
background:
linear-gradient(90deg, rgba(1, 36, 60, 0) calc(50% + 756px), #01243c calc(50% + 756px)),
linear-gradient(90deg, #065f9e 0%, #02365b 100%);
}
}
/* ============ end MUSIC BLOG LIST (list.cfm) : DESKTOP ============ */
.vendor-option-list{
margin: 0;
color: #fff;
font-family: inherit;
font-size: clamp(1rem, 1.354vw, 20.5px);
font-weight: 600;
line-height: 1.3 !important;
text-transform: capitalize;
margin-top: 15px;
}
#we-slider-section .container{
max-width: 1512px !important;
}
.we-image-mask{
margin-right: 30px;
}
.ways-earn-text-content{
width: 60%;
}
.aae-title{
font-size: 3rem !important;
font-weight: 600;
margin-bottom: 10px;
}
.aae-subtitle{
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.b2b{
font-weight: 600;
}
.aar-item-icon{
margin-bottom: 20px;
}
.aae-item-text{
width: 85%;
font-size: 1.1rem !important;
}
.b2c{
font-weight: 600;
margin-top: 70px;
}
.look-inside .aae-item-title {
font-size: 1.5rem !important;
font-weight: 600;
}
.details__canvas *{
border-radius: 0 !important;
}
.radio-view-blog:nth-child(odd) .radio-view-blog__actions {
justify-content:flex-start ;
}
.radio-view-blog:nth-child(even) .radio-view-blog__actions {
justify-content: flex-end;
}
.ways-earn-thumbnails{
padding-bottom: 20px;
}
/* =====================================================================
BLOG ARTICLE PAGE (view_V1.cfm) : Figma "RadioSparx / version 2 / Blue / blog2"
Added 2026-10-12. Every rule is scoped to .radio-blog-post*, no body/html/global
selectors, so it is safe in the shared stylesheet.
Fonts: Playfair Display (400, 600) and Roboto (500, 700), linked by view_V1.cfm.
Sizes are the Figma px multiplied by --rbp-u:
- 1px when the page is 1608px wide or more (content held at the 1512px page width),
- shrinks with the page down to 1200px, so the layout keeps the Figma proportions,
- below 1200px the tablet and phone rules at the end take over with fixed sizes.
===================================================================== */
.radio-blog-post {
--rbp-u: clamp(0.5px, calc((100vw - 96px) / 1512), 1px);
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
background: #012640;
color: #ffffff;
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
container-type: inline-size;
}
/* measure the article itself rather than the window where supported */
@supports (width: 1cqw) {
.radio-blog-post {
--rbp-u: clamp(0.5px, calc((100cqw - 96px) / 1512), 1px);
}
}
.radio-blog-post *,
.radio-blog-post *::before,
.radio-blog-post *::after {
box-sizing: border-box;
}
.radio-blog-post h1,
.radio-blog-post h2,
.radio-blog-post p,
.radio-blog-post ul,
.radio-blog-post li {
margin: 0;
padding: 0;
}
.radio-blog-post ul {
list-style: none;
}
/* ---------------------------------------------------------------------
HERO : blog photo + title
--------------------------------------------------------------------- */
.radio-blog-post .radio-blog-post__hero {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: calc(1040 * var(--rbp-u));
overflow: hidden;
background: linear-gradient(270deg, #00527f 0%, #050b10 100%);
}
.radio-blog-post .radio-blog-post__hero-media {
position: absolute;
inset: 0;
z-index: -1;
}
.radio-blog-post .radio-blog-post__hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(270deg, rgba(0, 121, 191, 0.66) 0%, rgba(0, 0, 0, 0.5808) 100%);
}
.radio-blog-post .radio-blog-post__hero-img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.radio-blog-post .radio-blog-post__hero-inner {
width: 100%;
padding: calc(160 * var(--rbp-u)) 48px calc(68 * var(--rbp-u));
text-align: center;
}
.radio-blog-post .radio-blog-post__title {
display: block;
max-width: calc(1320 * var(--rbp-u));
margin: 0 auto;
color: #ffffff;
font-weight: 400;
text-align: center;
overflow-wrap: break-word;
}
.radio-blog-post .radio-blog-post__title-main {
display: block;
font-family: 'Roboto', Arial, sans-serif;
font-size: calc(112 * var(--rbp-u));
font-weight: 700;
line-height: calc(116 * var(--rbp-u)) !important;
letter-spacing: 0;
text-transform: capitalize;
}
.radio-blog-post .radio-blog-post__title-by {
display: block;
margin-top: calc(-7 * var(--rbp-u));
font-family: 'Playfair Display', Georgia, serif;
font-size: calc(60 * var(--rbp-u));
font-weight: 400;
line-height: calc(116 * var(--rbp-u)) !important;
letter-spacing: calc(-4.5 * var(--rbp-u));
}
/* longer titles step down so they stay on two or three lines */
.radio-blog-post .radio-blog-post__title--long .radio-blog-post__title-main {
font-size: calc(88 * var(--rbp-u));
line-height: calc(94 * var(--rbp-u)) !important;
}
.radio-blog-post .radio-blog-post__title--longer .radio-blog-post__title-main {
font-size: calc(64 * var(--rbp-u));
line-height: calc(72 * var(--rbp-u)) !important;
}
.radio-blog-post .radio-blog-post__meta {
display: flex;
flex-direction: column;
gap: calc(18 * var(--rbp-u));
width: max-content;
min-width: calc(461 * var(--rbp-u));
max-width: 100%;
margin: calc(31 * var(--rbp-u)) auto 0;
text-align: center;
}
.radio-blog-post .radio-blog-post__meta-item {
font-family: 'Playfair Display', Georgia, serif;
font-size: calc(32 * var(--rbp-u));
font-weight: 400;
line-height: calc(42 * var(--rbp-u)) !important;
color: #ffffff;
}
.radio-blog-post .radio-blog-post__meta-label {
font-family: 'Roboto', Arial, sans-serif;
font-weight: 500;
line-height: 1 !important; /* keeps the line at 42px with the mixed fonts */
}
.radio-blog-post .radio-blog-post__meta-value {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400;
}
/* ---------------------------------------------------------------------
ARTICLE : byline + intro, numbered sections
--------------------------------------------------------------------- */
.radio-blog-post .radio-blog-post__body {
padding: calc(65 * var(--rbp-u)) 48px calc(97 * var(--rbp-u));
background: #012640;
}
.radio-blog-post .radio-blog-post__inner {
width: 100%;
max-width: calc(1508 * var(--rbp-u));
margin: 0 auto;
}
.radio-blog-post .radio-blog-post__intro-row {
display: grid;
grid-template-columns: calc(202 * var(--rbp-u)) minmax(0, calc(1253 * var(--rbp-u)));
column-gap: calc(28 * var(--rbp-u));
align-items: start;
}
.radio-blog-post .radio-blog-post__byline {
min-width: 0;
}
.radio-blog-post .radio-blog-post__avatar {
display: flex;
align-items: center;
justify-content: center;
width: calc(72 * var(--rbp-u));
height: calc(72 * var(--rbp-u));
margin-left: calc(1 * var(--rbp-u));
overflow: hidden;
border: 1px solid rgba(0, 154, 255, 0.44);
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, #2fc0ff 0%, #0a86d4 45%, #04406d 100%);
font-family: 'Playfair Display', Georgia, serif;
font-size: calc(26 * var(--rbp-u));
font-weight: 600;
line-height: 1 !important;
letter-spacing: 0.02em;
color: #ffffff;
}
.radio-blog-post .radio-blog-post__avatar img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.radio-blog-post .radio-blog-post__author {
margin-top: calc(6 * var(--rbp-u));
font-size: calc(22 * var(--rbp-u));
font-weight: 400;
line-height: calc(32 * var(--rbp-u)) !important;
color: #ffffff;
text-transform: capitalize;
}
.radio-blog-post .radio-blog-post__date {
margin-top: calc(4 * var(--rbp-u));
font-size: calc(14 * var(--rbp-u));
font-weight: 400;
line-height: calc(22 * var(--rbp-u)) !important;
color: #ffffff;
}
.radio-blog-post .radio-blog-post__avatar + .radio-blog-post__date {
margin-top: calc(10 * var(--rbp-u));
}
/* intro: large text, lower case with a capital first letter (as in the Figma) */
.radio-blog-post .radio-blog-post__intro {
min-width: 0;
font-size: calc(37 * var(--rbp-u));
font-weight: 600;
line-height: calc(44 * var(--rbp-u)) !important;
color: #ffffff;
text-align: justify;
text-transform: lowercase;
overflow-wrap: break-word;
}
.radio-blog-post .radio-blog-post__intro::first-letter {
text-transform: uppercase;
}
/* numbered sections: number in the left rail, text column beside it */
.radio-blog-post .radio-blog-post__section {
display: grid;
grid-template-columns: calc(230 * var(--rbp-u)) minmax(0, 1fr);
align-items: start;
margin-top: calc(128 * var(--rbp-u));
}
.radio-blog-post .radio-blog-post__intro-row + .radio-blog-post__section {
margin-top: calc(149 * var(--rbp-u));
}
.radio-blog-post .radio-blog-post__num {
display: block;
padding-left: calc(119 * var(--rbp-u));
font-family: 'Playfair Display', Georgia, serif;
font-size: calc(64 * var(--rbp-u));
font-weight: 600;
line-height: calc(34 * var(--rbp-u)) !important;
letter-spacing: -0.04em;
font-variant-numeric: oldstyle-nums;
color: #ffffff;
white-space: nowrap;
}
.radio-blog-post .radio-blog-post__section-body {
min-width: 0;
}
.radio-blog-post .radio-blog-post__para::first-letter {
text-transform: uppercase;
}
.radio-blog-post .radio-blog-post__heading {
margin-bottom: calc(55 * var(--rbp-u));
padding-left: calc(11.5 * var(--rbp-u));
font-family: 'Playfair Display', Georgia, serif;
font-size: calc(64 * var(--rbp-u));
font-weight: 600;
line-height: calc(48 * var(--rbp-u)) !important;
color: #ffffff;
text-transform: capitalize;
}
.radio-blog-post .radio-blog-post__para {
padding-left: calc(11.5 * var(--rbp-u));
font-size: calc(37 * var(--rbp-u));
font-weight: 600;
line-height: calc(44 * var(--rbp-u)) !important;
color: #ffffff;
text-align: justify;
text-transform: lowercase;
overflow-wrap: break-word;
}
.radio-blog-post .radio-blog-post__para + .radio-blog-post__para {
margin-top: calc(42 * var(--rbp-u));
}
/* a paragraph ending in ":" that introduces the next one */
.radio-blog-post .radio-blog-post__para--lead {
padding-left: 0;
text-align: left;
}
.radio-blog-post .radio-blog-post__para--lead + .radio-blog-post__para {
margin-top: calc(49 * var(--rbp-u));
}
.radio-blog-post .radio-blog-post__para img,
.radio-blog-post .radio-blog-post__para iframe,
.radio-blog-post .radio-blog-post__para video {
max-width: 100%;
}
/* links inside the text */
.radio-blog-post .radio-blog-post__intro a,
.radio-blog-post .radio-blog-post__para a,
.radio-blog-post .radio-blog-post__heading a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 255, 255, 0.45);
text-underline-offset: 0.16em;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.radio-blog-post .radio-blog-post__intro a:hover,
.radio-blog-post .radio-blog-post__para a:hover,
.radio-blog-post .radio-blog-post__heading a:hover,
.radio-blog-post .radio-blog-post__intro a:focus-visible,
.radio-blog-post .radio-blog-post__para a:focus-visible {
color: #24bdff;
text-decoration-color: #24bdff;
}
/* readmore field: "View more" and the extra sections */
.radio-blog-post .radio-blog-post__viewmore-wrap {
margin-top: calc(64 * var(--rbp-u));
padding-left: calc(241.5 * var(--rbp-u));
}
.radio-blog-post a.radio-blog-post__viewmore {
font-family: 'Poppins', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #24bdff;
text-decoration: underline;
text-underline-offset: 4px;
}
.radio-blog-post a.radio-blog-post__viewmore:hover,
.radio-blog-post a.radio-blog-post__viewmore:focus-visible {
color: #ffffff;
}
/* ---------------------------------------------------------------------
ACTIONS : play, track / artist / station buttons, share, staff edit
--------------------------------------------------------------------- */
.radio-blog-post .radio-blog-post__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: calc(104 * var(--rbp-u));
padding-left: calc(241.5 * var(--rbp-u));
}
.radio-blog-post .radio-blog-post__btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
height: 48px;
margin: 0;
padding: 0 18px 0 22px;
border: 1px solid #95d8ff;
border-radius: 28px;
background: #0aaaee;
font-family: 'Poppins', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #ffffff !important;
text-decoration: none !important;
text-transform: capitalize;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.radio-blog-post .radio-blog-post__btn::after {
content: "";
flex: none;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-blog-post .radio-blog-post__btn--external::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}
.radio-blog-post .radio-blog-post__btn:hover,
.radio-blog-post .radio-blog-post__btn:focus-visible,
.radio-blog-post .radio-blog-post__btn--article:focus-within {
background-color: #0896d4;
box-shadow: 0 8px 18px rgba(0, 10, 30, 0.35);
transform: translateY(-1px);
}
.radio-blog-post .radio-blog-post__btn:focus-visible,
.radio-blog-post .radio-blog-post__btn--article:focus-within {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* See Full Article: the interface.next module's link is stretched, invisible, over the button */
.radio-blog-post .radio-blog-post__hit {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
border-radius: 28px;
opacity: 0;
}
.radio-blog-post .radio-blog-post__hit a,
.radio-blog-post .radio-blog-post__hit img {
display: block;
width: 100%;
height: 100%;
}
/* round buttons (play, share, edit) */
.radio-blog-post .radio-blog-post__round {
position: relative;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border: 1px solid #95d8ff;
border-radius: 50%;
background: #0aaaee;
color: #ffffff;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.radio-blog-post .radio-blog-post__round:hover,
.radio-blog-post .radio-blog-post__round:focus-visible,
.radio-blog-post .radio-blog-post__round:focus-within {
background-color: #0896d4;
box-shadow: 0 8px 18px rgba(0, 10, 30, 0.35);
}
.radio-blog-post .radio-blog-post__round:focus-visible,
.radio-blog-post .radio-blog-post__play:focus-within,
.radio-blog-post .radio-blog-post__edit:focus-within {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* Play: the player module's lspeakerplay26 / lspeakerstop26 link fills the circle */
.radio-blog-post .radio-blog-post__play > a {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
}
.radio-blog-post .radio-blog-post__play > a img {
filter: brightness(0) invert(1);
}
.radio-blog-post .radio-blog-post__play a.lspeakerplay26,
.radio-blog-post .radio-blog-post__play a.lspeakerplay26:hover {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 93'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.2 6.6L5 8.1 5 46.1C5 70.4 5.4 84.8 6 86.1C8.4 90.4 11.6 88.6 38 68.7C52.1 58.1 63.7 48.7 63.8 47.7C64 46.7 63.4 45 62.4 43.9C60 41.3 11.5 5 10.4 5C9.9 5 8.4 5.7 7.2 6.6'/%3E%3C/svg%3E") 56% 50% / 14.62px 19.71px no-repeat;
}
.radio-blog-post .radio-blog-post__play a.lspeakerstop26,
.radio-blog-post .radio-blog-post__play a.lspeakerstop26:hover {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23fff' x='5' y='5' width='14' height='14' rx='2.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
/* Share: round button that opens the share popup (bar.cfm with layout="radio") */
.radio-blog-post .radio-blog-post__share {
position: relative;
display: inline-flex;
}
.radio-blog-post .radio-blog-post__share-btn::before {
content: "";
width: 18px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 84'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M54.4 6.9C51.4 8.7 49 13.3 49 17.1C49 18.4 45.2 21.2 36.3 26.4C24.1 33.6 23.5 33.8 20.9 32.4C16.1 30 12.2 30.6 8.4 34.4C-0.5 43.3 9.6 57.3 20.8 51.6C23.4 50.3 24.1 50.6 36.7 57.9C49.3 65.1 50 65.7 50 68.7C50 72.6 54 77.6 57.9 78.5C64 79.8 71 74.2 71 68C71 60 60.4 54.4 54.3 59.2C52.9 60.3 52.3 60 37.8 51.3C28 45.5 27 44.6 27 42C27 39.3 28.1 38.4 39.7 31.6C51.9 24.4 52.5 24.2 55.1 25.6C59.9 28 63.8 27.4 67.6 23.6C76.9 14.3 65.6 0.1 54.4 6.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-blog-post .radio-blog-post__share.is-open .radio-blog-post__share-btn {
box-shadow: 0 0 0 3px rgba(127, 220, 255, 0.45);
}
.radio-blog-post .radio-blog-post__share-panel {
position: absolute;
left: 50%;
bottom: calc(100% + 16px);
z-index: 30;
width: max-content;
max-width: min(360px, calc(100vw - 32px));
padding: 16px 18px 18px;
border: 1px solid rgba(127, 220, 255, 0.35);
border-radius: 20px;
background: linear-gradient(160deg, #0b5288 0%, #063a62 55%, #04263b 100%);
box-shadow: 0 20px 44px rgba(0, 10, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
color: #ffffff;
text-align: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 8px) scale(0);
transform-origin: 50% 100%;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* pointer under the popup */
.radio-blog-post__share-panel:first-child {
gap: 5px;
}
.radio-blog-post .radio-blog-post__share-panel::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 14px;
height: 14px;
margin-left: -7px;
border-right: 1px solid rgba(127, 220, 255, 0.35);
border-bottom: 1px solid rgba(127, 220, 255, 0.35);
background: #04283f;
transform: rotate(45deg);
}
/* invisible bridge so the popup stays open while the mouse moves up to it */
.radio-blog-post .radio-blog-post__share-panel::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -18px;
height: 18px;
}
.radio-blog-post .radio-blog-post__share.is-open .radio-blog-post__share-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
@media (hover: hover) {
.radio-blog-post .radio-blog-post__share:hover .radio-blog-post__share-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
}
/* popup content (bar.cfm, layout="radio") */
.radio-blog-post .radio-share {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.radio-blog-post .radio-share__label {
margin: 0;
padding: 0;
font-family: 'Roboto', Arial, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1 !important;
letter-spacing: 0.06em;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
}
.radio-blog-post .radio-share__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.radio-blog-post .radio-share__btn {
position: relative;
display: inline-flex;
flex: none;
width: 37px;
height: 37px;
margin: 0;
padding: 0;
border: 1px solid rgba(127, 220, 255, 0.4);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.07);
background-position: center;
background-repeat: no-repeat;
background-size: 18px 18px;
color: #ffffff;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.radio-blog-post .radio-share__btn:hover,
.radio-blog-post .radio-share__btn:focus-visible {
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 10, 30, 0.4);
text-decoration: none;
}
.radio-blog-post .radio-share__btn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.radio-blog-post .radio-share__btn--facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.25-1.5 1.5-1.5h1.6V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21z'/%3E%3C/svg%3E"); background-size: 20px 20px; }
.radio-blog-post .radio-share__btn--x { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); background-size: 16px 16px; }
.radio-blog-post .radio-share__btn--linkedin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.1c0-1.22-.02-2.79-1.7-2.79-1.7 0-1.96 1.33-1.96 2.7V21h-4z'/%3E%3C/svg%3E"); background-size: 17px 17px; }
.radio-blog-post .radio-share__btn--whatsapp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round' d='M12 3.2a8.8 8.8 0 0 0-7.6 13.2L3.2 20.8l4.5-1.2A8.8 8.8 0 1 0 12 3.2z'/%3E%3Cpath fill='%23fff' d='M9.1 7.6c-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.9 4.5 3.9 2.2.9 2.7.7 3.2.7.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.2-.2-.5-.3l-1.7-.8c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.3-.8-.7-1.3-1.5-1.4-1.8-.1-.3 0-.4.1-.5l.4-.4c.1-.2.2-.3.3-.5.1-.2 0-.3 0-.4l-.8-1.9z'/%3E%3C/svg%3E"); background-size: 21px 21px; }
.radio-blog-post .radio-share__btn--email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z'/%3E%3C/svg%3E"); }
.radio-blog-post .radio-share__btn--copy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E"); background-size: 20px 20px; }
.radio-blog-post .radio-share__btn--facebook:hover, .radio-blog-post .radio-share__btn--facebook:focus-visible { background-color: #1877f2; }
.radio-blog-post .radio-share__btn--x:hover, .radio-blog-post .radio-share__btn--x:focus-visible { background-color: #000000; }
.radio-blog-post .radio-share__btn--linkedin:hover, .radio-blog-post .radio-share__btn--linkedin:focus-visible { background-color: #0a66c2; }
.radio-blog-post .radio-share__btn--whatsapp:hover, .radio-blog-post .radio-share__btn--whatsapp:focus-visible { background-color: #25d366; }
.radio-blog-post .radio-share__btn--email:hover, .radio-blog-post .radio-share__btn--email:focus-visible,
.radio-blog-post .radio-share__btn--copy:hover, .radio-blog-post .radio-share__btn--copy:focus-visible { background-color: #1a8fe0; }
/* copy link: green tick and a "Copied" bubble for 2 seconds */
.radio-blog-post .radio-share__btn--copy.is-copied {
border-color: transparent;
background-color: #19a463;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.radio-blog-post .radio-share__btn--copy.is-copied::after {
content: "Copied";
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
padding: 4px 8px;
border-radius: 6px;
background: #ffffff;
font-family: 'Roboto', Arial, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
color: #00305c;
white-space: nowrap;
transform: translateX(-50%);
}
/* Staff edit: pencil drawn here, the module's own link covers the circle */
.radio-blog-post .radio-blog-post__edit::before {
content: "";
width: 21px;
height: 21px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 99'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M70.4 10.2L64.9 15.5 74.3 24.8L83.6 34.1 88.8 28.6C91.7 25.6 94 22.6 94 21.9C94 20.2 78.7 5 77.1 5C76.4 5 73.4 7.4 70.4 10.2M32.2 48.3L5 75.5 5 84.8L5 94 14.3 94L23.5 94 50.8 66.7L78 39.5 68.7 30.2L59.5 21 32.2 48.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-blog-post .radio-blog-post__edit > :not(script):not(style) {
position: absolute;
inset: 0;
z-index: 1;
display: block;
overflow: hidden;
border-radius: 50%;
opacity: 0;
}
.radio-blog-post .radio-blog-post__edit a,
.radio-blog-post .radio-blog-post__edit img {
display: block;
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------------------
TABLETS (768 - 1199px): fixed sizes, byline above the intro
--------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.radio-blog-post .radio-blog-post__hero {
min-height: 640px;
}
.radio-blog-post .radio-blog-post__hero-inner {
padding: 140px 40px 60px;
}
.radio-blog-post .radio-blog-post__title {
max-width: 940px;
}
.radio-blog-post .radio-blog-post__title-main,
.radio-blog-post .radio-blog-post__title--long .radio-blog-post__title-main {
font-size: 72px;
line-height: 76px !important;
}
.radio-blog-post .radio-blog-post__title--longer .radio-blog-post__title-main {
font-size: 52px;
line-height: 58px !important;
}
.radio-blog-post .radio-blog-post__title-by {
margin-top: -2px;
font-size: 72px;
line-height: 78px !important;
letter-spacing: -3px;
}
.radio-blog-post .radio-blog-post__meta {
gap: 8px;
min-width: 300px;
margin-top: 28px;
}
.radio-blog-post .radio-blog-post__meta-item {
font-size: 24px;
line-height: 32px !important;
}
.radio-blog-post .radio-blog-post__body {
padding: 56px 40px 72px;
}
.radio-blog-post .radio-blog-post__inner {
max-width: 960px;
}
.radio-blog-post .radio-blog-post__intro-row {
grid-template-columns: minmax(0, 1fr);
row-gap: 28px;
}
.radio-blog-post .radio-blog-post__byline {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
align-items: center;
}
.radio-blog-post .radio-blog-post__avatar {
grid-row: 1 / span 2;
width: 56px;
height: 56px;
margin: 0;
font-size: 20px;
}
.radio-blog-post .radio-blog-post__author,
.radio-blog-post .radio-blog-post__date,
.radio-blog-post .radio-blog-post__avatar + .radio-blog-post__date {
grid-column: 2;
margin: 0;
}
.radio-blog-post .radio-blog-post__author {
align-self: end;
font-size: 20px;
line-height: 28px !important;
}
.radio-blog-post .radio-blog-post__date {
align-self: start;
font-size: 14px;
line-height: 20px !important;
}
.radio-blog-post .radio-blog-post__intro {
font-size: 28px;
line-height: 38px !important;
}
.radio-blog-post .radio-blog-post__section {
grid-template-columns: 96px minmax(0, 1fr);
margin-top: 64px;
}
.radio-blog-post .radio-blog-post__intro-row + .radio-blog-post__section {
margin-top: 56px;
}
.radio-blog-post .radio-blog-post__num {
padding-left: 0;
font-size: 64px;
line-height: 28px !important;
}
.radio-blog-post .radio-blog-post__heading {
margin-bottom: 24px;
padding-left: 0;
font-size: 40px;
line-height: 44px !important;
}
.radio-blog-post .radio-blog-post__para {
padding-left: 0;
font-size: 22px;
line-height: 32px !important;
}
.radio-blog-post .radio-blog-post__para + .radio-blog-post__para {
margin-top: 32px;
}
.radio-blog-post .radio-blog-post__para--lead + .radio-blog-post__para {
margin-top: 32px;
}
.radio-blog-post .radio-blog-post__viewmore-wrap,
.radio-blog-post .radio-blog-post__actions {
padding-left: 96px;
}
.radio-blog-post .radio-blog-post__viewmore-wrap {
margin-top: 48px;
}
.radio-blog-post .radio-blog-post__actions {
margin-top: 64px;
}
}
/* ---------------------------------------------------------------------
PHONES (up to 767px): left-aligned text, small number rail
--------------------------------------------------------------------- */
@media (max-width: 767.98px) {
.radio-blog-post .radio-blog-post__hero {
min-height: 520px;
}
.radio-blog-post .radio-blog-post__hero-inner {
padding: 120px 20px 40px;
}
.radio-blog-post .radio-blog-post__title-main,
.radio-blog-post .radio-blog-post__title--long .radio-blog-post__title-main {
font-size: 40px;
line-height: 44px !important;
}
.radio-blog-post .radio-blog-post__title--longer .radio-blog-post__title-main {
font-size: 32px;
line-height: 38px !important;
}
.radio-blog-post .radio-blog-post__title-by {
margin-top: 2px;
font-size: 38px;
line-height: 44px !important;
letter-spacing: -1.5px;
}
.radio-blog-post .radio-blog-post__meta {
gap: 4px;
min-width: 0;
margin-top: 20px;
}
.radio-blog-post .radio-blog-post__meta-item {
font-size: 18px;
line-height: 26px !important;
}
.radio-blog-post .radio-blog-post__body {
padding: 36px 20px 56px;
}
.radio-blog-post .radio-blog-post__intro-row {
row-gap: 22px;
}
.radio-blog-post .radio-blog-post__avatar {
width: 48px;
height: 48px;
font-size: 18px;
}
.radio-blog-post .radio-blog-post__author {
font-size: 18px;
line-height: 26px !important;
/* margin-top: 12px; */
}
.radio-blog-post .radio-blog-post__date {
font-size: 13px;
line-height: 18px !important;
}
.radio-blog-post .radio-blog-post__intro {
font-size: 22px;
line-height: 31px !important;
text-align: left;
}
.radio-blog-post .radio-blog-post__section {
grid-template-columns: 58px minmax(0, 1fr);
margin-top: 44px;
}
.radio-blog-post .radio-blog-post__intro-row + .radio-blog-post__section {
margin-top: 40px;
}
.radio-blog-post .radio-blog-post__num {
font-size: 42px;
line-height: 22px !important;
}
.radio-blog-post .radio-blog-post__heading {
margin-bottom: 16px;
font-size: 28px;
line-height: 32px !important;
}
.radio-blog-post .radio-blog-post__para {
font-size: 18px;
line-height: 28px !important;
text-align: left;
}
.radio-blog-post .radio-blog-post__para + .radio-blog-post__para,
.radio-blog-post .radio-blog-post__para--lead + .radio-blog-post__para {
margin-top: 20px;
}
.radio-blog-post .radio-blog-post__viewmore-wrap,
.radio-blog-post .radio-blog-post__actions {
padding-left: 0;
}
.radio-blog-post .radio-blog-post__viewmore-wrap {
margin-top: 36px;
}
.radio-blog-post .radio-blog-post__actions {
gap: 12px;
margin-top: 48px;
}
.radio-blog-post .radio-blog-post__btn {
height: 44px;
padding: 0 16px 0 18px;
font-size: 15px;
}
.radio-blog-post .radio-blog-post__round {
width: 44px;
height: 44px;
}
/* share popup opens to the left so it stays on screen */
.radio-blog-post .radio-blog-post__share-panel,
.radio-blog-post .radio-blog-post__share.is-open .radio-blog-post__share-panel {
left: auto;
right: -6px;
transform: none;
transform-origin: 100% 100%;
}
.radio-blog-post .radio-blog-post__share-panel::after {
left: auto;
right: 21px;
margin-left: 0;
}
}
@media (max-width: 767.98px) and (hover: hover) {
.radio-blog-post .radio-blog-post__share:hover .radio-blog-post__share-panel {
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.radio-blog-post .radio-blog-post__btn,
.radio-blog-post .radio-blog-post__round,
.radio-blog-post .radio-blog-post__share-panel,
.radio-blog-post .radio-share__btn,
.radio-blog-post .radio-blog-post__intro a,
.radio-blog-post .radio-blog-post__para a {
transition: none;
}
}
/* ============ end BLOG ARTICLE PAGE (view_V1.cfm) ============ */
/* =====================================================================
BLOG ARTICLE PAGE (view_V1.cfm) : DESKTOP, "Tablet-Matched" (Option 2, picked 2026-10-13)
Everything at 69% of the Figma: title 77px, intro 26px, body text 22px (the same as the
tablet layout, so nothing jumps at 1200px), numbers 60px, article about 1037px wide.
Desktop and large screens only (1200px and up). Phones and tablets are untouched.
Must stay after the BLOG ARTICLE PAGE block above (it overrides it).
Also in this block:
- Font sizes stay the same from 1200px up instead of growing with the window
(they only shrink where the article would not fit, near 1200px).
- Author name and date never drop below 15px / 13px (the date was 11px at 1280),
and the byline / number rail is at least 160px so the byline does not break up.
- The hero keeps the Figma photo framing (1920 x 1040) at every width, so the
station artwork in the photo is not cut off; from 1921px up the photo is held
at 1920px wide and its edges fade into the overlay colours instead of being
blown up and cropped (it was 3.6x and cropped at 3440px).
===================================================================== */
@media (min-width: 1200px) {
.radio-blog-post {
--rbp-u: min(0.6875px, calc((100vw - 96px) / 1512));
}
.radio-blog-post .radio-blog-post__hero {
min-height: min(54.1667vw, 1040px);
}
.radio-blog-post .radio-blog-post__author {
font-size: max(20px, calc(22 * var(--rbp-u)));
line-height: max(22px, calc(32 * var(--rbp-u))) !important;
}
.radio-blog-post .radio-blog-post__date {
font-size: max(13px, calc(14 * var(--rbp-u)));
line-height: max(18px, calc(22 * var(--rbp-u))) !important;
white-space: nowrap;
}
/* left rail (byline / numbers) never narrower than 160px so the byline does not break up */
.radio-blog-post .radio-blog-post__inner {
--rbp-rail: max(160px, calc(230 * var(--rbp-u)));
}
.radio-blog-post .radio-blog-post__intro-row {
grid-template-columns: calc(var(--rbp-rail) - 28 * var(--rbp-u)) minmax(0, calc(1253 * var(--rbp-u)));
}
.radio-blog-post .radio-blog-post__section {
grid-template-columns: var(--rbp-rail) minmax(0, 1fr);
}
.radio-blog-post .radio-blog-post__num {
padding-left: calc(var(--rbp-rail) - 111 * var(--rbp-u));
}
.radio-blog-post .radio-blog-post__viewmore-wrap,
.radio-blog-post .radio-blog-post__actions {
padding-left: calc(var(--rbp-rail) + 11.5 * var(--rbp-u));
}
}
/* measure the article itself rather than the window where supported */
@supports (width: 1cqw) {
@media (min-width: 1200px) {
.radio-blog-post {
--rbp-u: min(0.6875px, calc((100cqw - 96px) / 1512));
}
.radio-blog-post .radio-blog-post__hero {
min-height: min(54.1667cqw, 1040px);
}
}
}
/* wider than the Figma frame: hold the photo at 1920px and fade its edges */
@container (min-width: 1921px) {
.radio-blog-post .radio-blog-post__hero {
background: linear-gradient(90deg, #010202 0%, #010202 calc(50% - 960px), #00507e calc(50% + 960px), #00507e 100%);
}
.radio-blog-post .radio-blog-post__hero-media {
left: 50%;
right: auto;
width: 1920px;
margin-left: -960px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
}
}
/* ============ end BLOG ARTICLE PAGE (view_V1.cfm) : DESKTOP ============ */
/* =====================================================================
BLOG ARTICLE PAGE (view_V1.cfm) : SECTION MARKER "Timeline Dot" (picked 2026-10-13)
A glowing cyan dot replaces the section numbers (01, 02 ...) on phones, tablets and desktop.
CSS only: the numbers stay in the markup (they are aria-hidden) and are hidden here.
Must stay after the BLOG ARTICLE PAGE and DESKTOP blocks above.
===================================================================== */
.radio-blog-post .radio-blog-post__num {
font-size: 0 !important;
line-height: 0 !important;
letter-spacing: 0;
color: transparent;
}
.radio-blog-post .radio-blog-post__num::before {
content: "";
display: block;
width: 20.4px;
height: 20.4px;
margin-top: 3.8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%2324bdff' stroke-opacity='.35' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='7' fill='%2324bdff'/%3E%3Ccircle cx='12' cy='11.8' r='2.2' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-blog-post .radio-blog-post__section:has(.radio-blog-post__heading) .radio-blog-post__num::before {
margin-top: 5.8px;
}
/* phones: symbol sits next to the text */
@media (max-width: 767.98px) {
.radio-blog-post .radio-blog-post__num {
padding-left: 21.6px;
}
}
/* tablets */
@media (min-width: 768px) and (max-width: 1199.98px) {
.radio-blog-post .radio-blog-post__num {
padding-left: 46.8px;
}
.radio-blog-post .radio-blog-post__num::before {
width: 25.2px;
height: 25.2px;
margin-top: 3.4px;
}
.radio-blog-post .radio-blog-post__section:has(.radio-blog-post__heading) .radio-blog-post__num::before {
margin-top: 9.4px;
}
}
/* desktop and large screens */
@media (min-width: 1200px) {
.radio-blog-post .radio-blog-post__num {
padding-left: calc(var(--rbp-rail, 160px) - 54px);
}
.radio-blog-post .radio-blog-post__num::before {
width: 28px;
height: 28px;
margin-top: calc(22 * var(--rbp-u) - 14px);
}
.radio-blog-post .radio-blog-post__section:has(.radio-blog-post__heading) .radio-blog-post__num::before {
margin-top: calc(24 * var(--rbp-u) - 14px);
}
}
/* ============ end BLOG ARTICLE PAGE (view_V1.cfm) : SECTION MARKER ============ */
/* =====================================================================
BLOG ARTICLE PAGE (view_V1.cfm) : PHONES, "Full-Width Reader" (Option B, picked 2026-10-13)
Phones only (up to 767px), plus the short-landscape hero fix for phones held sideways.
- Share popup opens above the button row and stays on screen; share icons are 44px.
- Phones held sideways (max-height 500px, landscape, up to 1199px wide): hero about 300px
so the title, genre, station and date fit on the first screen.
- Hero unchanged in portrait. The section dots hang in the left margin so the text uses
the full width (about 340px of text on a 390px phone instead of 292px).
Must stay after the BLOG ARTICLE PAGE, DESKTOP and SECTION MARKER blocks above.
===================================================================== */
/* ---------------------------------------------------------------------
Share popup and touch targets
--------------------------------------------------------------------- */
@media (max-width: 767.98px) {
/* Share popup: was anchored to the share button and ran off the left edge
(Facebook unreachable at 320-414px). Now it opens above the whole button row. */
.radio-blog-post .radio-blog-post__actions {
position: relative;
}
.radio-blog-post .radio-blog-post__share {
position: static;
}
.radio-blog-post .radio-blog-post__share-panel,
.radio-blog-post .radio-blog-post__share.is-open .radio-blog-post__share-panel {
left: 0;
right: 0;
bottom: calc(100% + 12px);
width: auto;
max-width: none;
transform: none;
transform-origin: 50% 100%;
}
.radio-blog-post .radio-blog-post__share-panel::after {
display: none;
}
/* share icons were 37px: 44px touch targets */
.radio-blog-post .radio-share__row {
gap: 8px;
}
.radio-blog-post .radio-share__btn {
width: 44px;
height: 44px;
}
}
/* Phones turned sideways (short screens, also when 768px+ wide): the hero was
520-640px tall in a 360-430px screen, so the title started below the fold.
Now about 300px, so the title, genre, station and date fit on the first screen. */
@media (max-width: 1199.98px) and (max-height: 500px) and (orientation: landscape) {
.radio-blog-post .radio-blog-post__hero {
min-height: 300px;
}
.radio-blog-post .radio-blog-post__hero-inner {
padding-top: 24px;
padding-bottom: 24px;
}
.radio-blog-post .radio-blog-post__title-main,
.radio-blog-post .radio-blog-post__title--long .radio-blog-post__title-main {
font-size: 40px;
line-height: 44px !important;
}
.radio-blog-post .radio-blog-post__title--longer .radio-blog-post__title-main {
font-size: 32px;
line-height: 38px !important;
}
.radio-blog-post .radio-blog-post__title-by {
margin-top: 2px;
font-size: 36px;
line-height: 42px !important;
letter-spacing: -1.5px;
}
.radio-blog-post .radio-blog-post__meta {
gap: 2px;
min-width: 0;
margin-top: 14px;
}
.radio-blog-post .radio-blog-post__meta-item {
font-size: 17px;
line-height: 24px !important;
}
}
/* ---------------------------------------------------------------------
Full-Width Reader
--------------------------------------------------------------------- */
@media (max-width: 767.98px) {
/* full-width text: the dot hangs in the left margin instead of a 58px rail */
.radio-blog-post .radio-blog-post__body {
padding-left: 30px;
padding-right: 20px;
}
.radio-blog-post .radio-blog-post__section {
display: block;
position: relative;
margin-top: 36px;
}
.radio-blog-post .radio-blog-post__intro-row + .radio-blog-post__section {
margin-top: 34px;
}
.radio-blog-post .radio-blog-post__num {
position: absolute;
top: 0;
left: -21px;
padding: 0;
}
.radio-blog-post .radio-blog-post__num::before,
.radio-blog-post .radio-blog-post__section:has(.radio-blog-post__heading) .radio-blog-post__num::before {
width: 13px;
height: 13px;
margin-top: 7.5px;
}
.radio-blog-post .radio-blog-post__section:has(.radio-blog-post__heading) .radio-blog-post__num::before {
margin-top: 9.5px;
}
.radio-blog-post .radio-blog-post__para + .radio-blog-post__para,
.radio-blog-post .radio-blog-post__para--lead + .radio-blog-post__para {
margin-top: 16px;
}
.radio-blog-post .radio-blog-post__actions {
margin-top: 40px;
}
}
/* ============ end BLOG ARTICLE PAGE (view_V1.cfm) : PHONES ============ */
/* =====================================================================
BLOG ARTICLE PAGE (view_V1.cfm) : TABLETS, "Whole Photo" (Option T4, picked 2026-10-13)
Tablets 768 - 1199px. Phones (up to 767px, also split-screen tablet windows) and
desktop (1200px and up) look exactly as before.
- Share icons: invisible 44px tap area on touch screens 768px and up (they still look 37px;
this also covers iPad Pro / Galaxy Tab held sideways, which use the desktop layout).
Mouse-only screens: no change.
- Short landscape tablets (501 - 760px tall): the photo area fits the screen (440 - 640px),
so the title, genre, station and date are visible without scrolling.
- Intro and paragraphs left-aligned on tablets (justified text left wide word gaps).
- "By ..." line 56px instead of 72px on tablets, so the name stays on one line.
- Portrait tablets: the whole blog photo shows at the top of the photo area (the same
framing as desktop) and fades into the hero colour, instead of being cropped.
Must stay after the BLOG ARTICLE PAGE, DESKTOP, SECTION MARKER and PHONES blocks above.
===================================================================== */
/* ---------------------------------------------------------------------
Touch screens 768px and up (tablets, also iPad Pro / Galaxy Tab in landscape):
share icons stay 37px but get an invisible 44px tap area. Mouse-only screens: no change.
--------------------------------------------------------------------- */
@media (min-width: 768px) and (any-pointer: coarse) {
.radio-blog-post .radio-share__btn::before {
content: "";
position: absolute;
top: -4.5px;
right: -4.5px;
bottom: -4.5px;
left: -4.5px;
border-radius: 50%;
}
}
/* ---------------------------------------------------------------------
Short landscape tablets (501 - 760px tall, e.g. 1024 x 600, iPad landscape with the
Safari bars): the 640px hero was taller than the screen, so the genre, station and
date sat below the fold. The hero now fits the screen (440 - 640px).
--------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) and (min-height: 500.02px) and (max-height: 760px) {
.radio-blog-post .radio-blog-post__hero {
min-height: clamp(440px, calc(100vh - 120px), 640px);
min-height: clamp(440px, calc(100svh - 120px), 640px);
}
.radio-blog-post .radio-blog-post__hero-inner {
padding-top: 88px;
}
}
/* ---------------------------------------------------------------------
Tablets (768 - 1199px): easier reading
- Intro and paragraphs left-aligned: justified text left big gaps between words
in the 28px intro and the narrower portrait columns.
- "By ..." line 56px instead of 72px, so the name stays on one line on portrait
tablets and the title keeps the desktop / phone balance (main line larger).
Not on phones held sideways (500px tall or less), which keep their own layout.
--------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) and (min-height: 500.02px) {
.radio-blog-post .radio-blog-post__intro,
.radio-blog-post .radio-blog-post__para {
text-align: left;
}
.radio-blog-post .radio-blog-post__title-by {
margin-top: 2px;
font-size: 56px;
line-height: 62px !important;
letter-spacing: -2px;
}
}
/* ---------------------------------------------------------------------
Portrait tablets: the whole blog photo is shown (the same framing as desktop)
at the top of the hero and fades into the hero colour, instead of being cropped
to a tall shape (the artwork at the photo's edges was cut off).
--------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
.radio-blog-post .radio-blog-post__hero-media {
bottom: auto;
height: 54.1667vw;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
}
@supports (width: 1cqw) {
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
.radio-blog-post .radio-blog-post__hero-media {
height: 54.1667cqw;
}
}
}
/* ============ end BLOG ARTICLE PAGE (view_V1.cfm) : TABLETS ============ */
/* =====================================================================
MUSICA MAGAZINE (mag_list_V3.cfm) : DESKTOP, RadioSparx theme
Figma "Magazine" frame (1920 wide), picked 2026-10-13: Option 1
"Figma Exact" held at 1512 (sizes are Figma px x --u, where
--u = min(100vw, 1512px) / 1920, so nothing grows past 1512).
Desktop only (1200px and up); phones and tablets untouched.
Every rule sits under .radio-mag, the wrapper mag_list_V3.cfm puts
round the hero (new_subtitles) and the list section, so AudioSparx
(same classes, same custom.css) is not touched. custom.css loads
after style.css, so rules carry .radio-mag + the section class to
win, and !important only where custom.css or Bootstrap utilities
use it. Also resets three production custom.css rules found on the
live page: .musica-magazine-carousel { top: -80px }, an inline
.hs-hero-title and a narrow .mm-title.
Tuned after review on the live page: smaller search row, Join Today
button and play / edit circles, tighter spacing, smaller column
offset, white share icons. The hero carousel is moved by the copy
of the AudioSparx carousel script in mag_list_V3.cfm; the room
round the larger middle cover comes from transforms so that script
keeps the cover centred.
Fonts: Antonio 500 (style.css @import), Roboto, Poppins.
===================================================================== */
@media (min-width: 1200px) {
/* ---------- hero (new_subtitles output) ---------- */
.radio-mag section.musica-magazine-hero {
position: relative;
margin: 0 calc(50% - 50vw) !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden;
background: linear-gradient(90deg, #012535 0%, #06a7eb 48%, #06a5e7 50%, #012535 100%) !important;
}
.radio-mag section.musica-magazine-hero::before,
.radio-mag section.musica-magazine-hero::after {
display: none !important;
}
.radio-mag .musica-magazine-hero > .container-fluid {
padding: 0 !important;
max-width: none;
}
.radio-mag .musica-magazine-hero .hs-hero-inner {
margin: 0 !important;
padding: calc(64 * var(--u)) 24px 0 !important;
border-radius: 0 !important;
background: none !important;
min-height: 0 !important;
}
.radio-mag .musica-magazine-hero .hs-hero-title {
display: block !important;
margin: 0 !important;
font-family: 'Antonio', 'Arial Narrow', Arial, sans-serif !important;
font-weight: 500 !important;
font-size: calc(98 * var(--u)) !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
color: #fff !important;
text-transform: capitalize;
}
.radio-mag .musica-magazine-hero .hs-hero-text {
margin: calc(18 * var(--u)) auto 0 !important;
padding: 0 !important;
max-width: none;
font-family: 'Roboto', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: calc(28 * var(--u)) !important;
line-height: 1.3 !important;
color: #fff !important;
text-transform: capitalize;
}
.radio-mag .musica-magazine-hero .hs-hero-ctas {
margin: calc(36 * var(--u)) 0 0 !important;
}
.radio-mag .musica-magazine-hero .hs-hero-ctas .btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(236 * var(--u));
height: calc(64 * var(--u));
min-width: 0;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
font-family: 'Poppins', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: calc(23 * var(--u)) !important;
line-height: 1 !important;
color: #fff !important;
text-decoration: none;
background: linear-gradient(90deg, #17a2dd 0%, #0aa2e1 45%, #0588c0 100%) !important;
box-shadow:
inset calc(4 * var(--u)) calc(3 * var(--u)) calc(7 * var(--u)) rgba(255, 255, 255, .32),
inset calc(-4 * var(--u)) calc(-4 * var(--u)) calc(9 * var(--u)) rgba(0, 52, 92, .32),
0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 42, 76, .28) !important;
transition: filter .2s ease, transform .2s ease;
}
.radio-mag .musica-magazine-hero .hs-hero-ctas .btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.radio-mag .musica-magazine-hero .hs-hero-ctas .btn:focus-visible {
outline: 3px solid #fff;
outline-offset: 4px;
}
/* cover carousel: 5 across, middle cover larger, white frame */
.radio-mag .musica-magazine-carousel {
--mm-car-shift: calc(37.5 * var(--u));
position: relative;
top: 0 !important;
bottom: auto !important;
left: 0 !important;
margin: calc(84 * var(--u)) 0 0 !important;
padding: 0 0 calc(72 * var(--u)) !important;
width: 100%;
overflow: hidden;
perspective: none !important;
}
.radio-mag .musica-magazine-carousel .as-carousel-wrapper {
margin: 0 !important;
width: 100%;
overflow: hidden;
}
.radio-mag .musica-magazine-carousel .as-carousel-row {
align-items: center !important;
gap: calc(12 * var(--u)) !important;
padding: calc(60 * var(--u)) 0 !important;
overflow: visible !important;
translate: calc(-1 * var(--mm-car-shift)) 0;
}
.radio-mag .musica-magazine-carousel .as-carousel-item {
flex: 0 0 calc(358 * var(--u)) !important;
width: calc(358 * var(--u)) !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
transition: transform .5s cubic-bezier(.25, .8, .25, 1) !important;
z-index: 1;
}
/* Room for the larger middle cover comes from transforms, not margins, so the
covers' layout positions never change and the carousel script (which centres
the active cover from offsetLeft) stays exactly centred after every slide.
The row's own translate takes back the shift. */
.radio-mag .musica-magazine-carousel .as-carousel-item.active {
transform: translateX(var(--mm-car-shift)) scale(1.21) !important;
z-index: 3;
}
.radio-mag .musica-magazine-carousel .as-carousel-item.active ~ .as-carousel-item {
transform: translateX(calc(2 * var(--mm-car-shift))) !important;
}
/* set by the carousel script while it jumps between a clone and the real cover */
.radio-mag .musica-magazine-carousel .as-carousel-row.mm-car-jump .as-carousel-item {
transition: none !important;
}
.radio-mag .musica-magazine-carousel .as-carousel-item img {
display: block;
width: 100% !important;
height: calc(504 * var(--u)) !important;
object-fit: cover;
box-sizing: border-box;
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
border: calc(6 * var(--u)) solid #fff !important;
border-radius: calc(24 * var(--u)) !important;
background: #fff !important;
box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0, 24, 44, .28);
}
/* ---------- list section: ground, search row, intro ---------- */
.radio-mag section.musica-magazine-list {
position: relative;
isolation: isolate;
margin-top: 0 !important;
padding: calc(56 * var(--u)) 0 calc(110 * var(--u)) !important;
color: #fff;
background: transparent !important;
}
.radio-mag section.musica-magazine-list::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 50vw);
right: calc(50% - 50vw);
z-index: -1;
background: linear-gradient(180deg, #001621 0%, #05a4e6 100%);
pointer-events: none;
}
.radio-mag .musica-magazine-list > .container-fluid {
margin-top: 0 !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.radio-mag .musica-magazine-list .mm-search > .row {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
width: var(--mm-row);
max-width: none;
margin: 0 0 0 calc(50% - var(--mm-row) / 2) !important;
--bs-gutter-x: 0;
}
.radio-mag .musica-magazine-list .mm-search > .row > div {
margin: 0 !important;
padding: 0 !important;
/* width: auto; */
max-width: none;
}
.radio-mag .musica-magazine-list .mm-search > .row > div:first-child {
flex: 1 1 auto;
}
.radio-mag .musica-magazine-list .mm-search > .row > .custom-width-searchMag {
flex: 0 0 auto;
}
.radio-mag .musica-magazine-list .mm-search-bx {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
height: calc(72 * var(--u));
margin: 0 !important;
border: calc(2 * var(--u)) solid #2189ab;
border-radius: calc(16 * var(--u));
background: #001b26;
overflow: hidden;
box-shadow: 0 0 calc(18 * var(--u)) rgba(0, 0, 0, .25);
}
/* search icon + divider (Figma); not in the markup, drawn here */
.radio-mag .musica-magazine-list .mm-search-bx::before {
content: "";
flex: 0 0 calc(84 * var(--u));
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E") no-repeat calc(34 * var(--u)) 50% / calc(32 * var(--u)) calc(32 * var(--u)),
linear-gradient(#2189ab, #2189ab) no-repeat 100% 50% / calc(2 * var(--u)) calc(48 * var(--u));
}
.radio-mag .musica-magazine-list .mm-search-bx .mm-search-input {
flex: 1 1 auto;
width: 1%;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 calc(20 * var(--u)) 0 calc(28 * var(--u)) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-family: 'Poppins', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: calc(22 * var(--u)) !important;
line-height: 1.2 !important;
color: #fff !important;
}
.radio-mag .musica-magazine-list .mm-search-bx .mm-search-input::placeholder {
color: #fff !important;
opacity: 1;
text-transform: capitalize;
}
.radio-mag .musica-magazine-list .mm-search-bx:focus-within {
border-color: #45b6fc;
box-shadow: 0 0 0 calc(3 * var(--u)) rgba(69, 182, 252, .35);
}
.radio-mag .musica-magazine-list .mm-search-bx .mm-search-btn {
flex: 0 0 calc(96 * var(--u));
display: flex !important;
align-items: center !important;
justify-content: center;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #45b6fc !important;
box-shadow: none !important;
color: #fff !important;
font-size: calc(34 * var(--u)) !important;
line-height: 1 !important;
}
.radio-mag .musica-magazine-list .mm-search-bx .mm-search-btn:hover {
background: #5ec1ff !important;
}
.radio-mag .musica-magazine-list .mm-search-bx .mm-search-btn .bi::before {
font-weight: 700 !important;
}
.radio-mag .musica-magazine-list .custom-width-searchMag > .d-flex {
height: 100%;
align-items: stretch !important;
}
.radio-mag .musica-magazine-list .mm-search-month,
.radio-mag .musica-magazine-list .mm-search-year {
height: calc(72 * var(--u)) !important;
border: 0;
border-radius: calc(16 * var(--u)) !important;
background: linear-gradient(90deg, #3687c9 0%, #44b3fa 100%) !important;
box-shadow:
inset calc(2 * var(--u)) 0 0 rgba(255, 255, 255, .12),
0 0 calc(14 * var(--u)) rgba(69, 170, 250, .3) !important;
color: #fff !important;
}
.radio-mag .musica-magazine-list .mm-search-month {
flex: 0 0 calc(290 * var(--u)) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: calc(22 * var(--u));
margin: 0 calc(24 * var(--u)) !important;
padding: 0 calc(20 * var(--u)) !important;
}
.radio-mag .musica-magazine-list .mm-search-year {
flex: 0 0 calc(190 * var(--u)) !important;
display: flex;
padding: 0 !important;
}
.radio-mag .musica-magazine-list .mm-search-month .btn,
.radio-mag .musica-magazine-list .mm-search-year .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
min-height: 0;
margin: 0 !important;
padding: 0 calc(6 * var(--u)) !important;
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
font-family: 'Poppins', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: calc(22 * var(--u)) !important;
line-height: 1 !important;
color: #fff !important;
}
.radio-mag .musica-magazine-list .mm-search-month .monthPrev,
.radio-mag .musica-magazine-list .mm-search-month .monthNext {
font-size: calc(30 * var(--u)) !important;
}
.radio-mag .musica-magazine-list .mm-search-month .dropdown {
display: flex;
height: 100%;
}
.radio-mag .musica-magazine-list .mm-search-month .mm-selected-month {
min-width: calc(76 * var(--u));
}
.radio-mag .musica-magazine-list .mm-search-year .dropdown,
.radio-mag .musica-magazine-list .mm-search-year .dropdown > .btn {
width: 100%;
height: 100%;
}
.radio-mag .musica-magazine-list .mm-search-month .btn:hover,
.radio-mag .musica-magazine-list .mm-search-year .btn:hover {
color: #d9f2ff !important;
}
.radio-mag .musica-magazine-list .mm-search-month .btn:focus-visible,
.radio-mag .musica-magazine-list .mm-search-year .btn:focus-visible,
.radio-mag .musica-magazine-list .mm-search-bx .mm-search-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
}
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-toggle::after {
display: none !important;
}
/* open month / year list */
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-menu {
top: calc(100% + 14px) !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
inset: calc(100% + 14px) 0 auto auto !important;
transform: none !important;
width: 280px;
max-height: 420px;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(69, 182, 252, .45) !important;
border-radius: 16px !important;
background: #04263b !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
overflow: hidden auto;
z-index: 20;
}
.radio-mag .musica-magazine-list .mm-search-month .dropdown-menu {
right: 50% !important;
inset: calc(100% + 14px) auto auto 50% !important;
transform: translateX(-50%) !important;
}
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-menu-header {
padding: 14px 22px !important;
border-bottom: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(90deg, #3687c9 0%, #44b3fa 100%) !important;
font: 500 16px/1.2 'Poppins', Arial, sans-serif !important;
color: #fff !important;
text-align: left !important;
}
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-menu-body ul {
margin: 0;
padding: 6px 0;
list-style: none;
}
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-item {
padding: 10px 22px !important;
background: transparent !important;
font: 400 16px/1.3 'Poppins', Arial, sans-serif !important;
color: #e6f4fc !important;
}
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-item:hover,
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-item:focus {
background: rgba(10, 170, 238, .22) !important;
color: #fff !important;
}
.radio-mag .musica-magazine-list .mm-title {
width: auto !important;
max-width: none !important;
margin: calc(56 * var(--u)) 0 0 !important;
padding: 0 !important;
font-family: 'Roboto', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: calc(28 * var(--u)) !important;
line-height: 1.45 !important;
letter-spacing: .02em;
color: #fff !important;
text-align: center !important;
text-transform: capitalize;
}
/* ---------- magazine grid (magList_V3 / mag_view_V3) ---------- */
.radio-mag .musica-magazine-list #magContainer {
height: auto !important;
}
.radio-mag .musica-magazine-list .mm-list-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: calc(51 * var(--u));
row-gap: var(--mm-row-gap);
align-items: start;
width: var(--mm-grid);
max-width: none;
margin: 0 0 0 calc(50% - var(--mm-grid) / 2) !important;
padding: calc(64 * var(--u)) 0 var(--mm-lift) !important;
--bs-gutter-x: 0;
--bs-gutter-y: 0;
}
.radio-mag .musica-magazine-list .mm-list-grid > .col {
position: relative;
flex: none;
width: auto !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* middle column raised (Figma): the left and right columns sit lower by
--mm-lift; the grid's bottom padding keeps room for the last row */
.radio-mag .musica-magazine-list .mm-list-grid > .col:nth-child(3n + 1),
.radio-mag .musica-magazine-list .mm-list-grid > .col:nth-child(3n) {
transform: translateY(var(--mm-lift));
}
/* while the search / month / year filter hides issues (jQuery .hide() writes
style="display: none"), the counting above no longer matches what is on
screen, so the issues after a hidden one drop the offset and line up */
.radio-mag .musica-magazine-list .mm-list-grid > .col[style*="display: none"] ~ .col {
transform: none;
}
.radio-mag .musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) {
display: block;
position: relative;
z-index: 0;
border: calc(6 * var(--u)) solid #baeaff;
border-radius: calc(28 * var(--u));
background: var(--mm-card-ground, #0b3a52);
overflow: hidden;
}
.radio-mag .musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) > img.mm-poster-img {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 519 / 736;
object-fit: cover;
margin: 0;
border: 0 !important;
border-radius: calc(22 * var(--u)) !important;
box-shadow: none !important;
}
.radio-mag .musica-magazine-list .mm-list-grid > .col > a:not(.mm-link):focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
/* share button + menu, themed */
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_box.mm-poster-share-box {
top: calc(22 * var(--u)) !important;
right: calc(22 * var(--u)) !important;
z-index: 4;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_btn {
width: calc(52 * var(--u));
height: calc(52 * var(--u));
min-width: 36px;
min-height: 36px;
border-radius: 50%;
background: rgba(1, 37, 53, .72);
box-shadow: 0 0 0 calc(2 * var(--u)) rgba(186, 234, 255, .65);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_btn .mm_share_icon {
width: 55%;
height: 55%;
filter: brightness(0) invert(1);
}
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_menu {
top: calc(100% + 10px) !important;
right: 0 !important;
transform: none !important;
padding: 8px !important;
border: 1px solid rgba(69, 182, 252, .45);
border-radius: 999px !important;
background: #04263b !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, .45) !important;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_link {
width: 40px;
height: 40px;
min-width: 40px;
background: rgba(10, 170, 238, .22) !important;
}
/* the server's share icons are dark purple, unreadable on the navy menu: show them white */
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_link img,
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_link .mm_share_icon {
width: 18px !important;
height: 18px !important;
object-fit: contain;
filter: brightness(0) invert(1);
}
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_link:hover {
background: rgba(10, 170, 238, .4) !important;
}
/* play + staff edit: white circles with blue icons (Figma). The server
images stay as the click targets, made transparent. */
.radio-mag .musica-magazine-list .mm-list-grid .mm-bottom-buttons {
position: absolute;
z-index: 3;
display: flex;
width: auto;
margin: 0;
padding: 0;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons {
position: relative;
flex: none;
width: var(--mm-btn);
height: var(--mm-btn);
border-radius: 50%;
background: #fff no-repeat 50% 50% / 46% 46%;
box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 40, 70, .25);
transition: transform .2s ease, box-shadow .2s ease;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons:first-child {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f8ff0' d='M8 5.14v13.72a1 1 0 0 0 1.52.85l10.6-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14z'/%3E%3C/svg%3E");
background-position: 56% 50%;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons + .mm-icons {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f8ff0' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z'/%3E%3C/svg%3E");
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons > * {
position: absolute;
inset: 0;
display: block;
border-radius: 50%;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons img {
width: 100% !important;
height: 100% !important;
opacity: 0;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons:hover {
transform: scale(1.06);
box-shadow: 0 0 0 calc(4 * var(--u)) rgba(255, 255, 255, .35), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 40, 70, .3);
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons a:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
/* text box: issue title, number, date (d-none in the markup) */
.radio-mag .musica-magazine-list .mm-list-grid .mm-link {
text-decoration: none;
color: inherit;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx {
height: auto !important;
border: 0;
background: none;
color: #fff;
font-family: 'Roboto', Arial, sans-serif;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 {
margin: 0;
font-family: 'Roboto', Arial, sans-serif !important;
font-weight: 700;
color: #fff;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
text-wrap: balance;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 ~ div {
color: #fff;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx .d-flex {
display: none !important;
}
}
/* ---------- Figma Exact: dimmed covers, blue issue card on hover ----------
Covers dimmed as in the Figma. Hover (or keyboard focus) turns the cover into
the blue issue card (title, issue, date, play, staff edit, share), as the Figma
"Italian Heart" card. Touch screens at desktop size: full-colour covers with
play and share always showing. */
@media (min-width: 1200px) {
.radio-mag {
--u: calc(min(100vw, 1512px) / 1920);
--mm-row: calc(1699 * var(--u));
--mm-grid: calc(1699 * var(--u));
--mm-row-gap: calc(54 * var(--u));
--mm-lift: calc(190 * var(--u));
--mm-btn: calc(64 * var(--u));
--mm-card-ground: transparent;
}
.radio-mag .musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) > img.mm-poster-img {
opacity: .58;
transition: opacity .25s ease;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx {
position: absolute;
inset: 0;
z-index: 2;
display: flex !important;
flex-direction: column;
align-items: center !important;
justify-content: center !important;
padding: calc(60 * var(--u)) calc(44 * var(--u)) calc(220 * var(--u)) !important;
border: calc(6 * var(--u)) solid #18b1fd !important;
border-radius: calc(28 * var(--u));
background: #0089cf !important;
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s ease, visibility .25s;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 {
font-size: calc(44 * var(--u)) !important;
line-height: 1.18 !important;
-webkit-line-clamp: 5;
line-clamp: 5;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 ~ div {
font: 500 calc(32 * var(--u))/1.4 'Roboto', Arial, sans-serif;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 + div {
margin-top: calc(26 * var(--u));
}
.radio-mag .musica-magazine-list .mm-list-grid .mm-bottom-buttons {
left: 0;
right: 0;
bottom: calc(120 * var(--u));
justify-content: center;
gap: calc(16 * var(--u));
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_box.mm-poster-share-box {
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s;
}
.radio-mag .musica-magazine-list .mm-list-grid > .col:hover .mm-list-grid-text-bx,
.radio-mag .musica-magazine-list .mm-list-grid > .col:focus-within .mm-list-grid-text-bx,
.radio-mag .musica-magazine-list .mm-list-grid > .col:hover .mm-bottom-buttons,
.radio-mag .musica-magazine-list .mm-list-grid > .col:focus-within .mm-bottom-buttons,
.radio-mag .musica-magazine-list .mm-list-grid > .col:hover .mm_share_box.mm-poster-share-box,
.radio-mag .musica-magazine-list .mm-list-grid > .col:focus-within .mm_share_box.mm-poster-share-box {
opacity: 1;
visibility: visible;
}
}
/* touch screens at desktop size: no hover, so full-colour covers with play + share showing */
@media (min-width: 1200px) and (hover: none) {
.radio-mag .musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) > img.mm-poster-img { opacity: 1; }
.radio-mag .musica-magazine-list .mm-list-grid .mm-list-grid-text-bx { display: none !important; }
.radio-mag .musica-magazine-list .mm-list-grid .mm-bottom-buttons { left: auto; right: calc(28 * var(--u)); bottom: calc(28 * var(--u)); --mm-btn: calc(56 * var(--u)); gap: calc(12 * var(--u)); opacity: 1; visibility: visible; }
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_box.mm-poster-share-box { opacity: 1; visibility: visible; }
}
/* ============ end MUSICA MAGAZINE (mag_list_V3.cfm) : DESKTOP ============ */
/* =====================================================================
MUSICA MAGAZINE (mag_list_V3.cfm) : PHONES AND TABLETS (below 1200px)
Cinematic Poster layout, RadioSparx theme.
Carries the RadioSparx desktop theme down and fixes what broke on
touch screens. Same scope as the desktop block (.radio-mag), so
AudioSparx and the desktop layout (1200px and up) are untouched.
Font sizes in rem so larger text settings scale them; side padding
follows the safe area on phones held sideways.
===================================================================== */
@media (max-width: 1199.98px) {
.radio-mag {
--m-pad-l: max(16px, env(safe-area-inset-left));
--m-pad-r: max(16px, env(safe-area-inset-right));
--m-frame: #baeaff;
--m-blue: #0089cf;
--m-blue-edge: #18b1fd;
--m-field: #001b26;
--m-field-edge: #2189ab;
--m-arrow: #45b6fc;
--m-pill: linear-gradient(90deg, #3687c9 0%, #44b3fa 100%);
--m-menu: #04263b;
}
/* ---------- hero ---------- */
.radio-mag section.musica-magazine-hero {
position: relative;
margin: 0 calc(50% - 50vw) !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden;
background: linear-gradient(90deg, #012535 0%, #06a7eb 48%, #06a5e7 50%, #012535 100%) !important;
}
.radio-mag section.musica-magazine-hero::before,
.radio-mag section.musica-magazine-hero::after {
display: none !important;
}
.radio-mag section.musica-magazine-hero > .container-fluid {
padding: 0 !important;
max-width: none;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner {
margin: 0 !important;
padding: clamp(28px, 6vw, 56px) var(--m-pad-r) 0 var(--m-pad-l) !important;
border-radius: 0 !important;
background: none !important;
min-height: 0 !important;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-title {
display: block !important;
margin: 0 !important;
font-family: 'Antonio', 'Arial Narrow', Arial, sans-serif !important;
font-weight: 500 !important;
font-size: clamp(2.125rem, 1.4rem + 4.2vw, 4rem) !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
color: #fff !important;
text-transform: capitalize;
text-wrap: balance;
overflow-wrap: break-word;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-text {
margin: 12px auto 0 !important;
padding: 0 !important;
max-width: 40rem;
font-family: 'Roboto', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.125rem) !important;
line-height: 1.5 !important;
text-align: center;
color: #fff !important;
text-transform: capitalize;
text-wrap: balance;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-ctas {
margin: 20px 0 0 !important;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-ctas .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
min-width: 160px;
padding: 0 28px !important;
border: 0 !important;
border-radius: 999px !important;
font-family: 'Poppins', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: 1rem !important;
line-height: 1.2 !important;
color: #fff !important;
text-decoration: none;
background: linear-gradient(90deg, #17a2dd 0%, #0aa2e1 45%, #0588c0 100%) !important;
box-shadow:
inset 3px 2px 6px rgba(255, 255, 255, .32),
inset -3px -3px 7px rgba(0, 52, 92, .32),
0 6px 14px rgba(0, 42, 76, .28) !important;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-ctas .btn:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
/* cover carousel: run by radioMagCarousel(); spacing round the larger
middle cover comes from transforms so the script keeps it centred */
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: 56vw;
--car-gap: 10px;
--car-scale: 1.12;
--car-shift: calc((var(--car-scale) - 1) * var(--car-w) / 2);
position: relative;
top: 0 !important;
bottom: auto !important;
left: 0 !important;
margin: clamp(24px, 5vw, 44px) 0 0 !important;
padding: 0 0 clamp(28px, 6vw, 48px) !important;
width: 100%;
overflow: hidden;
perspective: none !important;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-wrapper {
margin: 0 !important;
width: 100%;
overflow: hidden;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-row {
align-items: center !important;
gap: var(--car-gap) !important;
padding: calc(var(--car-w) * 1.408 * (var(--car-scale) - 1) / 2 + 4px) 0 !important;
overflow: visible !important;
translate: calc(-1 * var(--car-shift)) 0;
touch-action: pan-y;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-item {
flex: 0 0 var(--car-w) !important;
width: var(--car-w) !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
transition: transform .5s cubic-bezier(.25, .8, .25, 1) !important;
z-index: 1;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-item.active {
transform: translateX(var(--car-shift)) scale(var(--car-scale)) !important;
z-index: 3;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-item.active ~ .as-carousel-item {
transform: translateX(calc(2 * var(--car-shift))) !important;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-row.mm-car-jump .as-carousel-item {
transition: none !important;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-item img {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 358 / 504;
object-fit: cover;
box-sizing: border-box;
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
border: 4px solid #fff !important;
border-radius: 14px !important;
background: #fff !important;
box-shadow: 0 8px 20px rgba(0, 24, 44, .28);
}
/* ---------- list section ---------- */
.radio-mag section.musica-magazine-list {
position: relative;
isolation: isolate;
margin-top: 0 !important;
padding: 28px 0 48px !important;
color: #fff;
background: transparent !important;
}
.radio-mag section.musica-magazine-list::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 50vw);
right: calc(50% - 50vw);
z-index: -1;
background: linear-gradient(180deg, #001621 0%, #05a4e6 100%);
pointer-events: none;
}
.radio-mag section.musica-magazine-list > .container-fluid {
margin-top: 0 !important;
padding-left: var(--m-pad-l) !important;
padding-right: var(--m-pad-r) !important;
}
/* search row: field on its own line, Month and Year under it (phones) */
.radio-mag section.musica-magazine-list .mm-search > .row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
width: auto;
max-width: none;
margin: 0 !important;
--bs-gutter-x: 0;
}
.radio-mag section.musica-magazine-list .mm-search > .row > div {
width: auto;
max-width: none;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.radio-mag section.musica-magazine-list .mm-search-bx {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
height: 48px;
margin: 0 !important;
border: 2px solid var(--m-field-edge);
border-radius: 12px;
background: var(--m-field);
overflow: hidden;
}
.radio-mag section.musica-magazine-list .mm-search-bx::before {
content: "";
flex: 0 0 46px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E") no-repeat 14px 50% / 22px 22px,
linear-gradient(var(--m-field-edge), var(--m-field-edge)) no-repeat 100% 50% / 2px 26px;
}
.radio-mag section.musica-magazine-list .mm-search-bx .mm-search-input {
flex: 1 1 auto;
width: 1%;
min-width: 0;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 10px 0 12px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-family: 'Poppins', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: max(16px, 1rem) !important;
line-height: 1.2 !important;
color: #fff !important;
}
.radio-mag section.musica-magazine-list .mm-search-bx .mm-search-input::placeholder {
color: rgba(255, 255, 255, .85) !important;
opacity: 1;
text-transform: capitalize;
}
.radio-mag section.musica-magazine-list .mm-search-bx:focus-within {
border-color: var(--m-arrow);
box-shadow: 0 0 0 3px rgba(69, 182, 252, .35);
}
.radio-mag section.musica-magazine-list .mm-search-bx .mm-search-btn {
flex: 0 0 52px;
display: flex !important;
align-items: center !important;
justify-content: center;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--m-arrow) !important;
box-shadow: none !important;
color: #fff !important;
font-size: 1.5rem !important;
line-height: 1 !important;
}
.radio-mag section.musica-magazine-list .custom-width-searchMag > .d-flex {
display: flex !important;
align-items: stretch !important;
gap: 10px;
}
.radio-mag section.musica-magazine-list .mm-search-month,
.radio-mag section.musica-magazine-list .mm-search-year {
position: relative;
height: 48px !important;
margin: 0 !important;
border: 0;
border-radius: 12px !important;
background: var(--m-pill) !important;
box-shadow: 0 0 12px rgba(69, 170, 250, .28) !important;
color: #fff !important;
}
.radio-mag section.musica-magazine-list .mm-search-month {
flex: 1 1 auto !important;
min-width: 0;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 2px !important;
}
.radio-mag section.musica-magazine-list .mm-search-year {
flex: 0 0 112px !important;
display: flex;
padding: 0 !important;
}
.radio-mag section.musica-magazine-list .mm-search-month .btn,
.radio-mag section.musica-magazine-list .mm-search-year .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px;
height: 100% !important;
margin: 0 !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: 10px;
background: transparent !important;
box-shadow: none !important;
font-family: 'Poppins', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: 1rem !important;
line-height: 1 !important;
color: #fff !important;
}
.radio-mag section.musica-magazine-list .mm-search-month .monthPrev,
.radio-mag section.musica-magazine-list .mm-search-month .monthNext {
flex: 0 0 48px;
font-size: 1.375rem !important;
}
/* the month and year lists hang from the pill, not from the small button, so they stay on screen */
.radio-mag section.musica-magazine-list .mm-search-month .dropdown,
.radio-mag section.musica-magazine-list .mm-search-year .dropdown {
position: static !important;
display: flex;
flex: 1 1 auto;
height: 100%;
}
.radio-mag section.musica-magazine-list .mm-search-year .dropdown > .btn,
.radio-mag section.musica-magazine-list .mm-search-month .dropdown > .btn {
flex: 1 1 auto;
}
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-toggle::after {
display: none !important;
}
.radio-mag section.musica-magazine-list .mm-search-month .btn:focus-visible,
.radio-mag section.musica-magazine-list .mm-search-year .btn:focus-visible,
.radio-mag section.musica-magazine-list .mm-search-bx .mm-search-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
}
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-menu {
inset: calc(100% + 8px) 0 auto auto !important;
top: calc(100% + 8px) !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
width: min(260px, calc(100vw - 32px)) !important;
max-height: min(60vh, 22rem);
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(69, 182, 252, .45) !important;
border-radius: 14px !important;
background: var(--m-menu) !important;
box-shadow: 0 16px 32px rgba(0, 0, 0, .45) !important;
overflow: hidden auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
z-index: 30;
}
.radio-mag section.musica-magazine-list .mm-search-month .dropdown-menu {
inset: calc(100% + 8px) auto auto 0 !important;
left: 0 !important;
right: auto !important;
width: 100% !important;
}
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-menu-header {
padding: 12px 18px !important;
border-bottom: 1px solid rgba(255, 255, 255, .12);
background: var(--m-pill) !important;
font: 500 1rem/1.3 'Poppins', Arial, sans-serif !important;
color: #fff !important;
text-align: left !important;
}
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-menu-body ul {
margin: 0;
padding: 4px 0;
list-style: none;
}
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-item {
display: flex;
align-items: center;
min-height: 44px;
padding: 8px 18px !important;
background: transparent !important;
font: 400 1rem/1.3 'Poppins', Arial, sans-serif !important;
color: #e6f4fc !important;
white-space: normal;
}
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-item:hover,
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-item:focus {
background: rgba(10, 170, 238, .22) !important;
color: #fff !important;
}
.radio-mag section.musica-magazine-list .mm-title {
width: auto !important;
max-width: 40rem !important;
margin: 24px 0 0 !important;
padding: 0 !important;
font-family: 'Roboto', Arial, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.125rem) !important;
line-height: 1.5 !important;
letter-spacing: .01em;
color: #fff !important;
text-align: left !important;
text-transform: capitalize;
}
/* ---------- issue grid: common card parts ---------- */
.radio-mag section.musica-magazine-list #magContainer {
height: auto !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid {
display: grid !important;
align-items: start;
width: auto;
max-width: none;
margin: 24px 0 0 !important;
padding: 0 !important;
--bs-gutter-x: 0;
--bs-gutter-y: 0;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col {
position: relative;
flex: none;
width: auto !important;
min-width: 0;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) {
display: block;
position: relative;
border: 4px solid var(--m-frame);
border-radius: 16px;
background: #0b3a52;
overflow: hidden;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) > img.mm-poster-img {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 519 / 736;
object-fit: cover;
margin: 0;
border: 0 !important;
border-radius: 12px !important;
box-shadow: none !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col > a:not(.mm-link):focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
/* share: 44px tap area, white icons on navy */
/* no stacking layer of its own, so an open share list rises above the next issues' buttons */
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_box.mm-poster-share-box {
top: 8px !important;
right: 8px !important;
z-index: auto;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_btn {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(1, 37, 53, .75);
box-shadow: 0 0 0 2px rgba(186, 234, 255, .7);
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_btn::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_btn .mm_share_icon {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_menu {
top: calc(100% + 8px) !important;
right: 0 !important;
left: auto !important;
transform: none !important;
padding: 6px !important;
border: 1px solid rgba(69, 182, 252, .45);
border-radius: 999px !important;
background: var(--m-menu) !important;
box-shadow: 0 12px 26px rgba(0, 0, 0, .45) !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_menu.mm_share_active {
gap: 4px !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_link {
width: 44px;
height: 44px;
min-width: 44px;
background: rgba(10, 170, 238, .22) !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_link img,
.radio-mag section.musica-magazine-list .mm-list-grid .mm_share_link .mm_share_icon {
width: 18px !important;
height: 18px !important;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* play (+ staff edit): the empty button strip used to sit over the cover and swallow taps */
.radio-mag section.musica-magazine-list .mm-list-grid .mm-bottom-buttons {
position: absolute;
left: auto !important;
right: 12px !important;
bottom: 12px !important;
z-index: 3;
display: flex;
gap: 8px;
width: auto !important;
margin: 0;
padding: 0;
pointer-events: none;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-icons {
position: relative;
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff no-repeat 50% 50% / 46% 46%;
box-shadow: 0 4px 12px rgba(0, 40, 70, .3);
pointer-events: auto;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-icons:first-child {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f8ff0' d='M8 5.14v13.72a1 1 0 0 0 1.52.85l10.6-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14z'/%3E%3C/svg%3E");
background-position: 56% 50%;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-icons + .mm-icons {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f8ff0' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z'/%3E%3C/svg%3E");
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-icons > * {
position: absolute;
inset: 0;
display: block;
border-radius: 50%;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-icons img {
width: 100% !important;
height: 100% !important;
opacity: 0;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-icons a:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
/* issue title / number / date box: hidden unless an option shows it */
.radio-mag section.musica-magazine-list .mm-list-grid .mm-link {
display: block;
text-decoration: none;
color: inherit;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx,
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx * {
white-space: normal !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx {
height: auto !important;
border: 0;
color: #fff;
font-family: 'Roboto', Arial, sans-serif;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 {
margin: 0;
font-family: 'Roboto', Arial, sans-serif !important;
font-weight: 600;
color: #fff;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx .d-flex {
display: none !important;
}
}
/* tablets: search field, Month and Year on one line */
@media (min-width: 768px) and (max-width: 1199.98px) {
.radio-mag section.musica-magazine-list .mm-search > .row {
/* grid-template-columns: minmax(0, 1fr) auto; */
gap: 12px;
}
.radio-mag section.musica-magazine-list .mm-search-month {
flex: 0 0 220px !important;
}
.radio-mag section.musica-magazine-list .mm-search-year {
flex: 0 0 120px !important;
}
.radio-mag section.musica-magazine-list .mm-search-month .dropdown-menu {
width: 100% !important;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: 27vw;
--car-gap: 12px;
--car-scale: 1.16;
}
}
/* ---------- Cinematic Poster layout ----------
Poster hero: big left-aligned title over the gradient, larger covers in the
carousel. Issues 2 a row on phones, 3 on tablets with the side columns
lowered (the middle one stands higher, like desktop), each with a slim blue
caption (issue number and date, then the title) that is always showing, so
touch users see what each issue is. */
@media (max-width: 1199.98px) {
.radio-mag section.musica-magazine-hero .hs-hero-inner {
text-align: left !important;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-title {
font-size: clamp(2.5rem, 1.5rem + 5.2vw, 3.5rem) !important;
line-height: 1.02 !important;
text-align: center;
text-wrap: balance;
}
/* .radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-text {
margin-left: 0 !important;
margin-right: 0 !important;
} */
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-ctas {
justify-content: center !important;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: 62vw;
--car-scale: 1.1;
}
.radio-mag section.musica-magazine-list .mm-list-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 12px;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col {
display: flex;
flex-direction: column;
border: 4px solid var(--m-frame);
border-radius: 16px;
background: var(--m-blue);
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) {
border: 0;
border-radius: 12px 12px 0 0;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) > img.mm-poster-img {
border-radius: 0 !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx {
display: flex !important;
flex-direction: column;
align-items: stretch !important;
justify-content: flex-start !important;
padding: 10px 12px 12px !important;
border: 0 !important;
border-top: 3px solid var(--m-blue-edge) !important;
border-radius: 0 0 12px 12px;
background: var(--m-blue) !important;
text-align: left !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx > div {
display: flex;
flex-direction: column;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 {
order: 2;
margin-top: 4px;
font-size: .875rem !important;
line-height: 1.3 !important;
min-height: 2.6em;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 ~ div {
order: 1;
font: 500 .75rem/1.4 'Roboto', Arial, sans-serif;
letter-spacing: .02em;
text-transform: uppercase;
color: #d6f1ff;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 + div + div {
order: 1;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
/* play sits on the cover's corner, just above the caption */
.radio-mag section.musica-magazine-list .mm-list-grid .mm-bottom-buttons {
top: auto;
bottom: auto !important;
right: 10px !important;
margin-top: -54px;
margin-bottom: 54px;
position: relative;
align-self: flex-end;
order: 0;
height: 0;
overflow: visible;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col > a:not(.mm-link) { order: -2; }
.radio-mag section.musica-magazine-list .mm-list-grid > .col > .mm-link { order: 1; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.radio-mag section.musica-magazine-list .mm-list-grid {
--m-lift: 8vw;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px 18px;
padding-bottom: var(--m-lift) !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col:nth-child(3n + 1),
.radio-mag section.musica-magazine-list .mm-list-grid > .col:nth-child(3n) {
transform: translateY(var(--m-lift));
}
.radio-mag section.musica-magazine-list .mm-list-grid > .col[style*="display: none"] ~ .col {
transform: none;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 {
font-size: 1rem !important;
}
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 ~ div {
font-size: .8125rem;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: 30vw;
--car-scale: 1.14;
}
}
/* ---------- dates, list stacking, phones held sideways, reduced motion ---------- */
@media (max-width: 1199.98px) {
/* issue date: when it has to wrap, break at the space ("Thursday" / "2025-07-31"), not after a hyphen */
.radio-mag section.musica-magazine-list .mm-list-grid .mm-list-grid-text-bx h4 ~ div {
text-wrap: balance;
}
/* open Month and Year lists sit above the issue covers and their buttons */
.radio-mag section.musica-magazine-list .mm-search {
z-index: 10;
}
}
/* phones held sideways: hero sized by the screen height so the search row is one swipe away */
@media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) {
.radio-mag section.musica-magazine-hero .hs-hero-inner {
padding-top: 20px !important;
}
.radio-mag section.musica-magazine-hero .hs-hero-inner .hs-hero-title {
font-size: 2.25rem !important;
}
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: min(24vw, 34vh);
--car-scale: 1.1;
margin-top: 16px !important;
padding-bottom: 20px !important;
}
@supports (height: 1svh) {
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: min(24vw, 34svh);
}
}
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
.radio-mag section.musica-magazine-hero .musica-magazine-carousel .as-carousel-item {
transition: none !important;
}
}
/* ============ end MUSICA MAGAZINE (mag_list_V3.cfm) : PHONES AND TABLETS ============ */
/* =====================================================================
MUSICA MAGAZINE (mag_list_V3.cfm) : TABLETS, Height-Aware Hero
Tablet pass on top of the desktop and phone/tablet blocks above.
- touch screens 1200px and wider: 44px tap areas that do not change
how the controls look;
- Month and Year lists sized for the browser bars;
- carousel covers sized by the space the window has: capped at 300px
wide in 484 to 767px windows (split screen, 7-inch tablets,
foldables) and by the screen height on tablets held sideways.
Phones, upright tablets and mouse desktops are unchanged.
===================================================================== */
/* touch screens at desktop size (iPad Pro landscape, Android tablets landscape,
Surface in tablet mode, touch laptops): tap areas grow to 44px without
changing how the controls look */
@media (min-width: 1200px) and (any-pointer: coarse) {
.radio-mag .musica-magazine-hero .hs-hero-ctas .btn,
.radio-mag .musica-magazine-list .mm-search-month .monthPrev,
.radio-mag .musica-magazine-list .mm-search-month .monthNext,
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_btn,
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_link {
position: relative;
}
.radio-mag .musica-magazine-hero .hs-hero-ctas .btn::before,
.radio-mag .musica-magazine-list .mm-search-month .monthPrev::before,
.radio-mag .musica-magazine-list .mm-search-month .monthNext::before,
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons > a::before,
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_btn::before,
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_link::before {
content: "";
position: absolute;
border-radius: inherit;
}
/* Join Today: taller tap area */
.radio-mag .musica-magazine-hero .hs-hero-ctas .btn::before {
left: 0;
right: 0;
top: min(0px, calc(50% - 22px));
bottom: min(0px, calc(50% - 22px));
}
/* Month back / next arrows: wider tap area, 6px past the pill's edge and the
rest into the empty pill beside them, stopping short of the month button */
.radio-mag .musica-magazine-list .mm-search-month .monthPrev::before {
top: 0;
bottom: 0;
left: -6px;
right: min(0px, calc(100% - 38px));
}
.radio-mag .musica-magazine-list .mm-search-month .monthNext::before {
top: 0;
bottom: 0;
right: -6px;
left: min(0px, calc(100% - 38px));
}
/* play, staff edit and share: round tap areas of at least 44px */
.radio-mag .musica-magazine-list .mm-list-grid .mm-icons > a::before,
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_btn::before {
inset: min(-2px, calc(50% - 22px));
border-radius: 50%;
}
.radio-mag .musica-magazine-list .mm-list-grid .mm_share_link::before {
inset: -2px;
border-radius: 50%;
}
.radio-mag .musica-magazine-list .mm-search-dropdown .dropdown-item {
min-height: 44px;
display: flex;
align-items: center;
}
}
/* Month and Year lists: size by the screen height that is left when the browser
bars are showing, so the end of a list is never hidden under them */
@supports (height: 1svh) {
@media (max-width: 1199.98px) {
.radio-mag section.musica-magazine-list .mm-search-dropdown .dropdown-menu {
max-height: min(60svh, 22rem);
}
}
}
/* ---------- carousel sized by the space the window really has ---------- */
/* windows 484 to 767px wide (iPad split screen, 7-inch tablets, foldables):
the cover stops growing at 300px wide. Phones are narrower than 484px, so
they are unchanged */
@media (max-width: 1199.98px) {
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: min(62vw, 300px);
}
}
/* tablets 768px and wider: the cover is also capped by the window height, so
iPads and Android tablets held sideways (and short Stage Manager windows)
keep the search row close to the first screen. Upright tablets are unchanged */
@media (min-width: 768px) and (max-width: 1199.98px) {
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: min(30vw, 28vh);
}
@supports (height: 1svh) {
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: min(30vw, 28svh);
}
}
}
/* phones held sideways keep their own size (same rule as in the phone block) */
@media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) {
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: min(24vw, 34vh);
}
@supports (height: 1svh) {
.radio-mag section.musica-magazine-hero .musica-magazine-carousel {
--car-w: min(24vw, 34svh);
}
}
}
/* ============ end MUSICA MAGAZINE (mag_list_V3.cfm) : TABLETS ============ */
@media only screen and (max-width: 768px) {
:where(.about-artist-earn.radio-page) .aae-item {
padding: 30px 26px;
}
.radio-blog-post .radio-blog-post__intro {
font-size: 24px;
}
.radio-blog-post .radio-blog-post__num {
padding-left: 15px;
}
.radio-blog-post .radio-blog-post__section {
grid-template-columns: 50px minmax(0, 1fr);
margin-right: 45px;
}
}
/* ==========================================================================
RESTAURANTS & DINING (dining.cfm)
[Option 1, Figma scaled to 1512]
Added by Claude, 2026-10-19. Every rule is limited to .dining-page.
Desktop, 900px and up: the Figma 1920 frame scaled to the 1512px page
(x0.7875). Sizes are written as calc(N * var(--u)) where N is the size at
1512px, so narrower desktop windows keep the same proportions
(never below 70%).
Under 900px: photo on top, heading and playlists below.
2026-10-19 update: hero gets the Figma blue gradient in CSS (the hero
photo is the plain original) and is shorter, with the title on one line.
2026-10-19 mobile update [Mobile option 2, Title on the photo]:
phones and upright tablets put the section heading on the photo;
upright tablets show playlists in 2 columns; phones held sideways and
other short screens get a compact side-by-side layout; hero capped to
the screen height; notch padding; no sticky hover on touch screens.
Support baseline: iOS/iPadOS Safari 15+, Chrome, Edge, Samsung Internet
and Firefox from about the last two years. Older browsers keep a
working layout (svh, cqw and aspect-ratio have fallbacks).
2026-10-19 tablet update [Tablet option 1, Fixes only]: the phone/tablet
layout under 900px no longer depends on orientation, so Split View,
Stage Manager, Samsung DeX windows and unfolded foldables get the same
"title on the photo" layout as an upright iPad and update live when
resized. The side-by-side layout for short screens now comes after it
and resets it. Full-screen tablets, phones and desktop look unchanged.
Fonts: Anton (headings) and Roboto (text), loaded in dining.cfm.
Playlist rows wrap the radiosparx.play.launch.link module output:
![]()
Name
The legacy .alink rules use !important colours, so the overrides below need !important too. ========================================================================== */ .dining-page, .dining-page *, .dining-page *::before, .dining-page *::after { box-sizing: border-box; } .dining-page { container-type: inline-size; --u: clamp(0.7px, 100cqw / 1512, 1px); width: 100%; max-width: 1512px; margin: 0 auto; background: #012D40; color: #ffffff; font-family: 'Roboto', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @supports not (width: 1cqw) { .dining-page { --u: clamp(0.7px, 100vw / 1512, 1px); } } /* ---------- Hero ---------- */ .dining-page .dining-hero { position: relative; display: flex; align-items: center; min-height: calc(535 * var(--u)); min-height: min(calc(535 * var(--u)), 75vh); min-height: min(calc(535 * var(--u)), 75svh); padding: calc(48 * var(--u)) calc(63 * var(--u)); /* Figma: blue on the left fading to clear on the right, over the photo */ background: linear-gradient(270deg, rgba(0, 9, 17, 0) 0%, #004379 100%), #024379 url("../images/dining-hero.jpg") center / cover no-repeat; } .dining-page .dining-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: calc(20 * var(--u)); max-width: calc(600 * var(--u)); } .dining-page .dining-hero__title { margin: 0; padding: 0; font-family: 'Anton', 'Antonio', 'Arial Narrow', sans-serif; font-weight: 400; font-size: calc(98 * var(--u)); line-height: 1.1 !important; letter-spacing: -0.02em; text-transform: capitalize; color: #ffffff; } .dining-page .dining-hero__text { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; max-width: calc(660 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(30 * var(--u)); text-transform: capitalize; color: #ffffff; } /* ---------- Sections: photo + playlists, alternating sides ---------- */ .dining-page .dining-sec { display: grid; grid-template-columns: 51.5% minmax(0, 1fr); min-height: calc(745 * var(--u)); background: radial-gradient(47.57% 47.57% at 50% 52.43%, #0375A6 0%, #012D40 100%); } .dining-page .dining-sec--reverse { grid-template-columns: minmax(0, 1fr) 51.5%; } .dining-page .dining-sec--reverse .dining-sec__media { order: 2; } .dining-page .dining-sec__media { position: relative; min-height: 100%; overflow: hidden; } .dining-page .dining-sec__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; object-position: center; } .dining-page .dining-sec__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: calc(21 * var(--u)) calc(63 * var(--u)) calc(56 * var(--u)) calc(43 * var(--u)); } .dining-page .dining-sec--reverse .dining-sec__body { padding: calc(56 * var(--u)) calc(43 * var(--u)) calc(56 * var(--u)) calc(63 * var(--u)); } .dining-page .dining-sec__content { display: flex; flex-direction: column; gap: calc(30 * var(--u)); width: 100%; max-width: calc(627 * var(--u)); } .dining-page .dining-sec__head { display: flex; flex-direction: column; gap: calc(8 * var(--u)); } .dining-page .dining-sec__title { margin: 0; padding: 0; font-family: 'Anton', 'Antonio', 'Arial Narrow', sans-serif; font-weight: 400; font-size: calc(50 * var(--u)); line-height: calc(44 * var(--u)); text-wrap: balance; overflow-wrap: break-word; color: #ffffff; } .dining-page .dining-sec__desc { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: calc(20 * var(--u)); line-height: calc(27 * var(--u)); text-transform: capitalize; color: rgba(255, 255, 255, 0.92); } /* ---------- Playlist cards ---------- */ .dining-page .dining-list { display: flex; flex-direction: column; gap: calc(16 * var(--u)); margin: 0; padding: 0; list-style: none; } .dining-page .dining-card { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); height: 60px; min-height: calc(60 * var(--u)); margin: 0; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); list-style: none; border: 1px solid rgba(149, 216, 255, 0.26); border-radius: calc(14 * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%), rgba(0, 140, 232, 0.02); box-shadow: 0 2px 14px rgba(0, 38, 54, 0.32); transition: background-color .2s ease, border-color .2s ease; } @media (hover: hover) { .dining-page .dining-card:hover { background-color: rgba(0, 140, 232, 0.14); border-color: rgba(149, 216, 255, 0.55); } .dining-page .dining-card:hover a.alink::before { background-color: #0AAAEE; } } .dining-page .dining-card:focus-within { border-color: rgba(149, 216, 255, 0.55); } .dining-page .dining-card:focus-within a.alink::before { background-color: #0AAAEE; } .dining-page .dining-card br { display: none; } /* the module's link: play circle + playlist name; it covers the whole card */ .dining-page .dining-card a.alink { position: static; display: flex; align-items: center; gap: calc(20 * var(--u)); flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: calc(22 * var(--u)); line-height: 1.3; text-transform: capitalize; overflow-wrap: break-word; overflow-wrap: anywhere; color: #ffffff !important; text-decoration: none !important; } .dining-page .dining-card a.alink:link, .dining-page .dining-card a.alink:visited, .dining-page .dining-card a.alink:hover, .dining-page .dining-card a.alink:active, .dining-page .dining-card a.alink:focus { color: #ffffff !important; text-decoration: none !important; } .dining-page .dining-card a.alink img.buttonMid { display: none !important; } .dining-page .dining-card a.alink::before { content: ""; flex: none; width: calc(43 * var(--u)); height: calc(43 * var(--u)); border-radius: 50%; background: rgba(0, 140, 232, 0.24) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 4.8v14.4c0 .9 1 1.5 1.8 1l11.3-7.2c.7-.5.7-1.5 0-2L8.8 3.8C8 3.3 7 3.9 7 4.8z'/%3E%3C/svg%3E") 56% 50% / 38% no-repeat; transition: background-color .2s ease; } .dining-page .dining-card a.alink::after { content: ""; position: absolute; inset: 0; border-radius: calc(14 * var(--u)); } .dining-page .dining-card a.alink:focus-visible { outline: none; } .dining-page .dining-card a.alink:focus-visible::after { outline: 2px solid #95D8FF; outline-offset: 2px; } /* three-dot icon from the Figma; decorative, a click on it plays the playlist like the rest of the card */ .dining-page .dining-card__more { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 22'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='3' cy='3' r='2.5'/%3E%3Ccircle cx='3' cy='11' r='2.5'/%3E%3Ccircle cx='3' cy='19' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / calc(6 * var(--u)) calc(22 * var(--u)) no-repeat; } /* ---------- Under 900px: photo on top, content below ---------- */ @media (max-width: 899.98px) { .dining-page { --u: 0.8px; } .dining-page .dining-hero { align-items: flex-end; min-height: 380px; padding: 48px 24px 40px; background-position: 30% center; } .dining-page .dining-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 45, 64, 0.1) 0%, rgba(1, 45, 64, 0.72) 100%); } .dining-page .dining-hero__inner { max-width: 400px; gap: 16px; } .dining-page .dining-hero__title { font-size: clamp(75px, 9vw, 94px); line-height: 1.06; } .dining-page .dining-hero__text { font-size: 18px; line-height: 26px; } .dining-page .dining-sec, .dining-page .dining-sec--reverse { grid-template-columns: minmax(0, 1fr); min-height: 0; } .dining-page .dining-sec--reverse .dining-sec__media { order: 0; } .dining-page .dining-sec__media { min-height: 0; aspect-ratio: 16 / 10; max-height: 460px; } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding: 36px 24px 48px; } .dining-page .dining-sec__content { max-width: 640px; margin: 0 auto; gap: 24px; } .dining-page .dining-sec__head { gap: 12px; } .dining-page .dining-sec__title { font-size: 60px; line-height: 1.1 !important; } .dining-page .dining-sec__desc { font-size: 17px; line-height: 25px; } .dining-page .dining-list { gap: 12px; } .dining-page .dining-card { gap: 10px; min-height: 50px; height: 50px; padding: 8px 14px 8px 8px; border-radius: 12px; } .dining-page .dining-card a.alink { gap: 14px; font-size: 17px; } .dining-page .dining-card a.alink::before { width: 38px; height: 38px; } .dining-page .dining-card a.alink::after { border-radius: 12px; } .dining-page .dining-card__more { width: 28px; height: 28px; background-size: 5px 19px; } } /* phones */ @media (max-width: 480px) { .dining-page .dining-hero { min-height: 330px; padding: 40px 16px 32px; } .dining-page .dining-hero__title { font-size: 42px; } .dining-page .dining-hero__text { font-size: 16px; line-height: 24px; } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding: 28px 16px 40px; } .dining-page .dining-sec__title { font-size: 44px; line-height: 32px; } .dining-page .dining-sec__desc { font-size: 16px; line-height: 24px; } .dining-page .dining-card a.alink { font-size: 16px; } .dining-page .dining-card a.alink::before { width: 34px; height: 34px; } } /* ---------- Mobile and tablet: fixes shared by every option ---------- */ .dining-page { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .dining-page .dining-card { -webkit-tap-highlight-color: transparent; } .dining-page .dining-card:active { background-color: rgba(0, 140, 232, 0.14); } @media (max-width: 899.98px) { .dining-page .dining-hero { min-height: 380px; min-height: min(380px, 56svh); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } /* aspect-ratio + max-height made the photo narrower than the screen (gap on the right at 740-899px) */ .dining-page .dining-sec__media { width: 100%; } } @media (max-width: 480px) { .dining-page .dining-hero__title { font-size: clamp(26px, 12vw, 42px); } .dining-page .dining-hero { min-height: 330px; min-height: min(330px, 52svh); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } } /* Under 360px wide (small phones, zoomed in, split screen): room for the playlist name */ @media (max-width: 359.98px) { .dining-page .dining-card { padding-right: 10px; } .dining-page .dining-card__more { display: none; } .dining-page .dining-card a.alink::before { width: 38px; height: 38px; } .dining-page .dining-sec__title { font-size: 21px; line-height: 27px; } } /* ---------- Option 2: Title on the photo ---------- */ @media (max-width: 899.98px) { .dining-page .dining-sec, .dining-page .dining-sec--reverse { grid-template-areas: "media" "list"; } .dining-page .dining-sec__body, .dining-page .dining-sec__content { display: contents; } .dining-page .dining-sec__media { grid-area: media; align-self: stretch; aspect-ratio: 4 / 3; max-height: 62svh; } .dining-page .dining-sec__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 45, 64, 0) 8%, rgba(1, 45, 64, 0.62) 46%, rgba(1, 45, 64, 0.96) 100%); } .dining-page .dining-sec__head { grid-area: media; align-self: end; position: relative; z-index: 1; gap: 8px; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 22px max(24px, env(safe-area-inset-left, 0px)); } .dining-page .dining-sec__title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .dining-page .dining-sec__desc { color: #ffffff; } .dining-page .dining-list { grid-area: list; padding: 22px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); } } @media (max-width: 480px) { .dining-page .dining-sec__head { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); } .dining-page .dining-sec__desc { font-size: 15px; line-height: 22px; } .dining-page .dining-list { padding: 18px max(16px, env(safe-area-inset-right, 0px)) 36px max(16px, env(safe-area-inset-left, 0px)); } } @media (min-width: 640px) and (max-width: 899.98px) { .dining-page .dining-sec__media { aspect-ratio: 16 / 9; max-height: 460px; } .dining-page .dining-sec__head { padding-left: 32px; padding-right: 32px; padding-bottom: 28px; width:60%} .dining-page .dining-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 24px 32px 44px; } } /* Phones held sideways and other short screens 560-1199px wide: compact hero, photo and playlists side by side */ @media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) and (max-width: 1199.98px) { .dining-page .dining-hero { align-items: center; min-height: 0; padding: 28px max(32px, env(safe-area-inset-right, 0px)) 28px max(32px, env(safe-area-inset-left, 0px)); } .dining-page .dining-hero__inner { gap: 10px; max-width: 620px; } .dining-page .dining-hero__title { font-size: 44px; line-height: 1.05; } .dining-page .dining-hero__text { max-width: 560px; font-size: 16px; line-height: 23px; } .dining-page .dining-sec { grid-template-columns: 40% minmax(0, 1fr); min-height: 0; } .dining-page .dining-sec--reverse { grid-template-columns: minmax(0, 1fr) 40%; } .dining-page .dining-sec--reverse .dining-sec__media { order: 2; } .dining-page .dining-sec__media { aspect-ratio: auto; max-height: none; min-height: 100%; } .dining-page .dining-sec__body { padding: 28px max(28px, env(safe-area-inset-right, 0px)) 32px 28px; } .dining-page .dining-sec--reverse .dining-sec__body { padding: 28px 28px 32px max(28px, env(safe-area-inset-left, 0px)); } .dining-page .dining-sec__content { max-width: none; margin: 0; gap: 18px; } .dining-page .dining-sec__head { gap: 8px; } .dining-page .dining-sec__title { font-size: 24px; line-height: 30px; } .dining-page .dining-sec__desc { font-size: 15px; line-height: 22px; } .dining-page .dining-list { gap: 10px; } .dining-page .dining-card { gap: 10px; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: 12px; } .dining-page .dining-card a.alink { gap: 12px; font-size: 16px; } .dining-page .dining-card a.alink::before { width: 42px; height: 42px; } .dining-page .dining-card a.alink::after { border-radius: 12px; } .dining-page .dining-card__more { width: 28px; height: 28px; background-size: 5px 19px; } /* undo the "title on the photo" arrangement for this layout */ .dining-page .dining-sec, .dining-page .dining-sec--reverse { grid-template-areas: none; } .dining-page .dining-sec__body, .dining-page .dining-sec__content { display: flex; } .dining-page .dining-sec__media { grid-area: auto; align-self: auto; } .dining-page .dining-sec__media::after { content: none; } .dining-page .dining-sec__head { grid-area: auto; align-self: auto; position: static; z-index: auto; padding: 0; } .dining-page .dining-sec__title { text-shadow: none; } .dining-page .dining-sec__desc { color: rgba(255, 255, 255, 0.92); } .dining-page .dining-list { grid-area: auto; display: flex; padding: 0; } } @media (prefers-reduced-motion: reduce) { .dining-page .dining-card, .dining-page .dining-card a.alink::before { transition: none; } } /* ============ end RESTAURANTS & DINING (dining.cfm) block ============ */ /* ========================================================================== RESTAURANTS & DINING (dining.cfm) : ALIGNMENT FIXES Added by Claude, 2026-10-21. Alignment only; sizes, fonts and colours are unchanged. Must stay after the RESTAURANTS & DINING (dining.cfm) block. - Playlist buttons keep their height (60px desktop, 50px under 900px, 56px on phones held sideways) but grow instead of letting a long name spill out with larger text settings. Contents stay centred as before. - Desktop: the photo-left sections (Fine Dining, Ethnic Cuisine, Wine Bars) get the same 56 space above their text as below it, like the photo-right sections, so the text sits in the middle again. - Phones and tablets: the section heading on the photo keeps a gap from the top of the photo (48px, 36px on phones) instead of running into its top edge; the photo grows a little only where it had no room. ========================================================================== */ .dining-page .dining-card { height: auto; min-height: 60px; padding-top: 0; padding-bottom: 0; } @media (max-width: 899.98px) { .dining-page .dining-card { min-height: 50px; } } @media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) and (max-width: 899.98px) { .dining-page .dining-card { min-height: 56px; } } @media (min-width: 900px) and (orientation: portrait), (min-width: 900px) and (min-height: 500.02px), (min-width: 1200px) { .dining-page .dining-sec:not(.dining-sec--reverse) .dining-sec__body { padding-top: calc(56 * var(--u)); } } @media (max-width: 899.98px) and (orientation: portrait), (max-width: 899.98px) and (min-height: 500.02px), (max-width: 559.98px) { .dining-page .dining-sec__head { padding-top: 48px; } } @media (max-width: 480px) { .dining-page .dining-sec__head { padding-top: 36px; } } /* ============ end RESTAURANTS & DINING (dining.cfm) : ALIGNMENT FIXES block ============ */ @media (min-width: 809px) and (max-width: 820.98px) { .rs-left { height: 800px !important; } .rs-wheel-holder { height: 360px !important; } } /* ========================================================================== RETAIL & FASHION (retail.cfm) [Option 2, Medium Type, held at 1512] Added by Claude, 2026-10-21. Every rule is limited to .retail-page. Desktop, 1200px and up: the Figma "Retail And Fashion" 1920 frame laid out at the 1512px page, with every text size about 80% of the Figma. Sizes are written as calc(N * var(--u)) where N is the size at 1512px, so narrower desktop windows keep the same proportions (never below 70%). The sizes that differ from the Figma are the --rt-* tokens on .retail-page. Section layouts: A = label | photo | card (Fashion), B = card | framed photo | vertical label (Lear Jets, Kids), C = label over photo | card (Franchises, High Tech), D = card | full-height photo with label (Luxury). Under 1200px: a basic stacked layout (photo, then card) until the tablet and phone passes. Fonts: Arima Madurai (headings, labels) and Roboto (text), loaded in retail.cfm. Images: retail-hero.jpg here (../images/), section photos from default_v2/images in retail.cfm. Playlist rows wrap the radiosparx.play.launch.link module output:![]()
Name
The legacy .alink rules use !important colours, so the overrides below need !important too. custom.css has body * { line-height: 1.3 !important }, so every line-height here is !important as well. Small text never goes below 15px (17px hero intro) on 1200-1366px screens. 2026-10-21 update: every section now has its own Figma background image and effect (measured from the Figma export): Fashion: grey "frosted glass" store photo (retail-fashion-bg.jpg, the texture is baked into the file) + rgba(0,134,190,.54); left 514px #21556B with the Figma grain. Lear Jets / Kids: the section photo blurred 26px + 42% black. Franchises / High Tech: the photo across the whole section, deep blue over everything except the photo window, #004562 band behind the label, Figma grain on the blue. Luxury: the photo across the whole section (its Figma colour look is baked into retail-luxury.jpg); left panel shows it again under the #003E58 to rgba(0,134,190,.64) gradient. Grain: retail-noise.png (seamless, #0086BE at 25%, half the pixels). ========================================================================== */ .retail-page, .retail-page *, .retail-page *::before, .retail-page *::after { box-sizing: border-box; } .retail-page { container-type: inline-size; --u: clamp(0.7px, 100cqw / 1512, 1px); /* sizes at 1512px (Option 2, Medium Type) */ --rt-hero-h: 699; --rt-hero-title: 72; --rt-hero-title-lh: 84; --rt-hero-text: 21; --rt-hero-text-lh: 29; --rt-tag: 58; --rt-tag-lh: 50; --rt-card-w: 620; --rt-card-pad: 30; --rt-card-radius: 28; --rt-title: 40; --rt-title-lh: 47; --rt-desc: 17; --rt-desc-lh: 25; --rt-head-gap: 14; --rt-body-gap: 24; --rt-row-h: 70; --rt-row-gap: 8; --rt-row-pad: 10; --rt-row-radius: 12; --rt-play: 50; --rt-play-gap: 16; --rt-name: 18; --rt-more: 22; --rt-more-inset: 42; --rt-sec-min: 700; --rt-photo-d: 711; width: 100%; max-width: 1512px; margin: 0 auto; background: #012D40; color: #ffffff; font-family: 'Roboto', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @supports not (width: 1cqw) { .retail-page { --u: clamp(0.7px, 100vw / 1512, 1px); } } /* ---------- Hero ---------- */ /* the photo is plain; the Figma blue gradient is added here */ .retail-page .retail-hero { position: relative; height: calc(var(--rt-hero-h) * var(--u)); background: linear-gradient(270deg, rgba(0, 84, 140, 0.34) 0%, rgba(0, 23, 38, 0.34) 100%), #0b2633 url("../images/retail-hero.jpg") center / cover no-repeat; } .retail-page .retail-hero__panel { position: absolute; top: calc(350 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(846 * var(--u)); min-height: calc(298 * var(--u)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(6 * var(--u)); padding: calc(33 * var(--u)); text-align: center; /* border: 1px solid rgba(255, 255, 255, 0.36); */ border-radius: calc(19 * var(--u)); background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(calc(8 * var(--u))); /* backdrop-filter: blur(calc(8 * var(--u))); */ } .retail-page .retail-hero__title { margin: 0; padding: 0; font-family: 'Arima Madurai', 'Arima', Georgia, serif; font-weight: 800; font-size: calc(var(--rt-hero-title) * var(--u)); line-height: calc(var(--rt-hero-title-lh) * var(--u)) !important; text-transform: capitalize; text-wrap: balance; color: #ffffff; } .retail-page .retail-hero__text { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: max(17px, calc(var(--rt-hero-text) * var(--u))); line-height: max(24px, calc(var(--rt-hero-text-lh) * var(--u))) !important; text-transform: capitalize; text-wrap: pretty; color: #ffffff; } /* ---------- Sections: shared ---------- */ .retail-page .retail-sec { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto; min-height: calc(var(--rt-sec-min) * var(--u)); } /* the section background photo (each layout adds its own effect) */ .retail-page .retail-sec__bg { position: absolute; z-index: -3; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } .retail-page .retail-sec::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; } /* Figma grain on the blue areas */ .retail-page .retail-sec--a::after, .retail-page .retail-sec--c::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../images/retail-noise.png") 0 0 / calc(157.5 * var(--u)) repeat; } .retail-page .retail-sec__media { position: relative; grid-row: 1; min-height: 0; margin: 0; overflow: hidden; } .retail-page .retail-sec__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; object-position: center; } /* big decorative word (Fashion, LEAR JETS ...) with its dash-and-line rule */ .retail-page .retail-sec__tag { position: relative; z-index: 1; grid-row: 1; display: flex; margin: 0; padding: 0; pointer-events: none; user-select: none; } .retail-page .retail-sec__tag-text { font-family: 'Arima Madurai', 'Arima', Georgia, serif; font-weight: 700; font-size: calc(var(--rt-tag) * var(--u)); line-height: calc(var(--rt-tag-lh) * var(--u)) !important; letter-spacing: 0.32em; white-space: nowrap; color: #ffffff; } .retail-page .retail-sec__tag-rule { flex: none; display: block; } /* glass card */ .retail-page .retail-sec__card { position: relative; z-index: 1; grid-row: 1; display: flex; flex-direction: column; gap: calc(var(--rt-body-gap) * var(--u)); width: 100%; min-width: 0; padding: calc(var(--rt-card-pad) * var(--u)); /* border: 1px solid rgba(255, 255, 255, 0.18); */ border-radius: calc(var(--rt-card-radius) * var(--u)); /* background: */ /* linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), */ /* rgba(0, 99, 161, 0.08); */ -webkit-backdrop-filter: blur(calc(12 * var(--u))); /* backdrop-filter: blur(calc(12 * var(--u))); */ /* box-shadow: calc(-6 * var(--u)) calc(9 * var(--u)) calc(25 * var(--u)) rgba(0, 0, 0, 0.44); */ } .retail-page .retail-sec__head { display: flex; flex-direction: column; gap: calc(var(--rt-head-gap) * var(--u)); } .retail-page .retail-sec__title { margin: 0; padding: 0; font-family: 'Arima Madurai', 'Arima', Georgia, serif; font-weight: 900; font-size: calc(var(--rt-title) * var(--u)); line-height: calc(var(--rt-title-lh) * var(--u)) !important; text-wrap: balance; overflow-wrap: break-word; color: #ffffff; } .retail-page .retail-sec__desc { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: max(15px, calc(var(--rt-desc) * var(--u))); line-height: max(22px, calc(var(--rt-desc-lh) * var(--u))) !important; text-transform: capitalize; color: rgba(255, 255, 255, 0.92); } /* ---------- Playlist rows ---------- */ .retail-page .retail-list { display: flex; flex-direction: column; gap: calc(var(--rt-row-gap) * var(--u)); margin: 0; padding: 0; list-style: none; } .retail-page .retail-card { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: 58px; height: 58px; margin: 0; margin: 0; padding: calc(var(--rt-row-pad) * var(--u)) calc(var(--rt-more-inset) * var(--u)) calc(var(--rt-row-pad) * var(--u)) calc(var(--rt-row-pad) * var(--u)); list-style: none; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: calc(var(--rt-row-radius) * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%), rgba(0, 140, 232, 0.02); box-shadow: 0 calc(2 * var(--u)) calc(11 * var(--u)) rgba(0, 38, 54, 0.32); transition: background-color .2s ease, border-color .2s ease; background-color: rgba(0, 140, 232, 0.16) !important; border-color: rgba(149, 216, 255, 0.55) !important; } @media (hover: hover) { .retail-page .retail-card:hover { background-color: rgba(0, 140, 232, 0.16); border-color: rgba(149, 216, 255, 0.55); } .retail-page .retail-card:hover a.alink::before { background-color: #0AAAEE; } } .retail-page .retail-card:focus-within { border-color: rgba(149, 216, 255, 0.55); } .retail-page .retail-card br { display: none; } .retail-page .retail-card a.alink { position: static; display: flex; align-items: center; gap: calc(var(--rt-play-gap) * var(--u)); flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: max(15px, calc(var(--rt-name) * var(--u))); line-height: 1.3 !important; text-transform: capitalize; overflow-wrap: anywhere; color: #ffffff !important; text-decoration: none !important; } .retail-page .retail-card a.alink:link, .retail-page .retail-card a.alink:visited, .retail-page .retail-card a.alink:hover, .retail-page .retail-card a.alink:active, .retail-page .retail-card a.alink:focus { color: #ffffff !important; text-decoration: none !important; } .retail-page .retail-card a.alink img.buttonMid { display: none !important; } .retail-page .retail-card a.alink::before { content: ""; flex: none; width: 43px; height: 43px; border-radius: 50%; background: #008CE8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 4.8v14.4c0 .9 1 1.5 1.8 1l11.3-7.2c.7-.5.7-1.5 0-2L8.8 3.8C8 3.3 7 3.9 7 4.8z'/%3E%3C/svg%3E") 58% 50% / 40% no-repeat; transition: background-color .2s ease; } /* the whole row is the link */ .retail-page .retail-card a.alink::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--rt-row-radius) * var(--u)); } .retail-page .retail-card a.alink:focus-visible { outline: none; } .retail-page .retail-card a.alink:focus-visible::after { outline: 2px solid #95D8FF; outline-offset: 2px; } /* three-dot icon from the Figma; decorative */ .retail-page .retail-card__more { display: none !important; position: absolute; top: 50%; right: calc((var(--rt-more-inset) - var(--rt-more)) / 2 * var(--u)); width: calc(var(--rt-more) * var(--u)); height: calc(var(--rt-more) * var(--u)); transform: translateY(-50%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 22'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='3' cy='3' r='2.5'/%3E%3Ccircle cx='3' cy='11' r='2.5'/%3E%3Ccircle cx='3' cy='19' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / auto 70% no-repeat; } /* ---------- Pattern A: label | photo | card (Fashion) ---------- */ .retail-page .retail-sec--a { grid-template-columns: calc(62 * var(--u)) calc(77 * var(--u)) calc(101 * var(--u)) calc(276 * var(--u)) minmax(0, 1fr) calc(var(--rt-card-w) * var(--u)) calc(35 * var(--u)); align-items: center; padding-block: calc(33 * var(--u)); } .retail-page .retail-sec--a::before { background: linear-gradient(90deg, #21556B 0, #21556B calc(514 * var(--u)), rgba(0, 134, 190, 0.54) calc(514 * var(--u))); } .retail-page .retail-sec--a::after { right: auto; width: calc(514 * var(--u)); } .retail-page .retail-sec--a .retail-sec__tag { grid-column: 3; justify-self: center; align-items: flex-end; gap: calc(40 * var(--u)); } .retail-page .retail-sec--a .retail-sec__tag-text { writing-mode: vertical-rl; transform: rotate(180deg); } .retail-page .retail-sec--a .retail-sec__tag-rule { width: calc(2 * var(--u)); height: calc(96 * var(--u)); background: linear-gradient(#ffffff, #ffffff) top / 100% calc(7 * var(--u)) no-repeat, linear-gradient(#ffffff, #ffffff) bottom / 100% calc(70 * var(--u)) no-repeat; } .retail-page .retail-sec--a .retail-sec__media { grid-column: 4; align-self: stretch; } .retail-page .retail-sec--a .retail-sec__card { grid-column: 6; /* background: */ /* linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), */ /* rgba(0, 99, 161, 0.08); */ /* box-shadow: calc(-6.3 * var(--u)) calc(9.45 * var(--u)) calc(25.2 * var(--u)) rgba(0, 0, 0, 0.44); */ } /* ---------- Pattern B: card | framed photo | vertical label (Lear Jets) ---------- */ .retail-page .retail-sec--b { grid-template-columns: calc(57 * var(--u)) calc(var(--rt-card-w) * var(--u)) minmax(0, 1fr) calc(158 * var(--u)); align-items: center; padding-block: calc(33 * var(--u)); background-color: #1D1C1C; } /* Figma: the photo blurred 33px (26px at 1512) under 42% black; the blur fades into the dark section colour at the edges, as it does in the Figma */ .retail-page .retail-sec--b .retail-sec__bg { filter: blur(calc(26 * var(--u))); } .retail-page .retail-sec--b::before { background: rgba(0, 0, 0, 0.42); } .retail-page .retail-sec--b .retail-sec__card { grid-column: 2; border-color: rgba(255, 255, 255, 0.22); background: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), rgba(0, 117, 190, 0.12); box-shadow: calc(-6.3 * var(--u)) calc(7.9 * var(--u)) calc(25.2 * var(--u)) rgba(0, 0, 0, 0.32); } /* framed photo: tucks 17px under the card, as in the Figma */ .retail-page .retail-sec--b .retail-sec__media { grid-column: 3; align-self: stretch; margin-block: calc(52 * var(--u)); margin-left: calc(-17 * var(--u)); border: calc(3 * var(--u)) solid #ffffff; box-shadow: calc(4.7 * var(--u)) calc(6.3 * var(--u)) calc(18.9 * var(--u)) rgba(2, 44, 61, 0.25); } .retail-page .retail-sec--jets .retail-sec__media img { object-position: 64% 50%; } .retail-page .retail-sec--b .retail-sec__tag { grid-column: 4; align-self: start; justify-self: start; margin: calc(38 * var(--u)) 0 0 calc(18 * var(--u)); align-items: flex-start; gap: calc(21 * var(--u)); } .retail-page .retail-sec--b .retail-sec__tag-text { writing-mode: vertical-rl; text-transform: uppercase; } .retail-page .retail-sec--b .retail-sec__tag-rule { order: -1; width: calc(2 * var(--u)); height: calc(96 * var(--u)); background: linear-gradient(#ffffff, #ffffff) top / 100% calc(70 * var(--u)) no-repeat, linear-gradient(#ffffff, #ffffff) bottom / 100% calc(7 * var(--u)) no-repeat; } /* ---------- Pattern C: label over photo | card (Franchises) ---------- */ .retail-page .retail-sec--c { grid-template-columns: calc(581 * var(--u)) minmax(0, 1fr) calc(var(--rt-card-w) * var(--u)) calc(32 * var(--u)); grid-template-rows: calc(153 * var(--u)) auto; } /* the photo runs under the whole section; it shows clear only in the photo window, deep blue (measured from the Figma) everywhere else */ .retail-page .retail-sec--c::before { background: linear-gradient(#004562, #004562) left top / calc(581 * var(--u)) 100% no-repeat, linear-gradient(90deg, rgba(10, 88, 122, 0.79) 0%, rgba(11, 100, 139, 0.79) 100%) right top / calc(100% - 581 * var(--u)) 100% no-repeat; } .retail-page .retail-sec--c .retail-sec__tag { grid-column: 1; grid-row: 1; align-self: start; flex-direction: column; align-items: flex-start; gap: calc(18 * var(--u)); padding: calc(35 * var(--u)) 0 0 calc(57 * var(--u)); } .retail-page .retail-sec--c .retail-sec__tag-text { margin-inline-end: -0.32em; } .retail-page .retail-sec--c .retail-sec__tag-rule { width: calc(96 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(#ffffff, #ffffff) left / calc(70 * var(--u)) 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / calc(7 * var(--u)) 100% no-repeat; } .retail-page .retail-sec--c .retail-sec__media { grid-column: 1; grid-row: 2; align-self: stretch; box-shadow: calc(-9.45 * var(--u)) calc(9.45 * var(--u)) calc(17.3 * var(--u)) rgba(0, 0, 0, 0.25); } /* same size and place as the section background, so the photo lines up */ .retail-page .retail-sec--c .retail-sec__media img { top: calc(-153 * var(--u)); right: auto; bottom: auto; left: 0; width: calc(1512 * var(--u)); height: calc(100% + 153 * var(--u)); } .retail-page .retail-sec--c .retail-sec__card { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-block: calc(57 * var(--u)); background: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), rgba(255, 255, 255, 0.08); box-shadow: calc(-6.3 * var(--u)) calc(9.45 * var(--u)) calc(25.2 * var(--u)) rgba(0, 0, 0, 0.32); } /* ---------- Pattern D: card | full-height photo with label (Luxury) ---------- */ .retail-page .retail-sec--d { grid-template-columns: calc(67 * var(--u)) calc(var(--rt-card-w) * var(--u)) minmax(0, 1fr) calc(var(--rt-photo-d) * var(--u)); } /* left panel: the photo again under the Figma blue gradient */ .retail-page .retail-sec--d .retail-sec__bg { width: calc(100% - var(--rt-photo-d) * var(--u)); } .retail-page .retail-sec--d::before { right: auto; width: calc(100% - var(--rt-photo-d) * var(--u)); background: linear-gradient(90deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec--d .retail-sec__media { grid-column: 4; align-self: stretch; } /* photo sized to the whole section, right-aligned, like the Figma */ .retail-page .retail-sec--d .retail-sec__media img { top: 0; right: 0; bottom: auto; left: auto; width: calc(1512 * var(--u)); height: 100%; } .retail-page .retail-sec--d .retail-sec__card { grid-column: 2; align-self: center; margin-block: calc(74 * var(--u)); } .retail-page .retail-sec--d .retail-sec__tag { grid-column: 4; align-self: start; justify-self: end; flex-direction: column; align-items: flex-end; gap: calc(18 * var(--u)); margin: calc(68 * var(--u)) calc(28 * var(--u)) 0 0; } .retail-page .retail-sec--d .retail-sec__tag-text { margin-inline-end: -0.24em; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(80, 40, 10, 0.28); } .retail-page .retail-sec--d .retail-sec__tag-rule { width: calc(96 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(#ffffff, #ffffff) left / calc(7 * var(--u)) 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / calc(70 * var(--u)) 100% no-repeat; } /* ---------- Under 1200px: basic stacked layout (tags, photo, card) ---------- */ @media (max-width: 1199.98px) { .retail-page { --u: 0.9px; } .retail-page .retail-hero { display: flex; align-items: flex-end; justify-content: center; height: auto; min-height: 460px; padding: 72px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); background-position: center, 35% center; } .retail-page .retail-hero__panel { position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 760px; min-height: 0; gap: 10px; padding: 28px 24px; border-radius: 16px; background: rgba(1, 45, 64, 0.38); } .retail-page .retail-hero__title { font-size: clamp(36px, 7vw, 60px); line-height: 1.14 !important; } .retail-page .retail-hero__text { font-size: 18px; line-height: 26px !important; } /* one centred column, at most 760px wide */ .retail-page .retail-sec { grid-template-columns: minmax(max(24px, env(safe-area-inset-left, 0px)), 1fr) minmax(0, 760px) minmax(max(24px, env(safe-area-inset-right, 0px)), 1fr); grid-template-rows: none; grid-template-areas: ". tag ." ". media ." ". card ."; align-items: stretch; min-height: 0; padding: 0 0 40px; } .retail-page .retail-sec--a::before { background: linear-gradient(180deg, #21556B 0%, rgba(33, 85, 107, 0.75) 30%, rgba(0, 134, 190, 0.54) 100%); } .retail-page .retail-sec--a::after { width: auto; right: 0; } .retail-page .retail-sec--c::before { background: linear-gradient(180deg, #004562 0%, rgba(10, 88, 122, 0.85) 100%); } .retail-page .retail-sec--d .retail-sec__bg { width: 100%; } .retail-page .retail-sec--d::before { width: auto; right: 0; background: linear-gradient(180deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec .retail-sec__tag { grid-area: tag; align-self: start; justify-self: start; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 28px 0 18px; } .retail-page .retail-sec .retail-sec__tag-text { writing-mode: horizontal-tb; transform: none; margin-inline-end: -0.32em; font-size: 40px; line-height: 44px !important; text-shadow: none; } .retail-page .retail-sec .retail-sec__tag-rule { order: 0; width: 96px; height: 2px; background: linear-gradient(#ffffff, #ffffff) left / 70px 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / 7px 100% no-repeat; } .retail-page .retail-sec .retail-sec__media { grid-area: media; align-self: auto; justify-self: stretch; width: auto; margin: 0; aspect-ratio: 16 / 9; border: 0; } .retail-page .retail-sec--b .retail-sec__media { margin-left: 0; border: 3px solid #ffffff; } .retail-page .retail-sec--c .retail-sec__media img, .retail-page .retail-sec--d .retail-sec__media img { top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 100%; } /* the Fashion photo is a tall portrait: keep the faces in the wide crop */ .retail-page .retail-sec--fashion .retail-sec__media img { object-position: 50% 22%; } .retail-page .retail-sec .retail-sec__card { grid-area: card; align-self: auto; justify-self: stretch; width: auto; margin: 24px 0 0; } } /* phones */ @media (max-width: 599.98px) { .retail-page { --u: 0.84px; } .retail-page .retail-hero { min-height: 380px; padding: 56px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); } .retail-page .retail-hero__panel { padding: 22px 18px; } .retail-page .retail-hero__text { font-size: 16px; line-height: 24px !important; } .retail-page .retail-sec { grid-template-columns: minmax(max(16px, env(safe-area-inset-left, 0px)), 1fr) minmax(0, 760px) minmax(max(16px, env(safe-area-inset-right, 0px)), 1fr); } .retail-page .retail-sec .retail-sec__tag { padding: 24px 0 14px; } .retail-page .retail-sec .retail-sec__tag-text { font-size: 32px; line-height: 36px !important; } .retail-page .retail-sec .retail-sec__media { aspect-ratio: 4 / 3; } .retail-page .retail-sec .retail-sec__card { margin-top: 18px; padding: 22px 16px; } .retail-page .retail-card a.alink { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .retail-page .retail-card, .retail-page .retail-card a.alink::before { transition: none; } } /* ============ end RETAIL & FASHION (retail.cfm) block ============ */ /* ========================================================================== RETAIL & FASHION (retail.cfm) : DESKTOP [Desktop option 1, Compact Hero] Added by Claude, 2026-10-21. 1200px and up only (the exact opposite of the max-width: 1199.98px fallback in the block above), so phones and tablets are unchanged. Must stay after the RETAIL & FASHION (retail.cfm) block. - Hero 540px at 1512 (was 699), scaling with the page like the rest of the block; the glass panel keeps its size and sits 48px from the bottom. - Minimum height instead of a fixed height, panel in normal flow: enlarged text (browser text zoom, minimum font size) makes the hero taller instead of pushing the panel into the Fashion section. - Wider than 1512px the page stays held at 1512px, centred (unchanged). ========================================================================== */ @media not all and (max-width: 1199.98px) { .retail-page { --rt-hero-h: 540; } .retail-page .retail-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: auto; min-height: calc(var(--rt-hero-h) * var(--u)); padding: calc(64 * var(--u)) calc(57 * var(--u)) calc(48 * var(--u)); } .retail-page .retail-hero__panel { position: relative; top: auto; left: auto; transform: none; max-width: 100%; } } /* Franchises, Gaming, Lear Jets and Kids (desktop): the Luxury treatment. Added by Claude, 2026-10-21. 1200px and up only. Images unchanged. - The playlists side gets the Luxury blue gradient over the section photo, dark at the outer edge and see-through next to the photo: on the right for Franchises and Gaming (photo on the left), on the left for Lear Jets and Kids (photo on the right, laid out like Luxury). - No glass box behind the title and playlists, no grain. - The photo runs the full height of the section and the big label sits on the photo, with a soft dark glow so it stays readable on bright photos. - One photo per section: the photo behind the gradient and the photo beside the playlists are the same picture in the same place, so it reads as one continuous image (Luxury too). Lear Jets and Kids: the picture is moved right so the woman and the jet (and the middle of the Kids photo) sit in the photo area; it fades in from the dark blue on the left. */ @media not all and (max-width: 1199.98px) { /* photo on the left, playlists on the right (Franchises, Gaming) */ .retail-page .retail-sec--franchise::before, .retail-page .retail-sec--tech::before { background: linear-gradient(#004562, #004562) left top / calc(581 * var(--u)) 100% no-repeat, linear-gradient(270deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%) right top / calc(81% - 581 * var(--u)) 100% no-repeat; } .retail-page .retail-sec--franchise::after, .retail-page .retail-sec--tech::after { display: none; } .retail-page .retail-sec--franchise .retail-sec__media, .retail-page .retail-sec--tech .retail-sec__media { grid-row: 1 / span 2; } .retail-page .retail-sec--franchise .retail-sec__media img, .retail-page .retail-sec--tech .retail-sec__media img { top: 0; height: 100%; } /* Luxury: one continuous photo (the background photo now lines up with the photo on the right instead of repeating it) */ .retail-page .retail-sec--luxury .retail-sec__bg { left: auto; right: 0; width: calc(1512 * var(--u)); } /* playlists on the left, photo on the right, like Luxury (Lear Jets, Kids) */ .retail-page .retail-sec--jets, .retail-page .retail-sec--kids { grid-template-columns: calc(67 * var(--u)) calc(var(--rt-card-w) * var(--u)) minmax(0, 1fr) calc(var(--rt-photo-d) * var(--u)); padding-block: 0; background-color: #003E58; /* one picture box for both photo layers, measured from the right edge */ --rt-img-w: 1205; --rt-img-r: -132; } .retail-page .retail-sec--kids { --rt-img-r: -247; } .retail-page .retail-sec--jets .retail-sec__bg, .retail-page .retail-sec--kids .retail-sec__bg { left: auto; right: calc(var(--rt-img-r) * var(--u)); width: calc(var(--rt-img-w) * var(--u)); filter: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(200 * var(--u))); mask-image: linear-gradient(90deg, transparent 0, #000 calc(200 * var(--u))); } .retail-page .retail-sec--jets::before, .retail-page .retail-sec--kids::before { right: auto; width: calc(100% - var(--rt-photo-d) * var(--u)); background: linear-gradient(90deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec--jets .retail-sec__card, .retail-page .retail-sec--kids .retail-sec__card { grid-column: 2; align-self: center; margin-block: calc(74 * var(--u)); } .retail-page .retail-sec--jets .retail-sec__media, .retail-page .retail-sec--kids .retail-sec__media { grid-column: 4; align-self: stretch; margin: 0; border: 0; box-shadow: none; } .retail-page .retail-sec--jets .retail-sec__media img, .retail-page .retail-sec--kids .retail-sec__media img { top: 0; right: calc(var(--rt-img-r) * var(--u)); bottom: auto; left: auto; width: calc(var(--rt-img-w) * var(--u)); height: 100%; object-position: center; } .retail-page .retail-sec--jets .retail-sec__tag, .retail-page .retail-sec--kids .retail-sec__tag { grid-column: 4; align-self: start; justify-self: end; flex-direction: column; align-items: flex-end; gap: calc(18 * var(--u)); margin: calc(68 * var(--u)) calc(28 * var(--u)) 0 0; } .retail-page .retail-sec--jets .retail-sec__tag-text, .retail-page .retail-sec--kids .retail-sec__tag-text { writing-mode: horizontal-tb; margin-inline-end: -0.24em; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(80, 40, 10, 0.28); } .retail-page .retail-sec--jets .retail-sec__tag-rule, .retail-page .retail-sec--kids .retail-sec__tag-rule { order: 0; width: calc(96 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(#ffffff, #ffffff) left / calc(7 * var(--u)) 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / calc(70 * var(--u)) 100% no-repeat; } /* all four: label readable on the photo, no glass box */ .retail-page .retail-sec--franchise .retail-sec__tag, .retail-page .retail-sec--tech .retail-sec__tag, .retail-page .retail-sec--jets .retail-sec__tag, .retail-page .retail-sec--kids .retail-sec__tag { filter: drop-shadow(0 1px 2px rgba(0, 20, 30, 0.6)) drop-shadow(0 0 calc(10 * var(--u)) rgba(0, 20, 30, 0.55)) drop-shadow(0 0 calc(24 * var(--u)) rgba(0, 20, 30, 0.45)); } .retail-page .retail-sec--franchise .retail-sec__card, .retail-page .retail-sec--tech .retail-sec__card, .retail-page .retail-sec--jets .retail-sec__card, .retail-page .retail-sec--kids .retail-sec__card { background: none; box-shadow: none; } } /* ============ end RETAIL & FASHION (retail.cfm) : DESKTOP block ============ */ /* ========================================================================== RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET [Mobile option A, Faithful Stack] Added by Claude, 2026-10-21. Under 1200px only, so desktop (1200px and up) is unchanged. Must stay after the RETAIL & FASHION (retail.cfm) block and the RETAIL & FASHION (retail.cfm) : DESKTOP block. - Phones and tablets: no automatic text inflation on rotate (iOS), no grey tap flash, a pressed state on playlist rows, section labels wrap with larger text settings, hero capped to about two thirds of the screen. - Portrait tablets and tall screens 600px and up: playlists in two columns. - Landscape tablets 960 to 1199px: column up to 920px wide. - Phones held sideways and other short screens (500px tall or less): compact hero, photo beside the label and playlists, two playlist columns from 800px wide. Side gutters respect the notch (safe area). ========================================================================== */ /* ---------- Phones and tablets (under 1200px): fixes in every option ---------- */ @media (max-width: 1199.98px) { /* no automatic text inflation on rotate (iOS), no grey tap flash, a pressed state on touch */ .retail-page { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .retail-page .retail-card { -webkit-tap-highlight-color: transparent; } .retail-page .retail-card:active { background-color: rgba(0, 140, 232, 0.16); border-color: rgba(149, 216, 255, 0.55); } /* the big labels wrap instead of running off the screen with larger text settings */ .retail-page .retail-sec .retail-sec__tag { justify-self: stretch; max-width: 100%; } .retail-page .retail-sec .retail-sec__tag-text { max-width: 100%; white-space: normal; overflow-wrap: break-word; } /* hero never taller than most of the screen */ .retail-page .retail-hero { min-height: min(460px, 70vh); min-height: min(460px, 70svh); } } @media (max-width: 599.98px) { .retail-page .retail-hero { min-height: min(380px, 62vh); min-height: min(380px, 62svh); } } /* landscape tablets: a wider column so the sides are not empty */ @media (min-width: 960px) and (max-width: 1199.98px) { .retail-page .retail-sec { grid-template-columns: minmax(max(24px, env(safe-area-inset-left, 0px)), 1fr) minmax(0, 920px) minmax(max(24px, env(safe-area-inset-right, 0px)), 1fr); } } /* Option A: Faithful Stack. Label, photo, card as now; playlists in two columns on tablets */ @media (min-width: 600px) and (max-width: 1199.98px) and (orientation: portrait), (min-width: 600px) and (max-width: 1199.98px) and (min-height: 500.02px) { .retail-page .retail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } } /* ---------- Phones held sideways and other short screens: photo beside the playlists ---------- */ @media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) { .retail-page { --rt-row-h: 60; --rt-play: 46; --rt-title: 32; --rt-title-lh: 38; } .retail-page .retail-hero { align-items: center; min-height: 0; padding: 24px max(32px, env(safe-area-inset-right, 0px)) 24px max(32px, env(safe-area-inset-left, 0px)); } .retail-page .retail-hero__panel { max-width: 640px; gap: 8px; padding: 18px 24px; } .retail-page .retail-hero__title { font-size: 40px; line-height: 1.1 !important; } .retail-page .retail-hero__text { font-size: 15px; line-height: 22px !important; } .retail-page .retail-sec { grid-template-columns: max(24px, env(safe-area-inset-left, 0px)) minmax(0, 2fr) 24px minmax(0, 3fr) max(24px, env(safe-area-inset-right, 0px)); grid-template-rows: auto 1fr; grid-template-areas: ". media . tag ." ". media . card ."; padding: 24px 0; } .retail-page .retail-sec .retail-sec__tag { padding: 0 0 12px; gap: 10px; } .retail-page .retail-sec .retail-sec__tag-text { font-size: 28px; line-height: 32px !important; } .retail-page .retail-sec .retail-sec__media { align-self: stretch; aspect-ratio: auto; min-height: 220px; } .retail-page .retail-sec .retail-sec__card { margin: 0; padding: 18px; gap: 16px; } .retail-page .retail-sec--fashion .retail-sec__media img { object-position: 50% 30%; } } @media (min-width: 800px) and (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) { .retail-page .retail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } } /* ============ end RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET block ============ */ /* ========================================================================== RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET FIXES Added by Claude, 2026-10-21. Under 1200px only, so desktop is unchanged. Must stay after the RETAIL & FASHION (retail.cfm) MOBILE AND TABLET block. - Playlist rows grow with their text (at least 58px) instead of letting long names spill out, and the space kept for the hidden three-dot icon is given back to the name. - Same look as desktop: no glass box behind the title and playlists. - One photo per section (Lear Jets, Franchises, Luxury, Gaming, Kids): the photo is shown once; behind the label, title and playlists is the Luxury blue gradient (no second blurred or tinted copy of the photo, no grain, no white frame). Fashion keeps its own Figma background. - Phones: the Franchises title keeps "Big-Box" on one line. ========================================================================== */ @media (max-width: 1199.98px) { .retail-page .retail-card { height: auto; min-height: 58px; padding-right: calc(var(--rt-row-pad) * var(--u)); } .retail-page .retail-sec .retail-sec__card { background: none; box-shadow: none; } .retail-page .retail-sec--jets, .retail-page .retail-sec--franchise, .retail-page .retail-sec--luxury, .retail-page .retail-sec--tech, .retail-page .retail-sec--kids { background-color: #003E58; } .retail-page .retail-sec--jets .retail-sec__bg, .retail-page .retail-sec--franchise .retail-sec__bg, .retail-page .retail-sec--luxury .retail-sec__bg, .retail-page .retail-sec--tech .retail-sec__bg, .retail-page .retail-sec--kids .retail-sec__bg { display: none; } .retail-page .retail-sec--jets::before, .retail-page .retail-sec--franchise::before, .retail-page .retail-sec--luxury::before, .retail-page .retail-sec--tech::before, .retail-page .retail-sec--kids::before { inset: 0; width: auto; background: linear-gradient(180deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec--franchise::after, .retail-page .retail-sec--tech::after { display: none; } .retail-page .retail-sec--jets .retail-sec__media, .retail-page .retail-sec--kids .retail-sec__media { border: 0; box-shadow: none; } } @media (max-width: 599.98px) { .retail-page .retail-sec--franchise .retail-sec__title { text-wrap: pretty; } } /* ============ end RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET FIXES block ============ */ #masterEncapsDivId:has(.rs-v1-page), #masterEncapsDivId:has(#subtitlesDivID), #masterEncapsDivId:has(.menuOptDisplayClass) { background: url(/module/images/art/graydient.jpg) 0 0 / 100% 100% no-repeat; border-style: solid; border-color: #fff; border-width: 0 1px; } /* Same width as after a refresh (1626px) on large screens */ @media (min-width: 1512px) { #masterEncapsDivId:has(.rs-v1-page), #masterEncapsDivId:has(#subtitlesDivID), #masterEncapsDivId:has(.menuOptDisplayClass) { max-width: 1626px !important; } } #masterEncapsDivId:has(#ticketTabs) { background-color: #f8f9fa; display: flow-root; }
The legacy .alink rules use !important colours, so the overrides below need !important too. ========================================================================== */ .dining-page, .dining-page *, .dining-page *::before, .dining-page *::after { box-sizing: border-box; } .dining-page { container-type: inline-size; --u: clamp(0.7px, 100cqw / 1512, 1px); width: 100%; max-width: 1512px; margin: 0 auto; background: #012D40; color: #ffffff; font-family: 'Roboto', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @supports not (width: 1cqw) { .dining-page { --u: clamp(0.7px, 100vw / 1512, 1px); } } /* ---------- Hero ---------- */ .dining-page .dining-hero { position: relative; display: flex; align-items: center; min-height: calc(535 * var(--u)); min-height: min(calc(535 * var(--u)), 75vh); min-height: min(calc(535 * var(--u)), 75svh); padding: calc(48 * var(--u)) calc(63 * var(--u)); /* Figma: blue on the left fading to clear on the right, over the photo */ background: linear-gradient(270deg, rgba(0, 9, 17, 0) 0%, #004379 100%), #024379 url("../images/dining-hero.jpg") center / cover no-repeat; } .dining-page .dining-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: calc(20 * var(--u)); max-width: calc(600 * var(--u)); } .dining-page .dining-hero__title { margin: 0; padding: 0; font-family: 'Anton', 'Antonio', 'Arial Narrow', sans-serif; font-weight: 400; font-size: calc(98 * var(--u)); line-height: 1.1 !important; letter-spacing: -0.02em; text-transform: capitalize; color: #ffffff; } .dining-page .dining-hero__text { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; max-width: calc(660 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(30 * var(--u)); text-transform: capitalize; color: #ffffff; } /* ---------- Sections: photo + playlists, alternating sides ---------- */ .dining-page .dining-sec { display: grid; grid-template-columns: 51.5% minmax(0, 1fr); min-height: calc(745 * var(--u)); background: radial-gradient(47.57% 47.57% at 50% 52.43%, #0375A6 0%, #012D40 100%); } .dining-page .dining-sec--reverse { grid-template-columns: minmax(0, 1fr) 51.5%; } .dining-page .dining-sec--reverse .dining-sec__media { order: 2; } .dining-page .dining-sec__media { position: relative; min-height: 100%; overflow: hidden; } .dining-page .dining-sec__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; object-position: center; } .dining-page .dining-sec__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: calc(21 * var(--u)) calc(63 * var(--u)) calc(56 * var(--u)) calc(43 * var(--u)); } .dining-page .dining-sec--reverse .dining-sec__body { padding: calc(56 * var(--u)) calc(43 * var(--u)) calc(56 * var(--u)) calc(63 * var(--u)); } .dining-page .dining-sec__content { display: flex; flex-direction: column; gap: calc(30 * var(--u)); width: 100%; max-width: calc(627 * var(--u)); } .dining-page .dining-sec__head { display: flex; flex-direction: column; gap: calc(8 * var(--u)); } .dining-page .dining-sec__title { margin: 0; padding: 0; font-family: 'Anton', 'Antonio', 'Arial Narrow', sans-serif; font-weight: 400; font-size: calc(50 * var(--u)); line-height: calc(44 * var(--u)); text-wrap: balance; overflow-wrap: break-word; color: #ffffff; } .dining-page .dining-sec__desc { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: calc(20 * var(--u)); line-height: calc(27 * var(--u)); text-transform: capitalize; color: rgba(255, 255, 255, 0.92); } /* ---------- Playlist cards ---------- */ .dining-page .dining-list { display: flex; flex-direction: column; gap: calc(16 * var(--u)); margin: 0; padding: 0; list-style: none; } .dining-page .dining-card { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); height: 60px; min-height: calc(60 * var(--u)); margin: 0; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); list-style: none; border: 1px solid rgba(149, 216, 255, 0.26); border-radius: calc(14 * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%), rgba(0, 140, 232, 0.02); box-shadow: 0 2px 14px rgba(0, 38, 54, 0.32); transition: background-color .2s ease, border-color .2s ease; } @media (hover: hover) { .dining-page .dining-card:hover { background-color: rgba(0, 140, 232, 0.14); border-color: rgba(149, 216, 255, 0.55); } .dining-page .dining-card:hover a.alink::before { background-color: #0AAAEE; } } .dining-page .dining-card:focus-within { border-color: rgba(149, 216, 255, 0.55); } .dining-page .dining-card:focus-within a.alink::before { background-color: #0AAAEE; } .dining-page .dining-card br { display: none; } /* the module's link: play circle + playlist name; it covers the whole card */ .dining-page .dining-card a.alink { position: static; display: flex; align-items: center; gap: calc(20 * var(--u)); flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: calc(22 * var(--u)); line-height: 1.3; text-transform: capitalize; overflow-wrap: break-word; overflow-wrap: anywhere; color: #ffffff !important; text-decoration: none !important; } .dining-page .dining-card a.alink:link, .dining-page .dining-card a.alink:visited, .dining-page .dining-card a.alink:hover, .dining-page .dining-card a.alink:active, .dining-page .dining-card a.alink:focus { color: #ffffff !important; text-decoration: none !important; } .dining-page .dining-card a.alink img.buttonMid { display: none !important; } .dining-page .dining-card a.alink::before { content: ""; flex: none; width: calc(43 * var(--u)); height: calc(43 * var(--u)); border-radius: 50%; background: rgba(0, 140, 232, 0.24) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 4.8v14.4c0 .9 1 1.5 1.8 1l11.3-7.2c.7-.5.7-1.5 0-2L8.8 3.8C8 3.3 7 3.9 7 4.8z'/%3E%3C/svg%3E") 56% 50% / 38% no-repeat; transition: background-color .2s ease; } .dining-page .dining-card a.alink::after { content: ""; position: absolute; inset: 0; border-radius: calc(14 * var(--u)); } .dining-page .dining-card a.alink:focus-visible { outline: none; } .dining-page .dining-card a.alink:focus-visible::after { outline: 2px solid #95D8FF; outline-offset: 2px; } /* three-dot icon from the Figma; decorative, a click on it plays the playlist like the rest of the card */ .dining-page .dining-card__more { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 22'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='3' cy='3' r='2.5'/%3E%3Ccircle cx='3' cy='11' r='2.5'/%3E%3Ccircle cx='3' cy='19' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / calc(6 * var(--u)) calc(22 * var(--u)) no-repeat; } /* ---------- Under 900px: photo on top, content below ---------- */ @media (max-width: 899.98px) { .dining-page { --u: 0.8px; } .dining-page .dining-hero { align-items: flex-end; min-height: 380px; padding: 48px 24px 40px; background-position: 30% center; } .dining-page .dining-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 45, 64, 0.1) 0%, rgba(1, 45, 64, 0.72) 100%); } .dining-page .dining-hero__inner { max-width: 400px; gap: 16px; } .dining-page .dining-hero__title { font-size: clamp(75px, 9vw, 94px); line-height: 1.06; } .dining-page .dining-hero__text { font-size: 18px; line-height: 26px; } .dining-page .dining-sec, .dining-page .dining-sec--reverse { grid-template-columns: minmax(0, 1fr); min-height: 0; } .dining-page .dining-sec--reverse .dining-sec__media { order: 0; } .dining-page .dining-sec__media { min-height: 0; aspect-ratio: 16 / 10; max-height: 460px; } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding: 36px 24px 48px; } .dining-page .dining-sec__content { max-width: 640px; margin: 0 auto; gap: 24px; } .dining-page .dining-sec__head { gap: 12px; } .dining-page .dining-sec__title { font-size: 60px; line-height: 1.1 !important; } .dining-page .dining-sec__desc { font-size: 17px; line-height: 25px; } .dining-page .dining-list { gap: 12px; } .dining-page .dining-card { gap: 10px; min-height: 50px; height: 50px; padding: 8px 14px 8px 8px; border-radius: 12px; } .dining-page .dining-card a.alink { gap: 14px; font-size: 17px; } .dining-page .dining-card a.alink::before { width: 38px; height: 38px; } .dining-page .dining-card a.alink::after { border-radius: 12px; } .dining-page .dining-card__more { width: 28px; height: 28px; background-size: 5px 19px; } } /* phones */ @media (max-width: 480px) { .dining-page .dining-hero { min-height: 330px; padding: 40px 16px 32px; } .dining-page .dining-hero__title { font-size: 42px; } .dining-page .dining-hero__text { font-size: 16px; line-height: 24px; } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding: 28px 16px 40px; } .dining-page .dining-sec__title { font-size: 44px; line-height: 32px; } .dining-page .dining-sec__desc { font-size: 16px; line-height: 24px; } .dining-page .dining-card a.alink { font-size: 16px; } .dining-page .dining-card a.alink::before { width: 34px; height: 34px; } } /* ---------- Mobile and tablet: fixes shared by every option ---------- */ .dining-page { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .dining-page .dining-card { -webkit-tap-highlight-color: transparent; } .dining-page .dining-card:active { background-color: rgba(0, 140, 232, 0.14); } @media (max-width: 899.98px) { .dining-page .dining-hero { min-height: 380px; min-height: min(380px, 56svh); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } /* aspect-ratio + max-height made the photo narrower than the screen (gap on the right at 740-899px) */ .dining-page .dining-sec__media { width: 100%; } } @media (max-width: 480px) { .dining-page .dining-hero__title { font-size: clamp(26px, 12vw, 42px); } .dining-page .dining-hero { min-height: 330px; min-height: min(330px, 52svh); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .dining-page .dining-sec__body, .dining-page .dining-sec--reverse .dining-sec__body { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } } /* Under 360px wide (small phones, zoomed in, split screen): room for the playlist name */ @media (max-width: 359.98px) { .dining-page .dining-card { padding-right: 10px; } .dining-page .dining-card__more { display: none; } .dining-page .dining-card a.alink::before { width: 38px; height: 38px; } .dining-page .dining-sec__title { font-size: 21px; line-height: 27px; } } /* ---------- Option 2: Title on the photo ---------- */ @media (max-width: 899.98px) { .dining-page .dining-sec, .dining-page .dining-sec--reverse { grid-template-areas: "media" "list"; } .dining-page .dining-sec__body, .dining-page .dining-sec__content { display: contents; } .dining-page .dining-sec__media { grid-area: media; align-self: stretch; aspect-ratio: 4 / 3; max-height: 62svh; } .dining-page .dining-sec__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 45, 64, 0) 8%, rgba(1, 45, 64, 0.62) 46%, rgba(1, 45, 64, 0.96) 100%); } .dining-page .dining-sec__head { grid-area: media; align-self: end; position: relative; z-index: 1; gap: 8px; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 22px max(24px, env(safe-area-inset-left, 0px)); } .dining-page .dining-sec__title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .dining-page .dining-sec__desc { color: #ffffff; } .dining-page .dining-list { grid-area: list; padding: 22px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); } } @media (max-width: 480px) { .dining-page .dining-sec__head { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); } .dining-page .dining-sec__desc { font-size: 15px; line-height: 22px; } .dining-page .dining-list { padding: 18px max(16px, env(safe-area-inset-right, 0px)) 36px max(16px, env(safe-area-inset-left, 0px)); } } @media (min-width: 640px) and (max-width: 899.98px) { .dining-page .dining-sec__media { aspect-ratio: 16 / 9; max-height: 460px; } .dining-page .dining-sec__head { padding-left: 32px; padding-right: 32px; padding-bottom: 28px; width:60%} .dining-page .dining-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 24px 32px 44px; } } /* Phones held sideways and other short screens 560-1199px wide: compact hero, photo and playlists side by side */ @media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) and (max-width: 1199.98px) { .dining-page .dining-hero { align-items: center; min-height: 0; padding: 28px max(32px, env(safe-area-inset-right, 0px)) 28px max(32px, env(safe-area-inset-left, 0px)); } .dining-page .dining-hero__inner { gap: 10px; max-width: 620px; } .dining-page .dining-hero__title { font-size: 44px; line-height: 1.05; } .dining-page .dining-hero__text { max-width: 560px; font-size: 16px; line-height: 23px; } .dining-page .dining-sec { grid-template-columns: 40% minmax(0, 1fr); min-height: 0; } .dining-page .dining-sec--reverse { grid-template-columns: minmax(0, 1fr) 40%; } .dining-page .dining-sec--reverse .dining-sec__media { order: 2; } .dining-page .dining-sec__media { aspect-ratio: auto; max-height: none; min-height: 100%; } .dining-page .dining-sec__body { padding: 28px max(28px, env(safe-area-inset-right, 0px)) 32px 28px; } .dining-page .dining-sec--reverse .dining-sec__body { padding: 28px 28px 32px max(28px, env(safe-area-inset-left, 0px)); } .dining-page .dining-sec__content { max-width: none; margin: 0; gap: 18px; } .dining-page .dining-sec__head { gap: 8px; } .dining-page .dining-sec__title { font-size: 24px; line-height: 30px; } .dining-page .dining-sec__desc { font-size: 15px; line-height: 22px; } .dining-page .dining-list { gap: 10px; } .dining-page .dining-card { gap: 10px; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: 12px; } .dining-page .dining-card a.alink { gap: 12px; font-size: 16px; } .dining-page .dining-card a.alink::before { width: 42px; height: 42px; } .dining-page .dining-card a.alink::after { border-radius: 12px; } .dining-page .dining-card__more { width: 28px; height: 28px; background-size: 5px 19px; } /* undo the "title on the photo" arrangement for this layout */ .dining-page .dining-sec, .dining-page .dining-sec--reverse { grid-template-areas: none; } .dining-page .dining-sec__body, .dining-page .dining-sec__content { display: flex; } .dining-page .dining-sec__media { grid-area: auto; align-self: auto; } .dining-page .dining-sec__media::after { content: none; } .dining-page .dining-sec__head { grid-area: auto; align-self: auto; position: static; z-index: auto; padding: 0; } .dining-page .dining-sec__title { text-shadow: none; } .dining-page .dining-sec__desc { color: rgba(255, 255, 255, 0.92); } .dining-page .dining-list { grid-area: auto; display: flex; padding: 0; } } @media (prefers-reduced-motion: reduce) { .dining-page .dining-card, .dining-page .dining-card a.alink::before { transition: none; } } /* ============ end RESTAURANTS & DINING (dining.cfm) block ============ */ /* ========================================================================== RESTAURANTS & DINING (dining.cfm) : ALIGNMENT FIXES Added by Claude, 2026-10-21. Alignment only; sizes, fonts and colours are unchanged. Must stay after the RESTAURANTS & DINING (dining.cfm) block. - Playlist buttons keep their height (60px desktop, 50px under 900px, 56px on phones held sideways) but grow instead of letting a long name spill out with larger text settings. Contents stay centred as before. - Desktop: the photo-left sections (Fine Dining, Ethnic Cuisine, Wine Bars) get the same 56 space above their text as below it, like the photo-right sections, so the text sits in the middle again. - Phones and tablets: the section heading on the photo keeps a gap from the top of the photo (48px, 36px on phones) instead of running into its top edge; the photo grows a little only where it had no room. ========================================================================== */ .dining-page .dining-card { height: auto; min-height: 60px; padding-top: 0; padding-bottom: 0; } @media (max-width: 899.98px) { .dining-page .dining-card { min-height: 50px; } } @media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) and (max-width: 899.98px) { .dining-page .dining-card { min-height: 56px; } } @media (min-width: 900px) and (orientation: portrait), (min-width: 900px) and (min-height: 500.02px), (min-width: 1200px) { .dining-page .dining-sec:not(.dining-sec--reverse) .dining-sec__body { padding-top: calc(56 * var(--u)); } } @media (max-width: 899.98px) and (orientation: portrait), (max-width: 899.98px) and (min-height: 500.02px), (max-width: 559.98px) { .dining-page .dining-sec__head { padding-top: 48px; } } @media (max-width: 480px) { .dining-page .dining-sec__head { padding-top: 36px; } } /* ============ end RESTAURANTS & DINING (dining.cfm) : ALIGNMENT FIXES block ============ */ @media (min-width: 809px) and (max-width: 820.98px) { .rs-left { height: 800px !important; } .rs-wheel-holder { height: 360px !important; } } /* ========================================================================== RETAIL & FASHION (retail.cfm) [Option 2, Medium Type, held at 1512] Added by Claude, 2026-10-21. Every rule is limited to .retail-page. Desktop, 1200px and up: the Figma "Retail And Fashion" 1920 frame laid out at the 1512px page, with every text size about 80% of the Figma. Sizes are written as calc(N * var(--u)) where N is the size at 1512px, so narrower desktop windows keep the same proportions (never below 70%). The sizes that differ from the Figma are the --rt-* tokens on .retail-page. Section layouts: A = label | photo | card (Fashion), B = card | framed photo | vertical label (Lear Jets, Kids), C = label over photo | card (Franchises, High Tech), D = card | full-height photo with label (Luxury). Under 1200px: a basic stacked layout (photo, then card) until the tablet and phone passes. Fonts: Arima Madurai (headings, labels) and Roboto (text), loaded in retail.cfm. Images: retail-hero.jpg here (../images/), section photos from default_v2/images in retail.cfm. Playlist rows wrap the radiosparx.play.launch.link module output:
The legacy .alink rules use !important colours, so the overrides below need !important too. custom.css has body * { line-height: 1.3 !important }, so every line-height here is !important as well. Small text never goes below 15px (17px hero intro) on 1200-1366px screens. 2026-10-21 update: every section now has its own Figma background image and effect (measured from the Figma export): Fashion: grey "frosted glass" store photo (retail-fashion-bg.jpg, the texture is baked into the file) + rgba(0,134,190,.54); left 514px #21556B with the Figma grain. Lear Jets / Kids: the section photo blurred 26px + 42% black. Franchises / High Tech: the photo across the whole section, deep blue over everything except the photo window, #004562 band behind the label, Figma grain on the blue. Luxury: the photo across the whole section (its Figma colour look is baked into retail-luxury.jpg); left panel shows it again under the #003E58 to rgba(0,134,190,.64) gradient. Grain: retail-noise.png (seamless, #0086BE at 25%, half the pixels). ========================================================================== */ .retail-page, .retail-page *, .retail-page *::before, .retail-page *::after { box-sizing: border-box; } .retail-page { container-type: inline-size; --u: clamp(0.7px, 100cqw / 1512, 1px); /* sizes at 1512px (Option 2, Medium Type) */ --rt-hero-h: 699; --rt-hero-title: 72; --rt-hero-title-lh: 84; --rt-hero-text: 21; --rt-hero-text-lh: 29; --rt-tag: 58; --rt-tag-lh: 50; --rt-card-w: 620; --rt-card-pad: 30; --rt-card-radius: 28; --rt-title: 40; --rt-title-lh: 47; --rt-desc: 17; --rt-desc-lh: 25; --rt-head-gap: 14; --rt-body-gap: 24; --rt-row-h: 70; --rt-row-gap: 8; --rt-row-pad: 10; --rt-row-radius: 12; --rt-play: 50; --rt-play-gap: 16; --rt-name: 18; --rt-more: 22; --rt-more-inset: 42; --rt-sec-min: 700; --rt-photo-d: 711; width: 100%; max-width: 1512px; margin: 0 auto; background: #012D40; color: #ffffff; font-family: 'Roboto', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @supports not (width: 1cqw) { .retail-page { --u: clamp(0.7px, 100vw / 1512, 1px); } } /* ---------- Hero ---------- */ /* the photo is plain; the Figma blue gradient is added here */ .retail-page .retail-hero { position: relative; height: calc(var(--rt-hero-h) * var(--u)); background: linear-gradient(270deg, rgba(0, 84, 140, 0.34) 0%, rgba(0, 23, 38, 0.34) 100%), #0b2633 url("../images/retail-hero.jpg") center / cover no-repeat; } .retail-page .retail-hero__panel { position: absolute; top: calc(350 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(846 * var(--u)); min-height: calc(298 * var(--u)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(6 * var(--u)); padding: calc(33 * var(--u)); text-align: center; /* border: 1px solid rgba(255, 255, 255, 0.36); */ border-radius: calc(19 * var(--u)); background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(calc(8 * var(--u))); /* backdrop-filter: blur(calc(8 * var(--u))); */ } .retail-page .retail-hero__title { margin: 0; padding: 0; font-family: 'Arima Madurai', 'Arima', Georgia, serif; font-weight: 800; font-size: calc(var(--rt-hero-title) * var(--u)); line-height: calc(var(--rt-hero-title-lh) * var(--u)) !important; text-transform: capitalize; text-wrap: balance; color: #ffffff; } .retail-page .retail-hero__text { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: max(17px, calc(var(--rt-hero-text) * var(--u))); line-height: max(24px, calc(var(--rt-hero-text-lh) * var(--u))) !important; text-transform: capitalize; text-wrap: pretty; color: #ffffff; } /* ---------- Sections: shared ---------- */ .retail-page .retail-sec { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto; min-height: calc(var(--rt-sec-min) * var(--u)); } /* the section background photo (each layout adds its own effect) */ .retail-page .retail-sec__bg { position: absolute; z-index: -3; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } .retail-page .retail-sec::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; } /* Figma grain on the blue areas */ .retail-page .retail-sec--a::after, .retail-page .retail-sec--c::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../images/retail-noise.png") 0 0 / calc(157.5 * var(--u)) repeat; } .retail-page .retail-sec__media { position: relative; grid-row: 1; min-height: 0; margin: 0; overflow: hidden; } .retail-page .retail-sec__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; object-position: center; } /* big decorative word (Fashion, LEAR JETS ...) with its dash-and-line rule */ .retail-page .retail-sec__tag { position: relative; z-index: 1; grid-row: 1; display: flex; margin: 0; padding: 0; pointer-events: none; user-select: none; } .retail-page .retail-sec__tag-text { font-family: 'Arima Madurai', 'Arima', Georgia, serif; font-weight: 700; font-size: calc(var(--rt-tag) * var(--u)); line-height: calc(var(--rt-tag-lh) * var(--u)) !important; letter-spacing: 0.32em; white-space: nowrap; color: #ffffff; } .retail-page .retail-sec__tag-rule { flex: none; display: block; } /* glass card */ .retail-page .retail-sec__card { position: relative; z-index: 1; grid-row: 1; display: flex; flex-direction: column; gap: calc(var(--rt-body-gap) * var(--u)); width: 100%; min-width: 0; padding: calc(var(--rt-card-pad) * var(--u)); /* border: 1px solid rgba(255, 255, 255, 0.18); */ border-radius: calc(var(--rt-card-radius) * var(--u)); /* background: */ /* linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), */ /* rgba(0, 99, 161, 0.08); */ -webkit-backdrop-filter: blur(calc(12 * var(--u))); /* backdrop-filter: blur(calc(12 * var(--u))); */ /* box-shadow: calc(-6 * var(--u)) calc(9 * var(--u)) calc(25 * var(--u)) rgba(0, 0, 0, 0.44); */ } .retail-page .retail-sec__head { display: flex; flex-direction: column; gap: calc(var(--rt-head-gap) * var(--u)); } .retail-page .retail-sec__title { margin: 0; padding: 0; font-family: 'Arima Madurai', 'Arima', Georgia, serif; font-weight: 900; font-size: calc(var(--rt-title) * var(--u)); line-height: calc(var(--rt-title-lh) * var(--u)) !important; text-wrap: balance; overflow-wrap: break-word; color: #ffffff; } .retail-page .retail-sec__desc { margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 400; font-size: max(15px, calc(var(--rt-desc) * var(--u))); line-height: max(22px, calc(var(--rt-desc-lh) * var(--u))) !important; text-transform: capitalize; color: rgba(255, 255, 255, 0.92); } /* ---------- Playlist rows ---------- */ .retail-page .retail-list { display: flex; flex-direction: column; gap: calc(var(--rt-row-gap) * var(--u)); margin: 0; padding: 0; list-style: none; } .retail-page .retail-card { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: 58px; height: 58px; margin: 0; margin: 0; padding: calc(var(--rt-row-pad) * var(--u)) calc(var(--rt-more-inset) * var(--u)) calc(var(--rt-row-pad) * var(--u)) calc(var(--rt-row-pad) * var(--u)); list-style: none; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: calc(var(--rt-row-radius) * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%), rgba(0, 140, 232, 0.02); box-shadow: 0 calc(2 * var(--u)) calc(11 * var(--u)) rgba(0, 38, 54, 0.32); transition: background-color .2s ease, border-color .2s ease; background-color: rgba(0, 140, 232, 0.16) !important; border-color: rgba(149, 216, 255, 0.55) !important; } @media (hover: hover) { .retail-page .retail-card:hover { background-color: rgba(0, 140, 232, 0.16); border-color: rgba(149, 216, 255, 0.55); } .retail-page .retail-card:hover a.alink::before { background-color: #0AAAEE; } } .retail-page .retail-card:focus-within { border-color: rgba(149, 216, 255, 0.55); } .retail-page .retail-card br { display: none; } .retail-page .retail-card a.alink { position: static; display: flex; align-items: center; gap: calc(var(--rt-play-gap) * var(--u)); flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: max(15px, calc(var(--rt-name) * var(--u))); line-height: 1.3 !important; text-transform: capitalize; overflow-wrap: anywhere; color: #ffffff !important; text-decoration: none !important; } .retail-page .retail-card a.alink:link, .retail-page .retail-card a.alink:visited, .retail-page .retail-card a.alink:hover, .retail-page .retail-card a.alink:active, .retail-page .retail-card a.alink:focus { color: #ffffff !important; text-decoration: none !important; } .retail-page .retail-card a.alink img.buttonMid { display: none !important; } .retail-page .retail-card a.alink::before { content: ""; flex: none; width: 43px; height: 43px; border-radius: 50%; background: #008CE8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 4.8v14.4c0 .9 1 1.5 1.8 1l11.3-7.2c.7-.5.7-1.5 0-2L8.8 3.8C8 3.3 7 3.9 7 4.8z'/%3E%3C/svg%3E") 58% 50% / 40% no-repeat; transition: background-color .2s ease; } /* the whole row is the link */ .retail-page .retail-card a.alink::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--rt-row-radius) * var(--u)); } .retail-page .retail-card a.alink:focus-visible { outline: none; } .retail-page .retail-card a.alink:focus-visible::after { outline: 2px solid #95D8FF; outline-offset: 2px; } /* three-dot icon from the Figma; decorative */ .retail-page .retail-card__more { display: none !important; position: absolute; top: 50%; right: calc((var(--rt-more-inset) - var(--rt-more)) / 2 * var(--u)); width: calc(var(--rt-more) * var(--u)); height: calc(var(--rt-more) * var(--u)); transform: translateY(-50%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 22'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='3' cy='3' r='2.5'/%3E%3Ccircle cx='3' cy='11' r='2.5'/%3E%3Ccircle cx='3' cy='19' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / auto 70% no-repeat; } /* ---------- Pattern A: label | photo | card (Fashion) ---------- */ .retail-page .retail-sec--a { grid-template-columns: calc(62 * var(--u)) calc(77 * var(--u)) calc(101 * var(--u)) calc(276 * var(--u)) minmax(0, 1fr) calc(var(--rt-card-w) * var(--u)) calc(35 * var(--u)); align-items: center; padding-block: calc(33 * var(--u)); } .retail-page .retail-sec--a::before { background: linear-gradient(90deg, #21556B 0, #21556B calc(514 * var(--u)), rgba(0, 134, 190, 0.54) calc(514 * var(--u))); } .retail-page .retail-sec--a::after { right: auto; width: calc(514 * var(--u)); } .retail-page .retail-sec--a .retail-sec__tag { grid-column: 3; justify-self: center; align-items: flex-end; gap: calc(40 * var(--u)); } .retail-page .retail-sec--a .retail-sec__tag-text { writing-mode: vertical-rl; transform: rotate(180deg); } .retail-page .retail-sec--a .retail-sec__tag-rule { width: calc(2 * var(--u)); height: calc(96 * var(--u)); background: linear-gradient(#ffffff, #ffffff) top / 100% calc(7 * var(--u)) no-repeat, linear-gradient(#ffffff, #ffffff) bottom / 100% calc(70 * var(--u)) no-repeat; } .retail-page .retail-sec--a .retail-sec__media { grid-column: 4; align-self: stretch; } .retail-page .retail-sec--a .retail-sec__card { grid-column: 6; /* background: */ /* linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), */ /* rgba(0, 99, 161, 0.08); */ /* box-shadow: calc(-6.3 * var(--u)) calc(9.45 * var(--u)) calc(25.2 * var(--u)) rgba(0, 0, 0, 0.44); */ } /* ---------- Pattern B: card | framed photo | vertical label (Lear Jets) ---------- */ .retail-page .retail-sec--b { grid-template-columns: calc(57 * var(--u)) calc(var(--rt-card-w) * var(--u)) minmax(0, 1fr) calc(158 * var(--u)); align-items: center; padding-block: calc(33 * var(--u)); background-color: #1D1C1C; } /* Figma: the photo blurred 33px (26px at 1512) under 42% black; the blur fades into the dark section colour at the edges, as it does in the Figma */ .retail-page .retail-sec--b .retail-sec__bg { filter: blur(calc(26 * var(--u))); } .retail-page .retail-sec--b::before { background: rgba(0, 0, 0, 0.42); } .retail-page .retail-sec--b .retail-sec__card { grid-column: 2; border-color: rgba(255, 255, 255, 0.22); background: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), rgba(0, 117, 190, 0.12); box-shadow: calc(-6.3 * var(--u)) calc(7.9 * var(--u)) calc(25.2 * var(--u)) rgba(0, 0, 0, 0.32); } /* framed photo: tucks 17px under the card, as in the Figma */ .retail-page .retail-sec--b .retail-sec__media { grid-column: 3; align-self: stretch; margin-block: calc(52 * var(--u)); margin-left: calc(-17 * var(--u)); border: calc(3 * var(--u)) solid #ffffff; box-shadow: calc(4.7 * var(--u)) calc(6.3 * var(--u)) calc(18.9 * var(--u)) rgba(2, 44, 61, 0.25); } .retail-page .retail-sec--jets .retail-sec__media img { object-position: 64% 50%; } .retail-page .retail-sec--b .retail-sec__tag { grid-column: 4; align-self: start; justify-self: start; margin: calc(38 * var(--u)) 0 0 calc(18 * var(--u)); align-items: flex-start; gap: calc(21 * var(--u)); } .retail-page .retail-sec--b .retail-sec__tag-text { writing-mode: vertical-rl; text-transform: uppercase; } .retail-page .retail-sec--b .retail-sec__tag-rule { order: -1; width: calc(2 * var(--u)); height: calc(96 * var(--u)); background: linear-gradient(#ffffff, #ffffff) top / 100% calc(70 * var(--u)) no-repeat, linear-gradient(#ffffff, #ffffff) bottom / 100% calc(7 * var(--u)) no-repeat; } /* ---------- Pattern C: label over photo | card (Franchises) ---------- */ .retail-page .retail-sec--c { grid-template-columns: calc(581 * var(--u)) minmax(0, 1fr) calc(var(--rt-card-w) * var(--u)) calc(32 * var(--u)); grid-template-rows: calc(153 * var(--u)) auto; } /* the photo runs under the whole section; it shows clear only in the photo window, deep blue (measured from the Figma) everywhere else */ .retail-page .retail-sec--c::before { background: linear-gradient(#004562, #004562) left top / calc(581 * var(--u)) 100% no-repeat, linear-gradient(90deg, rgba(10, 88, 122, 0.79) 0%, rgba(11, 100, 139, 0.79) 100%) right top / calc(100% - 581 * var(--u)) 100% no-repeat; } .retail-page .retail-sec--c .retail-sec__tag { grid-column: 1; grid-row: 1; align-self: start; flex-direction: column; align-items: flex-start; gap: calc(18 * var(--u)); padding: calc(35 * var(--u)) 0 0 calc(57 * var(--u)); } .retail-page .retail-sec--c .retail-sec__tag-text { margin-inline-end: -0.32em; } .retail-page .retail-sec--c .retail-sec__tag-rule { width: calc(96 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(#ffffff, #ffffff) left / calc(70 * var(--u)) 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / calc(7 * var(--u)) 100% no-repeat; } .retail-page .retail-sec--c .retail-sec__media { grid-column: 1; grid-row: 2; align-self: stretch; box-shadow: calc(-9.45 * var(--u)) calc(9.45 * var(--u)) calc(17.3 * var(--u)) rgba(0, 0, 0, 0.25); } /* same size and place as the section background, so the photo lines up */ .retail-page .retail-sec--c .retail-sec__media img { top: calc(-153 * var(--u)); right: auto; bottom: auto; left: 0; width: calc(1512 * var(--u)); height: calc(100% + 153 * var(--u)); } .retail-page .retail-sec--c .retail-sec__card { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-block: calc(57 * var(--u)); background: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%), rgba(255, 255, 255, 0.08); box-shadow: calc(-6.3 * var(--u)) calc(9.45 * var(--u)) calc(25.2 * var(--u)) rgba(0, 0, 0, 0.32); } /* ---------- Pattern D: card | full-height photo with label (Luxury) ---------- */ .retail-page .retail-sec--d { grid-template-columns: calc(67 * var(--u)) calc(var(--rt-card-w) * var(--u)) minmax(0, 1fr) calc(var(--rt-photo-d) * var(--u)); } /* left panel: the photo again under the Figma blue gradient */ .retail-page .retail-sec--d .retail-sec__bg { width: calc(100% - var(--rt-photo-d) * var(--u)); } .retail-page .retail-sec--d::before { right: auto; width: calc(100% - var(--rt-photo-d) * var(--u)); background: linear-gradient(90deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec--d .retail-sec__media { grid-column: 4; align-self: stretch; } /* photo sized to the whole section, right-aligned, like the Figma */ .retail-page .retail-sec--d .retail-sec__media img { top: 0; right: 0; bottom: auto; left: auto; width: calc(1512 * var(--u)); height: 100%; } .retail-page .retail-sec--d .retail-sec__card { grid-column: 2; align-self: center; margin-block: calc(74 * var(--u)); } .retail-page .retail-sec--d .retail-sec__tag { grid-column: 4; align-self: start; justify-self: end; flex-direction: column; align-items: flex-end; gap: calc(18 * var(--u)); margin: calc(68 * var(--u)) calc(28 * var(--u)) 0 0; } .retail-page .retail-sec--d .retail-sec__tag-text { margin-inline-end: -0.24em; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(80, 40, 10, 0.28); } .retail-page .retail-sec--d .retail-sec__tag-rule { width: calc(96 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(#ffffff, #ffffff) left / calc(7 * var(--u)) 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / calc(70 * var(--u)) 100% no-repeat; } /* ---------- Under 1200px: basic stacked layout (tags, photo, card) ---------- */ @media (max-width: 1199.98px) { .retail-page { --u: 0.9px; } .retail-page .retail-hero { display: flex; align-items: flex-end; justify-content: center; height: auto; min-height: 460px; padding: 72px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); background-position: center, 35% center; } .retail-page .retail-hero__panel { position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 760px; min-height: 0; gap: 10px; padding: 28px 24px; border-radius: 16px; background: rgba(1, 45, 64, 0.38); } .retail-page .retail-hero__title { font-size: clamp(36px, 7vw, 60px); line-height: 1.14 !important; } .retail-page .retail-hero__text { font-size: 18px; line-height: 26px !important; } /* one centred column, at most 760px wide */ .retail-page .retail-sec { grid-template-columns: minmax(max(24px, env(safe-area-inset-left, 0px)), 1fr) minmax(0, 760px) minmax(max(24px, env(safe-area-inset-right, 0px)), 1fr); grid-template-rows: none; grid-template-areas: ". tag ." ". media ." ". card ."; align-items: stretch; min-height: 0; padding: 0 0 40px; } .retail-page .retail-sec--a::before { background: linear-gradient(180deg, #21556B 0%, rgba(33, 85, 107, 0.75) 30%, rgba(0, 134, 190, 0.54) 100%); } .retail-page .retail-sec--a::after { width: auto; right: 0; } .retail-page .retail-sec--c::before { background: linear-gradient(180deg, #004562 0%, rgba(10, 88, 122, 0.85) 100%); } .retail-page .retail-sec--d .retail-sec__bg { width: 100%; } .retail-page .retail-sec--d::before { width: auto; right: 0; background: linear-gradient(180deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec .retail-sec__tag { grid-area: tag; align-self: start; justify-self: start; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 28px 0 18px; } .retail-page .retail-sec .retail-sec__tag-text { writing-mode: horizontal-tb; transform: none; margin-inline-end: -0.32em; font-size: 40px; line-height: 44px !important; text-shadow: none; } .retail-page .retail-sec .retail-sec__tag-rule { order: 0; width: 96px; height: 2px; background: linear-gradient(#ffffff, #ffffff) left / 70px 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / 7px 100% no-repeat; } .retail-page .retail-sec .retail-sec__media { grid-area: media; align-self: auto; justify-self: stretch; width: auto; margin: 0; aspect-ratio: 16 / 9; border: 0; } .retail-page .retail-sec--b .retail-sec__media { margin-left: 0; border: 3px solid #ffffff; } .retail-page .retail-sec--c .retail-sec__media img, .retail-page .retail-sec--d .retail-sec__media img { top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 100%; } /* the Fashion photo is a tall portrait: keep the faces in the wide crop */ .retail-page .retail-sec--fashion .retail-sec__media img { object-position: 50% 22%; } .retail-page .retail-sec .retail-sec__card { grid-area: card; align-self: auto; justify-self: stretch; width: auto; margin: 24px 0 0; } } /* phones */ @media (max-width: 599.98px) { .retail-page { --u: 0.84px; } .retail-page .retail-hero { min-height: 380px; padding: 56px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); } .retail-page .retail-hero__panel { padding: 22px 18px; } .retail-page .retail-hero__text { font-size: 16px; line-height: 24px !important; } .retail-page .retail-sec { grid-template-columns: minmax(max(16px, env(safe-area-inset-left, 0px)), 1fr) minmax(0, 760px) minmax(max(16px, env(safe-area-inset-right, 0px)), 1fr); } .retail-page .retail-sec .retail-sec__tag { padding: 24px 0 14px; } .retail-page .retail-sec .retail-sec__tag-text { font-size: 32px; line-height: 36px !important; } .retail-page .retail-sec .retail-sec__media { aspect-ratio: 4 / 3; } .retail-page .retail-sec .retail-sec__card { margin-top: 18px; padding: 22px 16px; } .retail-page .retail-card a.alink { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .retail-page .retail-card, .retail-page .retail-card a.alink::before { transition: none; } } /* ============ end RETAIL & FASHION (retail.cfm) block ============ */ /* ========================================================================== RETAIL & FASHION (retail.cfm) : DESKTOP [Desktop option 1, Compact Hero] Added by Claude, 2026-10-21. 1200px and up only (the exact opposite of the max-width: 1199.98px fallback in the block above), so phones and tablets are unchanged. Must stay after the RETAIL & FASHION (retail.cfm) block. - Hero 540px at 1512 (was 699), scaling with the page like the rest of the block; the glass panel keeps its size and sits 48px from the bottom. - Minimum height instead of a fixed height, panel in normal flow: enlarged text (browser text zoom, minimum font size) makes the hero taller instead of pushing the panel into the Fashion section. - Wider than 1512px the page stays held at 1512px, centred (unchanged). ========================================================================== */ @media not all and (max-width: 1199.98px) { .retail-page { --rt-hero-h: 540; } .retail-page .retail-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: auto; min-height: calc(var(--rt-hero-h) * var(--u)); padding: calc(64 * var(--u)) calc(57 * var(--u)) calc(48 * var(--u)); } .retail-page .retail-hero__panel { position: relative; top: auto; left: auto; transform: none; max-width: 100%; } } /* Franchises, Gaming, Lear Jets and Kids (desktop): the Luxury treatment. Added by Claude, 2026-10-21. 1200px and up only. Images unchanged. - The playlists side gets the Luxury blue gradient over the section photo, dark at the outer edge and see-through next to the photo: on the right for Franchises and Gaming (photo on the left), on the left for Lear Jets and Kids (photo on the right, laid out like Luxury). - No glass box behind the title and playlists, no grain. - The photo runs the full height of the section and the big label sits on the photo, with a soft dark glow so it stays readable on bright photos. - One photo per section: the photo behind the gradient and the photo beside the playlists are the same picture in the same place, so it reads as one continuous image (Luxury too). Lear Jets and Kids: the picture is moved right so the woman and the jet (and the middle of the Kids photo) sit in the photo area; it fades in from the dark blue on the left. */ @media not all and (max-width: 1199.98px) { /* photo on the left, playlists on the right (Franchises, Gaming) */ .retail-page .retail-sec--franchise::before, .retail-page .retail-sec--tech::before { background: linear-gradient(#004562, #004562) left top / calc(581 * var(--u)) 100% no-repeat, linear-gradient(270deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%) right top / calc(81% - 581 * var(--u)) 100% no-repeat; } .retail-page .retail-sec--franchise::after, .retail-page .retail-sec--tech::after { display: none; } .retail-page .retail-sec--franchise .retail-sec__media, .retail-page .retail-sec--tech .retail-sec__media { grid-row: 1 / span 2; } .retail-page .retail-sec--franchise .retail-sec__media img, .retail-page .retail-sec--tech .retail-sec__media img { top: 0; height: 100%; } /* Luxury: one continuous photo (the background photo now lines up with the photo on the right instead of repeating it) */ .retail-page .retail-sec--luxury .retail-sec__bg { left: auto; right: 0; width: calc(1512 * var(--u)); } /* playlists on the left, photo on the right, like Luxury (Lear Jets, Kids) */ .retail-page .retail-sec--jets, .retail-page .retail-sec--kids { grid-template-columns: calc(67 * var(--u)) calc(var(--rt-card-w) * var(--u)) minmax(0, 1fr) calc(var(--rt-photo-d) * var(--u)); padding-block: 0; background-color: #003E58; /* one picture box for both photo layers, measured from the right edge */ --rt-img-w: 1205; --rt-img-r: -132; } .retail-page .retail-sec--kids { --rt-img-r: -247; } .retail-page .retail-sec--jets .retail-sec__bg, .retail-page .retail-sec--kids .retail-sec__bg { left: auto; right: calc(var(--rt-img-r) * var(--u)); width: calc(var(--rt-img-w) * var(--u)); filter: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(200 * var(--u))); mask-image: linear-gradient(90deg, transparent 0, #000 calc(200 * var(--u))); } .retail-page .retail-sec--jets::before, .retail-page .retail-sec--kids::before { right: auto; width: calc(100% - var(--rt-photo-d) * var(--u)); background: linear-gradient(90deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec--jets .retail-sec__card, .retail-page .retail-sec--kids .retail-sec__card { grid-column: 2; align-self: center; margin-block: calc(74 * var(--u)); } .retail-page .retail-sec--jets .retail-sec__media, .retail-page .retail-sec--kids .retail-sec__media { grid-column: 4; align-self: stretch; margin: 0; border: 0; box-shadow: none; } .retail-page .retail-sec--jets .retail-sec__media img, .retail-page .retail-sec--kids .retail-sec__media img { top: 0; right: calc(var(--rt-img-r) * var(--u)); bottom: auto; left: auto; width: calc(var(--rt-img-w) * var(--u)); height: 100%; object-position: center; } .retail-page .retail-sec--jets .retail-sec__tag, .retail-page .retail-sec--kids .retail-sec__tag { grid-column: 4; align-self: start; justify-self: end; flex-direction: column; align-items: flex-end; gap: calc(18 * var(--u)); margin: calc(68 * var(--u)) calc(28 * var(--u)) 0 0; } .retail-page .retail-sec--jets .retail-sec__tag-text, .retail-page .retail-sec--kids .retail-sec__tag-text { writing-mode: horizontal-tb; margin-inline-end: -0.24em; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(80, 40, 10, 0.28); } .retail-page .retail-sec--jets .retail-sec__tag-rule, .retail-page .retail-sec--kids .retail-sec__tag-rule { order: 0; width: calc(96 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(#ffffff, #ffffff) left / calc(7 * var(--u)) 100% no-repeat, linear-gradient(#ffffff, #ffffff) right / calc(70 * var(--u)) 100% no-repeat; } /* all four: label readable on the photo, no glass box */ .retail-page .retail-sec--franchise .retail-sec__tag, .retail-page .retail-sec--tech .retail-sec__tag, .retail-page .retail-sec--jets .retail-sec__tag, .retail-page .retail-sec--kids .retail-sec__tag { filter: drop-shadow(0 1px 2px rgba(0, 20, 30, 0.6)) drop-shadow(0 0 calc(10 * var(--u)) rgba(0, 20, 30, 0.55)) drop-shadow(0 0 calc(24 * var(--u)) rgba(0, 20, 30, 0.45)); } .retail-page .retail-sec--franchise .retail-sec__card, .retail-page .retail-sec--tech .retail-sec__card, .retail-page .retail-sec--jets .retail-sec__card, .retail-page .retail-sec--kids .retail-sec__card { background: none; box-shadow: none; } } /* ============ end RETAIL & FASHION (retail.cfm) : DESKTOP block ============ */ /* ========================================================================== RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET [Mobile option A, Faithful Stack] Added by Claude, 2026-10-21. Under 1200px only, so desktop (1200px and up) is unchanged. Must stay after the RETAIL & FASHION (retail.cfm) block and the RETAIL & FASHION (retail.cfm) : DESKTOP block. - Phones and tablets: no automatic text inflation on rotate (iOS), no grey tap flash, a pressed state on playlist rows, section labels wrap with larger text settings, hero capped to about two thirds of the screen. - Portrait tablets and tall screens 600px and up: playlists in two columns. - Landscape tablets 960 to 1199px: column up to 920px wide. - Phones held sideways and other short screens (500px tall or less): compact hero, photo beside the label and playlists, two playlist columns from 800px wide. Side gutters respect the notch (safe area). ========================================================================== */ /* ---------- Phones and tablets (under 1200px): fixes in every option ---------- */ @media (max-width: 1199.98px) { /* no automatic text inflation on rotate (iOS), no grey tap flash, a pressed state on touch */ .retail-page { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .retail-page .retail-card { -webkit-tap-highlight-color: transparent; } .retail-page .retail-card:active { background-color: rgba(0, 140, 232, 0.16); border-color: rgba(149, 216, 255, 0.55); } /* the big labels wrap instead of running off the screen with larger text settings */ .retail-page .retail-sec .retail-sec__tag { justify-self: stretch; max-width: 100%; } .retail-page .retail-sec .retail-sec__tag-text { max-width: 100%; white-space: normal; overflow-wrap: break-word; } /* hero never taller than most of the screen */ .retail-page .retail-hero { min-height: min(460px, 70vh); min-height: min(460px, 70svh); } } @media (max-width: 599.98px) { .retail-page .retail-hero { min-height: min(380px, 62vh); min-height: min(380px, 62svh); } } /* landscape tablets: a wider column so the sides are not empty */ @media (min-width: 960px) and (max-width: 1199.98px) { .retail-page .retail-sec { grid-template-columns: minmax(max(24px, env(safe-area-inset-left, 0px)), 1fr) minmax(0, 920px) minmax(max(24px, env(safe-area-inset-right, 0px)), 1fr); } } /* Option A: Faithful Stack. Label, photo, card as now; playlists in two columns on tablets */ @media (min-width: 600px) and (max-width: 1199.98px) and (orientation: portrait), (min-width: 600px) and (max-width: 1199.98px) and (min-height: 500.02px) { .retail-page .retail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } } /* ---------- Phones held sideways and other short screens: photo beside the playlists ---------- */ @media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) { .retail-page { --rt-row-h: 60; --rt-play: 46; --rt-title: 32; --rt-title-lh: 38; } .retail-page .retail-hero { align-items: center; min-height: 0; padding: 24px max(32px, env(safe-area-inset-right, 0px)) 24px max(32px, env(safe-area-inset-left, 0px)); } .retail-page .retail-hero__panel { max-width: 640px; gap: 8px; padding: 18px 24px; } .retail-page .retail-hero__title { font-size: 40px; line-height: 1.1 !important; } .retail-page .retail-hero__text { font-size: 15px; line-height: 22px !important; } .retail-page .retail-sec { grid-template-columns: max(24px, env(safe-area-inset-left, 0px)) minmax(0, 2fr) 24px minmax(0, 3fr) max(24px, env(safe-area-inset-right, 0px)); grid-template-rows: auto 1fr; grid-template-areas: ". media . tag ." ". media . card ."; padding: 24px 0; } .retail-page .retail-sec .retail-sec__tag { padding: 0 0 12px; gap: 10px; } .retail-page .retail-sec .retail-sec__tag-text { font-size: 28px; line-height: 32px !important; } .retail-page .retail-sec .retail-sec__media { align-self: stretch; aspect-ratio: auto; min-height: 220px; } .retail-page .retail-sec .retail-sec__card { margin: 0; padding: 18px; gap: 16px; } .retail-page .retail-sec--fashion .retail-sec__media img { object-position: 50% 30%; } } @media (min-width: 800px) and (max-width: 1199.98px) and (orientation: landscape) and (max-height: 500px) { .retail-page .retail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } } /* ============ end RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET block ============ */ /* ========================================================================== RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET FIXES Added by Claude, 2026-10-21. Under 1200px only, so desktop is unchanged. Must stay after the RETAIL & FASHION (retail.cfm) MOBILE AND TABLET block. - Playlist rows grow with their text (at least 58px) instead of letting long names spill out, and the space kept for the hidden three-dot icon is given back to the name. - Same look as desktop: no glass box behind the title and playlists. - One photo per section (Lear Jets, Franchises, Luxury, Gaming, Kids): the photo is shown once; behind the label, title and playlists is the Luxury blue gradient (no second blurred or tinted copy of the photo, no grain, no white frame). Fashion keeps its own Figma background. - Phones: the Franchises title keeps "Big-Box" on one line. ========================================================================== */ @media (max-width: 1199.98px) { .retail-page .retail-card { height: auto; min-height: 58px; padding-right: calc(var(--rt-row-pad) * var(--u)); } .retail-page .retail-sec .retail-sec__card { background: none; box-shadow: none; } .retail-page .retail-sec--jets, .retail-page .retail-sec--franchise, .retail-page .retail-sec--luxury, .retail-page .retail-sec--tech, .retail-page .retail-sec--kids { background-color: #003E58; } .retail-page .retail-sec--jets .retail-sec__bg, .retail-page .retail-sec--franchise .retail-sec__bg, .retail-page .retail-sec--luxury .retail-sec__bg, .retail-page .retail-sec--tech .retail-sec__bg, .retail-page .retail-sec--kids .retail-sec__bg { display: none; } .retail-page .retail-sec--jets::before, .retail-page .retail-sec--franchise::before, .retail-page .retail-sec--luxury::before, .retail-page .retail-sec--tech::before, .retail-page .retail-sec--kids::before { inset: 0; width: auto; background: linear-gradient(180deg, #003E58 0%, rgba(0, 134, 190, 0.64) 100%); } .retail-page .retail-sec--franchise::after, .retail-page .retail-sec--tech::after { display: none; } .retail-page .retail-sec--jets .retail-sec__media, .retail-page .retail-sec--kids .retail-sec__media { border: 0; box-shadow: none; } } @media (max-width: 599.98px) { .retail-page .retail-sec--franchise .retail-sec__title { text-wrap: pretty; } } /* ============ end RETAIL & FASHION (retail.cfm) : MOBILE AND TABLET FIXES block ============ */ #masterEncapsDivId:has(.rs-v1-page), #masterEncapsDivId:has(#subtitlesDivID), #masterEncapsDivId:has(.menuOptDisplayClass) { background: url(/module/images/art/graydient.jpg) 0 0 / 100% 100% no-repeat; border-style: solid; border-color: #fff; border-width: 0 1px; } /* Same width as after a refresh (1626px) on large screens */ @media (min-width: 1512px) { #masterEncapsDivId:has(.rs-v1-page), #masterEncapsDivId:has(#subtitlesDivID), #masterEncapsDivId:has(.menuOptDisplayClass) { max-width: 1626px !important; } } #masterEncapsDivId:has(#ticketTabs) { background-color: #f8f9fa; display: flow-root; }