and nothing else. It exists so the bleed can be measured against the DOCUMENT's width rather than the window's. The obvious `right: calc(50% - 50vw)` is wrong: `vw` counts the scrollbar and the document does not, so the wedge landed half a scrollbar past the page and opened a horizontal scrollbar — 5px of real, draggable sideways scroll. `overflow-x: clip` on did not stop it (verified in Chrome: the rule applies, the page still scrolls). This wrapper is a flex item of , so it stretches to exactly the document width, and `right: 0` against it is exact at any scrollbar width. Deliberately no `overflow` here — that would clip the bleed, and it would also risk taking the sidebar inside out of `position: sticky`. */ .vizz-content-bleed { position: relative; } /* Content first in source order, sidebar second — the old Bootstrap template reversed the two with push/pull so the sidebar came first in the HTML. Here the visual order is the same and the reading order is the honest one. */ .vizz-content__grid { /* Lifts the text and the sidebar above the corner bleed, which paints from the top-right of .vizz-content. */ position: relative; z-index: 1; display: grid; /* 320px exactly: two 156px partner logos plus the 4px gutter between them, so #right_column_content lays out two-up the way it did on the old site. A flexible track let the column fall under 316px and dropped them to one per row. */ grid-template-columns: minmax(0, 1fr) 320px; /* Fixed rather than viewport-scaled: the frame is capped at 1280px, so a vw gap would keep growing after the container had stopped and walk the reading column off its 800px. Below 900px the grid is one column and this becomes the row gap between the content and the sidebar under it. */ gap: 80px; align-items: start; } .vizz-content__main { min-width: 0; } .vizz-content__side { min-width: 0; display: flex; flex-direction: column; /* The air between the sub-nav and the partner logos under it. */ gap: 28px; /* Sticks while the (usually much longer) main column scrolls past. 78px is the sticky header's height plus a little air. Safe because everything in this column is short — the sub-nav and six logos. If `right_column` ever carries enough content to make the column taller than the viewport, its bottom becomes unreachable while scrolling; drop the sticky then. */ position: sticky; top: 78px; } /* ── page-head image ─────────────────────────────────────────────── */ /* The historical Arena panorama the old site used as its `.small-header` (static/img/small-header.jpg, 1437×336, already monochrome). Two looks, and the class on the element is the only switch between them — same arrangement as .vizz-sidenav / .vizz-sidenav-alt:

a framed band above the content

a bleed in the top-right corner They are not variants of one layout. The band is in flow and pushes the page down; the bleed is taken out of flow entirely and takes no vertical space at all, so the title still starts at the top of the page and the image sits behind the corner. Because `position: absolute` removes it from flow, both can live on the same element in the same place in the template. The image is a CSS background rather than an : it is decoration, it crops rather than scales, and there is nothing to caption. To let editors change it per page later, give the element `style="--pagehead-img:"` from a plugin and the var below picks it up. */ .vizz-pagehead, .vizz-pagehead-alt { --pagehead-img: url("../../img/small-header.jpg"); background-image: var(--pagehead-img); background-size: cover; background-repeat: no-repeat; } /* Version 1 — a framed band, the full width of the content column. */ .vizz-pagehead { /* The source is 4.28:1, so at the 1200px content width its natural height is 280px. This crops it to a band — shorter than the old 335px header, which pushed the page title well below the fold. */ height: clamp(140px, 16vw, 220px); margin-bottom: clamp(32px, 4vw, 56px); border-radius: var(--radius-lg); /* `bottom` keeps the Arena and the rooftops in frame when the band crops; centring it would cut the skyline off and show mostly blank sky. */ background-position: center bottom; } /* Version 2 — a corner bleed. The image runs off the right edge of the window and dissolves on a diagonal as it comes down-left towards the sub-nav, so the sidebar reads over clear page rather than over photograph. */ .vizz-pagehead-alt { position: absolute; /* Anchored to .vizz-content-bleed, which is exactly as wide as the document and starts at the top of

— so this is the page's top-right corner, with no scrollbar arithmetic. */ top: 0; right: 0; /* Wide on purpose. The fade runs on a shallow diagonal, so it needs a long run to finish: at 1000px the mask was still ~30% opaque when it hit the element's own left edge, and that showed as a hard vertical seam. At this width the gradient is spent before the box ends and the diagonal is the only edge anyone sees. */ width: min(100vw, 1500px); height: clamp(200px, 25vw, 360px); /* Anchored to the image's own right end, which is where the Arena sits. */ background-position: right top; /* 193deg points down and slightly left, so the gradient starts opaque in the top-right corner and runs out towards the sub-nav below it. The angle is roughly perpendicular to the diagonal the fade should read along; turn it towards 180deg to make the boundary flatter, towards 225deg to stand it up. mask rather than opacity, so it fades to the page rather than to grey. The 50% end stop is not a look, it is the seam. Moving from the box's right edge to its left along the top consumes ~48% of the gradient (the axis is W·sin θ + H·cos θ long), so anything past ~50% leaves the mask still partly opaque where the box ends — at 58% that was a 32-level step down the left edge, plainly visible. Ending at 50% lands on ~3% alpha there, a 2-level step. Re-derive it if the width, height or angle move. */ -webkit-mask-image: linear-gradient(193deg, #000 4%, transparent 50%); mask-image: linear-gradient(193deg, #000 4%, transparent 50%); } /* Without mask support the bleed would be a hard-edged block over the corner, which is worse than no image — the framed band is the sane fallback. Same caution vizz-shell.css takes over color-mix(). */ @supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) { .vizz-pagehead-alt { display: none; } } /* ── sidebar: sub-navigation ──────────────────────────────────────── */ .vizz-sidenav { background: var(--color-surface); border-radius: var(--radius-lg); padding: 10px; } .vizz-sidenav__item { display: block; padding: 10px 14px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--color-text); text-decoration: none; transition: background var(--motion-duration) var(--motion-ease); } .vizz-sidenav__item:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--color-text); text-decoration: none; } /* The page you are on gets the accent fill. `ancestor` is the branch you are inside when you are on a page deeper than this level — tinted, not filled. (Not `descendant`: every item in this list is a descendant of the selected page whenever you are on that page's own level, so it marks all of them.) */ .vizz-sidenav__item[aria-current="page"] { background: var(--color-accent-200); color: var(--color-accent-800); } .vizz-sidenav__item--ancestor { color: var(--color-accent-700); } /* ── sidebar: sub-navigation, alternative ─────────────────────────── */ /* A drop-in alternative to .vizz-sidenav above, which stays exactly as it is. Swap ONE word in redesign-2026/menus/sidebar_menu.html: