/* ========================================================= CITY LIVE — READER MODE PREMIUM v3.0.26 ========================================================= */ :root{ --cl-reader-header-height:68px; --cl-reader-ad-height:180px; --cl-reader-redline-height:4px; } /*========================================================= BODY =========================================================*/ body.cl-reader-premium-active{ overflow:hidden !important; } /*========================================================= FULLSCREEN OVERLAY =========================================================*/ #clCityLivePremiumReader{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; display:none !important; margin:0 !important; padding:0 !important; background:#fff !important; color:#202b3c !important; z-index:2147483000 !important; isolation:isolate !important; box-sizing:border-box !important; } #clCityLivePremiumReader.is-open{ display:block !important; } /* * Keep the original page behind the overlay. * Do NOT hide .post-content. */ #clCityLivePremiumReader .cl-reader-backdrop{ position:absolute !important; inset:0 !important; background:#fff !important; z-index:0 !important; pointer-events:none !important; } /*========================================================= HEADER =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-header{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:var(--cl-reader-header-height) !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding: 0 clamp(14px,3vw,34px) !important; background: linear-gradient( 110deg, #d70812 0%, #e51b23 35%, #743a8f 68%, #174ea6 100% ) !important; color:#fff !important; box-shadow: 0 5px 24px rgba(11,23,48,.20) !important; z-index:20 !important; box-sizing:border-box !important; } #clCityLivePremiumReader .cl-reader-premium-brand{ display:flex !important; align-items:center !important; gap:9px !important; min-width:0 !important; white-space:nowrap !important; } #clCityLivePremiumReader .cl-reader-brand-name{ font-size:20px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.35px !important; } #clCityLivePremiumReader .cl-reader-divider{ opacity:.55 !important; } #clCityLivePremiumReader .cl-reader-status{ font-size:14px !important; line-height:1 !important; font-weight:700 !important; } #clCityLivePremiumReader .cl-reader-premium-controls{ display:flex !important; align-items:center !important; gap:8px !important; position:relative !important; z-index:30 !important; pointer-events:auto !important; } #clCityLivePremiumReader .cl-reader-font-btn, #clCityLivePremiumReader .cl-reader-close-btn{ appearance:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.38) !important; cursor:pointer !important; font-family:inherit !important; box-sizing:border-box !important; pointer-events:auto !important; z-index:31 !important; } #clCityLivePremiumReader .cl-reader-font-btn{ width:50px !important; height:42px !important; border-radius:10px !important; font-size:17px !important; font-weight:800 !important; } #clCityLivePremiumReader .cl-reader-close-btn{ min-width:96px !important; height:42px !important; padding:0 15px !important; gap:7px !important; border-radius:23px !important; font-size:14px !important; font-weight:700 !important; } #clCityLivePremiumReader .cl-reader-close-x{ font-size:24px !important; line-height:1 !important; font-weight:300 !important; } #clCityLivePremiumReader .cl-reader-close-label{ line-height:1 !important; } #clCityLivePremiumReader .cl-reader-font-btn:hover, #clCityLivePremiumReader .cl-reader-close-btn:hover{ background: rgba(255,255,255,.23) !important; } /*========================================================= SCROLL AREA =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-scroll{ position:absolute !important; top:var(--cl-reader-header-height) !important; left:0 !important; right:0 !important; bottom: calc( var(--cl-reader-ad-height) + var(--cl-reader-redline-height) ) !important; overflow-y:scroll !important; overflow-x:hidden !important; background:#fff !important; z-index:10 !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; box-sizing:border-box !important; } #clCityLivePremiumReader .cl-reader-premium-scroll::-webkit-scrollbar{ width:9px !important; } #clCityLivePremiumReader .cl-reader-premium-scroll::-webkit-scrollbar-thumb{ background:#aeb9c9 !important; border-radius:10px !important; } #clCityLivePremiumReader .cl-reader-premium-scroll::-webkit-scrollbar-track{ background:#f1f4f8 !important; } /*========================================================= CONTENT =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-content{ width:min( 960px, calc(100% - 32px) ) !important; margin:0 auto !important; padding: 32px 0 90px !important; box-sizing:border-box !important; } /*========================================================= TITLE =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-title{ margin:0 0 20px !important; color:#111827 !important; font-size: clamp(30px,4vw,50px) !important; line-height:1.13 !important; font-weight:800 !important; letter-spacing:-.55px !important; } #clCityLivePremiumReader .cl-reader-premium-title > *{ margin:0 !important; color:inherit !important; font-size:inherit !important; line-height:inherit !important; font-weight:inherit !important; } /*========================================================= SUMMARY =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-summary{ margin:0 0 28px !important; padding:17px 20px !important; background:#f5f7fa !important; border-left: 4px solid #e31b23 !important; border-radius: 0 10px 10px 0 !important; color:#34445d !important; font-size:19px !important; line-height:1.62 !important; font-weight:500 !important; box-sizing:border-box !important; } #clCityLivePremiumReader .cl-reader-premium-summary:empty{ display:none !important; } #clCityLivePremiumReader .cl-reader-premium-summary > *{ margin:0 !important; color:inherit !important; font-size:inherit !important; line-height:inherit !important; } /*========================================================= ARTICLE BODY ONLY THIS AREA RESPONDS TO A- / A+ =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-article{ color:#202b3c !important; font-size: var( --cl-reader-article-font-size, 18px ) !important; line-height:1.86 !important; font-weight:400 !important; word-wrap:break-word !important; } #clCityLivePremiumReader .cl-reader-premium-article p, #clCityLivePremiumReader .cl-reader-premium-article li{ font-size:inherit !important; line-height:inherit !important; } #clCityLivePremiumReader .cl-reader-premium-article h1, #clCityLivePremiumReader .cl-reader-premium-article h2, #clCityLivePremiumReader .cl-reader-premium-article h3, #clCityLivePremiumReader .cl-reader-premium-article h4, #clCityLivePremiumReader .cl-reader-premium-article h5, #clCityLivePremiumReader .cl-reader-premium-article h6{ color:#172033 !important; line-height:1.35 !important; margin: 1.4em 0 .65em !important; } /* * Reader overlay is text-only. */ #clCityLivePremiumReader .cl-reader-premium-article img, #clCityLivePremiumReader .cl-reader-premium-article picture, #clCityLivePremiumReader .cl-reader-premium-article video, #clCityLivePremiumReader .cl-reader-premium-article iframe, #clCityLivePremiumReader .cl-reader-premium-article embed, #clCityLivePremiumReader .cl-reader-premium-article object, #clCityLivePremiumReader .cl-reader-premium-article figure{ display:none !important; } #clCityLivePremiumReader .cl-reader-premium-article a{ color:#174ea6 !important; text-decoration:underline !important; } #clCityLivePremiumReader .cl-reader-premium-article blockquote{ margin:28px 0 !important; padding:16px 20px !important; border-left: 4px solid #e31b23 !important; background:#f7f8fa !important; color:#42516a !important; } /*========================================================= FIXED RESPONSIVE ADVERTISEMENT STAGE Reference target: compact wide banner, NOT a 60:40 split. Desktop: about 22vh, capped at 220px. =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ position:absolute !important; left:0 !important; right:0 !important; bottom:var(--cl-reader-redline-height) !important; height:clamp(150px,22vh,220px) !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:8px clamp(10px,4vw,60px) 10px !important; background:#fff !important; border-top:1px solid #e5e7eb !important; box-sizing:border-box !important; z-index:35 !important; overflow:hidden !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner{ width:min(1220px,100%) !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; box-sizing:border-box !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd{ display:block !important; position:relative !important; width:100% !important; max-width:1220px !important; height:auto !important; max-height:190px !important; margin:0 auto !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; visibility:visible !important; opacity:1 !important; z-index:36 !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-creative{ display:block !important; width:100% !important; max-width:100% !important; margin:0 auto !important; line-height:0 !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-creative img{ display:block !important; width:100% !important; height:auto !important; max-height:150px !important; object-fit:contain !important; object-position:center !important; margin:0 auto !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-divider{ display:block !important; text-align:center !important; height:22px !important; line-height:22px !important; margin:0 !important; padding:0 !important; background:#fff !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-label{ display:inline-block !important; font-size:11px !important; line-height:18px !important; color:#e11d48 !important; border:1px solid #fecdd3 !important; border-radius:999px !important; padding:0 10px !important; background:#fff !important; } /* Mobile */ @media(max-width:768px){ /* * MOBILE AD STAGE — v3.0.26 * The previous 25vh stage created excessive empty space * between the end of the article and the advertisement. * * The banner is now laid out from its natural aspect ratio. * The stage remains compact and responsive. */ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ height:auto !important; min-height:0 !important; padding:4px 8px 5px !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; overflow:hidden !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner{ width:100% !important; height:auto !important; display:block !important; overflow:hidden !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd{ width:100% !important; max-width:none !important; height:auto !important; max-height:none !important; margin:0 auto !important; overflow:hidden !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-creative{ width:100% !important; height:auto !important; margin:0 auto !important; border-radius:7px !important; overflow:hidden !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-creative img{ display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; object-fit:contain !important; object-position:center !important; margin:0 auto !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-divider{ height:18px !important; line-height:18px !important; margin:0 0 2px !important; padding:0 !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-label{ font-size:10px !important; line-height:16px !important; padding:0 9px !important; } } /* Very small phones */ @media(max-width:420px){ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ padding-left:6px !important; padding-right:6px !important; padding-bottom:4px !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-divider{ height:17px !important; line-height:17px !important; } } /*========================================================= ARTICLE-ONLY FONT SCALING =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size]{ font-size: var(--cl-reader-article-font-size) !important; } #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] p, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] li, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] div, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] span, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] a, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] strong, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] b, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] em, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] i, #clCityLivePremiumReader .cl-reader-premium-article[data-reader-font-size] blockquote{ font-size:inherit !important; } /*========================================================= RED LINE =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-redline{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; height: var(--cl-reader-redline-height) !important; background:#e31b23 !important; z-index:40 !important; pointer-events:none !important; } /*========================================================= MOBILE =========================================================*/ @media(max-width:768px){ :root{ --cl-reader-header-height:60px; } #clCityLivePremiumReader .cl-reader-premium-header{ padding:0 11px !important; } #clCityLivePremiumReader .cl-reader-brand-name{ font-size:17px !important; } #clCityLivePremiumReader .cl-reader-status{ font-size:12px !important; } #clCityLivePremiumReader .cl-reader-font-btn{ width:38px !important; height:36px !important; padding:0 !important; font-size:15px !important; } #clCityLivePremiumReader .cl-reader-close-btn{ min-width:38px !important; width:38px !important; height:36px !important; padding:0 !important; border-radius:50% !important; } #clCityLivePremiumReader .cl-reader-close-label{ display:none !important; } #clCityLivePremiumReader .cl-reader-premium-content{ width: calc(100% - 24px) !important; padding: 24px 0 70px !important; } #clCityLivePremiumReader .cl-reader-premium-title{ font-size: clamp(25px,7.5vw,37px) !important; line-height:1.17 !important; } #clCityLivePremiumReader .cl-reader-premium-summary{ font-size:17px !important; line-height:1.58 !important; padding:14px 15px !important; } #clCityLivePremiumReader .cl-reader-premium-article{ line-height:1.78 !important; } } /*========================================================= v3.0.26 — LIVE AD ROTATION COMPATIBILITY Visual/mobile baseline remains v3.0.5. =========================================================*/ #clCityLivePremiumReader .cl-reader-premium-ad-stage #clPlayerAd.cl-reader-premium-ad-mounted{ width:100% !important; max-width:100% !important; height:auto !important; margin:0 auto !important; padding:0 !important; display:block !important; visibility:visible !important; opacity:1 !important; box-sizing:border-box !important; } /* Keep the existing creative responsive. */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .citylive-step6d-ad-creative{ width:100% !important; max-width:100% !important; margin:0 auto !important; overflow:hidden !important; } /* HTML creative iframe */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .citylive-audio-ad-iframe{ display:block !important; width:100% !important; max-width:100% !important; height:90px !important; min-height:90px !important; border:0 !important; margin:0 auto !important; position:relative !important; left:0 !important; top:0 !important; transform:none !important; } /* Image creative */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .citylive-step6d-ad-creative img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important; object-fit:contain !important; margin:0 auto !important; } /*========================================================= v3.0.26 — PREMIUM ADVERTISEMENT VISUAL REFINEMENT Reader Mode Advertisement: • Remove the "विज्ञापन" pill/label. • Remove its reserved vertical spacing. • Keep a single thin City Live blue separator line above the existing live advertisement. • Do not alter the existing ad engine, creative, iframe, rotation or click behavior. =========================================================*/ /* Compact advertisement stage */ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ padding-top:0 !important; padding-bottom:0 !important; } /* Remove the visible advertisement pill/label */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad-divider{ position:relative !important; display:block !important; width:100% !important; height:3px !important; margin:0 0 5px !important; padding:0 !important; background:#174EA6 !important; border:0 !important; font-size:0 !important; line-height:0 !important; overflow:hidden !important; box-sizing:border-box !important; } /* Hide the label itself */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad-label{ display:none !important; } /* Remove old divider pseudo-lines */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad-divider::before, #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad-divider::after{ display:none !important; content:none !important; } /* Keep the actual creative compact and centered */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .citylive-step6d-ad-creative{ margin:0 auto !important; } /* Mobile: same clean 3px blue separator */ @media(max-width:768px){ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad-divider{ height:3px !important; margin:0 0 4px !important; } } /* * Safety: the advertisement block should not receive extra top * spacing from the original sticky-player ad styles. */ #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad{ margin-top:0 !important; padding-top:0 !important; } /*========================================================= v3.0.26 — SIMPLE FINAL POLISH User request: • Remove the blue line completely. • Keep a small clean white gap immediately above the red line. • Leave advertisement/iframe/rotation unchanged. =========================================================*/ :root{ --cl-reader-ad-redline-gap:10px; } /* --------------------------------------------------------- Remove ALL previous blue-line treatments --------------------------------------------------------- */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active::before, body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active::after{ display:none !important; content:none !important; width:0 !important; height:0 !important; background:transparent !important; box-shadow:none !important; } #clCityLivePremiumReader .cl-reader-premium-ad-inner #clPlayerAd .cl-player-ad-divider, #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad-divider{ display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } #clCityLivePremiumReader #clPlayerAd.cl-reader-premium-ad-mounted .cl-player-ad-label{ display:none !important; } /* Remove blue/border artifacts from the actual ad/player. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active, body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted{ border:0 !important; border-top:0 !important; border-bottom:0 !important; box-shadow:none !important; } /* --------------------------------------------------------- Clean white gap ABOVE the fixed red line --------------------------------------------------------- */ /* * Keep the red line exactly at the bottom of Reader Mode. * Move the live advertisement/player upward by 10px, leaving * pure white background between the ad and the red line. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active{ bottom:calc( var(--cl-reader-redline-height) + var(--cl-reader-ad-redline-gap) ) !important; margin-bottom:0 !important; padding-bottom:0 !important; } /* * Reserve the same 10px inside the scroll calculation so the * article never runs into the ad/gap area. */ #clCityLivePremiumReader .cl-reader-premium-scroll{ bottom:calc( var(--cl-reader-ad-height, 180px) + var(--cl-reader-redline-height) + var(--cl-reader-ad-redline-gap) ) !important; } /* The red line remains the only bottom separator. */ #clCityLivePremiumReader .cl-reader-premium-redline{ height:var(--cl-reader-redline-height) !important; min-height:var(--cl-reader-redline-height) !important; background:#e31b23 !important; border:0 !important; box-shadow:none !important; } /* Mobile: same simple 10px white gap. */ @media(max-width:768px){ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active{ bottom:calc( var(--cl-reader-redline-height) + var(--cl-reader-ad-redline-gap) ) !important; } #clCityLivePremiumReader .cl-reader-premium-scroll{ bottom:calc( var(--cl-reader-ad-height, 180px) + var(--cl-reader-redline-height) + var(--cl-reader-ad-redline-gap) ) !important; } } /*========================================================= v3.0.26 — FINAL CLEAN AD PRESENTATION Final target: Article ↓ 14px clean white space ↓ Responsive Advertisement ↓ 14px clean white space ↓ 3px Red Line No blue line. No black separator. No card border/shadow. Advertisement engine / iframe / rotation untouched. =========================================================*/ /* Remove every possible hard separator around the ad/player. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active, body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted{ background:#fff !important; border:0 !important; border-top:0 !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; outline:0 !important; box-shadow:none !important; } /* Make the fixed ad/player itself an airy white region. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active{ padding:14px 0 !important; margin:0 !important; box-sizing:border-box !important; overflow:visible !important; } /* Ensure no legacy divider or label creates a black/grey rule. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd .cl-player-ad-divider, body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd .cl-player-ad-label{ display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } /* The live ad itself has NO frame — only white air around it. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted{ width:100% !important; max-width:100% !important; height:auto !important; min-height:0 !important; margin:0 auto !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; } /* Creative has no border/shadow and remains centered. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd .citylive-step6d-ad-creative{ width:100% !important; max-width:100% !important; height:auto !important; margin:0 auto !important; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; overflow:hidden !important; } /* Existing HTML creative. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd .citylive-audio-ad-iframe{ display:block !important; width:100% !important; max-width:100% !important; height:90px !important; min-height:90px !important; margin:0 auto !important; padding:0 !important; border:0 !important; outline:0 !important; position:relative !important; left:0 !important; top:0 !important; transform:none !important; box-sizing:border-box !important; } /* Image creative. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd .citylive-step6d-ad-creative img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important; margin:0 auto !important; padding:0 !important; border:0 !important; outline:0 !important; object-fit:contain !important; } /* * Remove any inherited stage/reader border immediately above * the fixed ad from older versions. */ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ border-top:0 !important; border-bottom:0 !important; background:#fff !important; } /* Final redline only. */ #clCityLivePremiumReader .cl-reader-premium-redline{ height:3px !important; min-height:3px !important; background:#e31b23 !important; border:0 !important; box-shadow:none !important; z-index:40 !important; } /* Mobile: keep the same 14px airy treatment. */ @media(max-width:768px){ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active{ padding:14px 0 !important; } #clCityLivePremiumReader .cl-reader-premium-redline{ height:3px !important; min-height:3px !important; } } /*========================================================= v3.0.26 — REMOVE DARK IFRAME / AD TOP RULE The screenshot shows a thin dark horizontal rule immediately above the advertisement. Make that boundary explicitly WHITE at every relevant layer so the ad sits on a clean white field. No change to the iframe content, ad creative, rotation, or JS. =========================================================*/ /* Reader ad stage — explicitly white, no visible top rule. */ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ border-top:1px solid #fff !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; background:#fff !important; box-shadow:none !important; outline:0 !important; } /* Live sticky/ad container — white boundary only. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active{ border-top:1px solid #fff !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; background:#fff !important; box-shadow:none !important; outline:0 !important; } /* Real advertisement container — explicit white top boundary. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted{ border-top:1px solid #fff !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; background:#fff !important; box-shadow:none !important; outline:0 !important; } /* Iframe itself — remove every visible frame edge. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted .citylive-audio-ad-iframe{ border:0 !important; outline:0 !important; box-shadow:none !important; background:#fff !important; } /* Creative wrapper — clean white perimeter. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted .citylive-step6d-ad-creative{ border:0 !important; outline:0 !important; box-shadow:none !important; background:#fff !important; } /* Mobile: same white edge treatment. */ @media(max-width:768px){ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ border-top:1px solid #fff !important; } body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active{ border-top:1px solid #fff !important; } } /*========================================================= v3.0.26 — REMOVE STUBBORN DARK HORIZONTAL FRAME LINE The thin dark line above the advertisement is not part of the iframe content. Force every surrounding Reader/ad boundary to be white/transparent and remove any inset/outline/shadow. =========================================================*/ /* Reader scroll viewport edge */ #clCityLivePremiumReader .cl-reader-premium-scroll{ border:0 !important; outline:0 !important; box-shadow:none !important; } /* Fixed ad stage */ #clCityLivePremiumReader .cl-reader-premium-ad-stage{ border:0 !important; border-top:0 !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; outline:0 !important; box-shadow:none !important; background:#fff !important; } /* Fixed live player shell */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active{ border:0 !important; border-top:0 !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; outline:0 !important; box-shadow:none !important; background:#fff !important; } /* Real ad element */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted{ border:0 !important; border-top:0 !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; outline:0 !important; box-shadow:none !important; background:#fff !important; } /* Creative wrapper */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted .citylive-step6d-ad-creative{ border:0 !important; outline:0 !important; box-shadow:none !important; background:#fff !important; } /* The iframe itself must have no rendered frame. */ body.cl-reader-premium-active #clStickyPlayer.cl-reader-premium-player-active #clPlayerAd.cl-reader-premium-ad-mounted .citylive-audio-ad-iframe{ border:0 !important; outline:0 !important; box-shadow:none !important; background:#fff !important; } /* Mobile: identical zero-edge treatment. */ @media(max-width:768px){ #clCityLivePremiumReader .cl-reader-premium-ad-stage, #clCityLivePremiumReader .cl-reader-premium-scroll{ border:0 !important; outline:0 !important; box-shadow:none !important; } }