/* ===================================================================== ROUND 30, JOB 30.6 -- caption_flow_live THE CAPTION CARD RUNS UNDER THE PHOTOGRAPH. Reached only through `.ttc-v2.ttc-caption-flow`, which app/switches.py puts on the wrapper when `caption_flow_live` is set. Unset, not one declaration in this file matches anything, so the page is what it is today. MEASURED OFF THE DRAWING, not off the spec -- tools/measure_caption_30.py on audit/designs/30/03-photo-standalone-FINAL.jpg and 03-photo-in-step-box-FINAL.jpg, both 2200px wide, both a 1440 viewport at 1.528x: photo corner radius, all four 22.6px along the diagonal = 22.6 / (sqrt2 - 1) = 54.6px in the picture = 35.7px at 1440. --shot-radius is 36px, so the picture and the spec agree here and round 25's squaring did not come from either of them. pixel outside the bottom-left corner of the photograph standalone (248,248,248) -> the CARD in-step (255,255,255) -> the CARD the ground behind the element standalone (254,253,248) the page in-step (247,247,247) the step box the caption card standalone (250,248,251) ~ #f7f7f7 in-step (252,255,255) ~ #ffffff the card's own bottom corners 22.6px diagonal -- the SAME radius So at each bottom corner the drawing shows the CARD, never the page and never a hard edge. That is the whole item. HOW IT IS BUILT. The caption element is pulled up behind the photograph by a little over half the radius and given the padding back, and the photograph is lifted above it. The photograph keeps its radius on all four corners and is not clipped, so what shows through each bottom curve is the element behind it -- the card. Nothing is drawn into the corner; the corner simply stops hiding what was always there. ===================================================================== */ /* (1) THE PHOTOGRAPH KEEPS ITS RADIUS ON ALL FOUR CORNERS. This is the line round 25 changed to `var(--shot-r) var(--shot-r) 0 0`. */ .ttc-v2.ttc-caption-flow .pshot.has-cap .pshot-img > a:first-child, .ttc-v2.ttc-caption-flow .pshot.solo.has-cap .pshot-img > a:first-child { border-radius: var(--shot-r); position: relative; z-index: 1; } /* (1b) ROUND 39, JOB P1. THE STANDALONE PHOTOGRAPH STAYS ABSOLUTE, AND THE BAND ABOVE IT GOES. MEASURED on all six published recipes that carry a standalone CAPTIONED photograph, before this rule existed: an empty band of card colour stood between the top of the component and the top of the picture -- 1440 -> 472.69px 1244 -> 456.81px 1024 -> 373.35px 390 -> 145.38px -- with the Pinterest and share buttons floating in it instead of sitting on the photograph. An UNCAPTIONED standalone measured 0.00px, and so did all 100 in-step figures across those pages: the fault needed `.has-cap`, which is why the published Pan Pizza page never showed it (round 33.8 removed its caption) and why it appears on a reworked draft. WHY IT HAPPENED, and it is this file's doing. Round 6 gave the standalone photograph `position: absolute; inset: 0` (recipe-v3-stepshots.css) so that `.pshot.solo .pshot-img::before` -- a real generated element carrying `aspect-ratio: var(--ratio-1)` -- could set the block's height while the photograph lay over the top of it. Rule (1) above then set `position: relative` on the same anchor, to lift it over the caption card that (3) pulls up behind it. That selector is (0,7,1) against round 6's (0,5,1) and this file loads after stepshots.css, so relative won, the photograph stopped overlaying the ::before and fell into flow BELOW it, and the reserved height became a visible empty band. The band was the ::before's height to the pixel: 373.344px computed against 373.35px painted, at 1024. THE FIX IS TO GIVE ROUND 6 ITS POSITIONING BACK, for the standalone only. `absolute` is still a positioned value, so the `z-index: 1` from rule (1) keeps doing its job and the photograph still stacks above the caption card -- the bottom join is untouched, and the gate proves it at ten widths. The in-step variant is NOT in this selector and keeps `position: relative`: it has no ::before, its height comes from its own aspect-ratio, and it measured 0.00px of band before this change and after it. */ .ttc-v2.ttc-caption-flow .pshot.solo.has-cap .pshot-img > a:first-child { position: absolute; inset: 0; } /* (1c) AND THE TWO BUTTONS HAVE TO BE ABOVE IT. FOUND BY LOOKING AT THE PICTURE, after (1b) was already written and the gate was already green. Restoring the overlay put the photograph over the top-right corner where `.pbtn` sits -- and the photograph carries `z-index: 1` from rule (1) while the buttons carry `z-index: auto`, so the picture painted over both of them. MEASURED on the candidate before this rule: elementFromPoint at the Pinterest button's centre returned IMG, and 0 of the 1600 pixels inside the button were the white of its disc. The buttons were not clipped and not moved -- they were underneath. The gate did not catch it, and that is worth saying plainly: check G compared the button's RECTANGLE with the photograph's and passed, because the rectangle was exactly where it should be. A check that reads geometry cannot see a stacking fault. G now samples the painted disc instead. 2, not 1: it has to beat the photograph, and the caption card below is at 0, so nothing else moves. */ .ttc-v2.ttc-caption-flow .pshot.solo.has-cap .pshot-img > .pbtn { z-index: 2; } /* (2) NOTHING CLIPS THE PHOTOGRAPH. Round 25 put `overflow: hidden` on the standalone figure to give the square strip its bottom corners; with the card carrying its own radius there is nothing left to clip, and clipping would cut the corners back off. */ .ttc-v2.ttc-caption-flow .pshot.has-cap, .ttc-v2.ttc-caption-flow .pshot.solo.has-cap { overflow: visible; border-radius: var(--shot-r); } /* (3) THE CARD RUNS ON BENEATH. The negative margin is what puts it behind the photograph's bottom curve; the matching padding is what stops the caption text rising with it. 0.55 of the radius is the drawing's own overlap -- the card reaches just past the point where the arc leaves the straight edge, which is r(1 - 1/sqrt2) = 0.293r, with the rest as the gap the drawing shows between the photograph's edge and the first line. */ .ttc-v2.ttc-caption-flow .pshot.has-cap figcaption { border-radius: 0 0 var(--shot-r) var(--shot-r); margin-top: calc(var(--shot-r) * -0.55); padding: calc(var(--shot-r) * 0.55 + 8px) var(--caption-inset) 10px; font-size: var(--caption-size); line-height: var(--caption-line); font-weight: var(--caption-weight); color: var(--body); position: relative; z-index: 0; } /* (4) THE TWO COLOURS, AND THEY ARE THE ONLY DIFFERENCE BETWEEN THE KINDS. The figure carries the same colour as its caption so the strip behind the photograph's bottom corners is unbroken -- a card that changed colour at the photograph's edge would draw the very line this item removes. */ .ttc-v2.ttc-caption-flow .pshot.solo.has-cap, .ttc-v2.ttc-caption-flow .pshot.solo.has-cap figcaption { background: var(--card); /* #f7f7f7, outside a step box */ } .ttc-v2.ttc-caption-flow .pshot.has-cap:not(.solo), .ttc-v2.ttc-caption-flow .pshot.has-cap:not(.solo) figcaption { background: #fff; /* inside a grey step box */ } /* (5) THE RADIUS DISCONTINUITY, closed. The two hand-fitted viewport formulas gave --shot-r 27.86px at 1024 and 32.35px at 1023 -- a 4.49px jump between two adjacent pixel widths. The radius is a proportion of the PHOTOGRAPH, so it is measured from the photograph: `cqw` is one percent of the query container's own inline size, and 2.8916cqw is the same 36px at the design width with no formula to hand over. What is left is the photograph's own width step where the page's side padding goes away, which is 1.19px, and closing that means changing the page's padding. */ @supports (container-type: inline-size) { .ttc-v2.ttc-caption-flow .pshot { container-type: inline-size; } .ttc-v2.ttc-caption-flow .pshot .pshot-img > a:first-child, .ttc-v2.ttc-caption-flow .pshot.has-cap { --shot-r: 2.8916cqw; } } /* ===================================================================== ROUND 30, JOB 30.13 -- THE VISIBLE BREADCRUMB. Not behind a switch: it is part of the new recipe page rather than one of the four designs, and it only ever renders on templates/recipe_v3.html, which nothing but /preview-v3/ serves until `recipe_v3_live` is flipped. ===================================================================== */ .ttc-v2 .ttc-crumbs { font: 400 13px/1.4 Poppins, system-ui, sans-serif; color: #6b6a66; padding: 14px var(--pad-l, 56px) 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .ttc-v2 .ttc-crumbs a { color: #6b6a66; text-decoration: none; } .ttc-v2 .ttc-crumbs a:hover { text-decoration: underline; } .ttc-v2 .ttc-crumbs [aria-current="page"] { color: #2b2b2b; } @media (max-width: 1023px) { .ttc-v2 .ttc-crumbs { padding-left: 22px; padding-right: 22px; } } /* ===================================================================== ROUND 31, JOB 31.5 -- reviews_ground_live THE REVIEWS SECTION ON A LIGHT YELLOW GROUND. IT IS OURS, verified in one line: static/site/recipe-v3.css:490 .embed{background:var(--card);border-radius:var(--r-lg);...} `--card` is #f7f7f7, and the live /recipes/ page has no such wrapper around its `id="reviews"` at all -- so the grey rounded card is this page's own section wrapper, not something painted inside Tom's Desk iframe. THE YELLOW WAS NOT INVENTED. The page already carries one Tom approved -- `--cream: #fffeec`, the nutrition block's ground, sampled from the RENDERED page as rgb(255,254,236), hue 57 degrees. The reviews card takes a LIGHTER TINT OF THAT SAME HUE so the cream callout still stands out ON it: page ground #ffffff the approved cream #fffeec dE 6.16 from the page the reviews card TODAY #f7f7f7 dE 2.77 from the page THE REVIEWS CARD NOW #fffdf0 dE 6.69 from the page dE 2.56 from the cream callout Chosen because it clears both ways: more presence against the page than today's grey has (6.69 against 2.77), and far enough from #fffeec that a cream callout sitting on it reads as a separate object rather than vanishing into it. A candidate at #fffdec measured dE 0.66 from the cream and was rejected for exactly that reason. THE COMMENTS CARD DOES NOT CHANGE. It keeps `--card` #f7f7f7, so the two blocks are told apart by their ground. ===================================================================== */ .ttc-v2.ttc-reviews-ground .embed#reviews { background: #fffdf0; }