@charset "UTF-8"; /* ========================================================================== Business Pulse 360° — Covering Business from Every Angle Premium digital business newspaper. Minimal, editorial, mobile-first. Palette ink #111111 · paper #FFFFFF · light grey #F5F5F3 · dark grey #333333 accents: brand orange #FE8C19 · brand blue #015E81 · forest #1D4925 Type Playfair Display (headlines) · Inter (nav + UI) · Source Serif 4 (body) ========================================================================== */ :root { /* neutrals */ --ink: #111111; --ink-soft: #333333; --ink-mute: #6B6B66; --paper: #FFFFFF; --grey-bg: #F5F5F3; --rule: #E2E2DC; --rule-soft: #EDEDE8; /* brand accents (logo-exact) */ --orange: #FE8C19; --orange-dk: #E0740A; /* The logo's blue. It replaced the teal the mark used to carry, so the teal is gone from the site with it: a token called teal holding a blue is a trap for whoever reads this next. */ --ocean: #015E81; --ocean-dk: #013F57; --ocean-pale: #EEF4F8; --forest: #1D4925; --alert: #C0392B; /* type — three roles, resolved by the font mode set on : --serif headlines and display --read article reading copy --sans navigation, labels, metadata, UI Default mode is `font-public`: PUBLIC SANS across all three, so the whole site is one typeface. It is a variable family (100–900) with a true italic, self-hosted, under the SIL Open Font License. `font-serif` keeps the Playfair/Inter/Source Serif alternative available (Site settings → Typeface). Everything downstream refers only to these three variables. */ --serif: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --read: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* headline metrics, retuned per mode below */ --h-track: -.021em; /* display tracking */ --h-weight: 800; /* display weight — the variable axis reaches 900 */ --h-lh: 1.06; /* display line-height */ /* rhythm */ --wrap: 1290px; --gutter: 20px; --nav-h: 44px; --nav-pad: 15px; /* .nav-link side padding; .nav-list cancels one of these */ --shadow: 0 18px 44px rgba(17,17,17,.13); --shadow-sm:0 2px 10px rgba(17,17,17,.08); } /* --------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.16; letter-spacing: -.012em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--orange); color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; } :focus-visible { outline: 2.5px solid var(--ocean); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } /* ==================================================== typeface modes ====== font-public (default) — Public Sans everywhere (OFL, self-hosted, variable) font-serif — Playfair Display headlines + Inter UI + Source Serif 4 ========================================================================= */ /* ---- Public Sans ------------------------------------------------------- A variable family, so every weight below is a real instance off the 100–900 axis rather than a synthesised approximation, and the italics are drawn cuts rather than a mechanical slant. Nothing here works around a missing weight — these rules exist only to suit the family's proportions. */ body.font-public .c-lead-title, body.font-public .a-title, body.font-public .phead-title { font-weight: 800; letter-spacing: var(--h-track); line-height: var(--h-lh); } /* Public Sans has a large x-height and reads heavier than a serif at the same size, so reading copy loses half a point and gains a little leading. */ body.font-public .a-body { font-size: 17.5px; line-height: 1.75; } body.font-public .a-standfirst { font-weight: 400; } body.font-public .prose { font-size: 16.5px; line-height: 1.72; } /* Its uppercase is fairly tight; small-caps labels want more tracking. */ body.font-public .rule-title, body.font-public .c-kicker, body.font-public .phead-kicker { letter-spacing: .14em; } /* Card headlines sit better a step down from the display weight. */ body.font-public .c-card-title, body.font-public .c-text-title, body.font-public .c-side-title, body.font-public .c-rank-title, body.font-public .mega-story-title { font-weight: 700; letter-spacing: -.011em; } /* ---- serif mode: the earlier Playfair / Inter / Source Serif combination - */ body.font-serif { --serif: "Playfair Display", "Libre Baskerville", Georgia, "Times New Roman", serif; --read: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --h-track: -.022em; --h-weight: 800; --h-lh: 1.05; } body.font-serif .c-lead-title, body.font-serif .a-title, body.font-serif .phead-title { font-weight: 800; letter-spacing: var(--h-track); line-height: var(--h-lh); } /* ================================================== utility bar (top) */ .util { background: var(--paper); border-bottom: 1px solid var(--rule-soft); font-size: 12px; } .util-in { display: flex; align-items: center; justify-content: space-between; min-height: 28px; gap: 16px; } .util-date { color: var(--ink-mute); letter-spacing: .02em; white-space: nowrap; } .util-links { display: flex; align-items: center; gap: 10px; font-weight: 500; } .util-links a { color: var(--ink-soft); } .util-links a:hover { color: var(--orange-dk); text-decoration: underline; text-underline-offset: 3px; } .util-em { color: var(--ink) !important; font-weight: 600; } .util-sep { color: var(--rule); } @media (max-width: 860px) { .util-date { display: none; } .util-in { justify-content: center; } .util-links { font-size: 11.5px; gap: 8px; } } @media (max-width: 540px) { .util-links a:nth-child(5) { display: none; } .util-sep:nth-of-type(2) { display: none; } } /* ========================================================== masthead Everything on the page hangs off one left edge: the utility bar, the first nav item, the market strip and the front-page grid all start at the same x. The control groups are pulled out by their own inner padding so the optical edge matches, not the box edge. ------------------------------------------------------------------------ */ .mast { background: var(--paper); padding: 10px 0 8px; } .mast-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } /* -10px cancels .icon-btn's own padding so the first icon sits on the edge. */ .mast-left { display: flex; align-items: center; gap: 4px; margin-left: -10px; } .mast-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .brand { justify-self: center; display: block; min-width: 0; } .brand img { width: clamp(165px, 19vw, 240px); height: auto; } /* Below 620px the three-across masthead cannot hold a legible logo plus both control groups — it overflowed the viewport and dragged the whole page into horizontal scroll. Stack it instead: controls on one row, logo centred under them at full readable width. */ @media (max-width: 620px) { .mast-in { grid-template-columns: auto 1fr; grid-template-areas: "left right" "brand brand"; row-gap: 14px; } .mast-left { grid-area: left; } .mast-right { grid-area: right; } .brand { grid-area: brand; width: 100%; max-width: 300px; } .brand img { width: 100%; } } /* The supplied logo lockup already carries the slogan, so the masthead does not repeat it. Kept for a future wordmark-only logo: add .show-slogan to to bring it back. */ .mast-slogan { display: none; } body.show-slogan .mast-slogan { display: block; margin: 10px auto 0; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--ink-mute); letter-spacing: .16em; text-transform: uppercase; } .icon-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); transition: background .15s ease, color .15s ease; } .icon-btn:hover { background: var(--grey-bg); color: var(--orange-dk); } .icon-btn[aria-expanded="true"] { background: var(--ink); color: #fff; } .icon-btn-label { text-transform: uppercase; } @media (max-width: 700px) { .icon-btn-label { display: none; } .icon-btn { padding: 8px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: background .16s ease, color .16s ease, border-color .16s ease; border: 1px solid transparent; cursor: pointer; } .btn-solid { background: var(--ink); color: #fff; } .btn-solid:hover { background: var(--orange); color: var(--ink); } .btn-ghost { border-color: var(--rule); color: var(--ink-soft); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .btn-accent { background: var(--orange); color: var(--ink); } .btn-accent:hover { background: var(--ink); color: #fff; } .btn-block { width: 100%; } @media (max-width: 860px) { .btn-ghost { display: none; } } @media (max-width: 420px) { .mast-right .btn-solid { padding: 9px 12px; font-size: 11.5px; } } /* ====================================================== search panel */ .searchpanel { background: var(--grey-bg); border-top: 1px solid var(--rule); } .searchpanel[hidden] { display: none; } .searchpanel-in { display: flex; gap: 10px; align-items: center; padding-top: 18px; padding-bottom: 12px; } .searchpanel-input { flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--ink); background: var(--paper); border-radius: 2px; font-family: var(--serif); font-size: 18px; } .searchpanel-input::placeholder { color: var(--ink-mute); font-family: var(--sans); font-size: 15px; } .searchpanel-close { font-size: 30px; line-height: 1; padding: 0 8px; color: var(--ink-mute); } .searchpanel-close:hover { color: var(--ink); } .searchpanel-hints { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; font-size: 12.5px; color: var(--ink-mute); } .searchpanel-hints a { background: var(--paper); border: 1px solid var(--rule); padding: 4px 10px; border-radius: 999px; color: var(--ink-soft); } .searchpanel-hints a:hover { border-color: var(--orange); color: var(--orange-dk); } /* ========================================== primary navigation (orange) */ .nav { position: sticky; top: 0; z-index: 60; background: var(--orange); border-top: 1px solid rgba(17,17,17,.14); border-bottom: 1px solid rgba(17,17,17,.16); } .nav-in { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; } /* -15px cancels the first .nav-link's own left padding, so "HOME" starts on the same x as the date bar above and the Latest column below. Every item keeps identical padding, so the hover targets stay even. */ .nav-list { display: flex; align-items: stretch; flex: 1; min-width: 0; margin-left: calc(var(--nav-pad) * -1); } .nav-item { position: relative; display: flex; } .nav-link { display: inline-flex; align-items: center; gap: 6px; height: var(--nav-h); padding: 0 var(--nav-pad); font-size: 13.5px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: background .14s ease; } .nav-link:hover, .nav-link[aria-expanded="true"] { background: rgba(17,17,17,.1); } .nav-link.is-active { box-shadow: inset 0 -4px 0 var(--ink); } .nav-chev { transition: transform .18s ease; opacity: .75; } .nav-link[aria-expanded="true"] .nav-chev { transform: rotate(180deg); } .nav-cta { display: inline-flex; align-items: center; align-self: center; padding: 7px 16px; margin-left: 12px; background: var(--ink); color: #fff; border-radius: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .nav-cta:hover { background: var(--forest); } /* ---- mega panel ---------------------------------------------------------- Two jobs, cleanly separated (the pattern Reuters gets right): a quiet "Browse …" list of sub-sections on the left, and a "Latest in …" grid of real stories with thumbnails on the right. ------------------------------------------------------------------------- */ .mega, .drop { position: absolute; z-index: 70; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--ink); box-shadow: var(--shadow); animation: panel-in .16s ease-out; } .mega[hidden], .drop[hidden] { display: none; } @keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* The panel is full-bleed and anchored to the nav bar, not to the tab that opened it — anchoring to the tab pushed the right-hand panels off-screen. `.mega-in` is a .wrap, so the content inside lands on the same left edge as the masthead, the market strip and the front-page grid. */ .nav-item.is-mega { position: static; } .mega { top: 100%; left: 0; right: 0; width: auto; border-left: 0; border-right: 0; } .mega-in { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 46px; padding: 30px 20px 34px; } .mega-eyebrow { font-size: 16px; font-weight: 700; letter-spacing: -.005em; color: var(--ink); margin-bottom: 17px; } /* left: browse by topic */ .mega-list { margin-bottom: 22px; } .mega-list li + li { margin-top: 13px; } .mega-list a { font-size: 15.5px; color: var(--ink-soft); line-height: 1.3; transition: color .13s ease; } .mega-list a:hover { color: var(--orange-dk); text-decoration: underline; text-underline-offset: 3px; } .mega-all { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dk); border-bottom: 2px solid var(--orange); padding-bottom: 2px; } .mega-all:hover { color: var(--ink); border-color: var(--ink); } /* right: what is new */ .mega-latest { border-left: 1px solid var(--rule); padding-left: 46px; min-width: 0; } .mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; } .mega-story { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 16px; align-items: start; padding: 15px 0; } .mega-story:nth-child(1), .mega-story:nth-child(2) { padding-top: 0; } .mega-story:nth-child(n + 3) { border-top: 1px solid var(--rule-soft); padding-top: 17px; } .mega-story-title { display: block; font-family: var(--serif); font-size: 16.5px; font-weight: 700; line-height: 1.27; letter-spacing: -.01em; } .mega-story-title:hover { color: var(--orange-dk); } .mega-story-text time { display: block; margin-top: 7px; font-size: 12px; color: var(--ink-mute); letter-spacing: .01em; } .mega-story-img img { width: 88px; height: 64px; object-fit: cover; background: var(--grey-bg); transition: opacity .18s ease; } .mega-story-img:hover img { opacity: .85; } .mega-empty { font-size: 14px; color: var(--ink-mute); line-height: 1.55; max-width: 46ch; } @media (max-width: 1180px) { .mega-in { grid-template-columns: 224px minmax(0, 1fr); gap: 32px; } .mega-latest { padding-left: 32px; } .mega-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .mega-story:nth-child(2) { border-top: 1px solid var(--rule-soft); padding-top: 17px; } } /* ---- simple dropdown (About) ---- */ .drop { top: 100%; left: 0; min-width: 300px; padding: 8px; } .drop-list li + li { border-top: 1px solid var(--rule-soft); } .drop-list a { display: block; padding: 11px 14px; } .drop-list a:hover { background: var(--grey-bg); } .drop-label { display: block; font-size: 14.5px; font-weight: 600; } .drop-desc { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; } /* hide desktop nav on small screens — the drawer takes over */ @media (max-width: 1000px) { :root { --nav-pad: 12px; } .nav-list { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav-list::-webkit-scrollbar { display: none; } .nav-cta { display: none; } .nav-link { font-size: 12.5px; } .mega, .drop { display: none !important; } .nav-chev { display: none; } } /* ==================================================== breaking ticker */ .ticker { background: var(--ink); color: #fff; } .ticker-in { display: flex; align-items: center; gap: 14px; min-height: 40px; overflow: hidden; } .ticker-tag { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); } .ticker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--alert); animation: pulse 1.6s infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } .ticker-track { flex: 1; min-width: 0; overflow: hidden; } .ticker-list { display: flex; gap: 34px; } .ticker-list li { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; } .ticker-list a { font-size: 14px; font-weight: 500; } .ticker-list a:hover { color: var(--orange); } .ticker-time { font-size: 11px; color: rgba(255,255,255,.55); } @media (max-width: 700px) { .ticker-list { animation: slide 26s linear infinite; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-55%); } } } @media (prefers-reduced-motion: reduce) { .ticker-list { animation: none; } .ticker-dot { animation: none; } html { scroll-behavior: auto; } } /* ================================================= most read marquee */ /* Sits between the primary nav and the market strip, in the logo's blue, so it reads as a distinct band against the orange nav above and the pale strip below. White on this blue measures 7.2:1, where the teal it replaced managed 2.7 and failed the contrast the headlines need. */ .mrq { background: var(--ocean); color: #fff; border-top: 1px solid rgba(255,255,255,.12); } .mrq-in { display: flex; align-items: center; gap: 16px; min-height: 38px; } .mrq-tag { flex: none; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; padding-right: 15px; border-right: 1px solid rgba(255,255,255,.22); } /* The window the strip travels through. The mask softens both edges so headlines fade in and out rather than being chopped off mid-word. */ .mrq-view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%); } /* width:max-content lets the two runs lie side by side at their natural size, which is what makes translateX(-50%) land exactly one run along. --mrq-dur is set from the measured width in JS so the strip moves at a constant speed whatever the headline count; the value here is the fallback. */ .mrq-strip { display: flex; width: max-content; animation: mrq-roll var(--mrq-dur, 60s) linear infinite; } @keyframes mrq-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Paused while hovered or while a headline holds focus, so the link a reader is aiming at stops moving, and by the button for anyone who wants it still. */ .mrq:hover .mrq-strip, .mrq:focus-within .mrq-strip, .mrq.is-paused .mrq-strip { animation-play-state: paused; } .mrq-list { display: flex; align-items: center; } .mrq-list li { flex: none; } .mrq-list a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 21px 9px 0; margin-right: 12px; white-space: nowrap; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: #fff; } .mrq-list a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; } .mrq-list a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* The flashing red dot that marks each headline. */ .mrq-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #E5241B; box-shadow: 0 0 0 0 rgba(229,36,27,.55); animation: mrq-flash 1.4s ease-in-out infinite; } @keyframes mrq-flash { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(229,36,27,.55); } 50% { opacity: .3; transform: scale(.72); box-shadow: 0 0 0 4px rgba(229,36,27,0); } } .mrq-pause { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.13); } .mrq-pause:hover { background: rgba(255,255,255,.26); } .mrq-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .mrq-pause .ico-play { display: none; } .mrq.is-paused .mrq-pause .ico-play { display: block; } .mrq.is-paused .mrq-pause .ico-pause { display: none; } @media (max-width: 700px) { .mrq-tag { font-size: 10px; padding-right: 11px; } .mrq-in { gap: 11px; } .mrq-list a { font-size: 13px; } } /* Motion is the whole point of a marquee, so with reduced motion asked for it becomes a plain scrollable row: nothing moves on its own, and the duplicate run is dropped so headlines are not repeated. */ @media (prefers-reduced-motion: reduce) { .mrq-strip { animation: none; width: auto; } .mrq-strip .mrq-list + .mrq-list { display: none; } .mrq-dot { animation: none; } .mrq-view { overflow-x: auto; } .mrq-pause { display: none; } } /* ==================================================== mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 200; } .drawer[hidden] { display: none; } .drawer-scrim { position: absolute; inset: 0; background: rgba(17,17,17,.5); border: 0; width: 100%; } .drawer-panel { position: absolute; inset: 0 auto 0 0; width: min(420px, 88vw); background: var(--paper); display: flex; flex-direction: column; box-shadow: var(--shadow); animation: slide-in .22s ease-out; overflow-y: auto; } @keyframes slide-in { from { transform: translateX(-100%); } to { transform: none; } } .drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 3px solid var(--orange); position: sticky; top: 0; background: var(--paper); z-index: 2; } .drawer-brand { font-family: var(--serif); font-size: 21px; font-weight: 800; letter-spacing: -.01em; } .drawer-deg { color: var(--ocean); } .drawer-close { font-size: 32px; line-height: 1; color: var(--ink-mute); padding: 0 4px; } .drawer-search { display: flex; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--rule); } .drawer-search input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 2px; background: var(--grey-bg); } .drawer-search button { padding: 0 14px; background: var(--ink); color: #fff; border-radius: 2px; } .drawer-nav { padding: 6px 0 4px; } .drawer-nav > ul > li { border-bottom: 1px solid var(--rule-soft); } .drawer-link, .drawer-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 20px; text-align: left; font-size: 15px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .drawer-link.is-active { color: var(--orange-dk); } .drawer-toggle svg { transition: transform .2s ease; opacity: .6; } .drawer-toggle[aria-expanded="true"] { color: var(--orange-dk); } .drawer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .drawer-sub { padding: 2px 20px 14px; background: var(--grey-bg); } .drawer-sub[hidden] { display: none; } .drawer-sub a { display: block; padding: 10px 0 10px 14px; border-left: 2px solid var(--rule); font-family: var(--serif); font-size: 16px; } .drawer-sub a:hover { border-left-color: var(--orange); color: var(--orange-dk); } .drawer-sub-all { font-family: var(--sans) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dk); } .drawer-foot { margin-top: auto; padding: 20px; border-top: 1px solid var(--rule); display: grid; gap: 10px; } .drawer-mini { font-size: 13px; color: var(--ink-mute); } .drawer-mini:hover { color: var(--ink); text-decoration: underline; } /* ============================================================ layout */ .section { padding: 34px 0; } .section + .section { border-top: 1px solid var(--rule); } .section-tight { padding: 22px 0; } .band { background: var(--grey-bg); } .rule { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 2px solid var(--ink); padding-top: 9px; margin-bottom: 20px; } .rule-title { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .rule-more { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--orange-dk); white-space: nowrap; } .rule-more:hover { color: var(--ink); } /* Chevron drawn in CSS rather than set as a glyph: the brand family has no U+2192, and a border chevron inherits colour and scales with the type. */ .rule-more::after, .mega-all::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-1px) rotate(45deg); } .mega-all::after { margin-left: .45em; } .rule-accent { border-top-color: var(--orange); } .rule-teal { border-top-color: var(--ocean); } /* ==================================================== front page grid */ .fp { display: grid; gap: 28px; } /* The lead story has to clear the fold, so the front page starts closer to the market strip than a normal section would. */ .fp.section { padding-top: 20px; } @media (min-width: 1024px) { .fp { grid-template-columns: 258px minmax(0, 1fr) 306px; gap: 0; } .fp-lead { order: 2; padding: 0 30px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); } .fp-left { order: 1; padding-right: 26px; } .fp-right { order: 3; padding-left: 28px; } } /* -------------------------------------------------------- story cards */ .c-kicker { display: inline-block; margin-bottom: 7px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--orange-dk); } .c-kicker:hover { color: var(--ink); } .c-meta { margin-top: 9px; font-size: 12px; color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .c-author { font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; } .c-dot { opacity: .5; } .c-credit { display: block; margin-top: 7px; font-size: 11.5px; color: var(--ink-mute); line-height: 1.4; } .c-credit em { font-style: normal; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; } /* lead */ .c-lead-media { display: block; margin-bottom: 12px; } /* 16:9 sets the shape, but the height is capped against the viewport so the picture can never push the headline below the fold on a laptop. */ .c-lead-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-bg); max-height: min(31vh, 330px); } /* Sized so a long headline runs to three or four lines rather than five, which is what pushed it past the fold. */ .c-lead-title { font-family: var(--serif); font-size: clamp(27px, 3.05vw, 48px); font-weight: 800; line-height: 1.06; letter-spacing: -.022em; } .c-lead-title a:hover { color: var(--orange-dk); } .c-lead-dek { margin-top: 11px; font-family: var(--read); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: var(--ink-soft); } /* grid card */ .c-card-media { display: block; margin-bottom: 11px; } .c-card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-bg); transition: opacity .2s ease; } .c-card-media:hover img { opacity: .88; } .c-card-title { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.2; } .c-card-title a:hover { color: var(--orange-dk); } .c-dek { margin-top: 8px; font-family: var(--read); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); } /* side card */ .c-side { display: grid; grid-template-columns: minmax(0,1fr) 88px; gap: 14px; align-items: start; } .c-side-media img { width: 88px; height: 88px; object-fit: cover; background: var(--grey-bg); } .c-side-title { font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.26; } .c-side-title a:hover { color: var(--orange-dk); } .c-side .c-kicker { font-size: 10px; margin-bottom: 5px; } .c-side .c-meta { margin-top: 6px; font-size: 11.5px; } /* text card */ .c-text-title { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.22; } .c-text-title a:hover { color: var(--orange-dk); } /* latest list */ .c-list { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; } .c-list-time { font-size: 11.5px; font-weight: 700; color: var(--orange-dk); letter-spacing: .04em; padding-top: 3px; } .c-list-title { font-size: 15px; font-weight: 600; line-height: 1.32; font-family: var(--serif); } .c-list-title a:hover { color: var(--orange-dk); } .c-list-cat { margin-top: 3px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); } /* most read */ .c-rank { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: start; } .c-rank-num { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: .9; color: var(--rule); } .c-rank:hover .c-rank-num { color: var(--orange); } .c-rank-title { font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.26; } .c-rank-title a:hover { color: var(--orange-dk); } .c-rank .c-meta { margin-top: 5px; font-size: 11.5px; } /* stacks + grids */ .stack > * + * { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-soft); } .stack-tight > * + * { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); } .stack-plain > * + * { margin-top: 16px; } .grid { display: grid; gap: 26px 28px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .grid-div > * { position: relative; } @media (min-width: 760px) { .grid-div { column-gap: 30px; } .grid-div > * + *::before { content: ""; position: absolute; left: -15px; top: 0; bottom: 0; width: 1px; background: var(--rule); } } /* lead rail secondary stories under the hero */ .fp-under { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); } /* On a short laptop screen the same layout needs a little more compression to keep the whole lead story, picture and headline, in view without scrolling. Keyed to viewport HEIGHT, so a tall monitor keeps the big type. */ @media (max-height: 900px) { .mast { padding: 8px 0 6px; } .brand img { width: clamp(155px, 16vw, 205px); } .c-lead-media img { max-height: max(200px, 26vh); } .c-lead-title { font-size: clamp(26px, 2.6vw, 38px); } .c-lead-dek { margin-top: 9px; font-size: 16px; } .fp.section { padding-top: 14px; } } /* ==================================================== lead carousel ====== Slides are stacked in one grid cell rather than a sliding track, so the container takes the height of the tallest headline and nothing jumps as it rotates. Without JavaScript the first slide simply shows — the front page never depends on the script to have a lead story. ========================================================================= */ .carousel { position: relative; } .carousel-track { display: grid; } .carousel-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease; } .carousel-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } /* ---- arrows: quiet until the carousel is hovered or focused ---- */ .carousel-arrow { position: absolute; top: clamp(90px, 17vw, 190px); z-index: 3; width: 42px; height: 42px; display: grid; place-content: center; background: rgba(255,255,255,.94); color: var(--ink); border: 1px solid var(--rule); border-radius: 50%; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .18s ease, background .15s ease, color .15s ease; } .carousel-prev { left: 10px; } .carousel-next { right: 10px; } .carousel:hover .carousel-arrow, .carousel:focus-within .carousel-arrow { opacity: 1; } .carousel-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .carousel-arrow:focus-visible { opacity: 1; } /* ---- progress bar of dots + pause control ---- */ .carousel-bar { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--rule); } .carousel-dots { display: flex; gap: 8px; flex: 1; min-width: 0; } /* The button is 22px tall for a comfortable pointer/touch target; the visible bar is drawn 4px high inside it. Geometry is stated explicitly rather than via padding + inset, because the global `box-sizing: border-box` makes a short `height` swallow the padding and collapse the indicator to nothing. */ .carousel-dot { flex: 1; max-width: 96px; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; } /* --rule is a hairline tone and vanishes at 4px on white, so the track uses a deliberately darker grey — the indicator has to be findable. */ .carousel-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; background: #C9C9C1; transition: background .15s ease; } .carousel-dot:hover::before { background: var(--ink-mute); } .carousel-dot-fill { position: absolute; left: 0; top: 9px; height: 4px; width: 0; background: var(--orange); } .carousel-dot.is-on .carousel-dot-fill { width: 100%; } /* the fill animates across while a slide is showing, so the bar doubles as a timer */ .carousel-dot.is-on.is-timing .carousel-dot-fill { animation: dot-timer var(--slide-ms, 6500ms) linear forwards; } @keyframes dot-timer { from { width: 0; } to { width: 100%; } } .carousel-play { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); padding: 4px 2px; } .carousel-play:hover { color: var(--ink); } .carousel-play .ico-play { display: none; } .carousel.is-paused .carousel-play .ico-play { display: block; } .carousel.is-paused .carousel-play .ico-pause { display: none; } @media (max-width: 700px) { .carousel-arrow { display: none; } /* swipe instead */ .carousel-dot { max-width: none; } } @media (prefers-reduced-motion: reduce) { .carousel-slide { transition: none; } .carousel-dot.is-on.is-timing .carousel-dot-fill { animation: none; width: 100%; } } /* ================================================== sector highlights */ .sect-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .sect-tab { padding: 8px 15px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); transition: all .15s ease; } .sect-tab:hover { border-color: var(--ink); color: var(--ink); } .sect-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .sector-card { display: grid; gap: 12px; } .sector-head { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid var(--ocean); } .sector-head .dot { width: 6px; height: 6px; background: var(--ocean); border-radius: 50%; } /* ============================================================ opinion */ .op { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 14px; } .op-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--grey-bg); border: 1px solid var(--rule); } .op-name { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .op-title { font-family: var(--serif); font-style: italic; font-size: 19px; font-weight: 600; line-height: 1.25; margin-top: 6px; } .op-title a:hover { color: var(--orange-dk); } .op-role { font-size: 11.5px; color: var(--ink-mute); margin-top: 5px; } /* ===================================================== media / video */ .media-card { position: relative; } .media-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-bg); } .media-play { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; background: rgba(17,17,17,.86); color: #fff; padding: 7px 13px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .media-card:hover .media-play { background: var(--orange); color: var(--ink); } /* ============================================== market indicator carousel Native scroll + scroll-snap rather than a transformed track: touch drag, trackpad, keyboard and the arrow buttons all drive the same mechanism, and it degrades to a plain scrolling strip with no JavaScript at all. ------------------------------------------------------------------------ */ .mkt { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--grey-bg); } .mkt-wrap { position: relative; display: flex; align-items: stretch; } .mkt-in { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-behavior: smooth; scroll-padding-left: 0; } .mkt-in::-webkit-scrollbar { display: none; } .mkt-in:focus-visible { outline: 2.5px solid var(--ocean); outline-offset: -2px; } .mkt-item { display: flex; flex-direction: column; gap: 1px; flex: none; padding: 8px 18px; border-right: 1px solid var(--rule); scroll-snap-align: start; } .mkt-item:first-child { padding-left: 0; } /* a live-data dot, so a reader can tell an API value from a typed one */ .mkt-live { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: #1B7A46; vertical-align: 1px; } .mkt-arrow { flex: none; width: 30px; display: grid; place-content: center; color: var(--ink-mute); background: linear-gradient(to right, var(--grey-bg) 55%, rgba(245,245,243,0)); border: 0; cursor: pointer; } .mkt-next { background: linear-gradient(to left, var(--grey-bg) 55%, rgba(245,245,243,0)); } .mkt-arrow:hover { color: var(--ink); } .mkt-arrow[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .mkt-in { scroll-behavior: auto; } } .mkt-name { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute); } .mkt-val { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .mkt-chg { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .mkt-up { color: #1B7A46; } .mkt-down { color: var(--alert); } .mkt-flat { color: var(--ink-mute); } /* ============================================================ e-paper */ .epaper { background: var(--ink); color: #fff; } .epaper-in { display: grid; gap: 28px; align-items: center; padding: 44px 0; } @media (min-width: 860px) { .epaper-in { grid-template-columns: 1.25fr .95fr; gap: 54px; } } .epaper-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); } .epaper-title { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; margin-top: 10px; line-height: 1.1; } .epaper-dek { margin-top: 14px; font-family: var(--read); font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 56ch; } .epaper-list { margin-top: 18px; display: grid; gap: 9px; } .epaper-list li { display: flex; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.85); } .epaper-list li::before { content: "\2022"; color: var(--orange); } .epaper-form { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); padding: 26px; border-radius: 3px; } /* ========================================================= newsletter */ .signup { background: var(--grey-bg); border-top: 1px solid var(--rule); } .signup-in { display: grid; gap: 26px; padding: 44px 0; } @media (min-width: 900px) { .signup-in { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } } .signup-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-dk); } .signup-title { font-family: var(--serif); font-size: clamp(25px, 3vw, 34px); font-weight: 700; margin-top: 9px; } .signup-dek { margin-top: 11px; font-family: var(--read); font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 58ch; } .signup-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: start; } .signup-input { padding: 14px 15px; border: 1px solid var(--ink); background: var(--paper); border-radius: 2px; font-size: 15px; } .signup-fine { grid-column: 1 / -1; font-size: 12px; color: var(--ink-mute); } .signup-fine a { text-decoration: underline; } @media (max-width: 520px) { .signup-form { grid-template-columns: 1fr; } } /* ============================================================== forms */ .form-card { background: var(--paper); border: 1px solid var(--rule); padding: 28px; border-radius: 3px; } .field { display: grid; gap: 6px; margin-bottom: 16px; } .field label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); } .field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); font-size: 15.5px; transition: border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; } .field textarea { min-height: 148px; resize: vertical; font-family: var(--read); line-height: 1.55; } .field-hint { font-size: 12px; color: var(--ink-mute); } .field-2 { display: grid; gap: 16px; } @media (min-width: 640px) { .field-2 { grid-template-columns: 1fr 1fr; gap: 0 18px; } } .req { color: var(--alert); } .flash { margin: 18px 0 0; padding: 13px 16px; border-radius: 2px; font-size: 14.5px; border-left: 4px solid; } .flash-ok { background: #F0F8F2; border-color: #1B7A46; color: #14532B; } .flash-error { background: #FDF1F0; border-color: var(--alert); color: #7F231A; } .flash-info { background: var(--ocean-pale); border-color: var(--ocean); color: var(--ocean-dk); } /* ============================================================ article */ .a-wrap { display: grid; gap: 34px; padding: 30px 0 10px; } @media (min-width: 1040px) { .a-wrap { grid-template-columns: minmax(0, 1fr) 306px; gap: 54px; } } .a-head { max-width: 46rem; } .a-crumbs { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; } .a-crumbs a { color: var(--orange-dk); font-weight: 600; } .a-crumbs span { opacity: .5; margin: 0 6px; } .a-title { font-family: var(--serif); font-size: clamp(29px, 4.3vw, 50px); font-weight: 800; line-height: 1.07; letter-spacing: -.02em; } .a-standfirst { margin-top: 16px; font-family: var(--read); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.52; color: var(--ink-soft); } .a-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding: 15px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-mute); } .a-byline-name { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); } .a-byline-name a:hover { color: var(--orange-dk); } .a-byline-sep { opacity: .45; } .a-share { display: flex; gap: 7px; margin-left: auto; } .a-share a, .a-share button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink-soft); transition: all .15s ease; } .a-share a:hover, .a-share button:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .a-share .is-wa:hover { background: #25D366; border-color: #25D366; color: #fff; } .a-hero { margin: 26px 0; } .a-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-bg); } .a-hero figcaption { margin-top: 9px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; } .a-hero figcaption em { font-style: normal; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; } .a-body { max-width: 42rem; font-family: var(--read); font-size: 18.5px; line-height: 1.72; color: #1A1A1A; } .a-body > p + p { margin-top: 1.15em; } .a-body p > strong { font-weight: 600; } .a-body a { color: var(--ocean-dk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .a-body a:hover { color: var(--orange-dk); } .a-body .a-sub { font-family: var(--serif); font-size: 25px; font-weight: 700; line-height: 1.2; margin: 1.7em 0 .55em; letter-spacing: -.012em; } .a-body .a-list { margin: 1.1em 0; display: grid; gap: .55em; } .a-body .a-list li { position: relative; padding-left: 22px; } .a-body .a-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--orange); } .a-body .a-quote { margin: 1.7em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--orange); } .a-body .a-quote p { font-family: var(--serif); font-size: 23px; font-style: italic; line-height: 1.36; color: var(--ink); } .a-body :first-child::first-letter { } .a-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule); } .a-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--grey-bg); border: 1px solid var(--rule); padding: 6px 12px; border-radius: 999px; color: var(--ink-soft); } .a-tag:hover { border-color: var(--orange); color: var(--orange-dk); } .a-author-box { margin-top: 28px; padding: 22px; background: var(--grey-bg); border-left: 3px solid var(--ocean); display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 16px; align-items: start; } .a-author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--paper); } .a-author-box h3 { font-size: 15px; } .a-author-box p { margin-top: 6px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; } .a-author-box a { color: var(--ocean-dk); text-decoration: underline; } .a-rail { display: grid; gap: 30px; align-content: start; } @media (min-width: 1040px) { .a-rail { position: sticky; top: calc(var(--nav-h) + 20px); } } .a-preview-flag { background: var(--forest); color: #fff; padding: 12px 16px; margin-bottom: 20px; font-size: 13.5px; border-radius: 2px; } .a-preview-flag strong { color: var(--orange); } /* ==================================================== page/hero heads */ .phead { padding: 34px 0 26px; border-bottom: 1px solid var(--rule); } .phead-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--orange-dk); } .phead-title { font-family: var(--serif); font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.06; margin-top: 10px; letter-spacing: -.02em; } .phead-dek { margin-top: 14px; font-family: var(--read); font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; } .phead-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .prose { max-width: 42rem; font-family: var(--read); font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-family: var(--serif); font-size: 27px; color: var(--ink); margin-top: 1.7em; } .prose h3 { font-family: var(--sans); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-top: 1.6em; } .prose ul { display: grid; gap: .5em; } .prose ul li { position: relative; padding-left: 22px; } .prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--orange); } .prose strong { color: var(--ink); font-weight: 600; } .prose a { color: var(--ocean-dk); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================== table */ .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); } .tbl th { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); background: var(--grey-bg); } .tbl td strong { font-weight: 600; } .tbl-scroll { overflow-x: auto; } /* ============================================================== team */ .team-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .team-card { text-align: left; } .team-card img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; background: var(--grey-bg); border: 1px solid var(--rule); } .team-name { font-family: var(--serif); font-size: 19px; font-weight: 700; margin-top: 13px; } .team-role { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-dk); margin-top: 6px; } .team-bio { font-size: 14px; color: var(--ink-mute); line-height: 1.55; margin-top: 8px; } .team-mail { font-size: 12.5px; color: var(--ocean-dk); margin-top: 8px; display: inline-block; text-decoration: underline; } /* =============================================================== ads .ad is a plain block, not a grid. As a grid track with justify-items:center the column sized to max-content, and because .ad-box carries an aspect-ratio the browser derived its WIDTH from the content height (~47px x 728/90 = ~383px) and ignored the container — which pushed the whole page into horizontal scroll on phones. A block parent plus width:100% + max-width caps it correctly at every size. ------------------------------------------------------------------------ */ .ad { margin: 30px 0; text-align: center; } .ad-note { display: block; margin-bottom: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #A8A8A2; } .ad-box { width: 100%; max-width: 100%; margin: 0 auto; display: grid; place-content: center; gap: 8px; justify-items: center; background: var(--grey-bg); border: 1px solid var(--rule); } .ad-dims { font-size: 12px; color: #A8A8A2; letter-spacing: .06em; } .ad-link { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dk); border-bottom: 1px solid var(--orange); } .ad-leaderboard .ad-box { max-width: 728px; aspect-ratio: 728/90; } .ad-billboard .ad-box { max-width: 970px; aspect-ratio: 970/250; } .ad-mpu .ad-box { max-width: 300px; aspect-ratio: 300/250; } .ad-halfpage .ad-box { max-width: 300px; aspect-ratio: 300/600; } /* ========================================================== pagination */ .pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 40px 0 10px; } .pager-btn, .pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .pager-btn:hover, .pager-num:hover { border-color: var(--ink); color: var(--ink); } .pager-num.is-current { background: var(--ink); border-color: var(--ink); color: #fff; } /* ============================================================== empty */ .empty { padding: 54px 0; text-align: center; } .empty-title { font-family: var(--serif); font-size: 26px; font-weight: 700; } .empty-dek { margin-top: 10px; color: var(--ink-mute); font-size: 15.5px; } /* ============================================================= footer */ .foot { background: var(--ink); color: rgba(255,255,255,.7); padding: 46px 0 26px; font-size: 14px; } .foot-top { display: grid; gap: 34px; } @media (min-width: 980px) { .foot-top { grid-template-columns: 315px minmax(0,1fr); gap: 56px; } } .foot-brand img { width: 220px; filter: brightness(0) invert(1) opacity(.94); } .foot-slogan { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--orange); margin-top: 12px; } .foot-about { margin-top: 13px; line-height: 1.6; font-size: 13.5px; color: rgba(255,255,255,.6); max-width: 46ch; } .foot-contact { margin-top: 18px; display: grid; gap: 7px; font-size: 13px; } .foot-contact li { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 8px; } .foot-contact span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); padding-top: 2px; } .foot-contact a { color: rgba(255,255,255,.82); word-break: break-word; } .foot-contact a:hover { color: var(--orange); } /* social row under the footer contacts */ .foot-social { display: flex; gap: 9px; margin-top: 20px; } .foot-social a { display: grid; place-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: rgba(255,255,255,.75); transition: background .15s ease, color .15s ease, border-color .15s ease; } .foot-social a:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); } .foot-cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .foot-col h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding-bottom: 9px; margin-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.16); } .foot-col li + li { margin-top: 8px; } .foot-col a { font-size: 13.5px; color: rgba(255,255,255,.66); } .foot-col a:hover { color: var(--orange); } .foot-bottom { margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.5); } .foot-legal-links { display: flex; flex-wrap: wrap; gap: 18px; } .foot-legal-links a:hover { color: var(--orange); } /* ============================================================ to top */ .totop { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 42px; height: 42px; display: grid; place-content: center; background: var(--ink); color: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); } .totop[hidden] { display: none; } .totop:hover { background: var(--orange); color: var(--ink); } /* =========================================================== print */ @media print { .util, .nav, .ticker, .mrq, .searchpanel, .signup, .foot, .totop, .ad, .a-share, .drawer, .mast-right, .mast-left { display: none !important; } body { font-size: 12pt; } .a-body { max-width: none; } a { text-decoration: none; color: #000; } } /* =========================================================== the e-paper == An edition is laid out as pages: a cover, then one page per section. All of them are in the document; the pager shows one at a time once JavaScript is running. Without it the paper reads straight through, which is also what prints, so nothing is lost. The type here is deliberately heavier and tighter than the website: an edition should feel like a paper somebody designed, not like a long feed. ========================================================================= */ .ep { padding: 8px 0 40px; } .ep-preview-flag { margin: 14px 0 0; padding: 9px 14px; background: #FDF3D8; border-left: 3px solid var(--orange); font-size: 13px; font-weight: 600; } /* ---- the sheet the paper is printed on ---- */ .ep-sheet { background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); padding: clamp(20px, 4vw, 56px); margin-top: 18px; } /* Only one page at a time, once the pager is running. */ .js-ep.is-paged .ep-page { display: none; } .js-ep.is-paged .ep-page.is-on { display: block; } /* Pages are separated by a rule when the paper reads straight through. */ .ep-page + .ep-page { margin-top: 46px; padding-top: 40px; border-top: 3px double var(--ink); } .js-ep.is-paged .ep-page + .ep-page { margin-top: 0; padding-top: 0; border-top: 0; } /* ---- paging bar ---- */ /* The primary nav is also sticky at top:0 with a higher stacking order, so the paging bar parks directly beneath it rather than being hidden behind it. */ .ep-bar { position: sticky; top: var(--nav-h); z-index: 39; background: var(--ink); color: #fff; } /* Anchor jumps land clear of both sticky bars. */ .ep-page { scroll-margin-top: calc(var(--nav-h) + 52px); } .ep-bar-in { display: flex; align-items: center; gap: 14px; min-height: 44px; } .ep-bar-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; } .ep-nav { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); color: #fff; font-size: 19px; line-height: 1; } .ep-nav:hover:not(:disabled) { background: var(--orange); } .ep-nav:disabled { opacity: .3; cursor: default; } .ep-nav:focus-visible, .ep-jump:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ep-jump { max-width: 320px; background: rgba(255,255,255,.1); color: #fff; border: 0; font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 4px; } .ep-jump option { color: var(--ink); } .ep-count { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); flex: none; } /* ---- cover masthead ---- */ .ep-masthead { text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 16px; margin-bottom: 26px; } .ep-masthead-logo { display: block; margin: 0 auto; width: clamp(200px, 34vw, 340px); height: auto; } .ep-masthead-line { margin-top: 10px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } .ep-masthead-strap { margin-top: 6px; font-family: var(--serif); font-size: clamp(15px, 1.5vw, 18px); font-style: italic; color: var(--ink-mute); } /* ---- the splash ---- */ .ep-splash { text-align: center; max-width: 940px; margin: 0 auto; } .ep-splash-media { margin-bottom: 18px; } .ep-splash-media img, .ep-lead-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-bg); } .ep-splash-media figcaption, .ep-lead-media figcaption { margin-top: 7px; font-size: 12px; color: var(--ink-mute); text-align: left; } .ep-credit { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; margin-left: 6px; } .ep-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--orange-dk); margin-bottom: 7px; } .ep-splash-title { font-family: var(--serif); font-size: clamp(32px, 5.4vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -.028em; } .ep-splash-dek { margin: 14px auto 0; max-width: 720px; font-family: var(--read); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-soft); } .ep-byline { margin-top: 12px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ep-byline span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-mute); } /* ---- rest of the cover ---- */ .ep-cover-rest { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--ink); } .ep-brief-title { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.18; } .ep-brief-dek { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } /* ---- contents ---- */ .ep-contents { margin-top: 40px; padding-top: 26px; border-top: 3px double var(--ink); } .ep-contents-head, .ep-note-head, .ep-briefs-head { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; } .ep-contents-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px 30px; } .ep-contents-list a { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); } .ep-contents-list a:hover { background: var(--grey-bg); } .ep-contents-no { font-family: var(--serif); font-size: 17px; font-weight: 800; color: var(--orange-dk); font-variant-numeric: tabular-nums; } .ep-contents-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ep-contents-main strong { font-family: var(--serif); font-size: 16px; font-weight: 700; } .ep-contents-main small { font-size: 12px; color: var(--ink-mute); line-height: 1.4; } .ep-contents-count { font-size: 11px; font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; } /* ---- the note that opens the edition ---- */ .ep-note { margin-top: 34px; padding: 24px; background: var(--grey-bg); border-top: 3px solid var(--ocean); } .ep-note-body { font-family: var(--read); font-size: 16px; line-height: 1.62; max-width: 68ch; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .ep-note-body p + p { margin-top: 13px; } /* ---- section pages ---- */ .ep-sect { border-bottom: 3px double var(--ink); padding-bottom: 12px; margin-bottom: 26px; } .ep-sect-no { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); } .ep-sect-name { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; margin-top: 3px; } .ep-sect-blurb { margin-top: 5px; font-size: 13.5px; color: var(--ink-mute); } /* ---- the lead of a section ---- */ .ep-lead { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--ink); } .ep-lead-media { margin-bottom: 16px; } .ep-lead-title { font-family: var(--serif); font-size: clamp(25px, 3.3vw, 42px); font-weight: 800; line-height: 1.07; letter-spacing: -.024em; } .ep-lead-dek { margin-top: 11px; font-family: var(--read); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-soft); text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Body copy set in columns, the way a broadsheet runs it. */ /* Justified, as the printed edition is. Hyphenation is on with it: without hyphens a narrow column opens white rivers between the words, which is the thing justified setting is usually blamed for. */ .ep-copy { font-family: var(--read); font-size: 15.5px; line-height: 1.62; margin-top: 14px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .ep-copy p + p { margin-top: 12px; } .ep-copy-lead { column-width: 21rem; column-gap: 34px; column-rule: 1px solid var(--rule); font-size: 16px; text-align: justify; hyphens: auto; } .ep-copy-lead > p:first-child::first-letter { float: left; font-family: var(--serif); font-size: 3.4em; line-height: .82; font-weight: 800; padding: 4px 8px 0 0; } .ep-copy .a-sub { font-family: var(--serif); font-size: 18px; font-weight: 700; margin-top: 16px; break-after: avoid; } .ep-copy .a-quote { margin: 16px 0; padding-left: 14px; border-left: 3px solid var(--orange); font-family: var(--serif); font-size: 18px; font-style: italic; break-inside: avoid; } .ep-copy .a-list { margin-top: 12px; padding-left: 18px; list-style: disc; } .ep-copy .a-list li { margin-top: 5px; } .ep-more { margin-top: 14px; } .ep-more a, .ep-story-foot a { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--orange-dk); } .ep-more a:hover, .ep-story-foot a:hover { text-decoration: underline; } .ep-meta { margin-top: 7px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ocean-dk); letter-spacing: .02em; } /* ---- the body of a section page ---- */ /* Every story after the lead runs in full, so they stack down the page and are ruled off from one another rather than sitting in a grid of cards. A card of a fixed shape cannot hold a story of any length. */ .ep-stories { display: grid; gap: 34px; } .ep-story { padding-bottom: 30px; border-bottom: 1px solid var(--ink); } .ep-stories > .ep-story:last-child { border-bottom: 0; padding-bottom: 0; } .ep-story-media { display: block; margin: 14px 0; } .ep-story-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-bg); } .ep-story-media figcaption { margin-top: 7px; font-size: 12px; color: var(--ink-mute); } .ep-story-title { font-family: var(--serif); font-size: clamp(21px, 2.3vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -.018em; } /* Narrower columns than the section lead, which keeps the lead dominant. */ .ep-copy-story { column-width: 19rem; column-gap: 30px; column-rule: 1px solid var(--rule-soft); } .ep-signoff { margin-top: 12px; font-family: var(--read); font-size: 13.5px; font-weight: 700; font-style: italic; color: var(--ink-soft); } /* An island in the flow of the stories rather than a cell of a grid. */ .epad-in-flow { max-width: 460px; margin: 0 auto; } .ep-story-dek { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .ep-story-foot { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); } /* ---- briefs ---- */ .ep-briefs { margin-top: 32px; padding-top: 20px; border-top: 3px double var(--ink); } .ep-briefs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 22px 30px; } /* ---- folio ---- */ .ep-folio { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 34px; padding-top: 11px; border-top: 1px solid var(--ink); font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); } /* ---- moving between editions ---- */ .ep-editions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 26px; } .ep-edition { display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); } .ep-edition span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); } .ep-edition strong { font-size: 14px; } .ep-edition:hover strong { color: var(--orange-dk); } .ep-edition-next { text-align: right; } .ep-edition-all { justify-self: center; padding: 9px 18px; border: 1px solid var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .ep-edition-all:hover { background: var(--ink); color: #fff; } /* ---- the subscriber gate ---- */ .ep-gate { max-width: 620px; margin: 40px auto 60px; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--orange); padding: clamp(26px, 5vw, 48px); box-shadow: var(--shadow-sm); } .ep-gate-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .ep-gate-title { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; line-height: 1.08; margin-top: 8px; } .ep-gate-dek { margin-top: 10px; font-size: 16.5px; color: var(--ink-soft); } .ep-gate-note { margin-top: 22px; font-size: 14.5px; color: var(--ink-soft); } .ep-gate-form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; } .ep-gate-form input { flex: 1; min-width: 230px; padding: 12px 14px; border: 1px solid var(--ink); font-size: 15px; font-family: var(--sans); } .ep-gate-error { margin-top: 12px; font-size: 14px; color: var(--alert); font-weight: 600; } .ep-gate-alt { margin-top: 18px; font-size: 13.5px; color: var(--ink-mute); } .ep-gate-alt a { color: var(--orange-dk); font-weight: 700; } /* ---- the edition on the E-Paper landing page ---- */ .ep-latest { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: center; background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--ink); padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow-sm); } .ep-latest-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--grey-bg); } .ep-latest-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dk); } .ep-latest-title { font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); font-weight: 800; line-height: 1.08; margin-top: 8px; } .ep-latest-dek { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); } .ep-latest-sections { margin-top: 14px; font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; } .ep-latest-cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } .ep-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; } .ep-arch { display: block; border: 1px solid var(--rule); background: var(--paper); } .ep-arch:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); } .ep-arch img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--grey-bg); } .ep-arch-body { padding: 13px 14px 16px; } .ep-arch-no { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-dk); } .ep-arch-title { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.2; margin-top: 5px; } .ep-arch-date { margin-top: 6px; font-size: 12px; color: var(--ink-mute); } @media (max-width: 780px) { .ep-latest { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 640px) { .ep-sheet { padding: 18px 16px; } /* One narrow column on a phone is where justification does more harm than good: too few words a line to distribute the space evenly. */ .ep-copy, .ep-copy-lead, .ep-lead-dek, .ep-story-dek, .ep-note-body { text-align: left; } .ep-copy-lead { column-width: auto; column-count: 1; } .ep-editions { grid-template-columns: 1fr; } .ep-edition-next { text-align: left; } .ep-jump { max-width: 190px; } } /* ---- printing an edition ---- */ @media print { /* Every page is shown, and each one starts a fresh sheet. */ .js-ep.is-paged .ep-page { display: block !important; } .ep-page { break-before: page; border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; } .ep-page:first-child { break-before: auto; } .ep-bar, .ep-editions, .ep-more, .ep-story-foot a { display: none !important; } .ep-sheet { border: 0; box-shadow: none; padding: 0; } .ep-copy-lead { column-width: 18rem; } } /* ------------------------------------------------------ e-paper advertising */ /* Ads are labelled and ruled off. A reader has to be able to tell reporting from advertising at a glance, and a business paper that blurs the two loses the readership it is selling. */ .epad { margin: 28px 0; } .epad-note { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); text-align: center; padding-bottom: 5px; border-bottom: 1px solid var(--rule); } .epad-box { margin-top: 8px; } .epad-box img { display: block; width: 100%; height: auto; background: var(--grey-bg); } .epad-caption { margin-top: 6px; font-size: 11.5px; color: var(--ink-mute); text-align: center; } /* Each format holds its rate-card shape before the artwork arrives, so a page never reflows under the reader as images load. */ .epad-cover_strip .epad-box { aspect-ratio: 1240 / 250; } .epad-section_strip .epad-box { aspect-ratio: 1240 / 180; } .epad-page_foot .epad-box { aspect-ratio: 1240 / 620; } .epad-in_grid .epad-box { aspect-ratio: 600 / 500; } .epad-full_page .epad-box { aspect-ratio: 1240 / 1754; } .epad-box img { aspect-ratio: inherit; object-fit: contain; } /* The front page strip is the premium position, so it is ruled top and bottom rather than floated in the white space. */ .epad-cover_strip { margin: 30px 0 6px; padding-top: 4px; border-top: 3px double var(--ink); } /* The island reads as one cell of the story grid. */ .epad-in-grid { margin: 0; align-self: start; } /* A page of advertising: the artwork carries the page, with only the folio. */ .ep-page-ad { display: flex; flex-direction: column; min-height: 60vh; } .epad-solus { margin: 0 auto; flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 780px; width: 100%; } .epad-solus .epad-box { margin-top: 10px; } /* Unsold space, shown to the newsroom only, with the size an advertiser needs. */ .epad-empty .epad-box { border: 1px dashed var(--rule); background: var(--grey-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 14px; } .epad-empty-label { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink-mute); } .epad-empty-spec { font-size: 11.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .epad-empty-note { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #A8A8A2; } /* ---- download and the PDF button on the rail ---- */ .ep-dl { flex: none; display: inline-flex; align-items: center; gap: 6px; color: #fff; background: rgba(255,255,255,.13); padding: 6px 11px; border-radius: 4px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ep-dl:hover { background: var(--orange); } .ep-dl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ep-foot-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); } .ep-foot-note { font-size: 13px; color: var(--ink-mute); } @media (max-width: 640px) { .ep-dl span { display: none; } .ep-dl { padding: 6px 8px; } } @media print { .epad-empty { display: none !important; } .ep-foot-actions, .ep-dl { display: none !important; } .ep-page-ad { break-before: page; } } /* ------------------------------------------------- the e-paper front page */ /* Built as a magazine cover rather than a news page, matching the PDF: rails above and below a typographic masthead, the splash reversed out of a photograph with the inside stories listed beside it, three cards, and a slogan band closing the sheet. */ .ep-cover { padding-bottom: 0; } .epc-rail { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 1.4px solid var(--ink); } .epc-rail i { font-style: normal; color: var(--ink-mute); margin: 0 5px; } .epc-rail em { font-family: var(--serif); font-size: 12.5px; font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--ink-mute); } .epc-rail-sub { border-bottom: 0; border-top: 1.4px solid var(--ink); padding: 9px 0 0; } /* ---- masthead ---- */ .epc-mast { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 30px); margin: 10px 0 6px; line-height: .92; } .epc-mast-name { font-family: var(--serif); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; font-size: clamp(34px, 8.6vw, 92px); } /* The ring is an ellipse because the numeral is wider than it is tall. */ .epc-mast-num { position: relative; flex: none; font-family: var(--serif); font-weight: 800; letter-spacing: -.01em; font-size: clamp(34px, 8.6vw, 92px); color: var(--orange); padding: 0 .30em; } .epc-mast-num::before { content: ''; position: absolute; inset: -.20em -.02em -.18em; border: .055em solid var(--orange); border-radius: 50%; } .epc-mast-num sup { font-size: .44em; vertical-align: super; letter-spacing: 0; } /* ---- hero ---- */ .epc-hero { position: relative; margin-top: 14px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr); min-height: clamp(340px, 46vw, 560px); background: var(--ink); } .epc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Two scrims: one over the whole picture to hold the type, a heavier one on the side the splash sits, because a cover photograph cannot be relied on to be dark enough to reverse type out of. */ .epc-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.60) 58%, rgba(0,0,0,.34) 64%, rgba(0,0,0,.32) 100%); } .epc-hero-main, .epc-hero-side { position: relative; z-index: 1; padding: clamp(18px, 2.6vw, 30px); } .epc-hero-main { display: flex; flex-direction: column; align-items: flex-start; } .epc-tag { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--orange); padding: 5px 11px; margin-bottom: clamp(14px, 2vw, 26px); } .epc-splash { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(28px, 4.5vw, 54px); line-height: 1.03; letter-spacing: -.025em; max-width: 15em; } .epc-splash a { color: #fff; } .epc-splash a:hover { color: var(--orange); } .epc-dash { display: block; width: 46px; height: 3px; background: var(--orange); margin: clamp(14px, 2vw, 22px) 0; } .epc-splash-dek { font-family: var(--read); font-size: clamp(14.5px, 1.25vw, 17px); line-height: 1.5; color: rgba(255,255,255,.9); max-width: 34em; } .epc-turn { margin-top: clamp(16px, 2.2vw, 26px); } .epc-turn a { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .epc-turn a:hover { color: var(--orange); } .epc-hero-side { display: flex; flex-direction: column; justify-content: center; gap: 0; border-left: 1px solid rgba(255,255,255,.34); } .epc-teaser { padding: clamp(10px, 1.5vw, 17px) 0; } .epc-teaser + .epc-teaser { border-top: 1px solid rgba(255,255,255,.2); } .epc-teaser h3 { font-family: var(--serif); font-size: clamp(15px, 1.35vw, 18px); font-weight: 700; line-height: 1.2; color: #fff; } .epc-teaser h3 a { color: #fff; } .epc-teaser h3 a:hover { color: var(--orange); } .epc-teaser-page { margin-top: 7px; display: flex; align-items: center; gap: 9px; } .epc-teaser-page::before { content: ''; width: 20px; height: 2px; background: var(--orange); flex: none; } .epc-teaser-page a { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); } .epc-teaser-page a:hover { color: var(--orange); } /* ---- three cards ---- */ .epc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(20px, 2.6vw, 30px); } .epc-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--grey-bg); } .epc-card-label { margin-top: 11px; font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); } .epc-card-title { margin-top: 6px; font-family: var(--serif); font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.16; } .epc-card-dek { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); } .epc-card-page { margin-top: 10px; } .epc-card-page a { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .epc-card-page a:hover { color: var(--orange-dk); } /* ---- the band that closes the cover ---- */ .epc-band { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); background: #14161E; color: #fff; padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px); margin-top: clamp(24px, 3vw, 36px); } .epc-band-name { font-family: var(--serif); font-size: clamp(16px, 1.7vw, 21px); font-weight: 800; } .epc-band-name b { color: var(--orange); } .epc-band em { font-family: var(--serif); font-size: clamp(14px, 1.4vw, 18px); font-style: italic; padding-left: clamp(14px, 2.4vw, 26px); border-left: 1px solid rgba(255,255,255,.35); } .epc-band-dash { margin-left: auto; width: 44px; height: 3px; background: var(--orange); flex: none; } @media (max-width: 760px) { /* The side list drops under the splash: a column that narrow holds no headline, and the cover is scrolled on a phone rather than seen at once. */ .epc-hero { grid-template-columns: 1fr; min-height: 0; } .epc-hero::after { background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.72) 100%); } .epc-hero-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); padding-top: 4px; } .epc-rail { flex-direction: column; gap: 4px; font-size: 9.5px; } .epc-band { flex-wrap: wrap; } .epc-band em { padding-left: 0; border-left: 0; } .epc-band-dash { display: none; } } @media print { .epc-turn, .epc-band-dash { display: none !important; } .epc-hero-img { position: static; } } /* ================================================== the three edition styles One set of markup carries all three designs; the style class on .ep decides which mastheads, hero arrangement and closing band are used, and which are simply not drawn. Magazine is the default and needs no overrides, so what follows is only what Broadsheet and Modern do differently. ========================================================================= */ /* Pieces only one style uses are off until that style asks for them. */ .epc-mast-logo, .epc-foot-line, .epc-mast-issue { display: none; } /* ------------------------------------------------------------- broadsheet */ /* The furniture of a paper meant to be printed: the logo centred over a double rule, the picture full width with its caption, the headline centred beneath it in black rather than reversed out of the photograph. */ .ep-style-broadsheet .epc-rail, .ep-style-broadsheet .epc-mast, .ep-style-broadsheet .epc-band { display: none; } .ep-style-broadsheet .epc-mast-logo { display: block; text-align: center; } .ep-style-broadsheet .epc-mast-logo img { width: clamp(210px, 34vw, 330px); height: auto; margin: 0 auto; } .ep-style-broadsheet .epc-issue { margin-top: 6px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: 12px; border-bottom: 4px double var(--ink); } /* The picture sits above the words, so the scrim goes and the type turns back to ink on paper. */ .ep-style-broadsheet .epc-hero { display: block; background: transparent; min-height: 0; margin-top: 18px; } .ep-style-broadsheet .epc-hero::after { display: none; } .ep-style-broadsheet .epc-hero-img { position: static; width: 100%; height: auto; aspect-ratio: 2.45 / 1; } .ep-style-broadsheet .epc-hero-main { padding: 18px 0 0; align-items: center; text-align: center; } .ep-style-broadsheet .epc-tag { display: none; } .ep-style-broadsheet .epc-splash, .ep-style-broadsheet .epc-splash a { color: var(--ink); max-width: 26em; } .ep-style-broadsheet .epc-dash { display: none; } .ep-style-broadsheet .epc-splash-dek { color: var(--ink-soft); max-width: 44em; text-align: center; } .ep-style-broadsheet .epc-turn a { color: var(--orange-dk); } /* The inside stories run as briefs across the foot, without pictures. */ .ep-style-broadsheet .epc-hero-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; border-left: 0; border-top: 1px solid var(--ink); margin-top: 24px; padding: 18px 0 0; } .ep-style-broadsheet .epc-teaser { padding: 0; } .ep-style-broadsheet .epc-teaser + .epc-teaser { border-top: 0; } .ep-style-broadsheet .epc-teaser h3, .ep-style-broadsheet .epc-teaser h3 a { color: var(--ink); font-size: 16px; } .ep-style-broadsheet .epc-teaser-page a { color: var(--ink-mute); } .ep-style-broadsheet .epc-card img { display: none; } .ep-style-broadsheet .epc-cards { border-top: 1px solid var(--rule); padding-top: 18px; } .ep-style-broadsheet .epc-foot-line { display: block; margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--ink); font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); text-align: center; } .ep-style-broadsheet .epc-foot-line i { font-style: normal; margin: 0 8px; } /* ----------------------------------------------------------------- modern */ /* No rules and no ornament: the name set large in the site typeface, the photograph edge to edge, the headline beneath it behind a heavy accent bar. */ .ep-style-modern .epc-rail, .ep-style-modern .epc-rail-sub { display: none; } .ep-style-modern .epc-mast { align-items: baseline; gap: .12em; margin: 4px 0 16px; } .ep-style-modern .epc-mast-name, .ep-style-modern .epc-mast-num { font-family: var(--sans); font-weight: 800; text-transform: none; letter-spacing: -.03em; font-size: clamp(32px, 7vw, 68px); } .ep-style-modern .epc-mast-num { padding: 0; } .ep-style-modern .epc-mast-num::before { display: none; } /* no ring */ .ep-style-modern .epc-mast-num sup { display: none; } .ep-style-modern .epc-mast-issue { display: inline; margin-left: auto; align-self: center; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); } .ep-style-modern .epc-mast-issue i { font-style: normal; margin: 0 5px; } /* Full bleed: the picture runs past the sheet's padding on both sides, which is what makes this style read as a screen rather than a page. */ .ep-style-modern .epc-hero { display: block; background: transparent; min-height: 0; margin: 0 calc(clamp(20px, 4vw, 56px) * -1); } .ep-style-modern .epc-hero::after { display: none; } .ep-style-modern .epc-hero-img { position: static; width: 100%; height: auto; aspect-ratio: 21 / 9; } .ep-style-modern .epc-hero-main { padding: 0 clamp(20px, 4vw, 56px); margin-top: 26px; } /* The tag becomes the accent bar. */ .ep-style-modern .epc-tag { width: 64px; height: 6px; padding: 0; overflow: hidden; text-indent: -999em; margin-bottom: 18px; } .ep-style-modern .epc-splash, .ep-style-modern .epc-splash a { color: var(--ink); font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; max-width: 24em; } .ep-style-modern .epc-dash { display: none; } .ep-style-modern .epc-splash-dek { color: var(--ink-soft); font-family: var(--sans); } .ep-style-modern .epc-turn a { color: var(--orange-dk); } .ep-style-modern .epc-hero-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; border-left: 0; margin: 30px clamp(20px, 4vw, 56px) 0; padding: 0; } .ep-style-modern .epc-teaser { padding-top: 12px; border-top: 3px solid var(--rule); } .ep-style-modern .epc-teaser + .epc-teaser { border-top: 3px solid var(--rule); } .ep-style-modern .epc-teaser h3, .ep-style-modern .epc-teaser h3 a { color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: 16px; } .ep-style-modern .epc-teaser-page::before { display: none; } .ep-style-modern .epc-teaser-page a { color: var(--orange-dk); } .ep-style-modern .epc-cards { display: none; } /* the teaser row does this job */ .ep-style-modern .epc-band { background: var(--orange); color: #fff; margin: 34px calc(clamp(20px, 4vw, 56px) * -1) calc(clamp(20px, 4vw, 56px) * -1); } .ep-style-modern .epc-band-name { display: none; } .ep-style-modern .epc-band em { font-family: var(--sans); font-style: normal; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; font-size: 12px; padding-left: 0; border-left: 0; } .ep-style-modern .epc-band-dash { display: none; } /* Headlines inside the paper follow the style's display face. */ .ep-style-modern .ep-sect-name, .ep-style-modern .ep-lead-title, .ep-style-modern .ep-story-title, .ep-style-modern .ep-brief-title, .ep-style-modern .ep-splash-title { font-family: var(--sans); font-weight: 800; letter-spacing: -.025em; } /* Two columns rather than three, matching the PDF. */ .ep-style-modern .ep-copy-lead { column-width: 26rem; } .ep-style-modern .ep-copy-story { column-width: 24rem; } /* No drop cap in this style. */ .ep-style-modern .ep-copy-lead > p:first-child::first-letter { float: none; font-size: inherit; line-height: inherit; font-weight: inherit; padding: 0; } @media (max-width: 760px) { .ep-style-modern .epc-hero, .ep-style-modern .epc-band { margin-left: -16px; margin-right: -16px; } .ep-style-modern .epc-hero-main, .ep-style-modern .epc-hero-side { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .ep-style-modern .epc-mast { flex-wrap: wrap; } .ep-style-modern .epc-mast-issue { margin-left: 0; width: 100%; } } /* ---------------------------------------- the masthead is the real logo --- The cover was set with the name in type and a ring round the numeral, following the reference. The logo is the publication's actual mark, so it is what goes at the top of the paper; the typographic version is kept only as a fallback for an install with no logo file. */ .epc-mast { display: none; } .epc-mast-logo { display: block; text-align: center; margin: 12px 0 10px; } .epc-mast-logo img { width: clamp(190px, 30vw, 300px); height: auto; margin: 0 auto; } /* The rails already carry the volume and issue, so the line under the logo is for Broadsheet, which has no rails. */ .epc-issue { display: none; } .ep-style-broadsheet .epc-issue { display: block; margin-top: 6px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: 12px; border-bottom: 4px double var(--ink); } /* Modern sets the logo against the left with the issue line opposite. */ .ep-style-modern .epc-mast-logo { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; margin: 4px 0 18px; } .ep-style-modern .epc-mast-logo img { width: clamp(150px, 22vw, 215px); margin: 0; } .ep-style-modern .epc-mast-logo::after { content: attr(data-issue); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .ep-style-modern .epc-issue { display: none; } @media (max-width: 620px) { .ep-style-modern .epc-mast-logo { flex-direction: column; align-items: flex-start; gap: 8px; } } /* -------------------------------------------- Broadsheet's front-page top */ /* The furniture the Namibian weeklies use: an advertise block and the date flanking the logo, a solid bar carrying where to find the paper and which issue this is, then a row of bordered inside-story cards each closed by a section ribbon. Only this style draws it. */ .epc-bs-top, .epc-bs-bar, .epc-bs-inside { display: none; } .ep-style-broadsheet .epc-mast-logo, .ep-style-broadsheet .epc-issue { display: none; } .ep-style-broadsheet .epc-bs-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-bottom: 10px; } .epc-bs-ad { display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); } .epc-bs-ad strong { font-size: 13px; line-height: 1.25; } .epc-bs-ad span { font-size: 11px; font-weight: 700; text-decoration: underline; margin-top: 3px; } .epc-bs-ad b { font-size: 13.5px; color: var(--orange-dk); } .epc-bs-logo img { width: clamp(180px, 30vw, 290px); height: auto; display: block; margin: 0 auto; } .epc-bs-date { justify-self: end; align-self: end; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--orange-dk); } .ep-style-broadsheet .epc-bs-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--ink); color: #fff; min-height: 30px; font-family: var(--sans); font-size: 12px; font-weight: 700; } .epc-bs-bar > span:first-child { padding-left: 14px; } .epc-bs-bar > span:nth-child(2) { text-align: center; } .epc-bs-bar b { justify-self: end; align-self: stretch; display: flex; align-items: center; background: var(--orange); padding: 0 16px; font-size: 13px; } .ep-style-broadsheet .epc-bs-inside { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 14px; padding-bottom: 14px; border-bottom: 3px solid var(--ink); } .epc-bs-label { font-family: var(--sans); font-size: clamp(17px, 2.2vw, 24px); font-weight: 800; line-height: 1.05; text-transform: uppercase; } .epc-bs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .epc-bs-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; border: 1.5px solid var(--orange); border-radius: 8px; padding: 7px 7px 22px; } .epc-bs-card > img { width: 92px; height: 62px; object-fit: cover; border-radius: 3px; } .epc-bs-card h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; line-height: 1.25; } .epc-bs-page { margin-top: 5px; } .epc-bs-page a { font-family: var(--sans); font-size: 12px; font-weight: 800; font-style: italic; color: var(--ocean-dk); } .epc-bs-ribbon { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); background: var(--orange); color: #fff; border-radius: 4px; padding: 3px 16px; white-space: nowrap; font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 700px) { .ep-style-broadsheet .epc-bs-top { grid-template-columns: 1fr; text-align: center; } .epc-bs-ad { align-items: center; } .epc-bs-date { justify-self: center; } .ep-style-broadsheet .epc-bs-bar { grid-template-columns: 1fr; text-align: center; gap: 4px; padding: 8px 0; } .epc-bs-bar > span:first-child { padding-left: 0; } .epc-bs-bar b { justify-self: center; padding: 3px 16px; } .ep-style-broadsheet .epc-bs-inside { grid-template-columns: 1fr; } } /* ==================================================== the flipping reader == An edition is already printed on A4 sheets by includes/epaper-pdf.php, and this turns those sheets: two up on a screen wide enough for a spread, one at a time on a phone, with the tools a reader of a paper expects along the foot. The pages are drawn onto canvases by PDF.js. Everything here is furniture around them, so the only thing that has to hold exactly is the aspect ratio of a sheet: the JavaScript sizes .epf-book, and every page fills its half. Nothing in this block is needed to read an edition. Without JavaScript the markup below it, the plain HTML edition, is what the reader gets. ========================================================================= */ .epf { display: none; } /* switched on by .is-flip */ .ep-read.is-flip .epf { display: block; } .ep-read.is-flip .ep { display: none; } /* Each of these carries a display of its own, which would otherwise beat the hidden attribute the reader sets on it. Same rule as the site's other panels. */ .epf-load[hidden], .epf-thumbs[hidden], .epf-sect[hidden], .ep-flipview[hidden] { display: none; } .epf { --epf-ground: #23231F; --epf-edge: rgba(255,255,255,.16); margin-top: 18px; background: var(--epf-ground); border: 1px solid var(--ink); box-shadow: var(--shadow-sm); } /* ---- the stage the paper sits on ---- */ .epf-frame { position: relative; } .epf-stage { position: relative; height: clamp(430px, 74vh, 1000px); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; /* A woven grey, so a white sheet reads as paper laid on a surface rather than as the page's own background. */ background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), transparent 60%), var(--epf-ground); touch-action: pan-y; } .epf.is-zoomed .epf-stage { overflow: auto; align-items: flex-start; justify-content: flex-start; } .epf.is-zoomed .epf-stage { cursor: grab; } .epf.is-dragging .epf-stage { cursor: grabbing; } .epf.is-zoomed .epf-book { margin: auto; } /* ---- the open paper ---- */ /* Sized in pixels by the reader, which fits it to the stage. The perspective is what makes a turning sheet lift off the page rather than shear flat. */ .epf-book { position: relative; flex: none; display: flex; perspective: 2400px; transform-style: preserve-3d; transition: transform .32s ease; } .epf-slot { position: relative; width: 50%; height: 100%; } .epf:not(.is-spread) .epf-slot-l { display: none; } .epf:not(.is-spread) .epf-slot-r { width: 100%; } /* A cover, or a last page with nothing facing it, is centred instead of pushed to one side of an empty half. */ .epf.is-spread.is-solo-r .epf-book { transform: translateX(-25%); } .epf.is-spread.is-solo-l .epf-book { transform: translateX(25%); } .epf.is-zoomed .epf-book { transition: none; } /* ---- a page ---- */ .epf-page { position: absolute; inset: 0; background: #fff; box-shadow: 0 6px 26px rgba(0,0,0,.45); overflow: hidden; } .epf-canvas { display: block; width: 100%; height: 100%; background: #fff; } /* The gutter shadow: a paper is not flat where it folds. */ .epf.is-spread .epf-slot-l .epf-page::after, .epf.is-spread .epf-slot-r .epf-page::after { content: ''; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; } .epf.is-spread .epf-slot-l .epf-page::after { right: 0; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.13)); } .epf.is-spread .epf-slot-r .epf-page::after { left: 0; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.13)); } /* ---- booked advertising ---- */ /* Laid exactly over where the advertisement was printed, from the rectangle the renderer recorded. Invisible until pointed at: the page already shows the ad, and the hotspot only has to be findable. */ .epf-hot { position: absolute; display: block; border-radius: 2px; box-shadow: 0 0 0 0 rgba(254,140,25,0); transition: box-shadow .18s ease, background-color .18s ease; } .epf-hot:hover, .epf-hot:focus-visible { background: rgba(254,140,25,.10); box-shadow: 0 0 0 3px rgba(254,140,25,.85); outline: 0; } /* ---- the sheet that turns ---- */ /* Hinged on the spine, so it swings across the left half exactly as a sheet of a paper does. Its two faces are the page you were reading and the page that lands face up. */ .epf-sheet { position: absolute; top: 0; right: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; z-index: 5; } .epf-sheet.is-going { transition: transform .62s cubic-bezier(.34,.05,.28,1); } .epf:not(.is-spread) .epf-sheet { width: 100%; } .epf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; } .epf-face-back { transform: rotateY(180deg); } /* The light across the sheet as it lifts. */ .epf-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0) 55%); opacity: 0; transition: opacity .62s ease; } .epf-sheet.is-going .epf-shade { opacity: 1; } /* One page at a time slides rather than swings: on a phone a sheet hinged at the edge of the screen swings mostly out of sight. */ @keyframes epf-in-next { from { transform: translateX(14%); opacity: .35; } to { transform: none; opacity: 1; } } @keyframes epf-in-prev { from { transform: translateX(-14%); opacity: .35; } to { transform: none; opacity: 1; } } .epf-page.is-slide-next { animation: epf-in-next .3s ease-out; } .epf-page.is-slide-prev { animation: epf-in-prev .3s ease-out; } /* ---- turning it ---- */ .epf-turn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 76px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.34); color: #fff; border: 1px solid var(--epf-edge); z-index: 6; } .epf-turn-prev { left: 10px; border-radius: 0 5px 5px 0; } .epf-turn-next { right: 10px; border-radius: 5px 0 0 5px; } .epf-turn:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); } .epf-turn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .epf-turn:disabled { opacity: 0; pointer-events: none; } .epf-turn svg { width: 20px; height: 20px; } /* ---- opening it ---- */ .epf-load { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--epf-ground); color: #fff; font-family: var(--sans); font-size: 13px; letter-spacing: .04em; } .epf-load p { margin: 0; color: rgba(255,255,255,.72); } .epf-load-bar { display: block; width: min(240px, 60%); height: 3px; background: rgba(255,255,255,.18); } .epf-load-bar i { display: block; width: 4%; height: 100%; background: var(--orange); transition: width .2s ease; } /* ---- the tools along the foot ---- */ .epf-tools { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--ink); border-top: 1px solid rgba(255,255,255,.1); } .epf-tools-g { display: flex; align-items: center; gap: 6px; flex: none; } .epf-tools-mid { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; } .epf-btn { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #fff; border-radius: 4px; font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1; } .epf-btn svg { width: 16px; height: 16px; } .epf-btn:hover:not(:disabled) { background: var(--orange); } .epf-btn.is-on { background: var(--ocean-dk); } .epf-btn:disabled { opacity: .3; cursor: default; } .epf-btn:focus-visible, .epf-slider:focus-visible, .epf-sect:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .epf-count { flex: none; color: rgba(255,255,255,.82); font-family: var(--sans); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; } /* The slider is the line a reader drags through the paper. */ .epf-slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; height: 18px; background: transparent; } .epf-slider::-webkit-slider-runnable-track { height: 2px; background: rgba(255,255,255,.28); } .epf-slider::-moz-range-track { height: 2px; background: rgba(255,255,255,.28); } .epf-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -5.5px; border-radius: 50%; background: var(--orange); border: 0; } .epf-slider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--orange); border: 0; } .epf-slider::-moz-range-progress { height: 2px; background: var(--orange); } .epf-sect { max-width: 210px; background: rgba(255,255,255,.1); color: #fff; border: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 8px; border-radius: 4px; } .epf-sect option { color: var(--ink); } .epf-text { flex: none; background: transparent; color: rgba(255,255,255,.72); font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; } .epf-text:hover { color: #fff; background: rgba(255,255,255,.1); } /* ---- the sheets, all of them ---- */ .epf-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; padding: 16px; max-height: 42vh; overflow-y: auto; background: #1A1A17; border-top: 1px solid rgba(255,255,255,.1); } .epf-thumb { display: block; text-align: center; color: rgba(255,255,255,.6); } .epf-thumb-shot { display: flex; align-items: center; justify-content: center; aspect-ratio: 595 / 842; background: rgba(255,255,255,.07); border: 1px solid transparent; overflow: hidden; } .epf-thumb-shot canvas { display: block; width: 100%; height: auto; } .epf-thumb-no { display: block; margin-top: 5px; font-family: var(--sans); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .epf-thumb:hover .epf-thumb-shot { border-color: rgba(255,255,255,.5); } .epf-thumb.is-on .epf-thumb-shot { border-color: var(--orange); } .epf-thumb.is-on { color: var(--orange); } /* ---- full screen ---- */ .epf:fullscreen { display: flex; flex-direction: column; border: 0; } .epf:fullscreen .epf-frame { flex: 1; min-height: 0; } .epf:fullscreen .epf-stage { height: 100%; } .epf:fullscreen .epf-thumbs { max-height: 30vh; } /* ---- narrower ---- */ @media (max-width: 800px) { .epf-stage { height: min(72vh, 620px); padding: 10px; } .epf-turn { width: 34px; height: 60px; } .epf-tools { flex-wrap: wrap; gap: 8px; } /* A row of its own. Set with the basis rather than a width, because the group's own `flex: 1` zeroes its basis, and a flex item with a basis of zero grows into whatever is left of the line instead of wrapping: the slider would then be squeezed to its minimum and hang off the page. */ .epf-tools-mid { order: 3; flex: 0 0 100%; } .epf-sect { max-width: 150px; } .epf-text { display: none; } /* the plain edition has its own way back */ } /* A reader who has asked for less movement gets none: the pages change without a sheet swinging across, which the script also honours. */ @media (prefers-reduced-motion: reduce) { .epf-sheet.is-going, .epf-book { transition: none; } .epf-page.is-slide-next, .epf-page.is-slide-prev { animation: none; } } /* ---- the way back to the flipping reader ---- */ /* Hidden in the markup: with the reader not running there would be nothing for it to switch to, so its own script is what reveals it. */ .ep-flipview { flex: none; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); color: #fff; border-radius: 4px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; } .ep-flipview:hover { background: var(--orange); } .ep-flipview svg { width: 14px; height: 14px; } /* Printing wants the paper, not the reader: the PDF is the thing to print, and the plain edition is what a browser can lay out on sheets. */ @media print { .epf { display: none !important; } .ep-read.is-flip .ep { display: block !important; } }