.tsp-sidebar{display:flex;flex-direction:column;gap:var(--tsp-sidebar-gap,32px);width:100%}/* MANDATORY wrapper standard: container-type lives HERE, never on the section (see DEVELOPERS.md) */.tsp-sidebar-wrap{container-type:inline-size;width:100%} .tsp-sidebar__section{display:flex;flex-direction:column;gap:14px} .tsp-sidebar__heading{margin:0;padding-bottom:8px;border-bottom:2px solid var(--tsp-sidebar-accent-color,#ed1c24);font-weight:800;color:var(--tsp-sidebar-heading-color,#172033)} .tsp-sidebar__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--tsp-sidebar-story-gap,14px)} .tsp-sidebar__item{display:flex;gap:12px;align-items:flex-start} /* v1.10.13: row thumbnails are landscape 4:3, not square. --tsp-sidebar-thumb is the WIDTH; height follows the ratio, so 96px -> 96x72. Grid, card and numbered override this rule at 0,2,0 and are deliberately unaffected. */ .tsp-sidebar__item-image{flex:0 0 var(--tsp-sidebar-thumb,96px);display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#e9e6dd,#d8d4c8)} /* v1.10.619 — the missing-image slot is PAPER, not a cool grey. This box was #eef1f4, a blue-grey, while every other empty image slot on the platform is the warm paper tone: .tsp-cat__ph on archives, Latest Stories and search, and --tsp-band-bg on the cross-edition strip. The divergence only shows while an image loads or when one is missing, which is exactly when the reader is looking at the box rather than the picture. Canonical value lives on .tsp-cat__ph in templates/assets/css/category.css; repeated literally here because this project has no token sheet by deliberate decision (the v1.11.0 token refactor was reverted). Deliberately NOT changed: the video card (#222) and the overlay card and review hero (dark gradients). Those carry white text or a play control and are dark by design, not by neglect. */ .tsp-sidebar__item-image img{width:100%;height:100%;object-fit:cover;display:block} .tsp-sidebar__item-body{flex:1;min-width:0} /* v1.10.13 SHARED STORY-TITLE CONTRACT - one rule, one class, all four sidebar blocks, all five layouts. The values are the modern News Grid standard card's own (blocks.css: .tsp-news-card h3 = 18px / 1.25, family and weight inherited from the theme heading, break-word). Layout-specific title sizes were REMOVED rather than out-specified, so no !important is needed and nothing outranks this. --tsp-sidebar-title-size keeps the "Story title size" control live. */ .tsp-sidebar__item-body .tsp-story-title{margin:0;line-height:1.25;overflow-wrap:break-word} .tsp-sidebar__item-body .tsp-story-title a{color:var(--tsp-sidebar-title-color,#172033);text-decoration:none} .tsp-sidebar__item-body .tsp-story-title a:hover{color:var(--tsp-sidebar-accent-color,#ed1c24)} /* Meta matches the News Grid's .tsp-eb time (12px, weight and line-height left at the theme's). Colour stays on this block's own Meta colour control - the News Grid declares no meta colour, so there is no reference value to copy. */ .tsp-sidebar__item-body time{display:block;margin-top:4px;font-size:12px;color:var(--tsp-sidebar-meta-color,#667085)} .tsp-sidebar-empty{padding:20px;border:1px dashed #ccd0d4;text-align:center;color:#667085;font-size:.9rem} .tsp-sidebar-editor-preview{border:1px solid #dcdcde;padding:12px} .tsp-sidebar-editor-preview__label{font-size:11px;font-weight:700;text-transform:uppercase;color:#646970;margin-bottom:8px} .tsp-sidebar__section--compact .tsp-sidebar__list{gap:10px} /* v1.10.13: compact's four own rules - 8px gap, a hardcoded 48px thumbnail that made the Thumbnail size control dead here, a .82rem title that made the Story title size control dead here, and .68rem meta - are removed. Compact is Latest Stories' default layout, so those four were the main reason the four sidebar blocks did not look like one system. It now uses the shared contract (18px/1.25 title, 12px meta, 96x72 thumbnail, 12px gap) like every other row layout. Only its tighter story spacing is layout-specific and kept above. */ .tsp-sidebar__section--numbered .tsp-sidebar__list{counter-reset:tsp-sidebar-rank} .tsp-sidebar__section--numbered .tsp-sidebar__item{counter-increment:tsp-sidebar-rank} /* Numbered has no image - the box holds the rank counter - so it keeps its square badge and its previous 76px sizing, per the v1.10.13 exclusion list. */ .tsp-sidebar__section--numbered .tsp-sidebar__item-image{position:relative;background:transparent;display:flex;flex:0 0 var(--tsp-sidebar-thumb,76px);aspect-ratio:1/1} .tsp-sidebar__section--numbered .tsp-sidebar__item-image img{display:none} .tsp-sidebar__section--numbered .tsp-sidebar__item-image::before{content:counter(tsp-sidebar-rank);display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.6rem;font-weight:800;color:var(--tsp-sidebar-accent-color,#ed1c24);background:#f1f2f4} .tsp-sidebar__section--grid .tsp-sidebar__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .tsp-sidebar__section--grid .tsp-sidebar__item{flex-direction:column;gap:8px} .tsp-sidebar__section--grid .tsp-sidebar__item-image{flex:none;width:100%;aspect-ratio:4/3} /* v1.10.13: grid's .8rem title cap removed - it uses the shared contract too. Grid keeps its own full-width 4:3 cell image (rule above), so it is excluded from the 96x72 row-thumbnail geometry, not from the typography. */ /* v1.10.178: `min()` rather than a flat 24px. This tier tightens the SECTION gap on narrow screens, and a literal value silently overrode any component that had already asked for something smaller — the Telugu strip's 10px came back as 24px at 390px only. min() keeps the intent (never looser than 24 when narrow) while letting a smaller component value win. Default sidebars are unchanged: min(24px, 32px) is 24px, exactly what this rule did before. */ @container (max-width:520px){.tsp-sidebar{gap:min(24px, var(--tsp-sidebar-gap, 32px))}} .editor-styles-wrapper .tsp-sidebar-editor-preview a{pointer-events:none} .editor-styles-wrapper .tsp-sidebar-editor-preview{width:100%;padding:0;border:0;box-sizing:border-box} .editor-styles-wrapper .tsp-sidebar-editor-preview__label{margin-bottom:8px} /* C2: shared Section Heading styles */.tsp-section-heading{font-weight:800;line-height:1.25;margin:0 0 12px;color:var(--tsp-sidebar-heading-color,#172033);display:block}.tsp-section-heading--align-center{text-align:center}.tsp-section-heading--align-right{text-align:right}.tsp-section-heading--classic{border-bottom:2px solid var(--tsp-sidebar-accent-color,#ed1c24);padding-bottom:8px}.tsp-section-heading--modern span{background:linear-gradient(transparent 60%,rgba(237,28,36,.18) 60%)}.tsp-section-heading--underline span{border-bottom:3px solid var(--tsp-sidebar-accent-color,#ed1c24);padding-bottom:6px}.tsp-section-heading--accent-left{border-left:4px solid var(--tsp-sidebar-accent-color,#ed1c24);padding-left:10px}.tsp-section-heading--accent-bottom{position:relative;padding-bottom:10px}.tsp-section-heading--accent-bottom::after{content:'';position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--tsp-sidebar-accent-color,#ed1c24)}.tsp-section-heading--accent-bottom.tsp-section-heading--align-center::after{left:50%;transform:translateX(-50%)}.tsp-section-heading--filled span{background:var(--tsp-sidebar-accent-color,#ed1c24);color:#fff;padding:5px 12px;display:inline-block;border-radius:3px}.tsp-section-heading--minimal{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:14px;color:var(--tsp-sidebar-meta-color,#667085)}/* C2: Latest Stories layout extensions (scoped so legacy blocks untouched) */.tsp-latest-stories .tsp-sidebar__section--img-right .tsp-sidebar__item{flex-direction:row-reverse}.tsp-latest-stories .tsp-sidebar__section--divided .tsp-sidebar__item{padding-bottom:12px;border-bottom:1px solid #eceff3}.tsp-latest-stories .tsp-sidebar__section--divided .tsp-sidebar__item:last-child{border-bottom:0;padding-bottom:0}/* v1.10.13: the Image ratio control now sets the BOX ratio, not the ratio. It used to force a ratio on the image with height:auto INSIDE a fixed-ratio box, which letterboxed or pillarboxed every non-matching choice against the grey placeholder; now the box takes the chosen ratio and the image still fills it with object-fit:cover. 0,3,0 beats both the base rule and the narrow tier, so an explicit choice wins at every width. */.tsp-latest-stories .tsp-sidebar__section--ratio-16-9 .tsp-sidebar__item-image{aspect-ratio:16/9}.tsp-latest-stories .tsp-sidebar__section--ratio-4-3 .tsp-sidebar__item-image{aspect-ratio:4/3}.tsp-latest-stories .tsp-sidebar__section--ratio-square .tsp-sidebar__item-image{aspect-ratio:1/1}.tsp-latest-stories .tsp-sidebar__list[style*='--tsp-sidebar-clamp'] h3{display:-webkit-box;-webkit-line-clamp:var(--tsp-sidebar-clamp,2);-webkit-box-orient:vertical;overflow:hidden}.tsp-latest-stories .tsp-sidebar__item-category{color:var(--tsp-sidebar-accent-color,#ed1c24);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.tsp-latest-stories .tsp-sidebar__item-author{color:var(--tsp-sidebar-meta-color,#667085);font-size:12px;margin-left:8px}.tsp-latest-stories .tsp-sidebar__item-excerpt{margin:6px 0 0;font-size:13px;color:var(--tsp-sidebar-meta-color,#667085)}.tsp-sidebar__section--card .tsp-sidebar__item{display:block}.tsp-sidebar__section--card .tsp-sidebar__item-image{display:block;width:100%;flex:0 0 auto;aspect-ratio:16/9;margin-bottom:8px}.tsp-sidebar__section--card .tsp-sidebar__item-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}@container (max-width:520px){.tsp-latest-stories .tsp-nav-btn{width:44px;height:44px}} /* v1.5.1: shared corner radius */.tsp-latest-stories .tsp-sidebar__section:not(.tsp-sidebar__section--card) .tsp-sidebar__item-image img{border-radius:var(--tsp-sidebar-radius,6px)}.tsp-sidebar__section--card .tsp-sidebar__item{border-radius:var(--tsp-sidebar-radius,10px);overflow:hidden}.tsp-sidebar__section--card .tsp-sidebar__item-body{padding:0 2px 4px} /* v1.5.2: canonical sidebar baseline for Latest Stories */.tsp-latest-stories .tsp-sidebar__item-body{min-width:0}.tsp-latest-stories .tsp-sidebar__item-body h3{overflow-wrap:break-word}.tsp-latest-stories .tsp-sidebar__item-category{display:inline-block;max-width:100%}.tsp-latest-stories .tsp-sidebar__item-body time{display:block;margin-top:4px} /* v1.9.0: mobile rules + text protection (tiers now legal via wrapper) */.tsp-sidebar__item-category{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.tsp-sidebar__item-body time{white-space:nowrap}@container (max-width:520px){.tsp-sidebar__section--grid .tsp-sidebar__list{grid-template-columns:1fr 1fr !important}}@container (max-width:380px){.tsp-sidebar__section--grid .tsp-sidebar__list{grid-template-columns:1fr !important}} /* v1.10.13 SHARED NARROW-CONTAINER TIER, replacing the v1.10.7 stacked-only one. A sidebar column measures 300-520px even on a desktop viewport, so this stays a @container tier on .tsp-sidebar-wrap - never @media. The 16px title is NOT an invented exception: it is the modern News Grid's own narrow step (blocks.css: @container (max-width:520px){.tsp-news-card h3{font- size:16px}}), so matching the reference means matching its responsive step too. min() keeps a deliberately smaller saved value smaller - a saved 12px stays 12px here, a saved 24px renders 16px in a narrow column and its full 24px above 520px. Same shape for the thumbnail: 96px -> 80px (80x60 at 4:3). These are base-level selectors (0,1,0) on purpose. Grid, card and numbered already override the image box at 0,2,0 and grid overrides the row gap at 0,2,0, so all three keep their own geometry here with no :not() chains and no !important. Meta stays 12px - the reference does not shrink it. */ @container (max-width:520px){.tsp-sidebar__item{gap:10px}.tsp-sidebar__item-image{flex:0 0 min(var(--tsp-sidebar-thumb,96px),80px)} /* v1.10.637 - WCAG 2.2 AA target size (2.5.8) on phones. A headline that fits on ONE line left a 15px-tall tap target sitting 20px from the NEXT card's thumbnail, which links to a DIFFERENT article - so a slightly low thumb opened the wrong story. Measured on every phone profile in both editions; multi-line headlines were already over 24px, which is why it only showed on short ones and only at some widths. The anchor becomes the whole heading line and is carried to 24px by padding; the equal negative margin keeps the card's outer geometry byte-for-byte what it was, so nothing moves. Replaces an empty rule that sat here doing nothing. */ .tsp-sidebar__item-body .tsp-story-title a{display:block;box-sizing:border-box;min-height:24px;padding-block:2px;margin-block:-2px}} /* v1.10.20: Briefing rail numerals — zero-padded and gold. Scoped to .tsp-latest-stories on purpose, matching the existing "Latest Stories layout extensions" precedent above: any OTHER block using the numbered layout keeps its plain accent-coloured 1-5 and is untouched by this release. The rank colour is its own variable because --tsp-sidebar-accent-color also drives the heading rule, title hover and category label. 0,3,0 + pseudo-element beats the base rule, and the fallback chain means an unset rankColor lands on the gold. */ .tsp-latest-stories .tsp-sidebar__section--numbered .tsp-sidebar__item-image::before{content:counter(tsp-sidebar-rank,decimal-leading-zero);color:var(--tsp-sidebar-rank-color,#c8a24a);background:transparent;font-size:1.5rem;letter-spacing:.02em} /* ========================================================================== v1.10.30 — "Rank columns" preset (`rank-columns`), for the homepage "What Everyone's Reading" band. A NEW preset rather than a variation of --numbered: the site's Customizer Additional CSS has repurposed .tsp-sidebar__section--numbered for the Scope Briefing rail (its own grid, its own ::before numeral, and a .tsp-sidebar:has(--numbered) rule that shrinks the section heading to a 12px eyebrow). Reusing it here would inherit all of that. Every rule below is scoped to --rank-columns, so the v1.10.15 presets stay ADDITIVE ONLY. The numeral is .tsp-sidebar__item::before driven by a counter, NOT the image anchor that --numbered uses. That anchor only exists when a story has a thumbnail, and this preset is a text list — so hanging the rank off it would drop the numbering the moment images were turned off. ========================================================================== */ .tsp-sidebar__section--rank-columns .tsp-sidebar__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:0;counter-reset:tsp-rank} .tsp-sidebar__section--rank-columns .tsp-sidebar__item{counter-increment:tsp-rank;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid #e8e5de} /* v1.10.52: the prototype's `.wer-item .num` is `font-family:var(--serif)` — the numeral is display type, not UI type. Ours inherited the sans stack, so the rail read as a plain numbered list rather than the editorial rank column the prototype draws. `line-height:1` matches it too; 22px on 22px was fine but the prototype states the ratio, so state it the same way. */ .tsp-sidebar__section--rank-columns .tsp-sidebar__item::before{content:counter(tsp-rank);font-family:var(--ts-display);font-size:22px;line-height:1;font-weight:700;color:var(--tsp-sidebar-rank-color,#C9CCD3)} /* Text list by design, matching the prototype — the numeral owns the left column. Same stance as --numbered, which also hides its thumbnail. */ .tsp-sidebar__section--rank-columns .tsp-sidebar__item-image{display:none} .tsp-sidebar__section--rank-columns .tsp-sidebar__item-body{display:flex;flex-direction:column;min-width:0} .tsp-sidebar__section--rank-columns .tsp-story-title{font-size:var(--ts-title-dense);line-height:var(--ts-lh-dense);font-weight:600} .tsp-sidebar__section--rank-columns .tsp-story-title a{color:var(--tsp-sidebar-title-color,#172033)} /* The kicker sits BELOW the headline in this preset. Section_Renderer emits it before the title, so it is reordered visually rather than by changing shared markup — the DOM order still reads category-then-headline for assistive technology, which is the more useful order there anyway. */ .tsp-sidebar__section--rank-columns .tsp-sidebar__item-category{order:2;margin-top:5px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tsp-sidebar-accent-color,#ed1c24)} .tsp-sidebar__section--rank-columns .tsp-sidebar__item-body time{order:3} @media (max-width:781px){ .tsp-sidebar__section--rank-columns .tsp-sidebar__list{grid-template-columns:1fr} } /* v1.10.60 Correction 2 — the --classic section headings. v1.10.59 Part B put the fix in blocks.css, but the rule that actually wins on these is in THIS file: `.tsp-section-heading{color:var(--tsp-sidebar-heading-color,#172033)}` at the same (0,1,0), in a stylesheet enqueued after blocks.css. Source order again — so the correction belongs here, after the rule it has to beat. That covers the H2 carrying the class directly, which is the shape the three remaining headings use: "What Everyone's Reading", "Latest Stories" and "Telugu Highlights" (H2.tsp-section-heading.tsp-section-heading--classic). Once this ships, the Customizer --ts-title-ink / --tsp-title-color block can be emptied outright: nothing routes heading colour through it any more, so the plugin is the single source of truth. Dark-scorecard #fff rules are untouched. */ .tsp-section-heading, .tsp-section-heading--classic, .tsp-nav-header .tsp-section-heading{color:var(--ts-ink,#16181F)} /* v1.10.76 — typography test: The Scope Briefing post titles. Was 18px/700. Scoped to --numbered so the four other rails that share .tsp-story-title (rank-columns, compact, stacked, Latest Stories) are untouched. Family stays the display serif; the section heading is not targeted. */ .tsp-sidebar__section--numbered .tsp-story-title, .tsp-sidebar__section--numbered .tsp-story-title a{font-size:14px;font-weight:600} /* ========================================================================== v1.10.77 — §10 The Scope Briefing, §15/16/19 rails. ========================================================================== */ /* §10 Briefing story headlines — 15px/600. v1.10.422: the family moves to the display serif. v1.10.77 put these in the UI voice on the reasoning that "these are scanned, not read"; the owner's typography unification reverses it — a story headline is a story headline wherever it appears, and a rail that sets its headlines in the navigation face is the split this pass exists to remove. Size, weight, leading and tracking are unchanged: this is a family pass, not a rescale. */ .tsp-sidebar__section--numbered .tsp-story-title, .tsp-sidebar__section--numbered .tsp-story-title a{font-family:var(--ts-font-display);font-size:15px;font-weight:600;line-height:1.42;letter-spacing:normal} /* §10 numerals — Georgia, red, 22px, tight. */ .tsp-sidebar__section--numbered .tsp-sidebar__item::before, .tsp-sidebar__section--numbered .tsp-sidebar__item-image::before{font-family:var(--ts-font-display);font-size:22px;font-weight:700;line-height:1} /* §15/16/19 the other rails — 13.5px/600, one value rather than the three near-identical sizes these had (§30). v1.10.422: display serif, for the same reason as the Briefing above. Most Viewed, Latest Stories and the stacked rails all render real headlines. */ .tsp-sidebar__section--rank-columns .tsp-story-title, .tsp-sidebar__section--compact .tsp-story-title, .tsp-sidebar__section--stacked .tsp-story-title{font-family:var(--ts-font-display);font-size:var(--ts-title-dense);font-weight:600;line-height:var(--ts-lh-dense)} /* Rail metadata — 11.5px/400. */ .tsp-sidebar__item-meta,.tsp-sidebar__item-body time{font-family:var(--ts-font-ui);font-size:11.5px;font-weight:400;line-height:1.4} /* §10/§11 rail headings stay in the UI voice at 12px/700 uppercase. §11 is explicit that small sidebar headings must NOT become Georgia — only true editorial section headings do. */ .tsp-sidebar__heading{font-family:var(--ts-font-ui);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:1.3} /* v1.10.132 — the Telugu rail's cross-site link is a real touch target. Measured 232x26 at 390 and 768. It is `display:flex`, so the WCAG 2.5.8 inline-text exception does not cover it — unlike the card's headline links, which are inline inside an

and are constrained by their line-height. Grown with padding and a min-height, leaving the 11px type alone: the size is the shared header's and the audit is about the hit area. Scoped to this rail rather than every `.tsp-nav-viewall` on the site — widening it to the shared header is a reasonable follow-up, but it is not this change's blast radius. */ @media (max-width: 782px) { .tsp-sidebar--telugu .tsp-nav-viewall { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; } } /* ========================================================================== v1.10.133 — "Compact Telugu Strip" layout preset. A reduced editorial card row: landscape image, headline, timestamp. No kicker — that is dropped in the MARKUP by Section_Renderer, not hidden here, so a screen reader is not read a label the design does not show. RESPONSIVE MODEL: @container, per the wrapper standard — container-type lives on .tsp-sidebar-wrap, so every rule below targets a DESCENDANT of it and never the wrapper itself. WHY auto-fit RATHER THAN FIXED COLUMN COUNTS. The brief asked for 5 cards on large desktop, 4 on normal desktop and 2 on tablet. Writing those as `repeat(5, 1fr)` etc. would leave EMPTY TRACKS whenever the feed returns fewer items than the row wants — a hole where a card should be, which is the padded-row problem in a different costume. `auto-fit` collapses unused tracks, so three real items make three cards that fill the width. The 210px minimum is chosen to land on the requested counts at a 16px gap, since auto-fit fits floor((W + gap) / (min + gap)) columns: container 1200 -> floor(1216/226) = 5 (large desktop) container 900 -> floor( 916/226) = 4 (normal desktop) container 700 -> floor( 716/226) = 3 (between the two named steps) container 560 -> floor( 576/226) = 2 (tablet) container 390 -> floor( 406/226) = 1 (mobile, and any narrow sidebar) So a narrow sidebar degrades to a single column of full-width landscape cards rather than a horizontal scroller or a row of unreadably small ones. ========================================================================== */ .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } /* The card: image above the text, not the shared row layout. */ .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item { display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; min-width: 0; } .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item + .tsp-sidebar__item { border-top: 0; } .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item-image { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; margin: 0 0 10px; flex: none; } .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item-body { min-width: 0; padding: 0; } /* v1.10.442 — a story with no image is a TEXT card, not a broken one. * * Grid items stretch to the row height, so a card whose story carries no image * kept the height its neighbours needed and left every pixel of it in one lump * beneath the headline. On English staging at 390 that was ~200px of white * under two lines of Telugu, directly above a "View all" link — it reads as an * image that failed to load, and a reader has no way to tell the difference. * * Centring the body distributes the slack instead of pooling it, so the card * presents as deliberately text-only. The headline is allowed a little more * size because there is room for it and nothing else is competing — this is the * one place in the strip where that is true, so it is scoped to the modifier * rather than changing the preset's type scale. * * No placeholder image: these items come from the cross-site feed, so there is * no attachment for the missing-media chain to resolve, and a stock graphic * would be inventing content for a story that has none. */ /* v1.10.469 — centring alone was not enough; the card still read as broken. * * v1.10.442 distributed the slack instead of pooling it, which was an * improvement and still left the real problem in place: measured on staging the * card is 219x250 at 1440 and 348x290 at 390, holding 65px and 43px of content * respectively — 74% of the box empty. Worse, centred text in a bare card sits * at a different height from the imaged cards beside it, whose text starts under * a 137px photo, so the row read as misaligned rather than as a design. * * Giving the card an actual surface is what makes the space deliberate: a * bordered panel is a text card, the same footprint as its neighbours, and the * headline takes the room that is genuinely free. Still no placeholder graphic — * 5 of these 12 stories carry `featured_media: 0` at source, and inventing a * stock image for them would be inventing content. */ .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item--noimg { justify-content: center; padding: 14px; border: 1px solid var(--tsp-hairline, #E8E5DE); border-radius: 6px; background: var(--tsp-noimg-bg, #FAF9F7); } /* The body carries `flex: 1 1 0%` from the shared card rules, so it absorbs the whole card and the centring above has nothing left to move — verified on staging, where the modifier and `justify-content: center` both computed correctly and the text still sat hard against the top. Letting the body take its content height hands the slack back to the parent, which is the box that knows how to share it. */ .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item--noimg .tsp-sidebar__item-body { flex: 0 0 auto; } /* v1.10.471 — the panel above was arriving open at the top. * * `.tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item + .tsp-sidebar__item` * (0,3,0) sets `border-top: 0` to stop stacked rows doubling their rules, and it * outranks the (0,2,0) modifier rule that paints the panel. Every card except * the first therefore drew right, bottom and left only — a three-sided box. * * It measured 1px on English staging because the first card there happens to be * the image-less one, so the sibling selector never matched it. The Telugu * edition, whose first card carries an image, showed 0px/1px/1px/1px. * * Matching the sibling rule's specificity restores the edge without weakening * the rule itself, which is still doing its job for the imaged rows. */ .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item + .tsp-sidebar__item--noimg { border-top: 1px solid var(--tsp-hairline, #E8E5DE); } /* +1px was too timid for a card with 185px of free height. The headline is the only content here and nothing competes with it, so it takes the space; the balance keeps the last line from stranding a single word under a centred block. Scoped to the modifier, so the preset's type scale is untouched. */ .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item--noimg .tsp-story-title { font-size: calc(var(--tsp-sidebar-title, 15px) + 4px); line-height: 1.4; text-wrap: balance; } /* +4px closed the desktop gap but not the phone one: at 390 the rail shows a single 348px-wide card and the panel was still 74% empty after the first pass. A card that wide carries a much larger headline than a 219px desktop column can, so the narrow layout gets its own step. `@container`, not `@media` — the wrap carries `container-type: inline-size` and the card is a descendant of it, which is the only way this matches. */ @container (max-width: 520px) { .tsp-sidebar__section--compact-telugu-strip .tsp-sidebar__item--noimg .tsp-story-title { font-size: calc(var(--tsp-sidebar-title, 15px) + 9px); } } /* Bold editorial headline. Telugu resolves through the shared type tokens — every stack already ends in the matching Noto Telugu face, so no font is named here. */ .tsp-sidebar__section--compact-telugu-strip .tsp-story-title { margin: 0; font-size: var(--tsp-sidebar-title, 15px); font-weight: 700; line-height: 1.35; } .tsp-sidebar__section--compact-telugu-strip .tsp-story-title a { color: var(--tsp-title-color, var(--ts-ink, #16181f)); text-decoration: none; } /* Subtle timestamp beneath. */ .tsp-sidebar__section--compact-telugu-strip time { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; color: var(--tsp-meta-color, var(--ts-muted, #676E7B)); } /* ------------------------------------------------------------------ Section header: heading left, cross-site link right, thin red rule. `:has()` is used because the header is a SIBLING of the layout scope — `aside.tsp-sidebar > .tsp-nav-header` sits beside `section.tsp-sidebar__section--…` — so there is no ancestor carrying the preset. This keeps the treatment to blocks actually using the preset without a PHP change or a second class threaded through the renderer. `:has()` is already relied on elsewhere in this project's CSS. ------------------------------------------------------------------ */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 2px solid var(--tsp-accent, #c8102e); } .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header .tsp-section-heading { margin: 0; min-width: 0; } /* The link wraps rather than pushing the row wider — the brief asks for a clean header at every width and no overflow. */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-viewall { white-space: nowrap; max-width: 100%; overflow-wrap: anywhere; } /* v1.10.196 — View All sits on the heading line, left of the arrows. The renderer places it inside `.tsp-nav-header__actions` for this preset (`HEADER_VIEWALL_LAYOUTS`), so nothing here reorders a flex column. `align-items: center` overrides the header's `baseline` for this group only: the group's baseline comes from the View All text, which would hang the two 40px circular buttons off that text's baseline instead of centring them on it. The 16px gap is the separation between View All and Previous. The `margin: 0` is the whole cost of the move: `viewall_html()` prints its own `.tsp-nav-viewall-row` wrapper wherever it lands, and that wrapper carries the `margin-top: 14px` that used to space it away from the list below. */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header__actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header__actions .tsp-nav-viewall-row { margin: 0; } /* v1.10.134 — the strip's cross-site link is a touch target too. v1.10.132 scoped this to `.tsp-sidebar--telugu`, which is the TEMPLATE rail. A block using the Compact Telugu Strip has no such class, so its link stayed at 26px — caught by the strip self-test at 768. Keyed off the preset instead, so it follows the layout rather than the surface. */ @media (max-width: 782px) { .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-viewall { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; } } /* ========================================================================== v1.10.197 — phone widths keep View All BELOW the cards. WHY. v1.10.196 put View All on the heading line, which is right on desktop and tablet. Measured at 390px it does not fit: the row needs 376px (heading 147 + actions 213 + 16px gap) against 350px available — 26px short, with the arrows at their 44px touch size. Squeezing it in was tried and rejected: View All at 12px with 10px gaps lands at exactly 0px of slack, and still wraps at 360px. A composition that survives only at one device width is not a composition. SO the phone keeps the approved presentation — heading and arrows on one line, View All centred under the cards — and it is done WITHOUT a second link. The markup is unchanged; only the layout moves. `display: contents` dissolves the header and its actions group so their children become items of the aside's own grid, which can then place the SAME anchor node on a row of its own below the viewport. One View All, one Previous, one Next in the DOM at every width. The cost of dissolving `.tsp-nav-header` is that its box stops painting, so the red rule it carried becomes a 2px grid row of its own — the same rule in the same place, and the viewport's styling is left alone. Measured against the pre-196 baseline the result is exact: rule at 52px, cards at 80px, 24px from the cards to the View All row. 480px, not 782px: the header stops fitting below ~416px, and 768 is part of the approved desktop/tablet result that must not move. ========================================================================== */ @media (max-width: 480px) { .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; } /* Dissolve the two wrappers so their children join the grid above. */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header, .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header__actions { display: contents; } /* Row 1 — heading left, arrows right, exactly as before. */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header .tsp-section-heading { grid-column: 1; grid-row: 1; align-self: center; } .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header__actions .tsp-nav-controls { grid-column: 2; grid-row: 1; justify-self: end; } /* Row 2 — the rule the dissolved header used to draw, as a row of its own. NOT a `border-top` on the viewport: that element carries `border-radius: 8px` for its scroll container, so a border on it renders with curled ends instead of the straight full-width rule the design has. A dedicated 2px row is also the only version that leaves the viewport's own styling completely alone. */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip)::before { content: ""; grid-column: 1 / -1; grid-row: 2; height: 2px; margin-top: 8px; background: var(--tsp-accent, #c8102e); } /* Row 3 — the cards. */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-viewport { grid-column: 1 / -1; grid-row: 3; margin-top: 26px; } /* Row 4 — the same anchor, back under the cards. The selector carries the `__actions` ancestor so it outranks that group's `margin: 0` reset, which still matches here: `display: contents` removes the box, not the element. */ .tsp-sidebar:has(.tsp-sidebar__section--compact-telugu-strip) .tsp-nav-header__actions .tsp-nav-viewall-row { grid-column: 1 / -1; grid-row: 4; margin-top: 24px; } } /* ========================================================================== v1.10.145 — the Compact Telugu Strip sits in the homepage container. MEASURED CAUSE. v1.10.135 gave this preset `alignfull` so it could escape a ~757px Gutenberg column and fit more than three cards. The block has since been moved to the top level of the page, so that workaround now does harm: at a 1690px window the section spanned 0->1690 while Hero (265->1022), The Scope Briefing (->1425) and the National grid (content 265->1425) all stopped at the shared 1200px content boundary. THE CANONICAL CONTAINER, reused rather than re-derived. typography.css gives every homepage section `max-width: var(--tsp-wrap)`, `margin-inline: auto` and `padding-inline: var(--tsp-gutter)` — 1200px and 20px. `.tsp-eb-wrap` (National) takes all three. `.tsp-sidebar-wrap` takes the first two but has its gutter zeroed, because it is normally used INSIDE a Gutenberg column that supplies its own padding. At the top level that zeroed gutter is what would leave this section's cards 20px to the left of National's. So the strip restores the gutter — from the same token, not a number — and inherits the width and centring it already had. No breakout, no alignment class, no width of its own. ========================================================================== */ .entry-content .tsp-sidebar-wrap.tsp-sidebar-wrap--strip { padding-inline: var(--tsp-gutter, 20px); box-sizing: border-box; } /* -------------------------------------------------------------------------- v1.10.178 — the empty band above "View All". ROOT CAUSE, and it is not a stray margin. `.tsp-sidebar` is a flex column with `gap: var(--tsp-sidebar-gap, 32px)`. That 32px exists for a REAL sidebar, where the flex children are whole stacked sections and 32px between them is correct. This layout is `--single`: its flex children are the heading, the carousel viewport and the View All row — three parts of ONE component — so the section gap was being spent inside the component instead of between components. Measured at 1600 before the change, and the arithmetic closes exactly: heading 50 + margin 16 + GAP 32 + viewport 229.3 + GAP 32 + row margin 14 + row 28.4 = 401.7px, the aside's exact height So of the 46px between the last card and View All, 32px was this gap and only 14px was the row's own margin. Turning the gap down is therefore the fix at source; a negative margin on the row would have cancelled a symptom and left the same 32px sitting under the heading. 10px lands the card-to-View-All distance at 24px (10 + the row's existing 14px margin), inside the 20-30px target, and leaves the heading 26px of air instead of 48px. Height is still entirely content-driven: nothing here sets a height, a min-height or a row template, so a story with a third title line simply makes the section taller. Scoped to `--strip`, which the renderer emits for `compact-telugu-strip` and nothing else, so Trending, Most Viewed, the Briefing and every real sidebar keep the 32px section rhythm. -------------------------------------------------------------------------- */ .tsp-sidebar-wrap--strip .tsp-sidebar { --tsp-sidebar-gap: 10px; } /* ========================================================================== v1.10.153 — THE SCOPE BRIEFING preset -------------------------------------------------------------------------- A NEW preset with NEW selectors, deliberately not a variation of `--numbered`. The site Customizer's "Batch 1F/1G" blocks own `--numbered` (51 rules, 12 of them !important) and wp-custom-css prints after this file, so a variation would inherit all of it and lose every tie. Nothing below uses !important; nothing below matches a Customizer selector. Newsroom, not cinema: flatter panel, tighter rows, urgent red kickers. The Scope Verdict band lower on the page stays the richer cinematic dark product, so this deliberately does NOT reuse its gradients or gold rules beyond the rank numerals. ========================================================================== */ /* No `height:100%` on the wrapper: the column's height is content-derived, so a percentage here resolves to auto and only reintroduces the feedback loop the min-height above exists to avoid. */ .tsp-sidebar-wrap--briefing { display: flex; } .tsp-sidebar-wrap--briefing > .tsp-sidebar { flex: 1 1 auto; } .tsp-sidebar-wrap--briefing .tsp-sidebar { /* v1.10.180 — LIGHT PANEL. The approved reference makes the Briefing the bright, high-readability surface beside the cinematic Hero, rather than a second dark box. Only the palette and the rank/kicker treatment change: the grid, the row height, the carousel and the min-height that meets the Hero's bottom edge are all kept exactly as they were. */ --tsp-brief-line: #ECE9E3; --tsp-brief-rule: #E8E5DE; --tsp-brief-ink: var(--ts-ink, #16181F); --tsp-brief-muted: var(--ts-muted, #676E7B); --tsp-brief-tint: rgba(200, 16, 46, .045); --tsp-brief-pad: 20px; /* v1.10.640 — the Hero-matching floor MOVED to the bottom of this file. It belongs only to the tier where the Hero sits beside the Briefing and only to a panel with the rows to fill it; unconditional here, it forced a 441px card around 208px of content on every phone and tablet. See "THE BRIEFING IS AS TALL AS THE STORIES IT HAS". */ display: flex; flex-direction: column; gap: 0; padding: var(--tsp-brief-pad); border-radius: var(--tsp-card-radius, 10px); /* White, a hairline border and no shadow — the panel reads as an editorial surface, not a card competing with the Hero. */ background: #fff; border: 1px solid var(--tsp-brief-rule); color: var(--tsp-brief-ink); } /* -------------------------------------------------------------- header ---- */ .tsp-sidebar-wrap--briefing .tsp-nav-header { display: flex; align-items: flex-start; justify-content: space-between; /* Wraps rather than collides. The wordmark is `nowrap`, and in the 379px panel the homepage currently gives this block the heading (~205px), View All (90px) and the arrows (66px) need ~387px — so the wordmark ran underneath View All. Wrapping drops the actions onto their own line when they cannot fit and keeps the reference's single row once the column is widened. */ flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; } .tsp-sidebar-wrap--briefing .tsp-nav-header__titles { min-width: 0; flex: 1 1 auto; } .tsp-sidebar-wrap--briefing .tsp-nav-header__actions { margin-left: auto; } .tsp-sidebar-wrap--briefing .tsp-section-heading { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--ts-display, Georgia, serif); font-weight: 700; /* Sized to stay on ONE line. The heading shares its row with View All and the arrows, which left it a 273px column on staging — at 22px the wordmark wrapped to two lines. `nowrap` states the intent rather than relying on the measurement holding, and the narrow tier below releases it for containers too small to honour it. */ font-size: clamp(15px, 1.25vw, 19px); line-height: 1.2; letter-spacing: .01em; white-space: nowrap; color: var(--tsp-brief-ink); border: 0; padding: 0; } /* The four-point star from the reference. */ .tsp-sidebar-wrap--briefing .tsp-section-heading::before { content: "\2726"; flex: 0 0 auto; font-size: .85em; line-height: 1; color: var(--ts-red, #C8102E); } .tsp-sidebar-wrap--briefing .tsp-briefing__sub { margin: 5px 0 0; padding-left: 25px; /* aligns under the wordmark, past the star */ font-family: var(--ts-ui, inherit); font-size: 12px; line-height: 1.3; color: var(--tsp-brief-muted); } .tsp-sidebar-wrap--briefing .tsp-nav-controls { flex: 0 0 auto; gap: 6px; } .tsp-sidebar-wrap--briefing .tsp-nav-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--tsp-brief-rule); background: #fff; color: var(--tsp-brief-ink); } .tsp-sidebar-wrap--briefing .tsp-nav-btn:hover:not(:disabled), .tsp-sidebar-wrap--briefing .tsp-nav-btn:focus-visible:not(:disabled) { background: var(--ts-red, #C8102E); border-color: var(--ts-red, #C8102E); color: #fff; } .tsp-sidebar-wrap--briefing .tsp-nav-btn:disabled { opacity: .3; } /* Touch devices get a full-size target regardless of how wide the panel is. */ @media (pointer: coarse) { .tsp-sidebar-wrap--briefing .tsp-nav-btn { width: 44px; height: 44px; } } .tsp-sidebar-wrap--briefing .tsp-nav-btn:focus-visible { outline: 2px solid var(--ts-red, #C8102E); outline-offset: 2px; } /* View All sits on the heading line. The renderer places it inside the header for this preset, so nothing here has to reorder a flex column. */ .tsp-sidebar-wrap--briefing .tsp-nav-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .tsp-sidebar-wrap--briefing .tsp-nav-header__actions .tsp-nav-viewall-row { margin: 0; } .tsp-sidebar-wrap--briefing .tsp-nav-viewall { font-family: var(--ts-ui, inherit); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-red, #C8102E); text-decoration: none; white-space: nowrap; } .tsp-sidebar-wrap--briefing .tsp-nav-viewall:hover, .tsp-sidebar-wrap--briefing .tsp-nav-viewall:focus-visible { color: var(--ts-red, #C8102E); } /* The viewport sizes to its rows — it must NOT absorb the panel's slack. With `flex:1 1 auto` it grew to fill the aside, which handed the row track a definite height; the five `auto` rows then filled it at 157px each and the panel ran to 886px. Sizing to content keeps rows intrinsic, and the panel still reaches the Hero's height through the shared min-height above. */ .tsp-sidebar-wrap--briefing .tsp-nav-viewport { flex: 0 0 auto; min-height: 0; } /* --------------------------------------------------------------- rows ----- */ /* No percentage heights on the section or the list. Both resolved against a chain that ended at a content-derived column height, so the five `auto` rows stretched to 157px each and the panel settled at 913px. The rows stay intrinsic; the panel's height comes from the shared min-height above, which is a fixed value and cannot feed back. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__list { counter-reset: tsp-brief-rank; margin: 0; padding: 0; list-style: none; } /* The shared carousel already models exactly what this panel needs: with `--tsp-nav-rows` set to the page size it stacks five stories in one column and pages to 6-10. So the grid is KEPT, not replaced — two things are adjusted: - the rows spread across the panel height, so its bottom edge meets the Hero's instead of leaving a gap; - the row gap goes, because these rows are separated by hairlines. Specificity has to clear `.tsp-sidebar--single.tsp-nav-enabled .tsp-sidebar__list` (0,3,0) from section-nav.css, which is why the wrapper is named here. That stylesheet's `display:grid !important` is left alone — this preset wants the grid. `align-content` is deliberately LEFT as the `start` that section-nav.css sets. Both alternatives were tried and both inflated the panel to ~886px: `1fr` rows resolved against max-content, and `space-between` let the five `auto` tracks resolve to 157px each. The rows stay intrinsic and any slack sits at the foot of the panel, which the shared min-height already sizes. */ .tsp-sidebar-wrap--briefing .tsp-sidebar--single.tsp-nav-enabled .tsp-sidebar__list { /* * The track gets a FIXED height, and the rows divide it. * * Content-derived sizing could not be made to settle here: with the track * height coming from its own rows, `auto` resolved every row to 157px and * the panel ran to 886px. `1fr`, `max-content` and `align-content` were each * measured and none of them broke the circularity, and it is not the * Customizer — the same numbers appear with wp-custom-css disabled. * * Deriving the height from `--tsp-unit-min-h` instead removes the loop at * its source: the value is a constant, so the rows can share it without * feeding anything back. It also delivers what the design actually asks for * — five even rows whose last one ends level with the Hero. */ /* * An EXPLICIT row height, and no height on the track itself. * * Anything content-derived here misbehaves: `auto`, `max-content` and * `minmax(min-content,1fr)` each resolved every row to ~157px and ran the * panel past 800px, because the track's height and its rows define each * other. Dividing a fixed track height gave 60px rows instead, which — with * the row content measuring 73px — clipped the timestamp and the second * headline line. That was the missing text on staging. * * Naming the row height ends both failures: it is a constant, so nothing * feeds back, and it is set above the measured content so nothing is cut. * The panel's height then simply follows its five rows. */ /* 96px = measured content. The row body is 73px (kicker 16 + two-line headline 34 + timestamp 16, plus its margins) and the item adds 20px of vertical padding, so 93px is the floor; 96 leaves a little air. Undersizing this does not crop — there is no overflow here any more — it makes the body spill past its own row and sit out of line with its rank numeral. */ grid-template-rows: repeat(var(--tsp-nav-rows, 5), var(--tsp-brief-row, 96px)); row-gap: 0; } /* v1.10.424 — on desktop the row is a MINIMUM, not a fixed height. * * The comment above is candid that undersizing this "makes the body spill past * its own row", and that is what has been happening: measured at 1024, 1366, * 1440 and 1920, with the ORIGINAL 14.5px two-line headlines, every one of the * five rows overflowed by 8-9px and four of them had a date painted over by the * next row's kicker badge. 96px was computed for a two-line headline at a size * the rail no longer uses, and a fixed track cannot absorb a longer one. * * `minmax(..., auto)` keeps 96px as the floor — short rows are unchanged, so * the rhythm the fixed value was protecting survives — and lets a row that * needs more take it, instead of hanging out of the bottom. Measured after: * spill 0 and collisions 0 at every desktop width, with no headline truncated. * * The cost is real and belongs in the report rather than buried here: the rail * grows ~177px at 1366 and 1440, and the hero beside it grows with it, because * the two share a grid row that sizes to the taller of them. Holding the old * height instead would mean dropping back to two lines, which truncates four of * five headlines — the brief rules that out explicitly. * * Desktop only. The phone rail below 480 is a different, verified case: a * re-tuned 152px track with a four-line clamp, already measured at zero spill, * and it does not need this. */ @media (min-width: 782px) { /* Same selector as the rule above, deliberately. That one is (0,4,0); a shorter selector here would simply lose and the fix would look applied while changing nothing. */ .tsp-sidebar-wrap--briefing .tsp-sidebar--single.tsp-nav-enabled .tsp-sidebar__list { grid-template-rows: repeat(var(--tsp-nav-rows, 5), minmax(var(--tsp-brief-row, 96px), auto)); } } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item { counter-increment: tsp-brief-rank; position: relative; display: grid; /* rank | body | thumbnail v1.10.182: the rank track was 42px around a 26px circle and the gap 12px, which spent 28px of a 387px panel on air. The headline column is what pays for that — measured at 191.6px, where a real headline needs three to four lines and the two-line clamp then ellipses it. The circle and the thumbnail keep their sizes; only the slack around them is recovered. */ /* v1.10.273: rank | THUMBNAIL | body. The approved reference reads NUMBER -> IMAGE -> CONTENT, so the tracks are reordered - the thumbnail column moves ahead of the headline column. Done by swapping the grid tracks and the two children's grid-column assignments, NOT by row-reverse: the DOM order already is image-then-body, so reversing would have flipped it away from the reading order it already has. */ grid-template-columns: 30px 96px minmax(0, 1fr); align-items: center; gap: 0 9px; /* No `overflow:hidden`: it was clipping the timestamp and the second headline line whenever the content exceeded the old fixed row budget. The headline's own line-clamp already bounds the tallest element, so nothing here needs to crop. */ min-height: 62px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--tsp-brief-line); border-left: 3px solid transparent; border-radius: 4px; transition: background-color .18s ease; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:last-child { border-bottom: 0; } /* Rank numeral — a scanning anchor, never louder than the headline. */ /* * All three cells are pinned to ROW 1. * * Column alone was not enough. The markup order is rank -> thumbnail (column 3) * -> body (column 2), so by the time the body is placed the auto-placement * cursor has already passed column 2 and grid opened a second row for it. The * item became a two-row grid (48px + 73px) and the text sat a half-row below * its own numeral — the misalignment visible on staging. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item::before, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-body, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-image { grid-row: 1; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item::before { /* v1.10.180: a compact OUTLINED CIRCLE with a plain digit, per the reference, replacing the 26px gold serif numeral the dark panel used. Plain `decimal` rather than `decimal-leading-zero` — the reference reads 1..5, and "01" in a 26px circle has nowhere to go. A counter still supplies the number, so no markup changes and the rank cannot drift from the row order. */ content: counter(tsp-brief-rank); grid-column: 1; justify-self: start; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1.5px solid var(--tsp-brief-rule); border-radius: 50%; box-sizing: border-box; font-family: var(--ts-ui, inherit); font-size: 12px; font-weight: 700; line-height: 1; color: var(--tsp-brief-ink); white-space: nowrap; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-body { grid-column: 3; min-width: 0; } /* v1.10.180: a filled red BADGE, per the reference, rather than red text on the panel. `inline-block` so the badge hugs its label — a block-level badge would run the full body column and read as a bar. Kept small: 9.5px on a 3px radius, so it stays a kicker and never competes with the headline. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-category { display: inline-block; margin: 0 0 5px; padding: 2px 6px; border-radius: 3px; font-family: var(--ts-ui, inherit); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase; background: var(--ts-red, #C8102E); color: #fff; } /* v1.10.424 — the family and size that used to sit here are gone. * * They were dead: a later rule in this file declares both at equal specificity * and wins on source order, so this said `--ts-ui` and 13.5px while the page * rendered the display serif at the dense size. Two rules disagreeing about one * component is how the next person edits the one that does nothing. * * THE CLAMP was the live part of this rule, and it was one line short. Measured * on staging at 14.5px: two of five Briefing headlines were cut at 1366 and * 1440, losing ~48 characters, and four of five at 320. Three lines fixes all * of it at ZERO height cost — the rows are sized by the thumbnail beside them, * so the text had the room all along and the clamp was throwing it away. */ .tsp-sidebar__section--scope-briefing .tsp-story-title { margin: 0; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* The anchor carries the visible colour and measures white on staging; the heading itself is set too so the row never depends on the link's rule surviving a theme change. */ .tsp-sidebar__section--scope-briefing .tsp-story-title { color: var(--tsp-brief-ink); } .tsp-sidebar__section--scope-briefing .tsp-story-title a { color: var(--tsp-brief-ink); text-decoration: none; } .tsp-sidebar__section--scope-briefing .tsp-story-title a:hover, .tsp-sidebar__section--scope-briefing .tsp-story-title a:focus-visible { color: var(--ts-red, #C8102E); } .tsp-sidebar__section--scope-briefing time { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-family: var(--ts-ui, inherit); font-size: 11px; color: var(--tsp-brief-muted); } .tsp-sidebar__section--scope-briefing .tsp-sidebar__clock { flex: 0 0 auto; opacity: .8; } /* Thumbnail: fixed landscape box, so a portrait upload cannot stretch a row. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-image { grid-column: 2; display: block; width: 96px; height: 52px; overflow: hidden; border-radius: 5px; background: #eef1f4; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-image img { width: 100%; height: 100%; object-fit: cover; /* v1.10.662 — crop from above centre, so the tile keeps the FACE. * * The box above is 96x52, about 1.85:1, and it is deliberately fixed: the * five uniform 104px rows are frozen at 1.10.517 and a portrait upload must * not be able to reshape one. So this row cannot stop cropping — a whole * portrait inside 96x52 would be a ~29px sliver. What it CAN stop is * cropping the wrong part of the picture. * * `object-fit:cover` defaults to `50% 50%`, which centres the visible band * and spends the overflow equally off the top and the bottom. Against a * 1.85:1 window a 4/3 original loses about 28% of its height, half of it * from the top — which is exactly where a news subject's head is. Reported * by the owner on the Briefing's story 1. * * 30% holds the band high enough to keep a head at this ratio. It sits * above the 38-42% used by category.css and scope-verdict.css because those * crop into far squarer boxes and have much less overflow to spend. * * GEOMETRY IS UNTOUCHED: this changes which pixels are shown, never the * size of the box, so the frozen row height and column tracks cannot move. */ object-position: center 30%; display: block; transition: transform .25s ease; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:hover .tsp-sidebar__item-image img { transform: scale(1.04); } /* Hover / focus: lift the row a little, nothing more. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:hover, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:focus-within { background: rgba(0, 0, 0, .028); } /* ------------------------------------------------- the lead story, #01 ---- */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:first-child { border-left-color: var(--ts-red, #C8102E); /* Restrained burgundy wash, not a red card. */ background: linear-gradient(90deg, rgba(200, 16, 46, .17) 0%, rgba(200, 16, 46, .05) 55%, rgba(200, 16, 46, 0) 100%); } /* The lead story's rank ring and numeral go red, which is what marks it as current without turning the row into a red card. v1.10.573: this rule MOVED to the active-state block further down, where the row's own active chrome is declared. Keeping the ring here and the border and wash there is what split the active state in half and left the numeral behind on every row but the first. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:first-child:hover, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:first-child:focus-within { background: linear-gradient(90deg, rgba(200, 16, 46, .24) 0%, rgba(200, 16, 46, .08) 55%, rgba(200, 16, 46, 0) 100%); } /* ---------------------------------------------------------- responsive ---- */ /* Tablet: keep the panel beside the Hero but buy the headline room. */ @container (max-width: 420px) { /* 74px cropped the row at this tier — measured content is ~78px. */ .tsp-sidebar-wrap--briefing .tsp-sidebar { --tsp-brief-pad: 16px; --tsp-brief-row: 96px; } /* NOTE: this tier is the one that renders on DESKTOP. The panel is ~387px wide beside the Hero, so a 420px container query is permanently on there; the base rule above only takes over when the Briefing is stacked full width. Anything meant to reach the desktop desk has to be set here. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item { /* Same slack recovery as the base rule: the rank track loses 4px and each gap 1px, and the row 2px of side padding, all of it handed to the headline column — measured 191.6px before, ~205px after. The 26px rank circle and the 76px thumbnail are unchanged. */ /* v1.10.274: thumbnail track ahead of the headline, matching the base rule. */ grid-template-columns: 30px 76px minmax(0, 1fr); gap: 0 9px; padding: 10px 6px; } /* v1.10.182: `font-size: 21px` here was left over from the gold serif numeral this preset used before the outlined circle. A 21px digit inside a 26px ring nearly fills it; the circle sizes its own type, so the override goes. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-image { width: 76px; height: 48px; } .tsp-sidebar__section--scope-briefing .tsp-story-title { font-size: var(--ts-title-brief); } /* v1.10.424: a fourth line where the rail is narrow. * * The existing four-line rule sits in `@container (max-width: 300px)`, which * never fires — measured at a 320px viewport the rail container is wider * than 300, so the base three-line clamp applied and four of five headlines * were still cut. This tier does fire, at 320 and 390 and on the ~418px * desktop rail. * * Allowing a fourth line costs nothing where it is not needed: a clamp is a * ceiling, not a height, so rows that fit in two or three are unchanged. * Measured at 320 and 390: page height +0. */ .tsp-sidebar__section--scope-briefing .tsp-story-title { -webkit-line-clamp: 4; } } /* Narrow (stacked under the Hero on phones): the thumbnail goes, because the rank, kicker, headline and time are what the panel is for. Rows also stop sharing height — stacked, they should size to their content. */ /* 300px, not 330px. At 330 this tier fired on the 1024px DESKTOP layout, where the 33.33% column leaves a 328px panel, and dropped the thumbnails there — while a 390px phone, whose stacked panel is 350px wide, kept them. Exactly backwards. Container width does not track viewport width here, so the threshold has to sit below every side-by-side case. */ @container (max-width: 300px) { /* Stacked and thumbnail-free, the headline gets a third line, so the row needs the height back. */ .tsp-sidebar-wrap--briefing .tsp-sidebar { --tsp-brief-row: 104px; } /* Only HERE is the panel too narrow to hold the wordmark on one line. Releasing it at 420px was wrong: staging's 379px panel fits the 19px wordmark in ~175px and was wrapping purely because of this rule. */ .tsp-sidebar-wrap--briefing .tsp-section-heading { white-space: normal; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item { /* v1.10.425: the rank column and the side padding give the headline 18px back. At 320 the thumbnail is already hidden here and the headline still had only 170px against the 186px a three-line fit needs, so four of five ran to four lines. 34>24 on the rank and 8>4 on the inline padding clears it without touching the type or the vertical tap target. */ grid-template-columns: 24px minmax(0, 1fr); /* Comfortable tap target on touch. */ min-height: 56px; padding: 13px 4px; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-image { display: none; } /* The thumbnail is hidden at this tier, so the body takes the second track rather than the third it occupies while an image column exists. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-body { grid-column: 2; } .tsp-sidebar__section--scope-briefing .tsp-story-title { -webkit-line-clamp: 4; } } @media (prefers-reduced-motion: reduce) { .tsp-sidebar__section--scope-briefing .tsp-sidebar__item, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item-image img { transition: none; } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:hover .tsp-sidebar__item-image img { transform: none; } } /* ========================================================================== v1.10.160 — Hero + Briefing as ONE unit, and the Briefing hover state -------------------------------------------------------------------------- THE GAP. Measured on staging: both panels carry `margin: 0` and `padding: 0`, and their columns carry `margin: 0` too. The white strip between them was entirely `column-gap: 24px` on `.wp-block-columns` — the Gutenberg block gap, which is page content this plugin does not own. So the rule below is scoped with `:has()` to a columns block that contains BOTH new presets. No other `.wp-block-columns` on the page — the Andhra Pradesh / Telangana pair, or any future one — can match it, and no negative margins are involved. Removing the gap rather than out-measuring it also means the ratio stays whatever the editor saved. ========================================================================== */ .wp-block-columns:has(.tsp-hero-wrap--cinematic):has(.tsp-sidebar-wrap--briefing) { column-gap: 0; } /* Meeting edges go square so the two read as one panel; the outer corners keep the card radius. Logical properties, so an RTL locale flips them correctly. */ .wp-block-columns:has(.tsp-hero-wrap--cinematic):has(.tsp-sidebar-wrap--briefing) .tsp-hero--cinematic { border-start-end-radius: 0; border-end-end-radius: 0; } .wp-block-columns:has(.tsp-hero-wrap--cinematic):has(.tsp-sidebar-wrap--briefing) .tsp-sidebar-wrap--briefing .tsp-sidebar { border-start-start-radius: 0; border-end-start-radius: 0; } /* Only once they are actually side by side. Stacked, each panel keeps its own full radius. 700px is the columns block's own width, not the viewport. */ @media (max-width: 781px) { .wp-block-columns:has(.tsp-hero-wrap--cinematic):has(.tsp-sidebar-wrap--briefing) .tsp-hero--cinematic, .wp-block-columns:has(.tsp-hero-wrap--cinematic):has(.tsp-sidebar-wrap--briefing) .tsp-sidebar-wrap--briefing .tsp-sidebar { border-radius: var(--tsp-card-radius, 10px); } } /* ------------------------------------------------- Briefing ACTIVE state --- The row already lifted its background, but the red left accent never appeared: `border-left-color` was only set on `:first-child`, so hovering any other row changed nothing at the edge. Both states now set it. `:focus-within` covers keyboard users reaching the headline link, which is the only focusable thing in a row. v1.10.573 — ONE LIST FOR THE WHOLE ACTIVE STATE. That earlier fix moved the row's chrome onto `:hover`/`:focus-within` and left its companion behind: the rank ring and numeral were recoloured by a separate `:first-child::before` rule further up the file. So from #2 down, a row would take the red accent and the burgundy wash while its numeral kept the resting pale ring and dark ink — the indicator read as missing against the active treatment, and was only ever right at #1, which is why it looked correct on load and broke the moment the pointer moved. Splitting an active state across two selectors is the bug, so the selector list is now shared: whatever makes a row active makes its ring active. `.is-active` and `[aria-current]` are included so that a programmatic selection — a Hero-synchronised row, or an auto-advanced one — lights the numeral through the same path rather than needing a second rule. Nothing emits them today; they cost nothing and they are the reason this cannot split again. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:hover, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:focus-within, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item.is-active, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item[aria-current] { border-left-color: var(--ts-red, #C8102E); background: linear-gradient(90deg, rgba(200, 16, 46, .13) 0%, rgba(200, 16, 46, .04) 58%, rgba(200, 16, 46, 0) 100%); } /* The ring and the numeral, on exactly the same states — plus `:first-child`, which is the resting active row. Declared after the base `::before` so it wins on order rather than on specificity, and it sets only colour: the circle's size, position and `content` counter are untouched, so the number cannot move or vanish. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:first-child::before, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:hover::before, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:focus-within::before, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item.is-active::before, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item[aria-current]::before { border-color: var(--ts-red, #C8102E); color: var(--ts-red, #C8102E); } .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:focus-within { outline: 2px solid var(--ts-red, #C8102E); outline-offset: -2px; } /* #01 keeps a stronger wash than a hovered neighbour, so its priority reads even while another row is hovered. Declared after, so it wins the tie. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:first-child:hover, .tsp-sidebar__section--scope-briefing .tsp-sidebar__item:first-child:focus-within { background: linear-gradient(90deg, rgba(200, 16, 46, .26) 0%, rgba(200, 16, 46, .09) 58%, rgba(200, 16, 46, 0) 100%); } /* ========================================================================== v1.10.162 — Briefing polish pass, measured against the approved reference ========================================================================== */ /* PANEL PADDING. Measured 1px on staging although `--tsp-brief-pad` resolved to 16px: an external rule sets `padding:1px` on the carousel-enabled sidebar and was outranking the preset's own declaration, which is why the heading sat against the panel edge. Naming the wrapper and both sidebar classes clears it without !important. */ .tsp-sidebar-wrap--briefing .tsp-sidebar.tsp-sidebar--single { padding: var(--tsp-brief-pad, 20px); } /* HEADER BREATHING ROOM, per the reference: the wordmark sits down from the edge rather than against it. */ .tsp-sidebar-wrap--briefing .tsp-sidebar { --tsp-brief-pad: 22px; } /* v1.10.426 — the panel's side gutters, on phones only. * * 22px of panel padding plus a 1px border was costing 46px of every row, and on * a 320px screen that is a sixth of the whole viewport spent on empty margin * before a headline starts. Measured: the headline column was 188px at both 320 * AND 375 — the wider screen bought nothing, because the extra width went to the * thumbnail rather than the text. * * INLINE only. `--tsp-brief-pad` sets all four sides, and taking it down * globally would pull the wordmark up against the top edge — the "header * breathing room" the rule above exists for. The block padding is untouched. * * 12px chosen from rendered evidence, not preference. Sweeping 14 / 12 / 10: * 14px leaves the fifth headline on four lines at 320; 12px clears every * four-line headline at 320, 375, 390 and 430; 10px buys four more pixels and * one extra two-line headline at 430, which is not worth the panel looking * pinched. The Briefing keeps a visible, deliberate gutter. * * The rank column is deliberately NOT narrowed. The ranking circle renders * 26px inside a 20px track, so it is already the widest thing in that column — * there is no slack there, and taking any would crop the circles. Everything * recovered goes to the headline. */ @media (max-width: 480px) { .tsp-sidebar-wrap--briefing .tsp-sidebar.tsp-sidebar--single { padding-inline: 12px; } } .tsp-sidebar-wrap--briefing .tsp-nav-header { margin-block: 4px 16px; } .tsp-sidebar-wrap--briefing .tsp-briefing__sub { margin-top: 6px; } /* THE / SCOPE / BRIEFING. Only the middle word is red; the renderer wraps it in a real span so the heading stays one readable string for assistive tech. */ .tsp-sidebar-wrap--briefing .tsp-briefing__accent { color: var(--ts-red, #C8102E); } /* STORY HEADLINE TYPOGRAPHY. Declared on the ANCHOR as well as the

, because the theme sets a family on the anchor itself — setting it only on the heading leaves the rendered glyphs untouched. That mechanism is why both selectors are here and it still applies. v1.10.422: the family is the display serif. The earlier note here argued the Briefing should read as "news UI sans" to stay distinct from the Hero; the owner's unification says the opposite — the Briefing is the publication's named editorial product and its headlines belong to the display system. Hero and Briefing remain distinct by SCALE, which is the honest difference between a 36px lead and a 13px rail line. */ .tsp-sidebar__section--scope-briefing .tsp-story-title, .tsp-sidebar__section--scope-briefing .tsp-story-title a { font-family: var(--ts-display, Georgia, serif); /* v1.10.424: the Briefing's own token at 16px, one step above the rest of the dense tier. v1.10.423 moved it off a hardcoded 13px to the shared dense size; an accessibility review found it still tight, and this is the one component measured to take 16px for nothing — its rows are sized by the thumbnail, so neither the rail nor the page grows by a pixel. */ font-size: var(--ts-title-brief); line-height: var(--ts-lh-dense); font-weight: 700; letter-spacing: -.005em; } /* ONLY ONE ROW EVER LOOKS ACTIVE. #01 is a DEFAULT, not a selection: as soon as any row is hovered or holds focus, the list neutralises #01 unless #01 is itself that row. Pure CSS via `:has()` on the list — no JavaScript is added for a visual state. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__list:has(.tsp-sidebar__item:hover) .tsp-sidebar__item:first-child:not(:hover), .tsp-sidebar__section--scope-briefing .tsp-sidebar__list:has(.tsp-sidebar__item:focus-within) .tsp-sidebar__item:first-child:not(:focus-within) { border-left-color: transparent; background: none; } /* v1.10.574: …including its RANK RING, which this rule did not reach. The same half-a-state that hid the numeral in 1.10.573, mirrored: the neutraliser gave back #01's accent and wash but left its ring red, so once the ring started following the active row, TWO rows read as active at once. Measured while row 2 was hovered — at 1440 both #1 and #2 were red at 390 and only #2 at desktop, because a `@media (min-width:1024px) and (hover:hover)` block further down already reset the ring and nothing did below that tier. Stated here so it holds at every width and on touch, with the resting values the base rule uses, so a neutralised #01 is indistinguishable from rows 2-5. */ .tsp-sidebar__section--scope-briefing .tsp-sidebar__list:has(.tsp-sidebar__item:hover) .tsp-sidebar__item:first-child:not(:hover)::before, .tsp-sidebar__section--scope-briefing .tsp-sidebar__list:has(.tsp-sidebar__item:focus-within) .tsp-sidebar__item:first-child:not(:focus-within)::before { border-color: var(--tsp-brief-rule); color: var(--tsp-brief-ink); } /* ========================================================================== v1.10.234 — TRENDING SHOWCASE (`trending-showcase`) References: Images/trending_desktop.png, _tablet.png, _mobile.png, _small_mobile.png The homepage Trending preview. One preset, four deliberately different compositions, all reading the SAME markup the shared section renderer already emits — image, category kicker, headline,