.elementor-11967 .elementor-element.elementor-element-cb779e1:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-cb779e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://popnonstop.radio/wp-content/uploads/2023/05/fondo-header-3d.jpg");background-position:50% 40%;background-repeat:no-repeat;background-size:cover;}.elementor-11967 .elementor-element.elementor-element-cb779e1{--proradio-section-particles:cfg-stars-fixed;--proradio-section-particles-color:#ffffff;--proradio-section-particles-number:80;--proradio-section-particles-speed:2;--proradio-section-particles-size:3;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-cb779e1 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #090C10CC 0%, #090C1010 100%);opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-cb779e1 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-2f18761:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-2f18761 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://popnonstop.radio/wp-content/uploads/2023/05/fondo-header-3d.jpg");background-position:50% 40%;background-repeat:no-repeat;background-size:cover;}.elementor-11967 .elementor-element.elementor-element-2f18761{--proradio-section-particles:cfg-stars-fixed;--proradio-section-particles-color:#ffffff;--proradio-section-particles-number:80;--proradio-section-particles-speed:2;--proradio-section-particles-size:3;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-2f18761 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-2f18761 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-e589c80:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-e589c80 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://popnonstop.radio/wp-content/uploads/2023/05/fondo-header-3d.jpg");background-position:50% 40%;background-repeat:no-repeat;background-size:cover;}.elementor-11967 .elementor-element.elementor-element-e589c80{--proradio-section-particles:cfg-stars-fixed;--proradio-section-particles-color:#ffffff;--proradio-section-particles-number:80;--proradio-section-particles-speed:2;--proradio-section-particles-size:3;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-e589c80 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-e589c80 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-7b0f862 .proradio-owl-carousel-container {margin:-15px !important;}.elementor-11967 .elementor-element.elementor-element-7b0f862 .owl-item {padding:15px;}.elementor-11967 .elementor-element.elementor-element-7b0f862 .proradio-meta {display:block;}.elementor-11967 .elementor-element.elementor-element-7b0f862 .proradio-cats {display:block;}.elementor-11967 .elementor-element.elementor-element-7b0f862 .proradio-actions{display:block;}.elementor-11967 .elementor-element.elementor-element-2a4b123:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-2a4b123 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#242424;}.elementor-11967 .elementor-element.elementor-element-2a4b123{--proradio-section-particles:cfg-stars-fixed;--proradio-section-particles-color:#ffffff;--proradio-section-particles-number:80;--proradio-section-particles-speed:2;--proradio-section-particles-size:3;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-2a4b123 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-2a4b123 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-e26757e:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-e26757e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111111;}.elementor-11967 .elementor-element.elementor-element-e26757e{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-e26757e > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-e26757e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-7a39919{text-align:start;}.elementor-11967 .elementor-element.elementor-element-7a39919 .elementor-heading-title{color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-121b30e{text-align:start;}.elementor-11967 .elementor-element.elementor-element-121b30e .elementor-heading-title{color:#ffffff;}.elementor-11967 .elementor-element.elementor-element-2df6b48{color:#c8c8c7;}.elementor-11967 .elementor-element.elementor-element-d31d45a:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-d31d45a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-d31d45a{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-d31d45a > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-d31d45a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-4d19b37:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-4d19b37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#242424;}.elementor-11967 .elementor-element.elementor-element-4d19b37{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-4d19b37 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-4d19b37 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-05ae25a{text-align:start;}.elementor-11967 .elementor-element.elementor-element-05ae25a .elementor-heading-title{color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-bbf7354{text-align:start;}.elementor-11967 .elementor-element.elementor-element-bbf7354 .elementor-heading-title{color:#ffffff;}.elementor-11967 .elementor-element.elementor-element-07380e8:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-07380e8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-07380e8{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-07380e8 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-07380e8 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-476f177:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-476f177 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#242424;}.elementor-11967 .elementor-element.elementor-element-476f177{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-476f177 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-476f177 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-073c4c0{text-align:start;}.elementor-11967 .elementor-element.elementor-element-073c4c0 .elementor-heading-title{color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-06ae482{text-align:start;}.elementor-11967 .elementor-element.elementor-element-06ae482 .elementor-heading-title{color:#ffffff;}.elementor-11967 .elementor-element.elementor-element-47724b7:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-47724b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2a2a2a;}.elementor-11967 .elementor-element.elementor-element-47724b7{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-47724b7 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-47724b7 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-e8e44cf{text-align:start;}.elementor-11967 .elementor-element.elementor-element-e8e44cf .elementor-heading-title{color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-7f42b8d{text-align:start;}.elementor-11967 .elementor-element.elementor-element-7f42b8d .elementor-heading-title{color:#ffffff;}.elementor-11967 .elementor-element.elementor-element-289ca8a:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-289ca8a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111111;}.elementor-11967 .elementor-element.elementor-element-289ca8a{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-289ca8a > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-289ca8a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-ac80fe1{text-align:start;}.elementor-11967 .elementor-element.elementor-element-ac80fe1 .elementor-heading-title{color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-df6fe6a{text-align:start;}.elementor-11967 .elementor-element.elementor-element-df6fe6a .elementor-heading-title{color:#ffffff;}.elementor-11967 .elementor-element.elementor-element-84745ca{color:#c8c8c7;}.elementor-11967 .elementor-element.elementor-element-c41ce59:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-c41ce59 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://popnonstop.radio/wp-content/uploads/2026/10/pr-demo5-bg.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-11967 .elementor-element.elementor-element-c41ce59{--proradio-section-particles:disabled;--proradio-section-parallax:no;--proradio-section-parallax-speed:60;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11967 .elementor-element.elementor-element-c41ce59 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #11151B99 0%, #11151B 100%);opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11967 .elementor-element.elementor-element-c41ce59 > .elementor-container{max-width:1440px;}.elementor-11967 .elementor-element.elementor-element-afdc3ad{text-align:start;}.elementor-11967 .elementor-element.elementor-element-afdc3ad .elementor-heading-title{color:#32a4a7;}.elementor-11967 .elementor-element.elementor-element-dad1168{text-align:start;}.elementor-11967 .elementor-element.elementor-element-dad1168 .elementor-heading-title{color:#ffffff;}.elementor-11967 .elementor-element.elementor-element-b986065{color:#c8c8c7;}@media(min-width:1025px){.elementor-11967 .elementor-element.elementor-element-cb779e1:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-cb779e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}.elementor-11967 .elementor-element.elementor-element-2f18761:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-2f18761 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}.elementor-11967 .elementor-element.elementor-element-e589c80:not(.elementor-motion-effects-element-type-background), .elementor-11967 .elementor-element.elementor-element-e589c80 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS *//* generated by staging/build_css.py — page 11967 scope: body.elementor-page-11967 section hooks resolved to rendered .elementor-element- classes (Elementor does not render _css_classes on sections) edit staging/rp-skin.css and regenerate — do not edit this file */ /* ===================================================================== popnonstop.radio — Radio Paradise design language (scoped skin) --------------------------------------------------------------------- Drop-in stylesheet for the STAGING draft of homepage 10624, pasted into Elementor Pro → Page Settings → Advanced → Custom CSS (or an HTML widget). Everything is scoped under `body.elementor-page-11967` so it can be switched off by removing one class — the live ProRadio look is never at risk. Values are the measured RP tokens (see notes/radioparadise-design-spec.md). NOTHING here is copied from RP's code or assets: layout + rhythm only. Hard rules honoured below: • never hide / re-position the qtmplayer play targets • corner radius 0 everywhere except header buttons (7px) + count pill (999px) ===================================================================== */ body.elementor-page-11967 { /* ---- tokens ---- */ --rp-bg: #000000; --rp-text: #c8c8c7; --rp-head: #ffffff; --rp-surface: #f1f1f1; --rp-dark: #242424; --rp-dark2: #2a2a2a; --rp-pill: #242424; --rp-teal: #32a4a7; --rp-green: #00b31e; --rp-amber: #feb246; --rp-blue: #2795cc; --rp-live: #ff0000; --rp-font-body: Lato, "Helvetica Neue", Arial, sans-serif; --rp-font-display: "Barlow", Lato, sans-serif; --rp-font-slab: "Zilla Slab", Georgia, serif; --rp-font-hero: "Dela Gothic One", "Barlow", sans-serif; --rp-max: 1440px; --rp-nav: 48px; --rp-bar: 72px; --rp-gutter: 20px; --rp-ease: 160ms ease; background: var(--rp-bg); color: var(--rp-text); font-family: var(--rp-font-body); font-size: 16px; line-height: 1.4; letter-spacing: -0.1px; -webkit-font-smoothing: antialiased; } /* ---------- 1. header nav (48px, solid black, two flat buttons) ---------- */ body.elementor-page-11967 .proradio-header, body.elementor-page-11967 header.site-header, body.elementor-page-11967 .rp-nav { height: var(--rp-nav); background: var(--rp-bg); border: 0; box-shadow: none; border-radius: 0; } body.elementor-page-11967 .proradio-header a, body.elementor-page-11967 .rp-nav a { color: var(--rp-text); font-family: var(--rp-font-body); } body.elementor-page-11967 .rp-nav__cta { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 7px; font: 600 15px/1 var(--rp-font-body); text-decoration: none; } body.elementor-page-11967 .rp-nav__cta--login { background: #fff; color: #000; } body.elementor-page-11967 .rp-nav__cta--support { background: var(--rp-green); color: #fff; } /* ---------- 2. FIRST SCREEN: the strip behind the nav ---------- Customer (2026-10-12): "remove the top title and sub title, it is doing nothing… as it was not on the original. This way everything will be visible on one page when the visitor enters and not cut, so the visitor does not have to scroll down, everything adapted to fit on full screen." So this section is no longer a headline: it is the clearance strip that carries the customer's photo, its dark scrim and the falling snow BEHIND the sticky transparent nav (markup in staging/build_new_sections.py, wordmark removed). The first screen is three stacked slices whose heights add up to exactly `100vh - player bar`, so nothing is cut and there is nothing to scroll for the whole composition: 17vh hero strip (= the measured 148px sticky nav at 1440px wide) 29.5vh Now Playing (23.5vh artwork + 2.5vh padding top and bottom) calc(53.5vh - 72px) carousel (the 72px is --rp-bar, the sticky qtmplayer) ---------------------------------------------------------------- 100vh - 72px == the visible area above the player bar Measured before this change: 420 + 352 + 387 = 1159px, i.e. the carousel started at y=772 on a 900px-tall viewport and its cards were cut by the player bar. Measured after the first attempt: 153 + 283 + 414 = 850px — 22px of the carousel still sat under the player, because Elementor's column adds 10px of padding above and below the Now Playing panel, which pushed that slice to 283 instead of the 261 the arithmetic assumed. The column padding is now zeroed in §11 and each slice has its own explicit height instead of relying on its content. */ body.elementor-page-11967 .elementor-element-cb779e1 { height: 17vh; min-height: 96px; padding: 0 !important; display: block; overflow: hidden; /* `background-color`, NOT the `background` shorthand: the shorthand would wipe the section's own background-image and the dark gradient overlay it carries. */ background-color: transparent; } body.elementor-page-11967 .elementor-element-cb779e1 .elementor-container { padding: 0 !important; } /* nothing left to lay out in this section, but keep it from collapsing if the markup ever comes back (the wordmark/subline rules are kept so a revert is a one-line markup change) */ body.elementor-page-11967 .rp-hero__wordmark { font-family: var(--rp-font-hero); font-size: 43.2px; line-height: 1; color: var(--rp-head); letter-spacing: 0; } body.elementor-page-11967 .rp-hero__wordmark .rp-accent { color: var(--rp-green); } body.elementor-page-11967 .rp-hero__subline { margin-top: 10px; font-size: 15px; color: var(--rp-text); opacity: .85; } /* ---------- 3. section rhythm ---------- */ body.elementor-page-11967 .rp-section { padding: 0 var(--rp-gutter); background: var(--rp-bg); } body.elementor-page-11967 .rp-section--dark { background: var(--rp-dark); } body.elementor-page-11967 .rp-section--dark2 { background: var(--rp-dark2); } body.elementor-page-11967 .rp-section--light { background: var(--rp-surface); } body.elementor-page-11967 .rp-wrap { max-width: var(--rp-max); margin: 0 auto; } /* ---------- 4. channels carousel — REAL ProRadio markup ---------- Live DOM (verified 2026-10-08 on popnonstop.radio): .proradio-owl-carousel (owl-carousel, NOT flickity) data-items="3" data-gap="15" .proradio-item > .proradio-itemcontainer > article.proradio-post__card--radio .proradio-bgimg.proradio-bgimg--full.proradio-duotone > img.proradio-post__thumb (370x480) .proradio-post__headercont > .proradio-post__card__cap .qtmplayer-donutcontainer > .qtmplayer-donut > span[data-qtmplayer-qtmpid=..] h3.proradio-post__title a p.proradio-meta RP wants: square media + 46px light footer bar. Restyle, never re-parent the play span. NOTE: set the widget's data-items to 4 (desktop) / 2 (mobile) in Elementor too. */ body.elementor-page-11967 .rp-viewtoggle { display: inline-flex; margin: 0 0 14px; font: 600 12px/20px var(--rp-font-body); text-transform: uppercase; letter-spacing: .06em; } body.elementor-page-11967 .rp-viewtoggle > * { height: 20px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--rp-text); cursor: pointer; } body.elementor-page-11967 .rp-viewtoggle > .is-active { background: var(--rp-surface); color: #000; } body.elementor-page-11967 .elementor-element-e589c80 { background: var(--rp-bg); padding-bottom: 24px; } body.elementor-page-11967 .elementor-element-e589c80 .proradio-owl-carousel { padding-bottom: 0; } body.elementor-page-11967 .elementor-element-e589c80 .proradio-item { padding: 0 10px; } /* 20px gutter */ body.elementor-page-11967 .proradio-post__card--radio { display: flex; flex-direction: column; width: 317px; max-width: 317px; height: auto; border-radius: 0; overflow: hidden; box-shadow: none; /* the theme stretches this card to the owl slot's height on small viewports (~805px) and bottom-aligns the artwork, leaving a bare area above it. Capping the height clipped the art instead of the gap, so the honest workaround is to make that area invisible: the card's own background goes dark, matching the page, instead of the theme's pale #f1f1f1. */ background: var(--rp-dark); /* ROOT CAUSE of the mobile gap, found by measurement 2026-10-10: the theme gives the card a `padding-top: 150%` (455px at 304px wide — the classic percentage aspect-ratio hack for a 2:3 portrait card) and bottom-aligns the artwork inside it. Zeroing that padding collapses the card to its real content: art (304) + bar (46) = 350. Desktop already measures 0, so this changes nothing there. */ padding-top: 0 !important; } /* The theme's owl carousel is configured for 3 cards per view (data-items="3"); owl writes inline px widths on .owl-item and drives the stage transform from that model, so a CSS override misaligns paging. Instead the card fills whatever slot it is given, which removes the dead space the fixed 317px card left in a 480px slot. RP uses 317px because it shows 4.3 cards; changing ITEMS PER VIEW to 4 in the Elementor panel is the correct fix. */ body.elementor-page-11967 .proradio-post__card--radio { width: 100%; max-width: 100%; } body.elementor-page-11967 .proradio-post__card--radio .proradio-bgimg { position: relative; width: 100%; aspect-ratio: 1 / 1; height: auto; overflow: hidden; border-radius: 0; } body.elementor-page-11967 .proradio-post__card--radio .proradio-bgimg > img, body.elementor-page-11967 .proradio-post__card--radio img.proradio-post__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* kill the theme's magenta/cyan duotone + dark overlay on the artwork */ body.elementor-page-11967 .proradio-post__card--radio .proradio-duotone::after, body.elementor-page-11967 .proradio-post__card--radio .proradio-bgimg::after { background: none !important; opacity: 0 !important; } /* the caption becomes the 46px light footer bar */ body.elementor-page-11967 .proradio-post__card--radio .proradio-post__headercont { position: static; inset: auto; padding: 0; display: flex; align-items: center; flex: 0 0 46px; height: 46px; min-height: 46px; background: var(--rp-surface); } body.elementor-page-11967 .proradio-post__card--radio .proradio-post__card__cap { position: static !important; inset: auto !important; display: block !important; width: 100%; height: 46px; padding: 0 !important; margin: 0 !important; background: transparent !important; } /* the cap's inner
wraps the play tile but is full-width and centres its content: that pushed the tile into the middle of the bar and squeezed the channel title out of view. Pin it to exactly the tile, left-aligned, so the title flows after it. */ body.elementor-page-11967 .proradio-post__card--radio .proradio-post__card__cap > div { flex: 0 0 46px !important; width: 46px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; position: static !important; text-align: left !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title { position: static !important; flex: 1 1 auto !important; height: auto !important; min-height: 20px; margin: 0 12px !important; padding: 0 !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the theme stretches the title's over the WHOLE card to make it clickable; that collapses the h3 to height 0 (measured: 122x0) and paints the label at the card's top-left, behind the artwork. Put the link back in the flow so the channel name reads in the footer bar. */ body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title a, body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title > a { position: static !important; inset: auto !important; display: inline !important; width: auto !important; height: auto !important; color: #000 !important; background: transparent !important; text-decoration: none !important; font: inherit !important; } body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title, body.elementor-page-11967 .proradio-post__card--radio .proradio-h2 { font: 400 20px/1 var(--rp-font-body); text-transform: none; margin: 0 0 0 12px; padding: 0; color: #000; } body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title a { color: #000; text-decoration: none; } body.elementor-page-11967 .proradio-post__card--radio .proradio-meta { display: none; } /* artist line: RP cards show title only */ /* ---- play tile: RP keeps a single flat white 46x46 SQUARE at the left end of the footer bar, holding a black triangle. The theme instead floats a 46px white tile over the ART (absolute, 17px above the bar) wrapped in an 88x88 circular "donut" ring, so the visitor sees a square sitting inside a circle, off the bar. Measured live 2026-10-08: .card__cap 423x46 position:absolute top:407 (bar sits at 424) .qtmplayer-donutcontainer 88x88 border-radius:50% <- the ring .qtmplayer-donut 46x46 position:absolute top:377 <- tile over the artwork Fix: make the whole chain static, one 46px row, tile flush left, no ring at all. ---- */ body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donutcontainer { position: static !important; inset: auto !important; width: 46px !important; height: 46px !important; min-width: 46px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; display: flex !important; align-items: center; justify-content: center; order: -1 !important; } body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donutcontainer::before, body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donutcontainer::after, body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donut::before, body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donut::after { content: none !important; display: none !important; } body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donut { position: static !important; inset: auto !important; width: 46px !important; height: 46px !important; border-radius: 0 !important; background: #fff !important; display: flex !important; align-items: center; justify-content: center; } body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-play { width: 46px !important; height: 46px !important; border-radius: 0 !important; background: #fff !important; display: flex !important; align-items: center; justify-content: center; } body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-play i, body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-play .material-icons { color: #000 !important; font-size: 22px !important; line-height: 1 !important; background: transparent !important; border-radius: 0 !important; } /* the theme paints a circular progress ring around the tile — gone in the RP skin */ body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donut svg, body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donut canvas, body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donutcanvas { display: none !important; } /* the owl slot was ~13px taller than the card, so the slot's own background showed as a light strip under the card. Make every wrapper transparent and let the card fill the slot. */ body.elementor-page-11967 .elementor-element-e589c80 .proradio-bgimg { /* owl clones the slides; a cloned can be blank for a moment, and with the drift running that showed as a big pale empty card sliding past (mobile report 2026-10-09). A dark backing makes the transient state invisible instead of glaring. */ background: #111 !important; } body.elementor-page-11967 .elementor-element-e589c80 .owl-item, body.elementor-page-11967 .elementor-element-e589c80 .owl-stage, body.elementor-page-11967 .elementor-element-e589c80 .proradio-item, body.elementor-page-11967 .elementor-element-e589c80 .proradio-itemcontainer, body.elementor-page-11967 .elementor-element-e589c80 .elementor-widget-container { background: transparent !important; } body.elementor-page-11967 .proradio-post__card--radio { height: auto !important; position: relative; } body.elementor-page-11967 .proradio-post__card--radio { min-height: 0 !important; } body.elementor-page-11967 .elementor-element-e589c80 .proradio-post__card--radio .proradio-bgimg, body.elementor-page-11967 .proradio-post__card--radio .proradio-bgimg { margin-top: 0 !important; margin-bottom: 0 !important; } body.elementor-page-11967 .elementor-element-e589c80 .owl-item { height: auto !important; } /* ---- footer bar: absolute geometry instead of flex. The theme keeps moving these two things around (the caption is absolutely positioned, its inner wrapper is full-width and centres itself, and the title's is stretched over the whole card) — flex fought it for two rounds. Pinning both to the card's bottom 46px band is deterministic: card = art (370) + .headercont (46), which the theme already lays out. ---- */ body.elementor-page-11967 .proradio-post__card--radio .qtmplayer-donutcontainer { position: absolute !important; left: 0 !important; bottom: 0 !important; top: auto !important; right: auto !important; width: 46px !important; height: 46px !important; min-width: 46px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; display: flex !important; align-items: center; justify-content: center; order: 0 !important; z-index: 5; } body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title { position: absolute !important; left: 58px !important; right: 12px !important; bottom: 0 !important; top: auto !important; height: 46px !important; line-height: 46px !important; display: block !important; margin: 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 4; } /* the theme stretches the title's over the WHOLE card to make it clickable; that collapses the h3 to height 0 (measured: 122x0) and paints the label behind the artwork. */ body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title a, body.elementor-page-11967 .proradio-post__card--radio .proradio-post__title > a { position: static !important; inset: auto !important; display: inline !important; width: auto !important; height: auto !important; color: #000 !important; background: transparent !important; text-decoration: none !important; font: inherit !important; line-height: inherit !important; } /* neutralise the theme's caption wrapper — its full-width centring was what pushed the tile into the middle of the bar */ body.elementor-page-11967 .proradio-post__card--radio .proradio-post__card__cap > div { position: static !important; width: auto !important; height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* listener pill: RP shows a dark rounded pill with a live dot. Source of truth = the theme's own data-qtmplayer-listeners attribute (qty) */ body.elementor-page-11967 .proradio-post__card--radio .proradio-bgimg::before { content: attr(data-rp-listeners); position: absolute; top: 12px; left: 12px; z-index: 3; height: 29px; padding: 0 12px; border-radius: 999px; background: var(--rp-pill); color: #fff; font: 400 13px/29px var(--rp-font-body); } /* until the JS sets data-rp-listeners, fall back to the raw attribute via a sibling rule */ body.elementor-page-11967 .proradio-post__card--radio [data-qtmplayer-listeners] { position: relative; z-index: 4; } /* keep the play hook always visible & clickable — never display:none */ body.elementor-page-11967 [data-qtmplayer-qtmpid] { opacity: 1 !important; pointer-events: auto !important; } /* ---------- 5. action banner (exactly 64px) ---------- */ body.elementor-page-11967 :is(.elementor-element-d31d45a,.elementor-element-07380e8) { height: 64px; display: flex; align-items: center; justify-content: center; background: var(--rp-teal); color: #000; font: 700 17px/1 var(--rp-font-display); text-align: center; } body.elementor-page-11967 .elementor-element-d31d45a > span { transform: rotate(-1.2deg); display: inline-block; } /* ---------- 6. split list sections (giant head left, list right) ---------- */ body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) { padding: 48px var(--rp-gutter) 56px; } /* Elementor wraps the columns in .elementor-container, so the RP split grid goes THERE, not on the section itself (which would only ever have one child). */ body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) > .elementor-container { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 40px; max-width: none; } body.elementor-page-11967 .rp-split__head { font-family: var(--rp-font-display); font-weight: 800; font-size: clamp(40px, 4.6vw, 64px); line-height: .95; text-transform: uppercase; color: var(--rp-head); margin: 0 0 16px; } body.elementor-page-11967 .rp-split__kicker { font: 700 12px/1 var(--rp-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--rp-teal); margin-bottom: 10px; } body.elementor-page-11967 .rp-split__link { display: inline-block; margin-top: 20px; padding-bottom: 3px; color: var(--rp-head); border-bottom: 1px solid currentColor; font: 600 15px/1 var(--rp-font-body); text-decoration: none; } body.elementor-page-11967 .rp-list { display: flex; flex-direction: column; gap: 18px; } body.elementor-page-11967 .rp-list__item { display: grid; grid-template-columns: 1fr 140px; gap: 16px; align-items: start; color: inherit; } body.elementor-page-11967 .rp-list__meta { display: block; /* the row parts are s: without this they run together on one line with the title and excerpt */ font: 400 12px/1 var(--rp-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--rp-text); opacity: .7; margin: 0 0 6px; } body.elementor-page-11967 .rp-list__title { display: block; font-family: var(--rp-font-slab); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--rp-head); margin: 0 0 6px; } body.elementor-page-11967 .rp-list__excerpt { display: block; font-size: 15px; color: var(--rp-text); margin: 0; } /* the demo excerpts are long; clamp them to two lines the way RP does */ body.elementor-page-11967 .rp-list__excerpt > span, body.elementor-page-11967 .rp-list__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.elementor-page-11967 .rp-list__thumb { width: 140px; height: 80px; object-fit: cover; border-radius: 0; } /* ---------- 7. statement + CTA blocks (450px) ---------- */ body.elementor-page-11967 :is(.elementor-element-e26757e,.elementor-element-289ca8a,.elementor-element-c41ce59) { min-height: 450px; padding: 56px var(--rp-gutter); } body.elementor-page-11967 :is(.elementor-element-e26757e,.elementor-element-289ca8a,.elementor-element-c41ce59) > .elementor-container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; max-width: none; } body.elementor-page-11967 .rp-statement__head { font-family: var(--rp-font-display); font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: .95; color: var(--rp-head); margin: 0; } body.elementor-page-11967 .rp-statement__sub { font: 700 14px/1 var(--rp-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--rp-teal); margin: 0 0 14px; } body.elementor-page-11967 .rp-cta { display: flex; align-items: center; justify-content: space-between; min-width: 280px; height: 52px; padding: 0 18px; margin-top: 26px; background: var(--rp-teal); color: #fff; border: 0; border-radius: 0; font: 700 16px/1 var(--rp-font-body); text-decoration: none; } body.elementor-page-11967 .rp-cta__plus { font-size: 22px; line-height: 1; } /* ---------- 8. player bar (72px) — restyle only, never re-anchor ---------- */ body.elementor-page-11967 .qtmplayer__container--footer, body.elementor-page-11967 .qtmplayer__container { height: var(--rp-bar); background: var(--rp-bg); color: var(--rp-text); border: 0; border-radius: 0; box-shadow: none; } body.elementor-page-11967 .qtmplayer__container a, body.elementor-page-11967 .qtmplayer__container .qtmplayer__time { color: var(--rp-text); } /* ---------- 9. new-section internals ---------- */ /* listening map — grid + glow live on the SECTION itself (an absolutely-positioned inner canvas did not paint reliably inside Elementor's widget wrap), and the content is centred with flex on the widget container rather than on the section. */ body.elementor-page-11967 .elementor-element-2a4b123 { position: relative; min-height: 450px; overflow: hidden; background-color: var(--rp-dark); background-image: radial-gradient(circle at 50% 50%, rgba(50,164,167,.22) 0%, rgba(50,164,167,0) 55%), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 100% 100%, 48px 48px, 48px 48px; } body.elementor-page-11967 .elementor-element-2a4b123 > .elementor-container { align-items: center; } body.elementor-page-11967 .elementor-element-2a4b123 .elementor-widget-wrap, body.elementor-page-11967 .elementor-element-2a4b123 .elementor-widget-html { height: 100%; } body.elementor-page-11967 .elementor-element-2a4b123 .elementor-widget-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 450px; text-align: center; } body.elementor-page-11967 .rp-map__canvas { display: none; } body.elementor-page-11967 .rp-map__num { display: block; font-family: var(--rp-font-display); font-weight: 800; font-size: clamp(64px, 6vw, 92px); line-height: 1; color: var(--rp-head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } body.elementor-page-11967 .rp-map__cap { display: block; margin-top: 12px; font: 700 13px/1 var(--rp-font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--rp-teal); } body.elementor-page-11967 .rp-map__sub { position: relative; z-index: 2; margin: 10px 0 0; text-align: center; color: var(--rp-text); opacity: .7; font-size: 15px; } /* statement art — CSS-only "on air" equaliser (no licensed artwork available yet) */ body.elementor-page-11967 .rp-statement__art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 300px; } body.elementor-page-11967 .rp-eq { display: flex; align-items: flex-end; gap: 10px; height: 210px; } body.elementor-page-11967 .rp-eq > span { width: 14px; height: var(--h); border-radius: 2px; background: linear-gradient(180deg, var(--rp-teal) 0%, rgba(50,164,167,.22) 100%); } body.elementor-page-11967 .rp-eq__label { display: inline-flex; align-items: center; gap: 9px; font: 700 12px/1 var(--rp-font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--rp-text); } body.elementor-page-11967 .rp-eq__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rp-live); } /* channels: the theme's owl carousel is configured for 3 cards per view (data-items="3"). Forcing more via CSS fought the carousel's inline px widths and left a gap, so leave the carousel alone and keep RP's card proportions instead. */ /* ---- the carousel floats ON the hero picture (customer composition, 2026-10-12) ----------- No plate of its own and no side gutters: the row runs edge to edge like the reference site, with the section's own copy of the viewport-fixed picture behind it and the snow over it. */ body.elementor-page-11967 .elementor-element-e589c80 { padding: 0 !important; /* `background-color`, NOT the shorthand: a shorthand would wipe the section's own background-image (the hero picture that has to continue behind the carousel). */ background-color: transparent !important; /* ---- third (and last) slice of the first screen: 100vh - player bar - hero strip (17vh) - Now Playing (29.5vh). Everything the visitor lands on then fits above the sticky player with no scrolling (customer, 2026-10-12). `align-items: center` keeps the row optically centred when the slice is taller than the cards (tall desktops), `overflow: hidden` guarantees that nothing spills into the next section when it is shorter (short laptops). */ height: calc(100vh - var(--rp-bar) - 46.5vh); min-height: 300px; display: flex; align-items: center; overflow: hidden; /* the card artwork is square, and loses height (never width) only when the slice cannot hold a square card — that is what keeps the whole composition inside the viewport on a short laptop screen while leaving a full-size 1440x900 screen exactly as it was. */ --rp-card-media: calc(100vh - var(--rp-bar) - 46.5vh - 66px); } body.elementor-page-11967 .elementor-element-e589c80 > .elementor-container, body.elementor-page-11967 .elementor-element-e589c80 .elementor-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; } body.elementor-page-11967 .elementor-element-e589c80 .elementor-widget-proradio-elementor-post-carousel, body.elementor-page-11967 .elementor-element-e589c80 .elementor-widget-container, body.elementor-page-11967 .elementor-element-e589c80 .proradio-owl-carousel, body.elementor-page-11967 .elementor-element-e589c80 .owl-stage-outer { width: 100% !important; max-width: none !important; } /* the card media height is capped by the slice (see the note above); the tiles stay square wherever there is room for a square */ body.elementor-page-11967 .elementor-element-e589c80 .proradio-post__card--radio .proradio-bgimg { max-height: var(--rp-card-media); } /* the falling snow must never swallow a click on a card */ body.elementor-page-11967 .proradio-particles-js { pointer-events: none !important; } /* ---- RP-style drifting carousel (the .rp-marquee class is added by the injected script only AFTER the owl instance was successfully re-initialised, so if that ever fails we keep the theme's working arrows/dots instead of ending up with no navigation at all). ---- */ body.elementor-page-11967 .rp-marquee .owl-nav, body.elementor-page-11967 .rp-marquee .owl-dots { display: none !important; } body.elementor-page-11967 .rp-marquee .owl-stage { transition-timing-function: linear !important; /* constant drift, no ease-in/out */ } body.elementor-page-11967 .rp-marquee .proradio-item { padding: 0 10px; } /* RP list sections: authored rows (see staging/build_new_sections.py) */ body.elementor-page-11967 .rp-listwrap { width: 100%; } body.elementor-page-11967 .rp-list__item { text-decoration: none; } body.elementor-page-11967 .rp-list__item:hover .rp-list__title { color: var(--rp-teal); } body.elementor-page-11967 .rp-list__body { display: block; min-width: 0; } body.elementor-page-11967 .rp-list__thumb--empty { background: var(--rp-dark2); display: block; } /* THE TEAM -> authored member grid (see staging/build_new_sections.py). The theme's own member grid measures ~94px per column inside this split layout and squashed the photos into 72x470 slivers; an `aspect-ratio` override made it worse (470x470 cards overlapping inside ~292px columns). Authored markup + real REST data ended the fight. */ body.elementor-page-11967 .rp-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; } /* Elementor's inner column/widget-wrap are flex containers that let the child shrink to its content: the authored blocks were rendering ~377px wide inside an ~840px column (visible in the read / inspire / team sections). Stretch them. */ body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .elementor-column, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .elementor-widget-wrap { align-items: stretch !important; } /* ROOT CAUSE of the ~377px-wide authored blocks (measured 2026-10-09): our `:is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) > .elementor-container` is a 2-track grid (566px / 793px) and Elementor DOES place the columns in those tracks — but its own `.elementor-col-50 { width: 50% }` then shrinks each column to HALF its track, so everything inside rendered 397px wide inside a 793px track. This one rule fixes the read / inspire / team sections at once. */ body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) > .elementor-container > .elementor-column, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .elementor-widget-wrap { width: 100% !important; } body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .elementor-widget, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .elementor-widget-container { width: 100% !important; } body.elementor-page-11967 .rp-member { display: block; text-decoration: none; color: #fff; } body.elementor-page-11967 .rp-member__photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; background: var(--rp-dark2); } body.elementor-page-11967 .rp-member__photo--empty { background: var(--rp-dark2); } body.elementor-page-11967 .rp-member__name { display: block; margin-top: 10px; font: 700 13px/1.25 var(--rp-font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; } body.elementor-page-11967 .rp-member:hover .rp-member__name { color: var(--rp-teal); } body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .elementor-widget-proradio-elementor-post-grid .proradio-post__title, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .elementor-widget-proradio-elementor-post-grid .proradio-post__title a { font-family: var(--rp-font-body); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; } /* RP list sections: keep the theme's real rows, flatten and re-type them */ body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-post, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-itemcontainer { border-radius: 0 !important; box-shadow: none !important; } body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-post__thumb, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) img { border-radius: 0 !important; } body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-post__title, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-post__title a { font-family: var(--rp-font-slab); color: var(--rp-head); } body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-itemmetas, body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-meta { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; } body.elementor-page-11967 :is(.elementor-element-4d19b37,.elementor-element-476f177,.elementor-element-47724b7) .proradio-paper { background: transparent; } /* the theme shows a red "AJAX DISABLED" box to logged-in admins; it is not part of the design, so hide it on this page only (cosmetic - visitors never see it anyway) */ body.elementor-page-11967 .proradio-admin-notice { display: none !important; } /* ---------- 11. Now Playing (above the carousel) + first-paint loader ---------- */ /* Customer ask 2026-10-11: show the artwork of the song that is actually playing, animated, above the carousel, with a second button that opens the station. Data: the channel's own `status-json.xsl` (title "Artist - Track" + live listeners) with the player's DOM as fallback; artwork from the same iTunes endpoint the player itself calls. Measurements that shaped this: - the theme styles bare