/* ============================================================ Aperture category archive. Ported from docs/aperture-preview/preview-category.html (reference only — nothing in docs/ is served or enqueued). Loads only on a category archive, behind the category_template option. ============================================================ */ .tsp-cat-wrap{--tsp-cat-red:#C8102E;--tsp-cat-gold:#D9B15C;--tsp-cat-ink:#16181F; --tsp-cat-muted:#676E7B;--tsp-cat-line:#e8e5de;--tsp-cat-paper:#fff; max-width:var(--tsp-shell,1200px);margin:0 auto;padding:0 20px 40px;font-family:var(--ts-ui)} /* ---------------- header ---------------- */ .tsp-cat__head{padding:14px 0 6px;border-bottom:1px solid var(--tsp-cat-line);margin-bottom:18px} .tsp-cat__crumb{font-size:11.5px;color:var(--tsp-cat-muted);font-weight:600} /* Same 24px touch floor as the article breadcrumb (v1.10.450). The category crumb is the same control in a different template, so it gets the same treatment rather than waiting to be measured separately. */ .tsp-cat__crumb a{color:var(--tsp-cat-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:24px} .tsp-cat__crumb a:hover,.tsp-cat__crumb a:focus-visible{color:var(--tsp-cat-ink)} .tsp-cat-wrap .tsp-cat__title{font-family:var(--ts-display);font-size:30px;line-height:1.15; font-weight:700;color:var(--tsp-cat-ink);margin:10px 0 0;padding-left:14px; border-left:5px solid var(--tsp-cat-red)} .tsp-cat__meta{font-size:11.5px;color:var(--tsp-cat-muted);font-weight:600;margin:8px 0 0;padding-left:19px} .tsp-cat__desc{font-family:var(--ts-body);font-size:14.5px;line-height:1.6;color:#3A3D46; margin:10px 0 0;padding-left:19px;max-width:75ch} /* Chips render only when the category has real children. */ .tsp-cat__chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px;padding-left:19px} .tsp-cat__chip{font-size:11.5px;font-weight:700;color:#3A3D46;text-decoration:none; border:1px solid var(--tsp-cat-line);border-radius:999px;padding:5px 13px;white-space:nowrap; transition:border-color .15s,color .15s} .tsp-cat__chip:hover,.tsp-cat__chip:focus-visible{border-color:var(--tsp-cat-red);color:var(--tsp-cat-red)} .tsp-cat__chip.is-active{background:var(--tsp-cat-ink);border-color:var(--tsp-cat-ink);color:#fff} /* ---------------- layout ---------------- */ .tsp-cat__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start} /* v1.10.345  the compact state for a category that has only its lead block. A category page is two independent columns, which is right while the feed has enough stories to run alongside the rail. When it does not, the rail keeps going on its own and the space beside it is simply empty. Measured at 1366: Technology feed 300px rail 1242px -> 942px of dead column Photos feed 409px rail 1215px -> 806px Politics feed 1318px rail 1513px -> 195px (reads fine) The test is structural, not a story count and not a category name: a sparse page renders `.tsp-cat__lead` and nothing after it -- no `.tsp-cat__rows`, no pager. So the page stops pretending to be two columns. The feed takes the full measure and the rail becomes a discovery band beneath it, its modules laid side by side instead of stacked down a 320px strip. Nothing is added, duplicated or relabelled -- the same modules appear in the same order, turned through ninety degrees. No category is named anywhere. v1.10.571: `.tsp-cat__grid--thin` joins each of these selectors. "The moment the category gains enough stories to emit `.tsp-cat__rows`" turned out to be too early: at six stories the feed is 494px against a 1356px rail, and at eight it is 830 against 1574 -- roughly 800px of the same dead column this treatment exists to remove, just past the point where it stopped matching. The template adds the modifier below ten stories; by twelve the gap is a third of that, which is what a sidebar normally looks like. See archive-category.php for the measurements. */ .tsp-cat__grid:not(:has(.tsp-cat__rows)), .tsp-cat__grid--thin{grid-template-columns:minmax(0,1fr)} /* Columns rather than a grid, because these five modules are wildly different heights -- measured 320, 104, 198, 349 and 208px. A grid puts them in equal rows and the fifth wraps onto a row of its own, which traded the dead column beside the feed for ~500px of dead space beside a lone newsletter card. Column flow packs by height instead, so the band ends level. */ .tsp-cat__grid:not(:has(.tsp-cat__rows)) .tsp-cat__rail, .tsp-cat__grid--thin .tsp-cat__rail{ display:block; columns:3 260px; column-gap:20px; /* sticky has nothing left to stick against once the rail is a band. */ position:static; } .tsp-cat__grid:not(:has(.tsp-cat__rows)) .tsp-cat__rail > *, .tsp-cat__grid--thin .tsp-cat__rail > *{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 20px; } .tsp-cat__main{min-width:0} /* ---------------- lead block (page 1) ---------------- */ /* v1.10.297 — 1.4fr, not 1.5fr. The supporting cards were 154px wide at 1440. In the display serif that is about 16 characters a line, so the real 75-84 character headlines needed 5-7 lines against a 3-line clamp and EVERY card clipped at EVERY desktop width. The cause is measure, not the clamp: at 154px no clamp count avoids the cut without making the card ~230px and standing the 2x2 block 100px taller than the lead beside it. Shifting the ratio buys the supporting column real width while the lead stays clearly dominant. */ .tsp-cat__lead{display:grid;grid-template-columns:1.4fr 1fr;gap:14px} /* A column is reserved for supporting cards only when there are some. `lead_block()` emits `.tsp-cat__lead-four` only if a second story exists, so a one-story category rendered a 670px lead beside 490px of nothing at 1440 — measured on Telugu Politics and Telugu Reviews, which carry one story each. Same quantity-query idiom as the compact rail above: no category is named, and the two-column lead returns by itself the moment a second story lands. */ .tsp-cat__lead:not(:has(.tsp-cat__lead-four)){grid-template-columns:minmax(0,1fr)} /* `start`, because auto tracks in a stretched grid absorb the free space and hand it to the cards. With two or three stories the 2x2 holds a single row, that row grew to the full height of the lead beside it, and each card carried ~100px of white under its byline — English Technology at 1440. Packing from the top leaves the space at the foot of the column, where it reads as margin rather than as a hole inside a card. */ .tsp-cat__lead-four{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start} .tsp-cat__card{display:block;text-decoration:none;color:inherit;min-width:0} .tsp-cat__card-media{display:block;position:relative;overflow:hidden;border-radius:8px;aspect-ratio:16/10} .tsp-cat__card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .tsp-cat__card:hover .tsp-cat__card-media img{transform:scale(1.04)} /* The same answer a row gives. A row title turns red under the cursor and a card title did not, so one page replied to the same gesture in two ways — and on a touch device, where the image zoom is switched off below, the card had no hover language left at all. */ .tsp-cat__card:hover .tsp-cat__card-title{color:var(--tsp-cat-red)} .tsp-cat__ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e9e6dd,#d8d4c8)} .tsp-cat__card-body{display:block;padding-top:9px} .tsp-cat__kicker{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--tsp-cat-red)} .tsp-cat__card-title{display:block;font-family:var(--ts-display);font-size:16px;font-weight:700; line-height:1.28;margin-top:4px;color:var(--tsp-cat-ink);overflow-wrap:break-word} .tsp-cat__card--lead .tsp-cat__card-title{font-size:24px;line-height:1.2} /* Secondary cards sit in a narrow column, so the type is smaller than the lead's and the headline is clamped rather than allowed to push the card. v1.10.297: FOUR lines, not three. Three cut every real headline by two lines or more. Four plus the extra column width from the 1.4fr ratio above carries the genuine 75-84 character headlines, and costs each card roughly one line of height rather than the three a no-clamp approach would. */ /* 12.5px, not 13: the longest genuine headline (84 chars) was still one line short at 13px and shipped cut at "…Vizag AI Data C". Half a pixel buys about a character a line, which clears it — and five lines at 12.5px are SHORTER than five at 13px, so the card gets no taller for the fix. */ .tsp-cat__lead-four .tsp-cat__card-title{font-size:12.5px;line-height:1.32; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} /* The fifth line is paid for by the image, not by the card: 16/9 instead of 16/10 returns ~10px, and 13px instead of 13.5 buys about a character a line. Net card height is unchanged, and the genuine headlines now complete. */ .tsp-cat__lead-four .tsp-cat__card-media{aspect-ratio:16/9} .tsp-cat__card--lead .tsp-cat__card-media{aspect-ratio:16/9} .tsp-cat__by{display:block;font-size:11px;color:var(--tsp-cat-muted);font-weight:600;margin-top:6px} /* ---------------- list rows ---------------- */ .tsp-cat__rows{margin-top:22px;border-top:1px solid var(--tsp-cat-line)} .tsp-cat__row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px; padding:16px 0;border-bottom:1px solid var(--tsp-cat-line);text-decoration:none;color:inherit} .tsp-cat__row-media{display:block;overflow:hidden;border-radius:8px;aspect-ratio:16/10} .tsp-cat__row-media img{width:100%;height:100%;object-fit:cover;display:block} .tsp-cat__row-body{display:block;min-width:0} .tsp-cat__row-title{display:block;font-family:var(--ts-display);font-size:18px;font-weight:700; line-height:1.27;margin-top:4px;color:var(--tsp-cat-ink);overflow-wrap:break-word} /* Two-line clamp in CSS — never a server-side truncation that cuts a word. */ .tsp-cat__row-ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-family:var(--ts-body);font-size:13.5px;line-height:1.55;color:#3A3D46;margin-top:6px} .tsp-cat__row:hover .tsp-cat__row-title{color:var(--tsp-cat-red)} /* ---------------- pagination ---------------- */ .tsp-cat__pager{display:flex;gap:8px;justify-content:center;margin:24px 0 6px;flex-wrap:wrap} .tsp-cat__pager a,.tsp-cat__pager .current{display:inline-flex;align-items:center;justify-content:center; min-width:36px;height:36px;padding:0 12px;border:1px solid var(--tsp-cat-line);border-radius:6px; font-size:12.5px;font-weight:700;text-decoration:none;color:var(--tsp-cat-ink)} .tsp-cat__pager .current{background:var(--tsp-cat-ink);border-color:var(--tsp-cat-ink);color:#fff} .tsp-cat__pager a:hover,.tsp-cat__pager a:focus-visible{border-color:var(--tsp-cat-red);color:var(--tsp-cat-red)} /* ---------------- empty state ---------------- */ .tsp-cat__empty{text-align:center;padding:56px 20px 64px;border:1px solid var(--tsp-cat-line); border-radius:12px;background:var(--tsp-cat-paper)} .tsp-cat-wrap .tsp-cat__empty h2{font-family:var(--ts-display);font-size:24px;font-weight:700;margin:0 0 8px} .tsp-cat__empty p{font-size:14px;color:var(--tsp-cat-muted);margin:0 0 6px} /* v1.10.641 — WCAG 2.2 AA target size (2.5.8). 17px tall and 16px from the search Submit, which is a DIFFERENT target: on a 404 — already the worst moment to mis-tap — a low thumb on "Back to the front page" ran a search instead. Both editions. Inline padding again: hit area to 25px, layout untouched. */ .tsp-cat__empty-link{color:var(--tsp-cat-red);font-weight:700;text-decoration:none;padding-block:4px} /* ---------------- sidebar ---------------- */ .tsp-cat__rail{display:flex;flex-direction:column;gap:16px;min-width:0} .tsp-cat__panel{border:1px solid var(--tsp-cat-line);border-radius:10px;padding:14px 16px;background:var(--tsp-cat-paper)} /* v1.10.422: "MOST VIEWED IN POLITICS" names an editorial collection, so it takes the display family. It had no font-family of its own and was inheriting Inter from the theme's --theme-font-family, which is how it drifted from the section headings it sits beside. Scale and case unchanged. */ .tsp-cat-wrap .tsp-cat__panel-h{font-family:var(--ts-display);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--tsp-cat-muted);margin:0 0 10px} .tsp-cat__ranked{list-style:none;margin:0;padding:0} .tsp-cat__ranked li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--tsp-cat-line)} .tsp-cat__ranked li:first-child{border-top:0} .tsp-cat__rank{font-family:var(--ts-display);font-size:16px;font-weight:700;color:var(--tsp-cat-gold);line-height:1.2} /* v1.10.565: the 24px floor. These links are a bare line box — 13px at 1.35 is 17.55px and the rule carried no padding, so the height came entirely from whether the headline wrapped. In the narrow rail it wraps to two or three lines and measures 35-58px; at 640 and 768 the rail goes full width, the headline fits on one line, and every entry collapsed to 19px. The row's own 7px padding sits on the
  • , so it enlarges the row without enlarging the target. Only one-line entries change. TOP-aligned, not centred. Centring the text inside the new 24px box pushed it 2.22px below the rank numeral on every one-line row — measured, and visible as a faint stagger between "01" and its headline. The numeral and the headline's first line share a top edge, and min-height alone keeps that while lifting the box to the floor. Multi-line rows are untouched: they already exceed 24px, so the floor is inert there. */ .tsp-cat__ranked a{display:block;min-height:24px;font-size:13px;line-height:1.35;font-weight:600;color:var(--tsp-cat-ink);text-decoration:none} .tsp-cat__ranked a:hover,.tsp-cat__ranked a:focus-visible{color:var(--tsp-cat-red)} .tsp-cat-wrap a:focus-visible{outline:2px solid var(--tsp-cat-red);outline-offset:2px} /* ---------------- rail advertisement (300x250) ---------------- */ /* Every declaration the slot needs is written here rather than inherited from the advertisement module's stylesheet. That sheet is enqueued by the ad BLOCK, and a category archive need not contain one, so relying on it would leave the placeholder unstyled on exactly the pages this slot exists for. Sized in PROPORTION, not in pixels: `width:100%` with `max-width:300px` keeps the creative at its natural 300 wide in the desktop rail and lets it shrink below that at 320, where the rail is only ~280 — a hard `width:300px` is what would push the page sideways there. `aspect-ratio` holds 300:250 either way, so the box reserves its space before any creative loads and nothing shifts. */ .tsp-cat__ad{min-width:0} .tsp-cat__rail .tsp-ad{ margin:0; max-width:none; padding:14px 16px; border:1px solid var(--tsp-cat-line); border-radius:10px; background:var(--tsp-cat-paper); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .tsp-cat__rail .tsp-ad .tsp-ad__label{ display:block; margin:0; font-family:var(--ts-ui); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tsp-cat-muted); } /* The empty frame. A dashed hairline and a flat neutral read as "reserved space" rather than as a bordered editorial card competing with Most Viewed directly beneath it. */ .tsp-cat__rail .tsp-ad--empty .tsp-ad__creative--empty{ display:flex; align-items:center; justify-content:center; width:100%; max-width:300px; aspect-ratio:300/250; border:1px dashed #d5d0c6; border-radius:8px; background:#faf9f7; } /* Decorative dimension hint. It lives on the frame, which the renderer marks aria-hidden, so it is never announced — and it is a development artifact, not a string a reader is meant to act on. */ .tsp-cat__rail .tsp-ad--empty .tsp-ad__creative--empty::after{ /* Literal ×, not `\00D7`: a CSS escape is terminated by the space that follows it, so `"300 \00D7 250"` renders as "300 ×250" with the second space eaten. */ content:"300 × 250"; font-family:var(--ts-ui); font-size:11px; letter-spacing:.06em; color:#a9a396; } /* ---------------- responsive ---------------- */ @media (min-width:1020px){ .tsp-cat__rail{position:sticky;top:60px} } @media (max-width:1019px){ .tsp-cat__grid{grid-template-columns:minmax(0,1fr)} } /* v1.10.297 — below 1200 the lead package STACKS: lead full width, then the 2x2 beneath it, also full width. 1020-1199 was the worst measure on the whole page. The rail is still beside the main column there, but the main column has shrunk, so each supporting card fell to 118px at 1024 — about 12 characters a line, which no clamp count can make read well. Letting the desktop two-up survive down to 760 was the "desktop CSS collapsing" this tier is supposed to replace. Stacked, the four cards get the full main width: ~312px each at 1024 and ~358px at 768, so the genuine headlines land in two or three lines with the clamp never reached. The lead also gains the full column. */ @media (max-width:1199px){ .tsp-cat__lead{grid-template-columns:minmax(0,1fr)} /* Stacked, each supporting card is 312-424px wide. Held as a vertical card its 16/10 image became 195-265px tall and the card 276-328px — headlines stopped clipping but the block ballooned to ~670px, which is the opposite failure. Horizontal instead: a fixed 132px thumbnail, headline beside it. The card returns to ~90px, and the headline keeps the wide measure that removed the clipping in the first place. */ /* ONE column, not the 2x2. Held at two columns the horizontal card's 132px thumbnail ate most of a half-width cell and left only 130-168px of text at 600-1024 — narrower than the desktop measure this tier exists to fix. A single list of four rows gives each headline the full main column. */ .tsp-cat__lead-four{grid-template-columns:minmax(0,1fr)} .tsp-cat__lead-four .tsp-cat__card{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; align-items:start; } .tsp-cat__lead-four .tsp-cat__card-media{aspect-ratio:4/3} .tsp-cat__lead-four .tsp-cat__card-body{padding-top:0} .tsp-cat__lead-four .tsp-cat__card-title{font-size:14px;-webkit-line-clamp:3} } /* v1.10.304 — the feed keeps its horizontal row down to 520, not 760. Image-on-top from 760 made each feed row ~490px tall at 600, so five rows ran 2445px and the page reached 6066px. At 521-760 there is ample width for a thumbnail beside the text: the row is denser, scans faster, and is what a news index should be. The thumbnail narrows so the headline keeps its measure. */ @media (min-width:521px) and (max-width:760px){ .tsp-cat__row{grid-template-columns:150px minmax(0,1fr);gap:14px} .tsp-cat__row-media{aspect-ratio:4/3} } /* Below 520 the image DOES lead the row — at that width a thumbnail leaves too little headline, and a full-bleed image is the stronger phone treatment. */ @media (max-width:520px){ .tsp-cat__row{grid-template-columns:minmax(0,1fr);gap:10px} .tsp-cat__row-media{aspect-ratio:16/9} } @media (max-width:760px){ .tsp-cat__lead{grid-template-columns:minmax(0,1fr)} .tsp-cat-wrap .tsp-cat__title{font-size:24px} .tsp-cat__card--lead .tsp-cat__card-title{font-size:20px} .tsp-cat__row-title{font-size:17px} /* The chip row scrolls instead of wrapping into a tall block. */ .tsp-cat__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .tsp-cat__chips::-webkit-scrollbar{width:0;height:0;display:none} } @media (max-width:520px){ .tsp-cat__lead-four{grid-template-columns:minmax(0,1fr)} .tsp-cat__meta,.tsp-cat__desc,.tsp-cat__chips{padding-left:0} .tsp-cat-wrap .tsp-cat__title{font-size:21px;padding-left:11px} } @media (prefers-reduced-motion:reduce){ .tsp-cat__card-media img{transition:none} .tsp-cat__card:hover .tsp-cat__card-media img{transform:none} } /* Trending — real tags, no counts. Chips rather than a ranked list, because these are terms to jump to, not stories in an order. */ .tsp-cat__tags{display:flex;flex-wrap:wrap;gap:7px} .tsp-cat__tag{font-size:11.5px;font-weight:700;color:#3A3D46;text-decoration:none; border:1px solid var(--tsp-cat-line);border-radius:999px;padding:5px 12px; transition:border-color .15s,color .15s} .tsp-cat__tag:hover,.tsp-cat__tag:focus-visible{border-color:var(--tsp-cat-red);color:var(--tsp-cat-red)} /* ========================================================================== v1.10.112 — mobile category list, section 14 of the mobile build. Target: the prototype's `.medi_list` / `.mrow` — a compact media row with a 96x70 thumbnail, kicker, headline and time. Measured at 390px before this change: the four lead-four cards were 282px each (219px image + 63px text) and each list row was ~380px, giving a 3,527px main column inside a 4,526px page. Full-width art on every item turns a scannable index into a slideshow — the reader has to scroll a whole screen per headline. The LEAD card keeps its full-width image: it is the one story the page is actually leading with, and the prototype gives it the same treatment. ========================================================================== */ @media (max-width:520px){ /* The four under the lead become rows in one bordered list, exactly like the list below them, so the eye reads a single column of headlines rather than two different card treatments stacked on each other. */ .tsp-cat__lead-four{grid-template-columns:minmax(0,1fr);gap:0} .tsp-cat__lead-four .tsp-cat__card{ display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px; align-items:start;padding:13px 0; border-top:1px solid var(--tsp-cat-line); } .tsp-cat__lead-four .tsp-cat__card:first-child{border-top:0} .tsp-cat__lead-four .tsp-cat__card-media{aspect-ratio:96/70;border-radius:9px} .tsp-cat__lead-four .tsp-cat__card-body{padding-top:0} /* v1.10.300: FOUR lines. Three cut every headline here — 172px of measure at 320 is about 11 words, and these run 12-14. The rows are compact (70px thumbnail), so the fourth line costs ~19px and the card still reads as a row rather than a card. */ .tsp-cat__lead-four .tsp-cat__card-title{font-size:15px;line-height:1.28;-webkit-line-clamp:4} } /* The narrowest phones. 280px of card leaves 172px of headline once a 96px thumbnail and its gap are taken, which is ~11 characters a line — four lines still cut all four headlines. A slightly smaller thumbnail returns ~24px and a fifth line covers the genuine 75-84 character range. The row stays a row: the text column simply becomes the taller side, as it already is at 360. */ @media (max-width:360px){ .tsp-cat__lead-four .tsp-cat__card{grid-template-columns:76px minmax(0,1fr);gap:10px} .tsp-cat__lead-four .tsp-cat__card-title{-webkit-line-clamp:5} /* The list itself: 96px thumb, not a 16/9 banner. */ .tsp-cat__row{grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start} .tsp-cat__row-media{aspect-ratio:96/70;border-radius:9px} .tsp-cat__row-title{font-size:15px;line-height:1.28} /* Snap points make the chip row settle on a chip edge when it is swiped rather than mid-label. */ .tsp-cat__chips{scroll-snap-type:x proximity;gap:8px} .tsp-cat__chip{scroll-snap-align:start} } /* Touch targets across the whole phone/tablet range, not just below 520px. Measured: chips 30px tall and pager links 36px — both under the floor at 768px too, which is a touch width. Scoped to the input, like the ticker arrows: a desktop pointer at 1440px keeps the compact controls. */ @media (max-width:782px){ .tsp-cat__chip{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} .tsp-cat__pager a,.tsp-cat__pager .current{min-width:44px;min-height:44px} } /* ========================================================================== v1.10.296 — RAIL POLISH Two modules arrived in the rail from the ARTICLE template, at article scale and with no card around them, so they read as loose text dropped between the bordered panels rather than as members of the same stack. Scoped to `.tsp-cat__rail` so the article template's own presentation is untouched until its redesign reaches it. ========================================================================== */ /* ---- newsletter: the red editorial panel from the approved design -------- */ .tsp-cat__rail .tsp-rail--news{ margin:0; padding:18px; border-radius:10px; background:var(--tsp-cat-red); color:#fff; } .tsp-cat__rail .tsp-rail--news h2{ margin:0; font-family:var(--ts-display); font-size:19px; line-height:1.2; font-weight:700; color:#fff; } .tsp-cat__rail .tsp-rail--news p{ margin:6px 0 12px; font-family:var(--ts-ui); font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.88); } .tsp-cat__rail .tsp-rail--news form{ display:flex; flex-direction:column; gap:8px; } /* 16px on the input specifically: below that iOS Safari zooms the viewport on focus, which on a phone throws the whole page sideways. */ .tsp-cat__rail .tsp-rail--news input[type="email"], .tsp-cat__rail .tsp-rail--news input[type="text"]{ width:100%; min-height:44px; padding:10px 12px; border:1px solid rgba(255,255,255,.28); border-radius:7px; background:#fff; color:var(--tsp-cat-ink); font-family:var(--ts-ui); font-size:16px; } .tsp-cat__rail .tsp-rail--news input::placeholder{color:var(--tsp-muted,#676E7B)} .tsp-cat__rail .tsp-rail--news button{ min-height:44px; padding:11px 16px; border:0; border-radius:7px; background:var(--tsp-cat-ink); color:#fff; font-family:var(--ts-ui); font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:background .16s ease; } .tsp-cat__rail .tsp-rail--news button:hover, .tsp-cat__rail .tsp-rail--news button:focus-visible{background:#000} .tsp-cat__rail .tsp-rail--news :focus-visible{ outline:3px solid #fff; outline-offset:2px; } /* The result message the handler redirects with. */ .tsp-cat__rail .tsp-rail__msg{ margin:2px 0 0; font-family:var(--ts-ui); font-size:12px; line-height:1.35; color:#fff; } .tsp-cat__rail .tsp-rail__msg.is-error{color:#ffd7dd} /* ---- తెలుగు Highlights: same card as its neighbours --------------------- */ .tsp-cat__rail .tsp-sidebar-wrap{ padding:14px 16px; border:1px solid var(--tsp-cat-line); border-radius:10px; background:var(--tsp-cat-paper); } .tsp-cat__rail .tsp-sidebar--telugu .tsp-nav-header .tsp-section-heading, .tsp-cat__rail .tsp-sidebar--telugu .tsp-nav-header h2{font-size:13.5px} .tsp-cat__rail .tsp-sidebar--telugu .tsp-story-title{font-size:var(--ts-title-dense);line-height:var(--ts-lh-dense)} .tsp-cat__rail .tsp-sidebar--telugu time{font-size:10.5px} .tsp-cat__rail .tsp-sidebar--telugu .tsp-sidebar__item-image{width:56px} /* ========================================================================== v1.10.303 — LEAD IMAGE TREATMENT The lead ran as a plain image with the headline in dark ink beneath it. The approved design puts the headline ON the photograph. Overlaid from 761px up (desktop and tablet, where the lead is wide enough to carry text); phones keep text below the image, because at ~350px wide the picture is only ~197px tall and an overlay there buries the photograph instead of using it. The gradient is deliberately shallow. Its job is to make white text legible over the BOTTOM of the frame, not to darken the picture: the top ~30% is completely clear, so the image still reads as an image. A flat scrim across the whole frame is the "heavy dark overlay" this is specifically avoiding. It is also anchored to the bottom rather than covering everything, which means a bright sky, a dark interior or a busy background all keep their own character above the text band. ========================================================================== */ @media (min-width:761px){ .tsp-cat__card--lead{ position:relative; height:100%; min-height:300px; border-radius:8px; overflow:hidden; isolation:isolate; } /* The media fills the card rather than holding a ratio, so the lead matches the height of the 2x2 block beside it instead of leaving a band of white under a 16/9 image. */ .tsp-cat__card--lead .tsp-cat__card-media{ height:100%; aspect-ratio:auto; border-radius:0; } /* OUT OF FLOW, which is what makes the rule above true. The media drops its ratio so the lead can match the 2x2 block beside it, but an in-flow still contributes its own natural height — so the PHOTOGRAPH decided the row, not the section. Measured at 1440: English Movies, whose lead source is 355x455, stood the lead media at 466x597 where Politics (1200x675) stood at 466x381, and the 2x2 stretched with it until every supporting card carried a band of dead space. Absolute positioning removes the image from the height calculation entirely; the card keeps its 300px floor and the supporting column sets the height, which is what this tier was always meant to do. */ .tsp-cat__card--lead .tsp-cat__card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; /* Faces and skylines sit in the upper half of a news photograph far more often than the lower; biasing the crop upward keeps the subject when the frame is taller than the source. */ object-position:50% 38%; } .tsp-cat__card--lead .tsp-cat__card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,13,18,.84) 0%, rgba(11,13,18,.58) 24%, rgba(11,13,18,.18) 48%, rgba(11,13,18,0) 70%); pointer-events:none; } .tsp-cat__card--lead .tsp-cat__card-body{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px 18px; z-index:1; } /* White on the darkest part of the gradient. The kicker keeps its red in the reference, but red on a dark photograph fails contrast, so it becomes a solid red chip — the brand colour is preserved as a FIELD rather than as text, which is what makes it readable here. */ .tsp-cat__card--lead .tsp-cat__kicker{ display:inline-block; background:var(--tsp-cat-red); color:#fff; padding:4px 9px; border-radius:4px; margin-bottom:9px; } .tsp-cat__card--lead .tsp-cat__card-title{ color:#fff; margin-top:0; text-shadow:0 1px 2px rgba(0,0,0,.34); } .tsp-cat__card--lead .tsp-cat__by{ color:rgba(255,255,255,.9); text-shadow:0 1px 2px rgba(0,0,0,.34); } .tsp-cat__card--lead:hover .tsp-cat__card-media img{transform:scale(1.03)} .tsp-cat__card--lead:hover .tsp-cat__card-title{color:#fff} } /* v1.10.504 — the Scope Verdict on an archive card. * * The review desk's index now says it is the review desk: a score and a * verdict badge ride with the headline, from the same `Scope_Verdict_View` * that renders them in the homepage band and on the article. Only the * placement lives here; the score and badge bring their own styling with * `scope-verdict.css`, which the template enqueues for review sections only. * * `flex-wrap` matters at 320 and in Telugu: a long verdict word beside a score * has nowhere to go on a narrow card, and wrapping is the right answer rather * than letting it push the card wider. */ .tsp-cat__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; } /* On the row list the byline follows, so the verdict needs a little air below it as well or the two meta lines read as one block. */ .tsp-cat__row .tsp-cat__verdict { margin-bottom: 2px; } /* v1.10.505 — the score has to be legible on a LIGHT card. * * `scope-verdict.css` is written for the homepage's dark panel, so the score * value is white. On the archive that put white type on a #FAFBFC card: * measured 255,255,255 on 250,251,252, a contrast ratio of about 1.02:1. The * cards rendered "★ /5 BLOCKBUSTER" with a hole where the number belongs. * * Worth recording how this got through: the DOM check passed. The text was * present, the aria-label was correct, the markup was right, and the number * was invisible. Only the screenshot showed it. The lead card hid it too, * because its type sits over the photograph, where white is correct — which is * why the fix is scoped rather than global. */ .tsp-cat__verdict .tsp-sv-cscore__v { color: #16181f; } /* v1.10.506 — and the white is bounded by the same query that creates the overlay it exists for. The first fix said "lead card = white", which was true only above 761px: that is where `.tsp-cat__card--lead` becomes `position:relative` and its body moves on top of the photograph. Below it the lead is an ordinary stacked card on a light ground, so the unconditional rule put the number back into white on white -- the identical defect, moved from the three small cards to the big one, and visible only on a phone. Caught by screenshotting 390 after fixing 1920. */ @media (min-width: 761px) { .tsp-cat__card--lead .tsp-cat__verdict .tsp-sv-cscore__v { color: #fff; } } /* ========================================================================== v1.10.668 — PORTRAIT MEDIA on the archive surfaces. Latest Stories, the category archives and search all render through `tsp-cat__row` / `tsp-cat__card`, NOT through Section_Renderer — which is why the v1.10.666 portrait work, scoped to `.tsp-sidebar__item-image`, did not reach them. The Rashmika card stayed hard-cropped on Latest Stories even though her attachment already qualified as portrait and already had its uncropped derivative: the decision was right and this renderer was never asking it. Same treatment as the Briefing tile, same reasons. THE BOX DOES NOT MOVE: every `aspect-ratio` above still governs, and only `object-fit` and the backdrop change, so no row height or column track can shift. Declared LAST so these tie the rules above and win on source order. ========================================================================== */ .tsp-cat__media--portrait { position: relative; background: var(--ts-ink, #16181F); } /* A blurred, darkened copy of the same derivative the already loaded, so it costs no second download. `scale` hides the transparent bleed a blur leaves at the edges. With `--tsp-tile-bg` unset the background-image is simply invalid and the charcoal stands alone. */ .tsp-cat__media--portrait::before { content: ""; position: absolute; inset: 0; background-image: var(--tsp-tile-bg); background-size: cover; background-position: center 30%; filter: blur(12px) brightness(.42) saturate(.85); transform: scale(1.25); z-index: 0; } /* The photograph, whole and sharp above the blur. Never cropped, never stretched — and never itself blurred, which is why the backdrop is a pseudo-element rather than a filter on the wrapper. */ .tsp-cat__media--portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center center; } /* Any hover zoom is a crop effect and would push a contained picture past its own edges, which is the thing this block exists to prevent. */ .tsp-cat__row:hover .tsp-cat__media--portrait img, .tsp-cat__card:hover .tsp-cat__media--portrait img { transform: none; }