@charset "UTF-8"; /* ========================================================================== INTEL FOCUS — PRINT Loaded with media="print". The theme ships no print styles at all, so an investigation printed or saved to PDF came out as a dark-grey screenshot of a website: navigation bar, share rail, cookie banner, footer, and body copy at 66% white on charcoal. What a printed investigation has to do is different from what the screen does. It has to be readable in one colour, keep a figure with its caption, keep a heading with the paragraph it introduces, spell out where a link went, and say where it came from and when it was taken — because a printed report is evidence too, and it is read away from the page it was taken from. ========================================================================== */ /* The whole design is already expressed through tokens, so re-pointing the tokens re-renders the page for paper rather than restating every rule. Both data-theme variants are listed so a reader in dark mode prints the same sheet as a reader in light mode. */ :root, html[data-theme="dark"], html[data-theme="light"] { --bg: #ffffff; --bg-elevated: #ffffff; --bg-card: #ffffff; --text: #000000; --text-dim: #1a1a1a; --text-faint: #4a4a4a; --border: #cccccc; --border-strong: #999999; --accent: #1a2f9e; --if-link: #1a2f9e; --if-red: #7a1c1b; --accent-soft: transparent; --accent-glow: transparent; --shadow: none; --if-shadow-rest: none; --if-shadow-lift: none; color-scheme: light; } @page { margin: 18mm 16mm 20mm; } html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; line-height: 1.5; } /* Screen furniture. None of it is content, and several pieces are fixed, which in print means they reprint on every page. */ .nav, .mobile-nav, .mobile-nav-backdrop, .search-overlay, .network-bg, .hero-orb, .hero-scroll-cue, .hero-globe, .reading-progress, .if-progress, .if-rail, .if-skip, .case-toc, .share-row, .case-share-footer, .selection-toolbar, .case-modal, .case-modal-backdrop, .image-lightbox, .consent-bar, .consent-modal, .related-band, .ep-related, .newsletter-form, .pantheon-divider, .footer-social, .archive-toolbar, .archive-pagination, footer, .content-evidence-zoom, .evidence-corner { display: none !important; } /* The page's own masthead, and the provenance line the plugin's script stamps onto at load. attr() is the only way a stylesheet can print the URL of the page it is printing. */ body::before { content: "INTEL FOCUS · intelfocus.org"; display: block; font-size: 8pt; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #000; border-bottom: 1.5pt solid #000; padding-bottom: 3mm; margin-bottom: 8mm; } body[data-ifr-source]::after { content: attr(data-ifr-source); display: block; margin-top: 10mm; padding-top: 3mm; border-top: 0.5pt solid #999; font-size: 8pt; color: #4a4a4a; word-break: break-word; } /* Layout. The article is the page. */ #page-content { position: static; } .case-header, .ep-header, .page-hero { padding: 0 0 6mm !important; border-bottom: 0.5pt solid #999; background: none !important; } .case-header-grid, .ep-header-inner { display: block; } .case-body-wrap, .page-body-wrap { padding: 6mm 0 0 !important; } .case-layout { display: block; } .wrap { max-width: none; padding: 0; } .case-content, .page-prose { max-width: none; font-size: 10.5pt; line-height: 1.55; color: #000; } .case-title, .ep-title, .page-title { font-size: 22pt; line-height: 1.15; } .case-content h2 { font-size: 14pt; margin: 8mm 0 3mm; } .case-content h3 { font-size: 12pt; margin: 6mm 0 2mm; } .case-content h4 { font-size: 9.5pt; margin: 6mm 0 2mm; color: #000; } .case-content h2, .case-content h3, .case-content h4, .case-title, .ep-title { break-after: avoid; page-break-after: avoid; } /* A figure separated from its caption is a different claim. */ figure, .content-evidence, .evidence-frame, blockquote, table, .case-dossier, .case-verify-footer { break-inside: avoid; page-break-inside: avoid; } .content-evidence, .evidence-frame { border: 0.5pt solid #999; box-shadow: none; max-height: none; } .content-evidence img, .evidence-frame img, .case-content img { max-height: 110mm; object-fit: contain; } figcaption, .content-evidence figcaption, .case-content figcaption { font-size: 8.5pt; color: #4a4a4a; border-top: 0.5pt solid #ccc; background: none; } blockquote, .case-content blockquote { background: none; border-left: 1pt solid #000; border-radius: 0; font-size: 11pt; padding: 0 0 0 5mm; } .case-content blockquote::before { content: none; } /* Where a link went, written out once, so a printed claim can still be checked. Anchors within the page and links whose text is already the URL are skipped. */ .case-content a[href^="http"]::after, .page-prose a[href^="http"]::after { content: " <" attr(href) ">"; font-size: 8pt; color: #4a4a4a; word-break: break-all; } .case-content a, .page-prose a { color: #000; text-decoration: underline; } /* The dossier strip and the verification note both survive: they are the provenance of the document. */ .case-dossier { border: 0.5pt solid #999; border-radius: 0; background: none; padding: 3mm 4mm; } .case-verify-footer { border: 0.5pt solid #999; border-radius: 0; background: none; padding: 4mm; } /* The category stamp keeps its screen colours through both themes — pale blue on pale blue in dark mode, which on white paper is nearly nothing. On paper it is a label, so it is set as one. */ .tag, .case-stamp, .ep-stamp { background: none !important; color: #000 !important; border: 0.5pt solid #666 !important; border-radius: 0; box-shadow: none; position: static; display: inline-block; padding: 1mm 2mm; } /* Figures the theme highlights on screen are plain ink on paper. */ .stat-pop { font-weight: inherit; color: #000; border: 0; background: none; } /* Nothing may arrive animated or hidden on paper. */ .reveal, .flow-reveal, .hero-line > span { opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; transition: none !important; }