/** * YWA — homepage sections * --------------------------------------------------------------------------- * Front-page-specific layout. Built against the Home design in the Figma file * (WordPress page → Home). Token-bound; MEASURED marks a value taken from the * design rather than a token scale. * * Sections, top to bottom: * .home-hero full-bleed photo, transparent nav over it, content bottom-left * .home-news News & Events — heading + event-card row (carousel later) * .ywa-feature split panel — text one side, full-height photo the other * .ywa-archives spotlight — album art + text card on a dark band * .home-newsletter Subscribe to the Whiff Note — centred signup * * NAMING, mid-transition (2026-07-27). The two general-purpose sections were * renamed `home-*` → `ywa-*`, per the convention set in 0.9.1. They are not * homepage-only: block.json loads this stylesheet wherever the block appears, * so both already work on any page — the old prefix simply lied about that, and * `.ywa-feature` is now used as an About opener. The remaining three keep the * `home-` prefix for now; renaming them is hygiene, not a fix, and was left out * of that pass deliberately to keep the diff reviewable. * * STATUS: first-pass desktop BASE. Not yet done — responsive, the carousels, * real photos, and componentizing come after Josh signs off on the skeleton. */ /* =========================================================================== HERO --------------------------------------------------------------------------- The transparent header overlays the top of the photo; hero content sits at the bottom-left. White text reads on the naturally-dark lower half of the photo, backed by a soft bottom scrim so legibility holds regardless of image. =========================================================================== */ /* The transparent header OVERLAYS the hero rather than sitting above it. chrome.css only makes the transparent variant transparent — it never positions it, because on every other template the header is in normal flow. The `_dev/` preview faked this with an inline style on a wrapper div; that wrapper doesn't exist in WordPress, where header.php emits the header as a sibling before
. Taking it out of flow here lets the hero start at the top of the document with the header floating over it. Scoped to `.has-transparent-header`, a body class added only when the page actually contains a hero block — not to `.is-front-page`. Now that sections are blocks, a hero can appear on any page, and the homepage could equally be composed without one. The treatment has to follow the content, not the URL. */ .has-transparent-header .site-header--transparent { position: absolute; inset-inline: 0; top: 0; } /* ADMIN BAR. Taking the header out of flow also takes it out of reach of the 32px WordPress reserves for its toolbar (it does that with `html { margin-top }`, which only moves things that are IN the flow). So on a page with a hero, a logged-in editor sees the top of the nav tucked under the toolbar, while every other page — where the header is in normal flow — sits correctly below it. Visitors never see this; the toolbar only exists when you are logged in. It is a nuisance for Josh and Frank while editing, not a public defect. The two heights are WordPress's own: the bar is 32px and fixed on wide screens, and 46px and ABSOLUTE at ≤782px — where it scrolls away with the page, so the header must scroll with it rather than be permanently offset. */ body.admin-bar .has-transparent-header .site-header--transparent, body.admin-bar.has-transparent-header .site-header--transparent { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .has-transparent-header .site-header--transparent, body.admin-bar.has-transparent-header .site-header--transparent { top: 46px; } } /* The hero is a CROSSFADE carousel: the content (title / intro / buttons) is FIXED and identical across slides — only the background photo changes behind it, gently fading from one to the next. Legibility comes from a fixed scrim layer, so the white text holds regardless of which photo is showing. */ .home-hero { position: relative; overflow: hidden; min-height: 88vh; /* MEASURED-ish: design hero ≈ full-height */ display: flex; align-items: flex-end; /* content to the bottom */ background-color: var(--brand-ink-950); } /* Background layer — the crossfading photos. Purely decorative. */ .home-hero__bg { position: absolute; inset: 0; z-index: 0; } .home-hero__bg-slide { position: absolute; inset: 0; background-image: var(--slide-image, none); background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 900ms var(--motion-easing-standard); } .home-hero__bg-slide.is-active { opacity: 1; } /* Reduced motion → instant swap, no fade. */ @media (prefers-reduced-motion: reduce) { .home-hero__bg-slide { transition: none; } } /* No photos chosen. The hero used to invent three coloured gradients here, which read as a design decision rather than a missing photo — and drew three carousel dots for backgrounds that did not exist. It is now one flat panel on the inverse surface: a visitor sees a clean dark hero with the headline fully legible, and only an editor is told anything is missing. */ /* (The `.home-hero--no-photo` flat-panel treatment was removed 2026-07-27 with the gradients' restoration — the class is no longer emitted, so the rules were dead weight. See blocks/hero/render.php for the reasoning.) */ .home-hero__editor-note { margin: var(--space-600) 0 0; padding: var(--space-300) var(--space-400); max-width: 42rem; color: var(--color-text-inverse); border: 1px dashed currentColor; border-radius: var(--radius-sm); /* Dashed and set in the meta role so it reads as scaffolding, not as page content an editor might mistake for something a visitor can see. */ } /* Scrim — TWO gradients, fixed over the photos: - top: darkens under the nav so the header links stay legible - bottom: darkens where the hero title/intro sit Both are subtle; the photo still reads through the middle. */ .home-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(22, 22, 21, 0.55) 0%, rgba(22, 22, 21, 0) 24%), linear-gradient(to top, rgba(22, 22, 21, 0.78) 0%, rgba(22, 22, 21, 0.20) 40%, rgba(22, 22, 21, 0) 66%); } .home-hero__inner { position: relative; /* above bg + scrim */ z-index: 2; width: 100%; padding-block: var(--space-2400) var(--space-2000); } /* Prev / next arrows */ .home-hero__arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background-color: rgba(22, 22, 21, 0.35); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard); } .home-hero__arrow:hover { background-color: rgba(22, 22, 21, 0.6); } .home-hero__arrow--prev { left: var(--space-600); } .home-hero__arrow--next { right: var(--space-600); } .home-hero__arrow svg { width: 22px; height: 22px; } .home-hero__content { max-width: 46rem; /* keeps the intro to a readable measure */ } .home-hero__title { color: var(--color-text-inverse); margin: 0 0 var(--space-600); } .home-hero__intro { color: var(--color-text-inverse); } .home-hero__intro p { margin: 0 0 var(--space-500); max-width: 42rem; } .home-hero__actions { display: flex; align-items: center; gap: var(--space-400); margin-block-start: var(--space-800); } /* On the photo, the buttons take inverse treatment: History is an outlined white "secondary", About the YWA is a white text "link" with a chevron. */ .home-hero__actions .btn--secondary { color: var(--color-text-inverse); border-color: var(--color-text-inverse); background-color: transparent; } .home-hero__actions .btn--secondary:hover { background-color: var(--color-text-inverse); color: var(--brand-ink-950); } .home-hero__actions .btn--link { display: inline-flex; align-items: center; gap: var(--space-200); color: var(--color-text-inverse); background: transparent; border: 0; padding: var(--space-300) 0; font-family: var(--type-family-sans); font-size: var(--type-size-action); font-weight: var(--type-weight-medium); text-decoration: none; } .home-hero__actions .btn--link:hover { text-decoration: underline; text-underline-offset: 0.3em; } .home-hero__actions .btn--link svg { width: 1em; height: 1em; } /* Slide dots — clickable buttons that jump to a slide */ .home-hero__dots { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: var(--space-600); display: flex; gap: var(--space-300); } .home-hero__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard); } .home-hero__dots button:hover { background-color: rgba(255, 255, 255, 0.75); } .home-hero__dots button[aria-current="true"] { background-color: #fff; } /* The accent hairline between sections, matching the design's red-strips. */ .home-section-seam { height: 4px; background-color: var(--color-accent-default); } /* MEASURED — design red-strip is 4px */ /* =========================================================================== Shared section rhythm =========================================================================== */ .home-section { padding-block: var(--space-1600); } /* 64 — was 80; News felt too tall (Josh) */ .home-section__head { margin-block-end: var(--space-1200); } .home-section__title { color: var(--color-text-strong); margin: 0 0 var(--space-300); } .home-section__sub { color: var(--color-text-subdued); max-width: 40rem; margin: 0; } /* News & Events head is a row: title/sub left, "View All" right */ .home-news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-800); /* MEASURED — design head row gap 80 (capped to 32 wrap gap below) */ margin-block-end: var(--space-1000); /* 40 — was 64; head→cards tightened (Josh) */ } .home-news__heading { display: flex; flex-direction: column; gap: var(--space-400); } /* MEASURED — 16px title→sub */ .home-news__head .home-section__sub { margin-block-start: 0; } .home-news__head .btn { flex: 0 0 auto; } /* .ph-img — the missing-photo placeholder — MOVED to components.css (2026-07-26). It was defined here, which was fine while the homepage was the only thing that used it. The interior pages' page-intro block uses it too, and a page carrying only that block never loads home.css — so the placeholder rendered with no fill at all: a correctly-sized but completely invisible box with a stray word floating in it. It is a shared utility, not a homepage layout rule, so it now lives in the sheet that is always loaded. */ /* =========================================================================== NEWS & EVENTS — heading row + horizontal card carousel --------------------------------------------------------------------------- Built against "Event / 25 /" in the Figma Home design. The cards are a horizontal carousel (arrows + dots); they are DYNAMIC in the real build (Events CPT / Posts, Frank-managed) — the copy here is the design's sample content, standing in as clear placeholder. =========================================================================== */ /* Background comes from the tone class emitted by ywa_section_tone() — see front-page.php. This section owns layout only. */ /* Sheet-music watermark behind this section is DEFERRED (design has it as an image fill on the section background). Base ships the flat canvas. */ /* --- carousel shell --- */ .home-news__carousel { position: relative; } .home-news__track { display: flex; gap: var(--space-800); /* MEASURED — 32px between cards */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* room so the card border/focus ring isn't clipped by the scroll box */ padding-block-end: var(--space-200); scrollbar-width: none; /* arrows + dots drive it; hide the bar */ } .home-news__track::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .home-news__track { scroll-behavior: auto; } } /* --- event card: carousel placement --- The card itself is a shared component in components.css — it is used by the homepage carousel AND by the News & Events grid. Only its PLACEMENT differs, so only the placement lives here. In the carousel each card is a fixed-width flex item that snaps; in the grid it fills its track. */ .home-news__track .event-card { flex: 0 0 auto; width: 24rem; /* MEASURED-ish — design card 405px */ scroll-snap-align: start; } /* --- controls row: dots left, arrows right (design SPACE_BETWEEN) --- */ .home-news__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1000); margin-block-start: var(--space-800); /* 32 — was 64; cards→controls tightened (Josh, too roomy) */ } .home-news__dots { display: flex; align-items: center; gap: var(--space-200); } .home-news__dots button { width: 8px; height: 8px; /* MEASURED */ padding: 0; border: 0; border-radius: var(--radius-full); background-color: var(--color-border-strong); cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard); } .home-news__dots button:hover { background-color: var(--color-text-subtle); } .home-news__dots button[aria-current="true"] { background-color: var(--color-text-strong); } /* Light-background carousel arrows (the hero arrows are for a dark photo; these sit on the light canvas) — 48px circle, ink outline + glyph. */ .home-news__arrows { display: flex; gap: var(--space-400); } .home-news__arrow { display: grid; place-items: center; width: 48px; height: 48px; /* MEASURED */ border-radius: var(--radius-full); background-color: var(--color-surface-raised); color: var(--color-text-default); border: 1px solid var(--color-border-strong); cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), border-color var(--motion-duration-fast) var(--motion-easing-standard); } .home-news__arrow:hover { background-color: var(--color-surface-sunken); border-color: var(--color-text-subtle); } .home-news__arrow:disabled { opacity: 0.4; cursor: not-allowed; } .home-news__arrow svg { width: 20px; height: 20px; } /* Link-style CTA — ink text + trailing chevron (Instagram, etc.). Shared. */ .link-cta { display: inline-flex; align-items: center; gap: var(--space-200); color: var(--color-text-strong); font-family: var(--type-family-sans); font-size: var(--type-size-action); font-weight: var(--type-weight-medium); text-decoration: none; } .link-cta:hover { text-decoration: underline; text-underline-offset: 0.3em; } .link-cta svg { width: 1.25em; height: 1.25em; } /* =========================================================================== MEET THE WHIFFS — full-bleed two-column: text left, group photo right --------------------------------------------------------------------------- Full-bleed by design (the photo runs to the right edge). The text column's left padding tracks the 1280 content column, so its content lines up with the other sections' left edge across widths. =========================================================================== */ .ywa-feature { /* THIS BLOCK'S OWN PROPORTIONS. The split-panel mechanism is shared with the page header — see the SPLIT PANEL header in components.css for what is shared, what is per-block, and which file to edit for which kind of change. Changing either value here moves Meet the Whiffs ONLY; the About / Donate / Contact headers are unaffected. */ --ywa-split-cap: 1728px; /* 16" MacBook Pro — the widest ordinary desktop. At 1280 the blurred gutter fill showed on any 1440 or 1680 laptop (73px and 193px of blur, measured). At 1728 it is gone below that, and the square photo grows with the panel — 713² at 1440, 833² at 1680, vs a flat 640² before. The trade is height: the section goes 640 → 864 at the cap. Judged on the real photo at four widths before committing (Josh, 07-28). */ --ywa-split-min-height: 30rem; /* background comes from the tone class (ywa_section_tone) */ } /* No photo chosen: there is nothing to blur, and blurring the striped placeholder would just smear it. The panel keeps its own background. */ /* The copy is CAPPED at half the content column and pinned to its inner edge, exactly as the split page header does (sections.css, `.page-intro--split .page-intro__text`). Without this the panel's 1728 cap wins and the copy runs outside the 1280 container — measured 120px left of every other section's text at a 1600 viewport, which is the only place on the front page where a heading broke the content column. Added 1.6.3; the header had the same bug, fixed in 1.6.1, and this block was simply missed. `(panel ÷ 2) − 640` is identically the container's offset at every width, which is why the cap plus `margin-inline-start: auto` lands the copy on the container edge without measuring anything. Do NOT reach for `100vw` — it counts the scrollbar, which `scrollbar-gutter: stable` reserves but excludes from layout width, so it misaligns by ~15px on Windows and looks perfect on a Mac. */ .ywa-feature__text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-800); /* 32 copy→actions */ padding-block: var(--space-2000); /* 80 */ padding-inline: var(--space-800) var(--space-1600); /* 32 gutter-align · 64 before photo */ max-width: 640px; /* half the 1280 content column */ margin-inline-start: auto; /* pinned to the photo side, so the outer edge falls on the container's edge */ } .ywa-feature__copy { display: flex; flex-direction: column; gap: var(--space-600); } /* 24 heading→body */ .ywa-feature__title { color: var(--color-text-strong); margin: 0; } .ywa-feature__body { color: var(--color-text-default); margin: 0; } .ywa-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-600); } /* 24 */ /* The real photo is a SQUARE pyramid group composition (720×720 in the design), so it's shown 1:1 — a landscape crop would decapitate the back row and cut the kneelers. On desktop it fills its half of the panel as a square; object-fit covers any residual gap without distorting. */ .ywa-feature__photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; } /* The no-photo placeholder occupies the same square, but it is a
rather than an , so it needs the centring that .ph-img provides and that the `display: block` above would otherwise cancel. */ .ywa-feature__photo.ph-img { display: grid; place-items: center; border-radius: 0; } /* =========================================================================== FROM THE ARCHIVES — dark full-bleed band, album art + raised light card --------------------------------------------------------------------------- Elevation trace: page canvas -> band surface.inverse (dark) -> the text card is surface.raised + elevation (that's what makes it read as floating). =========================================================================== */ .ywa-archives { /* background comes from the tone class (`section--inverse`). Josh prefers this shade over the Figma's near-black; the album edge is defined by a hairline (below) rather than by darkening the band. */ padding-block: var(--space-2000); /* 80 — standardized band rhythm (Josh, 2026-07-24) */ } .ywa-archives__grid { display: grid; grid-template-columns: 0.9fr 1fr; /* album a touch smaller than the card (matches design) */ /* Fluid gap: holds the design's 80px at the ~1280 reference width, eases down toward 40px as the band narrows, so the centre channel doesn't bloat on a smaller viewport. Both ends land on the 4px space scale; the middle is fluid. */ gap: clamp(var(--space-1000), 6.25vw, var(--space-2000)); /* 40 … [80 @ 1280] */ align-items: center; /* square album centres against the taller text card */ } .ywa-archives__grid > * { min-width: 0; } /* let the text column shrink, no page overflow */ /* Album cover: a WHOLE square, never cropped — the "Fun at Parties" art has its title typeset to the edges, so a cover-crop would slice the lettering. */ .ywa-archives__art { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; /* square-in-square: no actual crop, just safety */ border: 1px solid rgba(255, 255, 255, 0.14); /* hairline defines the square edge where the album's own dark corners meet the band */ border-radius: var(--radius-md); } /* No image chosen: the same square, as a placeholder. It needs .ph-img's centring back, which the `display: block` above would otherwise cancel. */ .ywa-archives__art.ph-img { display: grid; place-items: center; border-radius: var(--radius-md); } /* Single stacked column now (was a title|body 2-col split that made the body a narrow, hard-to-read column and left dead space). Full-width description reads properly; content is vertically centered so leftover height is balanced. */ .ywa-archives__card { display: flex; flex-direction: column; justify-content: center; gap: var(--space-600); /* 24 head → desc → button */ min-width: 0; padding: var(--space-1600); /* 64 */ background-color: var(--color-surface-raised); /* Reset the text colour inherited from the band. `.section--inverse` sets `color: text.inverse` on the whole section — correct for a dark band, wrong for this light card sitting inside it. Every current child sets its own colour so nothing is invisible today, but without this reset any text added later would inherit near-white and disappear on the white card. A light island inside an inverse section has to restate its foreground. */ color: var(--color-text-default); box-shadow: var(--elevation-raised); /* NOTE: design card carries a subtle paper texture + tint (deferred) */ } .ywa-archives__card-head { display: flex; flex-direction: column; gap: var(--space-300); } /* 12 eyebrow→title */ .ywa-archives__eyebrow { color: var(--color-text-default); margin: 0; } .ywa-archives__title { color: var(--color-text-strong); margin: 0; } .ywa-archives__desc { color: var(--color-text-default); margin: 0; } .ywa-archives__card .btn { align-self: flex-start; } /* =========================================================================== SUBSCRIBE TO THE WHIFF NOTE — sunken band cradling a raised centered card --------------------------------------------------------------------------- Elevation trace: page canvas -> band surface.sunken (the well) -> newsletter card surface.raised + elevation. Form is UI-only (no mail service yet). =========================================================================== */ .home-newsletter { /* background comes from the tone class (`section--sunken`) */ padding-block: var(--space-2000); /* 80 — standardized band rhythm */ } .home-newsletter__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-800); /* 32 copy→form */ padding: var(--space-1600); /* 64 */ background-color: var(--color-surface-raised); box-shadow: var(--elevation-raised); } .home-newsletter__copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-600); /* 24 heading→text */ max-width: 48rem; } .home-newsletter__title { color: var(--color-text-strong); margin: 0; } .home-newsletter__text { color: var(--color-text-default); margin: 0; } .home-newsletter__form-wrap { display: flex; flex-direction: column; gap: var(--space-400); width: 100%; max-width: 32rem; } /* 16 */ .home-newsletter__form { display: flex; gap: var(--space-400); } .home-newsletter__form .input { flex: 1; } .home-newsletter__disclaimer { color: var(--color-text-subdued); margin: 0; } /* mobile-only "View All" for News & Events — on desktop the button lives in the section head (top-right); on mobile the design moves it below the carousel. Hidden here, revealed in the ≤768 block below. */ .home-news__viewall-mobile { display: none; margin-block-start: var(--space-800); } /* =========================================================================== LUXE LAYER — paper tone + sheet-music watermarks --------------------------------------------------------------------------- Two decorative treatments carried over from the Figma Home design, plus the Both are ornament: every rule here degrades to "the page as it was" if an asset 404s. A reveal-on-scroll layer also lived here and was REMOVED 2026-07-26 — Josh found the effect cheesy. Don't reintroduce it without asking; the objection was to the effect itself, not to its timing or distance. SOURCE (live Figma r5LqBJj5Kzz3Feq1p1ivTh, read 2026-07-25). The design layers TWO image fills, not one: paper texture imageRef 7f748f57… scaleMode FILL opacity 0.50 sheet music imageRef 09bf2b25… scaleMode STRETCH opacity 0.08 They appear on THREE surfaces — News & Events (36:1841), the Meet the Whiffs TEXT half (36:1985, not the whole section), and the Newsletter card (36:2012, paper only). The sheet music is "Bright College Years". PLACEMENT is decoded from each fill's imageTransform matrix (the inverse affine Figma stores), converted to a top-left anchored rotation: News 884×541 @ (696,54) in a 1440×999 frame, −5° Meet the Whiffs 670×400 @ (−85,486) in the 720×720 text panel, +6° Percentages below are those numbers over their frame, so the placement holds as the section reflows. transform-origin is top-left to match the matrix. ASSET NOTE: the Figma sheet-music fill is black-on-WHITE and fully opaque. Exported here as ink-on-transparent (alpha = inverted luminance, scan noise floor removed) so it composites over the paper texture instead of washing it out, and so it compresses — 900px WebP, 71KB vs 635KB for the raw PNG. =========================================================================== */ /* Shared watermark mechanics. Both layers are pseudo-elements so no section needs extra markup, and both are inert to the pointer. */ .home-news { position: relative; overflow: hidden; /* the rotated sheet music bleeds past the edge — clip it, or it creates page-wide horizontal scroll */ } /* The Meet the Whiffs panel deliberately does NOT clip: its sheet music has to escape the 1280-capped text panel to bleed off the page edge. `.ywa-feature` already carries overflow:hidden, so the section still clips it — the bleed stops at the viewport, not at the panel. */ .ywa-feature__text { position: relative; } .home-news::after, .ywa-feature__text::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } /* --- layer 1: paper tone --- REMOVED 2026-07-26. News is now painted by the `subtle` token via the tone class, so the hand-tuned 50% wash that stood in for it is gone. The wash was a #F3F3F3 blend of two tokens — token-derived but off-ramp — and keeping it alongside the class would have double-darkened the section. If #EDEDED reads too heavy, retune `surface.subtle` rather than reintroducing a local wash. */ /* --- layer 2: sheet music (STRETCH + rotation, 8%) --- */ .home-news::after, .ywa-feature__text::after { background: url("../img/sheet-music.webp") center / contain no-repeat; aspect-ratio: 1852 / 1105; /* MEASURED — source artwork ratio */ opacity: 0.08; /* MEASURED — Figma fill opacity */ transform-origin: top left; } /* ANCHORING RULE (settled with Josh, 2026-07-25). Each watermark is anchored to the edge it BLEEDS OFF, and sized against the visual field it occupies — not against whichever box happens to contain it. Both halves matter. Anchor to the wrong edge and the graphic loses its own bottom as it scales, because these sections are height-constrained by their content while their width follows the viewport. Size against a capped box and the graphic shrinks relative to a field that keeps growing, so it reads as lost on a wide screen. Measured: the Figma crop shows 59% of the artwork; a top-anchored Meet the Whiffs falls to 39% at 1920, and a panel-sized one fills only 62% of its half against the design's 93%. */ /* News — top-anchored, bleeding off the RIGHT, scaling with the section. The width cap is the top-anchored failure mode above: an uncapped version grows taller than the 764px section past ~2100px and starts clipping its own bottom (measured 76% visible at 2560). 1200px is the widest the artwork can be before its height exceeds the space below the 48px top offset. */ .home-news::after { top: var(--space-1200); /* 48 ≈ the design's 54px top offset */ left: auto; right: -9.72%; /* MEASURED — 140 ÷ 1440 of bleed past the edge */ width: min(61.4%, 1200px); /* MEASURED — 884 ÷ 1440, capped to the section height */ transform: rotate(-5deg); /* MEASURED — from the fill matrix */ } /* Meet the Whiffs — bottom-anchored, bleeding off the LEFT. Sized at 46.5vw, i.e. 93% of the section's left half, which is the same proportion the design gives it inside its 720px half. That keeps the graphic reading at the same weight whatever the viewport, rather than shrinking against the 1280-capped panel. The negative left offset cancels the panel's centring gutter so the bleed is measured from the PAGE edge, not the panel's. Reproduces the Figma placement exactly at 1440 (670×400 at x −85). */ .ywa-feature__text::after { top: auto; bottom: -11.51vw; /* MEASURED — 166 ÷ 1440; holds the design's crop at every width */ left: calc(-1 * ((100vw - min(100vw, 1280px)) / 2) - 5.9vw); /* MEASURED — −85 ÷ 1440, from the page edge */ width: 46.5vw; /* MEASURED — 670 ÷ 1440 */ transform: rotate(6deg); /* MEASURED — from the fill matrix */ } /* Content sits above both decorative layers. */ .home-news > .container, .ywa-feature__copy, .ywa-feature__actions { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- SHEET MUSIC — OFF The watermark is the homepage's luxe pass, but this block can sit on any page, and it followed the block there: an About opener built from the Feature panel came out with sheet music drifting under its text, which reads as a bug rather than as decoration. Now opt-out. --------------------------------------------------------------------------- */ .ywa-feature--no-sheet-music .ywa-feature__text::after { content: none; } /* --------------------------------------------------------------------------- PHOTO ON THE LEFT The mirror of the default. Everything that has a side has to flip together. --------------------------------------------------------------------------- */ /* SCOPED TO THE TWO-COLUMN LAYOUT ONLY (≥769). Below that the panel is a single column with the photo forced on top by `order: -1`, and there is no second column to move anything into — an unscoped `grid-column: 2` would invent a phantom column and break the stack. The mobile watermark also sets its own `left`, which an unscoped flip would fight. */ @media (min-width: 769px) { /* 1. The columns. Source order stays text-then-photo — which is also the order it should be READ in, and the order it stacks in on a phone — so the swap uses explicit column placement rather than reordering the markup or using `direction`, both of which would drag the reading order along with the visual one. */ /* 2. The text column's padding. It is deliberately lopsided — a smaller gutter on the page-edge side, a bigger gap where it meets the photo — so it has to reverse, or the copy sits too close to the photo and too far from the edge. */ .ywa-feature--media-start .ywa-feature__text { padding-inline: var(--space-1600) var(--space-800); /* The copy is now the RIGHT-hand half, so the 640 cap has to pin to the other edge or it would hug the photo and leave a gap at the page edge. Mirrors `.ywa-split--media-start.page-intro--split .page-intro__text`. */ margin-inline-start: 0; margin-inline-end: auto; } /* 3. The blurred gutter fill, which dissolves the photo into the page past the 1280 cap. Anchored to the photo's outer edge, so with the photo on the left it runs off the LEFT. */ } /* 4. The watermark, if it is on. It bleeds off the edge the TEXT panel sits against, and the text panel has just moved — so the graphic is REPOSITIONED to the opposite edge and its tilt reverses. IT IS NOT MIRRORED, AND MUST NEVER BE. This is a scan of sheet music. Reversing it horizontally would put the clefs, note stems and the staves' reading direction backwards — obvious nonsense to anyone who reads music, which on this site is the client, the board, and most of the audience. There is deliberately no scaleX(-1) here. If you are "fixing" this flip later and it looks subtly unbalanced against the original: that is the cost of keeping the music readable, and it is the correct trade. Rotation is safe — tilted music is still music. Only reflection breaks it. One thing to LOOK at rather than assume: anchored to the right edge, a different 59% of the artwork is in frame than on the left. Still valid music, just a different passage of it. */ @media (min-width: 769px) { .ywa-feature--media-start .ywa-feature__text::after { left: auto; right: calc(-1 * ((100vw - min(100vw, 1280px)) / 2) - 5.9vw); transform: rotate(-6deg); transform-origin: top right; } } /* --------------------------------------------------------------------------- ARCHIVES — ALBUM ON THE RIGHT Not a symmetric flip: the columns are 0.9fr / 1fr, the album smaller than the card on purpose. The ratio reverses along with the placement. --------------------------------------------------------------------------- */ /* ≥1025 only — below that the grid is a single centred column, and placing items into a column 2 that does not exist would break the stack. */ @media (min-width: 1025px) { .ywa-archives--media-end .ywa-archives__grid { grid-template-columns: 1fr 0.9fr; } .ywa-archives--media-end .ywa-archives__card { grid-column: 1; grid-row: 1; } .ywa-archives--media-end .ywa-archives__art, .ywa-archives--media-end .ywa-archives__art.ph-img { grid-column: 2; grid-row: 1; } } /* =========================================================================== RESPONSIVE — tablet band (769–1024) --------------------------------------------------------------------------- Only FROM THE ARCHIVES stacks here: its text card drops under a readable measure in two columns below ~1024. Meet the Whiffs stays side-by-side down to 768 (Josh's call, 2026-07-24) — its square photo half keeps 2-col working, and he prefers it beside the text rather than stacked at tablet. 1024 matches the type scale, which swaps mobile→desktop sizes at ≥1024 (tokens.css). Cap matters: a stacked album at 900px would otherwise balloon to a ~840px full-width square, and a full-width card would run to an unreadable measure — so the album is size-capped + centred and the card measure is held. =========================================================================== */ @media (max-width: 1024px) { /* --- FROM THE ARCHIVES: stack, album capped + centred, card measure held --- */ .ywa-archives__grid { grid-template-columns: 1fr; gap: var(--space-1000); /* 40 between the stacked album + card */ justify-items: center; } .ywa-archives__art { width: min(22rem, 100%); } /* cap the square so it doesn't balloon */ .ywa-archives__card { max-width: 44rem; } /* hold the description measure on wide tablets */ } /* =========================================================================== RESPONSIVE — mobile / tablet-portrait (≤768) --------------------------------------------------------------------------- Built against the Figma mobile Home frames (the right-hand column of the Home design). The type scale is already mobile-first (tokens.css swaps the desktop sizes in at ≥1024), so this block is LAYOUT ONLY — stacking, reflow, and the mobile carousel/card treatment. 768 is the studio-wide stack point (layout.css grids, gutters and visibility utilities all pivot there). Section reflows, top to bottom: hero tighter vertical padding; actions may wrap news card shrinks to one-card-plus-peek; borders drop; "View All" moves from the head to below the carousel feature 2-col → 1-col, PHOTO ON TOP (design), text below archives 2-col → 1-col (album art already leads the DOM) newsletter input + button row → stacked, full-width button =========================================================================== */ @media (max-width: 768px) { /* shared: ease off the big desktop vertical rhythm */ .home-section { padding-block: var(--space-1600); } /* 80 → 64 */ /* --- HERO --- */ .home-hero__inner { padding-block: var(--space-1600) var(--space-1200); } /* 96/80 → 64/48 */ .home-hero__actions { flex-wrap: wrap; gap: var(--space-500); } /* wrap if two buttons can't sit side by side */ /* --- NEWS & EVENTS --- */ .home-news__head { flex-direction: column; align-items: flex-start; gap: var(--space-400); margin-block-end: var(--space-1000); /* 64 → 40 */ } .home-news__head > .btn { display: none; } /* hide the desktop top-right View All */ .home-news__viewall-mobile { display: inline-flex; } /* show the below-carousel one */ /* one card plus a peek of the next; card fills most of the viewport width. ONLY the width — the borderless mobile treatment is the card's own and now lives with the component in components.css, so the News & Events grid gets it too. */ .home-news__track .event-card { width: min(21rem, 82vw); } .home-news__track { gap: var(--space-500); } /* 32 → 20 between cards */ /* --- MEET THE WHIFFS: single column, photo on top (full-bleed) --- */ .ywa-split::after { display: none; } /* no gutter to fill once stacked */ /* Stacked, so the text panel is the FULL viewport rather than half of it. The watermark keeps the same "93% of its field" proportion, which means measuring against 100vw here instead of 50vw — otherwise it would render at half weight exactly where the section has the least going on. (769–1024 needs no override: the panel is still 2-col and under the 1280 cap, so half-viewport sizing is already correct there.) */ .ywa-feature__text::after { width: 93vw; /* MEASURED — 670 ÷ 720, against the full width */ left: -11.8vw; /* MEASURED — −85 ÷ 720 */ bottom: -23vw; /* MEASURED — 166 ÷ 720; same crop as desktop */ } .ywa-feature__text { padding-inline: var(--space-500); /* normal container gutter */ padding-block: var(--space-1600); gap: var(--space-600); } /* --- FROM THE ARCHIVES: single column (album art already leads the DOM) --- */ .ywa-archives { padding-block: var(--space-1600); } /* 64 — standardized band rhythm */ .ywa-archives__grid { grid-template-columns: 1fr; gap: var(--space-800); } /* 80 → 32 */ .ywa-archives__art { min-height: 16rem; } .ywa-archives__card { padding: var(--space-800); } /* 64 → 32 */ /* --- NEWSLETTER: input + button stack, button full width --- */ .home-newsletter { padding-block: var(--space-1600); } /* 64 — standardized band rhythm */ .home-newsletter__card { padding: var(--space-800); } /* 64 → 32 */ .home-newsletter__form { flex-direction: column; } .home-newsletter__form .btn { width: 100%; } }