/* Prime Time 24: reader-facing design system. Every value is lifted from DESIGN-GUIDELINES.md, which is itself derived from PT24 Website.dc.html. Where this file and the guidelines disagree, the guidelines win. August 2026: the guidelines were re-cut from a Figma redesign of the front page, and the one change that reaches every rule below is that the paper now has a serif voice. See the type block for what that means and what it does not. How the file is ordered, because it is not obvious and it used to claim otherwise. The headings carried numbers: 2, 3, 4, 5.1 through 5.10, 6, 10, lifted from the design package's own section list, and by the time four passes had folded their work back in, the numbers ran 6, 5.2, 5.3, 5.4, 5.5, 3, 5.6, 5.6, 5.10, 5.8, 5.7, 5.9, 10, 10 down the file, with two 5.6s and two 10s. They are gone; the titles stayed. What orders this file is the cascade, and nothing else. Tokens, then the base, then the chrome a reader meets before any story, then the front page, the story page, the local hub, the footer, the failure states, and only then the width blocks and the phone, a media query that steps a rule has to come after the rule it steps. The last third of the file is later still on purpose: those sections re-open ones above them (the front page again, the story page again, You again) because they hold rules that have to outrank what is up there, and the comment at each one says which and why. Adding a rule near its relatives is right; moving one is a cascade change wearing a tidy-up's clothes. */ :root { /* Typography: three faces, three jobs, and no overlap between them. Until now the whole paper was set in one grotesque and hierarchy came from weight and spacing alone. It still largely does *within* a role; what the redesign adds is that a headline and a caption are no longer the same letterform at two sizes. --serif is the news voice: every headline, from the lead down to a brief. Newsreader is a screen-first old-style with enough contrast to carry a 50px lead and a low enough x-height ratio not to shout at 22px. --sans is everything a headline is not: standfirsts, body, meta, labels, nav, forms. It replaced Archivo, and the two Notos below are re-paired to it; they are not a fourth and fifth family in the system, they are this same neutral-grotesque role in the two scripts --sans cannot draw. --ui is for controls with a word in them: Subscribe, Read, Watch, Save. It is one notch geometric against --sans, which is what keeps a button reading as a button next to a label at the same size. Nothing that is not a control takes it. */ /* The two Notos ride in every stack, after the face that owns it. They are already declared per-language further down, where a page in Hindi or Kannada takes the whole role in the Noto that can draw it. This is the other half: a string that mixes scripts without saying so. `You` prints "English, हिन्दी, ಕನ್ನಡ and मराठी available" as one line of Latin-tagged text, and font matching is per glyph, so every Devanagari and Kannada letterform in it fell past Roboto to whatever the device happened to have, which on a phone without an Indic font is tofu. Both faces are loaded on every page already; naming them here costs nothing and is the difference between a legible line and a row of boxes. Latin never reaches them: Newsreader, Roboto and Jakarta all draw it. */ --serif: 'Newsreader', Georgia, 'Times New Roman', 'Noto Sans Devanagari', 'Noto Sans Kannada', serif; --sans: 'Roboto', 'Noto Sans Devanagari', 'Noto Sans Kannada', system-ui, sans-serif; --ui: 'Plus Jakarta Sans', 'Roboto', 'Noto Sans Devanagari', 'Noto Sans Kannada', system-ui, sans-serif; /* Tracking, as a multiplier rather than as a value. Nearly every label in this paper is set in caps with tracking: .04em on a status, .1em on a section head, .18em on the hatch over a blank crop, and all seventy-odd of those declarations were literals that a Devanagari or Kannada page then inherited unchanged. Neither script has an upper case for the idiom to be built on, and neither is drawn as a row of separate letters: the shirorekha runs across the top of a whole Devanagari word, and tracking saws it into pieces. `आज / नुक्कड़ / सवाल / आप` in the tab bar was being set at the .07em Latin caps want. The negative end is the same argument from the other side: -.02em on a 38px headline is an optical correction for Latin bowls and counters, and the design package asks for every one of them at zero in both Indic scripts. So the value stays where it was argued for, at the rule, and the script multiplies it: one token, redefined beside the families in the [lang] blocks below, because it is the same instrument answering the same question. A Latin fallback marked lang="en" inside a Hindi page gets its tracking back exactly as it gets Newsreader back. */ --track: 1; /* Colour */ --ink: #14120F; --paper: #FBF9F5; /* --ink's own channels, for the handful of places ink is wanted at an alpha rather than at full strength: a caption plate over a photograph, the hatch on a blank crop, a scrim, and the four shadows the sheets and the modal draw. CSS gives no way to take a hex custom property to an alpha, so the channels have to be a token of their own, which means these two lines and the two hexes above them have to move together. The same goes for --red-rgb, which exists for exactly one ring. */ --ink-rgb: 20, 18, 15; --red-rgb: 236, 31, 40; /* The two accents are the client's, and they are fixed. Both stepped by the redesign, the red a shade cooler and brighter, which is what let it come off the masthead's black bar and sit on cream as the Subscribe button; the gold warmed to match it. The values below are the ones in the approved design package (September 2026): Signature Red as the brand guidelines draw it, and the package's gold. For a while this sheet ran both darker to clear WCAG AA for small type (#E8141D / #D1121A / #8E5F1F); the client reviewed the package at these values and asked for exactly this look, so the accents went back and the bar was waived for them, knowingly, and only for them. The ink scale and --meta below still hold the 4.5:1 line. What survives from the audit is the mechanism, because it is the right shape regardless of the values: an accent used as a *mark* (a button ground, a live dot, a chip) takes --red; an accent used as *type* takes the token named for the ground it sits on, --red-on-paper or --red-on-ink, through --red-type, which every dark ground below re-points. Today the two answers are the same colour. Keep the seam anyway: the day a ground needs its own answer, this is where it goes, and tests/test_accent_contrast.py still holds the usage rules. Measured, for the record, against the darkest ground each is printed on: white on --red 4.38:1 --red-on-paper on --wash 3.68:1 --red-on-ink on --dark-inset 3.73:1 --gold on --wash 2.57:1 --gold-on-ink on --dark-inset 5.35:1 --slot is the well an image sits in (an avatar, an embed, a day's shot) and no accent sets type on it. */ --red: #EC1F28; --red-on-paper: #EC1F28; --red-on-ink: #EC1F28; --gold: #C7862B; --gold-on-ink: #C7862B; /* Revolution Gold, from the brand palette. The guidelines' rule is that a focus ring is gold "so it stays visible on red and on black", and on cream it measures 1.37:1, invisible. So the ring is red on the paper's grounds and gold on every ground that knocks its type out, through the same re-point the accents use. */ --focus-gold: #FCD404; --ink-70: #3A362E; --ink-60: #57534A; --ink-45: #6B665C; /* The bottom two steps were set by eye and both failed WCAG AA against the backgrounds they are actually printed on. On --wash, the old --ink-30 (#8A8378) measured 3.16:1 and the old --ink-18 (#A9A296) 2.13:1, and between them they carried nearly every label, note and placeholder in the system, all of it below 18px, where 4.5:1 is the bar. --ink-30 is now the muted step for small text and clears 4.5:1 on both --wash (4.64:1) and --paper (5.24:1). That puts it close to --ink-45, which is the honest answer: a warm grey scale on a cream page does not have three distinguishable passing steps, and pretending it did is what produced two that failed. --ink-18 clears 3:1 and no more. It is for non-text furniture (carets, disabled fills, rules) and for type at 18px and above. Anything smaller takes --ink-30 or darker. */ --ink-30: #6F695F; --ink-18: #857E73; /* The redesign's one neutral grey, and the only one on the page that is not warm. It carries the whole provenance idiom: "Updated 5 days ago", the thread card's date range, a node's date and its role, which is type that is deliberately not part of the paper's cream-and-ink voice. Drawn as #747474 in the Figma, printed as #717171 in the approved package. It clears --paper at 4.64:1; on --slot, the blank shot and the missing embed, it measures 3.89:1, a step darker (#656565) cleared that too, and was set aside with the accents when the package's values were restored. */ --meta: #717171; /* The rules. --rule and its two steps up are the warm hairlines inside a card or between two items of a list. The redesign draws every *structural* rule (the masthead, the nav, the column divider, the band between two rows of the river, the border of a box) as a 1px ink hairline instead, which is what gives the page its grid. Those take --ink directly. */ --rule: #E2DDD3; --rule-strong: #D8D2C6; --rule-heavy: #C9C2B4; /* The card ground. A card in this system is a box the reader is meant to read as sitting *on* the page rather than as part of it, the settings rows on You, an area chip, a day in the archive strip, the map card in the Local rail, the switch's own knob. What makes it sit on the page is that it is not the page: cream on cream is a hairline with nothing inside it. It was #fff at every one of those, which is how it came to be the one ground in the system with no name. Naming it is most of the point, a card ground and the knockout below are two different jobs that happen to resolve to the same value today, and if the paper's grounds are ever re-warmed the type knocked out of red must not follow them. */ --card: #FFFFFF; --wash: #EFEBE3; --wash-warm: #F6F2EA; --slot: #EAE5DB; --dark-inset: #241F1A; --verified: #1E7A46; --amber: #D9A227; --ad-wash: #F2EEE6; /* Knocked out of a dark or a coloured ground, and there are two answers depending on which. On --ink the paper's own cream *is* the knockout: the runner, the footer, the archive bar, the ink board and every ink button set their type in --paper, and the scale below is that same cream at the alphas the design draws its secondary knockout type, its hairlines and its rules at. On --red it is not. --red is a bright warm red, and cream laid on it goes a shade yellow, a Subscribe button whose word is dirtier than the LIVE chip beside it. Type and marks on red take the solid step instead, and that is now a rule and not a preference: white on --red clears 4.5:1 (4.62:1) and the cream does not (4.39:1). The red was moved to make the first of those true; the second is why nothing on a red ground may be set in --paper or in any of the --knock steps below. */ --knockout: #FFFFFF; /* The scale, and the floor under it. An alpha is not a contrast ratio. The step says how much of the cream survives; what reaches the eye is that cream mixed with the ground behind it, so nothing here means anything until it is composited over the ground the rule actually sits on. Done for both dark grounds: on --ink on --dark-inset --knock-75 10.21 9.24 --knock-68 8.55 7.84 --knock-62 7.27 6.75 --knock-55 5.95 5.61 --knock-50 5.11 4.88 --knock-45 4.36 4.22 --knock-28 2.43 2.47 --knock-22 1.95 2.01 --knock-16 1.57 1.64 --knock-14 1.47 1.53 Which puts the floor for type at --knock-50, and puts it there for a reason rather than by taste: .46 is the first alpha to clear 4.5:1 on --ink and .48 the first on --dark-inset, and .50 is the nearest step above both. Every step above it clears the bar on either ground; no step below it clears it on either. There is no third case to remember. The scale used to run a step lower than that and set type there. The footer's legal line, its Privacy / Terms / DPDP links and the names in its link columns that are stated rather than linked all sat at --knock-45 and measured 4.36:1, on every page of the paper, since the footer is on every page. The synchronised player's chapter mark and its segment labels sat lower still. They now sit at the floor. Below the floor the steps are lines, not letters: a card's edge, the rule under a row, the boundary of a control. Two bars apply there and neither is 4.5, a boundary that has to be seen to work the control it draws is held to 3:1, which --knock-45 clears and --knock-28 does not, and a hairline that is only there to separate two things the reader can already tell apart is decoration and is held to nothing. The scale had three steps no rule read: .42, .18 and .12, the first of them left behind by this audit when its two rules moved up to the floor. They are gone. A step nothing uses renders as nothing and so reads to the next person as a sanctioned answer for "quieter than --knock-50" rather than as a value nobody has checked, and every one of the three sat below the floor. One piece of type is exempt, and only because the markup says so: the diamond between the runner's passes carries aria-hidden, which makes it decoration in the same sense a rule is. It stays at --knock-28. The test for this file checks that claim against the template rather than taking it on trust, so if the attribute ever goes the diamond stops being exempt. */ --knock-75: rgba(251, 249, 245, .75); --knock-68: rgba(251, 249, 245, .68); --knock-62: rgba(251, 249, 245, .62); --knock-55: rgba(251, 249, 245, .55); --knock-50: rgba(251, 249, 245, .50); --knock-45: rgba(251, 249, 245, .45); --knock-28: rgba(251, 249, 245, .28); --knock-22: rgba(251, 249, 245, .22); --knock-16: rgba(251, 249, 245, .16); --knock-14: rgba(251, 249, 245, .14); /* Layout The gutter is the biggest single change to the page's proportions. It was a flat 32px, which on a 1728px screen gave the paper 1664px of column and no margin worth the name, every rule ran nearly edge to edge and the page had no frame. The redesign draws about 6% a side, which is 104px at 1728, and that is where the ceiling comes from: past 1730px or so the margin stops growing and the columns take the rest. The floor is 20px, which is a phone. Between the two it is proportional, so a 1280px laptop gets 77px and a 1024px one gets 61px rather than all three getting the same 32. */ --max: 1920px; --max-story: 1920px; --max-footer: 1920px; --gutter: clamp(20px, 6vw, 104px); /* A fifth of the page, not a fixed measure. The rail carries the slot and Threads you follow now, the story timeline moved into the main column beside the lead picture, so the rail is no longer sized for a ring, a date, a role and a two-line headline across it, and a percentage tracks the column rule at every width instead of drifting off it above or below the one viewport a flat px was measured at. */ --rail: 20%; --rail-wide: 480px; /* Spacing: a 4pt scale, named. The masthead and the nav had their gaps set one number at a time, which is how 26px of row gap ended up next to an 8px search offset and a 10px action gap: three values that were each defensible alone and read as three unrelated decisions together. New work measures from here. */ --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* The masthead row's controls all stand this tall, the search field, Subscribe and the account door. One number so a row of controls doing the same job reads as one size of control, not four. Trimmed from 48px: the row was reading as loud furniture rather than a quiet strip of utilities under the wordmark. */ --control-h: 38px; /* The nav band's own height, so the active-item rule and the two fences in the format axis have one number to measure from. */ --nav-h: 56px; } /* Which red, and which gold. An accent used as type has to answer to the ground under it, and the ground is decided by the DOM, not by the selector: `a:hover` is one rule and it fires over cream in the river and over ink in the runner. There is exactly one mechanism in CSS for "take the value my ground set", and it is a custom property, which is what --track already is: one token, redefined where the answer changes, read unchanged everywhere else. So --red-type and --gold-type resolve to the paper's answers here, and every ground that knocks its type out redefines them below. The list is not a judgement about which panels happen to contain an accent today; it is every rule in this file that sets a dark background *and* a knocked-out colour, because such a rule is precisely a declaration that type inside it is read against ink. tests/test_accent_contrast.py recomputes that set from this file and fails if the two lists have come apart, so an ink panel added later cannot quietly inherit the paper's red. */ :root { --red-type: var(--red-on-paper); --gold-type: var(--gold); --focus: var(--red); } .account-btn[aria-expanded="true"], .lang-switch button.is-active, .chip.is-selected, .archive-bar, .runner, .media-caption, .media-mark-note, .btn-ink, .btn-line:hover, .filter-chip.is-active, .nukkad, .nukkad-card, .btn-wide:hover, .player, .sawaal-board, .footer, .toast, .new-updates, .skip-link:focus, .pwa-offline, .you-cta, .daily-day.is-current, .event-hero, .event-slab, .event-updates, .event-sponsors, .onair-clock, .onair-slab, .onair-flag.is-desk, .onair-crawl .track, .onair-crawl .tail, .onair-post-head, .onair-sponsors.is-post, .btn-line:active, .follow-tile, .gallery-nav, .gallery-count, .tile-clip, .wa-link { --red-type: var(--red-on-ink); --gold-type: var(--gold-on-ink); --focus: var(--focus-gold); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* `clip`, never `hidden`: hidden makes body a scroll container and silently kills position:sticky on the top bar and the runner. It lived in the phone block, which was the width it was noticed at, but `.nukkad` is `100vw` and a viewport unit counts the scrollbar, so on any desktop with a classic scrollbar every page carrying a Nukkad band scrolled sideways by its width. The band's bleed is the whole page's business, so the guard is. */ overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--sans); font-synthesis: none; /* no faux bold */ -webkit-font-smoothing: antialiased; } /* Copy guard. The selection itself is turned off on the reading surfaces, so the long-press menu and the drag never start; the script handles the clipboard. Anything the reader types into is exempt, because a search field you cannot select inside is a broken search field. */ /* Scoped to the furniture, not the journalism. This was on `body`, which took the article text with it, and the cost on a phone was larger than the copy guard is worth. A reader could not select a sentence, so iOS Look Up and Translate, and Android's select-to-search, were dead on a paper published in four scripts, where looking a word up across scripts is the single most likely reason to select anything. `-webkit-touch-callout: none` is gone entirely rather than scoped: it killed the iOS long-press menu on links and images, which directly contradicted `pt24.js`, where `contextmenu` is deliberately re-permitted on `a, img` because "saving a photograph or copying a link to send to somebody is not what this is about". The CSS was defeating the script's own stated intent. */ .masthead, .mtop, .mservice, .tabbar, .msections, .runner, .footer, .cities, .pwa-sheet, .pwa-firstrun, .toast { -webkit-user-select: none; user-select: none; } input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--red-type); text-decoration: underline; text-underline-offset: 2px; } button { font-family: inherit; } img { max-width: 100%; } /* Never apply a CSS filter to the logo, and never place it on a coloured box. */ .pt24-logo { display: block; } /* Clock times are tabular. */ .tnum { font-variant-numeric: tabular-nums; } /* Motion: only two animations exist. */ @keyframes pt24pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } @keyframes pt24run { from { transform: translateX(0) } to { transform: translateX(-50%) } } .pulse { animation: pt24pulse 1.8s ease-in-out infinite; } .pulse-fast { animation: pt24pulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pulse, .pulse-fast, .runner-track { animation: none !important; } } .pt24scroll { scrollbar-width: thin; scrollbar-color: var(--rule-heavy) transparent; } .pt24scroll::-webkit-scrollbar { height: 6px; } .pt24scroll::-webkit-scrollbar-track { background: transparent; } .pt24scroll::-webkit-scrollbar-thumb { background: var(--rule-heavy); border-radius: 3px; } .shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .shell-story { max-width: var(--max-story); margin: 0 auto; padding: 0 var(--gutter); } /* ------------------------------------------------------------------ */ /* Masthead: logo first at top left, always */ /* */ /* There is no utility strip any more. It was a 38px band of ink */ /* above the publisher's own name carrying nine items, none of them */ /* news. Date and weather are the dateline under the wordmark now; */ /* the clock and AQI moved to the phone's own strip. The rest are */ /* under the account door and in the footer. See pt24_base. */ /* */ /* The row is brand, then search, then the three controls: Subscribe, */ /* the edition, the account door. Every one of them stands at */ /* --control-h, and the only fill on the row is the red on Subscribe, */ /* the one control that */ /* is asking the reader for something rather than telling them where */ /* they are. */ /* ------------------------------------------------------------------ */ .masthead { background: var(--paper); border-bottom: 1px solid var(--ink); } /* Lifted out of the page's own paint order, because two of the masthead's controls open downwards into it: the account panel and the verticals panel both hang below the row they belong to and overlap whatever
is showing. Without this they are painted first and the front-page photograph covers them. `view-transition-name` on this element (see the transitions block at the end of this file) already makes it "form a stacking context" per the View Transitions spec, so the numbers inside the masthead are a private scale and never meet these. This one is read against the document: above everything in
(the highest is .you-head, sticky at 40) and below the scrim at 70, so an open modal still dims the masthead as it should. Desktop only. Below 821px the row and the nav are `display: none` and there is no dropdown left to rescue, while the masthead still carries .runner, which is deliberately stacked *under* the phone's top bar, and lifting the whole element would invert that. */ @media (min-width: 821px) { .masthead { position: relative; z-index: 50; } } .masthead-row { display: flex; align-items: center; gap: var(--space-lg); padding: 16px 0; } /* The wordmark and the dateline are one block, because they are one statement: which paper, and which day of it. The dateline used to be in a band of its own two rows up, where it read as a status bar. It is the shrinkable item on this row, and that is the whole of how the row fits. The dateline ran to 585px on one line when it still carried four facts: date, clock, weather, air, which was more than the design allowed for; the design drew three and no clock. As flex:none the block sized to that 585px and refused to give any of it back, so the search field, the only other item that can flex, paid: at 1180px it had collapsed to 74px, which is a magnifier and no room to type. It is two facts now, but the shrink is what holds the row together whatever the dateline grows back to. Shrinkable and floored at 0, the block gives width up instead and .masthead-meta's own flex-wrap takes the dateline to a second line. Four facts on two lines is a dateline either way; a 74px search field is not a search field. The floor that matters is on .searchbox below, not here. */ .masthead-brand { flex: 0 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; } /* The master wordmark, not the square lockup. The desktop row is the widest masthead the paper gets and it had the room to spell the name out; the square mark was chosen when the row was thought of as a toolbar, and a toolbar is not what a masthead is. Never filtered, never on a coloured box; it carries its own. The negative margins are not a nudge. pt24-wordmark-light.png is a 624x212 file with 582x76 of letterform in the middle of it: 64% of its height and 7% of its width are transparent padding baked into the art. Sizing the *box* therefore sizes the padding: `height: 46px` drew PRIMETIME24 at 17px tall in a 122px masthead, which is a masthead whose publisher's name is smaller than its own nav. So the box is set to the height that puts the letterform at the 26px the design draws it at, and the art's own padding is then taken back out of the layout: 74 * 68/212 = 23.7px at the top and the same at the foot, and 74 * 21/212 = 7.3px at the left, the box is sized by its height, so the left inset is that height against the *height* of the canvas too, not against its width. That is what lands the P on the gutter. The row measures 26.5px of letterform, which is what it should have been measuring all along. If the art is ever re-exported without the padding, delete the margins and set the height to 27px. */ .masthead-mark { display: block; } .masthead-mark .pt24-logo { width: auto; height: 74px; margin: -24px 0 -24px -7px; } /* Day and weather. Two facts, one line, no separator between them; they are a dateline, and a dateline is not a list. The clock and the AQI figure used to run alongside; both are gone, not hidden, a dateline reads as a quiet caption under the wordmark only when it says as little as it needs to. In --ui rather than --sans: this line and the controls to its right are the masthead's own voice, and it is the one piece of running text in the system that is neither a headline nor body copy. */ .masthead-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font: 400 13px var(--ui); color: var(--ink-60); } .masthead-meta .dot { width: 6px; height: 6px; margin-right: 4px; } /* 460px and no more, 220px and no less. The maximum is because the slack in the row belongs in the margin in front of the field rather than in the field: one that grows to 800px on a wide screen is not a better search field, it is a search field that has stopped looking like one. The minimum is the load-bearing half. It is what makes the row's priority explicit (the dateline yields before the field does), and it is why the masthead needs no width breakpoint to stay usable. 220px holds the placeholder to about "Search Stories, Threads..." and leaves room to type; the narrowest desktop lowers it once, below. */ .searchbox { flex: 1 1 460px; min-width: 220px; max-width: 460px; margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); height: var(--control-h); border: 1px solid var(--ink); border-radius: 0; padding: 0 var(--space-sm); background: none; } .searchbox .mag { color: var(--meta); font-size: 13px; } .searchbox input { border: none; outline: none; background: none; font: 400 13px var(--sans); color: var(--ink); width: 100%; } /* `.searchbox input` is (0,1,1) and the global `:focus-visible` is (0,1,0), so `outline: none` above wins wherever the rules sit and keyboard focus produced no visual change at all. The wrapper carries the border, so the ring goes there rather than on the field. */ .searchbox:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .searchbox input::placeholder { color: var(--meta); } /* The search page's own field is phone-only: above 820px the masthead's is a few pixels away. Hidden here and shown in the `max-width: 820px` block far below, same specificity, later rule wins, so no `!important` is needed and the file keeps its four. */ .searchbox-phone { display: none; } /* Words and a caret, not a filled black button. Where you are reading from is a statement about this page rather than an action, and the black fill was making the loudest control on the row out of the one item on it that is already true. */ .edition-block { display: flex; align-items: center; flex: none; } .edition-btn { display: flex; align-items: center; gap: var(--space-2xs); height: var(--control-h); background: none; border: none; border-radius: 0; padding: 0; font: 600 13px var(--ui); color: var(--ink); cursor: pointer; white-space: nowrap; } .edition-btn:hover { color: var(--red-type); } .edition-btn .caret { color: var(--ink); font-size: 9px; } .btn-subscribe { display: inline-flex; align-items: center; flex: none; height: var(--control-h); background: var(--red); color: var(--knockout); border: none; border-radius: 0; padding: 0 16px; font: 600 13px var(--ui); cursor: pointer; white-space: nowrap; } .btn-subscribe:hover { background: var(--ink); } /* ------------------------------------------------------------------ */ /* The account door */ /* */ /* One control where there were three. Sign in was a 13px text link and */ /* the language switch a 44px-a-side segmented control, and between them */ /* they spent a third of the row's right end on two things a reader */ /* touches once a session. Both are in the panel. */ /* ------------------------------------------------------------------ */ .account { position: relative; flex: none; display: flex; } .account-btn { width: var(--control-h); height: var(--control-h); display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: none; color: var(--red-type); cursor: pointer; padding: 0; } .account-btn svg { width: 18px; height: 18px; display: block; } .account-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); } /* A flat panel, 1px ink, no shadow and no motion, the same object the nav's two dropdowns are. A dropdown here is a piece of the page that was folded, not a thing that arrives. */ .account-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 240px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--ink); padding: 16px; } .account-panel[hidden] { display: none; } /* You, arriving from the nav's format axis where it never belonged. It leads the panel now that Sign in has gone, and sits above the language switcher already reads in, identity, then the settings that identity carries. Bolder than the service links under FROM THE PAPER: it is the reader's own screen, not one more product. */ .account-you { font: 500 16px var(--sans); color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .account-you:hover { color: var(--red-type); } .account-you.is-active { font-weight: 600; color: var(--red-type); } .account-label { font: 700 10px var(--sans); letter-spacing: calc(.1em * var(--track)); color: var(--meta); } .account-links { display: flex; flex-direction: column; gap: 7px; } .account-links a { font: 400 13px var(--sans); color: var(--ink); } .account-links a:hover { color: var(--red-type); } /* A segmented control, so the segments are laid out by the control's height rather than by each chip's own line box. EN is Latin at one cap height, हिन्दी hangs a matra above it and drops a descender below, ಕನ್ನಡ sits somewhere else again: three scripts baseline-aligned to their own metrics is exactly the ragged row the chips used to draw. Centre them in a fixed box and the row is level whatever is set in it. */ .lang-switch { display: flex; align-items: stretch; width: 100%; height: 40px; border: 1px solid var(--ink); border-radius: 0; overflow: hidden; } /* `font-family: var(--sans)` and not the inherited one. Every chip in this control carries its own `lang` (the template writes it from `language.name`), so the two blocks below already redefine --sans on the button itself. What was stopping that reaching the glyphs is that nothing on the button asked for --sans: `button { font-family: inherit }` takes the parent's *computed* family, which was resolved back at `body`, in whatever script the page as a whole is in. Asking for the token here resolves it on the element, which is where the fact lives. That also fixes the EN chip inside a Hindi or Kannada page. It carries `lang="en"`, and the `[lang="en"]` block exists precisely so an English string in a page set in another script comes back to Roboto rather than being drawn in the Noto face the page inherited. */ .lang-switch button { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; padding: 0 var(--space-xs); line-height: 1; color: var(--ink-45); background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 600; } .lang-switch button + button { border-left: 1px solid var(--ink); } .lang-switch button.is-active { background: var(--ink); color: var(--paper); } /* ------------------------------------------------------------------ */ /* The two Notos, bound to the attribute that says which script it is. */ /* */ /* The guidelines say Devanagari and Kannada are set in the two Notos, */ /* pt24_base loads both faces, and until now the only thing on the */ /* page that used either of them was the language switcher's own chips: */ /* `.lang-deva` and `.lang-knda` were applied from `script_class`, and */ /* `script_class` reaches exactly three elements in the whole codebase, */ /* all three of them a chip in the switcher. Every other Hindi and */ /* Kannada string in the paper, a headline, a standfirst, the nav, the */ /* body of a story, asked for Roboto and Newsreader, neither of which */ /* has a glyph for either script, and got whatever the device happened */ /* to have. Two readers of the same Hindi story on two phones were */ /* reading it in two different typefaces, and neither was ours. */ /* */ /* Bound to `lang` rather than to a class because `lang` is the fact. */ /* It is already on for the reader's own language and already on */ /* every string the API marks as a fallback, which is what makes an */ /* untranslated English headline inside a Hindi page come back to */ /* Newsreader on its own, the attribute changes, so the tokens change */ /* with it. */ /* */ /* Written as token redefinitions and not as `font-family` rules, which */ /* is the whole reason this can be four short blocks instead of a fight */ /* with every `font:` shorthand in the stylesheet. A custom property is */ /* resolved where it is used and inherits from wherever it was last */ /* set, so `h1.story { font: 600 38px/1.12 var(--serif) }` picks up */ /* Noto inside a Hindi story and Newsreader outside it without either */ /* rule knowing the other exists. */ /* */ /* There is no serif for either script. That is a gap in what is */ /* available, not a decision made here, and the guidelines name it as */ /* one, a Devanagari headline sets in the Noto face rather than in a */ /* Latin serif that would draw it as tofu. */ /* */ /* These four blocks are also the only place in the stylesheet where a */ /* family name is written out. `.lang-deva` and `.lang-knda` used to be */ /* a fifth and sixth, two rules naming the two Notos directly, doing */ /* by hand what the attribute now does by inheritance, and they are */ /* gone; the chips carry `lang` and ask for `var(--sans)` instead. The */ /* one family outside this block is the stack trace on the API-down */ /* page, which is monospaced, only ever draws under DEBUG, and is */ /* argued for at the rule. */ /* ------------------------------------------------------------------ */ [lang="hi"], [lang="mr"] { /* The package's Hindi stacks, verbatim. The Latin face leads each one and the Devanagari face rides behind it, so a numeral, a "PT24" or an English word inside a Hindi line is drawn by Newsreader, Roboto or Jakarta and every Devanagari letter falls through to the Noto that can draw it, a per-glyph fallback, which is what the browser does anyway. Headlines get a serif at last: Noto Serif Devanagari, paired with Newsreader, is the package's answer to the gap the guidelines used to record. Kannada rides at the end of each of these for the same reason Devanagari rides at the end of the Latin stacks: a Hindi page names the paper's other languages in their own scripts, and one of them is not this one. */ --serif: 'Newsreader', 'Noto Serif Devanagari', 'Noto Sans Devanagari', Georgia, 'Noto Sans Kannada', serif; --sans: 'Roboto', 'Noto Sans Devanagari', 'Noto Sans Kannada', system-ui, sans-serif; --ui: 'Plus Jakarta Sans', 'Noto Sans Devanagari', 'Roboto', 'Noto Sans Kannada', system-ui, sans-serif; /* See --track at the top of the file: the letter-spacing every label in the system asks for is a Latin caps idiom, and Devanagari has neither the caps nor the separate letterforms it is built on. */ --track: 0; } [lang="kn"] { --serif: 'Noto Sans Kannada', 'Roboto', 'Noto Sans Devanagari', system-ui, sans-serif; --sans: 'Noto Sans Kannada', 'Roboto', 'Noto Sans Devanagari', system-ui, sans-serif; --ui: 'Noto Sans Kannada', 'Plus Jakarta Sans', 'Noto Sans Devanagari', system-ui, sans-serif; --track: 0; } /* An English string inside a page in another script comes back to the paper's own three faces. This is the half that makes the marking worth anything: the API labels a fallback row `lang="en"` precisely so the reader can see it is not their language, and it should look like the paper it came from. */ [lang="en"] { /* The Notos ride here too, at the end, for the reason given at the top of the file, and this is the block that decides it, not `:root`. An English page carries `lang="en"` on ``, so this rule is what every string on it resolves against, including the ones that name the other three languages in their own scripts. Without them here the You screen's "English, हिन्दी, ಕನ್ನಡ and मराठी available" was tofu on any device with no Indic font of its own, on the one screen whose job is to offer a reader their own language. */ --serif: 'Newsreader', Georgia, 'Times New Roman', 'Noto Sans Devanagari', 'Noto Sans Kannada', serif; --sans: 'Roboto', 'Noto Sans Devanagari', 'Noto Sans Kannada', system-ui, sans-serif; --ui: 'Plus Jakarta Sans', 'Roboto', 'Noto Sans Devanagari', 'Noto Sans Kannada', system-ui, sans-serif; --track: 1; } /* The dot. It is the air-quality swatch on the phone service strip, the pulse on a LIVE chip, and the state light on a followed thread, one 7px circle whose colour is set by whatever is using it. .locator and .social went with the utility strip. The first was the bullseye in front of the edition name, which the edition selector now prints in words; the second was five glyphs in five 20px circles, and the footer and the account door both carry those links in words instead. */ .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* ------------------------------------------------------------------ */ /* Navigation */ /* */ /* A --nav-h band between two ink hairlines. The subjects lead at 14px */ /* and 28px apart, this row is the paper's contents page, and it used */ /* to be set at 14.5px with 12px of padding, which made the taxonomy the */ /* smallest type in the chrome and packed it tight enough to read as a */ /* toolbar. The redesign took it to 18px and 39px; the narrow-desktop */ /* step below then took it back down, and the step is where it actually */ /* draws on every screen under 1700px, which is most of them. */ /* */ /* The right end holds the format axis between two short fences and, */ /* past them, the one control in the row drawn as a button. */ /* ------------------------------------------------------------------ */ /* `flex-wrap: wrap` at every width, not below a breakpoint. This row's content is the edition's own taxonomy. Bengaluru publishes eleven subjects; another edition publishes six. There is no viewport width at which "the nav fits" is true for both, so the width at which it drops to a second line cannot be a media query; it has to be whatever width this edition's subjects, the format axis and the button actually stop fitting. It used to wrap only under 1000px, and between about 1038px and 1300px the row simply ran off the right of the viewport by up to 254px. Wrapping and not scrolling: .nav-verticals-panel is absolutely positioned inside this row, and an overflow container would clip the panel on both axes. */ .nav { display: flex; align-items: stretch; flex-wrap: wrap; column-gap: 28px; row-gap: 0; min-height: var(--nav-h); border-top: 1px solid var(--ink); } /* On an alert day the runner closes itself with a 2px full-bleed red rule, and the nav's own 1px hairline is inset to the shell, stacked, they read as one rule that changes width at both ends. Suppress the second. No runner means no adjacency and the hairline returns on its own. */ .runner + .shell .nav { border-top: 0; } .nav a { display: flex; align-items: center; padding: 0; font: 500 14px var(--sans); color: var(--ink); } /* A section name is a name. "Fact-check" breaking after the hyphen and taking the nav to two lines with it is not a narrow-screen compromise, it is a different word. The row steps its type down instead; see below. */ .nav a, .nav-verticals-btn { white-space: nowrap; } .nav a:hover { color: var(--red-type); } /* Ink at 600 with a red rule under it, flush to the band's own bottom hairline. The subjects do not go red on selection: red in this row is reserved for the format axis, where it is the only thing distinguishing two kinds of link that sit side by side. */ .nav a.is-active { font-weight: 600; color: var(--ink); box-shadow: inset 0 -3px 0 var(--red); } /* The service end of the row: the format axis, alone now. The auto margin keeps this group right-aligned on whichever line it wraps to. Explore more used to share this wrapper, bundled with the format axis so the two would not wrap to different lines independently; it has since moved into the account door, and Verticals is its own sibling in the row rather than sharing this wrapper. */ .nav-service { margin-left: auto; align-self: center; flex: none; display: flex; align-items: center; min-height: var(--nav-h); } /* The format axis, fenced by a rule on each side. Watch and My Threads answer a different question from Civic / India / Politics, and mixing the two on one line asked the reader to notice the difference from the type alone. The fences are 24px, not the band's full height: a full-height rule reads as a column division, and this is a bracket around two words. */ .nav-formats { flex: none; display: flex; align-items: center; height: 24px; padding: 0 16px; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); } /* Each format its own button, so the rule between them reads the same as the fence around the group, Watch and My Threads are two separate places to go, not one label with a gap in it. */ .nav-formats a.format { font: 500 14px var(--sans); color: var(--ink); padding: 0 12px; } .nav-formats a.format:first-child { padding-left: 0; } .nav-formats a.format:last-child { padding-right: 0; } .nav-formats a.format + a.format { border-left: 1px solid var(--ink); } .nav-formats a.format.is-active { color: var(--red-type); font-weight: 600; box-shadow: none; } /* Verticals: the paper's own segments, and the products panel beside them. Flat panels, 1px ink, no shadow and no motion: a dropdown is a piece of the page that was folded, not a thing that arrives. Set at the row's own weight and size rather than styled as a control. It is the seventh item on a row of six subjects and it reads as one of them, because that is what it is, the difference is what it opens, not what it ranks. Only the mark and the caret say it opens at all. */ .nav-verticals { position: relative; display: flex; } .nav-verticals-btn { display: flex; align-items: center; gap: 7px; padding: 0; font: 500 14px var(--sans); color: var(--ink); background: none; border: none; cursor: pointer; } .nav-verticals-btn:hover { color: var(--red-type); } .nav-verticals-btn .caret { font-size: 11px; color: var(--ink); } .nav-verticals-btn.is-active { font-weight: 600; box-shadow: inset 0 -3px 0 var(--red); } /* The flag, clipped to the glyph. The source is a square with the mark inset in a wide margin, so `object-fit` cannot help, cropping transparent padding is not a fit mode. This is the design's own window onto that square, in the design's own percentages: an oversized image inside a fixed box that shows the part of it the mark occupies. Sized in em so it tracks the row when the type steps down at 1180px rather than sitting at 17px next to 16px text. */ .nav-verticals-mark { position: relative; flex: none; overflow: hidden; width: .95em; height: 1.22em; } .nav-verticals-mark img { position: absolute; max-width: none; width: 226.89%; height: 181.34%; left: -63.12%; top: -36.12%; } .nav-verticals-panel { position: absolute; top: 100%; left: 0; z-index: 40; display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 8px; margin-top: 0; } .nav-verticals-panel[hidden] { display: none; } .verticals-links { display: grid; grid-template-columns: repeat(2, minmax(158px, 1fr)); } /* Scoped to the text list, not to the panel. These three describe a name set in the panel's type (a padding box, a size, a ground to light on hover) and the panel also holds the lockup grid below, where every one of them is either meaningless on an `` or, in the case of the ground, forbidden. */ /* Both cells again, for the reason the phone sheet's twin gives at `.msections-grid`: this list names a vertical it cannot link, and an unstyled `` in a padded list is a name sitting flush against its neighbours in the wrong size. */ .verticals-links a, .verticals-links span { padding: 10px var(--space-sm); font: 400 16px var(--sans); color: var(--ink); white-space: nowrap; } .verticals-links span { color: var(--ink-30); cursor: default; } .verticals-links a:hover { background: var(--wash); color: var(--red-type); } .verticals-links a.is-active { font-weight: 600; background: var(--wash); box-shadow: none; } /* Group headings inside the panel, printed only when there is more than one group to tell apart. */ .explore-label { font: 700 11px var(--sans); letter-spacing: calc(.1em * var(--track)); color: var(--meta); } /* Each product's own lockup, not its name set in the panel's type, Daily, Live, Nukkad and Sawaal are mastheads in their own right, the same way this paper's is. A two-up grid of tiles, not a list, so all four read at once as one set of marks. The source art is 139px wide; the tile is sized so the mark shows at that native resolution instead of being downscaled to a smudge. Never filtered, never on a coloured box, same rule as every other mark in the system, so each tile is bordered rather than filled. A vertical with no lockup of its own falls back to .verticals-links above, which is why both survive in one panel. */ .verticals-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* The unlinked lockup takes the tile too. The template keeps a mark with nothing behind it in place and drops only its link: "a mark with nothing behind it keeps its place and loses its link", and without this the tile it keeps its place in was drawn for its neighbours and not for it: no border, no height, a lockup floating in the gap between two boxes. The mark itself is never dimmed; a mark is not filtered in this system, so what says the tile is inert is the quieter border, not the art. */ .verticals-products a, .verticals-products > span { display: flex; align-items: center; justify-content: center; height: 100px; border: 1px solid var(--rule-strong); padding: 10px; } .verticals-products > span { border-color: var(--rule); cursor: default; } .verticals-products img { max-height: 100%; max-width: 100%; width: auto; display: block; } .verticals-products a:hover, /* The tile the reader is inside, said the only way a bordered tile can say it. The text list marks its active item by filling it; a mark may not be filled, so the tile states it with the one property it already owns, the same ink border hover lifts to, held rather than lifted. */ .verticals-products a.is-active { border-color: var(--ink); } /* ------------------------------------------------------------------ */ /* The narrow desktop, 821px to 1700px. */ /* */ /* Everything above this point is sized for the width the masthead is */ /* actually drawn at, which is now about 1730px, the gutter grew to 6% */ /* a side and the nav's subjects went from 14.5px to 18px, so the row */ /* that used to run out of width at 1180px runs out of it a good deal */ /* sooner. */ /* */ /* The order is deliberate: duplicates first, then decoration, then */ /* size, and never the taxonomy or the edition. Nothing here is hidden */ /* that is not printed somewhere else on the same screen. */ /* ------------------------------------------------------------------ */ /* First to give is the space between things, then the type. Eleven subjects at 18px with 39px between them want a little over 1700px on their own, which is why the ceiling is 1700 and not the 1440 it started at: between the two the row was back at full size, did not fit, and wrapped, so 1440 drew one line, 1600 drew two and 1728 drew one again. Stepping type and gaps back holds one line down to roughly 1300. Below that it wraps, which needs no rule, the wrap is on .nav at every width. */ @media (min-width: 821px) and (max-width: 1700px) { .nav { column-gap: 20px; } .nav a, .nav-verticals-btn, .nav-formats a.format { font-size: 13px; } .nav-formats { padding: 0 12px; } .nav-formats a.format { padding: 0 9px; } .masthead-meta { font-size: 12px; gap: 8px; } } @media (min-width: 821px) and (max-width: 1180px) { :root { --control-h: 34px; } /* The wordmark steps down before the search field does. It is 289px of a row that has 1140px for it and four controls, and the field was paying for it: at 900px the search had shrunk to its own magnifier with no room left to type in. */ .masthead-row { padding: 12px 0; } .masthead-mark .pt24-logo { height: 30px; } .searchbox { flex-basis: 260px; max-width: 260px; } .btn-subscribe, .edition-btn { font-size: 12px; } .btn-subscribe { padding: 0 12px; } /* Below 1000px the row does not have 240px of search to give after the wordmark, Subscribe, the edition and the account door have taken theirs, and a floor that cannot be met is an overflow rather than a floor. It comes down to 150px here, which is the last width at which the field is still a field. There is no cap on .masthead-brand. It had one: 300px, to force the dateline to wrap, and the cap living in a max-width block was itself the bug: at 1181px it lifted, the block sprang back to its full 510px and took the search field down to 74px, so the field got *smaller* as the viewport got larger. The floor on .searchbox does the same job at every width and has no edge to fall off. */ } /* The narrowest desktop the paper draws. */ @media (min-width: 821px) and (max-width: 1000px) { .searchbox { min-width: 150px; } } /* ------------------------------------------------------------------ */ /* The area picker and the edition picker */ /* */ /* Both are dialogs at every width. Above 820px they centre over a */ /* scrim; at 820px and below they dock as bottom sheets. The shared */ /* rules are here, the geometry is in the two media blocks, the phone */ /* sheet near the rest of the phone chrome, the centred modal in the */ /* min-width block below it. */ /* */ /* The desktop half used to be an inline band in the document flow: */ /* --wash under a 1px rule, which read as another section of the front */ /* page rather than as a question, and which pushed the river down by */ /* its own height every time it opened. */ /* ------------------------------------------------------------------ */ .cities { background: var(--wash); } .cities[hidden] { display: none; } .cities-inner { padding: 20px 0 22px; } .cities-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 18px; } .cities-head .copy { display: flex; flex-direction: column; gap: 3px; } /* The ask, at heading weight. It carries a verb now, so it is allowed to look like the thing the dialog is for. */ .cities-head h3 { font: 600 18px/1.25 var(--sans); margin: 0; letter-spacing: calc(-.005em * var(--track)); } .cities-head p { font-size: 12px; color: var(--ink-30); margin: 0; } .area-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .area-search { flex: 1; display: flex; align-items: center; gap: 9px; border: 1px solid var(--rule-heavy); background: var(--card); border-radius: 2px; padding: 10px 14px; max-width: 460px; } .area-search input { border: none; outline: none; background: none; font: 400 12px var(--sans); color: var(--ink); width: 100%; } .area-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .area-search input::placeholder { color: var(--ink-45); } .area-search .slash { margin-left: auto; font: 600 10px var(--sans); color: var(--ink-45); border: 1px solid var(--rule); border-radius: 2px; padding: 2px 6px; } .chip-rows { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; } .chip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .chip-label { font: 700 10.5px var(--sans); color: var(--ink-30); letter-spacing: calc(.08em * var(--track)); flex: none; } /* Pills are the one radius exception, at 100px. */ .chip { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--sans); background: var(--card); border: 1px solid var(--rule-strong); border-radius: 100px; padding: 6px 15px; cursor: pointer; color: var(--ink); } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; } .chip.is-selected .x { color: var(--knock-55); font-size: 10.5px; } .chip-free { font-size: 11px; color: var(--ink-45); } .chip-more { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--sans); color: var(--red-type); padding: 6px 4px; background: none; border: none; cursor: pointer; } /* Pinned to the bottom of the dialog at every width, not the end of a scroll. An edition with 250 areas otherwise puts the only way to commit a selection several screens below the fold. */ .cities-foot { flex: none; display: flex; align-items: center; gap: 14px; padding: 13px 26px calc(13px + var(--safe-bottom, 0px)); border-top: 1px solid var(--rule-strong); background: var(--wash); } .cities-foot p { font-size: 11.5px; color: var(--ink-30); margin: 0; } .btn-save { background: var(--red); color: var(--knockout); border: none; border-radius: 2px; padding: 10px 18px; font: 700 12px var(--sans); cursor: pointer; flex: none; font-variant-numeric: tabular-nums; } .btn-save:disabled { background: var(--rule-strong); color: var(--ink-45); cursor: default; } /* ------------------------------------------------------------------ */ /* The edition picker: city, and which day of it. */ /* ------------------------------------------------------------------ */ .archive-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid var(--rule-strong); } .archive-note { font-size: 11.5px; color: var(--ink-30); } /* A row of days, scrolled horizontally rather than wrapped: ten dates in a line read as a run of time, and the same ten in three ragged rows do not. */ .archive-days { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--rule-heavy) transparent; } .archive-empty { font-size: 12px; color: var(--ink-30); margin: 4px 0; } .archive-day { flex: none; width: 118px; display: flex; flex-direction: column; gap: 1px; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 10px 12px 11px; color: var(--ink); text-decoration: none; } a.archive-day:hover { border-color: var(--ink); } .archive-day .d { font: 700 19px/1 var(--sans); letter-spacing: calc(-.02em * var(--track)); } .archive-day .m { font: 700 10px var(--sans); letter-spacing: calc(.1em * var(--track)); color: var(--ink-45); } .archive-day .w { font: 600 11px var(--sans); color: var(--ink-45); margin-top: 4px; } .archive-day .n { font: 500 10.5px var(--sans); color: var(--ink-30); } /* The lead headline, clamped to two lines. It is what tells a reader which day they are actually looking for; a date alone rarely does. */ .archive-day .h { font: 500 11px/1.35 var(--sans); color: var(--ink-60); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .archive-day.is-today { border-color: var(--ink); border-width: 2px; padding: 9px 11px 10px; } .archive-day.is-today .d { color: var(--red-type); } /* Shown, not offered. Hiding a day with nothing in it would leave a gap in a run of dates, which reads as a bug in the list rather than as a quiet day. */ .archive-day.is-empty { background: none; border-style: dashed; opacity: .6; } .archive-day.is-empty .d, .archive-day.is-empty .m { color: var(--ink-45); } .edition-areas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-strong); } /* The back-edition bar. A five-day-old front page read as today's is the one way an archive can be worse than no archive, so it says so in the page and not only in the masthead button. */ .archive-bar { background: var(--ink); color: var(--paper); } .archive-bar .shell { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; } .archive-bar .flag { font: 700 10px var(--sans); letter-spacing: calc(.12em * var(--track)); color: var(--paper); border: 1px solid var(--knock-45); border-radius: 2px; padding: 3px 8px; } .archive-bar .when { font: 600 12px var(--sans); color: var(--knock-75); } .archive-bar a { margin-left: auto; font: 600 12px var(--sans); color: var(--paper); border-bottom: 1px solid var(--knock-45); padding-bottom: 1px; } .zone-groups { display: none; flex-direction: column; gap: 11px; margin-bottom: 18px; } .zone-groups.is-open { display: flex; } /* ------------------------------------------------------------------ */ /* Prime Alert runner: never "Breaking" */ /* ------------------------------------------------------------------ */ .runner { background: var(--ink); color: var(--paper); overflow: hidden; border-bottom: 2px solid var(--red); } .runner .shell { height: 38px; display: flex; align-items: center; gap: var(--space-lg); } /* The flag is the pulse and the red block it sits on, and no longer the words PRIME ALERT. The words were set in 11.5px caps at .1em on a red ground at the very start of the reading order, the loudest thing on the page, spent on a label for the band rather than on the alert running through it. The band still says what it is: red ground, a pulse, and the vocabulary intact for anything that cannot see it. */ .runner-flag { display: inline-flex; align-items: center; justify-content: center; background: var(--red); width: 34px; align-self: stretch; flex: none; } .runner-flag .dot { width: 7px; height: 7px; background: var(--knockout); } .runner-window { flex: 1; overflow: hidden; position: relative; height: 38px; } /* No gap here, and that is not a tidy-up. The track holds two passes and `pt24run` shifts it `translateX(-50%)`, so the shift lands on the repeat only if half the track is one whole pass *including the space before the next one*. A gap on the track sits between the two passes and is therefore counted once, so half the track fell 14px (half a gap) short of the repeat, and the band stepped sideways by that much every 38 seconds. The 28px belongs to the pass, below, where it is inside the width being halved. */ .runner-track { position: absolute; inset: 0; display: flex; align-items: center; gap: 0; width: max-content; animation: pt24run 38s linear infinite; font-size: 12px; white-space: nowrap; } /* One pass, and the two are identical by construction: every item carries its own trailing diamond (see the markup) and every pass its own trailing space. That is what makes half the track exactly one pass. `flex: none` because a pass must never be squeezed to fit a track it exists to overflow. */ .runner-pass { display: flex; align-items: center; gap: 28px; flex: none; padding-right: 28px; } /* Nothing to scroll. Set by pt24.js when one pass is already as wide as the window: the alerts all fit, so the band has no reason to move, and moving them anyway put the second pass on screen beside the first and printed the same headline twice. Motion here is a way of showing what does not fit, not decoration, so when everything fits it stops and the repeat comes off. */ .runner-track.is-static { animation: none; } .runner-track.is-static .runner-pass + .runner-pass { display: none; } /* The last separator has nothing after it once the repeat is gone. */ .runner-track.is-static .runner-pass > .runner-diamond:last-child { display: none; } .runner-track a { color: var(--paper); } .runner-track a:hover { color: var(--red-type); } /* Every timestamp is red, not just the lead's. The band carries three or four alerts and the reader is scanning for how recent they are; one red figure among three knocked-back ones said "this one is the lead", which is a distinction nothing else on the band draws and nobody was reading. */ .runner-time { font-weight: 700; color: var(--red-type); } .runner-diamond { color: var(--knock-28); font-size: 10.5px; } .runner-all { flex: none; font: 400 12px var(--sans); color: var(--paper); border-left: 1px solid var(--knock-28); padding-left: var(--space-lg); } .runner-all:hover { color: var(--red-type); } /* ------------------------------------------------------------------ */ /* Front page */ /* ------------------------------------------------------------------ */ .front { padding-bottom: 80px; } /* Main column plus a --rail column, a fifth of the page, not a fixed measure, divided by an ink hairline, not a gap. The divider used to be --rule, a warm near-white; it is ink now, and so is every other structural rule on the page. That single change is most of what makes the redesign read as a grid rather than as a stack. minmax(0, 1fr), not 1fr, a grid item's automatic minimum size is its content's min-content, and anything in the main column with a wide min-content pushes the column out and shoves the rail past the right edge. */ .split { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 0; } .split > .main { padding-right: 34px; border-right: 1px solid var(--ink); } .split > .rail { padding-left: 24px; display: flex; flex-direction: column; gap: 26px; } /* The lead's own band, closed off by a rule under the reading column only. Not the width of the page any more: the rail's own widgets end at their own height, short of the main column's, so a full-width rule left a stretch of it crossing empty rail space before the next section's rail resumed, a line with nothing on either side of it. The column divider still separates the two, so the main column closing its own band on its own is enough. */ .hero-section > .main { padding: 24px 34px 32px 0; border-bottom: 1px solid var(--ink); } .hero-section > .rail { padding: 24px 0 32px 24px; gap: 22px; } /* The lead reads top to bottom in the order a reader needs it: the signal, the provenance, the name of the story, what it is about, the picture. LIVE and the update line are above the headline again, which is where the design puts them, but they are two rows now rather than one, a red chip on its own line, then 14px of grey. What used to be wrong with them up here was that four pieces of metadata at badge scale were competing with each other before the story had been named; one chip and one line do not compete. */ .hero-flags { margin: 0 0 12px; display: flex; align-items: center; gap: 12px; } /* There was a `@media (min-width: 1280px)` block here and it is gone. It set the lead to 38px/1.12 with `text-wrap: wrap` and the standfirst to 16px on an 80ch measure, a step down from the 50px lead and the 20px standfirst the pre-redesign scale drew above 1280. The redesign brought the base rules to exactly those numbers, so three of the four declarations had become the base restated at a width, and the fourth was worse than redundant: a two-class selector beats `.standfirst`, so `font-size: 16px` outranked the reading-size restatement at the foot of this file and took `--read` off the lead's standfirst entirely. A reader at 140% got 140% of every paragraph on the page except the one under the biggest headline on it, and, because 1280 is the only width the 16 applied at, the standfirst also got *smaller* as the screen got larger, which is the same shape of bug the masthead's brand cap was. The greedy wrap the block existed for lives on `h1.hero` itself. */ /* The picture and the story's own formats-and-timeline column, side by side, both are introduced by the headline above the row, so they read as one thing rather than as a picture followed by a rail that happens to sit next to it. 3:2 of the row to the picture, which is roughly what a 4:3 crop next to a 320-ish-px column of buttons and a timeline card draws out to; the rail's own fixed width (`--rail`) is a different number solving a different problem, the true rail, past the column divider, is unrelated content and keeps its own width regardless of what this row does. */ .hero-media-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: 24px; align-items: stretch; margin-bottom: 26px; } .hero-media-row .media { margin-bottom: 0; } /* Stretched to the row's height, which the picture sets. The format row sits at its own height and the timeline card takes what is left over, see .thread-rail, so the card ends level with the foot of the picture instead of running on past it or stopping short. */ .hero-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; } /* 90 by 26, and the only 4px corner in the file. The radius vocabulary is 0 for anything structural, a panel, a button, a card, a field on the masthead row: 50% for a circle, 100px for a true pill, and a 2px softening on the small furniture the design draws that way: a verdict chip, a tag, a save button, an area pill, a phone sheet's flag. This is the one thing between 2 and 100, and it is drawn small enough that 4px reads as a chip corner rather than as a style. */ .badge-live { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 90px; height: 26px; background: var(--red); color: var(--knockout); font: 600 12px var(--sans); letter-spacing: calc(.04em * var(--track)); padding: 0 12px; border-radius: 4px; } .badge-live .dot { width: 7px; height: 7px; background: var(--knockout); } .badge-outline { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--sans); letter-spacing: calc(.04em * var(--track)); border: 1px solid var(--ink); border-radius: 0; padding: 3px 9px; } /* Provenance, in the redesign's one neutral grey. Two facts and a link: when this last moved, and how many times it has moved today. Nothing here is a badge and nothing here is bold; it is a line of small print under a headline, and it took four styles of chip to say that before. */ .hero-meta { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-sm); flex-wrap: wrap; font: 400 13px var(--sans); color: var(--meta); } .hero-meta .muted { font-size: 13px; color: var(--meta); } /* No underline. The whole line is 14px grey and this is the only red thing in it, which is already two signals more than a link needs. */ .hero-meta .updates { font: 400 13px var(--sans); color: var(--red-type); } .hero-meta .updates:hover { text-decoration: underline; } .hero-meta .badge-live { font-size: 10.5px; min-width: 0; height: 22px; padding: 0 9px; } .hero-meta .badge-outline { font-size: 11.5px; padding: 2px 7px; color: var(--ink-70); } /* Typography: the serif carries the hierarchy now. The scale itself, as opposed to the three faces named in the token block. Every headline in the paper is set in --serif and nothing else is. That is the whole rule, and it is why the sizes below can be as close together as they are: a 22px headline and a 22px standfirst no longer need four points between them to be told apart, because they are not the same letterform. Weight 600 at lead size, 500 everywhere below it. Newsreader's optical size axis is on by default, so the 50px cut is drawn with the fine hairlines a display size wants and the 22px cut is not. */ h1.hero { font: 600 38px/1.12 var(--serif); letter-spacing: calc(-.005em * var(--track)); margin: 0 0 14px; text-wrap: wrap; } .standfirst { font: 400 17px/1.35 var(--sans); color: var(--ink); margin: 0 0 22px; max-width: 80ch; text-wrap: pretty; } /* `margin: 0 0 14px`, not `margin-bottom` alone. `.media` is a
, and the UA sheet gives a figure `margin: 1em 40px`, so setting only the bottom left 40px of inline margin on every one of them. `.story-lead` then adds `width: 100%` on top, which puts the story's lead photograph 40px right of its own headline at every width and 40px past the column at narrow ones, scrolling the page sideways on a phone. `.day-shot` below already zeroes it, which is why the mosaic tiles were always fine and this was invisible for so long. */ .media { position: relative; background: var(--slot); border: 1px solid var(--rule); margin: 0 0 14px; display: grid; place-items: center; overflow: hidden; } .media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; cursor: zoom-in; } /* Unstyled, a