/* ========================================================================== Kings Hands Boxing Club — wireframe stylesheet Shared by all six pages: index · coach · classes · youth · gym · come-in SURFACE PASS — done 2026-07-26, calibrated on Brandon's monitor (R006). ✅ Multi-value section blacks: the --ink-0…--ink-3 scale below. ✅ Canvas texture: ambientCG Fabric030 (CC0), high-passed. See the CANVAS TEXTURE block for why the tile is filtered and why `screen`, not `overlay`. ========================================================================== */ :root{ /* SURFACE SCALE — "not one black, several." Five steps, each a few values apart, so the page separates without a single divider line. Structure you perceive but can't point at. Steps are deliberately tight: at this range the eye reads depth, not stripes. */ --ink-0:#050404; /* deepest — footer, hero + closing CTA scrims */ --ink:#0a0908; /* base page */ --ink-1:#0e0c0b; /* raised band — alternating sections */ --ink-2:#141210; /* panels: cards, tiers, voices, the proof strip */ --ink-3:#1a1715; /* elevated — hover states */ --paper:#f2efe9; --muted:#9b948c; /* TEXT LADDER — added 2026-07-26. Surfaces had --ink-0…--ink-3 from the start; text never got the same treatment, so its greys were picked one at a time (#ddd8d0 here, #cdc7bf there) and the hierarchy came out accidental. Four deliberate steps now, same idea as the ink scale: how close a thing sits to the fixture. Display is IN the light; meta is furthest back in shadow. */ --t-0:#f4f1eb; /* display + emphasis — full light */ --t-1:#dcd6cd; /* lede, the bridge from headline to body */ --t-2:#c3bdb4; /* body copy — a real step back, not a nudge */ --t-3:#9b948c; /* meta: cites, captions, notes (same as --muted) */ --blood:#c8102e; --blood-lo:#8f0b20; --gold:#c9a227; --edge:rgba(242,239,233,.10); /* display: heavy condensed grotesque, matches the flyer's energy */ --hdr:"Anton",Impact,"Haettenschweiler","Arial Narrow",sans-serif; /* labels, eyebrows, buttons, nav — condensed with real weights */ --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif; --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--ink);color:var(--paper);font-family:var(--body);line-height:1.65; -webkit-font-smoothing:antialiased} /* THE PAGE DOES NOT SLIDE SIDEWAYS. Several things on this site deliberately hang past their box — the poster's tape strips, the hex field's light spill, the pasted photos' tilt. On a desktop that costs nothing. On a phone it makes the ENTIRE page pannable: you swipe and the site slides off-centre into dead black, then sits there. `clip`, NOT `hidden`: `hidden` makes the element a scroll container, which kills `position:sticky` on the nav — and this nav has already cost one iOS bug. `clip` contains the overflow without creating a scroller, so the nav stays stuck and there is nothing to swipe into. Set on both html and body because either one alone still leaves the other able to pan. */ html,body{overflow-x:clip} /* Alternate the section bands. No HTML changes and no divider lines — the page just breathes. Sections that set their own surface (.youth, .close) opt out. */ section:nth-of-type(even):not(.youth):not(.close){background:var(--ink-1)} /* ---------- CANVAS TEXTURE ---------- Real photographic canvas weave (ambientCG Fabric030, CC0), desaturated to the weave alone and tiled at 512px. A fixed overlay rather than a body background, so every surface — base, bands, cards, scrims — gets the same tooth instead of only the ones that don't paint over it. Flat #000 is the cheapest surface on the web; this is what gives it material. On a boxing gym the referent is real: canvas, leather, wraps. TILE IS HIGH-PASSED, which is why --tooth looks high. The raw diffuse map has a mid-grey average; on `screen` that lifts the ENTIRE page toward grey and kills the red (tried it — the page went muddy). So the tile is filtered to keep only where the weave is brighter than its local average: flats go to black, thread highlights stay bright, mean drops to ~16/255. `screen` then lights the threads and leaves the field alone. BLEND NOTE: `overlay` was the original mistake. Overlay pivots around mid-grey, so against #0a0908 it barely moves the pixels — at 3% it was effectively a no-op that looked like a plain black page. Tune --tooth and nothing else. */ :root{--tooth:0} /* was .20 — the canvas weave is redundant now that the wall is a real photographed surface. Kept, not deleted: set it back above 0 if the wall ever comes off. */ body::after{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none; background-image:url("assets/canvas-tile.jpg"); background-size:300px 300px; opacity:var(--tooth); mix-blend-mode:screen} img{max-width:100%;display:block} /* `viewport-fit=cover` (see nav) hands us the whole screen, INCLUDING the parts the hardware eats — the notch and rounded corners in landscape, the home indicator at the bottom. That is the deal it makes: the nav gets to cover the status-bar strip, and in exchange every other edge has to keep itself clear. `max()` means the inset only ever widens the existing margin, never narrows it, and it is 0 on hardware with no cutouts. */ .wrap{width:min(1180px,92vw);margin-inline:auto; padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right))} /* Anton ships a single weight — never ask for bold or the browser fakes it. It's genuinely condensed, so the old scaleX() squeeze is gone too. */ h1,h2,h3,.hdr{font-family:var(--hdr);font-weight:400;text-transform:uppercase;text-wrap:balance; letter-spacing:.005em;line-height:.9} h1{letter-spacing:-.005em} /* every small-caps label runs Barlow Condensed at 600 */ .kick,.eyebrow,.btn,nav .lnk a,.proof div,.card .who,.pill,.spots,.tier .name, .tier .per,.tier .when,.voice .who,footer h4,.band .kingsway,.motto .by, blockquote cite,.ph span,.more,.fact b,.hours dt{font-weight:600} /* ---------- placeholder blocks: each names the shot we need ---------- */ /* Flat panel, not a hatch. These are scaffolding — when every photo is missing they cover most of the page, and a loud diagonal pattern becomes the loudest thing on the screen. Quiet frame, readable caption, gets out of the way. */ .ph{position:relative;background:#131110; border:1px solid rgba(201,162,39,.22);display:grid;place-items:center; text-align:center;padding:1.5rem;min-height:200px;overflow:hidden} .ph span{font-family:var(--cond);font-size:.78rem;letter-spacing:.16em;color:var(--gold); text-transform:uppercase;max-width:26ch;line-height:1.5} .ph:not(.has-photo)::after{content:"PHOTO";position:absolute;top:.5rem;left:.6rem;font:700 .6rem/1 var(--cond); letter-spacing:.2em;color:rgba(201,162,39,.5)} /* ========================================================================== THE ROOM — the site is built out of Ronnie's actual gym. Black corrugated metal walls · a red LED strip where wall meets ceiling · hexagonal fixtures throwing light down · everything else in shadow. The rule: translate the room's LOGIC, not its appearance. No fake 3D room, no hexagons as decoration. Same materials, same light, same rhythm — a member should feel at home without being able to say why. Two things kept separate on purpose, because a photograph fuses them and that's what made the earlier canvas texture feel dead: · the MATERIAL is a real scanned texture (ambientCG CorrugatedSteel005, CC0) · the LIGHT is built in CSS, where it stays sharp and can follow the layout ========================================================================== */ :root{ --led:#ff2a3d; /* the LED itself — hotter than --blood, it's a light */ --led-glow:200,16,46; /* rgb for the bloom */ --wall-op:.34; /* ribbed metal strength */ --rib-op:.42; /* strength of the drawn rib profile */ --wall-rib:820px; /* rib pitch. SMALLER = tighter ribs, but below ~900px they stop reading as steel and start reading as scanlines. This is the knob that matters. */ } /* --- the wall: vertical ribbing, barely there --- */ .wall-surface{position:relative;isolation:isolate} /* Layer 1 — the WEATHERING. Real scan, irregular, no two feet of it alike. */ .wall-surface::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:url("assets/wall-steel.jpg"); background-size:var(--wall-rib) auto; background-repeat:repeat; opacity:var(--wall-op); mix-blend-mode:screen} /* Layer 2 RETIRED 2026-07-26 — the ribs used to be drawn with a repeating-linear-gradient because my crushed scan had lost them. Replaced by a REAL seamless photograph of corrugated metal (Wikimedia Commons, CC0), graded to black. The rib shading in it is photographed light on photographed metal, which is what the drawn version could only approximate. Nothing here is generated by us. */ .wall-surface > *{position:relative;z-index:1} /* --- the LED strip: where wall meets ceiling. This replaces dead 1px borders. Same job in the room and on the page — it marks the edge between two surfaces, and it glows. --- */ .led{position:relative;height:0} .led::before{ /* the strip */ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg, rgba(var(--led-glow),0) 0%, var(--led) 12%, #ff5a68 50%, var(--led) 88%, rgba(var(--led-glow),0) 100%); box-shadow:0 0 9px rgba(var(--led-glow),.75)} /* the tube's own halo */ .led::after{ /* the bloom it throws */ content:"";position:absolute;left:0;right:0;top:-26px;height:70px; pointer-events:none; background:linear-gradient(180deg, rgba(var(--led-glow),0) 0%, rgba(var(--led-glow),.29) 38%, rgba(var(--led-glow),.155) 55%, rgba(var(--led-glow),0) 100%); filter:blur(8px)} /* --- the hex fixture: a light source, not a shape. Only the bloom survives. --- */ .hexlight{position:absolute;pointer-events:none;z-index:0; width:min(760px,90vw);aspect-ratio:1.15/1; left:50%;translate:-50% 0;top:-14%; background: radial-gradient(ellipse 46% 34% at 50% 42%, rgba(255,252,245,.16), transparent 70%), radial-gradient(ellipse 62% 46% at 50% 44%, rgba(255,250,240,.07), transparent 72%); filter:blur(24px)} /* --- logo mounted on the wall, the way signage actually hangs --- */ .wall-logo{position:absolute;z-index:0;pointer-events:none; width:min(600px,66vw);right:4%;top:7%;opacity:.30; filter:grayscale(.15) contrast(1.06) drop-shadow(0 0 34px rgba(0,0,0,.8)); mix-blend-mode:screen} @media(max-width:860px){ .wall-logo{width:78vw;right:auto;left:50%;translate:-50% 0;top:6%;opacity:.22} } @media(prefers-reduced-motion:reduce){.hexlight{filter:blur(20px)}} /* ---------- nav ---------- Six pages means mobile needs real navigation, not just the CTA. Below 900px the links drop to their own scrollable row under the logo; above it they sit inline. No JS, nothing to open. */ /* 2026-07-27: was rgba(10,9,8,.92) + backdrop-filter:blur(10px) — a glass-nav look, but iOS Safari has a known bug where `backdrop-filter` on a `position:sticky` element lets scrolled content bleed through into the notch/status-bar strip above it during scroll (screenshot: countdown-band digits ghosting above the nav). Solid background removes the whole bug class — nothing translucent left for content to show through. */ /* THE STRIP ABOVE THE NAV — the bug that got "fixed" twice before this. Symptom: on an iPhone you scroll and a live band of page content runs along the very top, above the nav, behind the clock and battery. It is not a ghost and not a repaint artifact — it is the real page, scrolling, in a gap. An earlier pass blamed `backdrop-filter` and made the nav opaque. That was the wrong cause, which is why it came back: the nav was already solid black in the screenshot that reported it. The actual mechanism: iOS Safari (bottom address bar) collapses its top UI as you scroll, and the page's visible area grows UPWARD into the status-bar strip — but the LAYOUT viewport, which `top:0` is measured against, does not grow with it. So the nav faithfully pins to a top edge that is no longer the top of what you can see, and the page shows through above it. `viewport-fit=cover` (in every page's viewport meta) makes the layout viewport cover the whole screen, so `top:0` is the real top again, and the safe-area padding below puts the nav's OWN background in the strip while keeping the logo and buttons clear of the clock. env() is 0 on hardware without an inset, so nothing changes anywhere else. */ nav{position:sticky;top:0;z-index:50;background:var(--ink); padding-top:env(safe-area-inset-top); border-bottom:1px solid var(--edge)} /* THE SHIELD — what actually closes the strip. `viewport-fit=cover` + `env(safe-area-inset-top)` above is correct and worth keeping, but it CANNOT fix this on its own, which is why the first attempt changed nothing: when Safari's top toolbar hides mid-scroll, the web view grows upward under the status bar, but the layout viewport and every env() value stay at their old, smaller box. So the page paints into the new strip while `top:0` and `env()` still describe a top edge that is now ~60px down. Anything measured in env() is aiming at the wrong box by definition. So the nav stops measuring and just carries a slab of its own background upward. It is part of the nav's own paint, so it moves with the nav no matter why the gap opened — toolbar collapse, momentum-scroll lag, or rubber-band overscroll. 200px is far more than any status bar needs; the excess only ever sits above the document, where the page is black anyway. */ nav::before{content:"";position:absolute;left:0;right:0;bottom:100%; height:200px;background:var(--ink);pointer-events:none} nav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.25rem;padding:.65rem 0} nav img{height:46px;width:auto} /* THE CREST IS MOUNTED SIGNAGE, NOT A FAVICON. Ronnie's logo is a real tattoo-flash badge — banners, skull, the whole figure. At 46px it was a smudge, and the first fix (pairing it with a typed wordmark) was solving the wrong problem: it worked AROUND the logo instead of with it. THE ROOM's own logic already had the answer — the hero hangs this crest on the wall like the signage it is, so the nav does the same, at a size where it actually reads. It OVERHANGS the nav's bottom edge and casts a shadow onto the page below, so it sits proud of the steel like a mounted badge rather than sitting flat inside a bar. The nav must never get overflow:hidden or the overhang is clipped — that is the one thing that breaks this. */ nav .brand{display:block;text-decoration:none;position:relative;z-index:2; /* the overhang comes out of the nav's own box so the bar does not grow */ margin-bottom:-18px} nav .brand img{height:74px;display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,.8)) drop-shadow(0 1px 0 rgba(255,255,255,.06))} /* it lifts off the wall on hover, the same language as every other clickable */ nav .brand{transition:translate .22s cubic-bezier(.2,.7,.3,1)} nav .brand:hover{translate:0 -2px} @media(min-width:900px){ nav .brand{margin-bottom:-26px} nav .brand img{height:92px} } nav .sp{flex:1} nav a{color:var(--paper);text-decoration:none;font-size:.9rem} nav .lnk{order:3;flex-basis:100%;display:flex;gap:1.15rem;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} nav .lnk::-webkit-scrollbar{display:none} nav .lnk a{color:var(--muted);font-family:var(--cond);letter-spacing:.1em;font-size:.82rem; text-transform:uppercase;white-space:nowrap;padding-bottom:.2rem; border-bottom:2px solid transparent} nav .lnk a:hover{color:var(--paper)} nav .lnk a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--blood)} @media(min-width:900px){ nav .lnk{order:0;flex-basis:auto;overflow:visible;gap:1.5rem} } /* ---------- mobile menu button ---------- 2026-07-27: the scrollable pill row was a deliberate no-JS call, but it cut words off mid-scroll ("THE GYM" → "THE") with nothing telling you it scrolls at all — flagged in a mobile audit as reading like broken layout, not a nav. Swapped for a real disclosure: hidden hamburger button, closed panel by default, JS toggles one class. Same "no library" bar as the LED reveal and the countdown — see the script at the bottom of the page. */ .menu-btn{display:none;order:2;width:38px;height:32px;position:relative; border:0;background:none;cursor:pointer;padding:0} /* THE BARS CONVERGE, THEN CROSS — and uncross before they separate. Doing both at once (one `transform:translateY() rotate()`) is what makes most hamburger-to-X toggles read as a cheap flip: the bars swing through each other diagonally instead of behaving like two objects. Split into the independent `translate` and `rotate` properties, they can be SEQUENCED, and the sequence reverses on the way back — which is the whole trick: opening → slide to the middle, THEN rotate into the X closing → rotate back to flat, THEN slide apart The delay lives on whichever state the property is animating TOWARD, which is how one pair of rules gets two different orders for free. */ .menu-btn span{position:absolute;left:0;right:0;height:2px;background:var(--paper); translate:0 0;rotate:0deg; transition:translate .19s cubic-bezier(.3,.7,.4,1) .17s, rotate .19s cubic-bezier(.3,.7,.4,1), opacity .16s ease .17s} .menu-btn span:nth-child(1){top:6px} .menu-btn span:nth-child(2){top:15px} .menu-btn span:nth-child(3){top:24px} .menu-btn[aria-expanded="true"] span{ transition:translate .19s cubic-bezier(.3,.7,.4,1), rotate .19s cubic-bezier(.3,.7,.4,1) .17s, opacity .16s ease} .menu-btn[aria-expanded="true"] span:nth-child(1){translate:0 9px;rotate:45deg} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){translate:0 -9px;rotate:-45deg} @media(prefers-reduced-motion:reduce){ .menu-btn span,.menu-btn[aria-expanded="true"] span{transition:none} } @media(max-width:899px){ .menu-btn{display:block} /* THE PANEL IS A SHUTTER, NOT A HEIGHT. It used to animate `max-height:0 → 70vh`. The menu's real content is about 320px, so opening hit full height around 45% of the way through and spent the rest of the transition growing an invisible cap — while CLOSING spent its first half doing nothing visible at all and then dropped. That asymmetry, plus a .2s opacity fade running underneath it, is exactly why it opened with a gesture and closed by vanishing. `max-height` was the wrong property twice over: it can only animate to a GUESS at the content height, and the guess has to be too big to be safe. Since the panel is absolutely positioned it owes the layout nothing, so nothing needs to animate its height — `clip-path:inset()` wipes it down over the real content, whatever that content turns out to be, and reverses honestly because both ends of the animation are true. It reads as the shutter it should have been: the panel comes DOWN out of the nav, and goes back UP into it. */ nav .lnk{position:absolute;top:100%;left:0;right:0;order:0;flex-basis:auto; flex-direction:column;gap:0; background:var(--ink);border-top:2px solid var(--edge); max-height:70vh;overflow-y:auto; clip-path:inset(0 0 100% 0); translate:0 -10px; opacity:0;visibility:hidden;pointer-events:none; transition:clip-path .32s cubic-bezier(.4,0,.6,1), translate .32s cubic-bezier(.4,0,.6,1), opacity .18s ease .06s, border-top-color .2s ease, visibility 0s linear .32s} nav .lnk.open{clip-path:inset(0 0 0 0);translate:0 0; opacity:1;visibility:visible;pointer-events:auto; border-top-color:var(--blood); transition:clip-path .38s cubic-bezier(.16,.84,.44,1), translate .38s cubic-bezier(.16,.84,.44,1), opacity .16s ease, border-top-color .18s ease, visibility 0s} nav .lnk a{padding:1rem min(1.25rem,4vw);border-bottom:1px solid var(--edge); white-space:normal; /* each link arrives just behind the shutter edge that reveals it */ opacity:0;translate:0 -8px; transition:opacity .16s ease, translate .16s ease, color .2s ease} nav .lnk.open a{opacity:1;translate:0 0; transition:opacity .26s ease, translate .3s cubic-bezier(.16,.84,.44,1), color .2s ease} /* THE STAGGER IS ONE-WAY ON PURPOSE. Opening, the links light in sequence — the same "fixture warming" beat the .led strips use, which is this site's one motion idea. Closing, every delay is zero (the rule above carries none), so the panel retracts as a single object instead of dribbling six links away one at a time. Warm up slow, shut off at once — that is how the lights in the room actually behave. */ nav .lnk.open a:nth-child(1){transition-delay:.05s} nav .lnk.open a:nth-child(2){transition-delay:.09s} nav .lnk.open a:nth-child(3){transition-delay:.13s} nav .lnk.open a:nth-child(4){transition-delay:.17s} nav .lnk.open a:nth-child(5){transition-delay:.21s} nav .lnk.open a:nth-child(6){transition-delay:.25s} /* NOTE on the panel's lit top border, set in the two rules above: it is the PANEL's border and not a glow on the nav, because the panel is opaque and sits flush at `top:100%` — a downward `box-shadow` on the nav is painted over completely, which is what the first version of this was. On the border it also earns its timing for free: the wipe clips from the BOTTOM, so the top edge is at full height from frame one. The red line appears first and the menu unrolls beneath it, which is the right causal order for a fixture and its light. No halo — `clip-path` crops `box-shadow` (the lesson .btn and .hive both learned), so a glow here would be sliced off at the panel's own edge. */ @media(prefers-reduced-motion:reduce){ nav .lnk,nav .lnk.open,nav .lnk a,nav .lnk.open a{transition:none} nav .lnk.open a{transition-delay:0s} } } /* ---------- BUTTONS — made of the room ---------- A rectangle that lights up is still a rectangle. These earn their shapes. .btn CUT-CORNER STEEL PLATE. Fabricated metal has chamfered corners; a sharp 90 degrees is the tell that something was stamped rather than cut. Clipping the corners makes it read as a PART bolted to the wall instead of a UI element — same material logic as the surface behind it. NOTE: clip-path crops box-shadow, so the glow is done with filter:drop-shadow(), which follows the clip. .ticket Used ONCE per page, only for "your first class is free", because that is literally an admission ticket. Notches and a perforated stub are punched with a mask. It is also the only warm, light object on a black page — the eye goes straight to it, which is the whole point of the one CTA that matters. ---------------------------------------------------------------------------- */ .btn{position:relative;display:inline-block;border:0;cursor:pointer; font-family:var(--cond);font-weight:600;text-transform:uppercase; letter-spacing:.12em;font-size:.92rem;line-height:1;padding:1.05rem 1.7rem; color:#fff;text-decoration:none;isolation:isolate; --chamfer:14px; /* the one cut size — same as every plate */ clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); background:linear-gradient(180deg,#e0182f 0%,var(--blood) 48%,#9d0c22 100%); filter:drop-shadow(0 5px 16px rgba(var(--led-glow),.55)); transition:filter .22s ease, transform .18s ease, background .22s ease} .btn::after{ /* the cut edges catch light */ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(135deg,rgba(255,255,255,.34) 0 var(--chamfer), transparent calc(var(--chamfer) + 1px)), linear-gradient(315deg,rgba(0,0,0,.45) 0 var(--chamfer), transparent calc(var(--chamfer) + 1px))} /* The red button can't wear a RED lit edge — red on red is invisible, which is why its hover read as nothing happening. Its filament is white-hot instead: the same dim → lit gesture as the cards, in the only colour that shows here. */ .btn::before{ content:"";position:absolute;left:var(--chamfer);right:0;top:0;height:2px;z-index:2; background:#fff;opacity:.35; transition:opacity .3s ease, height .2s ease, box-shadow .3s ease} .btn:hover::before,.btn:focus-visible::before,.btn.tap-lit::before{ height:3px;opacity:1; box-shadow:0 0 10px 1px rgba(255,255,255,.9), 0 0 26px 4px rgba(255,215,215,.55)} /* Lifts like a .card — but a card only ever sits on black, and these buttons also sit on PHOTOS. A red glow and a 3px nudge vanish over a bright photo, so the hover also grows the plate and drops a hard BLACK shadow, which reads on any background. The face runs hotter too: a real colour change, not a brightness filter, because a filter on saturated red barely moves. */ .btn:hover,.btn:focus-visible,.btn.tap-lit{transform:translateY(-4px) scale(1.035); background:linear-gradient(180deg,#ff3448 0%,#e0182f 48%,#b21027 100%); filter:drop-shadow(0 14px 22px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(var(--led-glow),.9))} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn.ghost{color:var(--gold); background:linear-gradient(180deg,#232019 0%,#16130f 52%,#0c0a08 100%); filter:drop-shadow(0 3px 10px rgba(0,0,0,.6)); box-shadow:none; outline:1px solid rgba(201,162,39,.40);outline-offset:-1px} .btn.ghost::after{ background: linear-gradient(135deg,rgba(255,255,255,.16) 0 var(--chamfer), transparent calc(var(--chamfer) + 1px)), linear-gradient(315deg,rgba(0,0,0,.55) 0 var(--chamfer), transparent calc(var(--chamfer) + 1px))} /* the dark button is a dark plate, so it gets the plate's lit top edge — in gold, because that is already this button's accent. */ .btn.ghost::before{ content:"";position:absolute;left:var(--chamfer);right:0;top:0;height:2px;z-index:2; background:var(--gold);opacity:.30; transition:opacity .3s ease, box-shadow .3s ease} .btn.ghost:hover::before,.btn.ghost:focus-visible::before,.btn.ghost.tap-lit::before{ opacity:1;box-shadow:0 0 10px 1px rgba(201,162,39,.8), 0 0 26px 3px rgba(201,162,39,.4)} .btn.ghost:hover,.btn.ghost.tap-lit{color:#f2dd93; outline-color:rgba(201,162,39,.95); filter:drop-shadow(0 0 18px rgba(201,162,39,.45))} /* --- THE METAL BUTTONS: bronze / silver / gold --------------------------- Before this, the three tier buttons actively fought their own labels — the Bronze plate was gold-tinted, the Gold plate was gold-tinted, and SILVER was RED. Colour carried no information, so a reader had to read all three buttons plus map the hex fixture back onto the cards to work out what cost what. Now each button IS its metal and carries its own price, so the row can be scanned rather than read, and the hexagons become confirmation instead of a lookup table. These are real metal faces, not dark plates with a metal outline — a tinted edge on black is too quiet to be found at a glance, which was the whole complaint. They keep the chamfer, the lit top filament and the lift-on-hover from .btn so they still read as this site's buttons. Text colour flips per metal: silver and gold faces are light, so their labels are near-black; bronze is dark enough to carry white. Bronze is deliberately deeper than a "true" #cd7f32 — that shade puts white text at ~3:1, under the contrast floor. --focus is white on all three because the usual gold focus ring is invisible against gold. */ /* WHY THESE LOOK LIKE METAL AND NOT LIKE COLOURED BUTTONS: a smooth top-to- bottom ramp reads as plastic no matter how well the colour is picked — that was the "bland" version. Three things do the actual work here, all cheap: 1. A SPECULAR HORIZON. Real metal reflects the room in two halves — bright sky above, dark floor below — meeting at a near-hard edge. Each metal ramp has a 3% step at ~44–47% instead of a smooth blend. This single detail is most of the effect. 2. BRUSH LINES. A repeating-linear-gradient a few degrees off-axis, at very low alpha. Anisotropic scatter is what separates machined metal from painted metal. Kept under 6% or it turns into visible corduroy. 3. A RAKING SHEEN that travels on hover. Parked off the right edge at rest and swept across the face on hover, so the plate reads as catching the gym's light rather than changing colour. This is the same gesture as the LED filament on the cards, in reflection instead of glow. The inset hairlines are a bevel: light on the top edge, shade on the bottom, which is what gives the plate thickness. They're clipped by the chamfer, so they stop at the cut corners the way a real bevel would. All three keep white text on bronze / near-black on silver+gold at 4.5:1 or better, INCLUDING against the lightest stop of each ramp — that constraint is why bronze starts at #a06a30 rather than a truer, prettier #cd7f32. min-width, not content width: left to size themselves the three plates come out ragged ("BRONZE $45 / MONTH" is visibly wider than "GOLD $75 / MONTH"), which makes them read as three unrelated buttons instead of one set of three choices. Equal plates let the eye compare them at a glance. max-width keeps that from overflowing the card on narrow phones. */ /* .btn.btn--metal, not .btn--metal: the base .btn:hover rule sets the `background` SHORTHAND (red gradient), which at 0-2-0 would out-specify a plain .btn--metal background-image and repaint these plates red on hover. Doubling the class ties the specificity and lets source order decide — this rule wins because it comes after. Same reason the hover rule below is .btn.btn--metal:hover. */ .btn.btn--metal{display:inline-flex;flex-direction:column;align-items:center; justify-content:center;gap:.32rem;padding:.95rem 1.5rem;text-align:center; min-width:11.5rem;max-width:100%;outline:none; background-image: /* 3 — the raking sheen, parked off-frame right */ linear-gradient(100deg,transparent 34%,rgba(255,255,255,.55) 47%, rgba(255,255,255,.14) 54%,transparent 66%), /* 2 — brush lines */ repeating-linear-gradient(96deg,rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.035) 1px 3px), /* 1 — the metal itself, set per-variant */ var(--metal); background-size:260% 100%, auto, auto; background-position:190% 0, 0 0, 0 0; background-repeat:no-repeat, repeat, no-repeat; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); /* 1.5s, and a nearly-symmetric curve rather than an ease-out. At .7s with ease-out the sheen dumped most of its travel in the first third and read as a flash going off, not as light raking across a surface. Real specular movement is roughly constant — the highlight crosses at the speed you move past it — so this stays close to linear with only soft ends. Slower than it sounds on paper: the sheen crosses 2.6x the plate's width. */ transition:background-position 1.5s cubic-bezier(.4,.05,.45,.98), filter .22s ease, transform .18s ease} .btn.btn--metal:hover,.btn.btn--metal:focus-visible,.btn.btn--metal.tap-lit{ background-position:-90% 0, 0 0, 0 0} .btn--metal .b-name{font-size:.98rem;letter-spacing:.18em;line-height:1; position:relative;z-index:1} .btn--metal .b-price{font-size:.75rem;letter-spacing:.08em;line-height:1; opacity:.85;font-weight:500;position:relative;z-index:1} /* the lit filament, in white so it reads on all three faces */ .btn--metal::before{background:#fff;opacity:.45} .btn--metal:hover::before,.btn--metal:focus-visible::before, .btn--metal.tap-lit::before{height:3px;opacity:1; box-shadow:0 0 10px 1px rgba(255,255,255,.9),0 0 26px 4px rgba(255,255,255,.4)} .btn--metal:focus-visible{outline:2px solid #fff;outline-offset:3px} .btn--bronze{color:#fff; --metal:linear-gradient(178deg,#a06a30 0%,#8a571f 44%,#79491a 47%,#5e3512 100%); text-shadow:0 1px 2px rgba(0,0,0,.45); filter:drop-shadow(0 4px 14px rgba(156,93,32,.45))} .btn--bronze:hover,.btn--bronze:focus-visible,.btn--bronze.tap-lit{ filter:drop-shadow(0 14px 22px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(192,122,51,.65))} .btn--silver{color:#14120f; --metal:linear-gradient(178deg,#f2f5f8 0%,#d3dae1 44%,#b6bec6 47%,#8e969e 100%); filter:drop-shadow(0 4px 14px rgba(195,202,209,.35))} .btn--silver:hover,.btn--silver:focus-visible,.btn--silver.tap-lit{ filter:drop-shadow(0 14px 22px rgba(0,0,0,.85)) drop-shadow(0 0 28px rgba(214,220,226,.7))} .btn--gold{color:#14120f; --metal:linear-gradient(178deg,#f0d885 0%,#dcb943 44%,var(--gold) 47%,#9c7a17 100%); filter:drop-shadow(0 4px 14px rgba(201,162,39,.45))} .btn--gold:hover,.btn--gold:focus-visible,.btn--gold.tap-lit{ filter:drop-shadow(0 14px 22px rgba(0,0,0,.85)) drop-shadow(0 0 28px rgba(201,162,39,.75))} /* Reduced-motion users still get the plate and the hover lift; only the travelling sheen is removed, since that's the part that actually moves. */ @media (prefers-reduced-motion:reduce){ .btn.btn--metal{transition:filter .22s ease} .btn.btn--metal:hover,.btn.btn--metal:focus-visible,.btn.btn--metal.tap-lit{ background-position:190% 0, 0 0, 0 0} } /* --- the ticket --- */ .ticket{--n:10px; position:relative;display:inline-flex;align-items:stretch; text-decoration:none;cursor:pointer;isolation:isolate; /* The paper is painted on the two HALVES, not on .ticket itself. That is what lets the tear below open a real hole you can see the page through — if the background lived here, a gap between the halves would just show more cream and read as nothing at all. */ filter:drop-shadow(0 8px 22px rgba(0,0,0,.65)); -webkit-mask: radial-gradient(circle at left center, transparent var(--n), #000 calc(var(--n) + .5px)), radial-gradient(circle at right center, transparent var(--n), #000 calc(var(--n) + .5px)); -webkit-mask-composite:source-in; mask: radial-gradient(circle at left center, transparent var(--n), #000 calc(var(--n) + .5px)), radial-gradient(circle at right center, transparent var(--n), #000 calc(var(--n) + .5px)); mask-composite:intersect; transition:filter .22s ease, transform .18s ease} /* The ticket is PAPER, so it must not light up like an LED — a red halo behind a cream card is nearly invisible anyway, which is why its hover read as dead. Paper does two things instead: it catches more of the room's light (it visibly brightens) and it lifts off the wall, throwing a harder, longer shadow. */ .ticket:hover,.ticket.torn{transform:translateY(-4px) rotate(-.5deg); filter:brightness(1.10) contrast(1.03) drop-shadow(0 16px 26px rgba(0,0,0,.8)) drop-shadow(0 2px 0 rgba(var(--led-glow),.35))} .ticket:active{transform:translateY(0) rotate(0deg)} .ticket:focus-visible{outline:2px solid var(--gold);outline-offset:4px} /* ---- THE TEAR ------------------------------------------------------------- Hovering starts to rip the stub off along the perforation. FOUNDATION — the two halves carry the paper, not .ticket. With the background on the parent, a gap in the middle just shows more cream and reads as nothing; split it and the gap is a real hole you see the page through. Both clip-paths list the SAME NUMBER OF POINTS at rest and torn — a polygon only interpolates into another polygon with a matching vertex count — so each straight edge is written as fourteen collinear points waiting to become a tear. What makes it read as torn rather than cut, in order of how much it matters: 1. IT IS A WEDGE, NOT A SLOT. A real tear starts at one edge and travels. This one opens ~11px at the top and closes to nothing at the bottom, so the stub is still attached down there. A gap of even width everywhere is the single biggest tell that you are looking at a graphic. This also means the tear costs NO layout change — the halves never resize, the gap is carved out of their facing edges, so nothing on the page reflows. 2. THE EDGE IS FIBROUS, NOT ZIGZAG. Fourteen irregular depths rather than a handful of even 45° notches. Paper tears along fibres; it does not pink. 3. THE TWO SIDES DO NOT INTERLOCK. Each has its own rhythm of depths. Matched zigzags read as pinking shears — torn paper never lines back up. 4. THE TORN EDGE SHOWS THE PAPER'S CORE. A hairline lighter rim along each torn edge, because the inside of paper is whiter than its printed face. Done with drop-shadow, which follows a clip-path where a border cannot. 5. IT RESISTS, THEN GIVES. Paper does not tear linearly. The easing sits almost still for the first fifth, then rips. The stub never MOVES: the ticket's notch mask is anchored to its own box, so anything sliding sideways gets clipped. The wedge does the hinging instead. */ /* TICKET STOCK — 2026-07-27, revised same day. First pass used a CSS repeating-linear-gradient hatch to fake a print texture — called out (correctly) as a shortcut: every other material on this site is a real scanned/photographed surface (wall-steel.jpg, canvas-tile.jpg), so a drawn hatch was the one thing on the page not actually made of anything. Replaced with a real photograph: ambientCG Paper001 (CC0), the Displacement channel rather than Color — the fibrous grain map, not the near-flat diffuse — cropped to drop a scan-edge defect on the source's right border, contrast/brightness lifted slightly so the grain still reads at the small size a ticket renders at. `background-blend-mode: multiply` prints the grayscale grain onto the cream gradient the same way the wall's `screen` blend prints weathering onto steel — one real surface moving light through another, nothing drawn. */ .ticket .t-main{padding:1.05rem 1.5rem 1.05rem 1.7rem; font-family:var(--cond);font-weight:700;text-transform:uppercase; letter-spacing:.10em;font-size:1rem;line-height:1;color:#8f0b20; display:flex;align-items:center; background-image:url("assets/paper-grain.jpg"), linear-gradient(180deg,#f6f1e4 0%,#e6dcc6 100%); background-size:260px auto, cover; background-blend-mode:multiply; clip-path:polygon(0 0, 100% 0, 100% 7%, 100% 15%, 100% 23%, 100% 31%, 100% 39%, 100% 47%, 100% 55%, 100% 63%, 100% 71%, 100% 79%, 100% 87%, 100% 94%, 100% 100%, 0 100%); transition:clip-path .55s cubic-bezier(.6,.02,.2,1), color .3s ease, filter .55s ease} .ticket .t-stub{padding:1.05rem 1.15rem;display:flex;align-items:center; font-family:var(--cond);font-weight:600;text-transform:uppercase; letter-spacing:.16em;font-size:.7rem;line-height:1;color:#a8452f; background-image:url("assets/paper-grain.jpg"), linear-gradient(180deg,#f6f1e4 0%,#e6dcc6 100%); background-position:right 0 top 0, 0 0; background-size:260px auto, cover; background-blend-mode:multiply; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 94%, 0 87%, 0 79%, 0 71%, 0 63%, 0 55%, 0 47%, 0 39%, 0 31%, 0 23%, 0 15%, 0 7%); transition:clip-path .55s cubic-bezier(.6,.02,.2,1), color .3s ease, filter .55s ease} /* The perforation itself stays 0 wide — the gap is carved, not spaced. Was a native `border-left:dashed`, which most browsers render as near-solid at 2px (the dash/gap ratio isn't controllable), so it read as a faint stripe rather than the tear-along-here line real stubs print. Rebuilt as a crisp repeating-linear-gradient so the dash length and gap are exact, and dark enough on the cream to actually read as "tear here" before you even hover. */ .ticket .t-perf{width:2px;margin:.55rem 0;flex:none; background-image:repeating-linear-gradient(to bottom, rgba(143,11,32,.65) 0 5px, transparent 5px 10px); transition:opacity .45s ease} .ticket:hover .t-perf,.ticket.torn .t-perf{opacity:0} .ticket:hover .t-stub,.ticket.torn .t-stub{color:#8f0b20} /* torn edge of the big half — deepest at the top, gone by the bottom */ .ticket:hover .t-main,.ticket.torn .t-main{ filter:drop-shadow(1px 0 0 rgba(255,253,246,.55)); clip-path:polygon(0 0, calc(100% - 6px) 0, calc(100% - 4px) 7%, calc(100% - 7px) 15%, calc(100% - 5px) 23%, calc(100% - 6px) 31%, calc(100% - 3px) 39%, calc(100% - 4px) 47%, calc(100% - 2px) 55%, calc(100% - 3px) 63%, calc(100% - 1px) 71%, calc(100% - 1px) 79%, 100% 87%, 100% 94%, 100% 100%, 0 100%)} /* and the stub's edge, tearing on its own rhythm so the two never interlock */ .ticket:hover .t-stub,.ticket.torn .t-stub{ filter:drop-shadow(-1px 0 0 rgba(255,253,246,.55)); clip-path:polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 94%, 0 87%, 1px 79%, 2px 71%, 2px 63%, 4px 55%, 2px 47%, 5px 39%, 3px 31%, 6px 23%, 4px 15%, 7px 7%)} @media(prefers-reduced-motion:reduce){ .ticket .t-main,.ticket .t-stub,.ticket .t-perf{transition:none} } /* PHONES — no hover to start the tear, so `.torn` (set by touchstart, see the ticket-tap script) drives the identical animation instead of a dumbed-down substitute. The stub and perforation stay on-screen; the same rip that plays on desktop just now plays on finger-down rather than mouse-over. */ @media(max-width:520px){ .ticket .t-main{padding:1rem 1.4rem;font-size:.94rem} } /* ---------- hero (home only) ---------- */ .hero{position:relative;min-height:88vh;display:grid;align-items:end} .hero .ph{position:absolute;inset:0;min-height:0;border:0;place-items:start end; padding:5.5rem 1.4rem 0} .hero .ph span{max-width:22ch;text-align:right;opacity:.75} .hero{background:var(--ink-0)} .hero .scrim{position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(5,4,4,.30) 0%,rgba(5,4,4,.10) 30%,rgba(5,4,4,.92) 100%)} /* the top padding is CLEARANCE FOR THE OVERHANGING CREST, not decoration. The hero is align-items:end, so this does nothing at tall viewports — it only bites on short/landscape ones, where the bottom-aligned content would otherwise ride up under the badge and get its kick line covered. The five inner pages need no equivalent: .phead already opens with 3.25rem minimum. */ .hero .wrap{position:relative;padding:2.5rem 0 5rem} .hero h1{font-size:clamp(3.2rem,12vw,9rem)} .hero h1 .r{color:var(--blood)} .kick{font-family:var(--cond);letter-spacing:.28em;font-size:.8rem;color:var(--gold); text-transform:uppercase;margin-bottom:1.1rem} .hero p.lede{font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;margin:1.4rem 0 2rem; color:var(--t-1);text-wrap:pretty} .cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center} .cta-note{font-size:.85rem;color:var(--muted)} /* ---------- page header (the five inner pages) ---------- These were the ONE place on the site where THE ROOM stopped: no wall, no light, type floating on pure black. index.html was the only page carrying `wall-surface` at all. They are on the same wall as everything else now. NOT a copy of the hero, though — if every page opened at hero intensity the home page would stop being special, and it is carrying the first impression. This is the same wall seen DIMMER and CLOSER: · --wall-op halved. Present, not announced. · --wall-rib LARGER, not smaller. Standing nearer a wall makes its ribs look WIDER — and it dodges the documented trap in THE ROOM, where a tighter pitch stops reading as steel and starts reading as scanlines. · NO wall logo. That is the home page's signature. · The 1px bottom border is gone. Every other section boundary on this site is a `.led`, and these headers already have one directly beneath them — so the border was a dead rule sitting on top of a live one. 2026-07-27: prototyped on coach.html alone, then approved and rolled to all five inner-page headers (classes, greater-purpose, gym, come-in, coach). 2026-07-27 (mobile parity session): a stray comment-close used to sit at the end of the line above this paragraph. It ended the comment EARLY, dumping these two sentences into the stylesheet as raw CSS. The parser then read them as the start of a selector, ran on until the next open brace, and DISCARDED THE WHOLE `.phead` RULE — so all five inner-page headers shipped with padding:0 against a clamp(3.25rem,10vw,6rem) that never applied. Caught by a brace/comment balance check before commit, not by eye: the pages look plausible without it, just cramped. This is the exact trap already written up in ../DESIGN_CATALOGUE.md section 8 — it had quietly claimed a rule in the very file that documents it. DO NOT write a literal comment-close sequence inside a CSS comment when describing this bug. Doing so reintroduces it verbatim, which is what happened on the first attempt at writing this note. */ .phead{padding:clamp(3.25rem,10vw,6rem) 0 clamp(2.5rem,7vw,4rem); border-bottom:1px solid var(--edge)} .phead.wall-surface{--wall-op:.17;--wall-rib:1180px;border-bottom:0} .phead h1{font-size:clamp(2.6rem,9.5vw,6rem)} .phead h1 .r{color:var(--blood)} .phead p.lede{font-size:clamp(1.02rem,2vw,1.22rem);max-width:54ch;margin-top:1.3rem; color:var(--t-1);text-wrap:pretty} /* ---------- motto ---------- */ .motto{padding:clamp(5rem,12vw,9rem) 0;text-align:center;border-block:1px solid var(--edge)} .motto p{font-family:var(--hdr);font-size:clamp(1.6rem,5vw,3.4rem);line-height:1.08; max-width:20ch;margin-inline:auto;text-transform:uppercase} .motto p em{color:var(--blood);font-style:normal} .motto .by{margin-top:1.8rem;font-size:.82rem;letter-spacing:.18em;color:var(--muted); font-family:var(--cond);text-transform:uppercase} /* ---------- generic section ---------- */ section{padding:clamp(4rem,9vw,7rem) 0} .eyebrow{font-family:var(--cond);letter-spacing:.24em;font-size:.74rem;color:var(--gold); text-transform:uppercase;margin-bottom:1rem} h2{font-size:clamp(2.1rem,6vw,4rem);margin-bottom:1.4rem} h2 .r{color:var(--blood)} .two{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center} @media(min-width:860px){.two{grid-template-columns:1fr 1fr}} /* photo-first on desktop, prose-first on mobile — the photo shouldn't be the first thing between a reader and the copy on a 375px screen */ @media(max-width:859px){.two.flip .ph{order:2}} .prose p{margin-bottom:1.1rem;color:var(--t-2);max-width:60ch; text-wrap:pretty} /* no single-word last lines */ .prose p.big{font-size:1.18rem;color:var(--t-0);max-width:52ch} blockquote{border-left:3px solid var(--blood);padding-left:1.3rem;margin:2rem 0; font-size:1.15rem;font-style:italic;color:var(--t-0);text-wrap:pretty} blockquote cite{display:block;margin-top:.7rem;font-style:normal;font-size:.8rem; letter-spacing:.14em;color:var(--t-3);font-family:var(--cond);text-transform:uppercase} /* cross-page link — the seam that makes six pages read as one site */ .more{display:inline-block;font-family:var(--cond);text-transform:uppercase; letter-spacing:.14em;font-size:.82rem;color:var(--gold);text-decoration:none; border-bottom:1px solid rgba(201,162,39,.45);padding-bottom:.25rem;margin-top:.6rem; transition:color .15s,border-color .15s} .more:hover{color:var(--paper);border-color:var(--paper)} /* ---------- proof strip ---------- */ .proof{background:var(--ink-2);border-block:1px solid var(--edge);padding:2.2rem 0} /* The same steel as the hero, read as a wall further back: dimmer and a tighter rib pitch. Don't push --wall-rib much under 600px — see the note on the knob at :root, tighter than that and it shimmers as scanlines on a phone. */ .proof.wall-surface{--wall-op:.14;--wall-rib:600px} .proof .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center; justify-content:center;text-align:center} .proof div{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em; font-size:.82rem;color:var(--muted)} .proof b{color:var(--gold);display:block;font-size:1.05rem;letter-spacing:.06em} /* ---------- photo wall ---------- */ .wall{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)} @media(min-width:820px){.wall{grid-template-columns:repeat(4,1fr)} .wall .tall{grid-row:span 2}.wall .wide{grid-column:span 2}} .wall .ph{min-height:210px} .wall .tall .ph,.wall .tall{min-height:100%} /* ========================================================================== THE PLATE — the shared box treatment ========================================================================== Five components used to share one recipe: `background:var(--ink-2); border:1px solid var(--edge); padding`. That flat bordered rectangle is what Brandon objected to, and because they all shared the recipe they all share the fix — .card, .fact, .tier, .pillar, .voice are styled together here and keep only their own padding and typography below. The look is NOT new invention. `.btn` is already a cut-corner steel plate, so giving the cards the same chamfer makes a card and a button read as the same material — the site gains a vocabulary instead of a second style. Hover lights the top edge like an LED strip: the same light logic that runs every section boundary, now acknowledging the pointer. LIFT is deliberately NOT part of this — a .fact is not clickable, and a static box that rises when you brush past it is a gimmick. Only genuinely interactive plates lift, via `.plate-act` below. `clip-path` crops `box-shadow` — the lesson .btn and .hive both learned — so every glow here is `filter:drop-shadow()`. ========================================================================== */ .card,.fact,.tier,.pillar,.voice,.who-band{ --chamfer:14px;position:relative;isolation:isolate; clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); background:linear-gradient(165deg,#1a1613 0%,#131010 40%,#0e0c0b 100%); transition:filter .25s ease, transform .18s ease} /* the LED strip along the top edge — dim at rest, lit on hover/focus/open. It starts at --chamfer so it follows the cut corner instead of floating past it. */ .card::before,.fact::before,.tier::before,.pillar::before,.voice::before, .who-band::before{ content:"";position:absolute;left:var(--chamfer);right:0;top:0;height:2px;z-index:2; background:var(--blood);opacity:.22; transition:opacity .3s ease, box-shadow .3s ease} .card:hover::before,.fact:hover::before,.tier:hover::before, .pillar:hover::before,.voice:hover::before,.who-band:hover::before, .card.tap-lit::before,.fact.tap-lit::before,.tier.tap-lit::before, .pillar.tap-lit::before,.voice.tap-lit::before,.who-band.tap-lit::before, .card:has([aria-expanded="true"])::before{ opacity:1;box-shadow:0 0 10px 1px rgba(200,32,42,.9), 0 0 26px 3px rgba(200,32,42,.45)} /* the cut corners catching light — same treatment as .btn::after */ .card::after,.fact::after,.tier::after,.pillar::after,.voice::after, .who-band::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(135deg,rgba(255,255,255,.13) 0 14px,transparent 15px), linear-gradient(315deg,rgba(0,0,0,.6) 0 14px,transparent 15px)} /* only plates you can actually click lift under the pointer */ .card:hover,.card.tap-lit{transform:translateY(-3px);filter:drop-shadow(0 10px 26px rgba(0,0,0,.7))} @media(prefers-reduced-motion:reduce){ .card,.fact,.tier,.pillar,.voice,.who-band,.btn,.ticket,.lb-btn{transition:none} .card:hover,.btn:hover,.lb-btn:hover,.lb-btn:focus-visible{transform:none} .ticket:hover{transform:none} .card.tap-lit,.btn.tap-lit,.btn.ghost.tap-lit{transform:none} } /* ---------- classes ---------- */ .cards{display:grid;gap:1.2rem} @media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}} /* A CARD IS A DISCLOSURE. Brandon: "I don't like seeing all this text on the page" — headline visible, body revealed on click. The whole header is a real