/** * Print stylesheet for Business Standard Hindi detail pages. * * Loaded with media="print" so it never affects screen rendering. The goal * is to produce a clean, ad-free PDF/print output that contains only the * article (logo, title, summary, image, body, source URL). * * Layout pieces injected at runtime by bshindi_print_frame_header() and * bshindi_print_frame_footer() use the .bs-print-only class, which is * hidden on screen via inline CSS in the body and revealed here. * * @package bshindi-website-new */ @page { margin: 14mm 14mm 18mm 14mm; } html, body { background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; font-size: 11pt; line-height: 1.55; } /* ------------------------------------------------------------------------- Hide site chrome, ads, sidebars, and interactive widgets. ------------------------------------------------------------------------- */ header, #siteHeader, .header, .headerWeb, .headerFixed, .headerTop, .HumbSidebar, .humbOverlay, .adsFixed, footer, .footer, .footerWeb, .footerBtmFixed, /* All ad slots and ad helpers */ .middle_ads, .middle_ads_mobile, .advertisement-bg, .sponserImg, .OUTBRAIN, .outbrain-placeholder, [id^="div-gpt-ad"], iframe[src*="googleads"], iframe[src*="doubleclick"], iframe[src*="outbrain"], /* Page chrome around the article */ .breadcrumbcol, .scroll-title-wrap > .scroll-progress, .scroll-title-wrap .scroll-share, .section-flex > .flex-30, .flex-30, .sidebar, .sideBar, /* Social/print toolbars and share popups */ .story-socialBx .common-social-str, .common-social-str, .share_popup_toggle, .social_share_box, .copy_success_msg, .detShare, /* Story extras — hide “अगला लेख” divider and extras except in targeted-print mode */ .storyGallery, .related-news, body:not(.bshindi-print-single-mode) #continuous-reading-container, /* Photo page: inline “next” gallery — show only after print icon (single-mode) */ body:not(.bshindi-print-single-mode) .PhotoContainer, .next-article, .whatsappFollow, .tags-and-published, .first-published, .article-tags, /* Video detail page: hide the embedded iframe (prints as black box), next-video grid, slider arrows */ .VideoDetailMain .videoFrame:not(.videoFrame--placeholder) iframe, .VideoDetailMain .videoFrame:not(.videoFrame--placeholder) video, .next-article-wrapper .videoFrame:not(.videoFrame--placeholder) iframe, .next-article-wrapper .videoFrame:not(.videoFrame--placeholder) video, .flex-70 .videoGrid, .flex-70 .VideoGallery, .flex-70 .tradeTopic, .VideoDetailMain .videoGridListing, .VideoDetailMain .VideoSlider, .VideoDetailMain .videoCategoryMain, .VideoDetailMain .swiper-pagination, /* Hide all "next video" wrappers by default; only the targeted one shows in single-mode */ body:not(.bshindi-print-single-mode) .next-article-wrapper, /* Pagination, load more, scroll helpers */ .pagination, .loadMoreBtn, .backToTop, .scrollToTop, .cookieBanner, /* Evergreen: keep TOC + Popular Posts + main column in PDF; hide author promo */ .EverAuthBox, /* Video player UI controls */ .video-controls, .swiper-button-next, .swiper-button-prev, /* Misc clickable controls */ button, [role="dialog"], #wpadminbar { display: none !important; visibility: hidden !important; } /* WordPress admin bar leaves an offset on ; remove it. */ html { margin-top: 0 !important; } /* ------------------------------------------------------------------------- Make the article column full width. ------------------------------------------------------------------------- */ main, .mainArea, .wrapper, .wrapper-inner, .section-flex, .section-flex > .flex-70, .evergContent, .evergContent .evergLeft, .evergRight, .EvergDetail, .EvergDetailWeb { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; background: #fff !important; box-shadow: none !important; border: none !important; } /* ------------------------------------------------------------------------- Reveal print-only frame elements (logo header + source URL footer). ------------------------------------------------------------------------- */ .bs-print-only { display: block !important; visibility: visible !important; } .bs-print-header { margin: 0 0 14px 0; padding: 0 0 8px 0; border-bottom: 1px solid #b01116; } .bs-print-header img { width: 220px; max-width: 60%; height: auto; display: block; } .bs-print-footer { margin-top: 24px; padding-top: 10px; border-top: 1px solid #b01116; font-size: 10pt; color: #000; } .bs-print-footer p { margin: 4px 0; } .bs-print-footer .bs-print-url a, .bs-print-footer .bs-print-url .bs-print-canonical { color: #000; word-break: break-all; text-decoration: none; } /* Article detail (desktop): match minimal preview — title, hero, byline, body only. */ body.page-template-artical-story-detail-php .bs-print-header, body.page-template-artical-story-detail-php .bs-print-footer { display: none !important; visibility: hidden !important; } body.page-template-artical-story-detail-php .stroyDesc, body.page-template-artical-story-detail-php .highlight-box { display: none !important; visibility: hidden !important; } /* ------------------------------------------------------------------------- Story typography. ------------------------------------------------------------------------- */ .storyHeading, .storyHeading h1, .scroll-title, .detHead h1, .NfoFundMain .section-header h1, .section-title { font-family: inherit; font-size: 18pt !important; line-height: 1.25 !important; font-weight: 700 !important; color: #000 !important; margin: 0 0 8px 0 !important; padding: 0 !important; } .stroyDesc h2, .subTitle, .subtitle { font-size: 12pt !important; font-weight: 400 !important; font-style: italic !important; color: #444 !important; margin: 0 0 12px 0 !important; line-height: 1.45 !important; } .story-reportr .rp-det, .story-reportr .meta-info { font-size: 10pt; color: #333; margin: 0; padding: 0; } .story-reportr { margin: 0 0 14px 0; padding: 0; border: none; } .storyimageBox, figure { margin: 12px 0 6px 0; page-break-inside: avoid; break-inside: avoid; } .storyimageBox img, .storycontent img, figure img { max-width: 100% !important; height: auto !important; display: block; margin: 0 auto; } .storyimageBox .captiontext, figure figcaption { font-size: 9pt; color: #666; margin: 4px 0 12px 0; font-style: italic; } .storycontent, .evergContent .evergRight, .NfoFundMain, .mutualDetailMain { font-size: 11pt; line-height: 1.6; color: #000; } .storycontent p, .evergContent p { margin: 0 0 10px 0; } .storycontent h2, .storycontent h3, .storycontent h4, .storycontent h5, .evergContent h2, .evergContent h3 { margin: 14px 0 8px 0; line-height: 1.3; page-break-after: avoid; break-after: avoid; } .storycontent ul, .storycontent ol, .evergContent ul, .evergContent ol { margin: 0 0 10px 18px; padding: 0; } .highlight-box { border: 1px solid #ddd; padding: 8px 12px; margin: 12px 0; page-break-inside: avoid; break-inside: avoid; } .highlight-box h3 { font-size: 12pt; margin: 0 0 6px 0; } .highlight-box ul { margin: 0; padding-left: 18px; } /* Tables (mutual-fund / NFO detail). Keep rows together where possible. */ table { width: 100% !important; border-collapse: collapse; page-break-inside: auto; } table th, table td { border: 1px solid #ccc !important; padding: 4px 6px !important; font-size: 10pt; color: #000; background: #fff !important; } table thead { display: table-header-group; } tr, img { page-break-inside: avoid; break-inside: avoid; } /* Drop link decoration noise but keep colors readable. */ a, a:visited { color: #000; text-decoration: none; } /* Force background colors (like brand strip) to render. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* ------------------------------------------------------------------------- Print ONE story only (print icon on continuous reading). Use display:none on non-selected blocks — visibility:hidden was reserving blank pages above/below the chosen story. ------------------------------------------------------------------------- */ /* First article on page: hide entire infinite-scroll region */ body.bshindi-print-single-mode .flex-70 > .storydetail.bshindi-print-this-story ~ #continuous-reading-container { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Primary story block is not the one being printed (e.g. printing 2nd/3rd story) */ body.bshindi-print-single-mode .flex-70 > .storydetail:not(.bshindi-print-this-story) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Hide other loaded stories inside the scroll container */ body.bshindi-print-single-mode #continuous-reading-container .continuous-article:not(.bshindi-print-this-story) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Video detail: when printing the FIRST video, hide all next-video wrappers */ body.bshindi-print-single-mode .flex-70 > .VideoDetailMain.bshindi-print-this-story ~ .next-article-wrapper { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Video detail: when printing a NEXT video, hide the primary video block */ body.bshindi-print-single-mode .flex-70 > .VideoDetailMain:not(.bshindi-print-this-story) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Video detail: hide other next-video wrappers that aren't selected */ body.bshindi-print-single-mode .next-article-wrapper:not(.bshindi-print-this-story) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Hide video page extras (related videos, gallery, trending) when printing single video */ body.bshindi-print-single-mode .flex-70 > .videoGrid, body.bshindi-print-single-mode .flex-70 > .VideoGallery, body.bshindi-print-single-mode .flex-70 > .tradeTopic { display: none !important; } body.bshindi-print-single-mode #continuous-sentinel, body.bshindi-print-single-mode .continuous-reading-loader { display: none !important; } body.bshindi-print-single-mode #continuous-reading-container { display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: #fff !important; } body.bshindi-print-single-mode .bshindi-print-this-story { position: static !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; min-height: 0 !important; page-break-before: auto !important; break-before: auto !important; background: #fff !important; } body.bshindi-print-single-mode .bshindi-print-this-story .next-article { display: none !important; } /* Photo story detail: one gallery per print (root = .photo-story-print-root). */ body.bshindi-print-single-mode .photo-story-print-root:not(.bshindi-print-this-story) { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Printing the primary gallery: drop the whole inline “next” container (no selected root inside). */ body.bshindi-print-single-mode .PhotoContainer:not(:has(.bshindi-print-this-story)) { display: none !important; visibility: hidden !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } body.bshindi-print-single-mode .mainArea, body.bshindi-print-single-mode .mainArea .wrapper, body.bshindi-print-single-mode .section-flex, body.bshindi-print-single-mode .flex-70 { min-height: 0 !important; } body.bshindi-print-single-mode iframe { background: #fff !important; } body.bshindi-print-single-mode video { background: #fff !important; } body.bshindi-print-single-mode .scroll-title-wrap, body.bshindi-print-single-mode .PhotoContainer .PhotoContentTop { position: static !important; top: auto !important; } body.bshindi-print-single-mode .PhotoContainer .storycontent, body.bshindi-print-single-mode .PhotoContainer .PhotoViewCards { page-break-inside: auto; break-inside: auto; } /* ------------------------------------------------------------------------- Video detail page: the screen design uses a black .VideoContent panel with white text. In print that turns into a black sheet with invisible text (or a giant black iframe placeholder). Force a normal white sheet with black text so the article is readable on paper. Applies to both the primary video block (.VideoDetailMain) and the "next video" wrapper (.next-article-wrapper) which reuses the same dark theme via .VideoContent.nextVideoContent. ------------------------------------------------------------------------- */ .VideoDetailMain, .next-article-wrapper, .VideoDetailMain .VideoContent, .next-article-wrapper .VideoContent, .VideoDetailMain .videoSliderBox, .next-article-wrapper .videoSliderBox, .VideoDetailMain .videoItem, .next-article-wrapper .videoItem, .VideoDetailMain .videoDescription, .next-article-wrapper .videoDescription, .VideoDetailMain .video-socialBx, .next-article-wrapper .video-socialBx, .VideoDetailMain .topicListBox, .next-article-wrapper .topicListBox, .VideoDetailMain .caption, .next-article-wrapper .caption { background: #fff !important; background-color: #fff !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } .VideoDetailMain, .next-article-wrapper { margin-top: 0 !important; } .VideoDetailMain .VideoContent, .next-article-wrapper .VideoContent { padding: 0 !important; } /* When the iframe is suppressed, collapse the empty wrapper. */ .VideoDetailMain .videoFrame:not(.videoFrame--placeholder), .next-article-wrapper .videoFrame:not(.videoFrame--placeholder) { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .VideoDetailMain .videoItem h1, .next-article-wrapper .videoItem h1, .VideoDetailMain .scroll-title, .next-article-wrapper .scroll-title, .VideoDetailMain .scroll-title a, .next-article-wrapper .scroll-title a, .VideoDetailMain .caption h2, .next-article-wrapper .caption h2, .VideoDetailMain .videoDescription, .next-article-wrapper .videoDescription, .VideoDetailMain .videoDescription p, .next-article-wrapper .videoDescription p, .VideoDetailMain .videoDescription h2, .next-article-wrapper .videoDescription h2, .VideoDetailMain .videoDescription h3, .next-article-wrapper .videoDescription h3, .VideoDetailMain .videoDescription h4, .next-article-wrapper .videoDescription h4, .VideoDetailMain .videoDescription h5, .next-article-wrapper .videoDescription h5, .VideoDetailMain .videoDescription h6, .next-article-wrapper .videoDescription h6, .VideoDetailMain .videoDescription ul, .next-article-wrapper .videoDescription ul, .VideoDetailMain .videoDescription ul li, .next-article-wrapper .videoDescription ul li, .VideoDetailMain .videoDescription ol, .next-article-wrapper .videoDescription ol, .VideoDetailMain .videoDescription ol li, .next-article-wrapper .videoDescription ol li, .VideoDetailMain .videoDescription a, .next-article-wrapper .videoDescription a, .VideoDetailMain .video-socialBx .story-reportr .rp-det, .next-article-wrapper .video-socialBx .story-reportr .rp-det, .VideoDetailMain .video-socialBx .story-reportr .meta-info, .next-article-wrapper .video-socialBx .story-reportr .meta-info, .VideoDetailMain .video-socialBx .story-reportr .rp-det .repo-name, .next-article-wrapper .video-socialBx .story-reportr .rp-det .repo-name, .VideoDetailMain .topicListBox, .next-article-wrapper .topicListBox, .VideoDetailMain .topicListBox .tpHead, .next-article-wrapper .topicListBox .tpHead, .VideoDetailMain .topicListBox a, .next-article-wrapper .topicListBox a { color: #000 !important; -webkit-text-fill-color: #000 !important; } .VideoDetailMain .caption, .next-article-wrapper .caption { border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important; padding: 6px 0 !important; margin: 8px 0 !important; } .VideoDetailMain .topicListBox, .next-article-wrapper .topicListBox { margin-top: 14px !important; padding-top: 8px !important; border-top: 1px solid #ccc !important; } .VideoDetailMain .topicListBox ul, .next-article-wrapper .topicListBox ul { list-style: none !important; padding: 0 !important; margin: 6px 0 0 0 !important; } .VideoDetailMain .topicListBox ul li, .next-article-wrapper .topicListBox ul li { display: inline-block !important; margin: 0 8px 4px 0 !important; font-size: 10pt !important; } /* Stand-in poster: print the video thumbnail (if present) instead of the black iframe area. Also kill any oEmbed-injected backgrounds. */ .VideoDetailMain .videoFrame--placeholder, .next-article-wrapper .videoFrame--placeholder { display: block !important; background: #fff !important; border-radius: 0 !important; margin: 0 0 12px 0 !important; } .VideoDetailMain .videoFrame--placeholder img, .next-article-wrapper .videoFrame--placeholder img, .VideoDetailMain .videoFrame--placeholder picture img, .next-article-wrapper .videoFrame--placeholder picture img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; background: #fff !important; }