/**!
* Print / "Save as PDF" stylesheet
*
* Loaded from templates/_layout.twig with media="print".
*
* Written as plain CSS on purpose: siteroot/assets/css/app.css is a
* precompiled Tailwind build, so Tailwind's `print:` variant is not available
* without re-running the Mix build. Everything here is hand-written so it can
* be edited without a front-end build step.
*/
@page {
/* Letter at these margins leaves a ~653px layout width, which still clears
Tailwind's sm: breakpoint (640px). Going much wider flips the sm:
utilities off and changes the layout. */
margin: 0.5in 0.85in 0.6in;
}
/* ------------------------------------------------------------------
1. Page basics
------------------------------------------------------------------ */
html,
body {
background: #fff !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
}
body {
font-size: 11pt;
line-height: 1.45;
}
/* Make the browser honour the colours we do keep (photos, red link text) even
when its "Background graphics" option is switched off. */
*,
*::before,
*::after {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Print on plain white: no tinted section bands, no filled cards, no navy
buttons. Several of these are inline styles from the CMS colour pickers, so
the longhand !important is what overrides them. Content images are ![]()
/
elements, not backgrounds, so they are untouched. */
main,
main *:not(svg):not(svg *) {
background-color: transparent !important;
background-image: none !important;
}
/* White text and white icon fills only worked against those backgrounds. The
hero is the exception - its caption sits over a photo that still prints. */
main :not(section[role="banner"]) [class*="text-white"],
main :not(section[role="banner"]) [class*="text-white"] * {
color: #09233e !important;
}
main :not(section[role="banner"]) [class*="fill-white"] {
fill: #09233e !important;
}
/* Filled CTA buttons lose their shape along with their background, so outline
them instead. */
main a[class*="inline-flex"][class*="bg-"] {
border: 1px solid #09233e !important;
border-radius: 3px;
padding: 0.35rem 0.8rem !important;
gap: 0.5rem !important;
color: #09233e !important;
}
/* 100vw-based widths and the full-bleed negative margins used by the sliders
overflow the paper box. */
.w-screen,
.max-w-screen {
width: 100% !important;
max-width: 100% !important;
}
[class*="mr-[calc"] {
margin-right: 0 !important;
}
[class*="ml-[calc"] {
margin-left: 0 !important;
}
/* ------------------------------------------------------------------
2. Site furniture we don't want on paper
------------------------------------------------------------------ */
.skip-main,
header nav,
header button,
header form,
footer,
.print-hide,
.swiper-pagination,
.swiper-button-next,
.swiper-button-prev,
[class*="swiper-navigation-"],
[class*="swiper-button-next-"],
[class*="swiper-button-prev-"] {
display: none !important;
}
/* …but keep the logo as a masthead. */
header {
box-shadow: none !important;
border: 0 !important;
}
.print-logo {
display: flex !important;
}
.print-logo img {
height: 38px !important;
width: auto !important;
max-height: none !important;
}
/* Elements that only exist for the printed version. */
.print-only {
display: block !important;
}
/* ------------------------------------------------------------------
3. Reveal content that is interactive on screen
------------------------------------------------------------------ */
/* Alpine sets an inline `display: none` via x-show; an !important author rule
beats a non-important inline style, so these panels come back for print. */
.tab-panel,
.accordion-body {
display: block !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
.tab-panel {
margin-bottom: 1rem;
break-inside: avoid;
page-break-inside: avoid;
}
/* The tab content wrapper reserves vertical space for a single panel. */
.tab-panels {
min-height: 0 !important;
}
/* Label each panel with the text of the tab button that reveals it on screen.
Styled here rather than with Tailwind utilities because app.css is a
precompiled build. */
.tab-print-title {
margin: 0 0 1rem;
padding-left: 0.75rem;
border-left: 6px solid #092340;
color: #09233e;
font-size: 16pt;
font-weight: 500;
line-height: 1.2;
}
/* Swipers: unroll every slide into a simple two-up grid. */
.swiper {
overflow: visible !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.swiper-wrapper {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: 1.1rem;
transform: none !important;
width: auto !important;
height: auto !important;
}
.swiper-slide {
width: auto !important;
max-width: none !important;
margin: 0 !important;
break-inside: avoid;
page-break-inside: avoid;
}
/* Swiper's `loop: true` clones slides; the clones would print as duplicates. */
.swiper-slide-duplicate {
display: none !important;
}
/* columnSlider renders two markup variants of the same cards: the desktop one
skips the first card because threeColumnSlider features it above, the mobile
one carries the full set because that feature card is desktop-only. Pin the
print layout to the desktop pairing so nothing is duplicated or dropped,
whatever width the paper works out to. */
.print-block {
display: block !important;
}
.slider-desktop {
display: block !important;
}
.slider-mobile {
display: none !important;
}
/* ------------------------------------------------------------------
4. Links
------------------------------------------------------------------ */
/* Chrome's "Save as PDF" turns every real into a clickable
annotation, so the destination is not spelled out in the text - links just
need to look like links. Note the trade-off: on an actual paper printout,
or in a PDF made by a browser that drops link annotations, the destination
is no longer recoverable. */
main a[href] {
text-decoration: underline;
}
/* ------------------------------------------------------------------
5. Pagination hygiene
------------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
break-after: avoid-page;
page-break-after: avoid;
break-inside: avoid;
page-break-inside: avoid;
}
p,
li,
blockquote {
orphans: 3;
widows: 3;
}
img,
picture,
figure,
table,
blockquote {
break-inside: avoid;
page-break-inside: avoid;
}
/* NB: no `height: auto` here - hero/card images rely on Tailwind's h-full +
object-cover, and forcing auto height collapses them to their alt text. */
img {
max-width: 100% !important;
}
/* The hero is decorative; a half-page lead image on every print is wasteful. */
section[role="banner"] {
height: auto !important;
max-height: 2.25in !important;
margin-bottom: 3rem !important;
overflow: hidden !important;
/* the hero image is absolutely positioned at the static position, so any
padding here shows through as a black band above it */
padding: 0 !important;
break-after: avoid;
page-break-after: avoid;
}
/* Trim the generous on-screen section rhythm so sections sit close together. */
main section {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
main section .container {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
main section h2 {
margin-top: 0 !important;
margin-bottom: 0.4rem !important;
}
/* Keep whole visual units on one page. Where a unit is taller than a page the
browser falls back to breaking it, so this is safe on the long sections. */
.tab-panel,
.split-card,
.impact-stat,
.swiper-slide,
blockquote,
picture {
break-inside: avoid;
page-break-inside: avoid;
}
/* The heading rule above already keeps a heading with what follows it.
Chaining break-after onto each section's intro block as well pushed whole
sections to the next page and left big gaps, so it is deliberately absent. */
/* ------------------------------------------------------------------
6. Impact-report blocks
------------------------------------------------------------------ */
/* Impact-at-a-glance: three to a row, scaled down, on plain white. The tinted
background is an inline style on the section, so it needs !important. */
.impact-stats {
background: #fff !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
break-inside: avoid;
page-break-inside: avoid;
}
.impact-stats .container {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.impact-stats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1rem 1.25rem !important;
}
.impact-stat {
flex-direction: row !important;
align-items: center;
break-inside: avoid;
page-break-inside: avoid;
}
.impact-stat-icon {
width: 46px !important;
height: 46px !important;
margin-right: 0.5rem;
}
.impact-stat-number {
/* every child is a , so zeroing the paragraph's font-size collapses
the markup whitespace between them and lets the spans butt up cleanly */
font-size: 0 !important;
}
/* The currency/suffix spans carry a fixed -18px lift and -1rem kerning tuned
for 60-75px type. At print size those overlap the digits, so re-state them
in proportional units. */
.impact-stat-number > span {
font-size: 26pt !important;
top: -0.3em !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.impact-stat-number > span[class*="text-[70%]"] {
font-size: 17pt !important;
}
/* The trailing suffix span wraps its value in markup whitespace that renders
at the span's own size, so it survives the font-size: 0 trick above. Only
that span needs pulling back - the others already butt up. */
.impact-stat-number > span[class*="-ml-"],
.impact-stat-number > span[class*="right-3"] {
margin-left: -0.26em !important;
}
.impact-stat-sub {
font-size: 11pt !important;
}
.impact-stat-copy {
font-size: 8pt !important;
line-height: 1.2 !important;
margin-top: 0.15rem !important;
}
/* The decorative quote mark is absolutely positioned 48px above the
blockquote's top edge, so on a page break it paints alone at the foot of
the previous page. Pad the quote so the glyph sits inside the box. */
.quote-modern {
padding-top: 4.25rem !important;
break-inside: avoid;
page-break-inside: avoid;
}
/* At print column width the 80px glyph reaches well into the first line of
the quote, so shrink it and lift it clear. */
.quote-modern svg {
top: -4.5rem !important;
height: 3rem !important;
width: 3rem !important;
}
/* Article cards stack a thumbnail above heading, copy and CTA. Those are four
sibling elements rather than a media/body pair, so a two-column grid with
the thumbnail spanning every row is what turns them side by side. */
.article-card {
display: grid !important;
grid-template-columns: 36% minmax(0, 1fr);
column-gap: 1rem;
align-items: start;
margin-bottom: 0 !important;
break-inside: avoid;
page-break-inside: avoid;
}
.article-card > *:first-child {
grid-column: 1;
/* no grid-template-rows is declared, so the explicit grid has no rows and
`1 / -1` would resolve to row 1 only - stretching the heading's row to
the height of the thumbnail. Span past the last implicit row instead. */
grid-row: 1 / span 20;
}
.article-card > *:not(:first-child) {
grid-column: 2;
}
.article-card h3 {
margin-top: 0 !important;
}
/* Accelerator tabs and featured articles: image beside the copy rather than
stacked above it, with both aligned to the top of the row. The on-screen
stack relies on lg: utilities that never match at paper width, including a
negative top margin that would overlap the image. */
.split-card {
flex-direction: row !important;
align-items: flex-start !important;
margin-top: 0 !important;
margin-bottom: 1rem !important;
break-inside: avoid;
page-break-inside: avoid;
}
.split-card-media {
flex: 0 0 45% !important;
width: 45% !important;
align-self: flex-start !important;
}
.split-card-body {
flex: 1 1 55% !important;
width: 55% !important;
margin-top: 0 !important;
margin-left: 0 !important;
padding: 0 0 0 1.25rem !important;
}
.split-card-body h3 {
margin-top: 0 !important;
font-size: 15pt !important;
}