/* ============================================================================ NewsFirst — Story Preview panel restyle (design-system reference look) CSS-only; the live widget render keeps its own colours. Scoped to #nfStoryPreviewCard so nothing else is affected. Revert: remove the in layouts/head.blade.php. ============================================================================ */ /* Show ONLY the story card — hide the panel header ("Story Preview"), the type badge, and flatten the panel frame so just the render shows. */ #nfStoryPreviewCard { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow: visible !important; } #nfStoryPreviewCard > .card-body > .card-title, #nfStoryPreviewCard > .card-body > span { display: none !important; } #nfStoryPreviewCard > .card-body { background: transparent !important; padding: 0 !important; } /* Each widget's live render becomes a white phone-width card floating on the ground */ #nfStoryPreviewCard [id$="_preview_div_id"] { max-width: 360px !important; margin: 6px auto 0 !important; background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; overflow: hidden !important; } /* flatten any inner theme card so it doesn't double up the white/border */ #nfStoryPreviewCard [id$="_preview_div_id"] .card, #nfStoryPreviewCard [id$="_preview_div_id"] .singlefeed, #nfStoryPreviewCard [id$="_preview_div_id"] > .col-12 { border: 0 !important; box-shadow: none !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; } #nfStoryPreviewCard [id$="_preview_div_id"] .card > .card-body, #nfStoryPreviewCard [id$="_preview_div_id"] .content_card { padding: 14px 16px !important; } /* Cover image: cap height, cover-fit, flush to the card's rounded top */ #nfStoryPreviewCard [id$="_preview_div_id"] .big_news_img { max-height: 300px !important; overflow: hidden !important; position: relative !important; } /* the story image only (direct child / inside .image-wrapper) — NOT the logo img, which is nested in .story-preview-logo-big/.logo_position */ #nfStoryPreviewCard [id$="_preview_div_id"] .big_news_img > img, #nfStoryPreviewCard [id$="_preview_div_id"] .big_news_img > video, #nfStoryPreviewCard [id$="_preview_div_id"] .big_news_img > .image-wrapper > img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ---- Audio widget: convert the absolute layout to a clean flex row -------- */ #nfStoryPreviewCard #audio_preview_div_id .audio-box-fix { padding: 14px 16px !important; } #nfStoryPreviewCard #audio_preview_div_id .slugAudioFeed { font-size: 12px !important; margin: 0 0 6px !important; } #nfStoryPreviewCard #audio_preview_div_id .timeLineHeadingBigNewsFeed { font-size: 17px !important; line-height: 1.25 !important; margin: 0 0 12px !important; } #nfStoryPreviewCard #audio_preview_div_id .audio_main_wrapper { position: static !important; min-height: 0 !important; padding-left: 0 !important; display: flex !important; gap: 12px !important; align-items: flex-start !important; } #nfStoryPreviewCard #audio_preview_div_id .audio_image { position: static !important; width: 110px !important; height: 92px !important; margin: 0 !important; flex-shrink: 0 !important; border-radius: 10px !important; order: -1 !important; /* image first, then text */ } #nfStoryPreviewCard #audio_preview_div_id .coorona_deses_text { margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } #nfStoryPreviewCard #audio_preview_div_id .timeLineHeadingAudioFeed { margin: 0 !important; width: auto !important; line-height: 1.45 !important; } /* custom red audio player (reference look) */ #nfStoryPreviewCard #audio_preview_div_id .nf-audio-player { display: flex !important; align-items: center !important; gap: 11px !important; margin-top: 14px !important; background: #faf9f6 !important; border: 1px solid #eceae4 !important; border-radius: 100px !important; padding: 7px 14px 7px 7px !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-play { width: 34px !important; height: 34px !important; flex-shrink: 0 !important; border: 0 !important; border-radius: 50% !important; background: #c60c30 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-play i { font-size: 20px !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-track { flex: 1 1 auto !important; height: 4px !important; background: #e0dcd4 !important; border-radius: 4px !important; position: relative !important; cursor: pointer !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-fill { height: 100% !important; width: 0 !important; background: #c60c30 !important; border-radius: 4px !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-time { font-size: 12px !important; color: #555 !important; flex-shrink: 0 !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-logo { font-size: 12px !important; font-weight: 800 !important; flex-shrink: 0 !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-logo em { font-style: italic !important; font-weight: 300 !important; color: #c60c30 !important; } #nfStoryPreviewCard #audio_preview_div_id .nf-audio-player audio { display: none !important; } /* ---- Contact Card: reference-style centred avatar card ------------------- */ #nfStoryPreviewCard #contact_card_preview_div_id { text-align: center !important; padding: 26px 20px !important; position: relative !important; } /* photo -> circular avatar, centred. overflow:visible + static so the logo can escape the avatar and pin to the CARD's top-right; the img itself is clipped to a circle via its own border-radius. */ #nfStoryPreviewCard #contact_card_preview_div_id .big_news_img { width: 96px !important; height: 96px !important; max-height: none !important; margin: 0 auto 16px !important; border-radius: 50% !important; overflow: visible !important; position: static !important; } #nfStoryPreviewCard #contact_card_preview_div_id .big_news_img > img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } /* logo -> upper-right corner of the CARD (not on the avatar) */ #nfStoryPreviewCard #contact_card_preview_div_id div[name="showHideNewsFirstLogo"] img { top: 12px !important; right: 12px !important; } /* hide photo overlays / tag / address (keep the .story-preview-logo-big logo so "Show logo on top" works — the JS controls its show/hide) */ #nfStoryPreviewCard #contact_card_preview_div_id .cortesy_line, #nfStoryPreviewCard #contact_card_preview_div_id .red_line, #nfStoryPreviewCard #contact_card_preview_div_id #contactCardDummyLogo, #nfStoryPreviewCard #contact_card_preview_div_id #TagTextcontact_card, #nfStoryPreviewCard #contact_card_preview_div_id .row.mb-2, #nfStoryPreviewCard #contact_card_preview_div_id #contactCardNameAddressId { display: none !important; } /* name + designation centred */ #nfStoryPreviewCard #contact_card_preview_div_id .content_card > .d-flex { display: block !important; text-align: center !important; } #nfStoryPreviewCard #contact_card_preview_div_id #contactCardNameH1Id { font-size: 21px !important; font-weight: 800 !important; margin: 0 0 5px !important; } #nfStoryPreviewCard #contact_card_preview_div_id #contactCardNameDesignationId { font-size: 13px !important; color: #7a7a7a !important; font-weight: 500 !important; text-transform: none !important; margin: 0 0 18px !important; text-align: center !important; display: block !important; width: 100% !important; } /* the 4 contact links -> black circular icon + the detail value below it */ #nfStoryPreviewCard #contact_card_preview_div_id .gautam-adani-pic { padding: 0 !important; } #nfStoryPreviewCard #contact_card_preview_div_id .gautam-adani-pic .row { display: flex !important; justify-content: center !important; gap: 10px !important; margin: 0 !important; flex-wrap: nowrap !important; } #nfStoryPreviewCard #contact_card_preview_div_id .gautam-adani-pic .row > div { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; text-align: center !important; } /* black circle holding the glyph */ #nfStoryPreviewCard #contact_card_preview_div_id .gautam-adani-pic .cc-ico { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; border-radius: 50% !important; background: #141414 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; line-height: 1 !important; margin: 0 auto !important; } /* detail value under the icon (wraps, small, muted) */ #nfStoryPreviewCard #contact_card_preview_div_id .gautam-adani-pic .row > div p { display: block !important; font-size: 9.5px !important; font-weight: 500 !important; color: #6b695f !important; margin: 6px 0 0 !important; line-height: 1.3 !important; text-transform: none !important; word-break: break-word !important; max-width: 100% !important; } /* ---- Stock Up: reference-style rows -------------------------------------- */ #nfStoryPreviewCard #stock_up_preview_div_id { padding: 16px 16px 8px !important; } #nfStoryPreviewCard #stock_up_preview_div_id .timeLineHeadingBigNewsFeed { font-size: 18px !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 0 0 14px !important; } /* hide the sub-headline and the date/tag row to match the clean reference */ #nfStoryPreviewCard #stock_up_preview_div_id .stock_text, #nfStoryPreviewCard #stock_up_preview_div_id > .content_card > .row { display: none !important; } #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-up { list-style: none !important; padding: 0 !important; margin: 0 !important; border-radius: 10px !important; overflow: hidden !important; border: 1px solid #eceae4 !important; } #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-border { display: none !important; } #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-up li { padding: 0 !important; margin: 0 !important; } #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-main { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 11px 14px !important; } /* alternating row backgrounds (count only
  • , ignore the divider divs) */ #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-up li:nth-of-type(odd) .stock-market-main { background: #f5f3ee !important; } #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-left { font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: .2px !important; text-transform: uppercase !important; color: #1a1a24 !important; } #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-right { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; } #nfStoryPreviewCard #stock_up_preview_div_id .stock-market-right > span:first-child { font-weight: 700 !important; color: #1a1a24 !important; } /* pill badge -> plain coloured change with caret */ #nfStoryPreviewCard #stock_up_preview_div_id .badge { background: transparent !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; } #nfStoryPreviewCard #stock_up_preview_div_id .badge-soft-success { color: #178a4c !important; } #nfStoryPreviewCard #stock_up_preview_div_id .badge-soft-danger { color: #c0392b !important; } #nfStoryPreviewCard #stock_up_preview_div_id .badge i { font-size: 10px !important; } /* ---- Full Screen: image fills the card, headline overlaid at the bottom --- */ #fullScreenPreviewId { max-width: 360px !important; margin: 6px auto 0 !important; height: auto !important; aspect-ratio: 2 / 3 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; background: #d8d8d8 !important; } /* card body flush (no padding) so the image fills; hide the empty topbar that was leaving a gap above the image */ #fullScreenPreviewId > .content_card, #fullScreenPreviewId .card-body { padding: 0 !important; margin: 0 !important; } #fullScreenPreviewId .topbar { display: none !important; } #fullScreenPreviewId .bigimagefeed, #fullScreenPreviewId > .content_card > .card-body, #fullScreenPreviewId .big_news_img { height: 100% !important; margin: 0 !important; } #fullScreenPreviewId .big_news_img img { width: 100% !important; height: 100% !important; object-fit: cover !important; background: #d8d8d8 !important; display: block !important; } /* headline + slug overlaid at the bottom on a dark gradient */ #fullScreenPreviewId .content_over { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; padding: 80px 16px 20px !important; margin: 0 !important; width: 100% !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%) !important; z-index: 2 !important; } /* neutralise the Bootstrap .row negative margins so the slug isn't pushed off the left edge (was clipping "Politics" -> "olitics") */ #fullScreenPreviewId .content_over .row { margin: 0 !important; } #fullScreenPreviewId .content_over [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* headline + NON-boxed slug/text: white, no default red bar. A user-boxed slug (Show Box: it has inline border/background) is EXCLUDED so its own border, background and text colour show. */ #fullScreenPreviewId .content_over, #fullScreenPreviewId .content_over h1, #fullScreenPreviewId .content_over p, #fullScreenPreviewId .content_over div, #fullScreenPreviewId .content_over h5:not([style*="border"]):not([style*="background"]), #fullScreenPreviewId .content_over span:not([style*="border"]):not([style*="background"]) { color: #fff !important; } #fullScreenPreviewId .content_over h1, #fullScreenPreviewId .content_over h5:not([style*="border"]):not([style*="background"]) { border: 0 !important; border-left: 0 !important; padding-left: 0 !important; } #fullScreenPreviewId .content_over *::before, #fullScreenPreviewId .content_over *::after { display: none !important; } #fullScreenPreviewId .content_over #slugFullScreenFeed { font-size: 12.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .4px !important; margin: 0 0 6px !important; opacity: .95; } /* boxed slug: honour the inline box (border colour, background, text colour) */ #fullScreenPreviewId .content_over #slugFullScreenFeed[style*="border"], #fullScreenPreviewId .content_over #slugFullScreenFeed[style*="background"] { opacity: 1 !important; } #fullScreenPreviewId .content_over #timeLineHeadingFullScreenFeed { font-size: 20px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 !important; } /* keep the NewsFirst logo readable top-left; hide the photo-credit chip */ #fullScreenPreviewId .cortesy_line { display: none !important; } #fullScreenPreviewId .story-preview-logo-big, #fullScreenPreviewId .story-preview-logo-big .logo_position { display: block !important; z-index: 3 !important; } #fullScreenPreviewId .story-preview-logo-big { position: absolute !important; top: 12px !important; left: 12px !important; } #fullScreenPreviewId .story-preview-logo-big .logo_position .brand, #fullScreenPreviewId .story-preview-logo-big .brand { color: #fff !important; } /* dummy placeholder: drop the big centred watermark; show plain grey + top-left logo */ #dummy_full_screen_div_id { background: #cfccc6 !important; } #dummy_full_screen_div_id > img { opacity: 0 !important; } /* ---- Count Down: JUST IN + headline + black time boxes ------------------- */ #nfStoryPreviewCard #count_down_preview_div_id { padding: 16px 16px 18px !important; } #nfStoryPreviewCard #count_down_preview_div_id .cd-just-in { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .5px !important; color: #9a9690 !important; text-transform: uppercase !important; margin: 0 0 6px !important; } #nfStoryPreviewCard #count_down_preview_div_id .timeLineHeadingBigNewsFeed { font-size: 18px !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 0 0 16px !important; } /* hide date/tag/description/press note for the clean reference look */ #nfStoryPreviewCard #count_down_preview_div_id > .content_card > .row, #nfStoryPreviewCard #count_down_preview_div_id #userCountDownDescription { display: none !important; } /* 3 black rounded time boxes */ #nfStoryPreviewCard #count_down_preview_div_id .nf-countdown-row { display: flex !important; gap: 12px !important; margin: 0 !important; justify-content: center !important; } #nfStoryPreviewCard #count_down_preview_div_id .nf-cd-box { width: 64px !important; height: 64px !important; background: #141414 !important; border-radius: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } #nfStoryPreviewCard #count_down_preview_div_id .nf-cd-num { color: #fff !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1 !important; } /* override style.css's span#countDownPreviewDays{position:absolute;bottom:-14px} that was pulling the days number out of its box */ #nfStoryPreviewCard #count_down_preview_div_id #countDownPreviewDays { position: static !important; bottom: auto !important; display: block !important; } #nfStoryPreviewCard #count_down_preview_div_id .nf-cd-lbl { color: #9a9690 !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .6px !important; margin-top: 4px !important; } /* ---- Photo Album: image on top (with counter pill), content below -------- */ #nfStoryPreviewCard #photo_album_preview_div_id .card-body { display: flex !important; flex-direction: column !important; padding: 0 !important; } #nfStoryPreviewCard #photo_album_preview_div_id .slider-frame { order: -2 !important; margin: 0 !important; } #nfStoryPreviewCard #photo_album_preview_div_id .carousel, #nfStoryPreviewCard #photo_album_preview_div_id .carousel-inner, #nfStoryPreviewCard #photo_album_preview_div_id #userMultipleImagesDivId { position: relative !important; } #nfStoryPreviewCard #photo_album_preview_div_id .carousel-item { position: relative !important; } #nfStoryPreviewCard #photo_album_preview_div_id .carousel-item > img { width: 100% !important; height: 270px !important; object-fit: cover !important; display: block !important; } /* counter -> dark rounded pill, top-right */ #nfStoryPreviewCard #photo_album_preview_div_id .slider_num_of { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important; background: rgba(20, 20, 20, 0.85) !important; color: #fff !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 100px !important; width: auto !important; } /* per-image photoline caption sits over the image bottom */ #nfStoryPreviewCard #photo_album_preview_div_id .timeLineHeadingPhotoFeed { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; padding: 30px 14px 12px !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important; } /* slug + tag content below the image */ #nfStoryPreviewCard #photo_album_preview_div_id .content_card, #nfStoryPreviewCard #photo_album_preview_div_id > .col-12 > .card > .card-body > .row { order: 0 !important; padding: 12px 16px 4px !important; margin: 0 !important; } #nfStoryPreviewCard #photo_album_preview_div_id .slugPhotoFeed { font-size: 12px !important; text-transform: uppercase !important; color: #9a9690 !important; margin: 0 !important; border: 0 !important; border-left: 0 !important; padding-left: 0 !important; } #nfStoryPreviewCard #photo_album_preview_div_id .slugPhotoFeed::before { display: none !important; } /* show ONLY the active slide (carousel may not be JS-initialised here) */ #nfStoryPreviewCard #photo_album_preview_div_id .carousel-item { display: none !important; } #nfStoryPreviewCard #photo_album_preview_div_id .carousel-item.active { display: block !important; } #nfStoryPreviewCard #photo_album_preview_div_id .carousel-inner, #nfStoryPreviewCard #photo_album_preview_div_id #userMultipleImagesDivId { white-space: normal !important; } /* hide the red line + photo-credit chip over the image */ /* red line — the JS toggles its display; show it as a short VERTICAL red bar on the left edge when "Show red line" is on (do NOT force display:none) */ #nfStoryPreviewCard #photo_album_preview_div_id .red_line { position: absolute !important; left: 0 !important; bottom: 14px !important; right: auto !important; top: auto !important; width: 4px !important; height: 46px !important; margin: 0 !important; z-index: 3 !important; } #nfStoryPreviewCard #photo_album_preview_div_id .red_line span { display: block !important; width: 4px !important; height: 46px !important; background: #c60c30 !important; } /* photo credit (cortesy_line) — the JS toggles its display; position it over the image bottom-right so it's visible when "Photo credit available" is on */ #nfStoryPreviewCard #photo_album_preview_div_id .cortesy_line { position: absolute !important; bottom: 8px !important; right: 10px !important; left: auto !important; top: auto !important; z-index: 4 !important; margin: 0 !important; } #nfStoryPreviewCard #photo_album_preview_div_id .cortesy_line p { margin: 0 !important; color: #fff !important; font-size: 11px !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important; } /* ---- Stocks Scroll: clean slug + headline + ticker cards + bullets ------- */ #nfStoryPreviewCard #stokes_scroll_preview_div_id { padding: 16px !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .slugTitleBigNewsFeed { font-size: 12px !important; color: #9a9690 !important; text-transform: uppercase !important; border: 0 !important; border-left: 0 !important; padding-left: 0 !important; letter-spacing: .3px !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .slugTitleBigNewsFeed::before { display: none !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .timeLineHeadingBigNewsFeed { font-size: 18px !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 6px 0 8px !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id #stokesScrollDateTime { font-size: 12px !important; color: #9a9690 !important; margin: 0 !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .two-date-market .row > .col-md-4 { display: none !important; } /* stock ticker cards */ #nfStoryPreviewCard #stokes_scroll_preview_div_id .stock-middle-box { list-style: none !important; padding: 0 !important; margin: 12px 0 !important; display: flex !important; gap: 10px !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .stock-middle-box li { flex: 1 1 0 !important; min-width: 0 !important; border: 1px solid #eceae4 !important; border-radius: 10px !important; padding: 10px 12px !important; background: #faf9f6 !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .stock-market-main { display: block !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .stock-market-left { font-weight: 700 !important; font-size: 11.5px !important; text-transform: uppercase !important; margin-bottom: 4px !important; color: #1a1a24 !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .stock-market-right { display: flex !important; align-items: baseline !important; gap: 7px !important; flex-wrap: wrap !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .stock-market-right .badge { background: transparent !important; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #1a1a24 !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .stock-market-right .badge i { display: none !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .box-color-bg { font-size: 12px !important; font-weight: 600 !important; color: #178a4c !important; background: transparent !important; padding: 0 !important; } /* ---- Stock ticker in the FEED / PIN preview cards (li.justinlist) ---------- The feed / PIN stock widgets (stokes_scroll, heading_with_stokes, stock_up) reuse the .stock-middle-box / .stock-market-* markup but weren't covered by the #nfStoryPreviewCard rules above, so the ticker collapsed into one cramped line. Give them the same clean equal-width cards. */ li.justinlist .stock-market-up { list-style: none !important; padding: 0 !important; margin: 12px 0 !important; display: block !important; /* vertical list of rows */ border: 1px solid #eceae4 !important; border-radius: 10px !important; overflow: hidden !important; } li.justinlist .stock-market-up li { display: block !important; float: none !important; margin: 0 !important; width: 100% !important; padding: 10px 12px !important; border: 0 !important; border-left: 3px solid transparent !important; background: #ffffff !important; } li.justinlist .stock-market-up li:nth-of-type(even) { background: #f6f4ef !important; } li.justinlist .stock-market-up li.danger_li { border-left-color: #c0392b !important; } li.justinlist .stock-market-up li.success_li { border-left-color: #34c38f !important; } /* the base theme draws its own accent bar via li::before (green/red); suppress it so only the single border-left accent above shows (was rendering two lines). */ li.justinlist .reliance_listing .stock-market-up.stock-middle-box li::before { display: none !important; } /* hide the empty divider
    that sits between ticker rows */ li.justinlist .stock-market-up .stock-market-border { display: none !important; } li.justinlist .stock-market-up .stock-market-main { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } li.justinlist .stock-market-up .stock-market-left { font-weight: 700 !important; font-size: 13px !important; text-transform: uppercase !important; color: #1a1a24 !important; margin: 0 !important; white-space: nowrap !important; } li.justinlist .stock-market-up .stock-market-right { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; justify-content: flex-end !important; } li.justinlist .stock-market-up .stock-market-right .badge { background: transparent !important; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap !important; } li.justinlist .stock-market-up .stock-market-right .badge i { font-size: 11px !important; margin-right: 2px !important; } li.justinlist .stock-market-up .badge-soft-success { color: #178a4c !important; } li.justinlist .stock-market-up .badge-soft-danger { color: #c0392b !important; } li.justinlist .stock-market-up .box-color-bg { font-size: 12px !important; font-weight: 600 !important; padding: 2px 7px !important; border-radius: 6px !important; white-space: nowrap !important; } li.justinlist .stock-market-up li.danger_li .box-color-bg { color: #c0392b !important; background: #fbeaea !important; } li.justinlist .stock-market-up li.success_li .box-color-bg { color: #178a4c !important; background: #e6f4ec !important; } /* bullet list */ #nfStoryPreviewCard #stokes_scroll_preview_div_id .two-date-box ul { padding-left: 18px !important; margin: 10px 0 !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .two-date-box ul li { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 6px !important; color: #333 !important; } #nfStoryPreviewCard #stokes_scroll_preview_div_id .reliance_listing p { font-size: 11px !important; color: #9a9690 !important; margin: 4px 0 0 !important; } /* ========================================================================== GLOBAL new-design consistency across ALL widget previews. Scoped to [id$="_preview_div_id"] (full-screen is #fullScreenPreviewId, so it is untouched here). Per-widget blocks above use higher specificity and win. ========================================================================== */ /* Slug headings: remove ONLY the red left bar / box border. Do NOT force transform / size / colour — those come from the user's Slug settings (applied inline by the form), so leave them to the story. */ #nfStoryPreviewCard [id$="_preview_div_id"] .slugTitleBigNewsFeed, #nfStoryPreviewCard [id$="_preview_div_id"] .slugPhotoFeed, #nfStoryPreviewCard [id$="_preview_div_id"] .slugVideoFeed, #nfStoryPreviewCard [id$="_preview_div_id"] .slugBigNewsFeed, #nfStoryPreviewCard [id$="_preview_div_id"] [id$="SlugId"] { margin: 0 0 6px !important; } #nfStoryPreviewCard [id$="_preview_div_id"] .slugTitleBigNewsFeed::before, #nfStoryPreviewCard [id$="_preview_div_id"] .slugPhotoFeed::before, #nfStoryPreviewCard [id$="_preview_div_id"] .slugVideoFeed::before, #nfStoryPreviewCard [id$="_preview_div_id"] [id$="SlugId"]::before { display: none !important; } /* Headlines: tidy spacing only. Do NOT force size/weight/colour — those come from the user's Headline settings (font type/weight/size/colour/transform). */ #nfStoryPreviewCard [id$="_preview_div_id"] .timeLineHeadingBigNewsFeed { line-height: 1.28 !important; margin: 0 0 10px !important; } /* Reporter + date row */ #nfStoryPreviewCard [id$="_preview_div_id"] .publish_time { border: 0 !important; margin-top: 8px !important; } #nfStoryPreviewCard [id$="_preview_div_id"] .reporter_name h5, #nfStoryPreviewCard [id$="_preview_div_id"] .reporter_name { font-size: 12.5px !important; color: #6b695f !important; font-weight: 500 !important; margin: 0 !important; } #nfStoryPreviewCard [id$="_preview_div_id"] .date-time { font-size: 11.5px !important; color: #9a9690 !important; margin: 2px 0 0 !important; } /* Photoline caption strip under an image */ #nfStoryPreviewCard [id$="_preview_div_id"] .photoline, #nfStoryPreviewCard [id$="_preview_div_id"] .cortesy_line p { font-size: 12px !important; color: #6b695f !important; } /* Bullet points */ #nfStoryPreviewCard [id$="_preview_div_id"] .dummyStoryPointsUl li, #nfStoryPreviewCard [id$="_preview_div_id"] .text_mono { font-size: 13px !important; line-height: 1.5 !important; color: #333 !important; } /* tighten the gap between description bullet lines (remove the extra space) */ #nfStoryPreviewCard [id$="_preview_div_id"] ul.dummyStoryPointsUl, #nfStoryPreviewCard [id$="_preview_div_id"] ul.userStoryPointsUl { margin: 8px 0 0 !important; padding-left: 20px !important; } #nfStoryPreviewCard [id$="_preview_div_id"] ul.dummyStoryPointsUl li, #nfStoryPreviewCard [id$="_preview_div_id"] ul.userStoryPointsUl li, #nfStoryPreviewCard [id$="_preview_div_id"] .descriptionDivClass p, #nfStoryPreviewCard [id$="_preview_div_id"] .newptag p { margin: 0 0 3px !important; padding: 0 !important; line-height: 1.4 !important; } /* collapse any empty bullet/paragraph that leaves a blank gap */ #nfStoryPreviewCard [id$="_preview_div_id"] ul.dummyStoryPointsUl li:empty, #nfStoryPreviewCard [id$="_preview_div_id"] ul.userStoryPointsUl li:empty, #nfStoryPreviewCard [id$="_preview_div_id"] .descriptionDivClass p:empty, #nfStoryPreviewCard [id$="_preview_div_id"] .newptag p:empty { display: none !important; margin: 0 !important; } #nfStoryPreviewCard [id$="_preview_div_id"] ul.dummyStoryPointsUl li:last-child, #nfStoryPreviewCard [id$="_preview_div_id"] ul.userStoryPointsUl li:last-child, #nfStoryPreviewCard [id$="_preview_div_id"] .descriptionDivClass p:last-child { margin-bottom: 0 !important; } /* Any stray red divider line under an image -> soft neutral */ #nfStoryPreviewCard [id$="_preview_div_id"] .red_line { background: var(--nf-red, #c60c30) !important; } /* ========================================================================== TIMELINE panel (:is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody)) — render each published story in the new design (framed white card, clean slug/headline/reporter, capped image). Typography only + card frame; drag/controls untouched. ========================================================================== */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) :is(#sortable,.drop_saction) > li, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist { list-style: none !important; background: #fff !important; border: 1px solid #e5e1d8 !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; overflow: hidden !important; margin: 0 auto 16px !important; max-width: 360px !important; } /* PIN Preview grid (/stories): the pinned cards sit in a flex row; the card's `margin:0 auto` was spreading them far apart. Lay them out left-aligned with a small, even gap and no auto side-margins so there's no extra space between previews. Scoped to the pin-preview containers only. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) #listOfItems { display: block !important; position: relative !important; } /* prev/next slider arrows (injected by JS) */ .nf-pin-nav { position: absolute !important; top: 250px !important; transform: translateY(-50%) !important; z-index: 20 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 1px solid #eee !important; background: #ffffff !important; color: #c60c30 !important; box-shadow: 0 3px 12px rgba(0,0,0,0.22) !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 0 3px 0 !important; } .nf-pin-nav:hover { background: #c60c30 !important; color: #fff !important; } .nf-pin-nav-prev { left: 2px !important; } .nf-pin-nav-next { right: 2px !important; } .nf-pin-nav[disabled] { opacity: .35 !important; cursor: default !important; } /* horizontal slider: the pinned cards sit in ONE row and scroll/swipe sideways (snap to each card) instead of wrapping into a grid. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) ul.drop_saction, :is(#storyPinnedJustinList,#storyPinnedJustinList1) #pinnedUlId, :is(#storyPinnedJustinList,#storyPinnedJustinList1) #pinnedUlId2 { display: flex !important; flex-flow: row nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 14px !important; padding: 0 0 10px !important; margin: 0 !important; list-style: none !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) :is(#sortable,.drop_saction) > li, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist { margin: 0 !important; flex: 0 0 340px !important; width: 340px !important; max-width: 340px !important; /* fixed, compact, uniform height; content clips, toolbar + Read More pinned */ height: 400px !important; overflow: hidden !important; position: relative !important; padding-bottom: 130px !important; /* reserve: toolbar (~84) + gap + Read More pill */ scroll-snap-align: start !important; } /* action toolbar pinned to the card bottom (any nesting depth). Fixed height so EVERY card's action row lines up at the same position across widget types. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .maingrayboxgetlistbox { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 80px !important; box-sizing: border-box !important; margin: 0 !important; padding: 8px 8px 6px !important; background: #fff !important; z-index: 4 !important; border-top: 1px solid #efece6 !important; align-items: center !important; } /* (fade overlay removed — it made clipped text look faded/broken) */ /* Keep pin cards compact + uniform: smaller cover image and clamped content (description / bullets / ticker). The FULL content is available via the Read More popup. The action toolbar is never clipped (card is not force-cropped), and align-items:stretch keeps every card the same height. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .big_news_img img, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .big_news_img video, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .carousel-item img, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .carousel-item video { height: 150px !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .userStoryPointsUl, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .dummyStoryPointsUl, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .descriptionDivClass, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .newptag { max-height: 48px !important; overflow: hidden !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .stock-market-up { max-height: 132px !important; overflow: hidden !important; } /* front_page shows its description ABOVE the image; in the compact pin card that clips awkwardly, so hide it here (full text remains in the Read More popup). */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.front_page .userStoryPointsUl { display: none !important; } /* make sure the front_page carousel image fills the frame like the other cards */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .slider-frame .carousel-item > img, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist .slider-frame .carousel-item > video { width: 100% !important; height: 150px !important; object-fit: cover !important; display: block !important; } /* full_screen: it's an image-only widget — cap the cover image height so the card stays compact and the toolbar/Read More remain visible. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.full_screen .big_news_img { height: 210px !important; max-height: 210px !important; overflow: hidden !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.full_screen .big_news_img img { width: 100% !important; height: 210px !important; object-fit: cover !important; display: block !important; } /* contact card: circular avatar (my 150px image rule would otherwise stretch it), and hide the long address so the contact icons fit above the Read More strip. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.contact_card .big_news_img { width: 92px !important; height: 92px !important; max-height: 92px !important; border-radius: 50% !important; margin: 6px auto 10px !important; overflow: hidden !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.contact_card .big_news_img img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.contact_card .gautam-adani-text { display: none !important; } /* contact card — pin card + popup: keep the header (name + timer), centre the content, and show the brand logo BELOW the header line at the top-right. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card, :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card .content_card { text-align: center !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card { position: relative !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card .big_news_img { overflow: visible !important; position: static !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card .big_news_img > img { border-radius: 50% !important; } /* .big_news_img in the selector out-specifies the shared top:12px logo rule so the logo sits BELOW the header line (name + timer). */ :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card .big_news_img .story-preview-logo-big, :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card .big_news_img .logo_position { display: block !important; position: absolute !important; top: 56px !important; right: 14px !important; left: auto !important; bottom: auto !important; z-index: 7 !important; margin: 0 !important; width: auto !important; height: auto !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody) li.justinlist.contact_card .big_news_img .logo_position img { height: 20px !important; width: auto !important; max-width: 84px !important; object-fit: contain !important; display: block !important; } /* poll_performance: cap the big feed image so the card stays compact */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.poll_performance .big_image_feed img, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.poll_performance .big_image_feed video, :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.poll_performance .story_class img { height: 160px !important; width: 100% !important; object-fit: cover !important; display: block !important; } /* audio widget: small cover image + description, clean red player. The feed markup (.audio_main_wrapper/.audio_image/.nf-audio-player) isn't covered by the #nfStoryPreviewCard audio rules, so style it for the pin cards. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .audio_main_wrapper { position: static !important; min-height: 0 !important; padding-left: 0 !important; display: flex !important; gap: 12px !important; align-items: flex-start !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .audio_image { position: static !important; width: 92px !important; height: 76px !important; margin: 0 !important; flex-shrink: 0 !important; border-radius: 10px !important; object-fit: cover !important; order: -1 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .coorona_deses_text { margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-player { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 12px !important; background: #faf9f6 !important; border: 1px solid #eceae4 !important; border-radius: 100px !important; padding: 6px 12px 6px 6px !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-play { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; border: 0 !important; border-radius: 50% !important; background: #c60c30 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-play i { font-size: 18px !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-track { flex: 1 1 auto !important; height: 4px !important; background: #e0dcd4 !important; border-radius: 4px !important; position: relative !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-fill { height: 100% !important; width: 0 !important; background: #c60c30 !important; border-radius: 4px !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-time { font-size: 11px !important; color: #555 !important; flex-shrink: 0 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-logo { font-size: 11px !important; font-weight: 800 !important; flex-shrink: 0 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-logo em { font-style: italic !important; font-weight: 300 !important; color: #c60c30 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) li.justinlist.audio .nf-audio-player audio { display: none !important; } /* pin card header: widget name (left) + pin countdown timer pill (right). Injected by JS at the top of each card; timer filled by StoryPublishTimer(). */ :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist .nf-pin-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 11px 14px !important; min-height: 44px !important; background: #faf9f6 !important; border-bottom: 1px solid #efece6 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist .nf-pin-head-name { font-size: 11.5px !important; font-weight: 700 !important; color: #1a1a24 !important; text-transform: uppercase !important; letter-spacing: .3px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist .nf-pin-timer { display: inline-flex !important; align-items: center !important; gap: 3px !important; flex-shrink: 0 !important; background: #141414 !important; color: #fff !important; border-radius: 100px !important; padding: 3px 11px !important; font-size: 12px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist .nf-pin-timer i { font-size: 13px !important; margin-right: 3px !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist .nf-pin-timer span { min-width: 15px !important; text-align: center !important; } /* popup: keep the header timer clear of the × close button */ #nfPinReadMoreBody li.justinlist .nf-pin-head { padding-right: 46px !important; } /* the Read More popup is z-index:99999; make confirm/alert dialogs (SweetAlert and variants) appear ABOVE it so the confirm box isn't hidden behind the popup */ .sweet-alert, .sweet-overlay, .swal-overlay, .swal-modal, .swal2-container, .swal2-backdrop-show { z-index: 100002 !important; } /* "|" divider between hour | minute | second (1st & 2nd spans = hour, min) */ :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist .nf-pin-timer span:nth-of-type(1)::after, :is(#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.justinlist .nf-pin-timer span:nth-of-type(2)::after { content: "|" !important; margin-left: 5px !important; color: rgba(255,255,255,0.45) !important; font-weight: 400 !important; } /* Read More pill — normal flow, centred, with clear spacing above the toolbar (injected by JS just before .maingrayboxgetlistbox) */ .nf-pin-readmore { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; bottom: 94px !important; z-index: 5 !important; display: block !important; width: -moz-fit-content !important; width: fit-content !important; margin: 0 !important; background: #c60c30 !important; color: #fff !important; border: 0 !important; border-radius: 100px !important; padding: 6px 22px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .2px !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(198,12,48,0.25) !important; } .nf-pin-readmore:hover { background: #a80a28 !important; } .nf-pin-readmore::after { content: " \203A" !important; font-weight: 700 !important; } /* PIN preview cards use the legacy .mainboxpinnew / .accordion-box-* markup (story_pinned_structure.blade.php), not the new x-widget-preview classes. Style that legacy markup so the pinned cards match the new design: a clean cover image, uppercase grey slug, bold headline, pill type tag. */ :is(#storyPinnedJustinList,#storyPinnedJustinList1) .mainboxpinnew { position: relative !important; padding: 12px 14px 14px !important; height: 100% !important; box-sizing: border-box !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) .accordion-box-pic { width: 100% !important; height: 190px !important; border-radius: 10px !important; overflow: hidden !important; margin: 8px 0 10px !important; background: #f0eee9 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) .accordion-box-pic img, :is(#storyPinnedJustinList,#storyPinnedJustinList1) .accordion-box-pic video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) .accordion-box-title { display: block !important; font-size: 12px !important; text-transform: uppercase !important; color: #9a9690 !important; font-weight: 700 !important; margin-bottom: 3px !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) .accordion-box-main .justintitle { font-size: 15px !important; font-weight: 800 !important; color: #1a1a1a !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) .accordion-box-head { display: inline-block !important; margin-top: 8px !important; font-size: 11px !important; font-weight: 600 !important; color: #5a53d6 !important; background: #eef0ff !important; padding: 3px 12px !important; border-radius: 100px !important; cursor: pointer !important; } :is(#storyPinnedJustinList,#storyPinnedJustinList1) .newpinaccordiancarddate { font-size: 11px !important; color: #8a8780 !important; margin: 4px 0 !important; font-weight: 500 !important; } /* app-preview wrapper: flatten the injected #listOfItems / inner ul so the card
  • is the single frame (no double border/padding around it) */ #JustinListing #listOfItems, #JustinListing .drop_saction, #JustinListing #listOfItems > .drop_saction { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; } /* flatten inner theme cards so the li is the single frame */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) :is(#sortable,.drop_saction) > li .card, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) :is(#sortable,.drop_saction) > li .singlefeed { border: 0 !important; box-shadow: none !important; margin: 0 !important; background: transparent !important; } /* cover image */ /* cap the IMAGE height (not the container) so the photoline caption below stays visible */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .big_news_img { overflow: hidden !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .big_news_img img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .big_news_img video { width: 100% !important; height: 230px !important; object-fit: cover !important; display: block !important; } /* photoline caption under the top-news image */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-item > h5[class*="d-block"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-item > h5 { font-size: 12px !important; color: #6b695f !important; } /* cap carousel images (front page flag, photo album, etc.) — ">" so the nested logo (.carousel-item > .logo_position > img) is not stretched/cropped */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .slider-frame .carousel-item > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .slider-frame .carousel-item > video { width: 100% !important; max-height: 240px !important; object-fit: cover !important; display: block !important; } /* content padding */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_card { padding: 14px 16px !important; } /* slug: muted uppercase, no red bar */ /* slug: keep the user's transform/size/colour/box; only drop a stray pseudo bar */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) [class*="slug"]::before, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) [id$="SlugId"]::before { display: none !important; } /* headline bold */ /* headline: spacing only; keep the user's size/weight/colour/transform */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .timeLineHeadingBigNewsFeed { line-height: 1.28 !important; } /* reporter + date: keep the story's own colours, only tidy size/spacing */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .date-time { font-size: 11.5px !important; } /* bullets */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .dummyStoryPointsUl li, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .text_mono { font-size: 13px !important; line-height: 1.5 !important; color: #333 !important; } /* Remove the misplaced vertical red "line" bar before the slug (the blinking-line feature). Colour is unchanged — the bar just isn't shown before the slug, matching the reference. Applies to both the timeline and the centre preview. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) span[style*="width:3px"][style*="height:30px"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) span[style*="width: 3px"][style*="height: 30px"], #nfStoryPreviewCard span[style*="width:3px"][style*="height:30px"], #nfStoryPreviewCard span[style*="width: 3px"][style*="height: 30px"] { display: none !important; } /* Hide empty / broken placeholder (e.g. the image element shown with no src when Preload Media / a video is used) so it doesn't render a broken-image box. */ #nfStoryPreviewCard img[src=""], #nfStoryPreviewCard img:not([src]), #nfStoryPreviewCard img[src="#"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) img[src=""], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) img:not([src]), :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) img[src="#"] { display: none !important; } /* if a media block holds a video, hide any sibling still-empty image wrapper */ #nfStoryPreviewCard .big_news_img:has(> video) img, #nfStoryPreviewCard [id$="_preview_div_id"]:has(video) img[src=""] { display: none !important; } /* ---- Timeline headlines: keep the themed card readable ------------------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.headlines .same_contact.justinul { border-radius: 14px !important; padding: 16px !important; } /* ---- Timeline count down: DAYS/HRS/MIN black boxes ----------------------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-countdown-row { display: flex !important; gap: 12px !important; margin: 12px 0 !important; justify-content: center !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-cd-box { width: 60px !important; height: 60px !important; background: #141414 !important; border-radius: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-cd-num { color: #fff !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-cd-lbl { color: #9a9690 !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .6px !important; margin-top: 4px !important; } /* ---- Timeline full-screen: white overlay text (readable on the image), but a user-boxed slug (inline border/background) keeps its own colours ----------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) #timeLineHeadingFullScreenFeed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_over, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_over h1, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_over p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_over h5:not([style*="border"]):not([style*="background"]), :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_over span:not([style*="border"]):not([style*="background"]) { color: #fff !important; } /* ========================================================================== TIMELINE — per-widget designs matching the reference (docs/design-system/reference/justin-timeline.html + jt-renders.js). Each block is scoped to :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li. so it beats the generic timeline rules above. Colours unchanged — layout/shape only. ========================================================================== */ /* ---- AUDIO: image-left + description, red-accented native player --------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .audio_main_wrapper { display: flex !important; gap: 12px !important; align-items: flex-start !important; padding-left: 0 !important; min-height: 0 !important; } /* description LEFT (flex:1), image RIGHT — same as the live/centre preview */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .audio_main_wrapper > .coorona_deses_text { order: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .audio_main_wrapper > div:last-child { order: 1 !important; flex: 0 0 auto !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .audio_image { position: static !important; width: 118px !important; height: 100px !important; object-fit: cover !important; border-radius: 10px !important; margin: 0 !important; display: block !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .coorona_deses_text { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } /* audio header: force a clean full-width vertical stack. The theme floats .middle-text-audio at 80% and both the slug (#slugAudioFeed) and the headline (#audioTitle) are h5.slugAudioFeed, so they were flowing side by side. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .action_covid, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .share_icon-main { display: block !important; padding: 0 !important; } /* (audio toolbar uses the shared .maingrayboxgetlistbox rule below — no audio-specific override, so it matches every other widget exactly) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .middle-text-audio { width: 100% !important; float: none !important; display: block !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .middle-text-audio > span { display: flex !important; align-items: center !important; width: 100% !important; margin: 0 0 4px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio #slugAudioFeed { display: inline-block !important; width: auto !important; float: none !important; font-size: 12px !important; font-weight: 400 !important; color: #999 !important; text-transform: uppercase !important; line-height: 1.3 !important; margin: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio #audioTitle { display: block !important; width: 100% !important; float: none !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #1a1a24 !important; margin: 0 0 6px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .middle-text-audio .bulet-date-market { display: block !important; width: 100% !important; float: none !important; margin: 0 0 4px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .middle-text-audio .bulet-date-market p { font-size: 12.5px !important; color: #7a7a7a !important; margin: 0 !important; } /* custom red audio player (same as the live/centre preview) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-player { display: flex !important; align-items: center !important; gap: 11px !important; margin-top: 14px !important; background: #faf9f6 !important; border: 1px solid #eceae4 !important; border-radius: 100px !important; padding: 7px 14px 7px 7px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-play { width: 34px !important; height: 34px !important; flex-shrink: 0 !important; border: 0 !important; border-radius: 50% !important; background: #c60c30 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-play i { font-size: 20px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-track { flex: 1 1 auto !important; height: 4px !important; background: #e0dcd4 !important; border-radius: 4px !important; position: relative !important; cursor: pointer !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-fill { height: 100% !important; width: 0 !important; background: #c60c30 !important; border-radius: 4px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-time { font-size: 12px !important; color: #555 !important; flex-shrink: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-logo { font-size: 12px !important; font-weight: 800 !important; flex-shrink: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-logo em { font-style: italic !important; font-weight: 300 !important; color: #c60c30 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-player audio { display: none !important; } /* ---- CONTACT CARD: circular avatar, centred name, 4 rounded icon buttons - */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card { position: relative !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .big_news_img { width: 94px !important; height: 94px !important; max-height: none !important; margin: 10px auto 14px !important; border-radius: 50% !important; overflow: visible !important; position: static !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .big_news_img > img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .big_news_img .cortesy_line, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .big_news_img .red_line, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card #contactCardNameAddressId { display: none !important; } /* logo-on-top -> upper-right corner of the CARD (escapes the avatar) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .big_news_img .logo_position { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; bottom: auto !important; z-index: 6 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .big_news_img .logo_position img { width: auto !important; height: 18px !important; max-width: 90px !important; object-fit: contain !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .bulet-date-market, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .content_card { text-align: center !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card #contactCardNameH1Id { font-size: 20px !important; font-weight: 800 !important; margin: 0 0 4px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card #contactCardNameDesignationId { font-size: 12.5px !important; color: #7a7a7a !important; font-weight: 500 !important; margin: 0 0 16px !important; text-align: center !important; display: block !important; width: 100% !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .gautam-adani-pic { padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .gautam-adani-pic .row { display: flex !important; justify-content: center !important; gap: 14px !important; margin: 0 auto !important; flex-wrap: nowrap !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .gautam-adani-pic .row > div { flex: 0 0 auto !important; width: 62px !important; max-width: 62px !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 !important; text-align: center !important; } /* black circle holding the glyph */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .gautam-adani-pic .cc-ico { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; border-radius: 50% !important; background: #141414 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; line-height: 1 !important; margin: 0 auto !important; } /* detail value under the icon (wraps, small, muted) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.contact_card .gautam-adani-pic .row > div p { display: block !important; font-size: 9.5px !important; color: #6b695f !important; margin: 6px 0 0 !important; font-weight: 500 !important; line-height: 1.3 !important; text-transform: none !important; word-break: break-word !important; max-width: 100% !important; } /* ---- STOCK UP / NEWS UPDATE: clean bordered rows ------------------------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .stock-market-up, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .stock-market-up:not(.stock-middle-box) { list-style: none !important; padding: 0 !important; margin: 12px 0 0 !important; border: 1px solid #eceae4 !important; border-radius: 10px !important; overflow: hidden !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .stock-market-border, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .stock-market-border { display: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .stock-market-main, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .stock-market-up:not(.stock-middle-box) .stock-market-main { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 11px 14px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .stock-market-up li:nth-of-type(odd) .stock-market-main, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .stock-market-up:not(.stock-middle-box) li:nth-of-type(odd) .stock-market-main { background: #f5f3ee !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .stock-market-left, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .stock-market-left { font-weight: 700 !important; font-size: 12.5px !important; text-transform: uppercase !important; color: #1a1a24 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .stock-market-right, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .stock-market-right { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .badge, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .badge { background: transparent !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; } /* stock direction colour: DOWN (danger_li) = red, UP (success_li) = green. Covers the price badge + arrow and the variation pill (.box-color-bg). */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.danger_li .badge, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.danger_li .badge i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.danger_li .badge i::before, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.danger_li .box-color-bg { color: #c0392b !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.danger_li .box-color-bg { background: rgba(192, 57, 43, 0.14) !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.success_li .badge, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.success_li .badge i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.success_li .badge i::before, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.success_li .box-color-bg { color: #178a4c !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.success_li .box-color-bg { background: rgba(55, 193, 161, 0.15) !important; } /* ---- PHOTO ALBUM / FRONT PAGE / NEWS UPDATE: counter -> dark pill -------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .slider_num_of, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slider_num_of, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .slider_num_of { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important; background: rgba(20, 20, 20, 0.85) !important; color: #fff !important; width: auto !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 100px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .slider-frame, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slider-frame, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .slider-frame { position: relative !important; } /* news_update: remove the extra gap between the photoline caption and the headline (image wrapper mb-2 + content block's 14px top padding). */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .big_news_img { margin-bottom: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .carousel-item > h5[style] { margin: 0 !important; padding: 4px 16px 6px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .same_contact.justinul.same_boxspace { padding-top: 8px !important; padding-bottom: 6px !important; } /* remove the extra space between the description and the footer widget-name row */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .same_contact.justinul.same_boxspace > *:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .descriptionDivClass > *:last-child { margin-bottom: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .mainbottomfootersp { margin-top: 0 !important; padding-top: 8px !important; } /* collapse the empty stock list (.reliance_listing with no
  • ) that sits between the description and the footer when the story has no stocks */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .reliance_listing:not(:has(li)) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } /* FRONT PAGE image: a fixed, consistent size (cover-cropped) so every front-page card shows the same image height instead of a variable max-height. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slider-frame .carousel-item > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slider-frame .carousel-item > video, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slider-frame > img { width: 100% !important; height: 240px !important; max-height: 240px !important; object-fit: cover !important; display: block !important; } /* front page: remove the extra space between the image and the footer */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slider-frame, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .carousel, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .carousel-inner { margin-bottom: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .same_contact.justinul { display: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .mainbottomfootersp { margin-top: 0 !important; padding-top: 8px !important; } /* PHOTO ALBUM: the caption, slug and reporter all flow BELOW the image inside the carousel-item — so they must be normal text (NOT an absolute overlay, which was landing on top of the reporter/date). Only the counter overlays. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item { position: relative !important; } /* remove the extra space between the date/time and the footer widget-name row: the only .same_contact.justinul here is the empty mit_time spacer, the red_line carries an inline margin-bottom:50px, and the date has trailing padding. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .same_contact.justinul { display: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .red_line { margin-bottom: 0 !important; } /* collapse every bit of space between the last content (date) and the footer */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .slider-frame, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-inner { margin: 0 !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item { padding-bottom: 0 !important; margin-bottom: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item > *:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .bulet-date-market { margin-bottom: 0 !important; padding-bottom: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .mainbottomfootersp { margin-top: 0 !important; padding-top: 10px !important; } /* image capped, flush to the card top */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item > video { display: block !important; width: 100% !important; max-height: 260px !important; object-fit: cover !important; margin: 0 !important; } /* slug below the image (muted uppercase) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .slider_top_content { position: static !important; padding: 10px 16px 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .slider_slug_content .slugPhotoFeed { font-size: 13px !important; text-transform: uppercase !important; color: #7a7a7a !important; font-weight: 400 !important; margin: 0 !important; border: 0 !important; padding-left: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .slider_slug_content .slugPhotoFeed::before { display: none !important; } /* photoline caption -> normal muted text under the image (NOT an overlay) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item .timeLineHeadingPhotoFeed { position: static !important; background: none !important; margin: 6px 0 2px !important; padding: 0 16px !important; font-size: 12.5px !important; font-weight: 600 !important; } /* reporter / date under the caption */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item .bulet-date-market { margin: 4px 0 0 !important; padding: 0 16px 6px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item .bulet-date-market p { margin: 0 !important; font-size: 12.5px !important; color: #7a7a7a !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item .bulet-date-market .slugTitleBigNewsFeed { display: block !important; font-size: 11.5px !important; color: #9a9690 !important; text-transform: none !important; border: 0 !important; padding: 0 !important; margin: 2px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.photo_album .carousel-item .bulet-date-market .slugTitleBigNewsFeed::before { display: none !important; } /* ---- Carousel prev/next arrows (injected by nf-audio-player.js) ---------- Anchored on li.justinlist (present in every feed container) + the feed IDs. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .slider-frame, li.justinlist .slider-frame { position: relative !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-car-nav, li.justinlist .nf-car-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 20 !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(20, 20, 20, 0.5) !important; color: #fff !important; border-radius: 50% !important; cursor: pointer !important; user-select: none !important; font-size: 22px !important; line-height: 1 !important; font-weight: 700 !important; transition: background 0.14s !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-car-nav:hover, li.justinlist .nf-car-nav:hover { background: rgba(20, 20, 20, 0.8) !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-car-prev, li.justinlist .nf-car-prev { left: 10px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .nf-car-next, li.justinlist .nf-car-next { right: 10px !important; } /* FRONT PAGE — keep the image clean like the centre card: header row is slug (left) + country name (right); the per-slide reporter/date overlays are hidden and the per-slide country becomes a small dark pill. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .content_card.video_content.title { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important; margin: 0 0 8px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .content_card.video_content.title .timeLineHeadingPhotoFeed { position: static !important; margin: 0 !important; padding: 0 !important; background: none !important; font-size: 12.5px !important; font-weight: 600 !important; color: #7a7a7a !important; white-space: nowrap !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slugPhotoFeed { font-size: 13px !important; color: #7a7a7a !important; text-transform: uppercase !important; margin: 0 !important; border: 0 !important; padding-left: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slugPhotoFeed::before { display: none !important; } /* per-slide reporter/date overlaid on the flag = clutter; hide (footer has them) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .carousel-item .bulet-date-market { display: none !important; } /* per-slide country name -> small dark pill, top-left of the image */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .carousel-item .timeLineHeadingPhotoFeed { position: absolute !important; left: 10px !important; bottom: 10px !important; right: auto !important; top: auto !important; margin: 0 !important; padding: 3px 10px !important; background: rgba(20, 20, 20, 0.85) !important; color: #fff !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 100px !important; width: auto !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .carousel-item { position: relative !important; } /* red line — short vertical red bar at the image's bottom-left (like the other news widgets); the blade adds an inline margin we must reset */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .red_line { position: absolute !important; left: 0 !important; bottom: 8px !important; right: auto !important; top: auto !important; width: 6px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; background: #c60c30 !important; display: block !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .red_line span { display: block !important; width: 6px !important; height: 28px !important; background: #c60c30 !important; } /* ---- FULL SCREEN: image fills the card, headline overlaid at the bottom -- */ /* zero every wrapper's spacing so the image is flush to the rounded card top */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen > div, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_card.bigimagefeed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .card-body { margin: 0 !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .card-body { position: relative !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .topbar { display: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .big_news_img { max-height: none !important; overflow: hidden !important; margin: 0 !important; } /* ">" so this sizes only the story image, NOT the nested logo (.big_news_img > .logo_position > img), which would otherwise be cropped */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .big_news_img > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .big_news_img > video { display: block !important; width: 100% !important; height: 460px !important; object-fit: cover !important; margin: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; margin: 0 !important; padding: 80px 16px 20px !important; z-index: 2 !important; width: 100% !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%) !important; } /* headline + NON-boxed slug/text white; a user-boxed slug (inline border/background) keeps its own border colour, background and text colour */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over h1, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over div, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over h5:not([style*="border"]):not([style*="background"]), :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over span:not([style*="border"]):not([style*="background"]) { color: #fff !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over h1, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over h5:not([style*="border"]):not([style*="background"]) { border: 0 !important; padding-left: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over *::before, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over *::after { display: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over h5 { font-size: 12.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .4px !important; margin: 0 0 6px !important; opacity: .95; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .content_over h1 { font-size: 20px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .cortesy_line { display: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .logo_position { z-index: 3 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .logo_position img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.full_screen .logo_position .brand { color: #fff !important; } /* ---- TOP NEWS / THREAD: cap the single image, pad the content ------------ These use .story_class.big_image_feed (single or carousel) and .same_contact.justinul.same_boxspace for the text — NOT .content_card. ----- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .story_class.big_image_feed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .story_class.big_image_feed { position: relative !important; overflow: hidden !important; } /* single image (most common path) is a bare — cap it */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .story_class.big_image_feed > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .story_class.big_image_feed > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .story_class.big_image_feed > video, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .story_class.big_image_feed > video { width: 100% !important; height: 230px !important; object-fit: cover !important; display: block !important; } /* remove any space ABOVE the image so it's flush to the rounded card top */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) :is(#sortable,.drop_saction) > li { padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) :is(#sortable,.drop_saction) > li > div:first-child { margin-top: 0 !important; padding-top: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .story_class.big_image_feed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .story_class.big_image_feed { margin: 0 !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .story_class.big_image_feed > img:first-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .story_class.big_image_feed .big_news_img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .story_class.big_image_feed > img:first-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .story_class.big_image_feed .big_news_img { margin-top: 0 !important; } /* photoline caption bar: tight, no extra margin below its divider */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .story_class .carousel-item > h5.d-block, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .story_class .carousel-item > h5.d-block { margin: 0 !important; } /* content padding + rhythm (text wrapper is .same_contact.justinul). Tight top padding so the slug sits close to the image/photoline above it. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .same_contact.justinul.same_boxspace, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .same_contact.justinul.same_boxspace { padding: 6px 16px 10px !important; } /* kill trailing Bootstrap mb-2/mb-3 gaps on the last description item so it doesn't leave dead space before the footer */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass > *:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag > *:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .same_contact.justinul > *:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass .mb-3:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass .mb-2:last-child { margin-bottom: 0 !important; } /* the slug span has no negative pull-up in this card; keep the slug flush to the top */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .same_contact.justinul > span:first-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .same_contact.justinul > span:first-child { margin-top: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .same_contact.justinul.same_boxspace > *:first-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .same_contact.justinul.same_boxspace > *:first-child { margin-top: 0 !important; } /* neutralise the inline margin-top:-15px that pulls the slug up into the image */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .same_contact.justinul > span[style*="margin-top"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .same_contact.justinul > span[style*="margin-top"] { margin-top: 0 !important; } /* slug -> match the centre card's "JUST IN": gray, uppercase, 13px. (Overrides the blade's inline color:#000000 default so it reads gray like the centre preview.) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .justintitle.just_slugcapsfont, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .justintitle.just_slugcapsfont { font-size: 13px !important; font-weight: 400 !important; color: #7a7a7a !important; text-transform: uppercase !important; letter-spacing: .3px !important; margin: 0 0 4px !important; } /* slug box variants keep their own text colour (a coloured/bordered slug box) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .justintitle.just_slugcapsfont[style*="border"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .justintitle.just_slugcapsfont[style*="background"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .justintitle.just_slugcapsfont[style*="border"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .justintitle.just_slugcapsfont[style*="background"] { color: inherit !important; } /* headline -> match the centre card: bold, dark, 18px/22 (the inline font-weight:400 default was making it look thin) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .justintitle.big_font, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .justintitle.big_font { font-size: 18px !important; line-height: 22px !important; font-weight: 800 !important; color: #333 !important; text-transform: none !important; margin: 4px 0 8px !important; } /* reporter + date -> small gray like the centre card (top_news/thread use .time_up .reporter_name, with the date in a .slugTitleBigNewsFeed span) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .time_up .reporter_name h5, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .time_up .reporter_name h5 { font-size: 12.5px !important; color: #7a7a7a !important; font-weight: 400 !important; margin: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .time_up .reporter_name .slugTitleBigNewsFeed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .time_up .reporter_name .slugTitleBigNewsFeed { display: block !important; font-size: 11.5px !important; color: #9a9690 !important; text-transform: none !important; border: 0 !important; padding: 0 !important; margin: 2px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .time_up, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .time_up { margin: 0 0 6px !important; } /* description / bullet points -> dark, tidy (centre look) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .descriptionDivClass p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .dummyStoryPointsUl li, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .text_mono, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .descriptionDivClass p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .dummyStoryPointsUl li, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .text_mono { font-size: 13px !important; line-height: 1.5 !important; color: #333 !important; } /* number pill on the carousel image -> dark rounded pill */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .slider_num_of, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .slider_num_of, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.front_page .slider_num_of, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.news_update .slider_num_of { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important; background: rgba(20, 20, 20, 0.85) !important; color: #fff !important; width: auto !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 100px !important; } /* ---- News widget (top_news / thread): make the image + overlays match the live/centre card. In the live component the photoline
    sits OUTSIDE the image box, so the red line & photo credit hug the image. In the timeline the per-slide photoline is INSIDE the slide (rendering a "Photoline Content" bar and pushing the overlays below the image). The live card shows no such bar, so hide it here; the image box then equals the image and the overlays anchor flush to the image bottom. Applies to popup (#previewJustinList) + timeline. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .big_news_img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .big_news_img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .big_news_img .carousel-item, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .big_news_img .carousel-item { position: relative !important; } /* consistent image height so overlays land on the image bottom every time. Use ">" (direct child) so this hits only the story image, NOT the nested logo (.carousel-item > .logo_position > img) — otherwise the logo gets stretched/cropped by height:230px;object-fit:cover. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .big_news_img .carousel-item > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .big_news_img .carousel-item > video, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .big_news_img .carousel-item > img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .big_news_img .carousel-item > video { width: 100% !important; height: 230px !important; object-fit: cover !important; display: block !important; margin: 0 !important; } /* photoline caption — shown BELOW the image (like the live card). It sits in flow after the fixed-height image; the overlays below use a top-offset so they still ride the image bottom (not this caption). */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .big_image_feed h5[class*="d-block"], :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .big_image_feed h5[class*="d-block"] { display: block !important; position: static !important; font-size: 12px !important; color: #6b695f !important; font-weight: 400 !important; margin: 0 !important; padding: 6px 16px !important; border: 0 !important; border-bottom: 1px solid #eee !important; background: #fff !important; text-align: left !important; } /* Photo Credit — clean text on the image bottom-right. Anchored by top-offset (image is a fixed 230px) so it stays on the image, above the photoline. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .cortesy_line, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .cortesy_line { position: absolute !important; top: 200px !important; right: 10px !important; left: auto !important; bottom: auto !important; background: transparent !important; padding: 0 !important; margin: 0 !important; z-index: 4 !important; text-align: right !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .cortesy_line p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .cortesy_line p { margin: 0 !important; color: #6b695f !important; font-size: 12px !important; font-weight: 400 !important; text-transform: uppercase !important; text-shadow: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .cortesy_line p span, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .cortesy_line p span { text-transform: none !important; } /* Red line — short vertical red bar flush to the image bottom-left (live values: 6.5px wide, ~12% tall, #c60c30 like the centre card) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .red_line, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .red_line { position: absolute !important; left: 0 !important; top: 194px !important; right: auto !important; bottom: auto !important; width: 6px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; z-index: 4 !important; display: block !important; background: #c60c30 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.top_news .red_line span, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.thread .red_line span { display: block !important; width: 6px !important; height: 28px !important; background: #c60c30 !important; } /* ========================================================================== TIMELINE rich description content (.descriptionDivClass / .newptag holds description JSON items: paragraphs, sub-headlines

    , quotes). The

    sub-headlines render up to 32px unstyled and blow out the card — cap them so the card stays structured like the centre preview. ========================================================================== */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass h3, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag h3, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass h2, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag h2 { font-size: 14px !important; line-height: 1.35 !important; font-weight: 700 !important; color: #222 !important; margin: 0 0 4px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag p { font-size: 13px !important; line-height: 1.5 !important; color: #333 !important; margin: 0 0 4px !important; } /* keep the description block tight to the reporter line above it (no extra gap) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag { margin: 8px 0 0 !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass > *:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag > *:last-child { margin-bottom: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag img { border-radius: 8px !important; } /* ========================================================================== TIMELINE carousels are NOT JS-initialised here, so every slide stacks and the card looks broken. Show ONLY the active slide (same fix the centre preview uses for photo album). Applies to every carousel widget. ========================================================================== */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-inner > .carousel-item { display: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-inner > .carousel-item.active { display: block !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-inner { white-space: normal !important; } /* multi-image carousels are clickable (left half = prev, right half = next) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-inner:has(> .carousel-item:nth-child(2)) > .carousel-item { cursor: pointer !important; } /* broader safety net: hide ANY non-active carousel slide whatever the wrapper */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-item:not(.active) { display: none !important; } /* hide the Bootstrap carousel prev/next controls (they render as large white chevrons over the image in the static timeline preview) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-control-prev, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-control-next, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-control-prev-icon, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-control-next-icon, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-indicators { display: none !important; } /* ========================================================================== TIMELINE spacing rhythm — match the reference (justin-timeline.css) exactly. Margins / padding only — NO colour changes. Applies across every widget so the vertical spacing between slug / headline / reporter / bullets is even. Per-widget rules above are more specific and still win where they differ. ========================================================================== */ /* content wrapper padding = reference 14px (skip the full-screen overlay/frame) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_card:not(.content_over):not(.bigimagefeed), :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .same_contact.justinul.same_boxspace, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .audio-box-fix { padding: 14px 16px !important; } /* audio has no cover image, so the li's pt-4 shows as empty space before the slug — remove it (the .audio-box-fix padding gives the top breathing room). */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio.pt-4 { padding-top: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio > div:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* slug sits tight; the headline provides the gap below it */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .slugTitleBigNewsFeed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .slugPhotoFeed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .slugAudioFeed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .justintitle.just_slugcapsfont { margin: 0 0 2px !important; } /* headline: 4px above, 8px below (reference rhythm) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .timeLineHeadingBigNewsFeed, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .justintitle.big_font { margin: 4px 0 8px !important; } /* reporter / date block: ~10px above like the reference publish_time */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .publish_time, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .time_up, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .bulet-date-market { margin: 10px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .reporter_name h5 { margin: 0 !important; } /* bullet points: reference padding + rhythm */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .dummyStoryPointsUl, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .userStoryPointsUl { padding-left: 20px !important; margin: 12px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .dummyStoryPointsUl li, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .userStoryPointsUl li { margin-bottom: 6px !important; line-height: 1.5 !important; } /* drop stray trailing gaps from bootstrap utility classes inside the card */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .content_card > .mb-2:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .same_contact.justinul > .mb-2:last-child, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass > p:last-child { margin-bottom: 0 !important; } /* separate the action-toolbar footer from the story content */ /* footer wrapper: no horizontal padding so the toolbar can go edge-to-edge; the meta row keeps its own side padding for alignment */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .mainbottomfootersp { margin-top: 0 !important; padding: 8px 0 0 !important; width: 100% !important; box-sizing: border-box !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .mainbottomfootersp .mainfootertoplinesp { margin-top: 0 !important; padding: 0 14px !important; } /* remove the empty ".same_contact.justinul > .mit_time" spacer that sits between the content (date/time) and the footer widget-name row — it was adding a large empty gap. It only ever holds an (empty) .mit_time here, so drop it entirely. Matched two ways (mit_time-only, and "immediately before the footer") so it is removed regardless of whitespace / JS content in .mit_time. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .same_contact.justinul:has(> .mit_time:only-child) { display: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .mit_time { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } /* ---- HEADING WITH STOCKS: tidy the vertical rhythm ---------------------- The markup uses Bootstrap spacing utilities (slug mt-2 + inline margin-bottom, reporter mb-2, stock ticker mt-3 mb-3) that leave big gaps between sections. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .content_card { padding: 14px 16px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .slugTitleBigNewsFeed { margin: 0 0 4px !important; text-transform: uppercase !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .timeLineHeadingBigNewsFeed { margin: 2px 0 4px !important; line-height: 1.3 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .two-date-market { margin: 0 0 4px !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .bulet-date-market { margin: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .two-date-market p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .bulet-date-market p { margin: 0 !important; line-height: 1.45 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .stock-market-up.stock-middle-box { margin: 8px 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .wp-disc-wrap { margin: 8px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.heading_with_stokes .content_card > *:last-child { margin-bottom: 0 !important; } /* ---- STOCK SCROLL: same tidy rhythm (slug mt-2 + inline mb-12, reporter mb-2, stock mt-3 mb-3) plus the description block after the stock ticker --------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .content_card { padding: 14px 16px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .slugTitleBigNewsFeed { margin: 0 0 4px !important; text-transform: uppercase !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .timeLineHeadingBigNewsFeed { margin: 2px 0 4px !important; line-height: 1.3 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .two-date-market { margin: 0 0 4px !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .bulet-date-market { margin: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .two-date-market p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .bulet-date-market p { margin: 0 !important; line-height: 1.45 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .stock-market-up.stock-middle-box { margin: 8px 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .two-date-box { margin: 8px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .two-date-box .descriptionDivClass p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .two-date-box > p { margin: 0 0 8px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stokes_scroll .content_card > *:last-child { margin-bottom: 0 !important; } /* ---- STOCK UP: reporter name/city + date -------------------------------- The .bulet-date-market block is rendered OUTSIDE the padded .content_card, so it was flush-left (misaligned) and the date span carried the slug class. Give it matching side padding, tidy spacing, and proper reporter/date style. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .content_card { padding: 14px 16px 8px !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .stock-market-up.stock_masterlist { margin: 8px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .gautam-adani-text { font-size: 14px !important; font-weight: 600 !important; margin: 2px 0 8px !important; line-height: 1.35 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .bulet-date-market { padding: 0 16px !important; margin: 8px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .bulet-date-market p { margin: 0 !important; font-size: 12.5px !important; color: #7a7a7a !important; font-weight: 400 !important; line-height: 1.45 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .bulet-date-market .slugTitleBigNewsFeed { display: block !important; font-size: 11.5px !important; color: #9a9690 !important; font-weight: 400 !important; text-transform: none !important; border: 0 !important; padding: 0 !important; margin: 2px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.stoke_up .bulet-date-market .slugTitleBigNewsFeed::before { display: none !important; } /* ---- Fix oversized NewsFirst logo overlay on images ----------------------- Theme rule `.logo_position img { height: auto !important }` overrides the logo with no width cap, so the 753x150 white logo can render huge and overflow across the photo (showing as a big white letter). Constrain it back to a small top-corner logo, and clip its container. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .logo_position, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-item .logo_position, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .big_news_img .logo_position { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; z-index: 6 !important; margin: 0 !important; padding: 0 !important; } /* Show the FULL logo — same proven approach as the centre card: a fixed 90x25 box + object-fit:contain letterboxes the wide 753x150 logo in full (no crop, no stretch). Higher specificity so the big-image rule (.big_news_img img { width:100%;height:230px }) can never stretch the logo. object-position:right keeps it flush to the corner; drop-shadow keeps it readable over any photo. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .logo_position img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .carousel-item .logo_position img, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .big_news_img .logo_position img { width: 90px !important; height: 25px !important; max-width: 90px !important; max-height: 25px !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; object-position: right center !important; display: block !important; margin: 0 !important; padding: 0 !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) !important; background: transparent !important; } /* ---- Action toolbar (footer) — identical full width for EVERY widget ------ .maingrayboxgetlistbox holds the 8 action buttons (Edit/Delete/PIN/…). Make it a full-width flex row of equal-width buttons so it looks the same on every widget and in both the timeline and the app preview (narrow) panels. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox { /* width-INDEPENDENT even spacing: fixed-size boxes with a fixed gap, centered. So the gap between buttons is identical on every widget regardless of the card/column width (avoids the wide-card "spread" the 1fr stretch caused). */ display: flex !important; flex-flow: row nowrap !important; justify-content: center !important; align-items: flex-start !important; column-gap: 14px !important; row-gap: 0 !important; gap: 14px !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin: 6px 0 0 !important; padding: 10px 8px !important; grid-template-columns: none !important; grid-template: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv { flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; float: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } /* any non-.mainicondiv stray child (dividers, empties) must not eat row space */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox > *:not(.mainicondiv) { display: none !important; } /* each icon in a uniform bordered rounded box (like the desired screenshot). grid + place-items:center centres the single child robustly, whatever it is. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon { width: 36px !important; max-width: 36px !important; height: 38px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; place-items: center !important; line-height: 0 !important; border: 1px solid #e2ded6 !important; border-radius: 10px !important; background: #fff !important; box-sizing: border-box !important; overflow: visible !important; position: relative !important; } /* per-button (icon-wise) pastel colour shown ON HOVER only (default = white). Targeted by the icon inside each box (via :has) so it is robust regardless of button order/visibility. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:has(.mdi-playlist-edit):hover { background: #ece9f8 !important; border-color: #ddd7f2 !important; } /* Edit — lavender */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:has(.remove_me):hover, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:has(.mdi-playlist-remove):hover { background: #fbeaea !important; border-color: #f3d6d6 !important; } /* Delete — red */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me:hover { background: #e6f4ec !important; border-color: #cdead9 !important; } /* New PIN — green */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:has(.la-info-circle):hover { background: #eae7f8 !important; border-color: #dad4f0 !important; } /* PIN Log — lavender */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top:hover { /* Top PIN — one flat green on hover */ background: #34c38f !important; border: 1px solid #34c38f !important; box-shadow: none !important; outline: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top:hover i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top:hover i::before { color: #fff !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:has(.la-recycle):hover { background: #e1f1ed !important; border-color: #c9e7df !important; } /* Repost — teal */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:has(.mdi-calendar):hover { background: #e9edf6 !important; border-color: #d6deee !important; } /* Change Date — blue */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:has(.copystoryimg):hover { background: #eef0f3 !important; border-color: #dfe2e7 !important; } /* Copy — gray */ /* GUARANTEE: identical toolbar layout for EVERY widget (audio, headlines, all), anchored on li.justinlist so it applies regardless of the feed container. */ li.justinlist .maingrayboxgetlistbox { display: flex !important; flex-flow: row nowrap !important; justify-content: center !important; align-items: flex-start !important; column-gap: 14px !important; row-gap: 0 !important; gap: 14px !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin: 6px 0 0 !important; padding: 10px 8px !important; grid-template-columns: none !important; grid-template: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } li.justinlist .maingrayboxgetlistbox .mainicondiv { flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; float: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } li.justinlist .maingrayboxgetlistbox .mainicondiv .icon { width: 36px !important; max-width: 36px !important; height: 38px !important; margin: 0 auto !important; padding: 0 !important; border: 1px solid #e2ded6 !important; border-radius: 10px !important; background: #fff !important; display: grid !important; place-items: center !important; line-height: 0 !important; box-sizing: border-box !important; position: relative !important; } li.justinlist .maingrayboxgetlistbox .mainicondiv .icon i { font-size: 16px !important; color: #555 !important; line-height: 1 !important; } li.justinlist .maingrayboxgetlistbox > *:not(.mainicondiv) { display: none !important; } /* pinned states keep their colours: New PIN active = green, Top PIN active = gold. (Do NOT flatten these — they signal the pin status.) */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me.active { background: #34c38f !important; border-color: #34c38f !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top.active { background: #d4af37 !important; border-color: #d4af37 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me.active i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top.active i { color: #fff !important; } /* When ALREADY pinned (active), hovering must NOT flip to the green hover state — keep the pin colour (Top PIN = gold, New PIN = green) so no inner green box shows. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top.active:hover { background: #d4af37 !important; border: 1px solid #d4af37 !important; box-shadow: none !important; outline: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me.active:hover { background: #34c38f !important; border: 1px solid #34c38f !important; box-shadow: none !important; outline: none !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top.active:hover i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top.active:hover i::before, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me.active:hover i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me.active:hover i::before { color: #fff !important; } /* Kill the theme's green square drawn behind the icon glyph on hover (.icon.pin_on_top(.active):hover i { background-color:#28a745 }) — the box itself carries the colour, the must always be transparent, no border. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top:hover i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_on_top.active:hover i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me:hover i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon.pin_me.active:hover i { background: transparent !important; background-color: transparent !important; border: 0 !important; } /* count badge (the red "1" on New PIN, "0" on Repost) — sit at the top-right, visible outside the box */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon .pin_number { position: absolute !important; top: -6px !important; right: -6px !important; left: auto !important; bottom: auto !important; min-width: 15px !important; height: 15px !important; padding: 0 3px !important; box-sizing: border-box !important; background: #c60c30 !important; color: #fff !important; border-radius: 100px !important; font-size: 9px !important; font-weight: 700 !important; line-height: 15px !important; text-align: center !important; z-index: 2 !important; } /* HOVER: default is white; on hover each button shows its own pastel colour (defined above). Icons stay dark (readable on the light tint); just show a pointer cursor here. */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon:hover { cursor: pointer !important; } /* nested wrappers (, inner
    ) fill the box and re-centre their icon */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon > a, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon > div { display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon i { font-size: 16px !important; line-height: 1 !important; color: #555 !important; display: block !important; margin: 0 !important; padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon svg { width: 15px !important; height: 15px !important; display: block !important; margin: 0 !important; } /* the Delete icon (.remove_me) is absolutely positioned with a top offset in the theme, which pulls it off-centre — reset all positioning so grid centres it */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon i, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon a, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon svg, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon .remove_me, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .icon > div { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; } /* labels: whole words on their
    lines, no mid-word break, readable */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .maingrayboxgetlistbox .mainicondiv .title { font-size: 8px !important; line-height: 1.25 !important; margin: 4px 0 0 !important; color: #6b695f !important; padding: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ---- Description text: dark & consistent for EVERY widget (audio etc. were inheriting a brownish theme colour) --------------------------------------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .descriptionDivClass p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .newptag p, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .coorona_deses_text, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) .coorona_deses_text p { color: #333 !important; font-size: 13px !important; line-height: 1.5 !important; } /* ---- AUDIO: tidy the description+image row and the player spacing --------- */ :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .audio_main_wrapper { margin: 10px 0 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .coorona_deses_text { padding: 0 !important; } :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .custom-audio-player, :is(#JustinList,#JustinListing,#previewJustinList,#previewJustinList1,#storyPinnedJustinList,#storyPinnedJustinList1,#nfPinReadMoreBody,#nfStoryRefBody) li.audio .nf-audio-player { margin-top: 12px !important; } /* ---- Show-logo-on-top: CLEAN logo, using the theme's own positioning -------- Use the theme rule `.story-preview-logo-big .logo_position img { position: absolute; top:8px; right:10px; width:90px; height:25px }` for a clean logo top-right (no box, no shadow). Just ensure nothing clips it and keep the JS in control of show/hide. The keeps its transparent background. --------- */ /* Target the logo by its name attribute so it works in EVERY widget — some (photo album) inject it as .logo_position directly in the carousel-item, with no .story-preview-logo-big wrapper. Keep the container static so the positions relative to the image, and size the img small (90x25) so the big-image rule (.big_news_img img { width:100% }) can't stretch it. */ #nfStoryPreviewCard .story-preview-logo-big, #nfStoryPreviewCard div[name="showHideNewsFirstLogo"] { position: static !important; overflow: visible !important; z-index: 6 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } #nfStoryPreviewCard div[name="showHideNewsFirstLogo"] img { position: absolute !important; top: 8px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: 90px !important; height: 25px !important; max-width: 90px !important; object-fit: contain !important; filter: none !important; background: transparent !important; display: block !important; z-index: 6 !important; } /* make each logo's image container a positioning context so top:8/right:10 is relative to the image (not the whole card) */ #nfStoryPreviewCard [id$="_preview_div_id"] .big_news_img, #nfStoryPreviewCard [id$="_preview_div_id"] .carousel-item { position: relative !important; } /* tidy scroll edge of the sticky panel */ #nfStoryPreviewCard::-webkit-scrollbar { width: 0; height: 0; }