/* ========================================================================== 6b — THE BIG STAGE A full-bleed auditorium photograph carrying one line of the content document, between §6 (Hear From Our Members) and §7 (Introducing). R15f — NEW SECTION, by direction, from a supplied reference. IT RESTORES COPY THE PAGE HAD LOST. R12f recorded that "We've built a trusted core community… now we're ready for the big stage" — the content document's own row between the testimonials and the Summit announcement — was dropped when §7's eyebrow became "Introducing", and that the sentence then rendered NOWHERE. It is set here verbatim, in the document's own position, and R12f's content gap closes. THE ONE DEPARTURE FROM THE DOCUMENT is the line break. The document runs it as one sentence; the reference breaks it in two and colours the second half. The break falls on the document's OWN ellipsis, so no wording is added, removed or reordered — only the ellipsis stops doubling as a mid-line pause. The reference also ends the sentence with a full stop; the document does not, and the document wins (§19 rule 2). STRUCTURE. Full-bleed background, contained content — §4's stated norm ("backgrounds are full-bleed; content is contained"), NOT §7's kind of bleed. §7 is a full-bleed coloured PLATE, an element that breaks the container; here the container is untouched and only the ground runs edge to edge. R12c's "the plate is the page's only full-bleed element" still holds for elements. ADJACENCY (§15, zero consecutive sections sharing a layout pattern): built 6 3-column scroll rail of cards on black built 6b centred single statement over full-bleed photography built 7 bounded violet plate, left-aligned, network right Three different patterns. No new violation, and none fixed either — the built 5 / built 6 thirds-on-thirds violation R8z opened is upstream of this and is untouched. BUDGETS: no blend shape (0 is the requirement for 3–7 and this sits inside that run), no gradient fill, no cell, no card, no signature interaction — the section reveals and then holds. Its one accent is violet, which is §6's and §7's too; this is a bridge between them and reads as one colour held across three sections rather than a fourth event. ========================================================================== */ /* -------------------------------------------------------------------------- THE BOX R15h — THE ASPECT RATIO IS GONE, by direction: "reduce the section height just enough to keep padding on both ends." The section is now sized by its own content — .section's padding, the mark, the gap and two lines of type — and nothing else. At desktop that is 120 + 200 + 120 = 440px, against the 960px the 3/2 ratio was producing at a 1440 viewport. Two thirds of the section was empty floor. ⚠ THE RATIO WAS NOT DECORATION — IT WAS THE CONTRAST GUARANTEE, so removing it required replacing it. Its job is now done by the overdraw on .stage__bg below. Read the two together; neither is safe alone. R15i WITHDREW THE COST THIS NOTE USED TO RECORD. At R15h a 440px section could only show a band of the old 2:1 file, which read as a violet glow rather than as a room, and the note said the section would have to grow again if that mattered. It did not have to: the ASSET was re-cropped to 1774x503 instead, so the band is now the whole picture and the arc sits on the section's floor by construction. Changing the file was the cheaper fix and it is the one that was taken. -------------------------------------------------------------------------- */ /* R18m — THE SECTION IS BLACK AND HOLDS NOTHING ELSE, by direction. It used to BE the picture: .stage__bg was inset: 0 on this element, so the photograph ran edge to edge and .section's padding was its internal margin. position and overflow moved to .stage__frame with the picture; the section keeps only its ground and the page's shared padding. The colour is named rather than inherited. §7 relies on the page ground for the same effect, but a section whose entire job is to be black around a picture should say so. */ /* ⚠ THE TOP PADDING IS ZERO — R18n, by direction: "remove the top padding for this section." THIS IS AN EXCEPTION TO design-rules §4, WHICH SAYS NOT TO VARY SECTION PADDING CASE BY CASE. It is recorded there rather than taken silently. The reason it is defensible here: §6b's content is a bounded PICTURE, not type. The shared padding exists to keep lines of text off their neighbours, and a photograph with its own 80px of internal padding does not need a second 80px outside it to be legible. §6's own bottom padding still separates the two sections. ⚠ padding-block-start, NOT padding-block. The bottom padding stays: §7 follows, and its black ground would merge with this one's if both edges closed up. .stage is (0,1,0) and so is .section — stage.css loads after layout.css, so SOURCE ORDER is the only thing deciding this. Moving the link order would silently restore the padding. The colour is named rather than inherited. §7 relies on the page ground for the same effect, but a section whose entire job is to be black around a picture should say so. */ .stage { padding-block-start: 0; background-color: var(--color-bg-base); } /* -------------------------------------------------------------------------- THE FRAME — R18m The bounded picture. Container width, square, clipped, with the type centred in it. ⚠ THE PADDING IS A CONTRAST CONTROL, NOT BREATHING ROOM, and it is the reason this arrangement measures BETTER than the full-bleed one it replaces. The file has exactly two bands that fail: the house glow across its top 4% and the lit arc across its bottom 12%. Bottom-anchored, the arc sits on the frame's floor — and the padding is what holds the type off both. Cut it and the type walks onto the arc. 48 / 64 / 80 is the Panel component's own internal padding scale (CLAUDE.md §5), so no new value is introduced. The measurements for every breakpoint are in index.html. align-content: center, so the type sits in the middle of the picture whatever the frame's height turns out to be — the box is content-sized and the sentence wraps to two, four or six lines across the range. */ /* R18n — THE STROKE. 1px --color-border-strong: the value every separator and card edge on this page uses, and the one §3's thumbnail settled on. 0.20, not --color-border-default's 0.10, which measures 1.3:1 on black and is not there. IT SURVIVES THE PHOTOGRAPH BECAUSE IT IS OUTSIDE IT. .stage__bg is inset: 0, which resolves against the PADDING box, so the picture stops at the inner edge of the border instead of painting over it. No z-index, no extra element — the same construction §3's poster uses. ⚠ IT ALSO NARROWS THE PICTURE BY 2px. border-box sizing means the frame's outer size is unchanged and the content box shrinks, so the contrast measurement in index.html shifts by less than a third of one percent of the file's height. Not re-taken; noted so it is not re-derived as a surprise. */ .stage__frame { position: relative; overflow: hidden; display: grid; align-content: center; padding: var(--space-2xl); border: var(--border-hairline) solid var(--color-border-strong); border-radius: var(--radius-control); } @media (min-width: 768px) { .stage__frame { padding: var(--space-3xl); } } @media (min-width: 992px) { .stage__frame { padding: var(--space-4xl); } } /* -------------------------------------------------------------------------- THE GROUND R15i — THE OVERDRAW IS GONE AND THE PICTURE SIMPLY FILLS THE SECTION, by direction: "bring the background image to fit in the section." IT IS A DIFFERENT FILE. The asset was re-cropped between R15h and this revision: 1774x887 (2:1, the whole auditorium) became 1774x503 (3.53:1, a band of ceiling with the lit arc along the bottom edge). That crop is what makes this rule simple. R15h needed a 175% overdraw because the arc sat at 49.5% of the old frame and had to be pushed below the type; in the new frame the arc is already at the bottom, so the picture can be shown whole. The section is 3.27:1 at a 1440 viewport against the file's 3.53:1 — close enough that `cover` trims a little width and nothing else. ⚠ THE R15f AND R15h MEASUREMENTS ARE VOID. They were taken against the 887-tall file and none of them transfer. This is the third set. THE MEASUREMENT, re-taken against the new file. Brightest pixel per row, centred 90% of the frame, against --color-accent-identity #865BFF (relative luminance 0.1977): row brightest L violet ratio 0% 0.0415 2.71:1 the house glow - FAILS 3:1 4% 0.0289 3.14:1 10% 0.0168 3.71:1 20-84% <0.0102 >4.11:1 the safe field 86% 0.0137 3.89:1 88% 0.0838 1.85:1 the arc 90-100% >0.0871 <1.81:1 The safe field is 4% to 86% - nearly the whole picture, where the old file gave 3% to 48.5%. Where the type actually lands, worst case per band, with the mark gone (R15j) and the section shortened to match: band section H type spans of the picture violet <768 210px 64-146px 30.5-69.5% 4.29:1 768-991 272px 80-192px 29.4-70.6% 4.36:1 >=992 344px 120-224px 34.9-65.1% 4.36:1 All clear, and white is 17:1 or better throughout. Note that removing the mark IMPROVED two of the three bands: a shorter box puts the type nearer the middle of the picture, further from the house glow above it and the arc below. object-position: center bottom, NOT center. Bottom-anchoring pins the arc to the section's floor at every width - it is the reason the file was cropped this way - and it spends the crop on the top of the frame, which is the only part that fails 3:1. Centring would do the opposite: keep the glow, drop the arc. ⚠ ITS LIMIT IS A 3024px VIEWPORT. Past there the picture is scaled by width far enough that the bottom-anchored window starts under 86% and the second line approaches the arc. No real display reports that many CSS pixels, and a wider crop of the same photograph is the fix if one ever does. ⚠ block-size IS SET EXPLICITLY, and this is the sixth time on this page it has had to be. `height="503"` in the markup is a PRESENTATIONAL HINT: it wins wherever no CSS supplies a height, and it made the Hero's cards 1800px tall when it was left to. The attributes stay -- they reserve the box while the file loads -- but CSS names the height so the hint can never apply. No scrim, still. R14z-R15a spent five revisions establishing that a gradient over a photograph is a running cost. The crop has now removed the reason there ever was one here. Full colour, per §14: venue photography is the one class of image on this page that is not grayscale at rest. -------------------------------------------------------------------------- */ .stage__bg { position: absolute; inset: 0; z-index: var(--layer-base); inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center bottom; } /* The flex column had two children and now has one, so --gap-title-group is removed rather than left as a value separating nothing. align-items centres the title's BOX (.t-lead-style measures cap the box below the container); text-align centres the lines inside it. Both are still doing work. */ .stage__inner { position: relative; z-index: var(--layer-raised); display: flex; flex-direction: column; align-items: center; text-align: center; } /* R15j — THE MARK IS REMOVED, by direction. It was a 2px violet rule standing above the type, borrowed from §6's video name card and the Hero's name plates. IT WAS ALSO THE SECTION'S ONLY DECORATION, so the decorative count goes from 2 to 1 (the photograph) and the mobile carve-out that hid it below 768px goes with it — there is no longer anything to hide. AND IT SHORTENS THE SECTION BY 96px at desktop: the mark was 64px plus a 32px gap. The box is content-sized, so it simply follows. The contrast table below is re-derived for the shorter box; every band improved, because the type now sits nearer the middle of the picture and further from both the house glow at the top and the arc at the foot. */ /* -------------------------------------------------------------------------- THE STATEMENT --font-size-h1, matching .plate__title exactly — same size, same display leading, same display tracking. That pairing is the point: this line asks the question ("now we're ready for the big stage") that §7's title answers ("The HigherEd Collective Summit"), and two statements set at one size read as a pair. Display (76px) would have made the bridge larger than the announcement it leads into, and §7 is the page's peak. ⚠ IT IS NOT AN

. --font-size-h1 is a SIZE token; the element is this section's

and the page still has exactly one

, in the Hero (§18: a display style class is not a heading level). text-wrap is not set. The two lines are hard-broken in the markup because the break carries the colour change — leaving it to the browser would let the violet start mid-line at some widths. -------------------------------------------------------------------------- */ .stage__title { font-family: var(--font-family-heading); font-size: var(--font-size-h1); font-weight: var(--font-weight-heading); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); color: var(--color-text-heading); } .stage__line { display: block; } /* Measured above: 4.11:1 at the worst point of the field, past the 3:1 §18 sets for large text and past 4.5:1 nearly everywhere in it. Colour is not carrying meaning here — the sentence reads identically in one tone. */ .stage__line--accent { color: var(--color-accent-identity); }