/* ============================================================ PLACEMENT — figure geometry. Loads LAST, so it is authoritative. ============================================================ REWRITTEN 1 Sep 2026, after the client's third and most specific rejection of figure placement: "No proper structure of images ... Lame placement of images, uneven sizes ... No proper allignment. Also some images as you can see are bleeding to the left and not alligning with the text and content. While some images are just thin strips." The previous version of this file defended each of those exact behaviours in a comment. `bleedleft` was described as "a hanging figure, not a misaligned one". `offsetpair` set 1.38fr / 1fr and called the inequality "deliberate ... neither reads as a failed attempt at equal". Both comments pre-argued against the objection the client went on to raise twice. A rationale written to survive an objection is not a reason; it is a tell. Both are retired. R5 is not negotiable: ONE CONTAINER, ONE LEFT EDGE. Every figure now begins on the same vertical line as the body text above it. Nothing hangs left. Ever. ------------------------------------------------------------ WHY THE SIZES WERE UNEVEN — root cause, now fixed ------------------------------------------------------------ .cz-prose carries max-width 74ch (reading.css:173). That caps the CONTAINER, so a figure inside it is capped too, and a figure bleeding right computes its bleed from the 74ch measure rather than from the grid track it actually sits in. Once the track outgrows 74ch — from about 1700px up — every right-bleeding figure finishes short of the container edge by exactly (track - measure). reading.css:36-60 documents this and measures the shortfall at 18.3px / 85.1px / 89.2px across 1700 / 1792 / 1905, then closes "Reported, not fixed", because the fix crossed a file boundary. This file loads last, so that boundary is not a problem here. The fix is to put the measure where it belongs. A reading measure is a property of a LINE OF TEXT, not of a column. Capping the container was always the wrong place: it constrained the pictures in order to constrain the prose. Below, .cz-prose is released to the full track and the 74ch cap moves onto the text children. Prose reads at exactly the measure it did before — R19 untouched — while figures finally see the track, so a full-width figure lands on the container edge at every viewport, and two full-width figures on one page are the same width as each other. That was "uneven sizes". ------------------------------------------------------------ THE SYSTEM ------------------------------------------------------------ TWO widths, only two, sharing one left edge. measure = 74ch, identical to the text. The figure sits in the column of prose and belongs to the paragraph. full = the track plus the empty margin column. Extends RIGHT only. The left edge does not move. Variety comes from HEIGHT and GROUPING, never from the left edge and never from unequal masses: variant width frames height character quiet measure 1 420px a held beat inset measure 1 380px framed, recessed stack measure 2 300px two equal, in column pair full 2 360px two equal, across triptych full 3 300px three equal, a sequence strip full 1 460px anamorphic, a chapter mark plate full 1 520px the largest, a masthead bleedleft full 1 480px retired bleed, right-extending offsetpair full 2 360px retired offset, now equal Groups are ALWAYS equal columns at equal heights. The client said "Both looks uneven" once about the homepage verticals and again about these pairs. Unequal masses in a row are not a composition; they are an unfinished one. Heights are set DIRECTLY. Never aspect-ratio with max-height — together they RESIZE a box rather than cap it, and that pairing is this project's documented origin for "empty spaces" (R3). Height goes on .cz-fig__media, the WRAPPER, because the wrapper clips the base transform scale(1.02). Put on the image, the 2% escapes the frame — previously measured at 465.1px inside a 456px column. ============================================================ */ /* ------------------------------------------------------------ 0. The measure moves from the container to the text ------------------------------------------------------------ Everything below depends on this block. Declared here rather than edited in reading.css so the change is reversible in one place. The child list is explicit rather than a universal selector: a universal cap would also hit .cz-fig, .cz-stat, .cz-tablewrap and every device, which is exactly what we are freeing. */ .cz-reading__body .cz-prose { max-width: none; } .cz-reading__body .cz-prose > p, .cz-reading__body .cz-prose > h2, .cz-reading__body .cz-prose > h3, .cz-reading__body .cz-prose > h4, .cz-reading__body .cz-prose > h5, .cz-reading__body .cz-prose > ul, .cz-reading__body .cz-prose > ol, .cz-reading__body .cz-prose > dl, .cz-reading__body .cz-prose > blockquote, .cz-reading__body .cz-prose > .cz-callout, .cz-reading__body .cz-prose > .cz-faq, .cz-reading__body .cz-prose > .cz-chapter { max-width: 74ch; } /* The two widths, named once. --cz-fig-full is redefined per breakpoint below; nothing else in this file hard-codes it. */ .cz-reading__body { --cz-fig-measure: 74ch; --cz-fig-full: calc(100% + var(--cz-margin-col) + var(--cz-read-gap)); } /* ------------------------------------------------------------ 1. One left edge — the rule the client actually asked for ------------------------------------------------------------ Stated once, positively, for every figure. Any variant that wants to be wide grows RIGHT. margin-left is pinned to 0 so that no variant, and no future edit, can reintroduce a hang. */ .cz-reading__body .cz-fig { margin-left: 0; margin-right: 0; float: none; max-width: var(--cz-fig-measure); } .cz-reading__body .cz-fig--pair, .cz-reading__body .cz-fig--offsetpair, .cz-reading__body .cz-fig--triptych, .cz-reading__body .cz-fig--strip, .cz-reading__body .cz-fig--plate, .cz-reading__body .cz-fig--bleedleft { max-width: none; width: var(--cz-fig-full); } /* A photograph FILLS its frame. contain in a fixed-height box is what leaves a small subject stranded in a large empty rectangle — the client's screenshot of a banknote adrift in a white frame. cover, with the project's center-34% anchor (figures.css:59), is the correct treatment for every photograph on the site. THE TWO SHAPES NEED DIFFERENT RULES. See section 3: the grid child of .cz-fig__pair is a wrapper for offsetpair/triptych but a bare for pair. */ /* Wrapped: the wrapper carries the height, the image fills it. */ .cz-reading__body .cz-fig__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* Bare: the image IS the grid child, so it carries its own height from the group rule in section 3 and must NOT be given block-size: 100% here. A percentage height inside an AUTO-SIZED GRID ROW is circular — the row is sized from the content, and the content wants a percentage of the row. The browser resolves the cycle by falling back to the intrinsic aspect ratio, which silently defeats the equal-height rule that makes a pair a pair. Measured on /business-setup-in-abu-dhabi/ at 375px before this fix: a pair image rendered 343x193 — exactly its 16:9 intrinsic ratio — where the group rule asks for 210px; and the same images rendered 343x0 while still lazy and undecoded. Both symptoms, one cause. This is the same circular-percentage trap that cropped four authority logos in the approvals section on 1 Sep. */ .cz-reading__body .cz-fig__pair > img { inline-size: 100%; object-fit: cover; /* AND no reveal scale. The base figure animation scales the image to 1.02 and relies on .cz-fig__media to clip the overflow — see figures.css. A bare grid-child image has no wrapper, so the 2% is not clipped: it renders 2% larger than its own grid column, eats the gap, and makes `pair` visibly bigger than `offsetpair` and `triptych` on the same page. Measured at 1600px before this line: pair 609x367 against offsetpair and triptych at 597x360 in the identical 597px column. 597 x 1.02 = 609.0 and 360 x 1.02 = 367.2, which is the proof of cause. Neutralised here so every frame in every group is the same size as every other. */ transform: none; } /* ------------------------------------------------------------ 2. Single-frame variants ------------------------------------------------------------ */ /* quiet — a held beat at the measure. */ .cz-fig--quiet .cz-fig__media { aspect-ratio: 1.75; height: auto; } /* inset — recessed and framed, a little shorter than quiet so the two stay distinguishable when both appear on one page. */ .cz-fig--inset .cz-fig__media { aspect-ratio: 1.8; height: auto; } /* strip — the anamorphic chapter mark. 460px against a full-width box is about 2.63:1. It was 330px, which was 3.67:1, and the client called that "the lame thin strip" on three separate pages. A full-width moment has to be worth the width it takes. */ .cz-fig--strip .cz-fig__media { aspect-ratio: 2.2; height: auto; } /* plate — the largest single frame on the site, and the only one carrying the gold rule. The rule is a masthead device borrowed from the section plate: it says "a section begins here". Full width, so the rule has something to measure against. */ .cz-fig--plate { position: relative; } .cz-fig--plate .cz-fig__media { aspect-ratio: 2; height: auto; } .cz-fig--plate::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 3px; background: var(--cz-gold); } /* bleedleft — RETIRED AS A BLEED. The class name survives because inc/content-enrich.php still emits it in the archetype sequences, and renaming there without renaming here would silently drop the styling. It is now simply a large right-extending frame, sized between strip and plate so the sequences keep their variety. */ .cz-fig--bleedleft .cz-fig__media { aspect-ratio: 2.1; height: auto; } /* ------------------------------------------------------------ 3. Group variants — equal columns, equal heights, always ------------------------------------------------------------ THE MARKUP IS NOT CONSISTENT BETWEEN THESE THREE, and that is a root cause of "uneven sizes" in its own right. Measured on the served HTML, 1 Sep: pair .cz-fig__pair > img (bare image) offsetpair .cz-fig__pair > .cz-fig__media > img triptych .cz-fig__pair > .cz-fig__media > img So the grid child is an in one case and a wrapper in the other two. Any rule written against .cz-fig__media silently misses `pair`; any rule written against img silently misses the other two. That is exactly why article.css:1430 needed a separate `.cz-fig__pair img:last-child` hack to nudge pair alone — a hack that then fought every attempt to make the pair equal. Everything below therefore targets `.cz-fig__pair > *`, the grid child WHATEVER it happens to be. One rule, both shapes, no hack. Fixing the emitter in inc/content-enrich.php to wrap consistently would be the deeper repair; it is reported, not done here, because this file must not depend on a PHP change landing first. minmax(0, 1fr) rather than a bare 1fr: a bare 1fr track refuses to shrink below its content's min-content width, which is how a grid child overflows its own grid. */ /* THE OVERLAPPING DIPTYCH — specified by the client, 1 Sep, from two screenshots of the same slot. A, the touching pair : 722x318 and 716x312, 0px gap, 29px drop. "somewhat good style. But needs a bit more overlapping, not too much, but a bit much." B, the ratio he wants: 710x434 and 709x434 = 1.64:1. "for aspect ratio I recommend like this. I am sick on thin strips." FLEX, NOT GRID, and the reason is arithmetic. A negative gap does not exist in CSS, and a negative margin on a GRID item makes that item wider than its track, so the two frames stop being equal — which he has rejected twice ("Both looks uneven"). In a flex row where both items are `flex: 1 1 0`, the negative margin is subtracted from the used free space BEFORE it is shared, so each item resolves to (container + lap) / 2. Both frames stay EXACTLY equal and the second simply sits over the first. That is the only construction that gives overlap and equality at the same time. aspect-ratio ALONE, never beside a max-height. R3 forbids that pairing because the two together resize a box rather than cap it. Here there is no height at all, so the ratio is the only constraint and it holds at every viewport. That matters: the previous rule capped height at 360px while width kept growing with the screen, so a pair frame measured 1.54:1 at 1440px and 1.93:1 at 1920px — progressively thinner the wider the monitor. THAT is the "thin strip" he has now named four times, and on his own 1920 screen it was at its worst. At 1.64 the same frame is 710x433 at 1800px, which is his screenshot B to the pixel. */ .cz-fig--pair .cz-fig__pair, .cz-fig--offsetpair .cz-fig__pair { --cz-lap: clamp(24px, 4vw, 72px); --cz-drop: clamp(16px, 2.6vw, 48px); display: flex; align-items: flex-start; background: none; overflow: visible; } /* The triptych stays a row of three with a real gap: three frames that overlapped would read as a stack of cards, not a sequence. */ .cz-fig--triptych .cz-fig__pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(12px, 1.1vw, 18px); background: none; overflow: visible; } /* Equal heights for every frame in every group, with NO :last-child exception. That exception is what produced two pictures of different sizes sitting on different baselines — the client's "Both looks uneven", twice. */ /* Both frames: equal by flex arithmetic, ratio-locked, no height at all. */ .cz-reading__body .cz-fig--pair .cz-fig__pair > *, .cz-reading__body .cz-fig--offsetpair .cz-fig__pair > * { flex: 1 1 0; min-inline-size: 0; display: block; aspect-ratio: 1.64; height: auto; margin-top: 0; } /* The second frame carries the overlap and the drop. The hairline and the soft shadow on its leading edge are what make the overlap read as one plane in front of another rather than as two pictures that collided — depth is R4 property 2, and it is the one this system has never had. */ .cz-reading__body .cz-fig--pair .cz-fig__pair > :last-child, .cz-reading__body .cz-fig--offsetpair .cz-fig__pair > :last-child { margin-left: calc(-1 * var(--cz-lap)); margin-top: var(--cz-drop); position: relative; z-index: 2; /* The glow FIRST, then the cast shadow. box-shadow does not merge across rules — a second declaration replaces the first outright — so the overlap frame has to restate the glow or it would lose it. Composed through the custom property so there is still only one place to tune. */ box-shadow: var(--cz-fig-glow), -22px 0 40px -16px rgba(5, 6, 7, .55); } .cz-reading__body .cz-fig--triptych .cz-fig__pair > * { min-inline-size: 0; display: block; aspect-ratio: 1.45; height: auto; margin-top: 0; } /* article.css:1430 offsets the SECOND image of a pair downward: .cz-fig--pair .cz-fig__pair img:last-child { margin-top: ... } That is (0,3,1) and targets `img`, so neither the rule above nor anything written against .cz-fig__media can reach it. Matched at equal specificity here; placement.css loads later, so this wins. Without this line the pair stays visibly unequal no matter what else changes — verified before writing it. */ .cz-fig--pair .cz-fig__pair img:last-child, .cz-fig--offsetpair .cz-fig__pair img:last-child, .cz-fig--triptych .cz-fig__pair img:last-child { margin-top: 0; } /* stack — RETIRED AS A FLOAT. It was float: right with width: min(42%, 340px), which ragged the prose against a hard vertical edge and left the text wrapping a shape it did not choose. CORRECTION, 1 Sep. An earlier version of this comment claimed the emitter gives stack a SINGLE .cz-fig__media "checked on the served HTML". That was wrong, and wrong in the way this project has been burned by before: the check read a 180-character excerpt of the figure and stopped before the second wrapper. content-enrich.php registers stack at TWO images in cz_figure_images_needed(), and the served markup carries two .cz-fig__media siblings. Paired with display: block that produced the worst available result — two full-measure slabs stacked vertically, 350px each, which is exactly the "lamely placed" the client is objecting to. It is now two equal frames at the MEASURE, which keeps it distinct from pair: pair is two frames across the FULL width, stack is two narrower frames inside the prose column, so the two read as different masses rather than the same row twice. */ .cz-fig--stack { /* Same flex construction as the diptych, and for the same arithmetic reason — see section 3. The lap and drop are deliberately about HALF the diptych's: the client asked for overlap here too, "Not much though", and stack sits at the MEASURE rather than full width, so the same 72px would be a much larger share of a much smaller frame. */ --cz-lap: clamp(14px, 2vw, 34px); --cz-drop: clamp(10px, 1.4vw, 26px); float: none; clear: none; margin-left: 0; display: flex; align-items: flex-start; } .cz-reading__body .cz-fig--stack .cz-fig__media { flex: 1 1 0; } .cz-reading__body .cz-fig--stack .cz-fig__media:last-child { margin-left: calc(-1 * var(--cz-lap)); margin-top: var(--cz-drop); position: relative; z-index: 2; box-shadow: var(--cz-fig-glow), -18px 0 32px -14px rgba(5, 6, 7, .5); } .cz-fig--stack .cz-fig__media { aspect-ratio: 1.5; min-inline-size: 0; height: auto; } /* ------------------------------------------------------------ 4. Block rhythm ------------------------------------------------------------ Space above a figure exceeds space below it, so the figure binds DOWN to the text it introduces rather than floating between two sections. Written at (0,2,0) via .cz-prose--article so it beats the bare (0,1,0) block-margin rules in article.css without needing !important. */ .cz-prose--article .cz-fig--quiet, .cz-prose--article .cz-fig--inset, .cz-prose--article .cz-fig--stack { margin-top: clamp(30px, 3vw, 46px); margin-bottom: clamp(16px, 1.6vw, 24px); } .cz-prose--article .cz-fig--pair, .cz-prose--article .cz-fig--offsetpair, .cz-prose--article .cz-fig--triptych { margin-top: clamp(34px, 3.4vw, 54px); margin-bottom: clamp(18px, 1.8vw, 26px); } .cz-prose--article .cz-fig--strip, .cz-prose--article .cz-fig--bleedleft { margin-top: clamp(38px, 3.8vw, 60px); margin-bottom: clamp(20px, 2vw, 30px); } /* plate opens a section, so it sits tight under its heading and pushes the following prose away instead. */ .cz-prose--article .cz-fig--plate { margin-top: clamp(10px, 1vw, 16px); margin-bottom: clamp(26px, 2.6vw, 40px); } /* ------------------------------------------------------------ 5. Breakpoints ------------------------------------------------------------ Each band redefines --cz-fig-full ONCE and every variant follows, because nothing above hard-codes the bleed. That is the whole reason the width is a custom property. Bounded ranges, never open-ended max-widths: reading.css:70 records that an open max-width: 1400px also matched 375px and, printed after the single-column rule, won there too — leaving the prose 135px wide on a phone. */ /* 1001-1400px: the grid drops to two columns, so there is no third column to extend into. Full width becomes the track itself. */ @media (min-width: 1001px) and (max-width: 1400px) { .cz-reading__body { --cz-fig-full: 100%; } } /* Below 1001px the layout is a single column. Every figure is the column, every group is one frame per row, nothing carries a negative margin, and the measure cap is released because the column is already narrower than 74ch. */ @media (max-width: 1000px) { .cz-reading__body { --cz-fig-full: 100%; --cz-fig-measure: 100%; } .cz-reading__body .cz-prose > p, .cz-reading__body .cz-prose > h2, .cz-reading__body .cz-prose > h3, .cz-reading__body .cz-prose > h4, .cz-reading__body .cz-prose > h5, .cz-reading__body .cz-prose > ul, .cz-reading__body .cz-prose > ol, .cz-reading__body .cz-prose > dl, .cz-reading__body .cz-prose > blockquote, .cz-reading__body .cz-prose > .cz-callout, .cz-reading__body .cz-prose > .cz-faq, .cz-reading__body .cz-prose > .cz-chapter { max-width: none; } /* aspect-ratio: auto IS THE FIX, and it belongs with every height override in section 5. Section 2 gives this frame `aspect-ratio: 2; height: auto`, which is correct: the width comes from the column and the ratio derives the height. Setting a height here without releasing the ratio inverts that — the height becomes definite, so the ratio derives the WIDTH instead, and the frame stops filling its own figure. Measured at 768px on /commercial-professional-or-industrial-.../ before this line: figure 718.44px wide, media 645.09px (42vw = 322.55, × 2 = 645.09), leaving 73.34px of empty white inside the figure on the right. That is R3's "big empty spaces inside, no proper allignment" arriving from the OTHER direction to §23.3's 676×380 — same pairing, same arithmetic, the box under-filling instead of overflowing. One of width, height and ratio must stay free. */ .cz-fig--plate .cz-fig__media { aspect-ratio: auto; height: clamp(260px, 42vw, 400px); } } /* 621-1000px: two-up groups still read as two-up at this width; a triptych does not, so it halves and lets the third frame wrap. */ @media (min-width: 621px) and (max-width: 1000px) { .cz-fig--triptych .cz-fig__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Same release as the plate above: section 3 sets aspect-ratio 1.45 on these children, and a definite height beside it would size them off the ratio rather than off their grid track. */ .cz-fig--triptych .cz-fig__pair > * { aspect-ratio: auto; height: clamp(180px, 26vw, 240px); } } /* 620px and below — phones. Every group becomes a single column. Heights are set in vw against a 375px viewport so a frame stays a frame and never becomes a band: at 375px, 56vw = 210px against a ~343px column, which is 1.63:1. */ @media (max-width: 620px) { .cz-fig--pair .cz-fig__pair, .cz-fig--offsetpair .cz-fig__pair, .cz-fig--triptych .cz-fig__pair { grid-template-columns: minmax(0, 1fr); } /* The grid child, whatever its tag — see section 3. */ /* Phones: the overlap and the drop are both switched off — at 343px a 72px lap would eat a fifth of the frame — and the ratio opens up to 1.45 so a single-column frame is a frame and not a band. */ .cz-fig--pair .cz-fig__pair, .cz-fig--offsetpair .cz-fig__pair { display: grid; --cz-lap: 0px; --cz-drop: 0px; gap: 12px; } .cz-fig--pair .cz-fig__pair > *, .cz-fig--offsetpair .cz-fig__pair > *, .cz-fig--triptych .cz-fig__pair > *, .cz-fig--stack .cz-fig__media { aspect-ratio: 1.45; height: auto; margin-top: 0; margin-left: 0; box-shadow: none; } /* STACK FOLDS TO ONE COLUMN TOO — it was the only group that did not. Measured at 375px on /no-capital-gains-tax-is-not-a-statement-about- your-exit/ before this block: the figure stayed a flex ROW and its two frames rendered 178.60 x 123.16 each, side by side, still lapped by 14px. Two 178px thumbnails on a phone, in a 343px column where the strip, the inset, the plate and both diptychs all get the full width — and 133px of total figure height, which is the thin band this file exists to stop. Three lines, and each is load-bearing: flex-wrap puts each frame on its own row; --cz-lap/--cz-drop are zeroed on the CONTAINER, which is how the two diptychs already switch their overlap off here — the :last-child rule reads them through calc(), so resetting the property beats it without the (0,4,0) selector it would otherwise take; flex-basis 100% at (0,3,0), because .cz-reading__body's `flex: 1 1 0` is (0,3,0) and a bare .cz-fig--stack would tie and lose on nothing but source order. After: two frames of 343.20 x 236.69 (1.45:1), 12px apart, matching pair and offsetpair on the same phone. */ .cz-fig--stack { flex-wrap: wrap; row-gap: 12px; --cz-lap: 0px; --cz-drop: 0px; } .cz-reading__body .cz-fig--stack .cz-fig__media { flex: 1 1 100%; } /* aspect-ratio: auto, on every one of them, for the reason written out at the plate rule above — and this is where it did the visible damage. Measured at 375px before these four lines, figure box 343px wide: strip media 478.50px 135.50px of the frame off the right edge plate media 480.00px 137.00px bleedleft media 456.98px 113.77px inset media 391.70px 48.50px 58vw of 375 is 217.5px, and 217.5 × 2.2 is 478.5 — the phone height was making the frame WIDER than the column it sits in, so the picture was clipped hard on the right and the composition the 34% anchor had just centred was thrown off it again. That is the client's "Image is not rendered or cropped properly", and it was a phone-only defect because these heights only exist below 620px. After: every media box measures the column exactly. strip, inset and bleedleft render 343 × 217.61 (1.58:1) and the plate 343 × 240 (1.43:1) — frames on a phone, not bands. */ .cz-fig--quiet .cz-fig__media, .cz-fig--inset .cz-fig__media, .cz-fig--bleedleft .cz-fig__media { aspect-ratio: auto; height: clamp(200px, 58vw, 270px); } .cz-fig--strip .cz-fig__media { aspect-ratio: auto; height: clamp(200px, 58vw, 270px); } .cz-fig--plate .cz-fig__media { aspect-ratio: auto; height: clamp(220px, 64vw, 300px); } /* Rhythm compresses with the column but keeps the above > below relationship that binds a figure to its text. */ .cz-prose--article .cz-fig--quiet, .cz-prose--article .cz-fig--inset, .cz-prose--article .cz-fig--stack, .cz-prose--article .cz-fig--pair, .cz-prose--article .cz-fig--offsetpair, .cz-prose--article .cz-fig--triptych, .cz-prose--article .cz-fig--strip, .cz-prose--article .cz-fig--bleedleft { margin-top: 26px; margin-bottom: 15px; } } /* ============================================================ 6. THE BLUE EDGE ============================================================ Client instruction, 1 Sep: "Give all images blue glowing border. Maybe that's what will make it all good. Don't touch homepage though." SCOPED BY STRUCTURE, NOT BY NAME. Every rule below hangs off .cz-reading__body, which is the middle track of the reading grid. The homepage carries 13 .cz-fig elements of its own but ZERO .cz-reading__body — measured, not assumed — so the reading-grid scope excludes it exactly, and keeps excluding it even if the `home` body class is ever renamed. A body:not(.home) selector would have worked today and broken silently later. WHY BLUE IS NOT A CONTRADICTION. 17-ART-DIRECTION-COUNTER-LIGHT commits this site to a warm, low-key register, and a cool glow normally fights that. It does not fight it here, because the 1672x941 branded cohort — the 83 purpose-made frames that ARE the house style — is lit with exactly this colour: the wordmark in prism-document-transformation is cyan, and the lit planes in the layered-structure renders are this blue. The edge picks the accent out of the photography rather than imposing one on it. ONE TOKEN, ONE PLACE TO TUNE. --cz-fig-glow is composed once and consumed everywhere, including by the two overlap rules above, which must restate it because box-shadow does not merge across rules — a later declaration replaces an earlier one outright rather than adding to it. Change the three stops here and every frame on the site moves together; set it to `none` and the edge is gone with no other edit. THREE STOPS, NOT ONE. A single fat shadow reads as neon. An edge line, a close bloom and a far bloom read as light coming off a surface: the hairline gives the frame a definite boundary at any zoom, the close stop carries the colour, and the far stop is wide and weak enough to sit on both the white prose ground and the near-black sections without banding on either. NOT A FILTER. R3 forbids modifying a photograph, and R18 forbids it absolutely for authority marks. This is a box-shadow on the FRAME. Not one pixel of any image is altered, and an image lifted out of the page is byte-identical to the file on disk. */ .cz-reading__body { --cz-fig-glow: 0 0 0 1px rgba(23, 105, 255, .55), 0 0 18px -2px rgba(23, 105, 255, .34), 0 0 46px -8px rgba(23, 105, 255, .20); } .cz-reading__body .cz-fig__media, .cz-reading__body .cz-fig__pair > img { border-radius: 2px; box-shadow: var(--cz-fig-glow); /* The frame already clips the base scale(1.02); the radius needs the same clip or the corners show a square image behind a round edge. */ overflow: hidden; } /* The hover zoom already lives in article.css. The edge brightens with it so the two read as one gesture rather than two unrelated effects. */ .cz-reading__body .cz-fig:hover .cz-fig__media, .cz-reading__body .cz-fig:hover .cz-fig__pair > img { box-shadow: 0 0 0 1px rgba(23, 105, 255, .78), 0 0 22px -2px rgba(23, 105, 255, .46), 0 0 58px -8px rgba(23, 105, 255, .28); } .cz-reading__body .cz-fig--pair:hover .cz-fig__pair > :last-child, .cz-reading__body .cz-fig--offsetpair:hover .cz-fig__pair > :last-child, .cz-reading__body .cz-fig--stack:hover .cz-fig__media:last-child { box-shadow: 0 0 0 1px rgba(23, 105, 255, .78), 0 0 22px -2px rgba(23, 105, 255, .46), 0 0 58px -8px rgba(23, 105, 255, .28), -22px 0 40px -16px rgba(5, 6, 7, .55); } /* Reduced motion does not disable a static edge — there is no motion in it — but the transition on hover is motion, so it goes. */ @media (prefers-reduced-motion: reduce) { .cz-reading__body .cz-fig__media, .cz-reading__body .cz-fig__pair > img { transition: none; } } /* ============================================================ 7. THE MASTHEAD PLATE AND THE RELATED CARDS ============================================================ Client, 1 Sep: "why doesn't the top images of any blog, post, article not have blue glowing borders?" — then, for those: "borders inside and glowing from both outside and inside." WHY THEY WERE MISSED. Section 6 hangs every glow rule off .cz-reading__body, which is the middle track of the reading grid. The masthead sits ABOVE that grid and the related cards sit BELOW it, so neither was ever in scope. Measured per route: route masthead relcard cz-fig / 0 0 0 /business-setup-in-uae/ 1 3 7 /free-zones/ifza/ 1 0 2 /insights/ 0 0 0 The homepage carries neither, so "don't touch homepage" holds structurally. body:not(.home) is belt-and-braces on top of that. ------------------------------------------------------------ WHY THE INNER GLOW NEEDS A PSEUDO-ELEMENT ------------------------------------------------------------ An `inset` box-shadow paints on the element's own background, UNDERNEATH its children. The plate is a
containing an at width:100%, so an inset shadow declared on the figure is covered by the photograph and renders as nothing at all. So the inner half is drawn by ::before, absolutely positioned over the image and pointer-events:none so it cannot eat a click. It carries the inset hairline — the "border inside" — and the inner bloom. ::after is already taken by the gold corner rule (article.css:1456) and, being later in DOM order, still paints above ::before, so the corner survives. TWO INTENSITIES ON PURPOSE. The masthead gets the full treatment because it is the one image that introduces the document. Body figures keep the outer glow from section 6, and the related cards get the lightest version. That is a hierarchy, not an inconsistency: if every surface glowed identically the masthead would stop reading as the opening frame. ============================================================ */ body:not(.home) .cz-masthead__plate { border-radius: 2px; /* Outside: hairline, close bloom, far bloom. */ box-shadow: 0 0 0 1px rgba(23, 105, 255, .58), 0 0 22px -2px rgba(23, 105, 255, .40), 0 0 60px -10px rgba(23, 105, 255, .24); } body:not(.home) .cz-masthead__plate img { border-radius: inherit; } /* Inside: the inset border and the bloom coming off it, painted OVER the photograph because an inset shadow on the figure cannot be. */ body:not(.home) .cz-masthead__plate::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(23, 105, 255, .50), inset 0 0 26px -4px rgba(23, 105, 255, .32); } /* The related cards at the foot of an article. Lightest of the three, and no inner bloom: at card size an inner glow closes the frame up and the thumbnail stops reading. */ body:not(.home) .cz-relcard__media { border-radius: 2px; box-shadow: 0 0 0 1px rgba(23, 105, 255, .40), 0 0 14px -3px rgba(23, 105, 255, .26); } body:not(.home) .cz-relcard:hover .cz-relcard__media { box-shadow: 0 0 0 1px rgba(23, 105, 255, .62), 0 0 20px -3px rgba(23, 105, 255, .38); } @media (prefers-reduced-motion: reduce) { body:not(.home) .cz-relcard__media { transition: none; } }