/* Hawaii Guide — blog-post print stylesheet * * Scoped to @media print only — zero effect on screen rendering. * Loaded from _layouts/blog-post-blocks.html via a Liquid-busted ?v=. * * Goal: readers hit Cmd+P on a blog post and get a clean, typographic * article — title + byline + hero image + body — without the site * chrome, share icons, sticky install banners, ads, chevrons, sidebar, * newsletter signups, or related-items tile grids that clutter the * on-screen view. */ @media print { /* ---------- Page setup ---------- */ @page { size: letter; margin: 0.55in 0.5in 0.6in; } /* Defensive: Raptive/Adthrive asynchronously adds a `data-gg-moat` * attribute to (Oracle Moat ad verification tag). Their inline * print sheet then matches `body[data-gg-moat]` and sets * `display:none !important`, which wipes the article on Cmd+P. * We force body + html visible with higher-specificity selectors + * !important so readers actually see the article when they print. * Without this, printing flashes the rendered page for a split * second, then goes blank as soon as the moat tag lands on body. */ html, html body, html body[data-gg-moat], html body.blog-body, html body.cover-page, html body.adthrive-device-tablet, html body.adthrive-device-mobile, html body.adthrive-device-phone, html body.adthrive-device-desktop { display: block !important; visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; position: static !important; background: #fff !important; color: #000 !important; font-size: 11pt !important; line-height: 1.5 !important; } /* ---------- Hide site chrome ---------- */ .goUS-header, .menu-bg, .site-header, #sticky-header, .footer, .footer-bg, footer, .cd-main-content > header, .cd-main-content > footer { display: none !important; } /* ---------- Hide blog-layout extras ---------- */ /* Site-wide weather/volcano alert banner (prints as a distracting colored strip) */ .alert, .wrapper-min.text-center .alert { display: none !important; } /* Affiliate-disclosure pill above the action bar + bottom affiliate block */ section.content > div[data-no-autoads] .wrapper-sides > p.text-center[style*="font-size:14px"], section.mt20.bottom .terms-border-off { display: none !important; } /* "< BLOG" back button + entire action bar row (also kills share icons below) */ .text-right.clearfix { display: none !important; } /* Social share icons (generated by page-meta-share-v1.js and social-share.html) */ .pm-share, .social-share-bar, .social-share-inner, .social-share-buttons { display: none !important; } /* Scroll-down chevron between hero and first paragraph */ .scroll-indicator { display: none !important; } /* Wave SVG under the hero */ .wave { display: none !important; } /* Sidebar column */ .aside, .sidebar, aside.aside { display: none !important; } .sidebar-layout, .sidebar-main-col { display: block !important; width: 100% !important; float: none !important; } .has-sidebar-grid { grid-template-columns: 1fr !important; } /* ---------- Hide ads / commerce / popups ---------- */ .hgads-light, .hgads-dark, .adthr-content, .adthrive-ad, .adthrive-ad-anchor, .adthrive-footer, [class*="adthrive"], [class*="adsbygoogle"], ins.adsbygoogle, [id*="adhesion"] { display: none !important; } /* Feedback shaka FAB + corrections link + mobile email bar + PWA install banner */ .hg-feedback-fab, #hg-feedback-fab, .hg-corrections-link, #hg-corrections-link, #mobile-email-bar, .mobile-email-bar, .hg-tab-bar, #hg-pwa-banner, [id^="hg-pwa-"], #free-guide-modal, .free-guide-modal, #newsletter-modal, .modal, .modal-backdrop { display: none !important; } /* ---------- Hide inline promos inside the article column ---------- */ /* Drip newsletter signup, "Plan Smarter with Our Quizzes" card, category/island tag chips */ #blog-newsletter, .no-ad-inject, .tags-container, .sidebar-main-col > .wrapper-sides.clearfix.clear.mt20.mb10 { display: none !important; } /* ---------- Hero: collapse overlay; show image cleanly beneath the print title ---------- */ /* Hide the overlay title box + byline + decorative scrim */ .hero-title-overlay-box, .hero-overlay-byline, .hero-clean-subtitle, .solo-entry-text { display: none !important; } .image-container-main::after { display: none !important; } /* Wake up the sr-only H1 that the layout emits for SEO — this becomes the visible print title */ .sr-only[itemprop="headline"], h1.sr-only { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; margin: 0 0 6pt !important; padding: 0.2in 0.5in 0 !important; font-family: 'brother-1816-printed', 'Proxima', Helvetica, Arial, sans-serif; font-size: 28pt !important; line-height: 1.15 !important; font-weight: 700; color: #000 !important; page-break-after: avoid; break-after: avoid; } /* Un-sr-only the inline article-header (pages without featured_image land here) */ .article-header.clearfix.pt10 { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; margin: 0 0 6pt !important; padding: 0.2in 0.5in 0 !important; } .article-header .entry-title { font-size: 28pt !important; line-height: 1.15 !important; color: #000 !important; text-transform: none !important; } /* Print-only byline (author + date) — markup lives in the layout with * class .print-only-byline and `display:none` on screen, revealed here. */ .print-only-byline { display: block !important; padding: 0 0.5in 10pt !important; margin: 0 !important; font-family: 'Proxima', Helvetica, Arial, sans-serif !important; font-size: 10pt !important; color: #555 !important; font-style: italic !important; page-break-after: avoid; break-after: avoid; } .print-only-byline a { color: #555 !important; border: none !important; } .print-only-byline a::after { content: "" !important; } /* Hero image: clean full-width photo beneath the title */ #hawaii-top { margin: 0 !important; padding: 0 !important; } .hero-top, .single-slide-top, .bg-image-top, .image-container-main { margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: none !important; aspect-ratio: auto !important; height: auto !important; overflow: visible !important; page-break-inside: avoid; break-inside: avoid; } .image-container-main .hero-img, img.hero-img { display: block !important; width: 100% !important; max-height: 3.2in !important; height: auto !important; object-fit: cover !important; object-position: center center !important; margin: 0 0 12pt !important; border-radius: 0 !important; page-break-after: avoid; break-after: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ---------- Article body ---------- */ /* Neutralize site's large on-screen font sizes. Site sets html {62.5%} so * 1rem=10px and body text is 23px — that's too big for print. */ section.content, article.article-blocks, .article-content, .article-content p, .article-content li, .article-content ul, .article-content ol { font-size: 11pt !important; line-height: 1.5 !important; color: #222 !important; } .article-content { max-width: none !important; padding: 0 !important; margin: 0 !important; } /* Headings inside blocks */ .article-content h2, .heading-block h2 { font-family: 'brother-1816-printed', 'Proxima', Helvetica, Arial, sans-serif !important; font-size: 21pt !important; line-height: 1.2 !important; font-weight: 700 !important; color: #000 !important; margin: 22pt 0 6pt !important; padding-bottom: 4pt !important; border-bottom: 1px solid #000 !important; page-break-after: avoid; break-after: avoid; } .article-content h3, .heading-block h3 { font-family: 'brother-1816-printed', 'Proxima', Helvetica, Arial, sans-serif !important; font-size: 15pt !important; font-weight: 700 !important; color: #222 !important; margin: 14pt 0 5pt !important; page-break-after: avoid; break-after: avoid; } .article-content h4, .heading-block h4 { font-family: 'brother-1816-printed', 'Proxima', Helvetica, Arial, sans-serif !important; font-size: 13pt !important; font-weight: 700 !important; margin: 10pt 0 4pt !important; page-break-after: avoid; break-after: avoid; } /* Heading block include wraps its h2 in its own container — match the rest */ .heading-block, .heading-block-wrap { page-break-after: avoid; break-after: avoid; } /* Dotted dividers look noisy in print */ .dotted-line, .dashed-line, .single-line { display: none !important; } /* Keep images + captions together */ .article-content img, .image-block img, .content-image-block img { max-width: 100% !important; max-height: 3.5in !important; height: auto !important; page-break-inside: avoid; break-inside: avoid; border-radius: 0 !important; } .caption-left, .caption-right, .caption-center, .caption-center-half { width: auto !important; float: none !important; margin: 4pt 0 10pt !important; padding: 0 !important; font-size: 9pt !important; text-align: left !important; page-break-before: avoid; } /* Blockquotes, callouts, CTA boxes — strip heavy backgrounds but keep content */ blockquote, .quoteblock, .cta-box, .cta-block, .cta-blocks { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; padding: 10pt !important; page-break-inside: avoid; break-inside: avoid; } /* Tables */ table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; } thead { display: table-header-group; } /* Hide video embeds — nothing meaningful to print */ iframe, .embed-video, .video-block, .video-embed { display: none !important; } /* ---------- Related items: keep as a plain text list, not a tile grid ---------- */ .related-items-section { page-break-inside: avoid; break-inside: avoid; padding: 0 !important; margin: 14pt 0 0 !important; } .related-items-section h3 { font-size: 14pt !important; color: #000 !important; margin: 0 0 6pt !important; } .related-items-section > div[style*="grid"] { display: block !important; grid-template-columns: none !important; gap: 0 !important; } /* Convert each tile wrapper and card to a plain block, hide image/meta */ .related-items-section > div[style*="grid"] > div, .related-items-section .related-item-card { display: block !important; border: none !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; overflow: visible !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .related-items-section .related-item-card a { display: list-item !important; list-style: disc inside !important; margin: 2pt 0 !important; padding: 0 0 0 14pt !important; color: #000 !important; border: none !important; } .related-items-section .related-item-card a::after { content: "" !important; } .related-items-section .related-item-card a > div[style*="padding"] { display: inline !important; padding: 0 !important; } .related-items-section .related-item-card h4 { display: inline !important; font-size: 11pt !important; font-weight: 400 !important; color: #000 !important; margin: 0 !important; } .related-items-section .related-item-card p { display: none !important; } .related-items-section img, .related-items-section .related-item-card > div > a > div:first-child { display: none !important; } /* ---------- Bottom section (article published date + affiliate bar) ---------- */ /* Affiliate block is already hidden above; keep the date line, simplified. */ section.mt20.bottom { margin-top: 14pt !important; padding: 0 !important; border-top: 1px solid #ccc; } section.mt20.bottom p { font-size: 9pt !important; color: #666 !important; margin: 6pt 0 0 !important; } /* ---------- Links: print external URLs in parens ---------- */ a, a:link, a:visited { color: #000 !important; text-decoration: none !important; border-bottom: none !important; } .article-content p a, .article-content ul a, .article-content ol a { color: #000 !important; border-bottom: 1px solid #999 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.78em; color: #666; word-break: break-all; font-weight: normal; } /* Skip the URL suffix on in-page and utility links */ a[href^="#"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="/"]::after { content: ""; } /* Skip the external-link icon inserted by the main stylesheet */ .article-content p a[target="_blank"]:not(.button):not(.btn):not(.noicon)::after, .article-content ul a[target="_blank"]:not(.button):not(.btn):not(.noicon)::after, .article-content ol a[target="_blank"]:not(.button):not(.btn):not(.noicon)::after { font-family: inherit !important; content: " (" attr(href) ")" !important; font-size: 0.78em !important; padding: 0 !important; color: #666 !important; vertical-align: baseline !important; } /* ---------- Print margins / widow-orphan hygiene ---------- */ p, li { orphans: 3; widows: 3; } }