/* ============================================================ Aperture Verdict review template. Ported from docs/aperture-preview/preview-review.html (reference only — nothing in docs/ is served or enqueued). Loads ONLY on a review, after article.css and after the Scope Verdict block styles. Rings, meters and verdict badges are NOT redefined here: this sheet positions the components that module already ships. ============================================================ */ /* The theme caps the single-post body at 700px for reading width. The Verdict layout is a full-width two-column design, so it breaks out of that cap rather than being crushed into it. Measured on staging: without this the article column renders at 246px and the page overflows by 923px. */ .tsp-rv-wrap{width:auto;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .tsp-rv-wrap{--tsp-rv-gold:#D9B15C;--tsp-rv-gold-hi:#E8C97A;--tsp-rv-red:#C8102E; --tsp-rv-ink:#16181F;--tsp-rv-dim:#9aa0ac;--tsp-rv-paper:#fff;--tsp-rv-line:#e8e5de; font-family:var(--ts-ui)} /* ---------------- dark masthead ---------------- */ .tsp-rv__mast{position:relative;color:#fff;padding:18px 0 26px; background:radial-gradient(700px 260px at 50% -100px, rgba(217,177,92,.13), transparent 60%), linear-gradient(160deg,#12141b,#1a1d26 55%,#15181f)} .tsp-rv__mast-in{max-width:var(--tsp-shell,1200px);margin:0 auto;padding:0 20px} .tsp-rv__crumb{font-size:11.5px;color:var(--tsp-rv-dim);font-weight:600} /* Same 24px touch floor as the article and category breadcrumbs (v1.10.452). Measured smallest of the three at 390 — "Home" 33x14, "Reviews" 46x14 — because this crumb has no line-height cushion of its own. */ .tsp-rv__crumb a{color:var(--tsp-rv-dim);text-decoration:none;display:inline-flex;align-items:center;min-height:24px} .tsp-rv__crumb a:hover,.tsp-rv__crumb a:focus-visible{color:#fff} .tsp-rv__kicker{display:flex;align-items:center;gap:9px;margin-top:14px} .tsp-rv__kicker-tag{background:var(--tsp-rv-red);color:#fff;font-size:9.5px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:3px} .tsp-rv__kicker-te{font-size:11px;font-weight:700;color:var(--tsp-rv-gold); border:1px solid rgba(217,177,92,.45);border-radius:999px;padding:3px 11px} .tsp-rv-wrap .tsp-rv__title{font-family:var(--ts-display);font-size:34px;line-height:1.14; font-weight:700;color:#fff;margin:12px 0 0;overflow-wrap:break-word} .tsp-rv__stand{font-family:var(--ts-body);font-size:16px;line-height:1.6;color:#c9ccd6; margin:10px 0 0;max-width:70ch} /* ---------------- scorecard ---------------- */ .tsp-rv__card{display:grid;grid-template-columns:172px minmax(0,1fr) 230px;gap:22px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09); border-radius:12px;padding:18px;margin-top:20px;align-items:start} /* Unrated review: the score column simply is not there. */ .tsp-rv__card--noscore{grid-template-columns:172px minmax(0,1fr)} .tsp-rv__poster{position:relative;border-radius:8px;overflow:hidden; border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 44px -20px rgba(0,0,0,.85); min-height:230px} .tsp-rv__poster img{width:100%;height:100%;object-fit:cover;display:block} /* The credit sits UNDER the poster, never inside it: .tsp-rv__poster is overflow:hidden and sized by min-height, so a figcaption within it would be clipped and would squash the image. The figure becomes the grid column; the poster keeps ITS OWN sizing rules, which is the whole trick. A PLAIN BLOCK, DELIBERATELY. The first version made this a column flexbox with `flex:1` on the poster to preserve stretch. `flex:1` is `flex:1 1 0%`, and a flex-basis of 0 beats the `height:210px` that the <=640px rule sets — so on a phone the poster collapsed to nothing and the card showed a credit line under an invisible image. Found by looking at a 390px screenshot; overflow measured 0 and every test passed, because neither can see an image that is no longer there. Type matches .tsp-art__lead figcaption exactly — one credit line, one appearance, whichever template renders it. */ .tsp-rv__poster-fig{margin:0;min-width:0} .tsp-rv__poster-credit{font-family:var(--tsp-font-ui);font-size:12px;color:var(--tsp-muted); margin-top:8px;line-height:1.45} .tsp-rv__poster-ph{display:block;width:100%;height:100%;min-height:230px; background:linear-gradient(135deg,#2b2f3a,#181b22)} .tsp-rv__chips{display:flex;flex-wrap:wrap;gap:7px} .tsp-rv__chip{font-size:10.5px;font-weight:700;color:#d5d7de; border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3.5px 11px;white-space:nowrap} .tsp-rv__chip--gold{color:var(--tsp-rv-gold);border-color:rgba(217,177,92,.5)} .tsp-rv__crew{font-size:12px;color:var(--tsp-rv-dim);margin-top:12px;line-height:1.7} .tsp-rv__crew b{color:#aab0bc;font-weight:700} .tsp-rv-wrap .tsp-rv__quote{display:block;font-family:var(--ts-body);font-style:italic; font-size:15px;line-height:1.55;color:#e8e9ee;margin-top:14px;padding-left:14px; border-left:3px solid var(--tsp-rv-red)} /* What works / What doesn't — the block module supplies .tsp-sv-wd. */ .tsp-rv__facts .tsp-sv-wd{margin-top:14px} .tsp-rv__byline{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:16px; padding-top:14px;border-top:1px solid rgba(255,255,255,.1)} .tsp-rv__who{font-size:12px;line-height:1.35} .tsp-rv__who b{display:block;font-size:13px;color:#fff} .tsp-rv__who span{display:block;color:var(--tsp-rv-dim)} .tsp-rv__stamp{font-size:11.5px;color:var(--tsp-rv-dim);font-weight:600} .tsp-rv__share{display:flex;gap:8px;margin-left:auto} .tsp-rv__share-link{display:flex;align-items:center;justify-content:center;width:30px;height:30px; border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#d5d7de;font-size:12px; font-weight:800;text-decoration:none;transition:color .15s,border-color .15s} .tsp-rv__share-link:hover,.tsp-rv__share-link:focus-visible{color:var(--tsp-rv-gold);border-color:var(--tsp-rv-gold)} .tsp-rv__score{display:flex;flex-direction:column;align-items:center; border-left:1px solid rgba(255,255,255,.1);padding-left:18px} /* ---------------- article + rail ---------------- */ .tsp-rv__cols{max-width:var(--tsp-shell,1200px);margin:0 auto;padding:26px 20px 0; display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start} .tsp-rv__body{background:var(--tsp-rv-paper);border:1px solid var(--tsp-rv-line); border-radius:12px;padding:30px 36px 26px;min-width:0} .tsp-rv__body>p:first-of-type::first-letter{float:left;font-family:var(--ts-display); font-size:58px;line-height:.86;font-weight:700;margin:6px 10px 0 0;color:var(--tsp-rv-ink)} .tsp-rv__body h2{font-family:var(--ts-display);font-size:23px;line-height:1.25;font-weight:700; margin:30px 0 10px;padding-left:13px;border-left:4px solid var(--tsp-rv-red);scroll-margin-top:80px} .tsp-rv__body blockquote{font-family:var(--ts-body);font-style:italic;font-size:18px; line-height:1.55;border-left:4px solid var(--tsp-rv-gold);padding:6px 0 6px 18px;margin:22px 0} /* ---------------- bottom line ---------------- */ .tsp-rv__bottom{position:relative;color:#fff;border-radius:12px;padding:22px 26px;margin:28px 0 6px; display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center; background:linear-gradient(160deg,#12141b,#1a1d26 60%,#15181f)} .tsp-rv__bottom-score{display:flex;flex-direction:column;align-items:center;gap:8px} .tsp-rv-wrap .tsp-rv__bottom-h{font-family:var(--ts-display);font-size:19px;font-weight:700; color:#fff;margin:0 0 8px} .tsp-rv-wrap .tsp-rv__bl-quote{display:block;font-family:var(--ts-body);font-style:italic; font-size:15px;line-height:1.55;color:#e8e9ee} .tsp-rv__bottom .tsp-sv-wd{margin-top:12px} .tsp-rv__legend{font-size:10.5px;color:var(--tsp-rv-dim);margin:14px 0 0;line-height:1.7} .tsp-rv__legend b{color:#c9ccd6;text-transform:uppercase;letter-spacing:.1em;font-size:9.5px} /* ---------------- sticky rail ---------------- */ .tsp-rv__rail{display:flex;flex-direction:column;gap:18px;min-width:0} .tsp-rv__rail-card{background:linear-gradient(160deg,#12141b,#1a1d26 60%,#15181f); color:#fff;border-radius:12px;padding:16px 18px} .tsp-rv__rail-score{display:flex;align-items:center;gap:12px;margin-bottom:12px} .tsp-rv__rail-card .tsp-rv__chips{margin-top:4px} .tsp-rv__toc{margin-top:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px} .tsp-rv-wrap .tsp-rv__toc-h{font-size:9.5px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--tsp-rv-dim);margin:0 0 6px} .tsp-rv__toc ol{list-style:none;margin:0;padding:0;counter-reset:tsp-rv-toc} .tsp-rv__toc li{counter-increment:tsp-rv-toc;padding:3px 0} /* v1.10.641 — WCAG 2.2 AA target size (2.5.8) on phones. Each entry was a 12px link 15px tall with the NEXT entry's link 17px below it, and every entry points at a DIFFERENT section of the review, so a tap between two of them jumped to the wrong heading. Found at 320 and 390 on the rendered page, not in a stylesheet. Vertical padding on an INLINE element expands the hit area without entering the line box, so all five targets clear 24px and not one pixel of layout moves. Neighbours stay 7px apart at the padded edge, so no two overlap. */ .tsp-rv__toc a{color:#d5d7de;font-size:12px;line-height:1.4;text-decoration:none;padding-block:5px} .tsp-rv__toc a::before{content:counter(tsp-rv-toc) ". ";color:var(--tsp-rv-gold);font-weight:700} .tsp-rv__toc a:hover,.tsp-rv__toc a:focus-visible{color:#fff} /* ---------------- more reviews rail ---------------- */ .tsp-rv__more{max-width:var(--tsp-shell,1200px);margin:34px auto 0;padding:0 20px} .tsp-rv-wrap .tsp-rv__more-h{font-family:var(--ts-display);font-size:22px;font-weight:700; margin:0 0 14px;padding-left:13px;border-left:4px solid var(--tsp-rv-red)} .tsp-rv__more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .tsp-rv__mr-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--tsp-rv-line); border-radius:10px;overflow:hidden;background:var(--tsp-rv-paper);transition:border-color .18s,transform .18s} .tsp-rv__mr-card:hover,.tsp-rv__mr-card:focus-visible{border-color:var(--tsp-rv-gold);transform:translateY(-2px)} .tsp-rv__mr-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden} .tsp-rv__mr-media img{width:100%;height:100%;object-fit:cover;display:block} .tsp-rv__mr-score{position:absolute;left:10px;bottom:10px;background:linear-gradient(120deg,var(--tsp-rv-gold-hi),var(--tsp-rv-gold)); color:#16181F;font-size:12px;font-weight:800;padding:3px 9px;border-radius:4px} .tsp-rv__mr-body{display:block;padding:12px 13px 14px} .tsp-rv__mr-title{display:block;font-family:var(--ts-display);font-size:14.5px;font-weight:700; line-height:1.3;margin-bottom:7px;overflow-wrap:break-word} .tsp-rv-wrap a:focus-visible{outline:2px solid var(--tsp-rv-gold);outline-offset:2px} /* ---------------- responsive ---------------- */ /* Sticky only where there is room for a column beside the article. */ @media (min-width:1020px){ .tsp-rv__rail{position:sticky;top:60px} } @media (max-width:1019px){ .tsp-rv__cols{grid-template-columns:minmax(0,1fr)} .tsp-rv__more-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:860px){ /* The score panel wraps below the facts rather than surviving as a squeezed third column. */ .tsp-rv__card,.tsp-rv__card--noscore{grid-template-columns:132px minmax(0,1fr)} .tsp-rv__poster,.tsp-rv__poster-ph{min-height:180px} .tsp-rv__score{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.1); padding-left:0;padding-top:14px;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap} .tsp-rv-wrap .tsp-rv__title{font-size:27px} .tsp-rv__body{padding:22px 20px 20px} } /* v1.10.546 — the verdict stamp must fit the poster it is stamped on. The rule above narrows the poster column to 132px, and the stamp is capped at `calc(100% - 16px)` of it: 116px. At the shared 12px/.16em/13px the longest verdict needs 165.8px, so the stamp ellipsised itself — "OUTSTANDING" rendered as "OUTSTA…". This is invisible to an overflow measurement, because the text is clipped INSIDE its own box by design: page overflow stayed 0px and the offender list stayed empty at 768. Only the screenshot showed it. Five of the seven verdicts overflowed 116px, not just the one observed: One-Time Watch 165.8, Below Average 158.7, Outstanding 140.7, Blockbuster 140.5, Must Watch 133.4. Only Good and Skip It fitted. So this is sized against ONE-TIME WATCH, the longest label the scale can produce, and measured in the page's own Inter: 112.2px, leaving ~4px of headroom. Bounded on both sides. Below 641px the card collapses to a single column and the poster is full width, where the stamp has room for its full size and should keep it. The block-context stamp is deliberately untouched: it renders inside .tsp-eb-wrap, which is a container query's business, and it was not defective. */ @media (min-width:641px) and (max-width:860px){ .tsp-rv__poster .tsp-sv-verdict--stamp{ font-size:9.5px; letter-spacing:.06em; padding:5px 7px; } } @media (max-width:640px){ .tsp-rv__card,.tsp-rv__card--noscore{grid-template-columns:minmax(0,1fr)} .tsp-rv__poster,.tsp-rv__poster-ph{min-height:0;height:210px} .tsp-rv-wrap .tsp-rv__title{font-size:23px} .tsp-rv__bottom{grid-template-columns:minmax(0,1fr);padding:18px} .tsp-rv__more-grid{grid-template-columns:minmax(0,1fr)} .tsp-rv__share{margin-left:0;flex-basis:100%} .tsp-rv__body>p:first-of-type::first-letter{font-size:46px} } /* The block module animates the dial arc; honour reduced motion here too. */ @media (prefers-reduced-motion:reduce){ .tsp-rv__mr-card{transition:none} .tsp-rv__mr-card:hover,.tsp-rv__mr-card:focus-visible{transform:none} } /* v1.10.115 — review share controls reach the touch floor on phones/tablets. Measured at 390px: .tsp-rv__share-link renders 30x30, well under 44. Scoped to max-width:782px so the desktop pointer control is unchanged, matching how the ticker arrows, category chips and article share buttons were handled. */ @media (max-width:782px){ .tsp-rv__share-link{width:44px;height:44px} .tsp-rv__share-link svg{width:18px;height:18px} } /* ========================================================================== v1.10.395 — "What works" / "What doesn't" on the review page ========================================================================== */ /* These labels had NO review-scoped styling at all. The two rules that style them live in the block module and are written `.tsp-sv .tsp-sv-wd …`, which is the HOMEPAGE Scope Verdict block — the review page is `.tsp-rv-wrap`, so neither ever matched here and the labels have always inherited whatever generic heading styling the page supplied: the light-theme ink colour, rgb(22,24,31), sitting on a dark panel. That is the near-invisible text the device report described, and it predates the heading-level work. Raising them from h4 to h2/h3 in 1.10.389 made it plainly visible rather than merely wrong, because the inherited size went to 35px. Both instances sit on dark ground — the masthead, and `.tsp-rv__bottom` with its #12141b–#1a1d26 gradient — so one gold rule serves both. Gold on that panel measures about 8.4:1. The values match the block module's dark variant so the two surfaces read as the same component. Targeted by CLASS, not by tag, so the appearance cannot come apart from the heading level again. */ .tsp-rv-wrap .tsp-sv-wd .tsp-sv-wd__h { font-family: var(--ts-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tsp-rv-gold, #D9B15C); margin: 0 0 4px; line-height: 1.3; } /* v1.10.513 — What Works / What Doesn't stacks on a phone. Measured on the deployed article at 390: the two columns are 146px each, and a 34-character point ("Chemistry between Hero and Heroine") wraps to two lines inside one. Two columns of 146px is not a comparison, it is two narrow ragged blocks side by side — the reader loses the one thing this component exists to give them, which is a fast positive-against-negative scan. Stacked, each point gets the full 312px measure and lands on one line, and the two headings still separate the lists. The desktop and tablet two-column form is untouched, and so is the homepage band, which hides this component below 782 anyway — hence scoping to the article's own wrappers rather than the shared class. */ @media (max-width: 560px) { .tsp-rv__facts .tsp-sv-wd, .tsp-rv__bottom .tsp-sv-wd { grid-template-columns: minmax(0, 1fr); gap: 12px 0; } } /* v1.10.515 — the article poster's image fills its frame. Measured on the deployed article at 1920: the frame is 172x230 and the `` inside it 170x96. The image occupied 42% of its own poster and the remaining 134px was the tinted placeholder with the verdict stamp floating in it, which reads as a broken image rather than as a design. THE RULE WAS ALREADY THERE. Line 57 has declared `.tsp-rv__poster img{width:100%;height:100%;object-fit:cover}` all along, and it has never worked. Adding it again at higher specificity changed nothing; so did adding it with `!important`. Both were tried on staging before this was written, and both measured 96px. `height: 100%` needs a DEFINITE height on the parent to resolve against, and `.tsp-rv__poster` sizes itself with `min-height` (line 54, and again at 172 and 181 for the narrower tiers). A `min-height` is not a definite height, so the percentage resolves to `auto`, the image falls back to its intrinsic 1200x675, and `object-fit: cover` has nothing to do because the box is simply taller than the image rather than a different shape. Taking the image out of flow removes the dependency entirely: `inset: 0` against the already-`position: relative` frame fills it whatever set the frame's height. Measured after: 170x228 in a 172x230 box. The stamp is positioned over the poster and now sits over the photograph, which is where it sits in the homepage band. */ .tsp-rv__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* --------------------------------------------------------------------------- THE FRAME FOLLOWS THE SOURCE — the review page's half of the same treatment. The same assumption, and the same cost. The review card's poster is 172x230, ratio 0.748, and it holds whatever the newsroom attached. Measured on staging: a 16:9 image showed 42% of itself, cropped left and right, and the browser was being handed a 240x135 file because `sizes` still promised a 240px box. The homepage and this page now ask ONE function what shape the picture is — Scope_Verdict_View::poster_shape() — so the two surfaces cannot drift into different ideas of what a review picture is. This is that answer applied to the article's geometry rather than a second, unrelated fix. 172x230 0.75 42% of a 16:9 source 300x230 1.30 73% The card keeps its height: only the column widens, and the middle column has the room. A portrait source is untouched, for the same reason as on the homepage — a poster already fits the frame the section is built around. Wide tier only. Below 860px the card is already two columns and below 640 it is one, both of which give the picture the full measure. */ .tsp-rv__card--landscape{grid-template-columns:300px minmax(0,1fr) 230px} .tsp-rv__card--landscape.tsp-rv__card--noscore{grid-template-columns:300px minmax(0,1fr)} .tsp-rv__card--square{grid-template-columns:250px minmax(0,1fr) 230px} .tsp-rv__card--square.tsp-rv__card--noscore{grid-template-columns:250px minmax(0,1fr)} /* Faces sit above the middle of a photograph, so a centred crop discards the half worth keeping. Posters are left centred — they are composed for it. */ .tsp-rv__card--landscape .tsp-rv__poster img, .tsp-rv__card--square .tsp-rv__poster img{object-position:center 42%} /* The narrow tiers already hand the picture the full width; the shape modifier must not reintroduce a wide column there. */ @media (max-width:860px){ .tsp-rv__card--landscape,.tsp-rv__card--landscape.tsp-rv__card--noscore, .tsp-rv__card--square,.tsp-rv__card--square.tsp-rv__card--noscore{ grid-template-columns:132px minmax(0,1fr)} } @media (max-width:640px){ .tsp-rv__card--landscape,.tsp-rv__card--landscape.tsp-rv__card--noscore, .tsp-rv__card--square,.tsp-rv__card--square.tsp-rv__card--noscore{ grid-template-columns:minmax(0,1fr)} } /* v1.10.621 — the review body gets the article's measured justification policy. * * The review body never set `text-align` at all: it inherited justification from * the theme and therefore missed every protection article.css had already * measured and documented. Rendered evidence at 1.10.620, English review: * * 320 360 hyphens * article 0 just. 4 just. auto <- correct * review 5 just. 5 just. manual <- inherited, unprotected * * Two faults, and 320 is the one that matters. article.css records that * justification is switched OFF below 340 because "rivers run down the column, * and in English nearly a third of the lines end in a broken word" — the review * justified there anyway. And with `hyphens` left at its initial `manual`, the * English review was justified WITHOUT a hyphenation dictionary at ~30-38 * characters a line, which the same note calls "all rivers". * * The values below are not new decisions. They are article.css's, applied to the * template that was missed: * * - ragged right below 340; * - `inter-word` only, NEVER `distribute` or `inter-character` — those add * space between letters, which on Telugu prises apart the glyph clusters * that form a syllable; * - `text-wrap: pretty` for the last line, which justification cannot help; * - `hyphens: auto` for English only, because Telugu has no dictionary to fall * back on and word space is its only safe lever. * * `> p` matches the body's own paragraphs and leaves the pull quote, the caption * and anything an editor has explicitly aligned alone. */ .tsp-rv__body > p:not([class*="has-text-align"]) { text-align: left; } @media (min-width: 340px) { .tsp-rv__body > p:not([class*="has-text-align"]) { text-align: justify; text-justify: inter-word; text-wrap: pretty; } :lang(en) .tsp-rv__body > p:not([class*="has-text-align"]) { hyphens: auto; -webkit-hyphens: auto; } } /* =========================================================================== v1.10.635 — the Telugu review gets the same contract as the Telugu article. FOUND WHILE CERTIFYING THE ARTICLE FIX, by sweeping templates rather than the one page the brief was about. A review does not use `.tsp-art__body`, so NEITHER v1.10.631's ragged-Telugu rule NOR v1.10.634's mobile sizing reached it. Telugu reviews have been justified on phones the whole time. The block above says, in its own words, that it applied "article.css's" values "to the template that was missed". It did — but it was written against the contract as it stood BEFORE v1.10.631, when Telugu was still justified. The copy was faithful to a decision that had already been reversed next door. MEASURED ON A 906-WORD TELUGU REVIEW, word gaps against a 3.7px normal space: 320 left median 4.5 p95 4.5 max 4.5 1.2x 390 justify median 11.2 p95 26.4 max 47.8 12.9x 428 justify median 11.5 p95 22.5 max 36.4 9.8x 600 justify median 8.4 p95 17.0 max 22.5 6.1x 768 justify median 6.7 p95 14.4 max 22.2 6.0x A median of three times a normal space and a worst case of nearly thirteen, at the two widths most phones actually are. That is worse than the article template ever was, and it is on the longest Telugu pieces the site publishes. ENGLISH KEEPS JUSTIFICATION HERE, exactly as it does in the article template and for the same reason: it has a hyphenation dictionary, so the shortfall is taken up by breaking words rather than by stretching spaces. Telugu has no dictionary; word space is its only lever, and at four to five words a line there are too few gaps to divide a shortfall between. THE SIZING MATCHES THE ARTICLE TEMPLATE for the same reasons recorded there — a paragraph gap tighter than a line-height, because in a ragged setting the short last line already signals the break. The 16px body is left alone: the review body sits inside a bordered box with 20px of padding, so its measure is already narrower than the article column, and shrinking it further would crowd the matras. =========================================================================== */ /* v1.10.647 — THE REVIEW BODY STAYS RAGGED ON THE PHONE. Measured, not assumed. * * v1.10.646 justified Telugu here to match article.css, on the correct * principle that two templates rendering the same language must not disagree. * The readability gate the owner then asked for measured what that actually * produced, per paragraph, at ten widths — and this template fails it badly * while the article passes: * * widest word gap on the page * width article review * 340 23.9 51.5 * 359 25.5 59.0 * 360 25.9 59.5 * 375 29.2 67.0 * 390 15.8 74.5 * * At 390 that is a 74.5px hole — roughly eighteen spaces — in a three-word line * reading "ప్రధానంగా స్క్రీన్‌ప్లే మరింత". Screenshotted at 3x and looked at: it is * the "visibly unacceptable blank river" case, not a borderline one. * * WHY THIS TEMPLATE AND NOT THE OTHER, since the viewport is identical: * * 1. The review body sits inside a bordered box with 20px of padding, so its * measure is materially narrower than the article column at the same width. * 2. Review copy is short paragraphs — 33 of them on this page against the * article's 3. A two-line paragraph gives justification one line to * absorb the whole shortfall, and Telugu has no hyphenation dictionary to * take any of it. * * Fewer words per line and fewer lines per paragraph is exactly the condition * under which inter-word justification degenerates, and it is a property of * this template rather than of the reader's phone. * * SO THE TWO TEMPLATES DO NOW DIFFER BELOW 601px, DELIBERATELY. That is a * narrower claim than the one v1.10.646 made: they agree about the SETTING — * both justify wherever the measure supports it, and both are justified from * 601px up by the shared rule, where the review measured 21.9px worst. They * differ only where measurement says one of them cannot carry it. Readability * has priority over a straight right edge; that is the owner's instruction and * it points this way. */ @media (max-width: 600px) { :lang(te) .tsp-rv__body > p:not([class*="has-text-align"]) { text-align: start; } :lang(te) .tsp-rv__body > p { line-height: 1.75; margin-bottom: 20px; } :lang(te) .tsp-rv__body h2 { margin-top: 36px; margin-bottom: 10px; } } /* --------------------------------------------------------------------------- v1.10.684 — THE REVIEW'S OWN PICTURES (the owner's approved review page, 15 Oct 2026). On a phone the card's single column cut whatever it held to a 210px strip: a tall poster lost most of itself, which is what the owner saw. A review that carries its own pictures (--dual, set by Review_Parts::masthead()) now shows the landscape still WHOLE in its own 16:9 frame there, and the portrait poster whole in a 2:3 frame on a wider screen. A review without them is untouched. The 2:3 rule is bounded to 641px and up: unbounded, its three classes would outrank the phone's two and put a portrait frame round a landscape still. The card is align-items:start, so nothing stretches the frame and aspect-ratio decides its height against the column's width. */ @media (min-width:641px){ .tsp-rv__card--dual.tsp-rv__card--portrait .tsp-rv__poster{aspect-ratio:2/3} } /* v1.10.685 — AND A COLUMN THE STAMP FITS. Seen on staging at 1440 the moment a real review carried its poster: in the 172px portrait column the stamp is capped at 156px and ONE-TIME WATCH needs 165.8px, so it read "ONE-TIME WA…". It never showed before because no review page had used a portrait frame at this tier. 220px leaves the stamp 204px and gives the poster the size the approved design has. Below 861px the narrower tiers keep their own column and the smaller stamp (v1.10.546). */ @media (min-width:861px){ .tsp-rv__card--dual.tsp-rv__card--portrait{grid-template-columns:220px minmax(0,1fr) 230px} .tsp-rv__card--dual.tsp-rv__card--portrait.tsp-rv__card--noscore{grid-template-columns:220px minmax(0,1fr)} } @media (max-width:640px){ .tsp-rv__card--dual .tsp-rv__poster{height:auto;min-height:0;aspect-ratio:16/9} } /* v1.10.710 — THE SAME FRAME FOR A REVIEW WITH ONLY A POSTER. The two rules above were written for --dual reviews, so a review whose one picture is a portrait poster (Crazy Kalyanam, 20 Oct, official poster 480x639) kept the 172px column on desktop — stamp clipped to "BELOW AVERA…" — and on a phone the 210px strip cut the poster in half; the owner saw it on an iPhone. Desktop and tablet take the 2:3 frame and 220px column for every portrait poster. On a phone a poster-only review shows the poster whole in a 2:3 frame, capped at 280px wide so it does not run a full screen tall; a --dual review keeps its landscape still there (rule above). Measured on the live page with this CSS injected: 1600 220x330, 768 132x198, 390 and 360 280x420, stamp unclipped, no overflow. */ @media (min-width:641px){ .tsp-rv__card--portrait .tsp-rv__poster{aspect-ratio:2/3} } @media (min-width:861px){ .tsp-rv__card--portrait{grid-template-columns:220px minmax(0,1fr) 230px} .tsp-rv__card--portrait.tsp-rv__card--noscore{grid-template-columns:220px minmax(0,1fr)} } @media (max-width:640px){ .tsp-rv__card--portrait:not(.tsp-rv__card--dual) .tsp-rv__poster{height:auto;aspect-ratio:2/3;width:min(100%,280px);margin-inline:auto} } /* Where the two widths show pictures from different sources, each prints its own credit and only the one on screen is shown. */ .tsp-rv__credit--narrow{display:none} @media (max-width:640px){ .tsp-rv__credit--narrow{display:inline} .tsp-rv__credit--wide{display:none} } /* --------------------------------------------------------------------------- v1.10.686 — THE ANSWER UNDER THE PILL: the verdict in Telugu and "Theatre or OTT?", as in the owner's approved review page. In the score panel only, so it appears only on a scored review, and centred with the dial and pill above it. Below 861px the panel becomes a wrapping row; the answer stays one column inside it so the question and its answer are read together. */ .tsp-rv__score .tsp-sv-answer{display:flex;flex-direction:column;align-items:center; gap:6px;margin:10px 0 4px;text-align:center} .tsp-sv-answer__te{font-family:var(--tsp-font-ui);font-size:15px;font-weight:700; line-height:1.5;color:var(--tsp-rv-gold)} .tsp-sv-answer__see{font-family:var(--tsp-font-ui);font-size:13px;line-height:1.45;color:#c9ccd4} .tsp-sv-answer__see strong{display:block;color:#fff;font-size:14px;font-weight:700} @media (max-width:860px){ .tsp-rv__score .tsp-sv-answer{margin:0;align-items:flex-start;text-align:left} } /* --------------------------------------------------------------------------- v1.10.687 — WATCH IT IF / SKIP IT IF, under the critic's line (the owner's approved review page). Green for who will enjoy it, red for who should skip it, in the same tints the design used; the word is the label, so the cards read correctly with colour ignored. Two side by side while there is room, stacked on a phone. */ .tsp-rv__auds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 6px} .tsp-rv__aud{display:flex;flex-direction:column;gap:3px;border-radius:10px;padding:10px 12px;min-width:0} .tsp-rv__aud--watch{background:rgba(127,200,169,.08);border:1px solid rgba(127,200,169,.3)} .tsp-rv__aud--skip{background:rgba(232,144,126,.08);border:1px solid rgba(232,144,126,.3)} .tsp-rv__aud-label{font-family:var(--tsp-font-ui);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .tsp-rv__aud--watch .tsp-rv__aud-label{color:#7fc8a9} .tsp-rv__aud--skip .tsp-rv__aud-label{color:#e8907e} .tsp-rv__aud-line{font-family:var(--tsp-font-ui);font-size:14px;line-height:1.55;color:#fff;overflow-wrap:anywhere} @media (max-width:640px){ .tsp-rv__auds{grid-template-columns:minmax(0,1fr)} } /* --------------------------------------------------------------------------- v1.10.688 — THE BOTTOM LINE IS THE VERDICT ALONE, and the trailer closes the review. The answer sits under the heading the way it sits under the pill at the top; the bottom line is dark, so its colours are the masthead's. */ .tsp-rv__bottom-body .tsp-sv-answer{display:flex;flex-direction:column;gap:4px;margin:2px 0 12px} .tsp-rv__trailer{margin:30px 0 0} .tsp-rv-wrap .tsp-rv__trailer-h{font-family:var(--ts-display);font-size:19px;font-weight:700;margin:0 0 12px} .tsp-rv__trailer .wp-block-embed{margin:0} /* v1.10.689 — the pictures' credit, small, at the very end of the review. */ .tsp-rv__credits{font-family:var(--tsp-font-ui);font-size:11.5px;line-height:1.5;color:var(--tsp-muted);margin:24px 0 0} .tsp-rv__credits a{color:inherit;text-decoration:underline} /* --------------------------------------------------------------------------- v1.10.690 — THE PHONE'S VERDICT BAR (review page step 8, the owner's approved design). The article's last child, sticky at the foot of the screen, so it rides along exactly while the review is on screen and settles where the article ends — never over the footer, and no scroll script. It sits 12px off the foot of the screen, or 8px above the fixed tab bar where the page has one (61px plus the home indicator, mobile-nav.css; the bar is not on every page, and a 69px gap with no bar under it showed text scrolling beneath). Hidden from 992px with that bar: the rail carries the score there. */ .tsp-rv__vbar{display:none} @media (max-width:991px){ body:has(.tsp-tabbar) .tsp-rv__vbar{bottom:calc(69px + env(safe-area-inset-bottom,0px))} .tsp-rv__vbar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5; display:flex;align-items:center;gap:12px;margin:24px 0 0;padding:8px 8px 8px 14px; background:#0e1016;border:1px solid rgba(217,177,92,.4);border-radius:12px; box-shadow:0 8px 24px rgba(14,16,22,.28)} .tsp-rv__vbar-score{flex:none;display:flex;align-items:baseline;gap:2px;color:#fff;font-family:var(--tsp-font-ui)} .tsp-rv__vbar-score b{font-size:22px;font-weight:700;line-height:1} .tsp-rv__vbar-score span{font-size:12px;color:var(--tsp-rv-dim)} .tsp-rv__vbar-verdict{flex:1 1 auto;min-width:0;font-family:var(--tsp-font-ui);font-size:14px;font-weight:700; line-height:1.5;color:var(--tsp-rv-gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tsp-rv__vbar-verdict[lang="te"]{font-family:'Noto Sans Telugu',var(--tsp-font-ui),sans-serif} .tsp-rv-wrap .tsp-rv__vbar-share{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px; border-radius:8px;background:#107a40;color:#fff;font-family:var(--tsp-font-ui);font-size:14px;font-weight:700; text-decoration:none} .tsp-rv-wrap .tsp-rv__vbar-share:hover{background:#0d6634;color:#fff} } /* At 320 "One-Time Watch" was cut to an ellipsis: tighter spacing gives it back. */ @media (max-width:360px){ .tsp-rv__vbar{gap:8px;padding-left:12px} .tsp-rv-wrap .tsp-rv__vbar-share{padding:0 12px} } /* --------------------------------------------------------------------------- v1.10.691 — WHERE TO WATCH, and the WhatsApp share (review page step 5, the owner's approved design). One strip under the verdict on the dark masthead: the fact on the left, the button on the right, wrapping to two rows on a phone with the button full width so it is easy to reach with a thumb. */ .tsp-rv__watch{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:16px 0 6px; padding-top:12px;border-top:1px solid rgba(255,255,255,.08)} .tsp-rv__watch-where{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px} .tsp-rv__watch-label{font-family:var(--tsp-font-ui);font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#aeb3be} .tsp-rv__watch-line{font-family:var(--tsp-font-ui);font-size:14px;font-weight:600;line-height:1.5;color:#fff; overflow-wrap:anywhere} .tsp-rv-wrap .tsp-rv__watch-wa{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 16px;border-radius:8px;background:#107a40;color:#fff;font-family:var(--tsp-font-ui); font-size:14px;font-weight:700;text-decoration:none} .tsp-rv-wrap .tsp-rv__watch-wa:hover{background:#0d6634;color:#fff} [lang="te"] .tsp-rv__watch-label{letter-spacing:0;text-transform:none} @media (max-width:640px){ .tsp-rv-wrap .tsp-rv__watch-wa{flex:1 1 100%} } /* --------------------------------------------------------------------------- v1.10.692 — THE VERDICT'S COLOUR (review page step 9). The bands take the approved design's own colours: green for the four that say "see it" (the design's "What works" and "Watch it if"), gold for One-Time Watch, red for the two that say "don't" (its "What doesn't" and "Skip it if"). On the review page only — the pill, the poster's stamp, the Telugu verdict and the phone's bar — so the homepage scorecards are untouched. The word stays the verdict; colour only agrees with it, and the dial stays the house gold. */ .tsp-rv-wrap{--tsp-rv-good:#7fc8a9;--tsp-rv-good-hi:#a9dfc7;--tsp-rv-bad:#e8907e;--tsp-rv-bad-hi:#f2b3a5} .tsp-rv-wrap .tsp-sv-verdict--pill.tsp-sv-verdict--must-watch, .tsp-rv-wrap .tsp-sv-verdict--pill.tsp-sv-verdict--outstanding, .tsp-rv-wrap .tsp-sv-verdict--pill.tsp-sv-verdict--blockbuster, .tsp-rv-wrap .tsp-sv-verdict--pill.tsp-sv-verdict--good{ background:linear-gradient(120deg,var(--tsp-rv-good-hi),var(--tsp-rv-good));color:#0f1f18} .tsp-rv-wrap .tsp-sv-verdict--pill.tsp-sv-verdict--below-average, .tsp-rv-wrap .tsp-sv-verdict--pill.tsp-sv-verdict--skip-it{ background:linear-gradient(120deg,var(--tsp-rv-bad-hi),var(--tsp-rv-bad));color:#2a120c} .tsp-rv-wrap .tsp-sv-verdict--stamp.tsp-sv-verdict--must-watch, .tsp-rv-wrap .tsp-sv-verdict--stamp.tsp-sv-verdict--outstanding, .tsp-rv-wrap .tsp-sv-verdict--stamp.tsp-sv-verdict--blockbuster, .tsp-rv-wrap .tsp-sv-verdict--stamp.tsp-sv-verdict--good{border-color:var(--tsp-rv-good);color:var(--tsp-rv-good)} .tsp-rv-wrap .tsp-sv-verdict--stamp.tsp-sv-verdict--below-average, .tsp-rv-wrap .tsp-sv-verdict--stamp.tsp-sv-verdict--skip-it{border-color:var(--tsp-rv-bad);color:var(--tsp-rv-bad)} .tsp-rv-wrap .tsp-sv-answer__te--must-watch, .tsp-rv-wrap .tsp-sv-answer__te--outstanding, .tsp-rv-wrap .tsp-sv-answer__te--blockbuster, .tsp-rv-wrap .tsp-sv-answer__te--good, .tsp-rv-wrap .tsp-rv__vbar-verdict--must-watch, .tsp-rv-wrap .tsp-rv__vbar-verdict--outstanding, .tsp-rv-wrap .tsp-rv__vbar-verdict--blockbuster, .tsp-rv-wrap .tsp-rv__vbar-verdict--good{color:var(--tsp-rv-good)} .tsp-rv-wrap .tsp-sv-answer__te--below-average, .tsp-rv-wrap .tsp-sv-answer__te--skip-it, .tsp-rv-wrap .tsp-rv__vbar-verdict--below-average, .tsp-rv-wrap .tsp-rv__vbar-verdict--skip-it{color:var(--tsp-rv-bad)}