/* ============================================================================ print.css — the paper build. ---------------------------------------------------------------------------- Two audiences, one layout: @media print the PDF that pdf.php renders through headless Chrome, and anyone who hits Ctrl+P on the ordinary screen report. body.pm ?print=1, the on-screen preview of that same layout. Chrome renders the PDF from this URL, so the two must not diverge. Loaded after report-v2.css so equal-specificity rules win. Nothing in here applies to the ordinary screen report except inside @media print, which is inert until something actually prints. The screen report is built for scrolling: full-viewport bands, reveal-on- scroll, virtualised lists, hover affordances. Every one of those assumptions is wrong on a fixed-height page, and this file unwinds them. ========================================================================== */ /* --------------------------------------------------------------------------- PAGE BOX A4 rather than Letter: it is the narrower of the two, so a layout that fits A4 also fits Letter, but not the reverse. ------------------------------------------------------------------------- */ @page { size: A4; /* Chrome cannot render @page margin boxes, so there is no running header to leave room for — these are pure whitespace. */ margin: 13mm 12mm 14mm; } /* The cover bleeds to the sheet edge, so it gets no page margin and supplies its own padding instead. Without this the dark field stops short of the trim on all four sides and reads as a large grey rectangle on white. */ @page :first { margin: 0; } @media print { /* --- global ------------------------------------------------------------ */ html, body { background: #fff !important; /* Screen type is sized against the viewport via clamp(); on paper the viewport is the page, which drives everything to its lower bound. A fixed base restores a sane hierarchy. */ font-size: 10.5pt !important; } /* Backgrounds are load-bearing here: the dark bands carry the headline figures, and the authority bars encode a value in their fill. */ .report, .band, .hero, .reach, .foot, .band.dark, .tint-violet, .bstat, .callout, .fcard, .ocard, .stkcard, .trafbars, .aicard, .rchip, .oc-fill, .tr-fill, .put-mini i { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Full-viewport bands become page-height bands, which is how a 17-page report ends up with two near-empty pages. */ .band, .hero, .reach { min-height: 0 !important; padding-block: 9mm !important; } .inner { max-width: none !important; padding-inline: 0 !important; } /* --- things that only make sense on a screen --------------------------- */ .fab, .export-wrap, .mh-actions .btn, .mh-actions .report-tag, .pub-toolbar, .tc-head .controls, .searchbox, .filters, .sortsel, .viewtoggle, .linkbtn, .tbl-foot, .pub-foot, .btn-coral, .pkg-cta, .aie-cta, .reveal-writer, .oc-visit, .fc-ext, .stk-cta, .aic-check, .rt-search-go, .as-more, /* Portalled to , so they sit outside every section. */ .tip, .social-menu, .export-menu, .tb-multi-pop, .stat-btn .stat-lab, /* Explicitly out of the PDF, per the report brief. Print mode drops these server-side too; this covers Ctrl+P on the ordinary screen report. */ #badge, #review, /* Intercom is fixed-position, so Chrome repeats it on every single page. */ #intercom-frame, #intercom-container, .intercom-app, .intercom-namespace, .intercom-css-container, .intercom-lightweight-app, .intercom-button { display: none !important; } /* Links print as plain text — the report is link-rich and URL footnotes after every outlet name would double its length. */ a[href]:after { content: "" !important; } a { text-decoration: none !important; color: inherit !important; } /* Nothing animates on paper; make sure nothing is captured mid-transition. */ *, *::before, *::after { transition: none !important; animation: none !important; } .reveal-up, .fade-words .fw, .ai-list .aicard, .pubgrid .ocard, .pubtable .put-row { opacity: 1 !important; transform: none !important; filter: none !important; } /* --- pagination -------------------------------------------------------- */ /* A heading stranded at the foot of a page was the single most common defect in the old output — four of seventeen pages ended on one. */ .sec-head, .kicker, .sec-title, .lede, .tc-head, .put-head, .rt-head { break-after: avoid !important; page-break-after: avoid !important; } .sec-head { break-inside: avoid !important; } /* Small, self-contained blocks should never be split... */ .bstat, .callout, .fcard, .ocard, .stkcard, .pkg-card, .aiv-card, .diversity-note, .disc-card, .ministat, .trafrow, .rt-row, .put-row, .aicard, .reach-num, .sa-item { break-inside: avoid !important; page-break-inside: avoid !important; } /* ...but their containers must be free to break, or a container that cannot fit in the remaining space jumps wholesale to the next page and leaves the rest of the current one blank. That is what produced the empty page 8 and the near-empty page 12. */ .band, .inner, .tablecard, .rtable, .pubgrid, .pubtable, .ai-list, .feat-grid, .bigstats, .rank-hero, .note-pair, .reach-figures, .trafbars { break-inside: auto !important; page-break-inside: auto !important; } /* Orphan and widow control for running text. */ p, li { orphans: 3; widows: 3; } /* --- cover page -------------------------------------------------------- */ /* The hero is the cover: it gets the page to itself, and the dark field fills it rather than stopping two-thirds down. */ .hero { break-after: page !important; page-break-after: always !important; /* @page :first drops the margin, so 100vh here is the full sheet. */ min-height: 100vh !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 20mm 16mm !important; } .hero .masthead { margin-bottom: 10mm !important; } .hero-name { font-size: 44pt !important; line-height: 1.02 !important; } .hero-lede { font-size: 12pt !important; max-width: 46em !important; } .hero-grid { display: block !important; } .hero-rail { margin-top: 8mm !important; } /* .s3 and .s2 are the decorative shells stacked behind the real card, and they come FIRST in the DOM — so :not(:first-child) hid the actual publication and kept an empty outline lying across the "as seen on" row. Target the shells by name instead. */ .card-stack .stk.s2, .card-stack .stk.s3 { display: none !important; } .card-stack .stk.s1 { position: static !important; transform: none !important; } .stk-img { max-height: 50mm !important; object-fit: cover !important; } /* --- results ----------------------------------------------------------- */ /* .bigstats is a 12-column grid whose cards carry span-6 / span-4. Replacing the track list with two columns left those spans overflowing into implicit columns, which is what pushed the cards into a half-width stack and split them over two pages. Keep the grid; only tighten it. */ .bigstats { gap: 4mm !important; margin-top: 6mm !important; } .bstat { padding: 5mm !important; } .bs-num { font-size: 24pt !important; } .bs-go, .bs-glow { display: none !important; } /* The whole glance section is one idea; keep it on one page. */ #results .inner { break-inside: avoid !important; } .ministats { grid-template-columns: repeat(4, 1fr) !important; gap: 4mm !important; } /* --- story / press release --------------------------------------------- */ /* This card was splitting across pages 3 and 4, so the release headline sat on one page and its byline on the next. */ .story-clip, .story-lead, .story-aside { break-inside: avoid !important; } .sc-headline { font-size: 17pt !important; } /* --- featured outlets --------------------------------------------------- */ .feat-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4mm !important; } .fcard { padding: 5mm !important; } .fc-metrics { gap: 3mm !important; } /* --- reach -------------------------------------------------------------- */ /* Skia paints the gradient as a filled box rather than clipping it to the glyphs, so the headline figure printed as a white slab. Solid fill instead. */ .reach-mega { font-size: 40pt !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #fff !important; color: #fff !important; } .reach-figures { display: grid !important; grid-template-columns: 1fr 1.15fr !important; gap: 7mm !important; align-items: start !important; } .reach-nums { display: grid !important; gap: 5mm !important; } /* --- rankings ----------------------------------------------------------- */ /* The donut sat alone above three callouts, which is why page 7 was mostly white. Side by side they fill one band. */ .rank-hero { display: grid !important; grid-template-columns: 62mm 1fr !important; gap: 8mm !important; align-items: center !important; } .donut-wrap { margin: 0 !important; } .donut-svg-wrap { width: 58mm !important; height: 58mm !important; } .donut-legend { gap: 2mm !important; flex-wrap: wrap !important; } .dl { border: 0 !important; padding: 0 2mm 0 0 !important; } .rank-callouts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm !important; } .callout { padding: 5mm !important; } .callout.wide { grid-column: 1 / -1 !important; } .co-num { font-size: 22pt !important; } .note-pair { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm !important; } /* The rankings table is long by nature and must flow across pages. */ .tablecard { padding: 0 !important; border: 0 !important; box-shadow: none !important; } /* Screen rows are sized for a comfortable tap target; on paper that is ten rows to a page for what is one line of information each. */ .rt-row { padding: 2mm 3mm !important; gap: 4mm !important; } .rt-search { padding: 1.2mm 2.5mm !important; box-shadow: none !important; } .rt-pub-dom { display: none !important; } /* --- AI overview -------------------------------------------------------- */ .ai-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm !important; /* Keep the citations with the "N appearances captured" line that counts them, rather than stranding the heading on the previous page. */ break-before: avoid !important; page-break-before: avoid !important; } .ai-callouts, .ai-summary { break-after: avoid !important; page-break-after: avoid !important; } .ai-dist { break-inside: avoid !important; page-break-inside: avoid !important; opacity:1 !important; transform:none !important; } .ai-dist-bar-fill{ transform:none !important; transition:none !important; } .aicard { padding: 5mm !important; } .aicard .aim-answer{ min-height: 0 !important; max-height: none !important; overflow: visible !important; } .aic-prompt-chat .aic-prompt-q{ -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; } .aim-cap { display: none !important; } /* This caveat belongs to the citations above it, not to whatever section starts the next page. */ .disc-note { break-before: avoid !important; page-break-before: avoid !important; } /* --- footer ------------------------------------------------------------- */ /* Let the footer share the last page of the table when it fits, instead of claiming a sheet of its own. */ .foot { padding-block: 7mm !important; break-inside: avoid !important; break-before: avoid !important; page-break-before: avoid !important; } .foot-links { display: none !important; } .foot-bar { padding-top: 4mm !important; } } /* ============================================================================ PAPER BUILD (?print=1) Applies on screen as well as in print, so the preview the customer sees and the PDF Chrome renders from that same URL cannot drift apart. ========================================================================== */ body.pm { background: #fff; } /* Nothing here is clickable, so nothing should look clickable. */ body.pm .export-wrap, body.pm .mh-actions .btn, body.pm .pub-toolbar, body.pm .tc-head .controls, body.pm .tbl-foot, body.pm .pub-foot, body.pm .fab, body.pm .linkbtn, body.pm .oc-visit, body.pm .stk-cta, body.pm .aic-check { display: none !important; } body.pm .aicard { cursor: default; } /* Approximate the page width so the preview paginates roughly the way the PDF will. Screen only — constraining this in print made the content box wider than A4's 186mm printable width, which squeezed every grid on the page into the left half and overflowed the rest off the sheet. */ @media screen { body.pm .report { max-width: 190mm; margin-inline: auto; } } /* --------------------------------------------------------------------------- OUTLET TABLE — paper only (PrintPublications) 414 outlets as cards runs past fifty pages; as rows it is about twelve. ------------------------------------------------------------------------- */ .ptbl { width: 100%; border-collapse: collapse; font-size: 8.6pt; line-height: 1.25; margin-top: 6mm; font-variant-numeric: tabular-nums; /* Fixed layout, or the auto algorithm hands most of the width to whichever outlet happens to have the longest name and wraps every domain to three lines, tripling the height of the table. */ table-layout: fixed; } /* Only the first row's widths are consulted under fixed layout; the four numeric columns and Country share what is left. */ .ptbl .pt-i { width: 5%; } .ptbl .pt-o { width: 23%; } .ptbl .pt-d { width: 22%; } .ptbl thead { /* Repeats the column headings at the top of every page the table spans — the reason this is a real and not the grid the card view uses. */ display: table-header-group; } .ptbl thead th { text-align: left; font-size: 7.4pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500, #6b7280); border-bottom: 1.2px solid var(--n-300, #d1d5db); padding: 0 2mm 2mm 0; white-space: nowrap; } .ptbl tbody tr { break-inside: avoid; page-break-inside: avoid; } /* Banding survives photocopying better than hairlines do. */ .ptbl tbody tr:nth-child(even) { background: #f6f7fb; } .ptbl td { padding: 1.5mm 2mm 1.5mm 0; border-bottom: .4px solid var(--n-200, #e5e7eb); vertical-align: baseline; } .ptbl .pt-i { color: var(--n-400, #9ca3af); font-size: 7.6pt; } .ptbl .pt-o { font-weight: 700; color: var(--ink, #10122b); overflow-wrap: break-word; } /* break-word, not break-all: a domain should wrap at the dot rather than mid label, and only when it genuinely cannot fit. */ .ptbl .pt-d { color: var(--n-500, #6b7280); font-size: 7.8pt; overflow-wrap: break-word; } .ptbl .pt-n { text-align: right; white-space: nowrap; } .ptbl .pt-c { color: var(--n-600, #4b5563); overflow-wrap: break-word; } .ptbl-foot { margin-top: 4mm; font-size: 8pt; color: var(--n-500, #6b7280); break-inside: avoid; } @media print { .pubprint .ptbl { margin-top: 4mm; } /* The table is the section; let it start on the page the heading is on. */ .pubprint { break-before: auto !important; } }