/* strengthinthecity.com mockups: one stylesheet, one site (DESIGN.md). One header, one footer, one grid, one spacing rhythm, one type scale and one button shape on every page. City pages: White and Warm grey grounds, Black type, Red as the one accent. The Collective swaps only its ground (Cream, Sand), accent (Mocha) and headline face (serif). Colors come from tokens.css. */ /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--header-h) + 16px); } body { --ground: var(--white); --ground-2: var(--warm-grey); --ink: var(--black); --accent: var(--red); --accent-ink: var(--white); --accent-text: var(--red-text); --accent-hover: var(--red-text); --band: var(--black); --band-ink: var(--white); --rule: color-mix(in oklab, var(--black) 18%, transparent); --focus: var(--black); --fs-hero: clamp(2.5rem, 1rem + 3.9vw, 4rem); /* the inner-page hero size: 40 px phone, 64 px desktop */ --fs-mega: clamp(44px, calc((100vw - 96px) / 10.4), 116px); /* Mega: the one hero headline on a lifted page; "Where communities" fills the grid at 1280 */ --pad: max(var(--margin), var(--u4)); /* page margin: the grid margin, never under 32 px, so no headline sits closer to the screen edge */ --split-gap: var(--u8); /* words to photo: 64 px */ margin: 0; font-family: "Poppins", system-ui, sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--ground); text-rendering: optimizeLegibility; overflow-x: clip; } body.room-collective, .col-look { /* .col-look: a Collective piece on a City page wears the same tokens (round 13) */ --ground: var(--cream); --ground-2: var(--sand); --ink: var(--brown); --accent: var(--mocha); --accent-ink: var(--cream); --accent-text: var(--mocha); --accent-hover: var(--brown); --band: var(--brown); --band-ink: var(--cream); --rule: var(--taupe); --focus: var(--brown); } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } /* The browser's own sizes, said out loud: Webflow's base sheet sets its own (h2 32px, 5px under a label) and would win where we say nothing. */ h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1em; } h1, h2, h3, h4 { line-height: inherit; } label { margin-bottom: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } button { font: inherit; color: inherit; } a, button, summary { touch-action: manipulation; } input, select, textarea { font: inherit; font-size: 16px; } strong { font-weight: 600; } a { color: inherit; text-decoration-line: underline; text-decoration-thickness: var(--link-underline); text-underline-offset: var(--link-offset); } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: var(--link-underline-hover); } } :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--black); color: var(--white); padding: 12px 16px; font-weight: 600; } .skip-link:focus { top: 16px; outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); } /* ---------- Grid, grounds and the spacing rhythm ---------- Sections are 96 px apart (64 on a phone). Inside a section: 48 px from its heading to its content, 16 px between paragraphs, 64 px between words and a photo. */ .wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--pad)); margin-inline: auto; padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)); } .section { padding-block: var(--section-gap); } /* Three padding steps: 64 for lists and phones, 96 by default, 128 for a page's signature */ .section.loud { padding-block: var(--u16); } @media (max-width: 639px) { .section.loud { padding-block: var(--u12); } } .alt { background: var(--ground-2); } .dark { background: var(--band); color: var(--band-ink); --rule: color-mix(in oklab, var(--band-ink) 32%, transparent); --accent-text: var(--band-ink); --focus: var(--band-ink); } .stack > * + * { margin-top: var(--u2); } .measure { max-width: var(--measure); } .head { max-width: 46rem; } .head > * + * { margin-top: var(--u2); } .head { margin-bottom: var(--u6); } .head:last-child { margin-bottom: 0; } /* ---------- Type: one scale (tokens.css) ---------- */ .t-hero { font-weight: 800; font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; } .display { font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); } .h1 { font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-wrap: balance; } .h2 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .sub { font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .caption { font-weight: 500; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); } .label { font-weight: 600; font-size: var(--fs-caption); line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); } /* The lifted pages use three sizes boldly: Mega (the hero headline, once a page), Display (every section headline), Heading Two (names inside a section) */ .t-mega { font-weight: 800; font-size: var(--fs-mega); line-height: 0.95; letter-spacing: -0.035em; } .t-mega .ln { display: block; } .t-section { font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.025em; text-wrap: balance; } /* An arrow link: the words, then a drawn arrow that moves 4 px on hover (never a typed arrow) */ .more { font-weight: 600; display: inline-flex; align-items: center; gap: var(--u1); } .more::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-menu) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .more:hover::after, .tile:hover .more::after { transform: translateX(4px) rotate(45deg); } } /* A whole tile is one link: the tile's one link stretches over it, so photo, name and words all answer the pointer */ .tile { position: relative; } .tile .stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; } .tile .stretch:focus-visible::before { outline: var(--focus-width) solid var(--focus); outline-offset: 6px; } .tile figure, .tile .art { overflow: hidden; } .tile figure img, [data-reveal] img { transition: transform 700ms var(--ease-out), scale 1400ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tile:hover figure img { transform: scale(1.04); } .tile:hover .more { text-decoration-thickness: var(--link-underline-hover); } } /* ---------- Name lettering, the pin and the seal ---------- */ .lettering { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: var(--lettering-size); line-height: 1; letter-spacing: -0.01em; text-decoration: none; color: inherit; } .lettering .xb { font-weight: 800; } .lettering .rg { font-weight: 400; margin-left: var(--name-gap); } /* The heart pin (new drawing, Nov 11: brand/logo-2026-11, three colors) is the full stop of the name: half the capital height, on the baseline (tokens.css). Black pin on light grounds, White pin on dark; the heart is always Red. Never tilted, never recolored. */ .pin { display: inline-block; flex: none; width: calc(var(--pin-h) * 0.687); height: var(--pin-h); margin-left: var(--pin-gap); background: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b80cbe82572bf1191d8_sitc-icon-pin-for-light-backgrounds.svg") center / contain no-repeat; } .dark .pin { background-image: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be7cbe82572bf11c099_heart-pin-white.svg"); } .wordmark { font-size: var(--fs-display); line-height: 1; } .wordmark .lettering { font-size: inherit; letter-spacing: -0.02em; } .wordmark + .h1 { margin-top: var(--u2); } .words > .wordmark:has(+ .t-section) { font-size: var(--fs-h1); } /* a festival name over a Display headline steps down to a lockup */ .seal { width: 96px; height: 96px; } /* ---------- Buttons: one shape, 48 px tall. Filled = the page's one main action; outline = second ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding: 0 var(--btn-pad); font-weight: 600; font-size: var(--fs-body); line-height: 1; letter-spacing: var(--ls-button); text-decoration: none; white-space: nowrap; border: var(--btn-outline) solid transparent; border-radius: var(--radius-main); cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-outline { background: transparent; color: inherit; border-color: currentColor; } .dark .btn-primary, .col-hero .btn-primary { background: var(--band-ink); color: var(--band); } /* A primary on a Red band is White with Black words (Red on Red, or White on White, never shows) */ .band-red .btn-primary { background: var(--white); color: var(--black); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--accent-hover); } .band-red .btn-primary:hover { background: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .dark .btn-primary:hover, .col-hero .btn-primary:hover { background: var(--band-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .btn-outline:hover { background: color-mix(in oklab, currentColor 10%, transparent); } } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u2) var(--u3); } /* ---------- Draft notes: one quiet chip, one quiet line (draft only, never live) ---------- */ .tc { display: inline-block; padding: 2px 10px; border: 1px dashed color-mix(in oklab, currentColor 55%, transparent); font-weight: 500; font-size: var(--fs-caption); line-height: 1.5; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; } .off-line { margin-top: var(--u6); font-size: var(--fs-caption); line-height: 1.6; max-width: var(--measure); } .off-line .tc { margin-right: var(--u1); } /* ---------- Header: the same on every page ---------- */ /* The bar's own measures. Each room fills the same bar with its own links (build.py ROOMS), so the name size and the gap ease down together on a narrower screen and the longest menu still fits from 1024 px up. */ .site-header { --bar-gap: var(--u3); position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); background: var(--ground); color: var(--ink); border-bottom: 1px solid var(--rule); } .header-inner { height: 100%; display: flex; align-items: center; gap: var(--bar-gap); } .header-inner > .lettering { margin-right: auto; } @media (min-width: 1024px) { .header-inner > .lettering { font-size: clamp(24px, 2.2vw, 32px); } } .nav-list { display: flex; align-items: center; gap: var(--bar-gap); margin: 0; padding: 0; list-style: none; } .nav-list > li { position: relative; } .nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: var(--u1); min-height: 48px; padding: 0; background: none; border: 0; font-family: inherit; font-weight: 500; font-size: var(--fs-body); line-height: 1; color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; } .nav-link[aria-current="page"], .nav-link.is-current, .nav-trigger.is-current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--accent); } @media (hover: hover) and (pointer: fine) { .nav-link:hover, .nav-trigger:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } } .chev { width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-menu) var(--ease-out); } .nav-trigger[aria-expanded="true"] .chev, details[open] > summary .chev { transform: translateY(2px) rotate(-135deg); } /* The way back to the City home in the Collective bar: the brand pin alone, a 48 px target like every bar link, in the bar's own ink. In the phone sheet the pin sits beside the words. */ .nav-pin { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-inline: -8px; color: inherit; } .nav-pin .pin { --pin-h: 26px; margin: 0; } @media (hover: hover) and (pointer: fine) { .nav-pin:hover .pin { transform: translateY(-2px); } } .nav-pin .pin { transition: transform var(--dur-menu) var(--ease-out); } .sheet .sheet-pin { justify-content: flex-start; gap: var(--u1); } .sheet .sheet-pin .pin { --pin-h: 22px; margin: 0; } .header-btn { min-width: 160px; } .panel { position: absolute; top: calc(100% + (var(--header-h) - 48px) / 2); left: calc(var(--u3) * -1); min-width: 260px; padding: var(--u2) var(--u3); z-index: var(--z-menu); background: var(--ground); border: 1px solid var(--rule); border-top: 0; transform-origin: top left; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out), visibility 0s linear var(--dur-menu); } .panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out), visibility 0s; } .panel ul { list-style: none; margin: 0; padding: 0; } .panel a { display: flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; white-space: nowrap; } .panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); } .panel li.all { margin-top: var(--u1); padding-top: var(--u1); border-top: 1px solid var(--rule); } @media (hover: hover) and (pointer: fine) { .panel a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } } /* Phone and tablet: the links fold into one Menu button; the sheet is the same on every page */ .menu-btn { display: none; width: 64px; height: 48px; padding: 0; border: var(--btn-outline) solid currentColor; border-radius: var(--radius-main); background: transparent; font-weight: 600; font-size: var(--fs-caption); cursor: pointer; } .sheet { position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu); overflow-y: auto; overscroll-behavior: contain; padding: var(--u2) var(--pad) calc(var(--u12) + env(safe-area-inset-bottom, 0px)); background: var(--ground); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-sheet) var(--ease-out), transform var(--dur-sheet) var(--ease-out), visibility 0s linear var(--dur-sheet); } .sheet.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-sheet) var(--ease-out), transform var(--dur-sheet) var(--ease-out), visibility 0s; } .sheet ul { list-style: none; margin: 0; padding: 0; } .sheet > ul > li { border-bottom: 1px solid var(--rule); } .sheet a, .sheet summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-weight: 600; font-size: var(--fs-sub); text-decoration: none; cursor: pointer; } .sheet summary { list-style: none; } .sheet summary::-webkit-details-marker { display: none; } .sheet details ul { padding: 0 0 var(--u2) var(--u2); } .sheet details a { font-size: var(--fs-body); font-weight: 500; min-height: 44px; } body.menu-open { overflow: hidden; } .sheet-btn { margin-top: var(--u4); } .sheet-btn .btn { width: 100%; } @media (max-width: 1023px) { .nav { display: none; } .menu-btn { display: inline-grid; place-items: center; } .header-inner { gap: var(--u2); } } @media (min-width: 1024px) { .sheet { display: none; } } @media (max-width: 639px) { .header-btn { display: none; } } /* ---------- Words beside a photo: the one split, used by every hero and every photo section ---------- Two equal columns on the grid, 64 px apart, so words never sit against a photo and never run narrow. Below 960 px it stacks: words first, photo under them. */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); row-gap: var(--u6); align-items: center; } .split.flip > .photo, .split.flip > .art, .split.flip > .ph-wrap { order: -1; } .words > * + * { margin-top: var(--u2); } .words > .t-hero + *, .words > .h1 + * { margin-top: var(--u3); } .words > .btn-row { margin-top: var(--u4); } .words p, .words li { max-width: var(--measure); } /* A photo is shown whole, at its own shape, so no face is ever cropped. The few slots that do crop are listed under "Focal points" at the foot of this file, each with the point the crop holds on to. */ .photo img { width: 100%; height: auto; } @media (max-width: 959px) { .split { grid-template-columns: minmax(0, 1fr); } .split.flip > .photo, .split.flip > .art, .split.flip > .ph-wrap { order: 0; } } /* ---------- Hero: label, headline, one paragraph, one button; a photo beside it or nothing ---------- */ .hero { padding-block: var(--u8); overflow: clip; } .hero .lead { max-width: 34rem; } .hero.plain .words { max-width: 46rem; } @media (max-width: 639px) { .hero { padding-block: var(--u6) var(--u8); } } /* Home hero (stack): the headline at Mega across the grid in two lines, the lead and the button beside its short second line, then the photo edge to edge (21:9 from 1200 px, 16:9 from 640, 6:5 on a phone). Words never sit on it. */ .hero-stack { padding-block: var(--u6) 0; overflow: clip; } .hero-stack .hero-top { position: relative; } .hero-stack .hero-side { margin-top: var(--u4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--u3) var(--u4); } .hero-stack .lead { max-width: 30rem; } .hero-stack .hero-photo { margin-top: var(--u6); aspect-ratio: 6 / 5; overflow: hidden; background: var(--ground-2); } .hero-stack .hero-photo img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 640px) { .hero-stack .hero-photo { aspect-ratio: 16 / 9; } } @media (min-width: 1200px) { .hero-stack .hero-photo { aspect-ratio: 21 / 9; } } @media (min-width: 1280px) { /* "meet" is 2.58 Mega wide: the lead starts 64 px after it and sits on its baseline */ .hero-stack .hero-photo { margin-top: var(--u8); } /* 78 px or more from the headline's baseline to the photo */ .hero-stack .hero-side { position: absolute; left: calc(var(--pad) + var(--fs-mega) * 2.58 + var(--u8)); right: var(--pad); bottom: calc(var(--fs-mega) * 0.12); margin: 0; flex-wrap: nowrap; } } @media (max-width: 639px) { .hero-stack { padding-top: var(--u4); } .hero-stack .hero-side { margin-top: var(--u3); } .hero-stack .hero-photo { margin-top: var(--u4); } } /* Movement Tour hero (poster): the words on the left half, the paint collage filling the right half of the first screen and running off the right edge. The headline is Mega, held to the column ("Movement" is 5.4 em wide). */ .hero-poster { padding-block: var(--u6) var(--u8); overflow: clip; } .hero-poster > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .hero-poster .words { container-type: inline-size; } .hero-poster .t-mega { font-size: min(var(--fs-mega), 17.6cqi); } .hero-poster .words > .t-mega + * { margin-top: var(--u3); } .hero-poster .lead { max-width: 30rem; } .hero-poster .art { aspect-ratio: 5 / 4; } .hero-poster .art .print { inset: 8% 8% 13% 10%; padding: 12px; } .hero-poster .art .note { font-size: var(--fs-sub); max-width: 17rem; bottom: 4%; left: -2%; } @media (min-width: 1024px) { .hero-poster .art { aspect-ratio: 1; } .hero-poster { min-height: min(calc(100svh - var(--header-h)), 880px); display: grid; align-items: center; padding-block: var(--u6); } .hero-poster > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--u6); align-items: center; } } @media (max-width: 639px) { .hero-poster { padding-top: var(--u4); } .hero-poster .art { aspect-ratio: 1; } .hero-poster .art .note { font-size: var(--fs-caption); max-width: 11rem; } } /* ---------- Lists with rules ---------- */ .rows { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); } .rows > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--u4); row-gap: var(--u1); padding-block: var(--u3); border-top: 1px solid var(--rule); } .rows h3 { font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .rows .stack { max-width: var(--measure); } .rows.tight > li { padding-block: var(--u2); } .rows.tight h3 { font-size: var(--fs-body); line-height: var(--lh-body); } /* Dates: when, what, one link */ .rows.dates > li { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; } .when { font-weight: 800; font-size: var(--fs-sub); line-height: var(--lh-sub); } .when small { display: block; margin-top: 4px; font-weight: 600; font-size: var(--fs-caption); line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); } .when.soon { font-weight: 500; font-size: var(--fs-body); } @media (max-width: 767px) { .rows > li, .rows.dates > li { grid-template-columns: minmax(0, 1fr); } } /* Columns with a top rule (component 6): a number or a name, then one line. Three across from 1200 px. */ .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--u4); list-style: none; padding: 0; } .cols > li { padding-top: var(--u2); border-top: 2px solid var(--accent); } .dark .cols > li, .band-red .cols > li { border-top-color: currentColor; } .cols b { display: block; font-weight: 800; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: var(--ls-h1); } .cols h3 { font-weight: 800; font-size: var(--fs-sub); line-height: var(--lh-sub); } .cols li > * + * { margin-top: var(--u1); } .cols p, .cols span { display: block; max-width: 34rem; } .cols .price { margin-top: var(--u2); } .cols.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .cols.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } .cols + .cols, .cols + .dots, .dots + p { margin-top: var(--u6); } /* City names in three columns */ .cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--u4); list-style: none; padding: 0; } .cities li { padding-block: var(--u2); border-top: 1px solid var(--rule); } .cities b { display: block; font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .cities span, .cities a { display: block; font-size: var(--fs-caption); overflow-wrap: anywhere; } .cities + p { max-width: var(--measure); } @media (max-width: 767px) { .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--u3); } } @media (max-width: 479px) { .cities { grid-template-columns: minmax(0, 1fr); } } /* one column on a phone, so an account name never breaks mid-word */ .ticks { padding-left: 1.2em; } .ticks li + li { margin-top: var(--u1); } .ticks li::marker { color: var(--accent); } .dark .ticks li::marker { color: currentColor; } /* Dash list: a short Red rule before each line (drawn, never a typed dash) */ .dashes { list-style: none; padding: 0; } .dashes li { position: relative; padding-left: var(--u3); } .dashes li + li { margin-top: var(--u1); } .dashes li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 2px; background: var(--accent); } .dark .dashes li::before { background: currentColor; } .dashes.two { columns: 2 20rem; column-gap: var(--u4); } .dashes.two li { break-inside: avoid; padding-block: var(--u1); margin: 0; } /* A short list of links, three across */ .links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--u4); } .links li { border-top: 1px solid var(--rule); padding-block: var(--u3); } .links a { font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } } @media (max-width: 899px) { .links { grid-template-columns: minmax(0, 1fr); } } /* What follows a list inside a section: 32 px; a second list: 48 px */ .rows + p, .cols + p, .cities + p, .links + p, .series + p, .faq + p, .ev-list + p { margin-top: var(--u4); } .cols + .rows { margin-top: var(--u6); } .head.with-seal { display: flex; align-items: center; gap: var(--u4); max-width: none; } .head.with-seal > * + * { margin-top: 0; } .head.with-seal .seal { width: 120px; height: 120px; flex: none; } .head.with-seal .stack { max-width: 46rem; } @media (max-width: 639px) { .head.with-seal { flex-direction: column; align-items: flex-start; gap: var(--u3); } .head.with-seal .seal { width: 96px; height: 96px; } } /* Questions: native details */ .faq { max-width: 50rem; border-bottom: 1px solid var(--rule); } .faq details { border-top: 1px solid var(--rule); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--u3); min-height: 64px; padding-block: var(--u2); font-weight: 600; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq details > p { padding-bottom: var(--u3); max-width: var(--measure); } /* ---------- The Movement Tour print art: paint, one portrait, one note. Hero and one band only. ---------- A cutout shows only with its own city (.art.city is Chicago: skyline and L train). */ .art { position: relative; aspect-ratio: 4 / 3; } .art .paint { position: absolute; max-width: none; pointer-events: none; mix-blend-mode: multiply; } .art.bleed { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); } .art.bleed .paint { right: calc(var(--edge) * -1); top: 50%; width: calc((100% + var(--edge)) / 0.56); transform: translateY(-50%); } .art.door-art { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ground-2); } .art.door-art .paint { right: 0; top: 0; height: 100%; width: auto; } .art .print { position: absolute; inset: 9% 9% 12% 13%; background: var(--white); padding: 10px; box-shadow: var(--strngth-paper-shadow); transform: rotate(2.5deg); } .art .print img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); } .art .note { position: absolute; left: 0; bottom: 2%; max-width: 15rem; padding: var(--u2) var(--u3); background: var(--red); color: var(--white); font-weight: 800; font-size: var(--fs-body); line-height: 1.2; text-transform: uppercase; box-shadow: var(--strngth-paper-shadow); transform: rotate(-4deg); } .art.door-art .print { inset: 10% 12%; padding: 8px; transform: rotate(-2deg); } .art.city .skyline { position: absolute; left: 0; bottom: 12%; width: 100%; } .art.city .train { position: absolute; right: -3%; bottom: 0; width: 46%; } @media (max-width: 639px) { .art .note { max-width: 12rem; padding: 12px var(--u2); font-size: var(--fs-caption); } } /* ---------- Footer: three short columns and our name, the same on every page ---------- */ .site-footer { padding-block: var(--u8); } .footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--u8); align-items: start; } .footer-name > * + * { margin-top: var(--u2); } .footer-name > a { display: block; width: fit-content; } /* so its focus ring has a box to draw on */ .footer-name p { font-size: var(--fs-caption); line-height: 1.6; max-width: 30rem; } /* The name closes every page as wide as the grid: the lettering is 11.1 em wide, so 8.9 percent of the row fills it */ .footer-mark { container-type: inline-size; margin-top: var(--u12); } .footer-mark .lettering-foot { font-size: 8.9cqi; letter-spacing: -0.02em; } .footer-mark .lettering-foot:focus-visible { outline-offset: 8px; } @media (max-width: 639px) { .footer-mark { margin-top: var(--u8); } } .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u4); } .footer-cols ul { list-style: none; margin: var(--u2) 0 0; padding: 0; } .footer-cols a { display: block; width: fit-content; padding-block: 10px; line-height: 24px; text-decoration: none; } /* a fixed 24 px line and 10 px above and below: a one-line link is exactly 44 px, a two-line link 68, and every link sits 20 px from its neighbours (round 5: the old 44 px floor gave one-line links 2 px more air than two-line ones) */ @media (hover: hover) and (pointer: fine) { .footer-cols a:hover { text-decoration: underline; } } .footer-base { margin-top: var(--u6); padding-top: var(--u3); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--u1) var(--u4); font-size: var(--fs-caption); } @media (max-width: 899px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--u6); } } @media (max-width: 479px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= STRENGTH Collective: its own ground (Cream, Sand), accent (Mocha) and serif headlines. Header, footer, grid, split, spacing and button shape are the shared ones above. ========================================================= */ .col-caps { font-family: "Noto Serif Display", serif; font-weight: 300; font-stretch: 100%; text-transform: uppercase; letter-spacing: var(--ls-col-caps); line-height: var(--lh-col-caps); text-wrap: balance; } .col-long { font-family: "Noto Serif Display", serif; font-weight: 300; line-height: var(--lh-col-long); letter-spacing: -0.01em; } .col-num { font-family: "Noto Serif Display", serif; font-weight: 300; font-size: var(--fs-h1); line-height: 1; color: var(--mocha); } .col-script { font-family: "Cognito Scripto", cursive; font-weight: 400; text-transform: lowercase; line-height: 1; display: block; transform: rotate(-4deg); transform-origin: left center; color: var(--mocha); font-size: clamp(30px, 3.4vw, 48px); margin-top: var(--u1); } .rule { width: 64px; height: 2px; background: var(--mocha); border: 0; margin: var(--u3) 0 0; } .dark .col-script { color: var(--band-ink); } /* A Collective photo sits on a Sand block, 24 px down and out, inside its own column (never into the gap) */ .ph-wrap { position: relative; margin: 0 var(--collective-block-offset) var(--collective-block-offset) 0; } .ph-wrap::before { content: ""; position: absolute; inset: var(--collective-block-offset) calc(var(--collective-block-offset) * -1) calc(var(--collective-block-offset) * -1) var(--collective-block-offset); background: var(--sand); box-shadow: var(--collective-shadow); } .alt .ph-wrap::before { background: var(--cream); } .ph-wrap img { position: relative; width: 100%; height: auto; filter: saturate(.94) sepia(.06); } .series { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u6) var(--split-gap); } .series li { border-top: 1px solid var(--rule); padding-top: var(--u3); display: grid; gap: var(--u1); align-content: start; } .series a { text-decoration: none; color: inherit; } @media (hover: hover) and (pointer: fine) { .series a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } } .lockup-name { display: block; font-family: "Elsie", serif; font-weight: 900; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; } .series-more { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--u6); } .series-more a { font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (max-width: 639px) { .series, .series-more { grid-template-columns: minmax(0, 1fr); } } .two-certs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--u8) var(--split-gap); } .two-certs > section { border-top: 1px solid var(--rule); padding-top: var(--u3); } .two-certs > section > * + * { margin-top: var(--u2); } @media (max-width: 899px) { .two-certs { grid-template-columns: minmax(0, 1fr); } } /* ========================================================= Shared components (COMPONENTS.md). Each is built once here and reused. ========================================================= */ /* Red band: full width, Red ground, White words. Holds the city cards or one statement. */ .band-red { background: var(--red); color: var(--white); --rule: color-mix(in oklab, var(--white) 45%, transparent); --accent-text: var(--white); --focus: var(--white); --accent: var(--white); position: relative; overflow: hidden; } .band-red .pin { background-image: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be7cbe82572bf11c099_heart-pin-white.svg"); } .band-red .head, .band-red .head:last-child { margin-inline: auto; margin-bottom: var(--u6); text-align: center; } /* 1. City cards: the city reel of posters (round 10). One row of tall poster slots at 5:7, all one size, soft fades at both edges, no arrows. Each card is one link (its city's Instagram account). site.js makes the row drift left and loop; it keeps moving under the mouse, stops while a finger holds it, after a drag or wheel, and on keyboard focus. Reduced motion: it stands still and scrolls by hand. The row bleeds to both screen edges and its first card starts on the page margin. A city with no poster file yet shows a placeholder: its name set big on a city color. */ .city-reel { --card-w: clamp(240px, 21.3vw, 360px); --reel-ground: var(--band); position: relative; } .band-red .city-reel { --reel-ground: var(--red); } .city-reel::before, .city-reel::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(40px, 9vw, 144px); pointer-events: none; } .city-reel::before { left: 0; background: linear-gradient(90deg, var(--reel-ground), transparent); } .city-reel::after { right: 0; background: linear-gradient(270deg, var(--reel-ground), transparent); } ul.city-cards { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); display: flex; align-items: flex-start; gap: var(--u2); list-style: none; margin: 0; padding: 4px var(--edge) var(--u1); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--edge); } ul.city-cards::-webkit-scrollbar { display: none; } .city-reel.is-drifting ul.city-cards { scroll-snap-type: none; } /* snapping would fight the drift */ /* The drift: every card slides left by one set of cards, forever, on the browser's own thread (site.js sets --loop and --loop-dur) */ @keyframes reel-drift { to { transform: translate3d(calc(var(--loop, 0px) * -1), 0, 0); } } .city-reel.is-drifting ul.city-cards > li { animation: reel-drift var(--loop-dur, 60s) linear infinite; will-change: transform; } .city-reel.is-paused ul.city-cards > li { animation-play-state: paused; } .city-reel.is-dragging ul.city-cards { cursor: grabbing; user-select: none; } .city-card { flex: 0 0 auto; width: var(--card-w); scroll-snap-align: start; } .city-card a { display: block; container-type: inline-size; color: inherit; text-decoration: none; -webkit-user-drag: none; } /* the poster sizes from the card's width */ .city-card a:focus-visible { outline-offset: 4px; } .city-card .poster { position: relative; aspect-ratio: 5 / 7; overflow: hidden; background: var(--poster, var(--kraft)); color: var(--poster-ink, var(--black)); } .city-card .poster-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The placeholder: the seal at the top, the name set big at the foot, flush left, one word a line, its line under it */ .city-card .poster { display: flex; flex-direction: column; justify-content: flex-end; padding: 8cqi; } .city-card.has-poster .poster { padding: 0; } .city-card .city-seal { position: absolute; top: 8cqi; left: 8cqi; width: 22cqi; height: 22cqi; border-radius: 50%; } .city-card .poster b { display: block; font-weight: 800; text-transform: uppercase; font-size: calc(84cqi / (var(--fit) * 0.68)); line-height: 0.86; letter-spacing: -0.03em; } .city-card .poster b span { display: block; } .city-card .poster-line { display: block; margin-top: 5cqi; padding-top: 4cqi; border-top: 2px solid currentColor; font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-label); text-transform: uppercase; } @media (hover: hover) and (pointer: fine) { .city-card a:hover .poster-line { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } } /* On a page that already has its Red statement, the city row sits on Black, so Red is one band a page */ .city-band.dark { position: relative; overflow: hidden; } .city-band .head, .city-band .head:last-child { margin-inline: auto; margin-bottom: var(--u6); text-align: center; } .city-band .after { text-align: center; margin: var(--u4) auto 0; max-width: var(--measure); } /* 2. Statement band: the Red band, the engraved towers as art, one statement centered */ /* The claim (the words up to the colon) is Display; the rest of the sentence follows at Heading Two. 128 px of air. */ .statement { padding-block: var(--u16); } .statement .towers { position: absolute; pointer-events: none; max-width: none; } .statement .towers.l { left: 0; bottom: 0; width: min(24vw, 360px); } .statement .towers.r { right: 0; top: 0; width: min(24vw, 360px); } @media (min-width: 900px) { .statement .wrap { padding-inline: min(25vw, 380px); max-width: none; } } .statement p { position: relative; max-width: 14em; margin-inline: auto; text-align: center; font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.025em; text-wrap: balance; } .statement p .then { display: block; max-width: 24em; margin: var(--u3) auto 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: 0; font-weight: 600; } .statement p:has(.then) { max-width: none; } .statement p .claim { display: block; max-width: 14em; margin-inline: auto; } /* Phone: 128 px over the words; 176 under them, because the lower-left towers stand 132 px tall there and the last line must clear them */ @media (max-width: 899px) { .statement { padding-block: var(--u16) 176px; } .statement .towers.l { width: 150px; } .statement .towers.r { width: 170px; } } /* Home on a phone: the way in (.way-in) comes before the statement band, so the first scroll is a way in. Tab order still follows the eye: the band holds no links. Desktop keeps the page order. */ @media (max-width: 639px) { main:has(> .way-in) { display: flex; flex-direction: column; } main:has(> .way-in) > .hero { order: -2; } main > .way-in { order: -1; } } /* 3. Events list: a date block, the event's own picture, its name, place and one link */ .ev-list { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); } /* Rows read like a tour poster: the day at Display, a 128 px picture, the name at Heading Two, an arrow link; the whole row is the link */ .ev { display: grid; grid-template-columns: 112px 128px minmax(0, 1fr) auto; column-gap: var(--u6); align-items: center; padding-block: var(--u4); border-top: 1px solid var(--rule); } .ev-date { text-align: center; font-weight: 600; font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; } .ev-date b { display: block; font-weight: 800; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; text-transform: none; } .ev h3 { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color var(--dur-menu) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .ev.tile:hover h3 { text-decoration-color: currentColor; } } .ev-date b.span { font-size: var(--fs-body); line-height: 2; white-space: nowrap; letter-spacing: 0; } .ev-date .mo { color: var(--accent-text); display: block; } .ev-date.soon { text-transform: none; letter-spacing: 0; font-weight: 500; } .ev > img { width: 128px; height: 128px; object-fit: cover; } .ev h3 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .ev .kind { font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); } .ev-body > * + * { margin-top: 4px; } .ev-body p { max-width: var(--measure); } @media (max-width: 899px) { .ev { grid-template-columns: 96px minmax(0, 1fr); row-gap: var(--u6); } .ev > img { width: 96px; height: 96px; justify-self: start; } .ev-body { grid-column: 1 / -1; margin-top: calc(var(--u3) * -1); padding-top: var(--u3); } .ev > .more { grid-column: 1 / -1; margin-top: calc(var(--u4) * -1); } } /* 4. Ways-in grid: three columns of square pictures, a small Red label, a name, one line */ .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u6) var(--u4); list-style: none; padding: 0; } .way { display: grid; gap: var(--u6); align-content: start; } .way > figure, .way > .art { aspect-ratio: 1; } .way > figure img { width: 100%; height: 100%; object-fit: cover; } .way .stack > .label + * { margin-top: var(--u1); } .way h3 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .way dl { font-size: var(--fs-caption); line-height: var(--lh-caption); } .way dt { margin-top: var(--u2); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; } @media (max-width: 1199px) { .ways { grid-template-columns: minmax(0, 1fr); } .way { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--u6); align-items: center; } } @media (max-width: 639px) { .way { grid-template-columns: minmax(0, 1fr); } } /* Twist .ways.trio (Home): three equal doors on one Red rail. Round 3, see the "Round 3" block at the foot. */ /* 5. Split section extras: outlined tag chips, and the pull line with a Red rule (a quote under a photo, or "Ideal for") */ .chips { display: flex; flex-wrap: wrap; gap: var(--u1); list-style: none; padding: 0; } .chips li, .chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: var(--btn-outline) solid currentColor; font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; } .chips li:has(a) { border: 0; padding: 0; } .chips a { min-height: 44px; } .words > .chips { margin-top: var(--u3); } .pull { padding-left: var(--u2); border-left: 3px solid var(--accent); font-weight: 600; max-width: var(--measure); } .pull.big { font-weight: 800; font-size: var(--fs-sub); line-height: var(--lh-sub); } .pull cite { display: block; margin-top: var(--u1); font-style: normal; font-weight: 500; font-size: var(--fs-caption); } .dark .pull { border-left-color: currentColor; } .photo .pull, .photo + .pull, .pair + .pull { margin-top: var(--u6); } .words > .pull { margin-top: var(--u3); } .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--u3); align-items: start; } .dots { display: flex; flex-wrap: wrap; gap: var(--u1) var(--u3); list-style: none; padding: 0; font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .dots li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: var(--u3); vertical-align: middle; } .mission { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--accent-text); } /* Section head: label and headline left, intro right */ .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--u2) var(--split-gap); align-items: end; margin-bottom: var(--u6); } .sec-head > div > * + * { margin-top: var(--u2); } .sec-head > p { max-width: var(--measure); } @media (max-width: 959px) { .sec-head { grid-template-columns: minmax(0, 1fr); } } /* 7. Inner page: the photo hero with three numbered points, then split rows, then the inquiry band */ .photo-hero { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); overflow: clip; } .photo-hero .ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); } .photo-hero .words { padding-block: var(--u8); align-self: center; } .photo-hero .lead { max-width: 34rem; } .photo-hero figure { align-self: center; aspect-ratio: 3 / 2; margin: calc(var(--edge) / 3) calc(var(--edge) * -1) calc(var(--edge) / 3) 0; } /* the block margins give the row the height the wider, bleeding photo needs */ .photo-hero figure img { width: 100%; height: 100%; object-fit: cover; } .photo-hero.tall figure { aspect-ratio: 4 / 5; width: min(100%, 440px); justify-self: end; margin: var(--u6) 0 0; } .photo-hero .points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u2) var(--u4); list-style: none; margin: 0; padding: var(--u4) 0 var(--u4); counter-reset: pt; } .points li { counter-increment: pt; padding-top: var(--u2); border-top: 1px solid var(--rule); font-size: var(--fs-caption); line-height: var(--lh-caption); } .points b { display: block; font-weight: 800; font-size: var(--fs-body); line-height: var(--lh-body); } .points b::before { content: "0" counter(pt); margin-right: var(--u1); font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-label); } .points.note { display: block; font-size: var(--fs-caption); border-top: 1px solid var(--rule); } @media (max-width: 1023px) { .photo-hero .ph-grid { grid-template-columns: minmax(0, 1fr); } .photo-hero figure, .photo-hero.tall figure { order: -1; width: auto; justify-self: stretch; margin: 0 calc(var(--pad) * -1); } .photo-hero .points { padding-top: 0; grid-template-columns: minmax(0, 1fr); } .photo-hero.tall figure { aspect-ratio: 1; } .photo-hero .words { padding-block: var(--u6); } } .section-rows > .wrap > :is(.split, .sec-head, .cols) + :is(.split, .sec-head) { margin-top: var(--section-gap); } .section-rows > .wrap > .split + .cols { margin-top: var(--u8); } .section-rows > .wrap > .sec-head:last-child { margin-bottom: 0; } .inquiry .form-card { background: var(--white); color: var(--black); padding: var(--u4); display: grid; gap: var(--u2); --focus: var(--black); } .form-card label { display: grid; gap: 6px; font-weight: 600; font-size: var(--fs-caption); } .form-card input, .form-card textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid color-mix(in oklab, var(--black) 45%, transparent); border-radius: var(--radius-main); background: var(--warm-grey); color: var(--black); } .form-card textarea { min-height: 112px; resize: vertical; } /* The switched-off form button (buttons draft, part 3): no fill, a 2 px dashed outline in the text color, no hover or press */ .form-card .btn { justify-self: start; background: transparent; color: inherit; border: var(--btn-outline) dashed currentColor; opacity: 1; cursor: not-allowed; } .form-card .btn:active { transform: none; } .form-card small { font-size: var(--fs-caption); line-height: var(--lh-caption); } /* 8. Partner levels: cards with a colored top rule, a label, a name, the price in Red, a dash list */ .levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: var(--u4); list-style: none; padding: 0; } .levels + .levels, .levels + .cols { margin-top: var(--u4); } .level { padding: var(--u3); border: 1px solid var(--rule); border-top: 3px solid var(--black); background: var(--white); } .level.red { border-top-color: var(--red); } .level > * + * { margin-top: var(--u1); } .level h3 { font-weight: 800; font-size: var(--fs-sub); line-height: var(--lh-sub); } .price { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--red-text); } .level .dashes { margin-top: var(--u2); font-size: var(--fs-caption); line-height: var(--lh-caption); } .level .dashes li::before { top: 0.7em; } /* 9. Value builder (dark band) and numbered steps */ .builder { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--u6) var(--u4); align-items: start; } .builder .label { margin-bottom: var(--u2); } .builder .label:not(:first-child) { margin-top: var(--u4); } .opts { display: flex; flex-wrap: wrap; gap: var(--u1); } .opt { min-height: 48px; padding: 0 var(--u2); border: var(--btn-outline) solid currentColor; background: transparent; color: inherit; font-weight: 600; cursor: pointer; } .opt[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); } .picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: var(--u1); } .pick { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-content: start; text-align: left; min-height: 88px; padding: var(--u2); border: 1px solid var(--rule); background: transparent; color: inherit; font-size: var(--fs-caption); line-height: var(--lh-caption); cursor: pointer; } .pick::before { content: ""; width: 18px; height: 18px; border: 2px solid currentColor; grid-row: 1 / span 2; margin-top: 2px; } .pick b { font-weight: 600; font-size: var(--fs-body); line-height: 1.3; } .pick span { grid-column: 2; } .pick[aria-pressed="true"] { border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); } .pick[aria-pressed="true"]::before { background: var(--red); border-color: var(--white); box-shadow: inset 0 0 0 3px var(--black); } .estimate { background: var(--warm-grey); color: var(--black); padding: var(--u4); --rule: color-mix(in oklab, var(--black) 18%, transparent); --accent-text: var(--red-text); } .estimate .value { font-weight: 800; font-size: var(--fs-display); line-height: 1.05; letter-spacing: var(--ls-display); color: var(--red-text); margin-top: var(--u1); } .estimate .stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--u2); margin-block: var(--u3); list-style: none; padding: 0; font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; } .estimate .stats b { display: block; font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .estimate .lines > div { display: flex; justify-content: space-between; gap: var(--u2); padding-block: 6px; border-top: 1px solid var(--rule); font-size: var(--fs-caption); } .estimate .lines span:last-child { font-weight: 800; } .estimate small { display: block; margin-top: var(--u2); font-size: var(--fs-caption); line-height: var(--lh-caption); } @media (max-width: 1023px) { .builder { grid-template-columns: minmax(0, 1fr); } } .steps { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); } .steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--u2); padding-block: var(--u3); border-top: 1px solid var(--rule); } .steps .n { grid-row: 1 / span 2; font-weight: 800; font-size: var(--fs-h1); line-height: 1; color: var(--accent-text); } .steps h3 { font-weight: 800; font-size: var(--fs-sub); line-height: var(--lh-sub); } .steps p { max-width: var(--measure); } .big-words { font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); } /* ---------- Lifted sections (Home and the Movement Tour set the bar; see DESIGN-LIFT.md) ---------- */ /* Split with weight: .w7 gives the photo 7 of 12 columns, .w5 gives the words 5. A .bleed-l photo runs off the left edge. */ .split.w7 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split.w5 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split .bleed-l { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); margin-left: calc(var(--edge) * -1); overflow: hidden; } .split .bleed-l img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 959px) { .split.w7, .split.w5 { grid-template-columns: minmax(0, 1fr); } .split .bleed-l { margin-inline: calc(var(--pad) * -1); } .split .bleed-l + .words { margin-top: 8px; } /* the name mark overhangs its line: keeps 48 px under the photo */ } /* Big figures: numbers already in the copy, set at Heading One over a Red rule (component 6, its own column count) */ .cols.figs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--u3) var(--u4); } .cols.figs b { white-space: nowrap; } .words > .cols.figs { margin-top: var(--u4); } /* A head that holds while its list runs past (desktop): Seven stages */ .hold { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); align-items: start; } .hold > .head { position: sticky; top: calc(var(--header-h) + var(--u6)); margin-bottom: 0; } .hold > .head > .t-section + * { margin-top: var(--u3); } @media (max-width: 959px) { .hold { grid-template-columns: minmax(0, 1fr); } .hold > .head { position: static; margin-bottom: var(--u6); } } /* Big ruled list: a name at Heading Two, one line under it */ .rows.big > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--u1); padding-block: var(--u3); } .rows.big h3 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; } .rows.big p { max-width: 34rem; } .dark .rows.big p { color: color-mix(in oklab, var(--band-ink) 82%, var(--band)); } /* The date of a block, set big (the Chicago week) */ .date-big { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .words > .t-section + * { margin-top: var(--u3); } .words > .wordmark + .t-section { margin-top: var(--u2); } /* Questions beside their head */ .qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); align-items: start; } .qa > .head { margin-bottom: 0; } .qa > .head > .t-section + * { margin-top: var(--u3); } .qa .faq { max-width: none; } .qa .off-line { margin-top: var(--u4); } @media (max-width: 959px) { .qa { grid-template-columns: minmax(0, 1fr); } .qa > .head { margin-bottom: var(--u6); } } .faq summary { transition: color var(--dur-menu) var(--ease-out); } .faq summary .chev { margin-right: 4px; } @media (hover: hover) and (pointer: fine) { .faq summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } } .qa .faq summary { min-height: 80px; font-size: var(--fs-sub); line-height: var(--lh-sub); } /* Section heads on a lifted page: label (optional), Display headline, one line; 64 px to the content */ .head.big { max-width: 52rem; margin-bottom: var(--u8); } .head.big > .t-section + * { margin-top: var(--u3); } .head.row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--u2) var(--u6); max-width: none; } .head.row > * + * { margin-top: 0; } /* ---------- Motion: one load moment in the hero, one unmask for big photos as they scroll in ---------- Each runs once. Reduced motion: nothing moves (the rule below, and site.js adds no reveal). */ @keyframes rise { from { opacity: 0; transform: translateY(24px); } } @keyframes unmask { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-48px -48px -48px -48px); } } /* a named end: a mask cannot slide from an inset to none, it snaps */ @keyframes settle { from { scale: 1.08; } } @keyframes paint-in { from { opacity: 0; translate: 4% 0; } } @keyframes print-in { from { opacity: 0; transform: rotate(-3deg) translateY(16px); } } @keyframes note-in { from { opacity: 0; transform: rotate(-10deg) scale(0.9); } } @media (prefers-reduced-motion: no-preference) { .js .hero-stack .ln, .js .hero-stack .hero-side, .js .hero-poster .words > * { animation: rise 800ms var(--ease-out) both; } .js .hero-stack .ln:nth-child(2) { animation-delay: 90ms; } .js .hero-stack .hero-side { animation-delay: 220ms; } .js .hero-poster .words > :nth-child(2) { animation-delay: 70ms; } .js .hero-poster .words > :nth-child(3) { animation-delay: 140ms; } .js .hero-poster .words > :nth-child(n+4) { animation-delay: 210ms; } .js .hero-stack .hero-photo { animation: unmask 1100ms var(--ease-out) 120ms both; } .js .hero-stack .hero-photo img { animation: settle 1600ms var(--ease-out) 120ms both; } .js .hero-poster .paint { animation: paint-in 1100ms var(--ease-out) both; } .js .hero-poster .print { animation: print-in 900ms var(--ease-out) 250ms both; } .js .hero-poster .note { animation: note-in var(--dur-hero) var(--ease-out) 650ms both; } .reveal-on [data-reveal] { clip-path: inset(-48px -48px -48px -48px); transition: clip-path 1000ms var(--ease-out); } /* an inset (set wide so a block or shadow still shows), not none: a mask cannot slide from an inset to none, it snaps */ .reveal-on [data-reveal]:not(.in) { clip-path: inset(0 0 100% 0); } .reveal-on [data-reveal]:not(.in) img { scale: 1.08; } } /* Reduced motion: nothing moves */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation: none !important; } } /* ---------- Focal points: the only photos that are cropped, and the point each crop holds on to ---------- shoot.py checks every one at 390, 768, 1060, 1280 and 1440 px: no face cut, no words over a face. */ .art .print img[src$="fest-dance.webp"] { object-position: 48% 45%; } /* the dancer's face */ /* City cards, hero, square and thumbnail slots: one focal point each, so the faces stay inside the slot */ /* City cards show posters, not photos (the city reel, round 10), so they need no focal point. */ img[src$="cities/phoenix.webp"] { object-position: 50% 26%; } img[src$="cities/chicago.webp"] { object-position: 50% 15%; } .ev img[src$="spons-outdoor.webp"], .way img[src$="spons-outdoor.webp"] { object-position: 87% 50%; } .way img[src$="collective-room.webp"] { object-position: 60% 50%; } .ways.wide .way > figure { aspect-ratio: 3 / 2; } .hero-stack .hero-photo img[src$="home-hug.webp"] { object-position: 90% 40%; } /* the hug and the friend on the right; on a phone the crop keeps both */ /* Posters (Showdown, Classic): each file pads a 4:5 poster to a square with blurred side bars (10 percent each side). Every slot shows the poster alone at 4:5; a square slot gives it a Warm grey mat on both sides. */ .photo img[src$="sp/showdown.webp"], .photo img[src$="sp/classic.webp"] { aspect-ratio: 4 / 5; object-fit: cover; width: min(100%, 32rem); margin-inline: auto; } .way > figure img[src$="sp/showdown.webp"], .way > figure img[src$="sp/classic.webp"] { padding-inline: 10%; background: var(--ground-2); } .ev > img[src$="sp/showdown.webp"], .ev > img[src$="sp/classic.webp"] { padding-inline: 10%; background: var(--ground-2); } /* The lifted inner pages (DESIGN-LIFT.md, the other ten) */ .hero-stack .hero-photo img[src$="spons-letters.webp"] { object-position: 50% 30%; } /* the faces over the red letters */ .bleed-l img[src$="home-group.webp"] { object-position: 36% 50%; } /* the whole group: both ends stay in at 4:3 */ .bleed-r img[src$="spons-outdoor.webp"] { object-position: 87% 50%; } .hero-split .pic img[src$="cities/phoenix.webp"] { object-position: 50% 26%; } .ways.trio .art.door-art .print img[src$="spons-hill.webp"] { object-position: 60% 50%; } /* Home's lead door: every runner on the hill stays in */ .hero-split .pic img[src$="sp/fest-street.webp"] { object-position: 50% 22%; } /* a phone shows the whole banner name, the heart pin to CITY, and the coach's face */ /* Small helpers of the components above */ .rows.cal > li { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: baseline; } .rows.cal h3 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .dashes.ruled li { padding-block: var(--u2); border-top: 1px solid var(--rule); margin: 0; } .dashes.ruled li::before { top: calc(var(--u2) + 0.8em); } .cols.quotes { margin-top: var(--u8); } .cols.quotes > li { border-top: 0; padding-top: 0; } .words > .rows, .words > .cols, .words > .dashes, .words > .label:not(:first-child) { margin-top: var(--u3); } .split > .steps { align-self: start; } .pair img { width: 100%; height: auto; } @media (max-width: 767px) { .rows.cal > li { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1199px) { .words > .rows > li { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1024px) { .photo-hero.tall figure { width: 440px; height: 550px; aspect-ratio: auto; } } @media (max-width: 639px) { .steps li { grid-template-columns: minmax(0, 1fr); row-gap: var(--u1); } .steps .n { grid-row: auto; } } /* Art may bleed past its column, never past the screen: no sideways scroll at any width (found Nov 11 at 390: the lead door paint made the page 607 px wide) */ main { overflow-x: clip; } /* ========================================================= Lifted inner pages (DESIGN-LIFT.md, "The other ten"). Home and the Movement Tour set the bar; these pieces carry it to the inner pages. Each page picks one hero of three (stack, split, type) and one signature section. ========================================================= */ /* Inner hero, split: words on the left half (Mega fitted to the column: --em is the longest line in em), the photo filling the right half of the first screen and running off the right edge. Phone: words, then the photo edge to edge. Three numbered points may follow under a rule. Grounds: White, Warm grey (.alt) or Black (.dark). */ .hero-split { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); overflow: clip; } .hero-split .hs { display: grid; grid-template-columns: minmax(0, 1fr); } .hero-split .words { container-type: inline-size; padding-block: var(--u6) var(--u6); } .hero-split .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 6.4))); } .hero-split .words > .t-mega + * { margin-top: var(--u3); } .hero-split .lead { max-width: 30rem; } .hero-split .pic { margin-inline: calc(var(--pad) * -1); aspect-ratio: 6 / 5; overflow: hidden; background: var(--ground-2); } .hero-split .pic img { width: 100%; height: 100%; object-fit: cover; } .hero-split .points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u2) var(--u4); list-style: none; margin: 0; padding: var(--u6) 0 var(--u8); counter-reset: pt; } .hero-split .points li { font-size: var(--fs-body); line-height: var(--lh-body); } .hero-split .points b { font-size: var(--fs-sub); line-height: var(--lh-sub); margin-bottom: 4px; } @media (min-width: 1024px) { .hero-split .hs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--u8); min-height: min(calc(100svh - var(--header-h)), 820px); } .hero-split .words { align-self: center; padding-block: var(--u8); } .hero-split .pic { margin: 0 calc(var(--edge) * -1) 0 0; aspect-ratio: auto; min-height: 560px; } .hero-split:has(.points) .hs { min-height: min(calc(100svh - var(--header-h) - 96px), 760px); } } @media (max-width: 767px) { .hero-split .points { grid-template-columns: minmax(0, 1fr); padding-block: var(--u4) var(--u6); } } /* Twist: two posters in place of the photo (Showdown and Classic), each alone at 4:5, the second set lower */ .hero-split .posters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--u3); align-self: center; padding-block: 0 var(--u8); } .hero-split .posters figure:last-child { margin-top: var(--u12); } @media (min-width: 1024px) { .hero-split .posters { padding-block: var(--u8); margin-right: calc(var(--edge) * -0.5); } } /* A poster, alone at its own 4:5 (the file's blurred side bars stay outside the frame) */ .poster { overflow: hidden; background: var(--ground-2); } .poster img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; } /* Inner hero, type: no photo; the Mega headline is the art. On Red it is the page's one Red band (/events). */ .hero-type { padding-block: var(--u12) var(--u12); overflow: clip; } .hero-type .t-mega { max-width: 11em; } .hero-type .words > .t-mega + * { margin-top: var(--u4); } .hero-type .lead { max-width: 34rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .hero-type.band-red .label { color: var(--white); } @media (max-width: 639px) { .hero-type { padding-block: var(--u8); } } /* Hero stack on Black (Nights for a Cause): the same stack as Home, the drawing of the ring edge to edge under it */ .hero-stack.dark .hero-photo { background: var(--black); } .hero-stack .hero-side .btn-row { margin: 0; } /* A photo band: one photo edge to edge between two sections, counted as its own ground (21:9, 16:9, 4:3 on a phone) */ .photo-band { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground-2); } .photo-band img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 640px) { .photo-band { aspect-ratio: 16 / 9; } } @media (min-width: 1200px) { .photo-band { aspect-ratio: 21 / 9; } } /* A photo that runs off the right edge (the mirror of .bleed-l) */ .split .bleed-r { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); margin-right: calc(var(--edge) * -1); overflow: hidden; } .split .bleed-r img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .split .bleed-r.tall img { aspect-ratio: 4 / 5; } @media (max-width: 959px) { .split .bleed-r { margin-inline: calc(var(--pad) * -1); } } /* Big figures across the grid (a Red band's numbers): the figure at Mega, its line under it at Body */ .figs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--u6) var(--u4); list-style: none; padding: 0; } .figs-row > li { padding-top: var(--u2); border-top: 2px solid currentColor; } .figs-row b { display: block; font-weight: 800; font-size: clamp(56px, 7.4vw, 112px); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; } .figs-row small { display: block; margin-bottom: var(--u1); font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; } .figs-row span { display: block; margin-top: var(--u2); max-width: 22rem; } .figs-row + * { margin-top: var(--u8); } /* Section head with the text on the right, Display size (the lifted .sec-head) */ .sec-head .t-section { margin-top: var(--u2); } .sec-head > div > .label + .t-section { margin-top: var(--u2); } .sec-head.big { margin-bottom: var(--u8); } /* The inquiry band closes every inner page on Warm grey, so it never runs into the Black footer */ .inquiry.alt .form-card { box-shadow: none; } .inquiry .t-section + * { margin-top: var(--u3); } .band-red .head.left, .band-red .head.left:last-child { margin-inline: 0; text-align: left; } .figs-row .label { margin: 0 0 var(--u1); } .figs-row + .cols { margin-top: var(--u8); } .hero-split .points.note { display: block; padding: var(--u3) 0 var(--u6); max-width: none; } /* A stack hero that is not Home: the lead and button sit under the headline at every width, three points under the photo */ .hero-stack .hero-top > .label + .t-mega { margin-top: var(--u3); } @media (min-width: 1280px) { .hero-stack.flow .hero-side { position: static; margin-top: var(--u4); flex-wrap: wrap; } .hero-stack.flow .hero-photo { margin-top: var(--u6); } } .hero-stack .points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u2) var(--u4); list-style: none; margin: 0; padding: var(--u4) 0 var(--u8); counter-reset: pt; } .hero-stack .points li { font-size: var(--fs-body); line-height: var(--lh-body); } .hero-stack .points b { font-size: var(--fs-sub); line-height: var(--lh-sub); margin-bottom: 4px; } @media (max-width: 767px) { .hero-stack .points { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--u6); } } /* The cities at Heading Two, four across on a wide screen (Monthly Events, on Red) */ .cities.big b { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .cities.big li { padding-block: var(--u3); } @media (min-width: 1024px) { .cities.big { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .band-red .cities a { color: var(--white); } /* A section head that leads its section: the text column starts at the top, not the foot */ .sec-head.top { align-items: start; margin-bottom: 0; } .sec-head .stack > .dashes { margin-top: var(--u3); } .photo-band img[src$="spons-hill.webp"] { object-position: 50% 25%; } /* Split hero twist .w7: the words take 7 of 12 columns (a long headline holds at Mega), a tall photo the other 5 */ @media (min-width: 1024px) { .hero-split .hs.w7 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } /* Days or names in a figures row: Display, allowed to wrap */ .figs-row.days b { font-size: var(--fs-display); white-space: normal; letter-spacing: -0.03em; } .sec-head.top + .figs-row { margin-top: var(--u8); } .cols.named h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); } /* Points under a lifted hero: Caption in three columns from 1024 px, Body from 1200; one column below 1024 */ .hero-split .points li, .hero-stack .points li { font-size: var(--fs-caption); line-height: var(--lh-caption); } @media (min-width: 1200px) { .hero-split .points li, .hero-stack .points li { font-size: var(--fs-body); line-height: var(--lh-body); } } @media (max-width: 1023px) { .hero-split .points, .hero-stack .points { grid-template-columns: minmax(0, 1fr); } } .hero-split .points.note { padding-top: var(--u6); } /* A ruled list in a narrow words column (.w7 split) is always one column */ .split.w7 .words > .rows > li { grid-template-columns: minmax(0, 1fr); } /* A longer paragraph that carries a band's story (La Femme): Subhead size */ .lead-in { font-size: var(--fs-sub); line-height: var(--lh-sub); max-width: 36rem; } .split.w5 > .pair { gap: var(--u3); } /* One line of belief closing a band, at Heading Two under a White rule (About, What we do) */ .belief { margin-top: var(--u8); max-width: 40rem; } .band-red .pull { border-left-color: var(--white); } /* Growth row (About): four counts at one size over a rule, a Red bar under each as long as the count is of 14 (round 3) */ .grow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u6) var(--u4); list-style: none; padding: 0; margin-top: var(--u8); } .grow b { display: block; padding-bottom: var(--u3); font-weight: 800; font-size: var(--fs-mega); line-height: 0.9; letter-spacing: -0.04em; background: linear-gradient(var(--red), var(--red)) left bottom / calc(var(--n, 14) / 14 * 100%) 8px no-repeat; border-bottom: 1px solid var(--rule); } .grow span { display: block; margin-top: var(--u2); font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; } @media (max-width: 767px) { .grow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--u8); } } .grow + .after { margin-top: var(--u6); } /* The big group photo: on a phone the hero shows it whole (3:2), so both ends of the group stay in */ .hero-stack .hero-photo img[src$="home-group.webp"] { object-position: 50% 82%; } @media (max-width: 639px) { .hero-stack .hero-photo:has(img[src$="home-group.webp"]) { aspect-ratio: 3 / 2; } } .bleed-r img[src$="brooklyn-spin.webp"] { object-position: 50% 30%; } /* Fixes from the Nov 12 shoot: figure lines hold 36 characters at 1060 (two columns there); the split hero fits 1280 x 720 */ .figs-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } @media (min-width: 1024px) { .hero-split .words { padding-block: var(--u6); } .hero-split .words > .btn-row { margin-top: var(--u3); } } /* A short screen (1280 x 720): the split hero gives up air so the button stays on the first screen. */ @media (min-width: 1024px) and (max-height: 760px) { .hero-split .words { padding-block: var(--u3); } .hero-split .t-mega { font-size: min(calc(var(--fs-mega) * 0.82), calc(100cqi / var(--em, 6.4) * 0.82)); } } /* ========================================================= The last three (DESIGN-LIFT.md, "The last three"): the Collective pages wear the shared pieces in their own skin, Contact gets a short directory. Showdown posters keep their own 4:5 with no mat. ========================================================= */ /* Showdown and Classic hero: each poster alone at its own 4:5; the row no longer stretches the first frame, so no mat shows under it */ .hero-split .posters { align-items: start; } .hero-split .posters .poster { background: none; } /* Collective headlines at the lifted sizes: serif Light capitals at Mega (the hero) or Display (sections) */ .t-mega.col-caps { line-height: 1.04; } .t-section.col-caps { line-height: var(--lh-col-caps); } .hero-top.fit { container-type: inline-size; } .hero-top.fit .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 6.4))); } /* The hero's one script accent, tilted, under the last line of the headline with clear space: it never crosses a letter (look-collective.md, Depth). The tilt lifts its right end by about 7 percent of its width, so the space grows with it. */ .col-script.cross { position: relative; z-index: 1; width: max-content; max-width: 100%; margin-left: 1.1em; font-size: clamp(34px, 4.2vw, 64px); } .words > .t-mega + .col-script.cross, .hero-top > .t-mega + .col-script.cross { margin-top: 0.5em; } .col-script.cross + .rule { margin-top: var(--u3); } .dark .rule { background: currentColor; } .words > .col-num { font-size: var(--fs-display); } .words > .col-num + .label { margin-top: var(--u3); } .hero-top > .rule + .hero-side { margin-top: var(--u4); } /* Collective photos: warmed and softened a little, never more than 10 percent (look-collective.md, Photos) */ .room-collective :is(.hero-split .pic, .hero-photo, .photo-band, .arch, .shade-photo) img { filter: saturate(.94) sepia(.06); } .hero-split .pic img[src$="col-presenter.webp"] { object-position: 51% 0; } /* the presenter: her head stays in at any height */ .hero-stack .hero-photo img[src$="collective-room.webp"] { object-position: 50% 60%; } /* the whole room of pros, the ceiling out */ .photo-band img[src$="col-mat.webp"] { object-position: 50% 47%; } /* the lunge room: every face from the back row to the front */ @media (max-width: 639px) { .photo-band:has(img[src$="col-mat.webp"]) { aspect-ratio: 3 / 2; } } /* a phone shows it whole */ /* No paper grain on the Collective (round 11, Elliot: "the grain should not be on collective's part of the website"): its Cream grounds are flat. */ /* A Collective photo that runs off the page edge on its block: the photo whole at its own shape, the block 24 px down and toward the words, inside the photo's own column. .bleed-l runs off the left edge, .bleed-r off the right. */ .split > .ph-wrap.bleed-l, .split > .ph-wrap.bleed-r { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); } .split > .ph-wrap.bleed-l { margin: 0 var(--collective-block-offset) var(--collective-block-offset) calc(var(--edge) * -1); } .split > .ph-wrap.bleed-r { margin: 0 calc(var(--edge) * -1) var(--collective-block-offset) var(--collective-block-offset); } .split > .ph-wrap.bleed-r::before { inset: var(--collective-block-offset) var(--collective-block-offset) calc(var(--collective-block-offset) * -1) calc(var(--collective-block-offset) * -1); } @media (max-width: 959px) { .split > .ph-wrap.bleed-l { margin: 0 var(--collective-block-offset) var(--collective-block-offset) calc(var(--pad) * -1); } .split > .ph-wrap.bleed-r { margin: 0 calc(var(--pad) * -1) var(--collective-block-offset) var(--collective-block-offset); } } /* The arch: the Collective's one special frame, once on the site (the Collective page). The photo whole at its own shape with a round top, on an arch-shaped Sand block 24 px down and toward the words. Only the ceiling meets the curve. */ .arch { position: relative; margin: 0 var(--collective-block-offset) var(--collective-block-offset) 0; } .arch::before { content: ""; position: absolute; inset: var(--collective-block-offset) calc(var(--collective-block-offset) * -1) calc(var(--collective-block-offset) * -1) var(--collective-block-offset); border-radius: 999px 999px 0 0; background: var(--sand); box-shadow: var(--collective-shadow); } .arch img { position: relative; width: 100%; height: auto; border-radius: 999px 999px 0 0; } .split.w5 > .arch { max-width: 30rem; } /* Series as lockup rows: each name in its lockup lettering, one tone a row (Brown, then Mocha), its line under it; the whole row is the link */ .words > .series { margin-top: var(--u6); } .series.lockups { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--rule); } .series.lockups li { padding-block: var(--u3); gap: var(--u1); } .series.lockups li:nth-child(even) .lockup-name { color: var(--mocha); } .series.lockups .stretch:focus-visible::before { outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .series.lockups .tile:hover .lockup-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } } .words > .series-more { margin-top: var(--u4); } /* Two certifications under big numerals (Certifications, on Brown): the numerals at Mega in serif Light, Sand on Brown */ .two-certs.big { gap: var(--u8) var(--u8); } .two-certs.big .col-num { font-size: var(--fs-mega); line-height: 0.9; } .dark .col-num { color: var(--sand); } .two-certs.big .h2 { font-size: var(--fs-h2); } .two-certs + .off-line { margin-top: var(--u8); } /* Big ruled links (the lifted .links): one link a row at Heading Two, a drawn arrow at its end that moves 4 px on hover; the whole row is the link. .two sets two columns from 900 px (the Contact directory). */ .links.big { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); } .links.big li { padding: 0; } .links.big a { display: flex; align-items: center; justify-content: space-between; gap: var(--u3); min-height: 96px; padding-block: var(--u3); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); } .links.big a::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: var(--u1); border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 300ms var(--ease-out); } .links.big a .label { display: block; margin-bottom: var(--u1); } @media (hover: hover) and (pointer: fine) { .links.big a:hover::after { transform: translateX(4px) rotate(45deg); } } @media (min-width: 900px) { .links.big.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--u8); border-bottom: 0; } .links.big.two li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); } } .band-red .links a { color: var(--white); } .links.big + .off-line, .links.big + p { margin-top: var(--u4); } .qa > .head > p:has(.more) { margin-top: var(--u4); } /* Type hero with the lead beside it (Contact): the Mega headline left, the lead and the button on its baseline at the right */ .hero-type .ht { display: grid; gap: var(--u4); } .hero-type .ht > .words > .t-mega { margin-top: var(--u3); } @media (min-width: 1024px) { .hero-type .ht { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: end; } } /* A closing head, centered (the Collective's last word before the footer) */ .head.center { margin-inline: auto; text-align: center; } .head.center .btn-row { justify-content: center; margin-top: var(--u4); } /* The Collective's photo off the edge keeps its own shape and shows its block (the City .bleed-l/.bleed-r crop and clip do not apply) */ .split > .ph-wrap:is(.bleed-l, .bleed-r) { overflow: visible; } .split > .ph-wrap:is(.bleed-l, .bleed-r) img { aspect-ratio: auto; object-fit: fill; height: auto; } /* Workshops and The Exchange under the lockups: one column, so each line holds 36 characters */ .words > .series-more { grid-template-columns: minmax(0, 1fr); gap: var(--u3); } /* A Collective section head never runs past the screen: CERTIFICATIONS (8.9 em in serif capitals) sets the floor on a phone */ .t-section.col-caps { font-size: min(var(--fs-display), calc((100vw - 2 * var(--pad)) / 9.1)); } /* ========================================================= Round 3 (2026-11-13): the City look gets its own pieces on Home, All Events, About and Retreats. See DESIGN-LIFT.md, "Round 3". Colors by name only; no new color. ========================================================= */ /* Hero leads at Subhead size: an 18 px line beside a 116 px headline read as a footnote */ .hero .lead, .hero-split .lead { font-size: var(--fs-sub); line-height: 1.4; } /* Home hero lockup (from 1280 px): "meet", a 3 px Red track line, the button, all on the second line's x-height; the lead under the headline across 46 rem. The line runs from 32 px after "meet" (2.58 Mega wide) to 32 px before the button. */ @media (min-width: 1280px) { .hero-stack.lockup .hero-top { --btn-w: 12rem; } .hero-stack.lockup .hero-side { position: static; display: block; margin-top: var(--u4); } .hero-stack.lockup .lead { max-width: 46rem; } .hero-stack.lockup .hero-side .btn { position: absolute; right: var(--pad); top: calc(var(--fs-mega) * 1.5 - 24px); width: var(--btn-w); justify-content: center; } .hero-stack.lockup .hero-top::after { content: ""; position: absolute; left: calc(var(--pad) + var(--fs-mega) * 2.58 + var(--u4)); right: calc(var(--pad) + var(--btn-w) + var(--u4)); top: calc(var(--fs-mega) * 1.5 - 1.5px); height: 3px; background: var(--red); } } /* Home doors (.ways.trio): three equal doors on one Red rail. The rail runs behind the lower half of every picture and 24 px under it, edge to edge on a wide screen; the guest door keeps its paint and print (Movement Tour), the other two are photos. Phone: each door its own picture on its own stretch of rail. */ .ways.trio { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); grid-template-columns: minmax(0, 1fr); gap: var(--u12); } .ways.trio > .way { isolation: isolate; grid-template-columns: minmax(0, 1fr); gap: var(--u8); align-items: start; } .ways.trio .pic { position: relative; } .ways.trio .pic::before { content: ""; position: absolute; z-index: -1; top: 50%; bottom: calc(var(--u3) * -1); left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); background: var(--red); } .ways.trio .pic > figure, .ways.trio .pic > .art { aspect-ratio: 3 / 2; } .ways.trio .pic > figure img { width: 100%; height: 100%; object-fit: cover; } .ways.trio .art.door-art { background: var(--white); } .ways.trio .art.door-art .print { inset: 12% 20% 14%; padding: 10px; transition: transform 700ms var(--ease-out); } .ways.trio .stack p:not(.label) { max-width: 30rem; } @media (hover: hover) and (pointer: fine) { .ways.trio .tile:hover .art .print { transform: rotate(-0.5deg) translateY(-4px); } } @media (min-width: 640px) and (max-width: 1099px) { .ways.trio > .way { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u6); align-items: center; } .ways.trio .pic::before { left: calc(var(--edge) * -1); right: calc(var(--u3) * -1); } } @media (min-width: 1100px) { .ways.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u4); } .ways.trio .pic > figure, .ways.trio .pic > .art { aspect-ratio: 1; } .ways.trio .pic::before { left: calc(var(--u4) / -2); right: calc(var(--u4) / -2); } .ways.trio > .way:first-child .pic::before { left: calc(var(--edge) * -1); } .ways.trio > .way:last-child .pic::before { right: calc(var(--edge) * -1); } .ways.trio .art.door-art .print { inset: 20% 17% 22%; } } /* Events list as a season program (All Events and Home "Next dates"): the date in its own column, a 200 px picture (240 from 1200 px), the words at the top of the row, the arrow link at its foot. The date column is one system (round 4), three places that never move: 1. the month, or "Date to come", as a Red label; 2. the day slot, as tall as a day at Mega: a day fills it at Mega, a range of days fills it in two lines, a day not set yet is a drawn blank (a 3 px Red track line on the slot's baseline, two digits wide); 3. the weekday and the year as a caption. */ .ev-date { --day: var(--fs-mega); --slot: calc(var(--day) * 0.9); text-align: left; } .ev-date .mo, .ev-date.soon { display: block; font-weight: 600; font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); } .ev-date b, .ev-date b.span { display: flex; align-items: flex-end; height: var(--slot); margin-block: var(--u1); font-weight: 800; font-size: var(--day); line-height: 0.9; letter-spacing: -0.045em; white-space: normal; text-transform: none; } .ev-date b.span { font-size: calc(var(--day) * 0.47); line-height: 0.92; letter-spacing: -0.03em; max-width: 2.2em; padding-bottom: calc(var(--day) * 0.046); } /* Round 5: the blank day is the site's "to come" mark at day size, a 2 px dashed box two digits wide and a capital high, standing on the day's baseline (a bare 3 px line read as a stray rule). It fills the same slot, so nothing moves. */ .ev-date:not(:has(b)) .mo::after, .ev-date.soon::after { content: ""; display: block; width: calc(var(--day) * 1.14); height: calc(var(--day) * 0.72); margin-block: calc(var(--u1) + var(--slot) - var(--day) * 0.82) calc(var(--u1) + var(--day) * 0.1); border: 2px dashed var(--accent); } @media (min-width: 900px) { .ev { grid-template-columns: 168px 200px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "date pic body" "date pic more"; row-gap: var(--u3); align-items: start; padding-block: var(--u6); } .ev-date { grid-area: date; } .ev > img { grid-area: pic; width: 200px; height: 200px; } .ev-body { grid-area: body; } .ev > .more { grid-area: more; align-self: end; justify-self: start; } } @media (min-width: 1200px) { .ev { grid-template-columns: 184px 240px minmax(0, 1fr); } .ev > img { width: 240px; height: 240px; } } @media (max-width: 899px) { /* Phone: the date block and the picture share their top edge; a full date (label, an 80 px day, weekday and year) is as tall as the 144 px picture, so no gap opens above or beside it. The words run under both. */ .ev { grid-template-columns: minmax(0, 1fr) 144px; grid-template-areas: "date pic" "body body" "more more"; column-gap: var(--u6); row-gap: var(--u6); padding-block: var(--u4) var(--u6); } .ev-date { --day: max(var(--fs-mega), 80px); grid-area: date; align-self: start; } .ev > img { grid-area: pic; width: 144px; height: 144px; justify-self: end; } .ev-body { grid-area: body; margin-top: 0; padding-top: 0; } .ev > .more { grid-area: more; margin-top: calc(var(--u2) * -1); } } /* All Events: the engraved towers stand in the Red type hero, lower right, turned to lean into the page; the words keep the left. Under 1024 px they shrink to the corner and the band grows under the words so nothing touches. */ .hero-type .towers { position: absolute; right: 0; bottom: 0; width: min(36vw, 520px); max-width: none; transform: scaleX(-1); pointer-events: none; } .hero-type .words { position: relative; } @media (max-width: 1023px) { .hero-type:has(.towers) { padding-bottom: 192px; } .hero-type .towers { width: 180px; } } /* About, What we do: head on the left (5 of 12), the three sentences on the right as ruled rows, each opening with its subject at Heading One; the belief closes the band across the grid at Heading One. */ .cols.runin { grid-template-columns: minmax(0, 1fr); gap: 0; } .cols.runin > li { padding-block: var(--u4); border-top: 2px solid currentColor; } .cols.runin p { max-width: 40rem; font-size: var(--fs-sub); line-height: 1.4; } .cols.runin .subj { display: block; margin-bottom: var(--u1); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .runin-wrap > .belief { margin-top: var(--u8); max-width: 26em; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } @media (min-width: 1024px) { .runin-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); align-items: start; } .runin-wrap > .head, .runin-wrap > .head:last-child { margin-bottom: 0; } .runin-wrap > .belief { grid-column: 1 / -1; margin-top: var(--u12); } } /* About, growth: one park to fourteen cities, the counts at Mega (see .grow above) */ @media (max-width: 767px) { .grow b { font-size: max(var(--fs-mega), 72px); } } /* Retreats, More weekends away: the City rings (art.py, rings) fill the left of the section, running off the left screen edge and down to the Black band below; the two weekends sit on the right as ruled rows, names at Heading One. Phone: the weekends first, the rings close the section in its lower left corner. */ .away { display: grid; grid-template-columns: minmax(0, 1fr); } .away-list { grid-template-columns: minmax(0, 1fr); gap: var(--u8); } .cols.named.away-list h3 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .away-list li > h3 + * { margin-top: var(--u2); } .away-art { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); order: 2; position: relative; height: 200px; margin: var(--u6) 0 calc(var(--section-gap) * -1) calc(var(--pad) * -1); } .away-art .rings { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; max-width: none; } @media (min-width: 1024px) { .away { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); } .away-art { order: 0; height: auto; min-height: 320px; margin: 0 0 calc(var(--section-gap) * -1) calc(var(--edge) * -1); } } /* A dashed chip in a ruled column keeps its own width (it stretched to the column before) */ .cols span.tc { display: inline-block; } /* A stack hero with its lead beside the button (About, Monthly Events, Nights for a Cause): 3 lines at Subhead, not 4 */ .hero-stack.flow .lead { max-width: 40rem; } @media (max-width: 639px) { .runin-wrap > .belief { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: 0; } } /* A split hero with points under it (Sponsorship, Showdown and Classic) keeps its lead at Body, so the button stays inside a 1280 x 720 first screen */ .hero-split:has(.points) .lead { font-size: var(--fs-body); line-height: var(--lh-body); } /* ========================================================= Round 4 (2026-11-13): Movement Tour, Monthly Events, Showdown and Classic, Nights for a Cause. See DESIGN-LIFT.md, "Round 4". Colors by name only; no new color. ========================================================= */ /* Movement Tour, the festival day: the two counts leave the words column and run under the split at Mega, each over a 2 px rule: "500 to 1,000" under the photo (7 of 12), "100+" under the words (5); the welcome line under "100+". Under 1024 px one count a row, at least 56 px. */ .split + .figs-row.fest { margin-top: var(--u12); } .figs-row.fest b { font-size: max(var(--fs-mega), 56px); line-height: 0.95; letter-spacing: -0.04em; } .figs-row.fest span { font-size: var(--fs-sub); line-height: var(--lh-sub); max-width: 24rem; } .fest-after { margin-top: var(--u6); max-width: var(--measure); font-weight: 600; } @media (min-width: 1024px) { .figs-row.fest { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--split-gap); } .figs-row.fest + .fest-after { margin-top: var(--u4); margin-left: calc((100% - var(--split-gap)) * 7 / 12 + var(--split-gap)); } } @media (max-width: 1023px) { .figs-row.fest { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 639px) { .split + .figs-row.fest { margin-top: var(--u8); } } /* Movement Tour, seven stages: a festival lineup. Each stage name at Display, its one line under it; the head holds. */ .rows.big.lineup h3 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; } .rows.big.lineup > li { row-gap: var(--u1); padding-block: var(--u4); } /* Movement Tour, the Chicago week: the date at Heading One, so it reads as the block's second line, not a caption */ .date-big { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } /* Monthly Events, something different each time: the two kinds side by side on one Red rail, the page's one collage piece (after Home's doors). Each picture 4:3; the rail runs behind its lower half and 24 px under it, off both screen edges; the words 64 px under the picture. Under 900 px one column, each picture on its own stretch of rail. */ .kinds { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u12); } .kind { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--u8); isolation: isolate; } .kind > .pic { order: -1; position: relative; } .kind > .pic::before { content: ""; position: absolute; z-index: -1; top: 50%; bottom: calc(var(--u3) * -1); left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); background: var(--red); } .kind > .pic figure { aspect-ratio: 4 / 3; overflow: hidden; } .kind > .pic img { width: 100%; height: 100%; object-fit: cover; } .kind .pic img[src$="home-group.webp"] { object-position: 36% 50%; } .kind .words > .label + * { margin-top: var(--u1); } .kind .words > p { max-width: 34rem; } @media (min-width: 900px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u4); } .kind > .pic::before { left: calc(var(--u4) / -2); right: calc(var(--u4) / -2); } .kind:first-child > .pic::before { left: calc(var(--edge) * -1); } .kind:last-child > .pic::before { right: calc(var(--edge) * -1); } } @media (max-width: 639px) { .kind { gap: var(--u6); } .kinds { gap: var(--u8); } } /* Monthly Events, find your city: the twelve names at Heading One from 1024 px */ @media (min-width: 1024px) { .cities.big b { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } } /* Showdown and Classic, STRENGTH Showdown: the City track (art.py, track; four lanes for teams of four) fills the head's column under the name, its center on the lower left corner, on the screen edge and on the Red band below, so every line ends on an edge. From 960 px: the left half, at least 320 px tall, off the left screen edge; the words stay on the right half. Under 960 px: 200 px tall, in the lower left corner under the words. */ .sec-head.track { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); } .track-art { position: relative; height: 200px; margin: var(--u6) 0 calc(var(--section-gap) * -1) calc(var(--pad) * -1); pointer-events: none; } .track-art img { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; max-width: none; } @media (min-width: 960px) { .sec-head.track { grid-template-rows: auto minmax(0, 1fr); } .sec-head.track > .stack { grid-column: 2; grid-row: 1 / span 2; } .sec-head.track > .track-art { grid-column: 1; grid-row: 2; align-self: stretch; height: auto; min-height: 320px; margin-left: calc(var(--edge) * -1); } } .sec-head .stack > .lead-in { max-width: 36rem; } /* Nights for a Cause: the Rebels look inside the shared frame (look-rebels.md: dark on darker, near black and white photos, Red for action). The hero, the Rebels night and the questions sit on Black; La Femme keeps the Red band. Its one device: the ticker strip, the hero's three short lines as one strip under the ring, between a 3 px Red rope line above and below, edge to edge. Under 1024 px the three lines stack, a rule between them. */ .ticker { border-block: 3px solid var(--red); } .hero-stack .ticker .points { padding-block: var(--u6); gap: var(--u3) var(--u4); } .ticker .points li { padding: 0; border: 0; } .ticker .points b { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-label); text-transform: uppercase; } .ticker .points b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--u2); background: var(--red); vertical-align: 0.05em; } @media (min-width: 1024px) { .ticker .points li + li { padding-left: var(--u4); border-left: 1px solid var(--rule); } } @media (max-width: 1023px) { .ticker .points li + li { padding-top: var(--u3); border-top: 1px solid var(--rule); } } .rebels .pair img { filter: grayscale(0.9) contrast(1.06); } .rebels .pair img:last-child { margin-top: var(--u6); } @media (min-width: 960px) { .rebels .pair img:last-child { margin-top: var(--u12); } .rebels .split { align-items: start; } .rebels .words { padding-top: var(--u12); } } /* ========================================================= Round 5 (2026-11-13): Sponsorship, STRENGTH Collective, Certifications, Contact, and three leftovers (Showdown hero and Classic art, the blank day, the footer rhythm). See DESIGN-LIFT.md, "Round 5". Colors by name only; no new color. ========================================================= */ /* Sponsorship, who we are: the four parts of the one house leave the words column and run under the split two by two (four across left lines under 36 characters), each name at Heading Two over a 2 px rule; the mission closes the section at Heading One beside the "coming next" line. Phone one a row. The five worlds: three across from 1200 px. */ .rows:is(.house, .worlds) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--u4); margin-top: var(--u12); border-bottom: 0; } .rows:is(.house, .worlds) > li { display: block; padding-block: var(--u3) var(--u4); border-top: 2px solid currentColor; } .rows.worlds > li { border-top-color: var(--accent); } .rows:is(.house, .worlds) h3 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .rows:is(.house, .worlds) h3 + p { margin-top: var(--u2); } .house-after { display: grid; gap: var(--u4); margin-top: var(--u8); } .house-after .mission { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-width: 22em; } @media (min-width: 640px) { .rows:is(.house, .worlds) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .house-after { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); align-items: end; } } @media (min-width: 1200px) { .rows.worlds { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 639px) { .rows:is(.house, .worlds) { margin-top: var(--u8); } } /* Sponsorship, the Movement Tour: the page's one Red band carries its one brand device, the engraved towers, lower right and turned to lean in (the All Events piece). The growth row (About's piece, White bars on Red) runs across the grid; the three counts and the cities keep the left 8 of 12 columns, so no word meets a tower. Under 1024 px the towers are 180 px in the corner and the band runs 224 px under the cities. */ .tour-band .towers { position: absolute; right: 0; bottom: 0; width: min(26vw, 380px); max-width: none; transform: scaleX(-1); pointer-events: none; } .tour-band > .wrap { position: relative; } .band-red .grow b { background-image: linear-gradient(var(--white), var(--white)); } .grow .label { margin: 0 0 var(--u1); } .tour-band .grow { margin-top: 0; } .tour-low { margin-top: var(--u12); } .tour-low .cols + .dots { margin-top: var(--u8); } @media (min-width: 1024px) { .tour-low .dots { max-width: calc((100% - var(--gutter) * 11) * 8 / 12 + var(--gutter) * 7); } } @media (min-width: 1200px) { .tour-low .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .section.loud.tour-band { padding-bottom: 224px; } .tour-band .towers { width: 180px; } } @media (max-width: 639px) { .tour-low { margin-top: var(--u8); } } /* Sponsorship, the festival: the photo and the story, then the five worlds as five ruled columns under a Red rule, names at Heading Two; the two plans and the festival link close the block. */ .fest-low { display: grid; gap: var(--u4); margin-top: var(--u8); } @media (min-width: 1024px) { .fest-low { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); column-gap: var(--u8); align-items: end; } .fest-low > p { justify-self: end; } } /* Sponsorship, signature programs: a lineup, each program at Display over a Red rule, its line beside it from 1024 px */ .cols.prog { grid-template-columns: minmax(0, 1fr); gap: 0; } .cols.prog > li { padding-block: var(--u4); } .cols.prog h3 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; } @media (min-width: 1024px) { .cols.prog > li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: start; } .cols.prog li > * + * { margin-top: 0; } } /* Sponsorship, our audience: the claim leads across the grid at Display; the chips, story and pillars sit beside two pictures set one above the other's shoulder (the second 64 px lower; 48 on a phone) */ .head.aud-head { max-width: 62rem; } .pair.stagger { align-items: start; } .pair.stagger img:last-child { margin-top: var(--u8); } @media (max-width: 639px) { .pair.stagger img:last-child { margin-top: var(--u6); } } /* Sponsorship, the 2027 calendar on Black: the date at Body in capitals, the cities at Heading One; phone one column */ .cal-band .rows.cal > li { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: baseline; padding-block: var(--u4); } .cal-band .rows.cal h3 { font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .cal-band .rows.cal .label { font-size: var(--fs-body); } @media (max-width: 767px) { .cal-band .rows.cal > li { grid-template-columns: minmax(0, 1fr); } } /* Sponsorship, numbered steps at Display (activation ideas, the three steps) and the prices at Heading One */ /* the numeral stands above its step until the column is wide enough to keep 36 characters beside it (1200 px) */ .steps.big li { grid-template-columns: minmax(0, 1fr); row-gap: var(--u1); padding-block: var(--u4); } .steps.big .n { grid-row: auto; margin-bottom: var(--u1); font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.03em; } @media (min-width: 1200px) { .steps.big li { grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--u3); row-gap: 0; } .steps.big .n { grid-row: 1 / span 2; margin-bottom: 0; } } @media (min-width: 1200px) { .fest-low .dashes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--u8); } } .levels .price { margin-top: var(--u2); font-size: min(var(--fs-h1), 12cqi); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); white-space: nowrap; } .level { padding: var(--u4); container-type: inline-size; } /* Contact: the Red type hero with the towers (the All Events piece), the lead and the button under the headline; the directory moves to Black so Red stays one band a page */ @media (min-width: 1024px) { .hero-type .ht.stacked { grid-template-columns: minmax(0, 1fr); } } .hero-type .ht.stacked > .words { position: relative; } /* STRENGTH Collective, numbered chapters: each numeral at Mega in serif Light (Mocha), a thin Taupe line running from it to the column's edge, like a course book; the arch stays the page's one special frame */ .col-num.chapter { display: flex; align-items: center; gap: var(--u3); font-size: var(--fs-mega); line-height: 0.8; margin-bottom: var(--u4); } .col-num.chapter::after { content: ""; flex: 1; height: 1px; background: var(--taupe); } /* Certifications, training for your whole studio: the anatomy photo on its block at half the grid, the question at Subhead */ @media (min-width: 960px) { .split.w5.studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .split.studio .lead-in { margin-top: var(--u3); } /* Showdown and Classic hero: the posters set the hero's height (no first-screen floor), so no empty band opens under them; under 1024 px the second poster drops 48 px, not 96, and the points follow straight on */ @media (min-width: 1024px) { .hero-split:has(.posters) .hs { min-height: 0; } } @media (max-width: 1023px) { .hero-split .posters { padding-bottom: 0; } .hero-split .posters figure:last-child { margin-top: var(--u6); } } /* ========================================================= Round 6 (2026-11-13): first screens that land. Each first screen is its own composition in one family: the headline at Mega, real people in full colour, one City piece (a Red block, the towers, or a hard block set off 24 px), and the page's button inside the first screen at 1440 x 900 and 390 x 800. ========================================================= */ .hero-city, .hero-left { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); overflow: clip; } /* Home: the City poster. The words on the left 7 of 12 columns, the headline at Mega fitted to them in three lines; the City collage on the right 5 and the margin: a Red block to the right screen edge, the engraved towers in it as in the statement band (one piece hanging from its top edge, one rising behind the photo, turned to lean in), the hug photo whole at 3:2 to the screen edge over the block's lower left corner. */ .hero-city { padding-block: var(--u4) 0; } .hero-city .hc { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .hero-city .words { container-type: inline-size; } .hero-city .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 6.7))); } .hero-city .words > .t-mega + * { margin-top: var(--u3); } .hero-city .lead { max-width: 30rem; } .hero-city .btn-row { margin-top: var(--u4); } .hero-city .collage { position: relative; margin-inline: calc(var(--pad) * -1); padding: 160px var(--pad) var(--u6); } .hero-city .block { position: absolute; left: 30%; right: 0; top: 0; bottom: var(--u12); overflow: hidden; background: var(--red); } .hero-city .towers { position: absolute; right: 0; bottom: 0; width: 100%; max-width: none; transform: scaleX(-1); pointer-events: none; } .hero-city .towers.top { top: 0; bottom: auto; width: 86%; transform: none; } .hero-city .hero-photo { position: relative; aspect-ratio: 3 / 2; background: var(--ground-2); } .hero-city .hero-photo img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1024px) { .hero-city { padding-block: 0; } .hero-city .hc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); min-height: min(calc(100svh - var(--header-h)), 880px); } .hero-city .words { align-self: center; padding-block: var(--u6); } .hero-city .collage { margin: 0 calc(var(--edge) * -1) 0 0; padding: 0 0 var(--u6) 0; display: grid; align-content: end; } .hero-city .block { left: 14%; bottom: var(--u12); } } /* About: the photo first. The group photo whole at 3:2 runs off the left screen edge on a Black hard block set off 24 px down and to the inside; the words on the right, the headline at Mega fitted to its column in two lines. */ .hero-left { padding-block: var(--u4) 0; } .hero-left .hl { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .hero-left .words { container-type: inline-size; } .hero-left .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 5))); } .hero-left .label + .t-mega { margin-top: var(--u3); } .hero-left .words > .t-mega + * { margin-top: var(--u3); } .hero-left .lead { max-width: 30rem; } .hero-left .btn-row { margin-top: var(--u4); } .hero-left .hero-photo { order: 1; aspect-ratio: 3 / 2; margin: 0 var(--u3) var(--u3) calc(var(--pad) * -1); box-shadow: var(--u3) var(--u3) 0 var(--black); } .hero-left .hero-photo img { width: 100%; height: 100%; object-fit: cover; } .hero-left .points { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u2) var(--u4); list-style: none; margin: 0; padding: var(--u6) 0 var(--u8); counter-reset: pt; } .hero-left .points b { font-size: var(--fs-sub); line-height: var(--lh-sub); margin-bottom: 4px; } @media (min-width: 1024px) { .hero-left { padding-block: var(--u6) 0; } .hero-left .hl { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: center; } .hero-left .hero-photo { order: 0; margin: 0 0 var(--u3) calc(var(--edge) * -1); } .hero-left .points { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .hero-left .points li { font-size: var(--fs-body); line-height: var(--lh-body); } } /* Monthly Events: the headline over the letters. From 1024 px the headline runs in two lines across the grid (fitted: --em is the first line's width in em), the lead under it with the button at the grid's right edge; the photo starts on the grid's left edge and runs off the right screen edge on a Red hard block set off 24 px down and to the left. Under 1024 px the stack as before, the same block. */ .hero-lock .hero-photo { margin-left: var(--pad); box-shadow: calc(var(--u3) * -1) var(--u3) 0 var(--red); } .hero-lock { padding-bottom: 0; } .hero-lock .points { margin-top: var(--u3); } @media (min-width: 1024px) { .hero-lock .hero-top { container-type: inline-size; } .hero-lock .hero-top > * { --f: min(var(--fs-mega), calc(100cqi / var(--em, 13.4))); } .hero-lock .t-mega { font-size: var(--f); } .hero-lock .t-mega .ln:nth-child(-n+2) { display: inline; } .hero-stack.hero-lock .hero-side { position: static; display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: var(--u3) var(--u8); margin: var(--u4) 0 0; } .hero-lock .hero-side .lead { max-width: 46rem; } .hero-lock .hero-side .btn-row { flex: none; } .hero-stack.hero-lock .hero-photo { margin: var(--u8) 0 0 var(--edge); --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); } } /* Sponsorship: the claim at full size. The words take 8 of 12 columns, so the three lines stand at Mega; the tall photo keeps the other 4, off the right screen edge, on a Red hard block set off 24 px down and to the left. */ .hero-claim .pic { box-shadow: calc(var(--u3) * -1) var(--u3) 0 var(--red); } @media (min-width: 1024px) { .hero-claim .hs.w7 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .hero-claim .hs.w7 .pic { margin-bottom: var(--u3); } } @media (max-width: 1023px) { .hero-claim .pic { margin-bottom: var(--u3); margin-left: calc(var(--pad) * -1 + var(--u3)); } } /* All Events: the Red board. The towers stand taller (46 percent of the width, at most 680 px); the list's head comes up onto the Red on a sheet of White paper from the left screen edge, over the towers' feet, so the first date starts on the first screen. Under 1024 px: 220 px towers, a 48 px overlap. */ .hero-board .towers { width: min(46vw, 680px); } .hero-board + .section { padding-top: 0; --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); } .hero-board + .section > .wrap > .head:first-child { position: relative; z-index: 1; margin-top: calc(var(--u12) * -1); padding-top: var(--u6); } .hero-board + .section > .wrap > .head:first-child::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(var(--edge) * -1); right: calc(var(--u8) * -1); background: var(--ground); } @media (min-width: 1024px) { .hero-type.hero-board { padding-bottom: calc(var(--u12) * 2); } } @media (max-width: 1023px) { .hero-type.hero-board { padding-bottom: 240px; } .hero-board .towers { width: 220px; } .hero-board + .section > .wrap > .head:first-child { margin-top: calc(var(--u6) * -1); padding-top: var(--u4); } .hero-board + .section > .wrap > .head:first-child::before { right: calc(var(--u4) * -1); } } /* Round 6: the dates list fills its row. The picture 336 px square from 1200 px (264 from 900), 64 px between the columns; the name at Heading One; the place line at Subhead weight 500; the kind in Caption SemiBold in the accent, in its own spelling, never the capital Label style (web.md, part 6). The date column is unchanged. */ .ev .kind { font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: 0; text-transform: none; color: var(--accent-text); } .ev h3 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-wrap: balance; } .ev-body > * + * { margin-top: var(--u1); } .ev-body > h3 + p { margin-top: var(--u2); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; } @media (min-width: 900px) { .ev { grid-template-columns: 168px 264px minmax(0, 1fr); } .ev > img { width: 264px; height: 264px; } } @media (min-width: 1200px) { .ev { grid-template-columns: 184px 336px minmax(0, 1fr); column-gap: var(--u8); } .ev > img { width: 336px; height: 336px; } } /* Load moment for the round 6 heroes: the words rise, the photo unmasks (reduced motion: nothing moves) */ @media (prefers-reduced-motion: no-preference) { .js .hero-city .words > *, .js .hero-left .words > * { animation: rise 800ms var(--ease-out) both; } .js .hero-city .words > :nth-child(2), .js .hero-left .words > :nth-child(2) { animation-delay: 70ms; } .js .hero-city .words > :nth-child(n+3), .js .hero-left .words > :nth-child(n+3) { animation-delay: 140ms; } .js .hero-city .hero-photo, .js .hero-left .hero-photo { animation: unmask 1100ms var(--ease-out) 120ms both; } } /* Movement Tour: the City joins the print. The engraved towers (no birds), turned to lean in, rise from the hero's foot at the right screen edge, over the paint and under the print, so the festival reads as a city day. */ .hero-poster .art .towers { position: absolute; right: calc(var(--edge) * -1); bottom: calc(-1 * max(var(--u6), (min(100svh - var(--header-h), 880px) - 100%) / 2) - 1px); width: 58%; max-width: none; transform: scaleX(-1); pointer-events: none; } @media (max-width: 1023px) { .hero-poster .art .towers { right: calc(var(--pad) * -1); width: 46%; bottom: calc(var(--u8) * -1 - 1px); } } /* the towers stand on the hero's bottom edge: the offset is the space under the art (Elliot, Nov 11) */ /* ---------- Round 7 (2026-11-11): the other City first screens, three loud mid-page sections, the Sponsorship middle ---------- */ /* Showdown and Classic: the fight card. On Black, "Two ways to compete" at Mega in one line across the grid (two lines under 1024 px); the lead and button on the left 5 of 12 columns; the two posters whole at 4:5 (round 8; were square with their blurred bars), side by side, from the other 7 columns to the right screen edge, on one Red hard block set off 24 px left and down (it shows in the gap). The three points run as a ruled list under the button, so the whole card sits in the first screen at 1440 x 900. */ .hero-card { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); padding-block: var(--u6) 0; } .hero-card .hk { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u4); } .hero-card .words { container-type: inline-size; } .hero-card .label + .t-mega { margin-top: var(--u3); } .hero-card .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 5.6))); } .hero-card .lead { max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .hero-card .side .btn-row { margin-top: var(--u4); } .hero-card .posters { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--u2); margin: var(--u2) calc(var(--pad) * -1) var(--u3) var(--u3); } .hero-card .posters::before { content: ""; position: absolute; inset: var(--u3) var(--u3) calc(var(--u3) * -1) calc(var(--u3) * -1); background: var(--red); } .hero-card .poster { position: relative; background: none; } .hero-card .poster img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; } /* round 8: each poster whole at its own 4:5; only the file's blurred side bars (120 px a side of 1200) fall outside */ .hero-card .points { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u2) var(--u4); list-style: none; margin: 0; padding: var(--u2) 0 var(--u8); counter-reset: pt; } .hero-card .points b { font-size: var(--fs-sub); line-height: var(--lh-sub); margin-bottom: 4px; } @media (min-width: 768px) and (max-width: 1023px) { .hero-card .points { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hero-card .hk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); row-gap: var(--u6); } .hero-card .words { grid-column: 1 / -1; } .hero-card .side { grid-column: 1; grid-row: 2; } .hero-card .points { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr); padding: 0 0 var(--u8); align-self: start; } .hero-card .posters { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: var(--u4) !important; } .hero-card .t-mega { --em: 10.6; } .hero-card .t-mega .ln { display: inline; } .hero-card .posters { margin: 0 calc(var(--edge) * -1) var(--u3) 0; gap: var(--u3); } } @media (min-width: 1200px) { .hero-card .points li { font-size: var(--fs-body); line-height: var(--lh-body); } } /* Retreats: a low sun over the weekend. The City rings, turned so their center sits on the hero's lower right corner (the screen edge and the band edge), rise behind the Phoenix photo; the photo stands whole at its own tall shape on the hero's foot; the headline in three lines on the left (a hero headline never runs four), fitted to its column and the first screen's height. */ .hero-sun { position: relative; padding-block: var(--u6) 0; } .hero-sun .sun { position: absolute; right: 0; bottom: 0; width: min(100vw, 400px); max-width: none; transform: scaleX(-1); mix-blend-mode: multiply; pointer-events: none; } .hero-sun .hsun { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .hero-sun .words { container-type: inline-size; } .hero-sun .label + .t-mega { margin-top: var(--u3); } .hero-sun .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 8.3))); } .hero-sun .words > .t-mega + * { margin-top: var(--u3); } .hero-sun .lead { max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .hero-sun .btn-row { margin-top: var(--u4); } .hero-sun .pic { width: min(72%, 320px); justify-self: end; aspect-ratio: 646 / 1024; margin: 0; overflow: hidden; } .hero-sun .pic img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1024px) { .hero-sun { --fs: min(calc(100svh - var(--header-h)), 880px); padding-top: 0; } .hero-sun .sun { width: min(50vw, 720px); } .hero-sun .hsun { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: end; min-height: var(--fs); } .hero-sun .words { align-self: center; padding-block: var(--u6); } .hero-sun .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 8.3)), calc((var(--fs) - 300px) / 2.9)); } .hero-sun .pic { width: auto; height: calc(var(--fs) * 0.72); } } /* Contact: pick your door, one poster in two colors. From 1024 px the first screen splits down the middle: Red on the left with "Let's talk" at Mega, the lead, Email Us and the engraved towers rising at the seam; Black on the right with the six doors as big ruled links. Below 1024 px the Red half sits on the Black one, the towers 180 px in the corner. */ .contact-split { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; } .contact-split .half { position: relative; padding: var(--u8) var(--pad); } .contact-split .band-red { padding-bottom: 192px; overflow: clip; } .contact-split .words { position: relative; container-type: inline-size; } .contact-split .label + .t-mega { margin-top: var(--u3); } .contact-split .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 4.3))); } .contact-split .words > .t-mega + * { margin-top: var(--u4); } .contact-split .lead { max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .contact-split .btn-row { margin-top: var(--u4); } .contact-split .towers { position: absolute; right: 0; bottom: 0; width: 180px; max-width: none; transform: scaleX(-1); pointer-events: none; } .contact-split .doors .t-section { margin-bottom: var(--u4); } @media (min-width: 1024px) { .contact-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(100svh - var(--header-h)), 880px); } .contact-split .band-red { padding: var(--u8) var(--u8) var(--u8) var(--edge); } .contact-split .doors { padding: var(--u8) var(--edge) var(--u8) var(--u8); } .contact-split .towers { width: min(30vw, 440px); } .contact-split .links.big a { min-height: 72px; padding-block: var(--u2); } } /* The Chicago week landing (/wellness-weekend-chicago forwards to /wellness-festival#chicago): below 960 px the Chicago collage comes first, so a visitor who lands on the section meets the skyline before the words; 48 px to the label. */ @media (max-width: 959px) { .split > .art.city { order: -1; margin-bottom: var(--u3); } } /* Loud mid-page sections, one a page. Home, Find your way in: the three door names at Heading One (they sat at Heading Two under the pictures). Movement Tour, Tickets and questions: a STRNGTH. paint band (band-b, multiply) runs edge to edge on the section's top edge, 48 px over the head. About, Questions people ask: the questions at Heading One. */ .ways.trio .way h3 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-wrap: balance; } .section:has(> .paint-band) { padding-top: 0; } .paint-band { display: block; width: 100%; height: clamp(120px, 15vw, 240px); margin-bottom: var(--u6); object-fit: cover; mix-blend-mode: multiply; pointer-events: none; } .qa .faq.loud summary { min-height: 112px; font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .qa .faq.loud { border-top: 3px solid var(--ink); } /* Sponsorship middle: room and type. Card names at Heading Two (were Subhead), card lists at Body from 1024 px (were Caption), 32 px between items. The three title levels run as wide rows from 1024 px: name and price on the left 5 of 12, the line on the right. The value builder's pieces run two across from 1024 px, the line under each name at Body from 1200 px (was Caption, 156 px wide; now about 270). Caption stays the floor everywhere else in the builder. */ .level h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); } @media (min-width: 1024px) { .levels { gap: var(--u6) var(--u4); } .level .dashes { font-size: var(--fs-body); line-height: var(--lh-body); } .level .dashes li + li { margin-top: var(--u1); } .levels.wide { grid-template-columns: minmax(0, 1fr); gap: var(--u3); } .levels.wide .level { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); align-items: start; padding: var(--u4) var(--u6); } .levels.wide .level > * { grid-column: 1; margin-top: 0; } .levels.wide .level > * + * { margin-top: var(--u1); } .levels.wide .level > .dashes { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: center; font-size: var(--fs-sub); line-height: var(--lh-sub); } .levels.wide .price { font-size: var(--fs-h1); } .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u2); } .pick { padding: var(--u3); min-height: 104px; } .builder .estimate { position: sticky; top: calc(var(--header-h) + var(--u3)); } /* the estimate stays in view beside the longer list */ } @media (min-width: 1200px) { .pick span { font-size: var(--fs-body); line-height: var(--lh-body); } } /* ---------- Round 8 (2026-11-11): the two Collective first screens, the reading list, the City device rule ---------- */ @media (prefers-reduced-motion: no-preference) { .js .hero-course .hco > :not(figure) { animation: rise 800ms var(--ease-out) both; } .js .hero-course .hco > :nth-child(2) { animation-delay: 70ms; } .js .hero-course .hco > :nth-child(n+3) { animation-delay: 160ms; } .js .hero-course .ph-wrap img { animation: unmask 1100ms var(--ease-out) 120ms both; } } /* The course page (Certifications): "Pilates certifications" at Mega across the grid, in one line from 1200 px (fitted, --em 13.8; the line measures 13.65 em) and two below; under it the script, the rule, the lead and the button on the left 5 of 12 columns, and the room of pros whole at 3:2 on the right 7, off the right screen edge, on its Sand block 24 px down and toward the words. */ .hero-course .hco { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; } .hero-course .t-mega { margin-top: var(--u3); font-size: min(var(--fs-mega), calc(100cqi / 9.1)); } .hero-course .side > .col-script.cross { margin-top: 0.5em; } .hero-course .lead { margin-top: var(--u4); max-width: 30rem; } .hero-course .btn-row { margin-top: var(--u4); } .hero-course .ph-wrap { margin: var(--u6) calc(var(--pad) * -1) var(--collective-block-offset) var(--collective-block-offset); } .hero-course .ph-wrap::before { inset: var(--collective-block-offset) var(--collective-block-offset) calc(var(--collective-block-offset) * -1) calc(var(--collective-block-offset) * -1); } @media (min-width: 1200px) { .hero-course { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); padding-block: var(--u6); } .hero-course .hco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); align-items: start; } .hero-course .hco > .label, .hero-course .t-mega { grid-column: 1 / -1; } .hero-course .t-mega { font-size: min(var(--fs-mega), calc(100cqi / 13.8)); } .hero-course .t-mega .ln { display: inline; } .hero-course .side, .hero-course .ph-wrap { margin-top: var(--u6); } .hero-course .ph-wrap { margin-right: calc(var(--edge) * -1); } } /* The reading list (Collective page, Free guides for pros, on Brown; Certifications, Before you sign up, on Sand): the guides as ruled rows in the Collective's long headline style (serif Light, sentence case) at Heading One, rows at least 112 px, the drawn arrow at the end. The Collective page's one Brown band is now this list (the hero went Cream). */ .links.big.read a { min-height: 112px; font-family: "Noto Serif Display", serif; font-weight: 300; font-size: var(--fs-h1); line-height: var(--lh-col-long); letter-spacing: -0.01em; text-wrap: balance; } .links.big.read { border-top: 1px solid var(--rule); } .links.big.read li:first-child { border-top: 0; } .dark .links.big.read, .dark .links.big.read li { border-color: color-mix(in oklab, var(--band-ink) 40%, transparent); } @media (min-width: 960px) { .qa.reading { align-items: center; } } /* Learn all year (Collective page): the presenter, whole at 3:2 on her block, holds beside the series while they pass. */ @media (min-width: 960px) { .split > .ph-wrap.stay { align-self: start; position: sticky; top: calc(var(--header-h) + var(--u6)); } } /* One kind of device a page, at most twice (graphic-devices.md, part 1, draft). Home keeps the towers (the hero's Red block and the statement band) and drops the Red rail behind the doors: the doors get loud through scale and type instead. Each door opens with a 3 px rule in the ink, 32 px under its picture; the name at Display fitted to the door (--em 5.3: "hands-on" measures 5.04 em, so it never breaks at its hyphen), in two balanced lines. The Movement Tour keeps its print art twice (the hero and the Chicago collage) and drops the paint band over Tickets and questions: that section gets the loud questions (Heading One, rows at least 112 px, a 3 px rule) and the 128 px padding of a page's signature. */ .ways.trio .pic::before { content: none; } .ways.trio > .way { gap: var(--u6); } .ways.trio .stack { container-type: inline-size; border-top: 3px solid var(--ink); padding-top: var(--u3); } .ways.trio .way h3 { font-size: min(var(--fs-display), calc(100cqi / 5.3)); line-height: var(--lh-display, 1.02); letter-spacing: var(--ls-display, -0.02em); text-wrap: balance; } .ways.trio .stack > .label + h3 { margin-top: var(--u2); } /* ---------- Round 10 (2026-11-11): Sponsorship split in two, the story on About ---------- */ /* Sponsorship, the tour band: the 17 cities as an even grid down columns that line up with the three numbers above (same column count and gap as .cols), no dots. 3 columns from 1200 px, 2 below. */ .tour-low .city-grid { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(9, auto); gap: var(--u1) var(--u4); list-style: none; padding: 0; margin-top: var(--u8); font-weight: 800; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (min-width: 1200px) { .tour-low .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); } } /* Sponsorship, who you reach: one head, then the audience words over two card columns and the pillars over the third */ .aud-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u4); margin-bottom: var(--u8); } .aud-row .words > * + * { margin-top: var(--u3); } .aud-row .words > p:not(.label) { max-width: var(--measure); } @media (min-width: 900px) { .aud-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--u4); } } /* Sponsorship close: the main button and the arrow link to the levels page on one row */ .close-band .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u2) var(--u4); margin-top: var(--u4); } /* /sponsorship/levels: a short type-only hero with the way back */ .hero-levels .back { margin-bottom: var(--u6); } .hero-levels .back .more::after { order: -1; transform: rotate(-135deg); } @media (hover: hover) and (pointer: fine) { .hero-levels .back .more:hover::after { transform: translateX(-4px) rotate(-135deg); } } .hero-levels .t-mega { margin-top: var(--u2); max-width: 11em; } .hero-levels .lead { margin-top: var(--u4); max-width: 40rem; } /* About, the story: the growth counts sit under the words and photo */ .story .split + .grow { margin-top: var(--u12); } /* the counts keep 48 px and more from the photo above */ @media (max-width: 639px) { .tour-low .city-grid { font-size: var(--fs-body); line-height: var(--lh-body); row-gap: 4px; } } /* The Chicago collage reaches the screen edge like its paint (round 10 edge pass: the skyline stopped 48 px and the L train 28 px short of the right edge at 1280). Wide: both cutouts hang from the screen's right edge. Narrow, where the collage sits above the words: the skyline runs edge to edge. */ .art.bleed.city .train { right: calc(var(--edge) * -1); } @media (min-width: 960px) { .art.bleed.city .skyline { left: auto; right: calc(var(--edge) * -1); } } @media (max-width: 959px) { .art.bleed.city .skyline { left: calc(var(--edge) * -1); width: calc(100% + var(--edge) * 2); max-width: none; } } /* Collective chapters (01, 02, 03): the number's top sits flush with the photo's top, as chapter 02 already did. Centered, 01 and 03 missed by 5 and 12 px at 1280 (round 10 edge pass). */ .split:has(> .words > .chapter) { align-items: start; } /* ---------- Round 11 (2026-11-11): the Collective banner, its closing band, the arch in Learn all year, the partner page ---------- */ /* The banner (.col-hero, STRENGTH Collective page; brand board "Web banner"). One photo runs the full width under the header: the pro standing and teaching on the right, a Brown shade at 70% over the quiet left part that fades out before her (solid to 34% of the width, gone at 58%). On the shade, in Cream: the label, the serif Light capitals, the script tilted -6 degrees under them, the 64 x 2 rule, the lead and the round outline button. From 1024 px the photo is zoomed to show the left three quarters of the picture (the person at the right edge of the file never shows) and its top: her face sits at 59 to 77% of the width, the words end by 42%. Under 1024 px (the brand board's phone version): the photo on top (1:1 on a phone, 9:8 to 1023 px), the words under it on Cream in Brown and Mocha, no shade. */ .shade-photo { position: relative; margin: 0; overflow: hidden; background: var(--brown); } .shade-photo img { width: 100%; height: 100%; object-fit: cover; } .btn-round { border-radius: 999px; } .col-hero { position: relative; overflow: clip; } .col-hero .shade-photo { aspect-ratio: 1 / 1; } .col-hero .shade-photo img { object-position: 35% 0; } @media (min-width: 640px) { .col-hero .shade-photo { aspect-ratio: 9 / 8; } .col-hero .shade-photo img { object-position: 30% 0; } } .col-hero > .wrap { background: var(--ground); padding-block: var(--u6) var(--u8); } .col-hero .words { container-type: inline-size; max-width: 34rem; } .col-hero .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em, 6.4))); line-height: 1.04; } .col-hero .words > .label + .t-mega { margin-top: var(--u2); } .col-hero .col-script.cross { transform: rotate(-6deg); transform-origin: 0 100%; margin: 0.12em 0 0 1.7em; font-size: calc(min(var(--fs-mega), 100cqi / var(--em, 6.4)) * 0.84); } .col-hero .col-script.cross + .rule { margin-top: var(--u4); } .col-hero .lead { margin-top: var(--u3); max-width: 30rem; font-size: var(--fs-sub); line-height: 1.4; color: var(--taupe-text); } .col-hero .btn-row { margin-top: var(--u4); } @media (min-width: 1024px) { .col-hero { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); --focus: var(--cream); display: grid; align-items: center; min-height: min(calc(100svh - var(--header-h)), 880px); background: var(--brown); color: var(--cream); } .col-hero .shade-photo { position: absolute; inset: 0; aspect-ratio: auto; } .col-hero .shade-photo img { object-position: 0 0; transform: scale(1.3333); transform-origin: 0 0; } .col-hero .shade-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(59, 31, 7, 0.7) 0, rgba(59, 31, 7, 0.7) 34%, rgba(59, 31, 7, 0) 58%); } .col-hero > .wrap { position: relative; width: 100%; background: none; padding-block: var(--u8); } .col-hero .words { width: min(30rem, calc(42vw - var(--edge))); } .col-hero .label, .col-hero .col-script, .col-hero .lead { color: var(--cream); } .col-hero .rule { background: var(--cream); } } @media (prefers-reduced-motion: no-preference) { .js .col-hero .words > * { animation: rise 800ms var(--ease-out) both; } .js .col-hero .words > :nth-child(2) { animation-delay: 70ms; } .js .col-hero .words > :nth-child(n+3) { animation-delay: 160ms; } .js .col-hero .shade-photo { animation: unmask 1100ms var(--ease-out) 120ms both; } /* ends at the keyframes' inset, so it slides and stays */ } /* The banner's script keeps its tilt through the load moment (rise would replace the transform) */ @media (prefers-reduced-motion: no-preference) { .js .col-hero .words > .col-script { animation-name: rise-tilt; } } @keyframes rise-tilt { from { opacity: 0; transform: translateY(24px) rotate(-6deg); } to { transform: rotate(-6deg); } } /* The closing band (.col-band, STRENGTH Collective page; brand board lower band). From 1280 px: one photo (the lunge room, as on the brand board) at 2.4:1 the full width, the Brown shade at 70% over the left half (solid to 50%, gone at 72%), the serif line (sentence case, Heading One) and the round Cream outline button on it, low on the shade, under the faces. Under 1280 px the photo comes first at 16:9 and the words follow on Brown. */ .col-band { position: relative; overflow: clip; background: var(--brown); color: var(--cream); --focus: var(--cream); } .col-band .shade-photo { aspect-ratio: 2 / 1; } @media (min-width: 640px) { .col-band .shade-photo { aspect-ratio: 8 / 3; } } .col-band .shade-photo img { object-position: 50% 45%; } .col-band > .wrap { padding-block: var(--u6); } .col-long { font-family: "Noto Serif Display", serif; font-weight: 300; font-size: var(--fs-h1); line-height: var(--lh-col-long); letter-spacing: -0.01em; text-wrap: balance; } .col-band .words > .col-long + p { margin-top: var(--u2); } @media (min-width: 1280px) { .col-band { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); aspect-ratio: 4 / 1; min-height: 20rem; display: flex; align-items: center; } /* Elliot Nov 11: 40% shorter, words centered top to bottom */ .col-band .shade-photo { position: absolute; inset: 0 0 0 40%; aspect-ratio: auto; } /* the photo keeps its 2.4:1 crop on the right; the words stand on Brown, clear of the faces */ .col-band .shade-photo img { object-position: 50% 45%; } .col-band .shade-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(59, 31, 7) 0, rgba(59, 31, 7, 0.55) 14%, rgba(59, 31, 7, 0) 38%); } .col-band > .wrap { position: relative; width: 100%; padding-block: var(--u6); } .col-band .words { width: min(36rem, calc(40vw - var(--edge))); } } /* Learn all year (Collective page, 02): the words on the left, the arch (the room on their mats, the Collective's one special frame, once on the site) on the right, its block 24 px down and toward the words; it scrolls with the section (Elliot, Nov 11: no pinned photo). 01 and 03 have their photo on the left, so the rows run left, right, left. */ .split.learn > .arch { justify-self: end; width: min(100% - var(--collective-block-offset), 28rem); margin: 0 0 var(--collective-block-offset) var(--collective-block-offset); } .split.learn > .arch::before { inset: var(--collective-block-offset) var(--collective-block-offset) calc(var(--collective-block-offset) * -1) calc(var(--collective-block-offset) * -1); } @media (min-width: 960px) { .split.learn { align-items: start; } } /* The partner page (/collective/partner): the course hero with one word at full Mega and the panel cropped to 3:2 so the whole photo sits on the first screen; three ways in as one row of three on Brown (stacked under 960 px). */ .hero-partner .t-mega { font-size: var(--fs-mega); } @media (min-width: 1200px) { .hero-partner .t-mega { font-size: var(--fs-mega); } } .hero-partner .ph-wrap img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; } .ways-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u8) var(--split-gap); } .ways-in > section > * + * { margin-top: var(--u2); } .ways-in .col-num { font-size: var(--fs-display); line-height: 0.9; } .ways-in .col-num + .label { margin-top: var(--u3); } .ways-in .h2 { font-size: var(--fs-h2); } .ways-in p { max-width: var(--measure); } .ways-in a { color: inherit; } @media (min-width: 1200px) { .ways-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { .hero-partner .side, .hero-partner .ph-wrap { margin-top: var(--u8); } } @media (min-width: 960px) { .room-collective #room.t-section { font-size: min(var(--fs-display), 3.2vw + 0.5rem); } } /* one long word: keep it inside its column */ .room-collective .section > .wrap > .head.center:last-child { margin-bottom: 0; } .head.center > .col-long { max-width: 22em; margin-inline: auto; } /* Round 12: the live site's film grain, on the City's Red and Black grounds only (DESIGN-LIFT.md, "Round 12"). img/film-grain.webp is a 512 px crop of the live tile; it lies as a background layer over the ground colour, so every word, button, photo, poster and drawn piece paints above it, crisp, and nothing new stacks or clips. The veil over the tile is the ground itself at (1 - strength): Red at 0.7 (the live strength), Black at 0.7. Never on the Collective (.room-collective), the header, light sections, cards, posters, art or photos. */ .room-main :is(.band-red, .hero-city .block, .hero-home .block), .room-main :is(.hero-card .posters, .kind > .pic)::before { --grain-on: var(--red); --grain-veil: 30%; } .room-main .dark { --grain-on: var(--band); --grain-veil: 30%; } .room-main :is(.band-red, .dark, .hero-city .block, .hero-home .block), .room-main :is(.hero-card .posters, .kind > .pic)::before { background-image: linear-gradient(color-mix(in srgb, var(--grain-on) var(--grain-veil), transparent), color-mix(in srgb, var(--grain-on) var(--grain-veil), transparent)), url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be78ef903bbd174e803_film-grain.webp"); } /* The city reel's edge fades carry the same ground and grain, faded by a mask, so no clean strip shows at the screen edge */ .room-main :is(.band-red, .dark) .city-reel::before, .room-main :is(.band-red, .dark) .city-reel::after { background: linear-gradient(color-mix(in srgb, var(--grain-on) var(--grain-veil), transparent), color-mix(in srgb, var(--grain-on) var(--grain-veil), transparent)), url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be78ef903bbd174e803_film-grain.webp"), var(--reel-ground); -webkit-mask-image: linear-gradient(var(--fade-to), #000, transparent); mask-image: linear-gradient(var(--fade-to), #000, transparent); } .room-main .city-reel::before { --fade-to: 90deg; } .room-main .city-reel::after { --fade-to: 270deg; } /* ---------- Round 13 (2026-11-11): one Events link, All Events as the hub, the STRNGTH. Tour mark, the Home doors ---------- DESIGN-LIFT.md, "Round 13". */ /* Home, the dark band: the STRNGTH. name lettering, the pin as its period, then "Tour" (logo-and-names.md, The name lettering: STRNGTH in Poppins ExtraBold, the second words in Poppins Regular at the same size, a third of the capital height after the pin; the pin 0.59 of the capital height on the baseline; White pin on Black). "2027 cities" under it. The mark is 7.38 em wide (measured), so a phone sets it to the grid's width. */ .city-band .tour-head { max-width: none; } .tour-head h2 { display: grid; justify-items: center; gap: var(--u3); font-weight: 800; } .tour-mark { font-size: min(var(--fs-mega), calc((100vw - 2 * var(--pad)) / 7.4)); letter-spacing: -0.02em; } .tour-mark .rg { letter-spacing: -0.01em; } .tour-sub { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } /* Home, Find your way in: three doors, one row. Guests and brands each wear the paint collage (art.py door-guests, door-brands: their own color pair and arrangement, multiply on White) with the photo as a framed print, tilted against each other: guests high and left, brands low and right. Pros wear the Collective look (.col-look shares the Collective tokens): a Cream panel, the photo whole at 4:3 on its Sand block, the label as the Collective script, the name in serif capitals. From 1100 px the three share one grid by subgrid, so labels, names, lines and links start on the same lines across the row; every picture is the same square, 48 px above its words. */ .ways.doors .pic > .art, .ways.doors .col-door { aspect-ratio: 1; } .ways.doors .art.door-art { background: var(--white); overflow: visible; } .ways.doors .art.door-art .paint { inset: 0; width: 100%; height: 100%; } .ways.doors .art.door-art .print { inset: 15% 20% 29% 15%; padding: 10px; transform: rotate(-3deg); } .ways.doors .door-low .art.door-art .print { inset: 29% 15% 15% 20%; transform: rotate(3deg); } .ways.doors .art .print img[src$="spons-letters.webp"] { object-position: 50% 30%; } /* the faces over the letters */ @media (hover: hover) and (pointer: fine) { .ways.doors .tile:hover .art .print { transform: rotate(-1.5deg) translateY(-6px); } .ways.doors .door-low.tile:hover .art .print { transform: rotate(1.5deg) translateY(-6px); } .ways.doors .col-look.tile:hover .ph-wrap { transform: translateY(-6px); } .ways.doors .tile:hover figure img { transform: none; } } .col-look { color: var(--ink); } .ways.doors .col-door { display: grid; align-content: end; padding: 0 16% 16% 10%; background: var(--ground); } .ways.doors .col-door .ph-wrap { overflow: visible; transition: transform 700ms var(--ease-out); } .ways.doors .col-look .label.col-script { font-size: clamp(30px, 2.6vw, 40px); letter-spacing: 0; color: var(--accent-text); } .ways.doors .col-look h3.col-caps { font-size: min(var(--fs-display), calc(100cqi / 6.2)); font-weight: 300; line-height: 1.04; letter-spacing: var(--ls-col-caps); } .ways.doors .col-look .more { color: var(--accent-text); } @media (min-width: 1100px) { /* a container query on the door's own words would make them their own grid (containment ends a subgrid), so the names measure the row: one door is (row - 2 gaps) / 3 */ .ways.trio.doors { grid-template-rows: repeat(5, auto); row-gap: 0; container-type: inline-size; } .ways.doors .stack { container-type: normal; } .ways.doors .way h3 { font-size: min(var(--fs-display), calc((100cqi - 2 * var(--u4)) / 3 / 5.3)); } .ways.doors .col-look h3.col-caps { font-size: min(var(--fs-display), calc((100cqi - 2 * var(--u4)) / 3 / 6.2)); } .ways.doors > .way { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; } .ways.doors > .way > .pic { margin-bottom: var(--u6); } .ways.doors .stack { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; } .ways.doors .stack > * { margin: 0; } .ways.doors .stack > .label { align-self: end; padding-bottom: var(--u2); } .ways.doors .stack > h3 { align-self: start; padding-bottom: var(--u2); } .ways.doors .stack > p:last-child { align-self: end; padding-top: var(--u3); } } /* All Events, the top: a short Red lineup board, one headline and one line; the tiles come up onto the Red. */ .hero-lineup { padding-block: var(--u12) calc(var(--u12) + var(--u12)); } .hero-lineup .t-mega { max-width: none; } .hero-lineup .words > .t-mega + .lead { margin-top: var(--u3); } @media (max-width: 639px) { .hero-lineup { padding-block: var(--u8) calc(var(--u8) + var(--u6)); } } .arms-band { padding-top: 0; } .arms { position: relative; z-index: 1; margin-top: calc(var(--u12) * -1); } @media (max-width: 639px) { .arms { margin-top: calc(var(--u6) * -1); } } /* All Events, the five kinds: five color tiles in a zigzag (the Movement Tour tall on the left, Retreats wide on the right), each one link. Each tile: its ground and ink (build.py ARMS), its name, one line, and its drawn picture (the et- block at the end). Hover lifts a tile 6 px; the tiles arrive one after another as they scroll in (site.js), and end at rest. Reduced motion: still. */ .arms { --tile-pad: var(--u4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u3); } .arm { container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; padding: var(--tile-pad) var(--tile-pad) 0; background-color: var(--k); color: var(--k-ink); --focus: var(--k-ink); transition: transform 300ms var(--ease-out); } .arm.dark { background-color: var(--k); } .arm-name { font-weight: 800; font-size: min(var(--fs-display), 12cqi); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; } .arm-name a { color: inherit; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 8px; transition: text-decoration-color var(--dur-menu) var(--ease-out); } .arm-line { margin-top: var(--u2); max-width: 30rem; font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (hover: hover) and (pointer: fine) { .arm:hover { transform: translateY(-6px); } .arm:hover .arm-name a { text-decoration-color: currentColor; } } @media (min-width: 640px) { .arms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arm-tour { grid-column: 1 / -1; } } @media (min-width: 1024px) { .arms { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "t t t t t t t c c c c c" "t t t t t t t n n n n n" "t t t t t t t r r r r r"; } .arm-tour { grid-area: t; } .arm-compete { grid-area: c; } .arm-nights { grid-area: n; } .arm-retreats { grid-area: r; } .arm-tour .arm-name { font-size: min(var(--fs-mega), 15cqi); } } @media (prefers-reduced-motion: no-preference) { .arms-on .arm { transition: transform 300ms var(--ease-out), translate 800ms var(--ease-out) calc(var(--i) * 90ms), opacity 800ms var(--ease-out) calc(var(--i) * 90ms); } .arms-on .arm:not(.in) { opacity: 0; translate: 0 40px; } } /* All Events, the year: month by month, each date a ticket stub. The stub's left part is its kind's color (the tile's ground and ink above; the Collective days Mocha), cut from the body by a dashed tear line with a notch at each end. Months at Heading One on the left from 900 px, sticky while their dates pass. Filter chips (site.js) show one kind at a time; with no script the chips stay hidden and the full list shows. */ .year { display: grid; gap: var(--u8); } .filters { display: flex; flex-wrap: wrap; gap: var(--u1); } .filters[hidden] { display: none; } .chip { display: inline-flex; align-items: center; gap: var(--u1); min-height: 44px; padding: 0 var(--u2); border: 2px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); font-weight: 600; font-size: var(--fs-caption); line-height: 1; cursor: pointer; transition: background-color var(--dur-menu) var(--ease-out), color var(--dur-menu) var(--ease-out), transform var(--dur-press) var(--ease-out); } .chip .dot { width: 14px; height: 14px; flex: none; background: var(--k); box-shadow: 0 0 0 1px var(--ink); } .chip[aria-pressed="true"] { background: var(--k, var(--black)); color: var(--k-ink, var(--white)); border-color: var(--k, var(--black)); } .chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--k-ink); } .chip:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .chip[aria-pressed="false"]:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } } .filter-count { margin-top: calc(var(--u8) * -1 + var(--u2)); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; } .filters[hidden] + .filter-count { margin-top: 0; } .month { display: grid; gap: var(--u3); } .month[hidden] { display: none; } .month-name { font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .stubs { display: grid; gap: var(--u2); } .stub[hidden] { display: none; } .stub { --notch: 12px; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--white); } .stub-when { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--u2); padding: var(--u3) var(--u4); background: var(--k); color: var(--k-ink); } .stub-when .mo { font-weight: 600; font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; } .stub-when b { font-weight: 800; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.04em; } .stub-when b.span { font-size: var(--fs-h1); letter-spacing: -0.02em; } .stub-when .yr { font-weight: 600; font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; } .stub-when.soon::after { content: ""; display: block; width: 1.6em; height: 1.1em; font-size: var(--fs-display); border: 2px dashed currentColor; } /* the site's "to come" blank at day size */ .stub-body { position: relative; display: grid; gap: var(--u1); align-content: start; padding: var(--u3) var(--u4) var(--u4); border-top: 2px dashed color-mix(in oklab, var(--black) 35%, transparent); } .stub-body .kind { font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--red-text); } .stub-body h4 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); text-wrap: balance; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color var(--dur-menu) var(--ease-out); } .stub-body h4 + p { max-width: var(--measure); } .stub-body .more { margin-top: var(--u2); justify-self: start; } .stub-body::before, .stub-body::after { content: ""; position: absolute; top: calc(var(--notch) * -1 - 1px); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--ground-2); } /* the notches at the tear line */ .stub-body::before { left: calc(var(--notch) * -1); } .stub-body::after { right: calc(var(--notch) * -1); } @media (hover: hover) and (pointer: fine) { .stub.tile:hover h4 { text-decoration-color: currentColor; } } @media (min-width: 640px) { .stub { grid-template-columns: 176px minmax(0, 1fr); } .stub-when { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--u1); padding: var(--u3); } .stub-body { border-top: 0; border-left: 2px dashed color-mix(in oklab, var(--black) 35%, transparent); } .stub-body::before, .stub-body::after { top: auto; left: calc(var(--notch) * -1 - 1px); right: auto; } .stub-body::before { top: calc(var(--notch) * -1); } .stub-body::after { bottom: calc(var(--notch) * -1); } } @media (max-width: 639px) { .stub-when, .stub-body { padding-inline: 14px; } } /* phone: the words keep 36 characters a line */ @media (min-width: 900px) { .month { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--u6); align-items: start; } .month-name { position: sticky; top: calc(var(--header-h) + var(--u3)); padding-top: var(--u2); } .stub { grid-template-columns: 200px minmax(0, 1fr); } .stub-body { padding: var(--u4); } } @media (min-width: 1280px) { /* the link sits beside the words only where the words keep a full line (36 characters or more) */ .stub-body { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--u6); } .stub-body > * { grid-column: 1; } .stub-body .more { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; } } /* ---------- Round 14 (2026-11-11): Home, every section lifted (DESIGN-LIFT.md, "Round 14") ---------- One look: the City (Poppins, Red, Black, White, the engraved towers, the heart pin). The STRNGTH. paint and its seven colors stay on STRNGTH. pieces only (door 1, the dark tour band, its city cards); the pros door wears a little of the Collective; the brands door is plain City. Motion: the hero's one load moment (the headline line by line, the line from "meet" to its pin), pieces that arrive once as they scroll in (site.js, data-rise), photos and towers that move slower than the page (scroll-driven, where the browser has it), tiles that lean toward the mouse (data-tilt). Only transform, translate, scale, opacity and clip-path insets move. Reduced motion: all of it simply shows. */ /* 1. Hero: the meeting point. The headline at Mega on the left, each line its own mask; "meet" runs on as a 3 px Red line that ends in the heart pin, pointing at the people. On the right, to the screen edge, the Red block with the towers hanging from its top and rising from its foot, and two photos laid over it: the big group (sharp to its full 1024 px), and the hug, drawn no wider than 360 px (it holds detail to about 700). */ .hero-home { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); overflow: clip; padding-block: var(--u4) 0; } .hero-home .hh { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .hero-home .words { position: relative; z-index: 3; container-type: inline-size; } .hero-home .t-mega { font-size: min(var(--fs-mega), calc(100cqi / 6.7)); } .hero-home .t-mega .ln { display: block; overflow: clip; overflow-clip-margin: 0.1em; } .hero-home .t-mega .ln > span { display: inline-block; } .hero-home .t-mega .ln:last-child { display: flex; align-items: center; gap: 0.18em; } .hero-home .t-mega .ln:last-child::after { content: ""; order: 1; flex: 1 1 auto; height: 3px; margin-top: 0.12em; background: var(--red); transform-origin: 0 50%; } .hero-home .t-mega .ln:last-child::before { content: ""; order: 2; flex: none; width: 0.24em; height: 0.35em; margin-top: 0.02em; background: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b80cbe82572bf1191d8_sitc-icon-pin-for-light-backgrounds.svg") center / contain no-repeat; } .hero-home .words > .t-mega + * { margin-top: var(--u3); } .hero-home .lead { max-width: 30rem; } .hero-home .btn-row { margin-top: var(--u4); } .hero-home .stage { position: relative; display: grid; margin-inline: calc(var(--pad) * -1); padding: var(--u6) 0 var(--u6) var(--pad); } .hero-home .block { position: absolute; left: 24%; right: 0; top: 0; bottom: 22%; overflow: hidden; background-color: var(--red); } .hero-home .towers { position: absolute; max-width: none; pointer-events: none; } .hero-home .towers.top { right: 0; top: 0; width: 86%; } .hero-home .towers.low { right: 0; bottom: 0; width: 100%; scale: -1 1; } .hero-home .ph { position: relative; margin: 0; } .hero-home .ph img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .hero-home .ph-hug { z-index: 1; order: -1; justify-self: end; width: min(56%, 360px); } .hero-home .ph-main { z-index: 2; width: 86%; margin-top: -9%; } /* The hug's hard block: Black, 24 px down and out to the left, the City's hard block (About, Sponsorship) */ .hero-home .ph-hug::before { content: ""; position: absolute; inset: 24px 24px -24px -24px; z-index: -1; background: var(--black); } .hero-home .ph-hug { isolation: isolate; } @media (min-width: 1024px) { .hero-home { padding-block: 0; } .hero-home .hh { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); min-height: min(calc(100svh - var(--header-h)), 880px); } .hero-home .words { align-self: center; padding-block: var(--u6); } .hero-home .stage { margin: 0 calc(var(--edge) * -1) 0 0; padding: var(--u6) 0; align-content: center; } .hero-home .block { left: 20%; bottom: 0; } .hero-home .ph-hug { width: min(54%, 360px); } .hero-home .ph-main { width: 80%; margin-top: -12%; } } /* The load moment: each headline line rises out of its own mask, 90 ms apart; the lead and the button follow; the Red block opens from the right, the towers settle, the photos unmask; then the line runs out of "meet" and the pin drops onto its end. Readable from the first frame to the last: nothing waits more than 0.5 s. */ @keyframes line-up { from { transform: translateY(115%); } } @keyframes block-open { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } @keyframes tower-in { from { opacity: 0; transform: translateY(14%); } } @keyframes tower-down { from { opacity: 0; transform: translateY(-14%); } } @keyframes draw-x { from { transform: scaleX(0); } } @keyframes pin-drop { from { opacity: 0; transform: translateY(-60%); } } @media (prefers-reduced-motion: no-preference) { .js .hero-home .t-mega .ln > span { animation: line-up 900ms var(--ease-out) both; } .js .hero-home .t-mega .ln:nth-child(2) > span { animation-delay: 90ms; } .js .hero-home .t-mega .ln:nth-child(3) > span { animation-delay: 180ms; } .js .hero-home .t-mega .ln:last-child::after { animation: draw-x 700ms var(--ease-out) 520ms both; } .js .hero-home .t-mega .ln:last-child::before { animation: pin-drop 500ms var(--ease-out) 1000ms both; } .js .hero-home .words > :not(h1) { animation: rise 800ms var(--ease-out) 260ms both; } .js .hero-home .words > .btn-row { animation-delay: 330ms; } .js .hero-home .block { animation: block-open 1000ms var(--ease-out) 60ms both; } .js .hero-home .towers.top { animation: tower-down 1400ms var(--ease-out) 200ms both; } .js .hero-home .towers.low { animation: tower-in 1400ms var(--ease-out) 200ms both; } .js .hero-home .ph-main img { animation: unmask 1100ms var(--ease-out) 260ms both; } .js .hero-home .ph-hug img { animation: unmask 1100ms var(--ease-out) 420ms both; } .js .hero-home .ph-hug::before { animation: rise 900ms var(--ease-out) 520ms both; } } /* Scroll depth (browsers with scroll-driven animations; the rest stand still): over the first screen of scrolling the words lift a little faster than the page, the photos and the hanging towers fall behind it at two speeds, and the rising towers sink, so the city opens up as the visitor scrolls on. Translate only, on the browser's own thread. */ @keyframes depth { to { translate: 0 var(--depth); } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .hero-home :is(.words, .ph-main, .ph-hug, .towers) { animation-name: depth; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0 100vh; } .hero-home .words { --depth: -56px; } .hero-home .ph-main { --depth: 110px; } .hero-home .ph-hug { --depth: 190px; } .hero-home .towers.top { --depth: 150px; } .hero-home .towers.low { --depth: 120px; } /* the towers keep their load moment: both animations run, each on its own property */ .js .hero-home .towers.top { animation: tower-down 1400ms var(--ease-out) 200ms both, depth linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; } .js .hero-home .towers.low { animation: tower-in 1400ms var(--ease-out) 200ms both, depth linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; } } } /* 2. The statement band: the towers grow into the band from its edges as it scrolls in (the hanging ones down from the top, the standing ones up from the foot), flush with its edges once it is in view; the claim arrives word by word, the rest of the sentence after it. */ .statement { position: relative; overflow: clip; } .statement .claim .w { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .rise-on .statement .claim .w { transition: opacity 500ms var(--ease-out) calc(var(--i) * 70ms), transform 800ms var(--ease-out) calc(var(--i) * 70ms); } .rise-on .statement .claim:not(.in) .w { opacity: 0; transform: translateY(0.45em); } .rise-on .statement .then { transition: opacity 600ms var(--ease-out) 450ms, translate 800ms var(--ease-out) 450ms; } .rise-on .statement .then:not(.in) { opacity: 0; translate: 0 16px; } } @keyframes grow-up { from { translate: 0 45%; } to { translate: 0 0; } } @keyframes grow-down { from { translate: 0 -45%; } to { translate: 0 0; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .statement { view-timeline: --statement block; } .statement .towers { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --statement; animation-range: entry 0% cover 45%; } .statement .towers.l { animation-name: grow-up; } .statement .towers.r { animation-name: grow-down; } } } /* 3. The doors. One row; from 1100 px the three share one grid by subgrid, so labels, names, lines and links start on the same lines across the row. Door 1 (guests) keeps its paint art exactly (door.svg, its rules above). Door 2 (pros) wears a little of the Collective: a Cream square, the panel photo whole at 4:3 on its Sand block, the label in the Collective script, the name in serif capitals, Brown rule and Mocha link. Door 3 (brands) is plain City: the photo on a Red hard block set 16 px down and out, that slides out a little more on hover. The doors arrive one after another; each picture leans toward the mouse. */ .ways.trio .pic { transform: perspective(1100px) rotateX(calc(var(--ty, 0) * -4deg)) rotateY(calc(var(--tx, 0) * 5deg)); transition: transform 700ms var(--ease-out); } .ways.trio .pic.is-tilting { transition-duration: 160ms; } .ways.trio .pic > .col-door { aspect-ratio: 3 / 2; display: grid; align-content: center; padding: 4% 10% 6% 6%; background: var(--cream); } /* the photo fills its frame; the Sand block still shows right and below */ .ways.trio .col-door .ph-wrap { transition: transform 700ms var(--ease-out); } .ways.trio .door-pro .stack { border-top-color: var(--brown); } .ways.trio .door-pro .label.col-script { font-size: clamp(30px, 2.6vw, 40px); letter-spacing: 0; color: var(--mocha); text-transform: lowercase; } .ways.trio .door-pro h3.col-caps { font-size: min(var(--fs-display), calc(100cqi / 6.2)); font-weight: 300; line-height: 1.04; color: var(--brown); } .ways.trio .door-pro .more { color: var(--mocha); } .ways.trio > .way.door-brand .pic::before { content: ""; position: absolute; z-index: -1; inset: 16px -16px -16px 16px; background: var(--red); } .ways.trio .door-brand .pic > figure { transition: transform 700ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .ways.trio .door-brand.tile:hover .pic > figure { transform: translate(-6px, -6px); } .ways.trio .door-pro.tile:hover .ph-wrap { transform: translateY(-6px); } } @media (min-width: 1100px) { .ways.trio .pic > .col-door { aspect-ratio: 1; padding: 7% 11% 11% 7%; align-content: center; } /* the photo fills the square frame: a square crop that shows x .19 to .86 of the picture, both edges fall between people, no face sliced */ .ways.trio .col-door .ph-wrap img { aspect-ratio: 1; object-fit: cover; object-position: 57% 50%; } /* a size container cannot be a subgrid, so the row is the container here and each name is fitted to a third of it */ .ways.trio { grid-template-rows: repeat(5, auto); row-gap: 0; container-type: inline-size; } .ways.trio .stack { container-type: normal; } .ways.trio .way h3 { font-size: min(var(--fs-display), calc((100cqi - 2 * var(--u4)) / 3 / 5.3)); } .ways.trio .door-pro h3.col-caps { font-size: min(var(--fs-display), calc((100cqi - 2 * var(--u4)) / 3 / 6.2)); } .ways.trio > .way { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; } .ways.trio > .way > .pic { margin-bottom: var(--u6); } .ways.trio .stack { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; } .ways.trio .stack > * { margin: 0; } .ways.trio .stack > .label { align-self: end; padding-bottom: var(--u2); } .ways.trio .stack > h3 { align-self: start; padding-bottom: var(--u2); } .ways.trio .stack > p:last-child { align-self: end; padding-top: var(--u3); } } @media (prefers-reduced-motion: no-preference) { .rise-on .ways.trio > .way { transition: opacity 700ms var(--ease-out) calc(var(--i) * 120ms), translate 900ms var(--ease-out) calc(var(--i) * 120ms); } .rise-on .ways.trio > .way:not(.in) { opacity: 0; translate: 0 56px; } } /* 4. The dark STRNGTH. band: the seven colors as one dry brush swath across the top edge (art.py tour-night, printed normal on Black), wiped in from the left as the band arrives; the name lettering rises under it, then "Movement Tour". The city posters lift and turn a little under the mouse. Paint here and on door 1 only. */ .tour-night { padding-top: 0; } .tour-night .night-paint { display: block; width: 100%; max-width: none; height: clamp(88px, 11vw, 176px); object-fit: cover; margin-bottom: var(--u4); pointer-events: none; } .tour-night .tour-mark { display: inline-flex; } .tour-night .city-card .poster { transition: transform 600ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tour-night .city-card a:hover .poster { transform: translateY(-10px) rotate(-1.5deg); } .tour-night .city-card:nth-child(even) a:hover .poster { transform: translateY(-10px) rotate(1.5deg); } } @media (prefers-reduced-motion: no-preference) { .rise-on .tour-night .night-paint { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--ease-out); } .rise-on .tour-night .night-paint:not(.in) { clip-path: inset(0 100% 0 0); } .rise-on .tour-night .tour-head .tour-mark, .rise-on .tour-night .tour-head .tour-sub { transition: opacity 700ms var(--ease-out) 250ms, transform 900ms var(--ease-out) 250ms; } .rise-on .tour-night .tour-head .tour-sub { transition-delay: 450ms; } .rise-on .tour-night .tour-head:not(.in) :is(.tour-mark, .tour-sub) { opacity: 0; transform: translateY(40px); } } /* 5. Next dates: a run of tickets on one Red time line. Each ticket hangs from the line, a Red dot at its stop: on top, the event's own picture (square, never drawn wider than it holds detail) beside its date stamp (the day at Mega, the month in Red above it, the weekday and year under it; a date to come is the site's dashed blank); then a dashed tear line with a notch at each end; then kind, name, place and its link, 48 px clear of the picture (the spacing floor) and wide enough for 36 characters a line. The line draws itself stop by stop as the tickets arrive; a ticket lifts and leans toward the mouse. Two across from 900 px, one under it; on a phone the stamp sits over the picture. */ .next-dates { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); overflow: clip; } .tk-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u8) var(--u3); padding-top: 8px; } @media (min-width: 900px) { .tk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tk { display: grid; } .tk-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--white); transform: perspective(1000px) rotateX(calc(var(--ty, 0) * -3deg)) rotateY(calc(var(--tx, 0) * 4deg)) translateY(var(--lift, 0px)); transition: transform 700ms var(--ease-out); } .tk-card.is-tilting { transition-duration: 160ms; } @media (hover: hover) and (pointer: fine) { .tk.tile:hover .tk-card { --lift: -8px; } .tk.tile:hover h3 { text-decoration-color: currentColor; } } /* the time line on each ticket's top edge runs on across the gap to the next one; a row's last runs to the screen edge */ .tk-card::before { content: ""; position: absolute; z-index: 1; left: 0; right: calc(var(--u3) * -1); top: -1.5px; height: 3px; background: var(--red); transform-origin: 0 50%; } .tk-card::after { content: ""; position: absolute; z-index: 1; left: -2px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--ground-2); } .tk:last-child .tk-card::before { right: calc(var(--edge) * -1); } @media (min-width: 900px) { .tk:nth-child(2n) .tk-card::before { right: calc(var(--edge) * -1); } } @media (max-width: 899px) { .tk .tk-card::before { right: calc(var(--edge) * -1); } } .tk-top { display: grid; grid-template-columns: minmax(0, 1fr); } .tk-pic { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--ground-2); } .tk-pic img { width: 100%; height: 100%; object-fit: cover; } .tk-date { --day: min(var(--fs-mega), 104px); --cap: calc(var(--fs-caption) * 1.3); container-type: inline-size; display: grid; grid-template-rows: var(--cap) calc(var(--day) * 0.92) calc(var(--cap) + var(--u1)); align-content: center; order: -1; padding: var(--u4) 14px var(--u6); } .tk-date .mo { font-weight: 600; font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red-text); } .tk-date b { align-self: end; font-weight: 800; font-size: min(var(--day), 62cqi); line-height: 0.86; letter-spacing: -0.04em; } .tk-date b.span { font-size: min(calc(var(--day) * 0.6), 26cqi); line-height: 1; white-space: nowrap; letter-spacing: -0.03em; } .tk-date .yr { margin-top: var(--u1); font-weight: 600; font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; } .tk-date .blank { align-self: end; width: calc(var(--day) * 1.1); height: calc(var(--day) * 0.7); border: 2px dashed currentColor; } @media (min-width: 640px) { .tk-top { grid-template-columns: min(240px, 44%) minmax(0, 1fr); } .tk-date { order: 0; align-content: end; padding: var(--u4) var(--u3) var(--u3) var(--u6); } } .tk-body { --notch: 12px; position: relative; display: grid; align-content: start; gap: var(--u1); padding: var(--u6) 14px var(--u4); border-top: 2px dashed color-mix(in oklab, var(--black) 35%, transparent); } @media (min-width: 640px) { .tk-body { padding-inline: var(--u3); } } .tk-body::before, .tk-body::after { content: ""; position: absolute; top: calc(var(--notch) * -1 - 1px); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--ground-2); } .tk-body::before { left: calc(var(--notch) * -1); } .tk-body::after { right: calc(var(--notch) * -1); } .tk-body .kind { font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--red-text); } .tk-body h3 { font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); text-wrap: balance; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color var(--dur-menu) var(--ease-out); } .tk-body p:not(.kind) { max-width: var(--measure); } .tk-body .more { margin-top: var(--u2); justify-self: start; } .tk-pic img[src$="spons-outdoor.webp"] { object-position: 87% 50%; } .tk-pic img[src$="cities/phoenix.webp"] { object-position: 50% 0; } .tk-pic img[src$="cities/chicago.webp"] { object-position: 50% 20%; } @media (prefers-reduced-motion: no-preference) { .rise-on .tk { transition: opacity 700ms var(--ease-out) calc(var(--i) * 130ms), translate 900ms var(--ease-out) calc(var(--i) * 130ms); } .rise-on .tk:not(.in) { opacity: 0; translate: 0 64px; } .rise-on .tk .tk-card::before { transition: transform 900ms var(--ease-out) calc(var(--i) * 130ms + 200ms); } .rise-on .tk:not(.in) .tk-card::before { transform: scaleX(0); } .rise-on .tk .tk-card::after { transition: transform 500ms var(--ease-out) calc(var(--i) * 130ms + 150ms); } .rise-on .tk:not(.in) .tk-card::after { transform: scale(0); } } /* Movement Tour hero (Elliot, Nov 11): the STRNGTH. name lettering with its pin as the headline, "The Movement Tour" on one line under it */ .hero-poster .tour-h1 { display: grid; justify-items: start; gap: var(--u2); font-size: min(var(--fs-mega) * 1.25, 21cqi); line-height: 1; } .hero-poster .tour-h1 .tour-mark { font-size: inherit; letter-spacing: -0.03em; } .hero-poster .tour-h1 .tour-sub { font-size: min(var(--fs-display), 9.4cqi); line-height: 1.05; letter-spacing: -0.025em; white-space: nowrap; } .art .print img[src$="fest-reach.webp"] { object-position: 60% 20%; } /* the man in the cap and the woman beside him, hands up */ /* Movement Tour, the seven stages (Elliot, Nov 12: "each stage should get its own look and feel"): one paper tile per stage on the Black band, each in its own STRNGTH. color (letter order; which letter is which stage is still open), with its own printed mark from art.py (stage-*.svg, Black and White ink, printed normal) and its own arrangement: the wide first and last tiles set words beside the mark, the middle five stack them, the mark on top or below in turn. One family: the same square tile, the same words, the same print tools. Read in order, left to right. */ .stages > .head { max-width: 40rem; margin-bottom: var(--u8); } .stage-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--u2); list-style: none; margin: 0; padding: 0; } .stage-grid > .stage { display: grid; grid-column: span 4; } .stage-grid > .st-movement, .stage-grid > .st-game { grid-column: span 7; } .stage-grid > .st-reset, .stage-grid > .st-education { grid-column: span 5; } .st-card { --st-ink: var(--black); position: relative; display: flex; flex-direction: column; min-height: 360px; overflow: hidden; background: var(--st); color: var(--st-ink); transform: perspective(1200px) rotateX(calc(var(--ty, 0) * -3deg)) rotateY(calc(var(--tx, 0) * 4deg)) translateY(var(--lift, 0px)); transition: transform 700ms var(--ease-out); } .st-card.is-tilting { transition-duration: 160ms; } .st-words { position: relative; z-index: 1; padding: var(--u4); } .st-words h3 { font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.02em; text-wrap: balance; } .st-words p { margin-top: var(--u1); max-width: 26rem; } .st-mark { display: block; flex: 1 1 auto; width: 100%; min-height: 180px; height: auto; max-width: none; pointer-events: none; transition: transform 900ms var(--ease-out); } .st-movement .st-card { --st: var(--s-red); --st-ink: var(--white); } .st-reset .st-card { --st: var(--t-teal); } .st-connection .st-card { --st: var(--r-yellow); } .st-market .st-card { --st: var(--n-pink); } .st-frequency .st-card { --st: var(--g-blue); --st-ink: var(--white); } .st-education .st-card { --st: var(--t-orange); } .st-game .st-card { --st: var(--h-green); } .st-movement h3, .st-game h3 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; } :is(.st-reset, .st-market) .st-mark { order: -1; } /* the ripples and the awning sit above their words */ .st-mark { transform-origin: 50% 100%; } :is(.st-reset, .st-market) .st-mark { transform-origin: 50% 0; } @media (min-width: 960px) { .st-game .st-card { flex-direction: row-reverse; } .st-game .st-words { flex: 0 0 46%; align-self: flex-end; } .st-game .st-mark { flex: 1 1 auto; width: auto; min-width: 0; height: auto; } .st-movement .st-card { justify-content: flex-end; } /* the strides run up behind the name, Black under White */ .st-movement .st-mark { position: absolute; top: -44%; right: 0; bottom: auto; width: 100%; height: 124%; min-height: 0; transform-origin: 100% 50%; } .st-game .st-mark { transform-origin: 0 50%; } } @media (min-width: 640px) and (max-width: 959px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stage-grid > .stage, .stage-grid > .st-education { grid-column: span 1; } .stage-grid > .st-movement, .stage-grid > .st-reset, .stage-grid > .st-game { grid-column: span 2; } /* 2, 2, 1 + 1, 1 + 1, 2: the longest line keeps 36 characters */ :is(.st-movement, .st-reset, .st-game) .st-mark { flex: 0 0 auto; height: 240px; } } @media (max-width: 639px) { .stage-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-inline: calc(var(--pad) * -1); } /* tiles run to the screen edges; words keep the page margin */ .stage-grid > .stage, .stage-grid > .st-movement, .stage-grid > .st-reset, .stage-grid > .st-education, .stage-grid > .st-game { grid-column: auto; } .st-card { min-height: 0; } .st-words { padding: var(--u4) var(--pad); } .st-mark { flex: 0 0 auto; height: 160px; min-height: 0; } } @media (hover: hover) and (pointer: fine) { .stage.tile:hover .st-card { --lift: -8px; } .stage.tile:hover .st-mark { transform: scale(1.06); } } @media (prefers-reduced-motion: no-preference) { .rise-on .stage-grid > .stage { transition: opacity 700ms var(--ease-out) calc(var(--i) * 120ms), translate 900ms var(--ease-out) calc(var(--i) * 120ms); } .rise-on .stage-grid > .stage:not(.in) { opacity: 0; translate: 0 56px; } .rise-on .stage-grid > .stage .st-mark { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-out) calc(var(--i) * 120ms + 250ms), transform 900ms var(--ease-out); } .rise-on .stage-grid > .stage:not(.in) .st-mark { clip-path: inset(0 100% 0 0); } } /* Movement Tour, the Chicago week (#chicago; Elliot, Nov 12: the old corner skyline was "kind of ass"): one composed print, square, run to the screen edge, sized in the box's height (cqh) so it composes the same at every width. The seven colors in letter order make one round rough print behind the Hancock end of the skyline (a black and white cutout, Elliot's chosen part of the city); the Black stroke with Red splatter sits behind the buildings and runs off the right and bottom edges. Still: no train, no entrance, no mouse motion (Elliot, Nov 11). Below 960 px the box ends on a torn paper edge, not a flat cut. */ .chi-art { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); position: relative; width: calc(100% + var(--edge)); aspect-ratio: 1 / 1; max-height: 820px; overflow: hidden; container-type: size; } .chi-art > img { position: absolute; max-width: none; pointer-events: none; } /* still art: no entrance, no mouse motion (Elliot, Nov 11) */ .chi-paint { left: calc(56% - 34cqh); top: 6cqh; width: 68cqh; height: 68cqh; } /* the seven colors as one round print, centered on the tower (designer rethink, Nov 11) */ .chi-skyline { left: 56%; bottom: 0; height: min(74cqh, 604px); width: auto; translate: -62.9% 0; /* the tower's axis on the disc's center */ filter: grayscale(1) contrast(1.12) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(4px 8px 6px rgb(23 31 30 / .28)); } /* black and white cutout, white paper edge, short hard paper shadow (look-strngth.md); the Hancock end of the skyline only, feet on the bottom edge, never above its 604 px file (Elliot, Nov 11) */ .chi-foot { left: 0; bottom: -11%; width: 100%; height: 30%; } /* the Black runs off the section's bottom edge */ @media (min-width: 960px) { /* Elliot, Nov 11: the art sits flush on the section's bottom edge, like the hero */ #chicago { padding-bottom: 0; } #chicago .split { align-items: end; } #chicago .words { align-self: center; padding-bottom: var(--section-gap); } } @media (max-width: 959px) { .split > .chi-art { order: -1; width: calc(100% + 2 * var(--edge)); margin-inline: calc(var(--edge) * -1); margin-bottom: var(--u3); clip-path: polygon(0 0, 100% 0, 100% 99%, 96.4% 98.8%, 92.2% 98.9%, 88.1% 99.7%, 85.4% 98.7%, 82.1% 98.7%, 80.5% 99.2%, 78.5% 99.1%, 75.5% 99.7%, 73.6% 99.4%, 69.5% 98.9%, 67.8% 98.8%, 66.1% 99%, 64.5% 99.7%, 60.5% 99.5%, 58.6% 98.6%, 54.6% 99.4%, 50.4% 99.1%, 47% 99.5%, 42.8% 99%, 38.5% 98.7%, 36.3% 99.3%, 34.6% 99.6%, 33.2% 99.4%, 30.1% 99.7%, 26.7% 99.4%, 24.5% 98.8%, 21.8% 99.4%, 19% 98.9%, 17.7% 98.6%, 16.4% 98.9%, 12.5% 99.7%, 8.8% 99.3%, 5.7% 99.7%, 4.4% 99.5%, 0 99.3%); } /* torn paper bottom edge */ .chi-paint { left: calc(53% - 34cqh); } /* edge to edge here: the disc and the tower near the middle */ .chi-skyline { left: 53%; } } /* ---------- STRENGTH Collective page, round 15 (Elliot, Nov 11: bring in the best of the live Collective site) ---------- Three pieces, in the page's own look (Cream, Sand, Mocha, serif capitals; no grain): the latest event as a row with its real poster, the series rows with a cutout person standing on the line under the rows that hold one, and "In the room", a phone with the reel playing in it. Motion: each arrives once as it scrolls in (site.js, data-rise; transform and opacity only). Reduced motion or no script: they simply show. */ /* The latest event: words, then its poster on a Sand block (look-collective.md, Depth). The poster is never drawn bigger than its file (1200 x 1509): at most 400 px wide. */ .col-next-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--split-gap); align-items: center; } .col-next-name { font-size: var(--fs-display); line-height: 1; } .col-next .words > .label + .col-next-name { margin-top: var(--u2); } .col-next-when { margin-top: var(--u3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--u1) var(--u3); font-family: "Noto Serif Display", serif; font-weight: 300; text-transform: uppercase; letter-spacing: var(--ls-col-caps); font-size: var(--fs-h2); line-height: 1.2; } .col-next-when > span + span { padding-left: var(--u3); border-left: 1px solid var(--taupe); } .col-next .rule + p { margin-top: var(--u3); max-width: 34rem; } .col-next-soon { margin-top: var(--u2); color: var(--taupe-text); } @media (max-width: 639px) { .col-next-when { flex-direction: column; align-items: flex-start; } .col-next-when > span + span { padding-left: 0; border-left: 0; } } /* date and city on two lines, no stray line */ .col-poster { position: relative; justify-self: end; width: min(100%, 400px); margin: 0 var(--collective-block-offset) var(--collective-block-offset) 0; } .col-poster::before { content: ""; position: absolute; inset: var(--collective-block-offset) calc(var(--collective-block-offset) * -1) calc(var(--collective-block-offset) * -1) var(--collective-block-offset); background: var(--sand); box-shadow: var(--collective-shadow); } .col-poster img { position: relative; width: 100%; height: auto; } @media (max-width: 959px) { .col-next-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--u8); } .col-poster { justify-self: start; width: min(calc(100% - var(--collective-block-offset)), 340px); } } /* The series rows: a cutout person stands on the row's bottom line, beside its words, and rises past the row's top line. Only a series that holds its own cutout gets one (WMN+, Yoga); the others keep the empty place. */ .series.col-cast { --cast-w: 112px; --cast-h: 128px; } /* under the row height, so one person never covers the next */ .series.col-cast li { grid-template-columns: minmax(0, 1fr) var(--cast-w); column-gap: var(--u3); } .series.col-cast li > :not(.col-cut) { grid-column: 1; } .series.col-cast .col-cut { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: center; width: auto; height: var(--cast-h); max-width: none; margin: calc(var(--cast-h) * -0.4) 0 calc(var(--u3) * -1); pointer-events: none; transition: translate 600ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .series.col-cast .tile:hover .col-cut { translate: 0 -6px; } } @media (max-width: 639px) { .series.col-cast { --cast-w: 84px; --cast-h: 112px; } .series.col-cast li { column-gap: var(--u2); } .series.col-cast li:not(:has(.col-cut)) > p { grid-column: 1 / -1; } /* a row with no person keeps its full width on a phone */ } /* In the room: a Brown band, the words on the left, a drawn phone (no device image) on the right with the reel in it. The screen is 9:16, the reel's own shape, so nothing is cropped; at most 300 px wide, under the file's 540. */ .col-room { background: var(--band); color: var(--band-ink); --focus: var(--cream); padding-block: var(--u12); overflow: clip; } .col-room-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--split-gap); align-items: center; } .col-room .words > .t-section + p { margin-top: var(--u3); font-size: var(--fs-sub); line-height: 1.4; max-width: 32rem; } .col-phone { --w: clamp(220px, 19vw, 300px); position: relative; justify-self: center; width: var(--w); padding: calc(var(--w) * 0.038); border-radius: calc(var(--w) * 0.15); background: #1d1a17; rotate: 2deg; box-shadow: inset 0 0 0 1.5px #4a4038, 0 32px 64px rgb(0 0 0 / 0.35); } .col-phone-screen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: calc(var(--w) * 0.112); background: var(--mocha); } .col-phone-screen video { display: block; width: 100%; height: 100%; object-fit: cover; } .col-phone-screen::before { content: ""; position: absolute; z-index: 1; top: 2.4%; left: 50%; width: 31%; height: 4.6%; translate: -50% 0; border-radius: 999px; background: #1d1a17; } /* the island */ .col-phone-btn { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(250 246 240 / 0.5); background: rgb(59 31 7 / 0.6); color: var(--cream); cursor: pointer; } .col-phone-btn:focus-visible { outline: var(--focus-width) solid var(--cream); outline-offset: 3px; } .col-phone-btn[hidden] { display: none; } .col-phone-btn .i-play, .col-phone-btn[aria-pressed="true"] .i-pause { display: none; } .col-phone-btn[aria-pressed="true"] .i-play { display: block; } @media (max-width: 767px) { .col-room-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--u8); } .col-phone { --w: min(260px, 70vw); } } @media (prefers-reduced-motion: no-preference) { .rise-on .col-next-row > [data-rise] { transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on .col-next-row > .col-poster { transition-delay: 150ms; } .rise-on .col-next-row > [data-rise]:not(.in) { opacity: 0; translate: 0 48px; } .rise-on .col-cast > li[data-rise] { transition: opacity 600ms var(--ease-out) calc(var(--i) * 90ms), translate 800ms var(--ease-out) calc(var(--i) * 90ms); } .rise-on .col-cast > li[data-rise]:not(.in) { opacity: 0; translate: 0 24px; } .rise-on .col-cast > li[data-rise] .col-cut { transition: opacity 700ms var(--ease-out) calc(var(--i) * 90ms + 200ms), transform 900ms var(--ease-out) calc(var(--i) * 90ms + 200ms), translate 600ms var(--ease-out); } .rise-on .col-cast > li[data-rise]:not(.in) .col-cut { opacity: 0; transform: translateY(40px); } /* the rise moves transform, the hover lift moves translate, so a hover never waits on the rise's delay */ .rise-on .col-room-grid > .words { transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on .col-room-grid > .words:not(.in) { opacity: 0; translate: 0 40px; } .rise-on .col-phone { transition: opacity 800ms var(--ease-out) 120ms, translate 1100ms var(--ease-out) 120ms, rotate 1100ms var(--ease-out) 120ms; } .rise-on .col-phone:not(.in) { opacity: 0; translate: 0 96px; rotate: 8deg; } } /* ---------- Nights for a Cause (pages/womens-boxing-event-milwaukee.html), every class nfc- ---------- Nov 11, Elliot: two big sections, one for Rebels and one for La Femme, each a door to its own landing page. The hero ends on a ring edge (three ropes, the Red post flush right, the Red apron flush on its lower edge); the post runs on down the right edge of the Rebels section. Rebels: Black, its badge, two of its own photos shown whole. La Femme: Red, set in type, with the ring from above drawn flush in the lower right corner (we hold no La Femme photo). Motion is opacity and transform only; reduced motion and no script show everything at once. */ .nfc-hero, .nfc-night { --nfc-post: clamp(16px, 3vw, 48px); --nfc-apron: clamp(16px, 2vw, 32px); } .nfc-hero { padding-bottom: 0; } .nfc-hero-words { display: grid; row-gap: var(--u4); } .nfc-hero .lead { max-width: 30rem; } @media (min-width: 1280px) { .nfc-hero-words { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--u8); align-items: end; } .nfc-hero .lead { padding-bottom: calc(var(--fs-mega) * 0.12); } } .nfc-edge { position: relative; margin-top: var(--u8); height: clamp(88px, 11vw, 176px); } .nfc-edge img { position: absolute; left: 0; top: 0; width: calc(100% - var(--nfc-post)); height: calc(100% - var(--nfc-apron)); transform-origin: 100% 50%; } .nfc-edge::before, .nfc-edge::after, .nfc-post { content: ""; position: absolute; background: var(--red); } .nfc-edge::before { left: 0; right: 0; bottom: 0; height: var(--nfc-apron); } .nfc-edge::after, .nfc-post { right: 0; top: 0; bottom: 0; width: var(--nfc-post); } .nfc-night { position: relative; overflow: clip; padding-block: var(--u12); } @media (min-width: 960px) { .nfc-night { min-height: min(100svh, 1000px); display: grid; align-items: center; } } @media (max-width: 639px) { .nfc-night { padding-block: var(--u8); } } /* Rebels for a Cause */ .nfc-rebels { --nfc-padr: max(var(--pad), calc(var(--nfc-post) + var(--u4))); } .nfc-rebels-grid { display: grid; row-gap: var(--u8); padding-right: var(--nfc-padr); } @media (min-width: 960px) { .nfc-rebels-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); align-items: center; } } @media (min-width: 1300px) { .nfc-rebels-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } } .nfc-badge.art { aspect-ratio: auto; width: clamp(96px, 8vw, 128px); margin-bottom: var(--u4); } .nfc-badge img { display: block; width: 100%; height: auto; } .nfc-words .t-section { margin-top: var(--u2); } .nfc-where { margin-top: var(--u3); font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .nfc-says { margin-top: var(--u2); max-width: 30rem; } .nfc-words .btn-row { margin-top: var(--u4); } .nfc-pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--u3); align-items: start; max-width: 772px; } .nfc-pics figure { margin: 0; } .nfc-pics figure + figure { margin-top: var(--u12); } .nfc-pics img { display: block; width: 100%; height: auto; } @media (min-width: 1300px) { /* the photos reach out of the grid toward the post, never past 630 px (their file) */ .nfc-pics { max-width: 1284px; margin-right: min(0px, calc(var(--nfc-post) + var(--u6) - var(--nfc-padr) - (100vw - min(100vw, var(--content-max) + 2 * var(--pad))) / 2)); } } @media (max-width: 639px) { .nfc-pics { column-gap: var(--u2); margin-left: calc(-1 * var(--pad)); } .nfc-pics figure + figure { margin-top: var(--u6); } } /* La Femme Fight Night */ .nfc-femme-words { position: relative; z-index: 1; } .nfc-femme-name { margin-top: var(--u3); font-weight: 800; } .nfc-big { display: block; font-size: clamp(64px, 10.5vw, 168px); line-height: 0.88; letter-spacing: -0.045em; } .nfc-small { display: block; margin-top: var(--u2); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .nfc-femme-text { margin-top: var(--u6); max-width: 32rem; } .nfc-femme-text .btn-row { margin-top: var(--u4); } .nfc-ring { position: absolute; right: 0; bottom: 0; width: min(32vw, 520px); aspect-ratio: 1; } .nfc-ring img { display: block; width: 100%; height: 100%; } .nfc-stamp { position: absolute; right: 7%; top: 48%; padding: var(--u1) var(--u3); border: 3px solid var(--white); outline: 1px solid var(--white); outline-offset: 4px; color: var(--white); background: var(--black); font-weight: 800; font-size: clamp(18px, 2vw, 32px); line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transform: rotate(-8deg); } @media (max-width: 959px) { .nfc-femme { padding-bottom: 0; display: flex; flex-direction: column; } .nfc-ring { position: relative; order: 2; align-self: flex-end; width: min(72vw, 420px); margin-top: var(--u8); } } /* The temporary La Femme page */ .nfc-stub { padding-block: var(--u12); } @keyframes nfc-draw { from { opacity: 0; transform: scaleX(0.5); } } @media (prefers-reduced-motion: no-preference) { .js .nfc-hero .ln, .js .nfc-hero .lead { animation: rise 800ms var(--ease-out) both; } .js .nfc-hero .ln:nth-child(2) { animation-delay: 90ms; } .js .nfc-hero .lead { animation-delay: 220ms; } .js .nfc-edge img { animation: nfc-draw 1200ms var(--ease-out) 200ms both; } .rise-on .nfc-night [data-rise] { transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on .nfc-night [data-rise]:not(.in) { opacity: 0; translate: 0 40px; } .rise-on .nfc-femme .nfc-femme-name { transition-delay: 80ms; } .rise-on .nfc-femme .nfc-femme-text { transition-delay: 160ms; } .rise-on .nfc-night .nfc-ring[data-rise] { transition: opacity 700ms var(--ease-out), translate 1100ms var(--ease-out); } .rise-on .nfc-night .nfc-ring[data-rise]:not(.in) { translate: 12% 12%; } .rise-on .nfc-ring .nfc-stamp { transition: opacity 300ms var(--ease-out) 700ms, transform 500ms var(--ease-out) 700ms; } .rise-on .nfc-ring:not(.in) .nfc-stamp { opacity: 0; transform: rotate(-20deg) scale(1.5); } } /* ---------- STRENGTH Collective education series pages (pages/collective-*.html), every new class cs- ---------- One template, four pages: /collective/pilates (PLTS+), /collective/womens-health (WMN+), /collective/mens-health (MN+), /collective/yoga (Yoga Summit). The Collective look (Cream, Sand, Mocha, Brown; serif capitals; the series name in its Elsie Black lockup; no grain). Reused as they are: the latest event row (.col-next), the workshop pairs (.two-certs), the phone with a reel (.col-room), the series rows with cutouts (.series.lockups.col-cast). Motion: opacity and transform only; a clip-path unmask ends at an inset. Reduced motion or no script: all shows. */ /* The hero: words on the left (the series name as its lockup, fitted by --em, the longest line in em), a photo on its Sand block on the right, never drawn wider than 440 px (portrait) or 560 px (landscape, .wide); every file is wider. */ .cs-hero { padding-block: var(--u8); } .cs-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--split-gap); align-items: center; } .cs-hero .words { container-type: inline-size; } .cs-name { margin-top: var(--u3); font-size: min(136px, calc(100cqi / var(--em, 4)), 15svh); line-height: 1; letter-spacing: -0.02em; } .cs-name .ln { display: block; } .cs-hero .cs-name + .col-script.cross { margin-top: 0.35em; } .cs-hero .lead { margin-top: var(--u3); max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .cs-hero .lead + p { margin-top: var(--u3); } .cs-hero .btn-row { margin-top: var(--u4); } .cs-hero-ph { justify-self: end; width: min(calc(100% - var(--collective-block-offset)), 440px); } .cs-hero-ph.wide { width: min(calc(100% - var(--collective-block-offset)), 560px); } @media (min-width: 960px) { .cs-hero-grid:has(> .wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* a landscape photo takes half */ .cs-hero.bare .cs-hero-grid { grid-template-columns: minmax(0, 1fr); } .cs-hero.bare .words { max-width: 52rem; } @media (max-width: 959px) { .cs-hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--u8); } .cs-hero-ph, .cs-hero-ph.wide { justify-self: start; width: min(calc(100% - var(--collective-block-offset)), 420px); } } @media (max-width: 639px) { .cs-hero { padding-block: var(--u6) var(--u8); } } /* The workshops: .two-certs on Brown; under each name the teacher, small capitals; one line about the day under them. */ .cs-by { font-weight: 600; font-size: var(--fs-caption); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); } .two-certs.cs-shops > section > .cs-by { margin-top: var(--u1); } .two-certs.cs-shops > section > p:not(.col-num, .cs-by) { max-width: 34rem; } .cs-note { margin-top: var(--u8); max-width: 44rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } /* The people: three cards, each photo whole at its own 3:2 on its Sand block (at most 360 px wide; files are 800). */ .cs-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u8) var(--u6); } .cs-people > li > * + * { margin-top: var(--u2); } .cs-people .ph-wrap + h3 { margin-top: var(--u6); } .cs-people .h2 { font-size: var(--fs-h2); } .cs-people p:not(.cs-by) { max-width: 30rem; } @media (max-width: 1099px) { .cs-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .cs-people { grid-template-columns: minmax(0, 1fr); } .cs-people .ph-wrap { max-width: 360px; } } /* The one-line approach: the long serif at Display, on Sand. On Yoga a cutout stands beside it on the section's floor. */ .cs-say-line { font-size: var(--fs-display); max-width: 18em; text-wrap: balance; } .cs-say .words > .cs-say-line + p { margin-top: var(--u4); } .cs-say-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--split-gap); align-items: end; } .cs-say-cut { width: auto; height: clamp(200px, 22vw, 320px); margin-bottom: calc(var(--section-gap) * -1); filter: grayscale(1); } /* never over its 556 px file */ @media (max-width: 767px) { .cs-say-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .cs-say-cut { justify-self: end; height: 200px; } } /* The gallery: photos side by side, each whole at its own shape, all one height (each grows by its aspect, --ar). */ .cs-gallery { display: flex; align-items: flex-start; gap: var(--u6); } .cs-gallery > figure { flex: var(--ar) 1 0; min-width: 0; } @media (max-width: 767px) { .cs-gallery { flex-direction: column; gap: var(--u8); } .cs-gallery > figure { flex: none; width: min(calc(100% - var(--collective-block-offset)), 420px); } } /* More to learn: the heading and links on the left, the other series as lockup rows on the right. */ .cs-more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--split-gap); row-gap: var(--u6); align-items: start; } .cs-more .words > .t-section + p { margin-top: var(--u4); } .cs-more .words > p + p { margin-top: var(--u1); } .cs-more .words > .series { margin-top: 0; } @media (max-width: 959px) { .cs-more { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: no-preference) { .js .cs-hero .words > * { animation: rise 800ms var(--ease-out) both; } .js .cs-hero .words > :nth-child(2) { animation-delay: 70ms; } .js .cs-hero .words > :nth-child(n+3) { animation-delay: 160ms; } .js .cs-hero .cs-hero-ph img { animation: unmask 1100ms var(--ease-out) 120ms both; } .rise-on :is(.cs-shops > section, .cs-people > li, .cs-gallery > figure, .cs-say .words, .cs-say-cut)[data-rise] { transition: opacity 700ms var(--ease-out) calc(var(--i, 0) * 90ms), translate 900ms var(--ease-out) calc(var(--i, 0) * 90ms); } .rise-on :is(.cs-shops > section, .cs-people > li, .cs-gallery > figure, .cs-say .words, .cs-say-cut)[data-rise]:not(.in) { opacity: 0; translate: 0 40px; } } /* All Events, the four kind tiles' pictures (art.py tile-*, build.py ARMS). Each picture lies flush on its tile's left, right and lower edges, under the words and never behind them, and fills the rest of the tile: the SVG slices to whatever shape the tile has, drawn past its own edges. The Movement Tour's picture grows with its tall tile; the other three are a band of one height. Motion: the picture rises 24 px into place as its tile arrives (site.js .in) and grows 3 percent from its foot on hover; reduced motion or no script shows it at rest. */ .arm .et-art { display: block; flex: 1 0 auto; width: calc(100% + var(--tile-pad) * 2); max-width: none; height: var(--et-h); margin: var(--u4) calc(var(--tile-pad) * -1) 0; transform-origin: 50% 100%; } .arm { --et-h: 168px; } .arm-tour { --et-h: 300px; } @media (min-width: 640px) { .arm { --et-h: 184px; } .arm-tour { --et-h: 340px; } } @media (min-width: 1024px) { .arm { --et-h: 176px; } .arm-tour { --et-h: 420px; } } @media (prefers-reduced-motion: no-preference) { .arm .et-art { transition: transform 900ms var(--ease-out) calc(var(--i) * 90ms + 150ms); } .arms-on .arm:not(.in) .et-art { transform: translateY(24px); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .arms-on .arm.in:hover .et-art { transform: scale(1.03); transition-delay: 0ms; transition-duration: 500ms; } } /* About, the house: three parts (City Events, The Collective, Partnerships), never two plus one alone: 640 to 1199 px the third runs full width under the two, from 1200 px one row of three */ @media (min-width: 640px) { .rows.house.ad-three > li:last-child { grid-column: 1 / -1; } } @media (min-width: 1200px) { .rows.house.ad-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rows.house.ad-three > li:last-child { grid-column: auto; } } /* ---------- MN+ (pages/collective-mens-health.html), every new class mn- ---------- Elliot, Nov 11: "too much like WMN+ ... more Espresso brown (more masculine overall)". A basement room with one light on: Espresso ground, Cream ink, Sand and Mocha as quiet seconds; plain heavy serif capitals, strong rules; one script word, "underground", under the name (Elliot, Nov 11: the name is MN+ only). WMN+ stays light. The stage photo is shown whole (1461 x 1600, never drawn bigger), warmed into the room: grey, then lit in Mocha (luminosity), the black stage melting into the Espresso at its top and left edges. Motion: the words rise, the photo opens from its floor up (clip-path, ends at an inset), the three words arrive one by one. Reduced motion or no script: all shows at once. */ .mn-hero { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; overflow: clip; } .mn-hero-words { container-type: inline-size; padding: var(--u8) var(--u8) var(--u8) var(--edge); } .mn-name { margin-top: var(--u3); font-size: min(208px, calc(100cqi / 2.5), 24svh); line-height: 1; } .mn-name .mn-mark { display: block; font-size: 1em; line-height: 0.92; letter-spacing: -0.03em; } .mn-script { margin-top: 0.1em; font-size: min(96px, calc(100cqi / 5.2), 11svh); color: var(--sand); } .mn-bar { width: 100%; max-width: 30rem; height: 4px; margin: var(--u4) 0 0; border: 0; background: var(--cream); } .mn-lead { margin-top: var(--u3); max-width: 34rem; text-wrap: balance; font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; } .mn-lead + p { margin-top: var(--u3); } .mn-hero .btn-row { margin-top: var(--u4); } .mn-hero-ph { position: relative; align-self: end; max-width: 1461px; background: var(--mocha); } .mn-hero-ph img { width: 100%; height: auto; filter: grayscale(1) contrast(1.12) brightness(0.96); mix-blend-mode: luminosity; } .mn-hero-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--brown), rgb(59 31 7 / 0) 16%), linear-gradient(to bottom, var(--brown), rgb(59 31 7 / 0) 24%); } @media (max-width: 959px) { .mn-hero { grid-template-columns: minmax(0, 1fr); } .mn-hero-words { padding: var(--u6) var(--edge) var(--u8); } .mn-name { font-size: min(168px, calc(100cqi / 2.5)); } .mn-hero-ph { width: 100%; max-width: none; } .mn-hero-ph::after { background: linear-gradient(to bottom, var(--brown), rgb(59 31 7 / 0) 20%); } } /* Training, Recovery, Nutrition: three plain serif capitals on hard rules, the one line about them at their foot. */ .mn-ways { padding-block: var(--u12); } .mn-ways-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--split-gap); align-items: end; border-top: 4px solid var(--cream); padding-top: var(--u4); } .mn-three { container-type: inline-size; font-family: "Noto Serif Display", serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .mn-three .ln { display: block; padding-block: 0.16em 0.12em; font-size: min(120px, calc(100cqi / 6.4)); border-bottom: 1px solid var(--rule); } .mn-three .ln:nth-child(2) { color: var(--sand); } .mn-ways-words > * + * { margin-top: var(--u2); } .mn-life { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; max-width: 26rem; } .mn-life + p { margin-top: var(--u4); color: var(--sand); } @media (max-width: 959px) { .mn-ways-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .mn-three .ln { font-size: calc(100cqi / 6.4); } } @media (max-width: 639px) { .mn-ways { padding-block: var(--u8); } } /* More to learn: grounds moved to Sand on Nov 11 (see "Grounds, Nov 11" at the foot of this file). */ .mn-more .t-section.col-caps { font-weight: 500; } @keyframes mn-light { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } /* ends at an inset, never none */ @media (prefers-reduced-motion: no-preference) { .js .mn-hero-words > * { animation: rise 800ms var(--ease-out) both; } .js .mn-hero-words > :nth-child(2) { animation-delay: 70ms; } .js .mn-hero-words > :nth-child(n+3) { animation-delay: 160ms; } .js .mn-hero-ph { animation: mn-light 1300ms var(--ease-out) 100ms both; } .rise-on .mn-ways [data-rise] { transition: opacity 700ms var(--ease-out) calc(var(--i, 0) * 110ms), translate 900ms var(--ease-out) calc(var(--i, 0) * 110ms); } .rise-on .mn-ways [data-rise]:not(.in) { opacity: 0; translate: 0 32px; } } /* ---------- Showdown and Classic (pages/team-fitness-competition.html), every class sd- ---------- Nov 11, Elliot: "Showdown page ... needs a major lift." One idea: race day, start to finish. The hero is the start line (a Red track in perspective, four lanes numbered 1 to 4, flush to the hero's foot and both screen edges); the Showdown is one team of four (four bibs, each in its lane, on a staggered start, flush right, top and bottom); the prize is a scoreboard ($6,000, dot lamps) and one bar split three ways; the Classic runs from the 2026 court to the 2027 green (one drawing flush to both edges and the section foot); the questions open on a checkered finish. City look only: Red, Black, White, Warm grey. Drawn art, no photos: the posters (soft, other brands' marks) and the hill photo (stretched, not a team) are gone. Motion is opacity, transform and clip-path (ending at an inset); reduced motion or no script: everything stands still and shows. */ .sd-hero, .sd-team, .sd-prize, .sd-classic { --sd-edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); } /* 1. The start line (Black hero) */ .sd-hero { display: flex; flex-direction: column; padding: var(--u6) 0 0; overflow: clip; } @media (min-width: 1024px) { .sd-hero { min-height: min(calc(100svh - var(--header-h)), 960px); } .sd-hero .sd-track { flex: 1 1 0; height: auto; min-height: 280px; } } .sd-hero-words { display: grid; row-gap: var(--u4); } .sd-hero-head .label + .t-mega { margin-top: var(--u3); } .sd-hero .lead { max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .sd-hero-side .btn-row { margin-top: var(--u4); } @media (min-width: 1024px) { .sd-hero-words { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: end; } .sd-hero-side { padding-bottom: calc(var(--fs-mega) * 0.1); } } .sd-track { --sd-d: clamp(380px, 52vw, 820px); position: relative; flex: 1 0 auto; height: clamp(280px, 40vw, 480px); margin-top: var(--u6); perspective: var(--sd-d); perspective-origin: 50% calc(var(--sd-d) * 0.2679); overflow: clip; container-type: inline-size; pointer-events: none; } /* tan(15deg) = 0.2679: with the plane at 75 degrees, that origin puts the horizon on the track's top edge */ .sd-plane { position: absolute; left: 0; right: 0; bottom: 0; height: 420cqi; transform-origin: 50% 100%; transform: rotateX(75deg); background: linear-gradient(90deg, var(--black) 0 1.6%, transparent 1.6% 98.4%, var(--black) 98.4%), linear-gradient(90deg, transparent calc(25% - 0.25cqi), var(--white) 0 calc(25% + 0.25cqi), transparent 0 calc(50% - 0.25cqi), var(--white) 0 calc(50% + 0.25cqi), transparent 0 calc(75% - 0.25cqi), var(--white) 0 calc(75% + 0.25cqi), transparent 0), var(--red); } .sd-finish { position: absolute; left: 1.6%; right: 1.6%; bottom: 150cqi; height: 24cqi; background: conic-gradient(var(--black) 25%, var(--white) 0 50%, var(--black) 0 75%, var(--white) 0) 0 0 / 7.85cqi 12cqi; } .sd-marks { position: absolute; left: 1.6%; right: 1.6%; bottom: 0; height: 80cqi; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; } .sd-marks::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4cqi; height: 2.6cqi; background: var(--white); } .sd-marks span { justify-self: center; margin-bottom: 12cqi; font-weight: 800; font-size: 13cqi; line-height: 0.74; color: var(--white); transform: scaleY(3.2); transform-origin: 50% 100%; } /* 2. STRENGTH Showdown: one team, four lanes (Warm grey) */ .sd-team { position: relative; overflow: clip; padding-block: var(--u12) 0; } .sd-team-words { position: relative; z-index: 1; } .sd-story { margin-top: var(--u4); max-width: 32rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .sd-four { display: flex; align-items: center; gap: var(--u3); margin-top: var(--u6); padding-block: var(--u2); border-block: 3px solid var(--ink); max-width: 32rem; } .sd-four b { flex: none; font-weight: 800; font-size: clamp(88px, 9vw, 152px); line-height: 0.78; letter-spacing: -0.05em; color: var(--red); } .sd-four span { font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .sd-stops { margin-top: var(--u6); max-width: 32rem; } .sd-stops li { padding-block: var(--u2); border-top: 1px solid var(--rule); } .sd-stops li:last-child { border-bottom: 1px solid var(--rule); } .sd-stops b { display: block; font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } .sd-stops span { display: block; margin-top: 4px; } .sd-next { margin-top: var(--u4); } .sd-lanes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: clamp(360px, 100vw, 460px); margin-top: var(--u8); background: var(--red); border-left: clamp(6px, 0.8vw, 12px) solid var(--black); } .sd-lane { position: relative; } .sd-lane + .sd-lane { border-left: clamp(3px, 0.35vw, 6px) solid var(--white); } /* each runner's bib, on a staggered start: lane 1 furthest up, lane 4 furthest down */ .sd-bib { position: absolute; left: 10%; right: 10%; top: calc(8% + var(--i) * 13%); } .sd-bib::after { content: ""; position: absolute; left: -12.5%; right: -12.5%; top: calc(100% + clamp(12px, 1.6vw, 28px)); height: clamp(4px, 0.5vw, 8px); background: var(--white); } .sd-card { display: flex; flex-direction: column; aspect-ratio: 5 / 4.4; padding: 10% 8% 6%; background: radial-gradient(circle, var(--red) 0 2px, var(--black) 2.5px 3.5px, transparent 4px) left 2px top 2px / 12px 12px no-repeat, radial-gradient(circle, var(--red) 0 2px, var(--black) 2.5px 3.5px, transparent 4px) right 2px top 2px / 12px 12px no-repeat, radial-gradient(circle, var(--red) 0 2px, var(--black) 2.5px 3.5px, transparent 4px) left 2px bottom 2px / 12px 12px no-repeat, radial-gradient(circle, var(--red) 0 2px, var(--black) 2.5px 3.5px, transparent 4px) right 2px bottom 2px / 12px 12px no-repeat, var(--white); color: var(--black); box-shadow: 0 6px 0 rgb(23 31 30 / 0.3); rotate: var(--r, 0deg); container-type: inline-size; } .sd-lane:nth-child(1) { --r: -3deg; } .sd-lane:nth-child(2) { --r: 2deg; } .sd-lane:nth-child(3) { --r: -1.5deg; } .sd-lane:nth-child(4) { --r: 3deg; } .sd-card i { display: block; padding: 4% 0; background: var(--black); color: var(--white); font-style: normal; font-weight: 800; font-size: 9cqi; line-height: 1.2; letter-spacing: 0.14em; text-align: center; } .sd-card b { flex: 1; display: grid; place-items: center; font-weight: 800; font-size: 50cqi; line-height: 1; letter-spacing: -0.04em; } @media (min-width: 960px) { .sd-team { display: grid; align-items: center; min-height: min(100svh, 960px); padding-block: var(--u12); } .sd-team-words { width: min(100%, calc(52vw - var(--sd-edge) - var(--u8))); } .sd-lanes { position: absolute; top: 0; right: 0; bottom: 0; width: 48vw; height: auto; margin: 0; } .sd-bib { left: 9%; right: 9%; top: calc(10% + var(--i) * 14%); } } @media (max-width: 639px) { .sd-team { padding-top: var(--u8); } } /* 3. The prize: a scoreboard and one bar split three ways (the page's one Red band) */ .sd-prize { padding-block: var(--u16); } .sd-board { display: flex; flex-wrap: wrap; align-items: flex-end; width: fit-content; max-width: calc(100% + var(--sd-edge)); margin-left: calc(var(--sd-edge) * -1); padding: var(--u6) var(--u6) var(--u6) var(--sd-edge); background: var(--black) radial-gradient(circle, rgb(242 240 234 / 0.08) 0 1.5px, transparent 2px) 0 0 / 12px 12px; color: var(--white); } .sd-pool { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--u3) var(--u6); } .sd-led { font-weight: 800; font-size: clamp(88px, 15vw, 240px); line-height: 0.8; letter-spacing: -0.01em; -webkit-mask: radial-gradient(circle, #000 0 56%, transparent 62%) 0 0 / 0.05em 0.05em; mask: radial-gradient(circle, #000 0 56%, transparent 62%) 0 0 / 0.05em 0.05em; } .sd-pool span { max-width: 15rem; font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .sd-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u3); margin-top: var(--u8); } .sd-split b { display: block; padding: var(--u3) var(--u3) var(--u2); background: var(--white); color: var(--black); font-weight: 800; font-size: clamp(40px, 4.4vw, 72px); line-height: 1; letter-spacing: -0.03em; } .sd-split span { display: block; margin-top: var(--u2); font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (max-width: 767px) { .sd-split { grid-template-columns: minmax(0, 1fr); gap: var(--u4); } } @media (max-width: 639px) { .sd-prize { padding-block: var(--u12); } .sd-board { padding: var(--u4) var(--u3) var(--u4) var(--sd-edge); } } /* 4. STRENGTH Classic: from the 2026 court to the 2027 green (White) */ .sd-classic { padding-top: var(--u12); overflow: clip; } .sd-years { display: grid; row-gap: var(--u8); margin-top: var(--u8); } .sd-yr { font-weight: 800; font-size: clamp(80px, 11vw, 168px); line-height: 0.8; letter-spacing: -0.05em; } .sd-year + .sd-year .sd-yr { color: var(--red); } .sd-says { margin-top: var(--u4); max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .sd-ground { margin-top: var(--u8); } .sd-ground svg { display: block; width: 100%; height: auto; } .sd-ground .sd-ground-ph { display: none; } .sd-trail-draw { stroke-dasharray: 1; } @media (min-width: 960px) { .sd-years { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--u8); } .sd-ground { margin-top: var(--u6); } } @media (max-width: 767px) { .sd-ground svg:first-child { display: none; } .sd-ground .sd-ground-ph { display: block; } } /* 5. Questions open on the finish line (Black) */ .sd-faq { position: relative; --sq: clamp(16px, 1.6vw, 24px); padding-top: calc(var(--section-gap) + var(--sq) * 2); } .sd-checker { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--sq) * 2); background: conic-gradient(var(--white) 25%, var(--black) 0 50%, var(--white) 0 75%, var(--black) 0) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2); } @keyframes sd-run { from { transform: translateY(-110cqi); } } @media (prefers-reduced-motion: no-preference) { .js .sd-hero-head > *, .js .sd-hero-side { animation: rise 800ms var(--ease-out) both; } .js .sd-hero-head .t-mega { animation-delay: 70ms; } .js .sd-hero-side { animation-delay: 200ms; } .js .sd-marks { animation: sd-run 1700ms var(--ease-out) 120ms both; } .js .sd-finish { animation: rise 900ms var(--ease-out) 300ms both; } .rise-on .sd-bib[data-rise] { transition: opacity 500ms var(--ease-out) calc(var(--i) * 130ms), translate 900ms var(--ease-out) calc(var(--i) * 130ms); } .rise-on .sd-bib[data-rise]:not(.in) { opacity: 0; translate: 0 -48px; } .rise-on .sd-board[data-rise] { transition: opacity 600ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on .sd-board[data-rise]:not(.in) { opacity: 0; translate: -48px 0; } .rise-on .sd-split[data-rise] b { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--ease-out); } .rise-on .sd-split[data-rise] li:nth-child(2) b { transition-delay: 220ms; } .rise-on .sd-split[data-rise] li:nth-child(3) b { transition-delay: 440ms; } .rise-on .sd-split[data-rise]:not(.in) b { clip-path: inset(0 100% 0 0); } .rise-on .sd-split[data-rise] span { transition: opacity 600ms var(--ease-out) 700ms; } .rise-on .sd-split[data-rise]:not(.in) span { opacity: 0; } .rise-on .sd-year[data-rise] { transition: opacity 700ms var(--ease-out) calc(var(--i) * 120ms), translate 900ms var(--ease-out) calc(var(--i) * 120ms); } .rise-on .sd-year[data-rise]:not(.in) { opacity: 0; translate: 0 32px; } .rise-on .sd-ground[data-rise] .sd-trail-draw { transition: stroke-dashoffset 1400ms var(--ease-out) 200ms; } .rise-on .sd-ground[data-rise]:not(.in) .sd-trail-draw { stroke-dashoffset: 1; } .rise-on .sd-ground[data-rise] .sd-flag { transform-box: fill-box; transform-origin: 0 50%; transition: scale 500ms var(--ease-out) 1300ms; } .rise-on .sd-ground[data-rise]:not(.in) .sd-flag { scale: 0 1; } .rise-on .sd-checker[data-rise] { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--ease-out); } .rise-on .sd-checker[data-rise]:not(.in) { clip-path: inset(0 100% 0 0); } } /* ---------- Retreats (pages/wellness-retreat.html), every class rt- ---------- Nov 12, Elliot: the Retreats "need a major lift". One idea: a desert weekend, sundown to sunup. The hero is a horizon: the City rings (art/rings.svg, unchanged, the file twice, the second turned) meet as one sun rising on a Black desert floor, flush to the hero's foot and both screen edges, its reflection in Red on the floor. The Phoenix weekend is one ground under three skies, the day turning from evening to morning: Friday a Red dusk with the sun going down, Saturday the sun high, Sunday the sun coming up beside the hike, one trail line running through all three. Built by Fire is a trip pass beside the corner rings (kept as they were, .away-art). The questions sit under the night. City look only: Red, Black, Warm grey, White; no paint colors. No photo: none of a retreat exists. Motion: transform, opacity and clip-path (ending at an inset); reduced motion or no script: all stands still. */ .rt-hero, .rt-trip { --rt-edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); } .rt-f-red { fill: var(--red); } .rt-f-white { fill: var(--white); } .rt-f-black { fill: var(--black); } .rt-f-grey { fill: var(--warm-grey); } .rt-s-red, .rt-s-white, .rt-s-black { fill: none; } .rt-s-red { stroke: var(--red); } .rt-s-white { stroke: var(--white); } .rt-s-black { stroke: var(--black); } /* 1. The horizon (Warm grey sky, Black floor) */ .rt-hero { --R: 50vw; --cx: 50%; --rt-floor: clamp(88px, 12vw, 200px); display: flex; flex-direction: column; padding: var(--u6) 0 0; } .rt-hero-words { position: relative; z-index: 2; container-type: inline-size; } .rt-hero .label + .t-mega { margin-top: var(--u3); } .rt-hero .t-mega { font-size: min(var(--fs-mega), calc(100cqi / 8.4)); } .rt-hero .lead { margin-top: var(--u3); max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .rt-hero .btn-row { margin-top: var(--u4); } .rt-land { position: relative; height: calc(var(--R) + var(--rt-floor)); margin-top: var(--u6); pointer-events: none; } /* the right half narrows at the screen edge and crops itself (object-fit), so the rings run off the edge unchanged while no box sticks out past the screen */ .rt-sun { position: absolute; left: calc(var(--cx) - var(--R)); right: 0; bottom: var(--rt-floor); display: flex; height: var(--R); } .rt-sun img { flex: none; width: var(--R); height: 100%; max-width: none; } .rt-sun img + img { flex: 0 1 var(--R); min-width: 0; object-fit: cover; object-position: 0 100%; } .rt-sun img:first-child { transform: scaleX(-1); } .rt-sun img + img { margin-left: -1px; } /* the two halves overlap by a pixel, so no seam shows down the sun's middle */ .rt-floor { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--rt-floor); background: linear-gradient(rgb(242 240 234 / 0.3), rgb(242 240 234 / 0.3)) 0 14% / 100% 1px no-repeat, linear-gradient(rgb(242 240 234 / 0.3), rgb(242 240 234 / 0.3)) 0 34% / 100% 1px no-repeat, linear-gradient(rgb(242 240 234 / 0.3), rgb(242 240 234 / 0.3)) 0 60% / 100% 1px no-repeat, linear-gradient(rgb(242 240 234 / 0.3), rgb(242 240 234 / 0.3)) 0 92% / 100% 1px no-repeat, var(--black); } /* the sun's reflection: five Red bars under its disk, each wider and thicker toward the viewer (as on the /events tile) */ .rt-glow { position: absolute; top: 0; bottom: 0; left: calc(var(--cx) - var(--R) / 2); width: var(--R); background: linear-gradient(var(--red), var(--red)) 50% 6% / 44% 4% no-repeat, linear-gradient(var(--red), var(--red)) 50% 24% / 55% 5% no-repeat, linear-gradient(var(--red), var(--red)) 50% 45% / 67% 6% no-repeat, linear-gradient(var(--red), var(--red)) 50% 69% / 81% 7% no-repeat, linear-gradient(var(--red), var(--red)) 50% 96% / 98% 8% no-repeat; } .rt-mesa, .rt-cactus { display: none; } @media (min-width: 640px) { .rt-hero { --R: min(50vw, 340px); } } @media (min-width: 1200px) { .rt-hero { --R: clamp(320px, 28vw, 500px); --cx: 78%; min-height: min(calc(100svh - var(--header-h)), 960px); padding-top: var(--u8); } .rt-hero-words { max-width: calc(var(--content-max) * 7 / 12 + 2 * var(--pad)); margin-inline: 0; margin-left: calc(var(--rt-edge) - var(--pad)); } .rt-land { flex: 1 0 auto; height: auto; min-height: calc(var(--rt-floor) + var(--u6)); } .rt-mesa, .rt-cactus { display: block; position: absolute; bottom: calc(var(--rt-floor) - 1px); fill: var(--black); stroke: var(--black); } .rt-mesa { left: 0; width: min(30vw, 460px); height: auto; stroke: none; } .rt-cactus { left: calc(var(--cx) - var(--R) * 1.08 - 40px); width: clamp(28px, 2.6vw, 44px); height: auto; } } /* 2. The Phoenix weekend: one ticket, then one ground under three skies, flush to both edges and the section foot */ .rt-trip { padding-top: var(--section-gap); overflow: clip; } .rt-trip-head { display: grid; row-gap: var(--u4); margin-bottom: var(--u8); } .rt-trip-head .label + .t-section { margin-top: var(--u2); } .rt-trip-side > * + * { margin-top: var(--u2); } .rt-ticket { --n: 12px; display: inline-block; padding: var(--u3) calc(var(--u4) + 4px); background: var(--red); color: var(--white); font-weight: 800; font-size: var(--fs-sub); line-height: var(--lh-sub); outline: 2px dashed rgb(242 240 234 / 0.7); outline-offset: -9px; -webkit-mask: radial-gradient(circle at 0 50%, transparent var(--n), #000 calc(var(--n) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent var(--n), #000 calc(var(--n) + 0.5px)) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent var(--n), #000 calc(var(--n) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent var(--n), #000 calc(var(--n) + 0.5px)) right / 51% 100% no-repeat; } .rt-days { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; background: var(--black); border-top: 3px solid var(--black); } /* the top rule frames the skies (Sunday's White sky would melt into the page) */ .rt-day { display: flex; flex-direction: column; color: var(--white); } .rt-sky { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; } .rt-sky-fri { background: var(--red); } .rt-sky-sat { background: var(--warm-grey); } .rt-sky-sunday { background: var(--white); } .rt-ground { flex: 1; } .rt-trail { display: block; width: 100%; height: 24px; overflow: visible; } .rt-trail path, .rt-hike { fill: none; stroke: var(--white); stroke-width: 3; stroke-dasharray: 1 10; stroke-linecap: round; vector-effect: non-scaling-stroke; } .rt-hike { stroke-width: 4; stroke-dasharray: 1 9; vector-effect: none; } .rt-day-words { position: relative; padding: var(--u3) var(--pad) var(--u8); } .rt-day-words::before { content: ""; position: absolute; left: var(--pad); top: -20px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--white); } .rt-day-words h3 { font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.025em; } .rt-day-words p { margin-top: var(--u2); max-width: 22rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (min-width: 1024px) { .rt-trip-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: end; } /* on a very wide screen (or zoomed out) the outer days grow so their words keep a quarter of the content width */ .rt-days { --rt-q: calc(var(--rt-edge) + (100vw - 2 * var(--rt-edge)) / 4); grid-template-columns: minmax(var(--rt-q), 1fr) minmax(0, 1fr) minmax(var(--rt-q), 1fr); } .rt-sky { aspect-ratio: auto; height: clamp(240px, 22vw, 420px); } .rt-day-words { padding: var(--u4) var(--u4) var(--u12); } .rt-day-words::before { left: var(--u4); } .rt-day:first-child .rt-day-words { padding-left: var(--rt-edge); } .rt-day:first-child .rt-day-words::before { left: var(--rt-edge); } .rt-day:last-child .rt-day-words { padding-right: var(--rt-edge); } .rt-day + .rt-day .rt-sky { border-left: 3px solid var(--black); } } /* 3. More retreats: the corner rings stay as they were (.away-art); Built by Fire is a trip pass, its stub in Red */ .rt-passes { margin: 0; padding: 0; list-style: none; } .rt-pass { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--black); color: var(--white); --focus: var(--white); } .rt-pass-main { padding: var(--u4); } .rt-pass-main h3 { font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.025em; } .rt-pass-main p { margin-top: var(--u2); max-width: 26rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .rt-pass-main p + p { margin-top: var(--u3); } .rt-pass-stub { position: relative; display: grid; align-content: center; gap: var(--u3); margin: 0; padding: var(--u4); background: var(--red); border-top: 2px dashed rgb(242 240 234 / 0.7); } .rt-pass-stub::before, .rt-pass-stub::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--ground); } .rt-pass-stub::before { left: -12px; } .rt-pass-stub::after { right: -12px; } .rt-pass-stub dt { font-weight: 600; font-size: var(--fs-caption); line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; } .rt-pass-stub dd { margin: 4px 0 0; font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); } @media (min-width: 1024px) { .rt-more .away-art { min-height: 420px; } } @media (min-width: 640px) { .rt-pass { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); } .rt-pass-main { padding: var(--u6) var(--u6) var(--u6) var(--u4); } .rt-pass-stub { padding: var(--u4); border-top: 0; border-left: 2px dashed rgb(242 240 234 / 0.7); } .rt-pass-stub::before, .rt-pass-stub::after { left: -13px; right: auto; } .rt-pass-stub::before { top: -12px; } .rt-pass-stub::after { top: auto; bottom: -12px; } } /* 4. Questions, under the night: a few still stars on the Black band, never behind the answers' words */ .rt-night { position: relative; overflow: clip; } .rt-night > .wrap { position: relative; } .rt-stars { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgb(242 240 234 / 0.75) 0 1.5px, transparent 2px) 6% 18% / 8px 8px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.5) 0 1px, transparent 1.5px) 14% 72% / 6px 6px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.75) 0 2px, transparent 2.5px) 24% 10% / 8px 8px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.5) 0 1px, transparent 1.5px) 31% 88% / 6px 6px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.6) 0 1.5px, transparent 2px) 44% 6% / 8px 8px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.5) 0 1px, transparent 1.5px) 63% 9% / 6px 6px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.75) 0 2px, transparent 2.5px) 82% 7% / 8px 8px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.5) 0 1px, transparent 1.5px) 94% 16% / 6px 6px no-repeat, radial-gradient(circle, rgb(242 240 234 / 0.6) 0 1.5px, transparent 2px) 97% 84% / 8px 8px no-repeat; } @keyframes rt-rise-sun { from { translate: 0 42%; } } @keyframes rt-glow-open { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: no-preference) { .js .rt-hero-words > * { animation: rise 800ms var(--ease-out) both; } .js .rt-hero-words .t-mega { animation-delay: 70ms; } .js .rt-hero-words .lead { animation-delay: 160ms; } .js .rt-hero-words .btn-row { animation-delay: 240ms; } .js .rt-sun img { animation: rt-rise-sun 2000ms var(--ease-out) 150ms both; } .js .rt-glow { animation: rt-glow-open 1400ms var(--ease-out) 700ms both; } .rise-on .rt-day[data-rise] .rt-day-words { transition: opacity 600ms var(--ease-out) calc(var(--i) * 160ms + 300ms), translate 800ms var(--ease-out) calc(var(--i) * 160ms + 300ms); } .rise-on .rt-day[data-rise]:not(.in) .rt-day-words { opacity: 0; translate: 0 20px; } .rise-on .rt-day[data-rise] .rt-trail { clip-path: inset(0 0 0 0); transition: clip-path 900ms linear calc(var(--i) * 900ms); } .rise-on .rt-day[data-rise]:not(.in) .rt-trail { clip-path: inset(0 100% 0 0); } .rise-on .rt-day[data-rise] .rt-sky-sun { transition: translate 1800ms var(--ease-out) 100ms; } .rise-on .rt-day[data-rise]:not(.in) .rt-sets { translate: 0 -36px; } .rise-on .rt-day[data-rise]:not(.in) .rt-noon { translate: 0 20px; } .rise-on .rt-day[data-rise]:not(.in) .rt-rises { translate: 0 48px; } .rise-on .rt-pass[data-rise] { transition: opacity 600ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on .rt-pass[data-rise]:not(.in) { opacity: 0; translate: 32px 0; } } /* ---------- Partner With Us (pages/sponsorship.html), every class pw- ---------- Nov 13, Elliot: "a lot going on ... a lot of words ... simplify and make the designs better", and show what the Partnerships branch holds: Sponsors, Vendors and Produced Events. One idea: one festival street, three fronts. The hero is the street: the gate (Sponsors, a blank name panel on its banner), the market booth (Vendors) and the stage (Produced Events) stand on one Black floor that runs to both screen edges, each name and promise on the floor under its front. Each part below steps up to its own front, drawn large and standing on the section's foot; through the gate you see the crowd. The three fronts are one inline sprite (symbols), colored by custom properties per ground. City look only: Red, Black, White, Warm grey. Motion: transform only; reduced motion or no script: all stands still. */ .pw-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .pw-front { display: block; width: 100%; height: auto; aspect-ratio: 400 / 440; --g-banner: var(--red); --g-panel: var(--white); --g-post: var(--black); --g-flag1: var(--red); --g-flag2: var(--black); --b-stripe1: var(--red); --b-stripe2: var(--white); --b-pole: var(--black); --b-sign: var(--white); --b-good1: var(--red); --b-good2: var(--black); --b-top: var(--red); --b-counter: var(--black); --s-back: var(--red); --s-truss: var(--black); --s-zig: var(--white); --s-ray: var(--red); --s-mic: var(--black); --s-deck: var(--black); --s-lip: var(--red); --s-pool: var(--white); } .band-red .pw-front { --g-banner: var(--black); --g-panel: var(--white); --g-post: var(--black); --g-flag1: var(--white); --g-flag2: var(--black); } .dark .pw-front { --b-pole: var(--white); --b-good1: var(--red); --b-good2: var(--white); --b-counter: var(--white); } /* 1. The street (Warm grey sky, Black floor) */ .pw-hero { --pw-art: clamp(96px, 20vw, 320px); padding-top: var(--u8); overflow: clip; } .pw-hero-words .lead { margin-top: var(--u3); max-width: 24rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (min-width: 1024px) { .pw-hero-words { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: end; } .pw-hero-words .lead { margin: 0 0 calc(var(--fs-mega) * 0.12); } } .pw-street { margin-top: var(--u8); } .pw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--u6); } .pw-skyline { align-items: end; overflow: clip; } .pw-skyline .pw-front { width: var(--pw-art); max-width: 100%; } .pw-floor { background: var(--black); color: var(--white); } .pw-floor .pw-doors { padding: var(--u4) var(--pad) var(--u8); } /* ul[role=list] would zero the .wrap padding */ .pw-doors li { position: relative; } .pw-door { display: block; color: inherit; text-decoration: none; } .pw-door::before { content: ""; position: absolute; left: 0; bottom: calc(100% + var(--u4)); width: var(--pw-art); max-width: 100%; aspect-ratio: 400 / 440; } /* the front above is part of the link */ .pw-name { display: block; font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.02em; text-wrap: balance; } .pw-name::after { content: ""; display: inline-block; vertical-align: 0.14em; width: 0.26em; height: 0.26em; margin-left: 0.3em; border-top: 3px solid var(--red); border-right: 3px solid var(--red); transform: rotate(45deg); transition: translate var(--dur-menu) var(--ease-out); } .pw-promise { display: block; margin-top: var(--u2); max-width: 19rem; font-size: var(--fs-sub); line-height: var(--lh-sub); color: color-mix(in oklab, var(--white) 84%, var(--black)); } .pw-door:focus-visible { outline: var(--focus-width) solid var(--white); outline-offset: var(--u1); } @media (hover: hover) { .pw-door:hover .pw-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--red); } .pw-door:hover .pw-name::after { translate: 4px 0; } } @media (max-width: 1099px) { .pw-row { column-gap: var(--u2); } .pw-hero .pw-street { margin-top: var(--u6); } .pw-floor .pw-doors { grid-template-columns: minmax(0, 1fr); padding-block: var(--u1) var(--u6); } .pw-doors li + li { border-top: 1px solid color-mix(in oklab, var(--white) 30%, transparent); } .pw-door { padding-block: var(--u3); } .pw-door::before { display: none; } .pw-name { font-size: var(--fs-h2); line-height: var(--lh-h2); } .pw-promise { margin-top: var(--u1); font-size: var(--fs-body); line-height: var(--lh-body); } } /* 2 to 4. The parts: words, and the part's own front standing on the section's foot. Sponsors on Red (the page's one Red band), Vendors on Black, Produced Events on White; the fronts swap sides down the page. */ .pw-part { --pw-edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); position: relative; overflow: clip; padding-top: var(--u16); } .pw-split { display: grid; row-gap: var(--u8); } .pw-words { align-self: center; } .pw-words .btn-row { margin-top: var(--u6); } .pw-claim { margin-top: var(--u2); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; } .pw-words .pw-proof { display: flex; flex-wrap: wrap; gap: var(--u3) var(--u4); margin-top: var(--u4); padding-top: var(--u3); /* two classes: ul[role=list] zeroes padding */ border-top: 3px solid currentColor; } .pw-proof li { flex: 0 1 9rem; } .pw-proof li:last-child { flex: none; } .pw-proof b { display: block; font-weight: 800; font-size: clamp(36px, 2.8vw, 44px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; } .pw-proof span { display: block; margin-top: var(--u1); max-width: 9rem; font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); } .pw-three { margin-top: var(--u4); max-width: 34rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .pw-three b { font-weight: 800; } .pw-note { margin-top: var(--u2); font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); } .pw-says { margin-top: var(--u3); max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .pw-big { align-self: end; justify-self: end; width: min(100%, 340px); } .pw-sponsors { padding-top: var(--u12); } /* Elliot, Nov 13: the Sponsors part "doesn't need to be that big": less air, a smaller gate, the numbers in one row */ .pw-sponsors .pw-words .btn-row { margin-top: var(--u4); } .pw-flip .pw-big { justify-self: start; } .pw-gate { position: relative; } .pw-gate img { position: absolute; left: 23%; top: 33.6%; width: 54%; height: 66.4%; object-fit: cover; object-position: 50% 40%; } .pw-gate .pw-front { position: relative; } @media (min-width: 640px) { .pw-big { width: min(100%, 420px); } } @media (min-width: 1024px) { .pw-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); } .pw-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .pw-flip .pw-big { order: -1; } .pw-words { padding-bottom: var(--u12); } .pw-big { width: min(100%, 500px); } .pw-sponsors .pw-big { width: min(100%, 440px); } } @media (max-width: 639px) { .pw-part { padding-top: var(--u12); } .pw-sponsors { padding-top: var(--u8); } .pw-sponsors .pw-big { width: min(100%, 280px); } .pw-proof { column-gap: var(--u4); } .pw-proof span { max-width: 9rem; } } @keyframes pw-up { from { transform: translateY(101%); } } @media (prefers-reduced-motion: no-preference) { .js .pw-hero-words > * { animation: rise 800ms var(--ease-out) both; } .js .pw-hero-words .lead { animation-delay: 140ms; } .js .pw-skyline .pw-front { animation: pw-up 1000ms var(--ease-out) both; } .js .pw-skyline .pw-front:nth-child(1) { animation-delay: 200ms; } .js .pw-skyline .pw-front:nth-child(2) { animation-delay: 320ms; } .js .pw-skyline .pw-front:nth-child(3) { animation-delay: 440ms; } .rise-on .pw-big[data-rise] { transition: transform 1000ms var(--ease-out); } .rise-on .pw-big[data-rise]:not(.in) { transform: translateY(30%); } } /* ---------- Home lift (pages/home.html), every new class hm- ---------- Nov 11, Elliot: "the city home page is the worst design we have ... I like the structure and the content". Same sections, same order, same words. One idea: the city, and the places in it where people meet. The heart pin marks every meeting point: it ends the hero's "meet" line, stands on the doors' street line at each way in, and on the time line at each date. The engraved towers print in the band's own inks (multiply on Red), in the hero's block and once more, as one city rising at the foot of the belief band. The belief is the page's poster: the claim at full width, and every way of being alone crossed out, until the one thing left standing is "going out", on a street sign. Motion only inside prefers-reduced-motion: no-preference; without it everything stands still and shows. */ .hm-hero .towers { mix-blend-mode: multiply; } /* 1. The belief band (Red): the claim fitted to the grid's width in two lines; under it the four phrases, one a line, on the left 7 of 12 columns; the towers flipped to lean in, flush on the band's foot and the right screen edge. */ .hm-say { --hm-gap: var(--u8); padding-block: var(--u16) 0; overflow: clip; isolation: isolate; } .hm-say .wrap { position: relative; z-index: 1; max-width: none; container-type: inline-size; } /* the band is a poster: its words run from margin to margin, past the 1200 px grid */ .hm-say-p { font-weight: 800; letter-spacing: -0.03em; } .hm-say-claim { display: block; font-size: min(calc(100cqi / 9.1), 216px); line-height: 0.94; } /* "We stand against" measures 9.07 em */ .hm-say-claim .hm-ln, .hm-say-then .hm-ph { display: block; white-space: nowrap; } .hm-say-then { display: block; margin-top: var(--hm-gap); padding-bottom: var(--u16); font-size: min(var(--fs-display), calc(100cqi / 10.2)); line-height: 1.1; letter-spacing: -0.02em; } .hm-say-then .hm-ph + .hm-ph { margin-top: 0.06em; } /* the cross-outs: a Black marker bar through the middle of the lowercase letters, a little past each end */ .hm-x { position: relative; display: inline-block; } .hm-x::after { content: ""; position: absolute; left: -0.08em; right: -0.08em; top: 0.5em; height: 0.12em; background: var(--black); transform-origin: 0 50%; rotate: -2deg; pointer-events: none; } /* what is left standing: a White street sign, Black letters, a Black line inset along its edge */ .hm-sign { display: inline-block; margin-top: 0.12em; padding: 0.06em 0.32em 0.14em; border-radius: 0.14em; background: var(--white); color: var(--black); box-shadow: inset 0 0 0 0.06em var(--white), inset 0 0 0 0.1em var(--black), 0.08em 0.1em 0 rgb(23 31 30 / 0.35); rotate: -3deg; transform-origin: 0 100%; } .hm-say-city { position: absolute; z-index: 0; right: 0; bottom: 0; width: min(48vw, 800px); max-width: none; scale: -1 1; mix-blend-mode: multiply; pointer-events: none; } @media (max-width: 1023px) { .hm-say { padding-top: var(--u12); } .hm-say { --hm-city: min(46vw, 300px); } .hm-say-then { padding-bottom: calc(var(--hm-city) * 0.88 + var(--u3)); } .hm-say-city { width: var(--hm-city); } } @media (max-width: 639px) { /* the towers run the band's full width on its foot; the words may stand over their empty upper left (measured) */ .hm-say { --hm-city: 100vw; } .hm-say-then { padding-bottom: calc(var(--hm-city) * 0.88 * 0.75); } .hm-say-claim { font-size: min(46px, calc(100cqi / 7.15)); line-height: 0.98; text-wrap: wrap; } /* three lines: "against going" measures 7.07 em */ .hm-say-claim .hm-ln { display: inline; white-space: normal; } .hm-say-then { font-size: min(var(--fs-h1), calc(100cqi / 10.2)); } } @media (min-width: 1024px) { .hm-say-then { max-width: calc(100cqi * 7 / 12); font-size: min(var(--fs-display), calc(100cqi * 7 / 12 / 10.2)); } } /* "staying in instead of" measures 10.11 em */ @media (prefers-reduced-motion: no-preference) { .rise-on .hm-say-claim .hm-ln { transition: opacity 600ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on .hm-say-claim .hm-ln + .hm-ln { transition-delay: 120ms; } .rise-on .hm-say-claim:not(.in) .hm-ln { opacity: 0; translate: 0 0.3em; } .rise-on .hm-say-then .hm-x::after { transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1) calc(500ms + var(--k) * 300ms); } .rise-on .hm-say-then:not(.in) .hm-x::after { transform: scaleX(0); } .rise-on .hm-say-then .hm-sign { transition: rotate 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1450ms, scale 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1450ms; } .rise-on .hm-say-then:not(.in) .hm-sign { rotate: 4deg; scale: 0.9; } } @keyframes hm-rise-city { from { translate: 0 35%; } to { translate: 0 0; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .hm-say { view-timeline: --hm-say block; } .hm-say-city { animation: hm-rise-city linear both; animation-timeline: --hm-say; animation-range: entry 10% cover 50%; } } } /* 2. The doors: one Red street line runs under the three doors' pictures, screen edge to screen edge (each door its own stretch under 1100 px), and a heart pin stands on it where each door's words begin. It replaces the 3 px rule. */ .ways.trio.hm-doors .stack { position: relative; border-top: 0; padding-top: calc(var(--u3) + 3px); } .hm-doors .stack::before { content: ""; position: absolute; top: 0; left: 0; right: calc(var(--edge) * -1); height: 3px; background: var(--red); transform-origin: 0 50%; } .hm-doors .stack::after { content: ""; position: absolute; left: -1px; bottom: calc(100% - 1px); width: 26px; height: 36px; background: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b80cbe82572bf1191d8_sitc-icon-pin-for-light-backgrounds.svg") center bottom / contain no-repeat; transform-origin: 50% 100%; } @media (max-width: 639px) { .hm-doors .stack::before { left: calc(var(--edge) * -1); } } @media (min-width: 1100px) { .hm-doors .stack::before { left: calc(var(--u4) / -2); right: calc(var(--u4) / -2); } .hm-doors > .way:first-child .stack::before { left: calc(var(--edge) * -1); } .hm-doors > .way:last-child .stack::before { right: calc(var(--edge) * -1); } } @media (prefers-reduced-motion: no-preference) { .rise-on .hm-doors .stack::before { transition: transform 900ms var(--ease-out) calc(var(--i) * 120ms + 250ms); } .rise-on .hm-doors > .way:not(.in) .stack::before { transform: scaleX(0); } .rise-on .hm-doors .stack::after { transition: opacity 300ms var(--ease-out) calc(var(--i) * 120ms + 650ms), translate 600ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 120ms + 650ms); } .rise-on .hm-doors > .way:not(.in) .stack::after { opacity: 0; translate: 0 -24px; } } /* 3. Next dates: the time line's stops are heart pins standing on the line, not dots. */ .hm-dates .tk-row { padding-top: var(--u6); } .hm-dates .tk:nth-child(odd) .tk-card::before { left: calc(var(--edge) * -1); } /* the line runs in from the left screen edge too */ @media (max-width: 899px) { .hm-dates .tk .tk-card::before { left: calc(var(--edge) * -1); } } .hm-dates .tk-card::after { left: -1px; top: auto; bottom: calc(100% + 1px); width: 26px; height: 36px; border-radius: 0; box-shadow: none; background: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b80cbe82572bf1191d8_sitc-icon-pin-for-light-backgrounds.svg") center bottom / contain no-repeat; transform-origin: 50% 100%; } /* ---------- Certifications (mat certification, studio training) and Consulting (pages/certifications.html, pages/collective-consulting.html), Nov 11, from Michelle's two documents. Every new class cs-; no existing rule changed. No prices on either page (Elliot). ---------- */ /* Hero titles fitted to their own words: --em is the one-line width, --em-ln the longest line below 1200 px (measured). */ @media (min-width: 640px) { .hero-course .t-mega.cs-fit { font-size: min(var(--fs-mega), calc(100cqi / var(--em-ln, 9.1))); } } @media (min-width: 1200px) { .hero-course .t-mega.cs-fit { font-size: min(var(--fs-mega), calc(100cqi / var(--em))); } } .cs-consult .t-mega { font-size: min(var(--fs-mega), calc(100cqi / var(--em))); } /* Mat certification, on Brown: the head with Erin beside the two counts, then the two days as timed lists. */ .cs-mat-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u8); margin-bottom: var(--u12); } @media (min-width: 960px) { .cs-mat-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--split-gap); align-items: end; } } .cs-mat-head .words > .label + .t-section { margin-top: var(--u3); } .cs-mat-head .words > .lead-in + .cs-by { margin-top: var(--u6); } .cs-mat-head .words > .cs-by + p { margin-top: var(--u1); } .dark .cs-by { color: var(--sand); } .cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u6); } .cs-facts > li { border-top: 1px solid var(--rule); padding-top: var(--u3); } .cs-big { display: block; font-family: "Noto Serif Display", serif; font-weight: 300; font-size: var(--fs-mega); line-height: 0.9; color: var(--sand); } .cs-facts .cs-big + span { display: block; margin-top: var(--u2); max-width: 14rem; } .cs-days .h2 { min-height: calc(2 * var(--lh-col-caps) * 1em); } @media (max-width: 899px) { .cs-days .h2 { min-height: 0; } } .two-certs > section > .cs-hours { margin-top: var(--u4); border-top: 1px solid var(--rule); } .cs-hours > li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u3); padding-block: var(--u2); border-bottom: 1px solid var(--rule); font-size: var(--fs-sub); line-height: var(--lh-sub); } .cs-hours > li > span:last-child { flex: none; font-family: "Noto Serif Display", serif; font-weight: 300; color: var(--sand); } /* After the two days, on Sand: three tens, then how you finish. */ .cs-thirty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u8) var(--split-gap); } .cs-thirty > li { border-top: 1px solid var(--rule); padding-top: var(--u3); } .cs-thirty > li > * + * { margin-top: var(--u2); } .cs-thirty > li > p:last-child { max-width: 24rem; } .cs-ten { font-family: "Noto Serif Display", serif; font-weight: 300; font-size: var(--fs-mega); line-height: 0.9; color: var(--mocha); } .cs-thirty .h2, .cs-finish .h2 { font-size: var(--fs-h2); } .cs-finish { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--split-gap); row-gap: var(--u3); margin-top: var(--u12); padding-top: var(--u4); border-top: 1px solid var(--rule); } .cs-finish p { max-width: 40rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (max-width: 1199px) { .cs-thirty { grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } } @media (min-width: 640px) and (max-width: 1199px) { .cs-thirty > li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: var(--u6); align-items: baseline; } .cs-thirty > li > .cs-ten { grid-row: 1 / span 2; font-size: var(--fs-display); } .cs-thirty > li > * + * { margin-top: 0; } .cs-thirty > li > p:last-child { margin-top: var(--u1); max-width: var(--measure); } } @media (max-width: 959px) { .cs-finish { grid-template-columns: minmax(0, 1fr); } } /* Training for your whole studio: the split, then what it covers beside what the studio walks away with. */ .split.studio .words > .lead-in + p { margin-top: var(--u3); } .split.studio .words > .cs-by { margin-top: var(--u4); } .split.studio .words > .cs-by + p { margin-top: var(--u2); } .split.studio .words > p:has(.more) { margin-top: var(--u4); } .cs-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u8) var(--split-gap); margin-top: var(--u12); } .cs-covers > div > .label { padding-bottom: var(--u2); border-bottom: 1px solid var(--rule); } .cs-list > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--u2); padding-block: var(--u3); border-bottom: 1px solid var(--rule); } .cs-n { font-family: "Noto Serif Display", serif; font-weight: 300; font-size: var(--fs-h2); line-height: 1; color: var(--mocha); } .cs-list p { max-width: var(--measure); } .cs-list strong { font-weight: 600; } .cs-onward { margin-top: var(--u4); } .cs-onward .more { margin-left: var(--u1); } @media (max-width: 899px) { .cs-covers { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 639px) { .cs-list > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--u1); } } /* Consulting: the three offers on Brown, names at Heading One, what you get on a rule at each foot. */ .cs-offers > section { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: var(--u3); } .cs-offers .h2 { font-size: var(--fs-h1); } .cs-offers > section > .cs-gets { margin-top: auto; padding-top: var(--u3); } .cs-offers > section > .h2 + p { margin-bottom: var(--u4); } .cs-gets { position: relative; font-weight: 600; } .cs-gets::before { content: ""; display: block; width: 64px; height: 1px; margin-bottom: var(--u2); background: currentColor; opacity: 0.5; } /* The add-ons: five ruled areas, the area in the long headline voice on the left, the add-ons on the right. */ .cs-group { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--split-gap); row-gap: var(--u3); padding-block: var(--u6); border-top: 1px solid var(--rule); } .cs-card > .cs-group:last-child { border-bottom: 1px solid var(--rule); } .cs-area { font-family: "Noto Serif Display", serif; font-weight: 300; font-size: var(--fs-h1); line-height: var(--lh-col-long); letter-spacing: -0.01em; text-wrap: balance; } .cs-group ul > li + li { margin-top: var(--u4); } .cs-group h4 { font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .cs-group li p { margin-top: var(--u1); max-width: var(--measure); color: var(--taupe-text); } .cs-group li a { color: var(--ink); } @media (max-width: 959px) { .cs-group { grid-template-columns: minmax(0, 1fr); } } /* Home, the brands door: in the wide 3:2 slot (under 1100 px) the square group photo keeps its heads */ .ways.trio .pic > figure img[src$="spons-letters-group.webp"] { object-position: 50% 12%; } /* ---------- bt-: the two button systems (Elliot, Nov 2026: "I like city 2 and collective 4 buttons"; "I don't like square. I prefer rounded buttons"). Picked on the options lab (_lab/buttons): City 2 "Heart pin" and Collective 4 "Soft lift". One system per look, on every button (.btn) and arrow link (.more) in that look, on every ground. Both are the full pill. No box moves or changes size at rest or on hover: only corners, colours, opacity, transforms and the City padding swap (left 12 px less, right 12 px more, so the outer width holds). Overrides (by order or a small specificity bump): the .btn corners (and the Menu button's corners, nothing else of it), the .btn transition and press, the .btn-primary / .dark / .col-hero / .band-red hover face and underline and the .btn-outline hover tint (no face changes colour on hover, as in the lab), the .more underline colour, thickness and arrow timing, and the .btn and .more focus ring offset. Left alone: the switched-off form button (:disabled), the Menu button's behaviour, the /events chips and filters, and the Rebels page (.rf-btn, its own look). City, "Heart pin": on hover or keyboard focus the words step 12 px left and the brand heart pin drops into the space they leave; on press the button squeezes to 97 percent and the pin taps down. The pin is drawn in the button's own ink (currentColor, through a pin-shaped mask) with the Red heart, so it is White on a Red face and Black on a White face or an outline on light, on every ground with no ground list. Arrow links: the drawn arrow fades out to the right, the pin drops in where it was, and the underline turns hot (Red; Black on a Red ground) and thickens to 2 px. Hover 180 ms, press 90 ms on cubic-bezier(.16, 1, .3, 1); the pin falls over 240 ms with a small overshoot. A tile link (.more.stretch) already spends ::before on the tile's click area and ::after on the arrow, so build.py gives it one empty ; every other arrow link draws its pin with its own ::before. Collective, "Soft lift": on hover or keyboard focus the pill lifts 3 px on a soft warm shadow and an outline button warms to a soft ground (Sand on Cream, Cream on Sand, Cream 14 percent on Brown); on press it settles back and sinks to 98 percent. Arrow links: a 1 px warm line under the words (Taupe on Cream) turns to the full ink and the arrow steps 4 px. Hover 320 ms, press 110 ms on cubic-bezier(.22, .61, .36, 1). Reduced motion: nothing slides, lifts, drops or squeezes; the pin, the shadow and the warm ground show at once, the City words take their new place at once, and a press darkens the face instead of squeezing it. */ .room-main, .room-collective { --bt-city: cubic-bezier(.16, 1, .3, 1); --bt-city-t: 180ms; --bt-city-press: 90ms; --bt-col: cubic-bezier(.22, .61, .36, 1); --bt-col-t: 320ms; --bt-col-press: 110ms; } .room-main { --bt-hot: var(--red); /* the heart pin (img/brand/heart-pin-*.svg) split in two: its outline as a mask, its Red heart as a picture */ --bt-pin-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 145.5'%3E%3Cpath d='M50 145.5C6.33 84.5 0 70.7 0 50A50 50 0 1 1 100 50C100 70.7 93.67 84.5 50 145.5Z'/%3E%3C/svg%3E"); --bt-pin-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 145.5'%3E%3Cpath fill='%23C62A27' d='M50 42.35C54.67 34.02 60.3 32.44 64.78 32.44C72.36 32.44 81.26 39.01 81.26 51.78C81.26 64.18 70.28 79.36 50 98.01C29.72 79.36 18.74 64.18 18.74 51.78C18.74 39.01 27.64 32.44 35.22 32.44C39.7 32.44 45.33 34.02 50 42.35Z'/%3E%3C/svg%3E"); --bt-pin-in: var(--white); /* the inside of the pin: White in a Black pin, Black in a White pin (Elliot, Nov 11: three colors) */ } .room-main .band-red { --bt-hot: var(--black); } :is(.room-main, .room-collective) .menu-btn { border-radius: 999px; } /* The filter chips on All Events and the switched-off Send Note button are round too, so nothing square sits beside the pills */ .room-main .filters .chip, :is(.room-main, .room-collective) .btn:disabled { border-radius: 999px; } .room-main .filters .chip .dot { border-radius: 50%; } .more-pin { display: none; } /* City buttons: the pill; the face holds its colour; the pin waits above its spot, hidden */ .room-main .btn:not(:disabled) { --accent-hover: var(--accent); position: relative; isolation: isolate; border-radius: 999px; transition: transform var(--bt-city-press) var(--bt-city), padding var(--bt-city-t) var(--bt-city); } .room-main .btn:not(:disabled):focus-visible { outline-offset: 3px; } .room-main .btn:not(:disabled)::after, .room-main .more:not(.stretch)::before, .room-main .more-pin { content: ""; flex: none; opacity: 0; transform: translateY(-12px); pointer-events: none; background: var(--bt-pin-heart) center / contain no-repeat, radial-gradient(circle closest-side at 50% 34.4%, var(--bt-pin-in) 59%, transparent 61%) center / contain no-repeat currentColor; -webkit-mask: var(--bt-pin-shape) center / contain no-repeat; mask: var(--bt-pin-shape) center / contain no-repeat; transition: opacity 120ms linear, transform 240ms cubic-bezier(.3, 1.45, .6, 1); } .room-main .btn:not(:disabled)::after { position: absolute; z-index: 1; right: 14px; top: 50%; width: 13px; height: 19px; margin-top: -10px; } .room-main .btn-primary, .room-main .dark, .room-main .site-footer { --bt-pin-in: var(--black); } .room-main .band-red .btn-primary, .room-main .dark .btn-primary { --bt-pin-in: var(--white); } /* City arrow links: the pin sits over the arrow's place, 8 px past the link's end, as in the lab */ .room-main .more { text-decoration-color: currentColor; text-decoration-thickness: 1px; transition: text-decoration-color var(--bt-city-t) var(--bt-city), text-decoration-thickness var(--bt-city-t) var(--bt-city); } .room-main .more::after { transition: transform var(--bt-city-t) var(--bt-city), opacity var(--bt-city-t) var(--bt-city); } .room-main .more:not(.stretch) { position: relative; } .room-main .more:not(.stretch)::before { position: absolute; right: -8px; top: 50%; width: 11px; height: 16px; margin-top: -8px; } .room-main .hero-levels .back .more::before { right: auto; left: -8px; } /* the back link's arrow leads */ .room-main .more-pin { display: block; order: 2; width: 11px; height: 16px; margin: 0 calc(-1 * var(--u1)) 0 -11px; } /* in flow, zero net width */ .room-main .more:not(.stretch):focus-visible { outline-offset: 9px; border-radius: 4px; } /* the ring clears the pin */ @media (hover: hover) and (pointer: fine) { .room-main .btn:not(:disabled):is(:hover, :focus-visible) { padding-left: calc(var(--btn-pad) - 12px); padding-right: calc(var(--btn-pad) + 12px); text-decoration: none; } .room-main .btn-outline:not(:disabled):hover { background-color: transparent; } .room-main .btn:not(:disabled):is(:hover, :focus-visible)::after, .room-main .more:not(.stretch):is(:hover, :focus-visible)::before, .room-main .tile:hover .more:not(.stretch)::before, .room-main .more:is(:hover, :focus-visible) .more-pin, .room-main .tile:hover .more-pin { opacity: 1; transform: none; } .room-main .more:is(:hover, :focus-visible), .room-main .tile:hover .more { text-decoration-color: var(--bt-hot); text-decoration-thickness: 2px; } .room-main .more:is(:hover, :focus-visible)::after, .room-main .tile:hover .more::after { opacity: 0; transform: rotate(45deg); } .room-main .hero-levels .back .more:is(:hover, :focus-visible)::after { opacity: 0; transform: rotate(-135deg); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .room-main .more:is(:hover, :focus-visible)::after, .room-main .tile:hover .more::after { transform: translateX(8px) rotate(45deg); } .room-main .hero-levels .back .more:is(:hover, :focus-visible)::after { transform: translateX(-8px) rotate(-135deg); } } @media (prefers-reduced-motion: no-preference) { .room-main .btn:not(:disabled):active::after { transform: translateY(2px) scaleY(.9); transition-duration: var(--bt-city-press); } } /* Collective grounds: the soft ground an outline warms to, the lift shadow, the warm line under a link */ .room-collective { --bt-soft: var(--sand); --bt-shadow: rgba(59, 31, 7, 0.5); --bt-line: var(--taupe); } .room-collective .alt { --bt-soft: var(--cream); --bt-line: color-mix(in oklab, var(--brown) 45%, transparent); } .room-collective :is(.dark, .col-band) { --bt-soft: color-mix(in oklab, var(--cream) 14%, transparent); --bt-shadow: rgba(16, 8, 1, 0.75); --bt-line: color-mix(in oklab, var(--cream) 45%, transparent); } @media (min-width: 1024px) { .room-collective .col-hero { --bt-soft: color-mix(in oklab, var(--cream) 14%, transparent); --bt-shadow: rgba(16, 8, 1, 0.75); --bt-line: color-mix(in oklab, var(--cream) 45%, transparent); } } .room-main .col-look { --bt-line: var(--taupe); } /* Collective buttons: the pill; the face holds its colour; the shadow waits under it, hidden */ .room-collective .btn:not(:disabled) { --accent-hover: var(--accent); position: relative; isolation: isolate; border-radius: 999px; transition: transform var(--bt-col-t) var(--bt-col), background-color var(--bt-col-t) var(--bt-col); } .room-collective .btn:not(:disabled):focus-visible { outline-offset: 3px; } .room-collective .btn:not(:disabled)::after { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--btn-outline)); border-radius: inherit; box-shadow: 0 14px 22px -12px var(--bt-shadow); opacity: 0; pointer-events: none; transition: opacity var(--bt-col-t) var(--bt-col); } /* Collective arrow links (and the Collective door on a City page): the warm line, no pin */ :is(.room-collective, .room-main .col-look) .more { text-decoration-thickness: 1px; text-decoration-color: var(--bt-line); transition: text-decoration-color var(--bt-col-t) var(--bt-col); } :is(.room-collective, .room-main .col-look) .more::after { transition: transform var(--bt-col-t) var(--bt-col); } .room-main .col-look .more:not(.stretch)::before, .room-main .col-look .more-pin { display: none; } :is(.room-collective, .room-main .col-look) .more:not(.stretch):focus-visible { outline-offset: 6px; border-radius: 4px; } @media (hover: hover) and (pointer: fine) { .room-collective .btn:not(:disabled):is(:hover, :focus-visible) { text-decoration: none; } .room-collective .btn:not(:disabled):is(:hover, :focus-visible)::after { opacity: 1; } .room-collective .btn-outline:not(:disabled):is(:hover, :focus-visible) { background-color: var(--bt-soft); } :is(.room-collective, .room-main .col-look) .more:is(:hover, :focus-visible), .room-collective .tile:hover .more, .room-main .tile:hover .col-look .more, .room-main .col-look.tile:hover .more { text-decoration-color: currentColor; text-decoration-thickness: 1px; } :is(.room-collective, .room-main .col-look) .more:is(:hover, :focus-visible)::after, .room-collective .tile:hover .more::after, .room-main .tile:hover .col-look .more::after, .room-main .col-look.tile:hover .more::after { opacity: 1; transform: rotate(45deg); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .room-collective .btn:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-3px); } :is(.room-collective, .room-main .col-look) .more:is(:hover, :focus-visible)::after, .room-collective .tile:hover .more::after, .room-main .tile:hover .col-look .more::after, .room-main .col-look.tile:hover .more::after { transform: translateX(4px) rotate(45deg); } } @media (prefers-reduced-motion: no-preference) { .room-collective .btn:not(:disabled):active { transform: translateY(0) scale(.98); transition-duration: var(--bt-col-press); } } .room-collective .btn:not(:disabled):active::after { opacity: 0; transition-duration: var(--bt-col-press); } /* Reduced motion: no squeeze; a press darkens the face (or tints an outline on a dark ground) instead */ @media (prefers-reduced-motion: reduce) { :is(.room-main, .room-collective) .btn:not(:disabled):active { transform: none; box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.14); } .room-main .dark .btn-outline:not(:disabled):active, .room-collective :is(.dark, .col-band) .btn-outline:not(:disabled):active { box-shadow: inset 0 0 0 100vmax color-mix(in oklab, currentColor 14%, transparent); } } @media (prefers-reduced-motion: reduce) and (min-width: 1024px) { .room-collective .col-hero .btn-outline:not(:disabled):active { box-shadow: inset 0 0 0 100vmax color-mix(in oklab, currentColor 14%, transparent); } } /* ---------- All Events, the four kind tiles with real photos (Nov 11), every class ev2- ---------- Elliot: "real images in them", the names and words fading over the picture. Same grid, sizes, words, links and order as above (.arms, .arm): each tile's photo fills it (build.py ARM_PHOTOS), and its name and line sit at the foot on a soft fade that grows out of the photo, tinted toward the tile's color. The color stays as a thin edge at the tile's foot (Yellow, Teal, Red for the nights, Cobalt). Retreats keeps its drawn sun (no retreat has happened, so no photo) under the same fade. The tile's height is unchanged: a spacer as tall as the old picture band stands where the picture was, and the words follow it (the side padding stays, so the names keep their size, which follows the tile's inner width). Contrast: the words sit on at least 74 percent of the dark shade, so White text clears 4.5 to 1 even over a white patch of photo. Hover: the photo grows 4 percent; reduced motion: still. */ .arm.ev2 { isolation: isolate; padding: 0 var(--tile-pad); color: var(--white); --focus: var(--white); --ev2-fade: var(--u8); --ev2-shade: var(--black); --ev2-mark: var(--k); background-color: var(--ev2-shade); } .arm.ev2::before { content: ""; flex: 1 0 calc(var(--et-h) + var(--u4)); } .arm.ev2 .ev2-photo { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: transparent; } .arm.ev2 .ev2-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ev2-pos, 50% 50%); } .ev2-words { margin: calc(var(--ev2-fade) * -1) calc(var(--tile-pad) * -1) 0; padding: var(--ev2-fade) var(--tile-pad) var(--tile-pad); background: linear-gradient(to bottom, color-mix(in srgb, var(--ev2-shade) 0%, transparent) 0, color-mix(in srgb, var(--ev2-shade) 40%, transparent) calc(var(--ev2-fade) * 0.55), color-mix(in srgb, var(--ev2-shade) 74%, transparent) var(--ev2-fade), color-mix(in srgb, var(--ev2-shade) 86%, transparent) calc(var(--ev2-fade) + 4rem), color-mix(in srgb, var(--ev2-shade) 90%, transparent) 100%); box-shadow: inset 0 -6px 0 var(--ev2-mark); } .ev2-words .arm-line { color: color-mix(in srgb, var(--white) 92%, var(--ev2-shade)); } .arm.ev2-tour { --ev2-fade: var(--u12); --ev2-pos: 33% 41%; } .arm.ev2-compete { --ev2-shade: color-mix(in srgb, var(--t-teal) 26%, #050807); --ev2-pos: 60% 50%; } .arm.ev2-nights { --ev2-shade: #0B0E0E; --ev2-mark: var(--red); } .arm.ev2-retreats { --ev2-shade: color-mix(in srgb, var(--g-blue) 42%, #050816); --ev2-mark: color-mix(in srgb, var(--g-blue) 70%, var(--white)); background-color: var(--k); } /* The drawn sun fills the Retreats tile as the photos fill theirs; the old band rules (et-) give way here */ .arm.ev2 .ev2-art .et-art { width: 100%; height: 100%; margin: 0; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .arm.ev2 .ev2-photo img:not(.et-art) { transition: transform 700ms var(--ease-out); } .arm.ev2:hover .ev2-photo img:not(.et-art) { transform: scale(1.04); } } /* ---------- La Femme Fight Night photos (Nov 11), every class lf- ---------- Three phone photos from the night (Milwaukee, October 10, 2026): low light and a little soft, so they show no larger than they hold detail (about 800 px) and in the Rebels look's near black and white grade with a dark edge, which reads as the room's atmosphere on the Red band. Nights for a Cause: the La Femme band keeps its words on the left and shows the room (lf-crowd) with the bout (lf-bout) overlapping its foot, the Sold out stamp on the photo; the drawn ring stands down here, since the real ring is in the photo. The La Femme page: its words, then the room, the bout and a ring corner in one block. Photos are never cropped by a slot here except the ring corner, which fills its column (shoot.py FACES). Motion: the photos rise with the band (site.js, data-rise); reduced motion: still. */ .lf-pics figure, .lf-photos figure { position: relative; margin: 0; overflow: hidden; background: var(--black); } .lf-pics img, .lf-photos img { display: block; width: 100%; height: auto; filter: grayscale(0.88) contrast(1.12) brightness(0.92); } .lf-pics figure::after, .lf-photos figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 72px rgba(0, 0, 0, 0.5); } .lf-grid { display: grid; row-gap: var(--u8); } .lf-pics { position: relative; display: grid; } .lf-pics .lf-second { width: 58%; margin-top: -16%; z-index: 1; border: 8px solid var(--red); border-left: 0; border-bottom: 0; } .nfc-stamp.lf-stamp { position: absolute; right: -6px; top: var(--u4); z-index: 2; } @media (min-width: 960px) { .lf-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--u8); align-items: center; } .lf-pics .lf-main { margin-right: calc(-1 * var(--u4)); } } @media (min-width: 1300px) { .lf-pics .lf-second { margin-left: calc(-1 * var(--u8)); } } @media (max-width: 959px) { .nfc-femme.lf-femme { padding-bottom: var(--u8); } .lf-pics .lf-main { margin-left: 8%; margin-right: calc(-1 * var(--pad)); } .lf-pics .lf-second { width: 64%; margin-left: calc(-1 * var(--pad)); } .nfc-stamp.lf-stamp { right: 0; top: var(--u2); } } .lf-photos { display: grid; gap: var(--u3); margin-top: var(--u8); max-width: 1400px; } @media (min-width: 960px) { .lf-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); grid-template-rows: auto auto; } .lf-room { grid-area: 1 / 1; } .lf-bout { grid-area: 2 / 1; } .lf-corner { grid-area: 1 / 2 / 3 / 3; } .lf-corner img { height: 100%; object-fit: cover; object-position: 60% 40%; } } /* ---------- Social icon row (build.py social_row), every class so- ---------- Elliot, Nov 14: icons everywhere, never written handles. Line glyphs in currentColor, so the row takes its ground's ink (City White on Black, Collective Cream on Brown). Each icon is a 44 px link; the row starts 10 px left so the first glyph lines up with the words above it. */ .so-row { display: flex; flex-wrap: wrap; gap: var(--u1); margin: 0 0 0 -10px; padding: 0; list-style: none; } .footer-name > .so-row { margin-top: var(--u2); } .so-link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: inherit; text-decoration: none; transition: transform 300ms var(--ease-out); } .so-icon { display: block; width: 24px; height: 24px; } .so-link:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .so-link:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .so-link, .so-link:hover { transition: none; transform: none; } } /* ---------- Contact (pages/contact.html), every class ct-: the street corner ---------- One idea: on a city corner every way has its sign. The six right pages are street signs on one pole that stands on the Red band's bottom edge (White plates, Black rule: the playbook street sign turned to the light); the social accounts are round signs on their own posts, standing on the Warm grey band's bottom edge; every heading under "Let's talk" is a street-name plate (Black, a White rule inside). The pole is the playbook's halftone. */ .ct-hero, .ct-social { --ct-halftone: radial-gradient(circle, var(--black) 1.5px, transparent 1.9px) 0 0 / 5px 5px, var(--white); } .ct-hero { padding: 0; } .ct-corner { display: grid; grid-template-columns: minmax(0, 1fr); } .ct-words { container-type: inline-size; padding-block: var(--u8) var(--u6); } .ct-words .label + .t-mega { margin-top: var(--u3); } .ct-hero .t-mega { font-size: min(116px, calc(100cqi / 4.35)); } .ct-words .t-mega + .lead { margin-top: var(--u4); } .ct-words .lead { max-width: 30rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .ct-words .btn-row { margin-top: var(--u4); } .ct-plate, main:has(> .ct-hero) .inquiry .t-section { position: relative; z-index: 1; width: fit-content; max-width: 100%; padding: 0.4em 0.75em 0.46em; border-radius: 10px; background: var(--black); color: var(--white); box-shadow: inset 0 0 0 7px var(--black), inset 0 0 0 10px var(--white); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-wrap: balance; } /* The pole: from just above the top plate down to the band's bottom edge, a cap on top, a collar between signs */ .ct-post { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--u2); padding: var(--u6) 0 var(--u12); } .ct-post::before { content: ""; position: absolute; top: var(--u2); bottom: 0; left: 50%; width: 20px; margin-left: -10px; background: var(--ct-halftone); } .ct-post::after { content: ""; position: absolute; top: calc(var(--u2) - 10px); left: 50%; width: 32px; height: 12px; margin-left: -16px; border-radius: 6px 6px 2px 2px; background: var(--black); } .ct-signs { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--u2); width: 100%; } .ct-signs { max-width: 540px; } .ct-signs li { position: relative; width: 100%; } .ct-signs li::before { content: ""; position: absolute; top: -12px; left: 50%; width: 36px; height: 8px; margin-left: -18px; background: var(--black); } .ct-signs a { display: block; min-height: 64px; padding: 15px 28px 16px; border-radius: 8px; background: var(--white); color: var(--black); box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 8px var(--black); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); text-align: center; text-decoration: none; text-wrap: balance; transition: transform 300ms var(--ease-out); } .ct-signs a:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; } @media (hover: hover) and (pointer: fine) { .ct-signs a:hover { transform: translateY(-2px); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } } @media (prefers-reduced-motion: reduce) { .ct-signs a, .ct-signs a:hover { transition: none; transform: none; } } @media (min-width: 1024px) { .ct-hero { display: grid; min-height: min(calc(100svh - var(--header-h)), 880px); } .ct-corner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); } .ct-words { padding-block: var(--u12); } .ct-post { padding-top: var(--u8); } .ct-post::before { top: var(--u4); } .ct-post::after { top: calc(var(--u4) - 10px); } .ct-post .ct-plate { font-size: min(48px, calc(20px + 1.75vw)); } } /* Find us on social: the room's icon row as round street signs, each on its post down to the band's bottom edge */ .ct-social { padding-bottom: 0; } .ct-social-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u6); } .ct-social-head > * + * { margin-top: var(--u3); } .ct-social-head p { font-size: var(--fs-sub); line-height: var(--lh-sub); } .ct-round .so-row { gap: var(--u6); margin: 0; align-items: flex-end; } .ct-round li { display: flex; flex-direction: column; align-items: center; } .ct-round li::after { content: ""; width: 16px; height: clamp(64px, 8vw, 128px); background: var(--ct-halftone); } .ct-round .so-link { position: relative; width: 120px; height: 120px; border-radius: 50%; background: var(--black); color: var(--white); box-shadow: inset 0 0 0 6px var(--black), inset 0 0 0 9px var(--white); } .ct-round .so-link::after { content: ""; position: absolute; bottom: -10px; left: 50%; width: 30px; height: 10px; margin-left: -15px; background: var(--black); } .ct-round .so-icon { width: 56px; height: 56px; } .ct-round .so-link:focus-visible { outline: 3px solid var(--black); outline-offset: 4px; } @media (min-width: 1100px) { .ct-social-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); } .ct-social-head { padding-bottom: var(--section-gap); } .ct-round { align-self: end; } .ct-round .so-link { width: 152px; height: 152px; } .ct-round .so-icon { width: 68px; height: 68px; } } /* Questions: the head is a street-name plate; the questions at Heading Two */ .ct-faq .qa { grid-template-columns: minmax(0, 1fr); } .ct-faq .qa > .head { margin-bottom: var(--u6); } .ct-faq .faq { max-width: none; } /* runs the full grid: no empty band on the right (final pass, Nov 11) */ .ct-faq .faq summary { min-height: 88px; font-size: var(--fs-h2); line-height: var(--lh-h2); } main:has(> .ct-hero) .inquiry .label + .t-section { margin-top: var(--u2); } /* ===== dv-: brand devices from the team's original playbook (Nov 11), one per bare spot ===== Each piece ends on a screen edge, a band edge or a seam, sits where no words are, and never covers a face or a body. Cutouts tilt 2 to 6 degrees; the seal never tilts. Red, Black, White and Warm grey only. About: the flexed arm in the Red band; the HYPER LOCAL street sign under Questions people ask. Movement Tour: the one way and stop sign post on the seam under Tickets and questions (a City street sign, which the Movement Tour may borrow). Retreats: the track arches take the corner rings' place in More retreats, so the rings stay the hero's and the three skies'. Levels: the name pattern panel with the seal on a grey disc in the hero; thin half rings on the seam above Start a conversation. Scroll-in: rise and fade only, off under reduced motion. */ .dv-arm-host, .dv-sign-host, .dv-post-host, .dv-pattern-host, .dv-rings-host { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); position: relative; } .dv-sign-host, .dv-post-host { overflow: clip; } .dv-arm, .dv-sign, .dv-post, .dv-pattern, .dv-rings { position: absolute; pointer-events: none; max-width: none; } /* About, the Red band: the halftone arm comes in from the lower right corner, off the screen edge and the band's foot */ .dv-arm { right: 0; bottom: -36px; width: 160px; height: auto; rotate: -4deg; transform-origin: 100% 100%; } /* From 1280 px it stands right of the belief line, its width tied to the margin so it never meets the words */ @media (max-width: 1279px) { .section.loud.dv-arm-host { padding-bottom: calc(var(--u12) + 112px); } } @media (min-width: 1280px) { .dv-arm { width: min(300px, calc(var(--edge) + 72px)); } } /* About, Questions people ask: the street sign stands on the seam, under the head (lower right on a phone) */ .dv-sign { bottom: -6px; right: calc(var(--pad) + 8px); width: 120px; height: auto; rotate: 4deg; transform-origin: 50% 100%; } .section.dv-sign-host { padding-bottom: calc(var(--section-gap) + 176px); } @media (min-width: 960px) { .section.dv-sign-host { padding-bottom: calc(var(--section-gap) + 72px); } .dv-sign { right: auto; left: calc(var(--edge) + 24px); width: 200px; rotate: -4deg; } } /* Movement Tour, Tickets and questions: the sign post stands on the seam over the footer, under the head */ .dv-post { bottom: -8px; right: calc(var(--pad) + 4px); height: 220px; width: auto; rotate: 3deg; transform-origin: 50% 100%; } @media (max-width: 959px) { .section.loud.dv-post-host { padding-bottom: calc(var(--u12) + 220px); } } @media (min-width: 960px) { .section.loud.dv-post-host { padding-bottom: calc(var(--u16) + 48px); } .dv-post { right: auto; left: calc(var(--edge) + 8px); height: 380px; } } /* Retreats, More retreats: the track arches rise from the seam and run off the left screen edge; the rings rest */ .rt-more .away-art .rings { display: none; } /* Elliot, Nov 11: "sure" to the arches in place of the corner rings */ .away-art .dv-arches { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 0 100%; pointer-events: none; } /* Levels hero: the name pattern panel to the right screen edge, header to seam; the seal on a grey disc in its corner. Under 1280 px a 140 px strip of pattern closes the hero under the words. */ .dv-pattern { left: 0; right: 0; bottom: 0; height: 140px; background: var(--warm-grey) url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be77fe0a8ba1bf88b62_dv-name-pattern.svg") 52% 74% / 800px auto no-repeat; } .hero.dv-pattern-host { padding-bottom: calc(var(--u8) + 140px); } .dv-seal { position: absolute; left: var(--pad); top: 50%; width: 96px; height: 96px; margin-top: -60px; padding: 12px; box-sizing: content-box; border-radius: 50%; background: var(--warm-grey); } @media (min-width: 1280px) { .hero.dv-pattern-host { padding-bottom: var(--u8); } .dv-pattern { left: auto; top: 0; height: auto; width: calc(var(--edge) + 160px); background-size: cover; } .dv-seal { left: 40px; top: auto; bottom: 40px; margin-top: 0; width: 128px; height: 128px; padding: 16px; } } /* Levels: thin Red half rings, center on the left screen edge at the seam between the builder and the inquiry, half on the Black, half on the Warm grey; from 1440 px only, where the margin keeps them clear of every word */ .dv-rings { display: none; } @media (min-width: 1440px) { .dv-rings { display: block; left: 0; bottom: 0; width: min(220px, var(--edge)); height: auto; translate: 0 50%; z-index: 1; } } @media (prefers-reduced-motion: no-preference) { .rise-on :is(.dv-arm, .dv-sign, .dv-post, .dv-arches) { transition: opacity 600ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on :is(.dv-arm, .dv-sign, .dv-post, .dv-arches):not(.in) { opacity: 0; translate: 0 48px; } .rise-on .dv-pattern { transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out); } .rise-on .dv-pattern:not(.in) { opacity: 0; translate: 24px 0; } .rise-on .dv-rings { transition: opacity 700ms var(--ease-out) 150ms; } .rise-on .dv-rings:not(.in) { opacity: 0; } } /* ---------- City reel neon (2026-11-12): the team's own neon city emblems fill the city cards ---------- The six cities with an emblem from their Movement Tour reel (build.py, CITY_NEON) show it large in the middle of a near Black card, glow and all: the row reads as a wall of their own neon signs. The emblem spells the city, so the seal and the big name go (the name stays for screen readers); the small line stays, its rule in the emblem's own color. One scale for all six, as in the reel (0.138 of the card width per file pixel: the widest file fills the card), never drawn wider than the file. A hairline edge keeps the card a card on the Black band. The three cities with no emblem keep their name and seal on the same near Black card, the name in their old city color's rule. The emblem flickers on once as the row scrolls in (opacity only; never under reduced motion). */ .city-card:is(.cn-card, .cn-plain) { --cn-ground: color-mix(in srgb, var(--black) 42%, #000); } .city-card.cn-plain { --cn-accent: var(--poster); } .city-card:is(.cn-card, .cn-plain) .poster { background: var(--cn-ground); color: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 14%, transparent); } .city-card:is(.cn-card, .cn-plain) .poster-line { border-top-color: var(--cn-accent); } .city-card .poster img.cn-neon { position: absolute; left: 50%; top: 42%; width: min(calc(var(--cn-w) * 0.138cqi), 84cqi); max-width: none; height: auto; aspect-ratio: auto; object-fit: fill; translate: -50% -50%; mix-blend-mode: screen; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .reveal-on .city-card .cn-neon[data-reveal] { clip-path: none; transition: none; } .reveal-on .city-card .cn-neon[data-reveal]:not(.in) { opacity: 0; } .reveal-on .city-card .cn-neon[data-reveal].in { animation: cn-flicker 1300ms linear both; } .reveal-on .city-card:nth-child(3n + 2) .cn-neon[data-reveal].in { animation-delay: 160ms; } .reveal-on .city-card:nth-child(3n) .cn-neon[data-reveal].in { animation-delay: 320ms; } } @keyframes cn-flicker { 0% { opacity: 0; } 8% { opacity: 0.85; } 12% { opacity: 0.1; } 20% { opacity: 0.9; } 25% { opacity: 0.35; } 34%, 100% { opacity: 1; } } /* ph-: Instagram photo swaps (Nov 11). Object position only. The Home pros door crops its 3:2 Austin photo square on a wide screen: the window sits at x .03 to .70, so the teacher, the student and the woman in green stay whole and the woman at the right edge (x .86) is wholly out, never sliced. */ .ways.trio .col-door .ph-wrap img.ph-door-assist { object-position: 10% 50%; } /* ml-: the "More to learn" rows on the four Collective series pages (Elliot, Nov 11). The series cutouts stay on the Collective page only; here each row is type alone: its name, its line, and at the row's end, where the person stood, the site's own link chevron (as on .more), so the row still reads as a door. Mocha on Cream and Sand, Sand on Mocha. */ .series.col-cast.ml-rows li { grid-template-columns: minmax(0, 1fr) auto; } .series.col-cast.ml-rows li::after { content: ""; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 10px; height: 10px; margin-right: 6px; border-top: 1.5px solid var(--mocha); border-right: 1.5px solid var(--mocha); transform: rotate(45deg); transition: transform var(--dur-menu) var(--ease-out); } .mn-more .series.col-cast.ml-rows li::after { border-color: var(--sand); } @media (hover: hover) and (pointer: fine) { .series.col-cast.ml-rows .tile:hover::after { transform: translateX(4px) rotate(45deg); } } @media (max-width: 639px) { .series.col-cast.ml-rows li::after { grid-row: 1; } } /* ---------- Partner With Us photo fronts (pages/sponsorship.html), every class pp- ---------- Nov 13, Elliot: the gate's park photo "doesn't make sense and the design could be larger. See if you can fit a picture in the Vendors and the Produced Events designs too". One family: each part's front is drawn over the edges of a real photo of the team's own events, seen through it. Sponsors: a cheering crowd under the STRENGTH screen, through a wider gate (its own symbol, pp-gate, 520 x 480, the blank name board kept). Vendors: a booth seen under the awning (pp-booth: the drawn goods and sign give way to the photo, the counter sits lower). Produced Events: the photo is the stage's back wall (the hero's own pw-stage symbol, its backdrop and microphone made clear). Each photo file is cut to its window's exact shape, so nothing crops it further. The gate grows into the page margin on wide screens and is held to the old height everywhere else, so the Sponsors part is never taller. The hero skyline keeps the plain drawn fronts. */ .pp-photo { position: relative; } .pp-photo > img { position: absolute; max-width: none; object-fit: cover; object-position: 50% 50%; } .pp-photo > .pw-front { position: relative; } .pp-gate > .pw-front { aspect-ratio: 520 / 480; } .pp-gate > img { left: 16.923%; top: 30%; width: 66.154%; height: 70%; } /* x 88 to 432, y 144 to 480: under the banner and both posts */ .pp-booth > img { left: 11%; top: 38.182%; width: 78%; height: 42.273%; } /* x 44 to 356, y 168 to 354: under the awning, the poles and the counter */ .pp-stage > img { left: 7.5%; top: 11.818%; width: 85%; height: 64.091%; } /* x 30 to 370, y 52 to 334: under the truss, the lamps and the deck */ .pp-stage > .pw-front { --s-back: transparent; --s-mic: transparent; } .pw-sponsors .pp-gate { width: min(100%, 500px); } /* stacked: 500 x 462, the old gate's height */ @media (max-width: 639px) { .pw-sponsors .pp-gate { width: min(100%, 333px); } } /* 333 x 307, the old 280 x 308 */ @media (min-width: 1024px) { .pw-sponsors .pp-gate { --pp-out: clamp(0px, var(--pw-edge) - var(--u2), 150px); width: min(620px, 100% + var(--pp-out) + var(--u4)); margin-right: calc(var(--pp-out) * -1); } /* Elliot, Nov 11: the booth and the stage stand as tall as the gate (gate height = its width x 480/520; these are 400 x 440) */ :is(.pw-vendors .pp-booth, .pw-produced .pp-stage) { --pp-out: clamp(0px, var(--pw-edge) - var(--u2), 150px); width: calc(min(620px, 100% + var(--pp-out) + var(--u4)) * 0.8392); } .pw-produced .pp-stage { margin-right: calc(var(--pp-out) * -1); } .pw-vendors .pp-booth { margin-left: calc(var(--pp-out) * -1); } } /* ---------- tb2-: the Home STRNGTH. Movement Tour band on Kraft (2026-11-13) ---------- Elliot: "I don't think I like the black wallpaper. Because it's STRNGTH. it needs more of that colorful feel." The band now wears the festival's own ground (look-strngth.md, Recipe): Kraft paper with grain, the seven-color swath still torn across the top edge, the name lettering in Black with clear space, and below it a painted wall: the STRNGTH. dry brush pieces band-a (Yellow, Teal, Pink, Cobalt dots) and band-b (Orange, Cobalt, the one Black stroke with Red splatter) run behind the city row and off both sides and the bottom edge. Neon needs dark to glow, so every city card stays a near Black sign box, pasted on the wall with a strip of Kraft tape and the short paper shadow. The three cities with no emblem stay unlit boxes with their seal and name; no sign is drawn for them. No card tilts: the cards carry type, and type never tilts. Home only (pages/home.html, the section carries .tb2-band and no longer .dark); the same row on the Movement Tour page keeps its Red band. */ .city-band.tb2-band { position: relative; overflow: hidden; padding-bottom: 0; color: var(--black); background-color: var(--kraft); background-image: linear-gradient(color-mix(in srgb, var(--kraft) 82%, transparent), color-mix(in srgb, var(--kraft) 82%, transparent)), url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be78ef903bbd174e803_film-grain.webp"); } .city-band.tb2-band .night-paint { height: clamp(120px, 11vw, 176px); } /* a phone keeps a real swath, not a ribbon */ .city-band.tb2-band .tour-head { margin-bottom: var(--u3); } .city-band.tb2-band .city-reel { padding-block: clamp(32px, 3.5vw, 64px) clamp(56px, 6.5vw, 128px); background: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be8314275e85f7a7d01_band-b.svg") center bottom / max(100%, 1100px) auto no-repeat, url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be88ef903bbd174e83f_band-a.svg") center top calc(-0.045 * max(100vw, 1100px)) / max(100%, 1100px) auto no-repeat; } /* each piece whole in height, so no stroke is cut flat; a phone crops its sides */ .city-band.tb2-band .city-reel::before, .city-band.tb2-band .city-reel::after { display: none; } /* the edge fades were for a flat ground; paint runs off both sides */ .city-band.tb2-band ul.city-cards { gap: clamp(24px, 2.4vw, 44px); padding-block: 28px 36px; } /* room for the tape above and the shadow below */ .city-band.tb2-band .city-card a { position: relative; box-shadow: var(--strngth-paper-shadow); } .city-band.tb2-band .city-card a::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -12px; width: 34%; height: 26px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--kraft) 80%, transparent); box-shadow: 0 1px 2px rgba(23, 31, 30, 0.18); pointer-events: none; } .city-band.tb2-band .city-card:nth-child(3n + 2) a::before { rotate: 2.5deg; } .city-band.tb2-band .city-card:nth-child(3n) a::before { rotate: -1.5deg; } /* nc-: the City menu's Collective dropdown (Elliot, Nov 11): the Collective's three menu sections side by side, each heading over its pages, the Collective home under a rule at the foot. It is the last item in the bar, so the panel hangs from its right edge. In the phone sheet the groups stack. */ .panel.nc-panel { left: auto; right: calc(var(--u3) * -1); transform-origin: top right; display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--u6); padding-top: var(--u3); } .nc-head { display: block; margin: 0 0 var(--u1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .panel p.nc-head, .sheet p.nc-head { color: var(--accent); } .panel a.nc-head { min-height: 0; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); } .panel a.nc-foot { grid-column: 1 / -1; margin-top: var(--u2); padding-top: var(--u1); border-top: 1px solid var(--rule); font-weight: 700; } .nc-sheet { padding: 0 0 var(--u2) var(--u2); } .nc-sheet .nc-group { padding-top: var(--u2); } .nc-sheet ul { padding: 0; } .sheet .nc-sheet a.nc-head { min-height: 44px; font-size: 0.75rem; font-weight: 700; justify-content: flex-start; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); } .sheet .nc-sheet a.nc-foot { margin-top: var(--u2); border-top: 1px solid var(--rule); font-weight: 700; } /* ---------- h3-: Home, street signs (2026-11-14) ---------- Elliot: "Draft 3 is what I want with a few edits" (_lab/home/3). The page reads as a street corner: headings on street name plates (h3-plate), the tour cities on one sign post, a curb and a lane line under the dates. Home only (pages/home.html); every rule is scoped to an h3- class. Edits: (1) the hero is draft 1's giant three lines with the engraved towers rising from its foot, looking up from the street; (2) the tour sign post stands on raw Black paint with Red splatter (band-b, its Black stroke as the torn top edge of a Black street), no Pink; (3) the dates get a curb, a dashed lane line and the drawn sign post; (4) the three doors return, bigger, their photos filling the frames. */ .h3-plate { display: inline-block; padding: 0.14em 0.36em 0.12em; border-radius: 10px; background: var(--black); color: var(--white); box-shadow: inset 0 0 0 4px var(--black), inset 0 0 0 6px var(--white); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; } .h3-plate.h3-plate-red { background: var(--red); box-shadow: inset 0 0 0 4px var(--red), inset 0 0 0 6px var(--white); } .h3-head { font-size: var(--fs-display); line-height: 1; } /* 1. Hero: three giant lines filling the grid (COMMUNITIES measures 6.8 em), MEET in Red with the pin; the lead and the button beside MEET from 900 px; under them the engraved towers rise from the section's foot, both sides, the street seen looking up, their cut tops fading into the paper. */ .h3-hero { position: relative; overflow: clip; background: var(--white); padding-top: clamp(24px, 3vw, 48px); } .h3-hero .wrap { container-type: inline-size; } .h3-hero .wrap > * { --h3-big: calc(100cqi / 6.8); } .h3-mega { font-size: var(--h3-big); line-height: 0.84; font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; color: var(--black); } .h3-ln { display: block; } .h3-meet { display: flex; align-items: flex-end; width: max-content; color: var(--red); } .h3-pin { flex: none; width: 0.24em; height: 0.35em; margin: 0 0 0.08em 0.05em; background: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b80cbe82572bf1191d8_sitc-icon-pin-for-light-backgrounds.svg") center / contain no-repeat; } .h3-hero-say { margin-top: var(--u4); } .h3-hero-say .lead { max-width: 30rem; font-size: var(--fs-sub); line-height: 1.4; } .h3-hero-say .btn-row { margin-top: var(--u3); } @media (min-width: 900px) { .h3-hero-say { width: min(44%, 32rem); margin: calc(var(--h3-big) * -0.84) 0 0 auto; } } .h3-street { position: relative; height: clamp(200px, 24vw, 420px); margin-top: 0; pointer-events: none; } @media (min-width: 900px) { .h3-street { margin-top: -40px; } } @media (min-width: 1400px) { .h3-street { height: clamp(300px, 21vw, 420px); margin-top: -160px; } } @media (min-width: 1900px) { .h3-street { margin-top: -200px; } } /* Elliot, Nov 11 night: the hero's bottom edge comes up, towers and letters keep their size */ /* Elliot, Nov 11: less white under the words; the towers keep their corners and climb beside the lead (they stay outside the grid at this width) */ .h3-tw { position: absolute; bottom: 0; width: auto; max-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%); mask-image: linear-gradient(to bottom, transparent, #000 26%); } .h3-tw-l { left: 0; height: 90%; } .h3-tw-r { right: 0; height: 100%; scale: -1 1; } @media (prefers-reduced-motion: no-preference) { @keyframes h3-rise { from { opacity: 0; translate: 0 8%; } } .js .h3-tw { animation: h3-rise 1400ms var(--ease-out) 150ms both; } .js .h3-tw-l { animation-delay: 300ms; } } /* 2. The statement: one Red room, the claim, then what we stand against crossed out and the way out */ .h3-say { padding-block: clamp(64px, 8vw, 128px); } .h3-say .wrap { display: grid; gap: var(--u6); align-items: center; } @media (min-width: 900px) { .h3-say .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .h3-claim { font-size: clamp(38px, 5vw, 86px); line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; } .h3-alone { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .h3-alone li { display: flex; align-items: center; gap: 16px; font-size: clamp(22px, 2.2vw, 34px); font-weight: 800; line-height: 1.15; } .h3-alone li::before { content: "\2715" / ""; flex: none; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--white); color: var(--red); font-size: 0.6em; } .h3-alone li.h3-yes::before { content: "\2192" / ""; background: var(--black); color: var(--white); } @media (prefers-reduced-motion: no-preference) { .rise-on .h3-alone li { transition: opacity 500ms var(--ease-out), translate 700ms var(--ease-out); } .rise-on .h3-alone li:nth-child(2) { transition-delay: 90ms; } .rise-on .h3-alone li:nth-child(3) { transition-delay: 180ms; } .rise-on .h3-alone li:nth-child(4) { transition-delay: 320ms; } .rise-on .h3-alone:not(.in) li { opacity: 0; translate: 0 12px; } } /* 3. The three doors, the street plate over them. Wider than the grid from 1200 px (up to 100 px a side), each picture 10:11 and filled: door 1 the loved print on its paint (door.svg), door 2 the Collective's cream frame on its Sand block, door 3 the photo on a Red block. Under them the thin Red line with a pin at each door. */ .h3-ways { background: var(--white); padding-block: var(--section-gap); overflow: clip; } .h3-ways .h3-head { margin-bottom: var(--u6); } .h3-doors { display: grid; gap: var(--u8); margin: 0; padding: 0; list-style: none; } .h3-door { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; } .h3-pic { position: relative; aspect-ratio: 10 / 11; } .h3-pic figure { position: relative; height: 100%; margin: 0; } .h3-pic figure img { width: 100%; height: 100%; object-fit: cover; } .h3-art1.art { overflow: hidden; background: var(--white); } .h3-art1 .paint { right: 0; top: 0; height: 100%; width: auto; } .h3-art1 .print { inset: 9% 11% 13% 9%; padding: 10px; transform: rotate(-2deg); transition: transform 700ms var(--ease-out); } .h3-art1 .print img { object-position: 70% 40%; } .h3-colframe { padding: 0 var(--collective-block-offset) var(--collective-block-offset) 0; } .h3-colframe::before { content: ""; position: absolute; inset: var(--collective-block-offset) 0 0 var(--collective-block-offset); background: var(--sand); } .h3-colframe figure { padding: 14px; background: var(--cream); box-shadow: var(--collective-shadow); } .h3-colframe figure img { object-position: 25% 50%; filter: saturate(.94) sepia(.06); } .h3-block { padding: 0 24px 24px 0; } .h3-block::before { content: ""; position: absolute; inset: 24px 0 0 24px; background: var(--red); } .h3-block figure img { object-position: 40% 50%; } .h3-rail { position: relative; height: 3px; margin-top: var(--u4); background: var(--black); } /* Elliot, Nov 11 night: a line per door (Black, Brown for the Collective), not one Red line across */ .h3-door-pro > .h3-rail { background: var(--brown); } .h3-rail::after { content: none; } /* Elliot, Nov 11 night: no pins on the lines over the three doors */ .h3-words { container-type: inline-size; padding-top: var(--u3); } .h3-words h3 { margin-top: var(--u2); font-size: min(var(--fs-display), calc(100cqi / 5.3)); line-height: 1.02; text-wrap: balance; } .h3-words h3:not(.col-caps) { font-weight: 800; letter-spacing: -0.02em; } .h3-words .col-script + h3 { margin-top: var(--u3); } .h3-words p:not(.label) { max-width: 30rem; margin-top: var(--u2); } .h3-words .h3-go { margin-top: var(--u3); } @media (hover: hover) and (pointer: fine) { .h3-door.tile:hover .h3-art1 .print { transform: rotate(-0.5deg) translateY(-4px); } } @media (min-width: 600px) and (max-width: 1199px) { .h3-door { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: var(--u6); align-items: start; } .h3-door > .h3-pic { grid-row: 1 / 3; } .h3-door > .h3-rail { margin-top: var(--u2); } } @media (min-width: 1200px) { .h3-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u4); margin-inline: calc(-1 * clamp(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2, 100px)); } } @media (prefers-reduced-motion: no-preference) { .rise-on .h3-door { transition: opacity 700ms var(--ease-out) calc(var(--i) * 120ms), translate 900ms var(--ease-out) calc(var(--i) * 120ms); } .rise-on .h3-door:not(.in) { opacity: 0; translate: 0 40px; } } /* 4. STRNGTH. Movement Tour: the name on Kraft with its grain, the nine cities as blades on one post. The post stands in a Black street: band-b's Black stroke, with its Red splatter, is the street's torn top edge (its Orange and Cobalt strokes above it, no Pink), the street runs solid Black to the foot and the lowest blades stand on it. */ .h3-tour { position: relative; overflow: clip; /* clip, not hidden: hidden makes a scroll box and freezes the signs' view() timeline */ padding-top: var(--section-gap); color: var(--black); background-color: var(--kraft); background-image: linear-gradient(color-mix(in srgb, var(--kraft) 82%, transparent), color-mix(in srgb, var(--kraft) 82%, transparent)), url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be78ef903bbd174e803_film-grain.webp"); } .h3-tour-in { position: relative; z-index: 1; display: grid; gap: var(--u6); align-items: start; } .h3-tour-words { container-type: inline-size; } .h3-tour .tour-mark { font-size: min(var(--fs-mega), calc(100cqi / 4.9)); letter-spacing: -0.03em; } .h3-tour-sub { display: block; margin-top: var(--u1); font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; } .h3-tour-words .label { margin-top: var(--u3); color: var(--black); } .h3-tour-words .btn-row { margin-top: var(--u3); } .h3-post { position: relative; display: grid; gap: 12px; margin: 0; padding: var(--u3) 0 0 28px; list-style: none; } .h3-post::before { content: ""; position: absolute; left: 0; top: 0; bottom: -100vh; width: 16px; border-radius: 8px 8px 0 0; background: color-mix(in oklab, var(--black) 62%, var(--white)); } .h3-blade { display: flex; } .h3-blade a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 52px 12px 24px; background: var(--c); color: var(--ink); text-decoration: none; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); transition: translate 220ms var(--ease-out); } .h3-blade a:focus-visible { outline: 3px solid var(--ink); outline-offset: -7px; } .h3-blade b { font-size: clamp(20px, 2vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; } .h3-blade small { font-size: var(--fs-caption); font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } @media (hover: hover) and (pointer: fine) { .h3-blade a:hover { translate: 6px 0; } } @media (min-width: 900px) { .h3-tour-in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .h3-post { padding-left: 0; } .h3-post::before { left: calc(50% - 8px); top: -12px; } .h3-blade a { width: auto; min-width: min(300px, 100%); max-width: 100%; } .h3-blade:nth-child(odd) { justify-content: flex-end; padding-right: calc(50% - 10px); } .h3-blade:nth-child(even) { justify-content: flex-start; padding-left: calc(50% - 10px); } .h3-blade:nth-child(odd) a { align-items: flex-end; text-align: right; padding: 10px 24px 12px 52px; clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%); } @media (hover: hover) and (pointer: fine) { .h3-blade:nth-child(odd) a:hover { translate: -6px 0; } } } .h3-floor { position: relative; z-index: 2; margin-top: calc(-1 * clamp(20px, 3vw, 56px)); padding-bottom: clamp(16px, 2vw, 32px); overflow: hidden; pointer-events: none; } /* Elliot, Nov 11: the flat Black slab "looks pretty bad". Now one raw Black dry brush stroke with its Red splatter (band-black.svg: band-b's own Black stroke and splatter, nothing else), lying on the Kraft like a street; the post stands in it. The Kraft block under the stroke's middle hides the post's foot. */ .h3-floor::before { content: ""; position: absolute; inset: 55% 0 0; background: var(--kraft); } .h3-floor .paint { position: relative; display: block; width: max(112vw, 1100px); max-width: none; height: auto; margin-left: 50%; translate: -50% 0; } @media (prefers-reduced-motion: no-preference) { .rise-on .h3-post .h3-blade a { transition: opacity 500ms var(--ease-out) calc(var(--i) * 60ms), translate 700ms var(--ease-out) calc(var(--i) * 60ms); } .rise-on .h3-post:not(.in) .h3-blade a { opacity: 0; translate: -16px 0; } @media (min-width: 900px) { .rise-on .h3-post:not(.in) .h3-blade:nth-child(odd) a { translate: 16px 0; } } } /* 5. Next dates: the street plate heading, the drawn sign post standing on the curb, each date on its plate in a row (the row is one link), rows parted by a dashed lane line; the Chicago week as a big street sign beside its photo, which is drawn no bigger than its 492 px file. Words keep 48 px from the photo. */ .h3-dates { background: var(--white); padding-block: var(--section-gap); overflow: clip; } .h3-dates-head { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--u2); min-height: calc(clamp(140px, 16vw, 260px) + var(--u3)); padding: 0 clamp(110px, 16vw, 240px) var(--u4) 0; } .h3-dates-post { position: absolute; right: clamp(0px, 3vw, 48px); bottom: 0; height: clamp(140px, 16vw, 260px); width: auto; } .h3-rows { margin: 0; padding: 0; list-style: none; border-top: 6px solid var(--black); } .h3-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u2); padding-block: var(--u4); background: repeating-linear-gradient(90deg, var(--black) 0 40px, transparent 40px 72px) left bottom / 100% 3px no-repeat; } .h3-date { justify-self: start; font-size: clamp(24px, 2.4vw, 36px); padding: 0.3em 0.5em 0.38em; } .h3-date small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; } .h3-row-words h3, .h3-board h3 { margin-top: var(--u1); font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; } .h3-row-words p:not(.label) { margin-top: var(--u1); } @media (min-width: 900px) { .h3-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; column-gap: var(--u6); } } @media (hover: hover) and (pointer: fine) { .h3-row.tile:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } } .h3-week { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: var(--u6); } .h3-week-pic { order: -1; margin: 0; max-width: 492px; } .h3-week-pic img { width: 100%; aspect-ratio: 1; } .h3-board { position: relative; z-index: 1; margin: -24px calc(var(--pad) * -1) 0; padding: 72px var(--pad) var(--u4); border-radius: 14px; background: var(--black); color: var(--white); box-shadow: inset 0 0 0 6px var(--black), inset 0 0 0 9px var(--white); } .h3-board .h3-plate { font-size: clamp(22px, 2.2vw, 34px); margin-bottom: var(--u2); } .h3-board .label { color: var(--white); } .h3-board p:not(.label, .h3-plate) { margin-top: var(--u1); max-width: 34rem; } .h3-board .more { margin-top: var(--u3); color: var(--white); } @media (min-width: 900px) { .h3-week { grid-template-columns: minmax(0, 1fr) minmax(0, 492px); align-items: center; } .h3-week-pic { order: 0; } .h3-board { margin: 0 -48px 0 0; padding: var(--u6) calc(48px + var(--u8)) var(--u6) var(--u6); } } /* h3- round 2 (Elliot, Nov 11). Doors: the pros door shows the Collective's own hero photo; on a wide screen the three doors share their rows (label, name, line, link), so the words line up across. Tour: the paint fills the open ground under the words; each sign swings out from the post as it scrolls into view and the post grows down with the page (scroll-driven, where the browser can; elsewhere the signs rise once as before). */ .h3-colframe figure img[src$="col-presenter.webp"] { object-position: 64% 30%; object-view-box: inset(4% 17% 30% 41%); } /* the presenter from the waist up, not the whole room */ @media (min-width: 1200px) { .h3-doors { grid-template-rows: repeat(6, auto); row-gap: 0; column-gap: var(--u4); } .h3-door { grid-row: span 6; grid-template-rows: subgrid; } .h3-doors { container-type: inline-size; } /* a subgrid cannot be a container, so the list measures for the names */ .h3-words { grid-row: span 4; display: grid; grid-template-rows: subgrid; container-type: normal; } .h3-words h3 { font-size: min(var(--fs-display), calc((100cqi - 2 * var(--u4)) / 3 / 5.3)); } .h3-words > .label { align-self: end; } .h3-words > h3 { align-self: start; } } .h3-tour-paint { display: none; } @media (min-width: 900px) { .h3-tour-paint { display: block; position: absolute; left: 0; bottom: clamp(190px, 19vw, 340px); width: min(46vw, 760px); object-fit: cover; object-position: right center; height: auto; max-width: none; pointer-events: none; mix-blend-mode: multiply; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { @keyframes h3-swing-l { from { opacity: 0; transform: perspective(900px) rotateY(-88deg); } } @keyframes h3-swing-r { from { opacity: 0; transform: perspective(900px) rotateY(88deg); } } @keyframes h3-grow { from { scale: 1 0; } } .rise-on .h3-post .h3-blade a, .rise-on .h3-post:not(.in) .h3-blade a { opacity: 1; translate: none; transition: translate 200ms var(--ease-out); transform-origin: left center; animation: h3-swing-l linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; } .h3-post { view-timeline: --h3-post block; } .h3-post::before { transform-origin: top; animation: h3-grow linear both; animation-timeline: --h3-post; animation-range: entry 0% cover 70%; } @media (min-width: 900px) { .rise-on .h3-post .h3-blade:nth-child(odd) a { transform-origin: right center; animation-name: h3-swing-r; } } } } /* np-: the City name pattern (dv-name-pattern.svg, Black on Warm grey, one name in Red) as a strip above the footer of every City page (Elliot, Nov 11). One piece, never tiled, so no seam; it grows with the screen. */ .np-strip { height: clamp(48px, 5.5vw, 100px); background: var(--warm-grey) url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be8ae5aea42bbc75ebe_dv-name-strip.svg") 50% 50% / auto 100% no-repeat; } /* half height, smaller names (Elliot); one wide piece, no seam */ /* sf-: the Red room that says what we stand for, three lines set huge (Home, About; Elliot, Nov 11) */ .sf-room { padding-block: clamp(64px, 8vw, 128px); } .sf-room .wrap { container-type: inline-size; } .sf-lines { margin: 0; font-weight: 800; font-size: calc(100cqi / 12.9); line-height: 1; letter-spacing: -0.035em; } /* the longest line runs the full width */ .sf-lines span { white-space: nowrap; } .sf-lines span { display: block; } @media (prefers-reduced-motion: no-preference) { .rise-on .sf-lines span { transition: opacity 500ms var(--ease-out), translate 700ms var(--ease-out); } .rise-on .sf-lines span:nth-child(2) { transition-delay: 120ms; } .rise-on .sf-lines span:nth-child(3) { transition-delay: 240ms; } .rise-on .sf-lines:not(.in) span { opacity: 0; translate: 0 12px; } } /* fs-: the Movement Tour page's seven stages stand on Kraft with its grain, the tour's own paint beside the heading and one raw Black stroke flush on the bottom edge, like the Home tour section (Elliot, Nov 11: no black wallpaper) */ .fs-paper { position: relative; overflow: clip; padding-bottom: 0; color: var(--black); background-color: var(--kraft); background-image: linear-gradient(color-mix(in srgb, var(--kraft) 82%, transparent), color-mix(in srgb, var(--kraft) 82%, transparent)), url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be78ef903bbd174e803_film-grain.webp"); } .fs-paper > .wrap { position: relative; z-index: 1; } .fs-paint { display: none; } @media (min-width: 900px) { .fs-paint { display: block; position: absolute; right: 0; top: clamp(40px, 5vw, 96px); width: min(42vw, 720px); height: auto; max-width: none; scale: -1 1; pointer-events: none; mix-blend-mode: multiply; } } .fs-floor { margin-top: var(--u6); overflow: hidden; pointer-events: none; } .fs-floor img { display: block; width: max(112vw, 1100px); max-width: none; height: auto; margin-left: 50%; translate: -50% 0; } .h3-board .pin { background-image: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53be7cbe82572bf11c099_heart-pin-white.svg"); } /* White pin on dark grounds */ /* Home, the Chicago week: the Movement Tour page's own Chicago piece beside the sign, flush on the section's foot */ .h3-week-art { order: -1; min-width: 0; } .h3-week-art .chi-art { max-height: 700px; } /* keeps its own bleed to the screen edge, so the Black foot never ends flat */ @media (max-width: 899px) { .h3-week-art .chi-art { width: calc(100% + 2 * var(--edge)); margin-inline: calc(var(--edge) * -1); } } @media (min-width: 900px) { .h3-week { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .h3-week-art { order: 0; } .h3-dates { padding-bottom: 0; } /* the art stands on the section's bottom edge */ .h3-week .h3-board { align-self: center; margin-bottom: var(--section-gap); } } .h3-board h3.h3-week-name { font-size: clamp(36px, 3.7vw, 60px); line-height: 1; letter-spacing: -0.03em; } .h3-week-mark { white-space: nowrap; } .h3-week-sub { display: block; margin-top: var(--u1); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: 0; } /* Final pass, Nov 11: no square controls. The value builder's choices are round like the buttons, its check tiles round at the corners like the street sign board. */ .opt { border-radius: 999px; padding-inline: var(--u3); } .pick { border-radius: 14px; } .pick::before { border-radius: 4px; } /* ---------- Grounds, Nov 11 (Elliot yes to both): no two sections in a row on one ground, one full Red band a page ---------- MN+: the Espresso hero stays; Training, Recovery, Nutrition steps up to Mocha (Cream 6.9:1, Sand 5.4:1, the Cream rules as before), then More to learn on Sand (class .alt; Brown ink, Mocha series names 5.3:1) before the Brown footer. Espresso, Mocha, Sand: still the basement room, never the Cream of WMN+. About, What we do (.ab-what): off Red onto Warm grey (class .alt), so the Strengthen room is the page's one Red band. Black words, Red label, Red rules over the three parts and beside the belief line; the heart pin after the name is the Black one (the default). The engraved arm keeps its torn White edge on the grey and is still clipped at the band's foot. */ .mn-ways { --band: var(--mocha); } .ab-what { overflow: clip; } .ab-what .cols.runin > li { border-top-color: var(--red); } .ab-what .belief { border-left-color: var(--red); } .sf-lines b { font-weight: inherit; color: var(--black); } /* Elliot, Nov 11 night: the three key words in Black */ /* lg-: the new logo on the site (Elliot, Nov 11). City bar: the header logo as a picture, never under 38 px tall so IN THE stays readable. Footer: the profile logo where the old seal sat. */ .lettering.logo-head { display: inline-flex; align-items: center; } .logo-head img { display: block; height: clamp(38px, 3.3vw, 52px); width: auto; } .foot-logo { display: block; width: auto; height: 120px; } /* st-: Our Story (/about), Nov 13 redo (Elliot: "make people understand what the company is, why we're doing it, and where we're going"). Three acts and a hand-off: the opening (Black, his pin picture, one story paragraph), What (page ground), Why (the page's one Red band), Where (page ground, Chicago then Los Angeles, the counts, 2027), and the close (Warm grey). The one idea that ties it: the name's own lettering, ExtraBold beside Regular, set as the page's big lines (Our Story, the three meets, Strength is where you are), and the heart pin as the last full stop. This page only. Not to be confused with the stage cards (.st-card and friends) on another page. */ .st-rg { font-weight: 400; } .st-open { overflow: clip; padding-block: var(--u8) var(--u12); } .st-title { margin-top: var(--u2); font-size: var(--fs-mega); line-height: 0.95; letter-spacing: -0.035em; font-weight: 800; } /* Elliot, Nov 11 night: the same letters as the Showdown headline (.t-mega) */ .st-title b { font-weight: 800; } .st-open-grid { display: grid; gap: var(--u6); margin-top: calc(var(--u8) + var(--u1)); align-items: center; } /* the capitals' glyph box runs past the tight line height, so 72 px keeps the pin 32 px clear */ .st-pin-art { margin: 0 auto; width: min(62%, 280px); } .st-pin-art img { display: block; width: 100%; height: auto; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(closest-side, var(--black) 76%, transparent 100%); mask-image: radial-gradient(closest-side, var(--black) 76%, transparent 100%); } .st-tale { max-width: 34em; font-size: clamp(19px, calc(15px + 0.62vw), 25px); line-height: 1.6; } @media (min-width: 960px) { .st-open-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--u8); } .st-pin-art { width: 100%; max-width: 480px; margin: 0; } } /* What: the three meets as big two-weight lines, each with its plain sentences beside it */ .st-h2 { margin-top: var(--u2); max-width: 15em; font-size: calc(var(--fs-display) * 0.8); } /* Elliot, Nov 11 night: What we do and Why we do it a step smaller */ .st-meets { list-style: none; padding: 0; margin: var(--u6) 0 0; display: grid; gap: var(--u6); } .st-meets > li { display: grid; gap: var(--u3); padding-top: var(--u4); border-top: 2px solid var(--red); } .st-say { font-weight: 400; font-size: clamp(28px, calc(12px + 2.8vw), 54px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; } .st-say b { font-weight: 800; } .st-meets p { max-width: 30em; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (min-width: 960px) { .st-meets { margin-top: var(--u8); } .st-meets > li { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--u8); align-items: start; } /* the line and its sentences start on the same level, right under the Red line */ } /* Why: the belief, on the Red band */ .st-why-head { margin-top: var(--u2); max-width: 11em; font-weight: 800; font-size: clamp(36px, calc(12px + 4.6vw), 88px); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; } /* Why (Elliot, Nov 11 night: "very unclear", rewritten): two blocks only. The headline answers the label on the left; two short paragraphs on the right, one weight. */ .st-why-grid { display: grid; gap: var(--u4); } .st-why-text { max-width: 30em; font-size: var(--fs-sub); line-height: var(--lh-sub); } .st-why-text + .st-why-text { margin-top: var(--u3); } @media (min-width: 960px) { .st-why-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--u8); align-items: start; } .st-why-side { padding-top: calc(var(--u2) + 1.6em); } /* the first line of text sits level with the first line of the headline */ } /* Where: Chicago first (its own photo to the screen edge), the counts, then 2027 beside the Los Angeles group in the offset Black frame */ .st-where { --edge: calc(max(0px, (100vw - var(--content-max) - 2 * var(--pad)) / 2) + var(--pad)); overflow: clip; } .st-chi { display: grid; gap: var(--u6); } .st-chi-words { order: -1; } .st-chi-words h2 { margin-top: var(--u2); } .st-chi-photo img { display: block; width: 100%; height: auto; } .st-chi-photo figcaption, .st-frame figcaption { margin-top: var(--u6); font-size: var(--fs-caption); line-height: var(--lh-caption); } .st-chi-words p { margin-top: var(--u4); max-width: 30em; font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (min-width: 960px) { .st-chi { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--u8); align-items: center; } .st-chi-words { order: 0; } .st-chi-photo { margin-left: calc(var(--edge) * -1); } .st-chi-photo figcaption { margin-left: var(--edge); } } .st-where .grow { margin-top: var(--u12); } .st-next { display: grid; gap: var(--u8); margin-top: var(--u12); } .st-frame { margin: 0 var(--u3) var(--u3) 0; } .st-frame img { display: block; width: 100%; height: auto; box-shadow: var(--u3) var(--u3) 0 var(--black); } .st-next-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--u6); } .st-next-list > li { padding-top: var(--u3); border-top: 2px solid var(--red); } .st-next-list li > * + * { margin-top: var(--u2); } .st-year { font-weight: 600; font-size: var(--fs-caption); line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red-text); } .st-next-list h3 { font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.02em; } .st-next-list p { max-width: 26em; font-size: var(--fs-sub); line-height: var(--lh-sub); } .st-next-list p.st-year { font-size: var(--fs-caption); line-height: 1.2; } @media (min-width: 960px) { .st-next { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--u8); align-items: center; } } /* The close: the belief in the name's own lettering, the heart pin as its full stop, then a door for every reader */ .st-big { font-weight: 400; font-size: clamp(42px, calc(10px + 6.4vw), 124px); line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; max-width: 9.5em; } .st-big b { font-weight: 800; } .st-pin { display: inline-block; width: 0.24em; height: 0.35em; margin-left: 0.05em; vertical-align: -0.02em; background: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6af53b80cbe82572bf1191d8_sitc-icon-pin-for-light-backgrounds.svg") center / contain no-repeat; } .st-close-lead { margin-top: var(--u4); max-width: 30em; font-size: var(--fs-sub); line-height: var(--lh-sub); } .st-doors { display: grid; gap: var(--u6) var(--u4); margin-top: var(--u12); } .st-door ul { list-style: none; padding: 0; margin: var(--u2) 0 0; } .st-door li { border-top: 2px solid var(--black); } .st-door li:last-child { border-bottom: 1px solid var(--rule); } .st-door li + li { border-top-width: 1px; border-top-color: var(--rule); } .st-door a { display: flex; align-items: center; justify-content: space-between; gap: var(--u2); min-height: 72px; padding-block: var(--u2); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.015em; text-decoration: none; } .st-door a::after { content: ""; flex: none; width: 0.42em; height: 0.42em; border-top: 3px solid var(--red); border-right: 3px solid var(--red); rotate: 45deg; translate: -0.15em 0; transition: translate 150ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .st-door a:hover { text-decoration-line: underline; } .st-door a:hover::after { translate: 0.05em 0; } } .st-else { margin-top: var(--u8); font-size: var(--fs-sub); line-height: var(--lh-sub); } @media (min-width: 960px) { .st-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .st-door a::after { transition: none; } } /* Our Story opening, Elliot Nov 11 night: "Chicago, 2018" at the pin picture's lower left; the three Strengthen lines small under the paragraph. */ .st-pin-art { position: relative; } .st-pin-art figcaption { margin-top: var(--u6); color: var(--band-ink); } .st-three { display: grid; gap: var(--u2) var(--u4); list-style: none; padding: var(--u3) 0 0; margin: var(--u6) 0 0; border-top: 1px solid var(--rule); max-width: 40rem; font-size: var(--fs-body); line-height: var(--lh-body); } .st-three b { display: block; font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600; color: #E8574F; margin-bottom: 2px; } /* Red labels, as Elliot liked them; a touch lighter than Red so small type reads on Black (4.7 to 1) */ @media (min-width: 640px) { .st-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { .st-open-grid { align-items: end; } .st-pin-art figcaption { line-height: var(--lh-body); } } /* Elliot: "Chicago, 2018" on the same line as the last line of the three-part row */ /* foot-slogan: the company slogan under the footer logo (Elliot, Nov 11 night); a normal period at this size (pin rule 7) */ .footer-name p.foot-slogan { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--white); } /* ---------- ar-: long reading pages (F4, Nov 11): Privacy Policy (City), Resources and its articles (Collective) ---------- Shared parts first (.label, .col-long, .t-mega, .qa, .faq, .links.big.read, .cols, .dashes, .ph-wrap, .tc); ar- adds only the reading column (about 65 characters), the article opening, the policy's contents list and its table. Words come from the live pages unchanged. The bar's button is each page's one filled button; an article's offer is the round outline. */ .ar-prose { max-width: 32em; } .ar-prose > * + * { margin-top: var(--u2); } .ar-prose h2 { margin-top: var(--u8); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; text-wrap: balance; } .room-collective .ar-prose h2 { font-family: "Noto Serif Display", serif; font-weight: 400; letter-spacing: 0; } .ar-prose > :first-child { margin-top: 0; } .ar-prose h3 { margin-top: var(--u4); font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); } .ar-prose h2 + h3 { margin-top: var(--u3); } .ar-prose a { overflow-wrap: anywhere; } /* Article opening: Sand, words on the left 7 of 12, the source photo whole on the right on its Cream block, set 24 px toward the words and down (a portrait photo at most 22 rem wide, a landscape one 30 rem). Phone: words, then the photo. */ .ar-open { padding-block: var(--u12); } .ar-open-grid { display: grid; gap: var(--u8); } .ar-open-words > * + * { margin-top: var(--u3); } .ar-open-words > .btn-row { margin-top: var(--u4); } .ar-title { font-size: var(--fs-display); max-width: 16em; } .ar-open .lead, .ar-hub .lead { max-width: 34rem; font-size: var(--fs-sub); line-height: var(--lh-sub); } .ar-ph { width: 100%; max-width: 30rem; margin: 0 0 var(--collective-block-offset) var(--collective-block-offset); } .ar-ph.tall { max-width: 22rem; } .ar-ph::before { inset: var(--collective-block-offset) var(--collective-block-offset) calc(var(--collective-block-offset) * -1) calc(var(--collective-block-offset) * -1); } @media (min-width: 1024px) { .ar-open-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } .ar-ph { justify-self: end; } } @media (max-width: 639px) { .ar-open { padding-block: var(--u8); } } /* Resources hub: a type hero on Cream (the Mega serif capitals), then the reading list on Sand, then the kinds to come */ .ar-hub { padding-block: var(--u12) var(--u8); } .ar-hub .t-mega { margin-top: var(--u3); } .ar-hub .t-mega + .lead { margin-top: var(--u4); } @media (max-width: 639px) { .ar-hub { padding-block: var(--u8) var(--u6); } } /* Privacy Policy: the headline, then from 1024 px the contents list on the left 4 of 12 (it stays in view) and the policy on the right in the reading column. Every contents row is a 44 px target. */ .ar-legal-head { margin-bottom: var(--u8); } .ar-legal-head > * + * { margin-top: var(--u3); } .ar-legal-head .t-hero { max-width: 14em; } .ar-toc { margin-bottom: var(--u8); } .ar-toc ol { margin-top: var(--u2); border-bottom: 1px solid var(--rule); } .ar-toc li { border-top: 1px solid var(--rule); } .ar-toc a { display: flex; align-items: center; min-height: 44px; padding-block: var(--u1); font-weight: 500; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .ar-toc a:hover { text-decoration-line: underline; } } @media (min-width: 1024px) { .ar-legal-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--u8); align-items: start; } .ar-toc { position: sticky; top: calc(var(--header-h) + var(--u3)); margin-bottom: 0; } } /* The policy's table: ruled rows at Caption; under 640 px each tool becomes a block, each cell named by its column */ .ar-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); line-height: var(--lh-caption); } .ar-table th, .ar-table td { padding: var(--u2) var(--u2) var(--u2) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); } .ar-table thead th { font-weight: 600; border-top: 0; border-bottom: 2px solid var(--ink); } .ar-table tbody th { font-weight: 600; } @media (min-width: 640px) { .ar-table tbody tr:last-child > * { border-bottom: 1px solid var(--rule); } } @media (max-width: 639px) { .ar-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ar-table tr, .ar-table th, .ar-table td { display: block; } .ar-table tbody tr { padding-block: var(--u2); border-top: 1px solid var(--rule); } .ar-table tbody tr:last-child { border-bottom: 1px solid var(--rule); } .ar-table tbody tr > * { padding: 0; border: 0; } .ar-table tbody th { font-size: var(--fs-body); line-height: var(--lh-body); } .ar-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--u2); margin-top: var(--u1); } .ar-table td::before { content: attr(data-label); font-weight: 600; } } /* Resources hub (Nov 12): with sixteen articles the list is taller than a screen, so its heading stays in view beside it instead of sitting centered on an empty column. Articles reuse the Privacy Policy grid: contents left, words right. */ @media (min-width: 960px) { .qa.ar-reading > .head { position: sticky; top: calc(var(--header-h) + var(--u6)); } }