— a
would have opened a full line box at the headline's own 190px strut. It restates its own paint box instead of inheriting the script one, because those paddings are in em of the SCRIPT's size, and this runs at a fifth of it. */ /* TWO elements, and both are load-bearing. .hl__on-line is a plain block that carries no text of its own. It exists to open a line and to zero the STRUT: a line box is at least as tall as its block container's font-size x line-height, and inside a headline that is .46 x 190px = 87px of empty height under a 34px tagline. line-height:0 on the container removes it, so the line box is exactly the inline-block inside it. Its margin is in the PARENT's em, which is the point — the gap then scales with the lockup, from a 190px hero down to a 61px card thumbnail, instead of with the tagline's own clamped size. .hl__on stays an ATOMIC INLINE. A .fx headline paints its fill as a background clipped to text, and that clip reaches every glyph in the subtree except inside an atomic inline. That is the whole reason .fx .ink and .fx .scr are inline-block. Set to display:block this briefly stopped being atomic and the parent painted "On Brady" in the headline's orange, unrotated, while the span painted it again in its own colour at -2deg on top — two copies, slightly offset. Anything carrying its own .ink must stay an atomic inline. */ /* NO LONGER HERO-SCOPED. "On Brady" used to run at .22em BELOW the lockup everywhere, and the heroes alone pulled it up a hair. The owners asked for it larger and slightly overlapping the word above — and once the hero moved, a section lockup with the tagline floating 40px underneath read as a different mark, not the same one at a smaller size. One ratio now serves all four instances (both heroes at .d1, the homepage "next up" lockup and the tickets-page lockup at .d2). Both terms are in the PARENT's em, which is the whole point: the overlap is a fixed FRACTION of the cap band, so it holds from a 190px hero down to a 90px phone headline without a breakpoint. Measured at 19.6% of cap at 1280, 20.7% at 375, 22.1% at 1600. -.34em is MEASURED, and the thing to measure is the INK, not the boxes. Both runs carry large paint-box padding (the script's is .23em/.48em of its own size), so their getBoundingClientRects overlap by 50-odd pixels while the letterforms still sit APART. The number that matters is canvas actualBoundingBox against the cap band of the line above. The owners asked for the script to JUST overlap the lockup — touching the letterforms, not riding up into them. The whole usable window is about a tenth of an em, so this was chosen by rendering with the neon flicker frozen and reading each one: -.27 clear of the letters; reads as "sitting below" -.29 the O and B ascenders just break the bottom edge <-- this -.34 rides ~35% up the cap band; legible but noticeably crossed -.37 the "O" is already being swallowed by the R of BAR -.42 unreadable; the script disappears into the letterforms Do not nudge this without re-rendering — and freeze `.fx--neon` when you do, or the capture lands on a grey dead frame and you will misjudge it. Legibility over the letters comes from .hl__on's own text-shadow (it is painted text, not a background-clip fill — see below), which is why the script survives crossing a lit violet cap at all. The clamp floor (30px) matters on phones: below it the script would drop under the .d1 ramp's own minimum and the tuck would invert. */ .fx .hl__on-line{display:block; line-height:0; margin-top:-.29em} /* PLAIN PAINTED TEXT, not an .ink. Every other run in a headline paints itself as a background clipped to its own glyphs; this one paints its colour directly and takes a text-shadow instead of a drop-shadow halo. That is not a simplification for its own sake — it is the fix for a ghosting bug. This is the only run on the site that is both background-clip:text AND transformed (the -2deg tilt), and the two do not survive a parent transform together: hovering an event card, which animates translateY on .event__title, repainted the clipped fill from the element's untransformed origin and left a second "On Brady" lying across "HAUNTED". The stylesheet already carried the warning — "keep the headline out of transforms" — and this run was breaking it. Dropping the clip costs nothing here. The paint box padding existed to stop the fill slicing the script's overhangs, and painted text has no fill box to slice; the noise texture is invisible below ~40px; and card titles already switch their glow off at this size. display:inline-block is still load-bearing. It keeps the run atomic so the PARENT's clip cannot reach in and paint these glyphs a second time in the headline's own colour — which is a different double-render, and the one that shipped when this was display:block. */ .fx .hl__on{ display:inline-block; /* PAINT ORDER, and it is not the DOM order that decides it. .hl__on-line is the LAST child of the headline, so the obvious assumption is that "On Brady" paints on top. It does not. Every .ink run carries `filter:var(--neon)`, and a filter makes a NON-POSITIONED element into a stacking context — which CSS 2.1 Appendix E paints in step 8, "as if it created a new stacking context with z-index:0". A plain static inline-block like this one paints back in step 6, with the ordinary inline content. Step 6 is before step 8, so the lit letterforms were painting straight over the script no matter where it sat in the markup, and the overlap read as "tucked behind". position:relative + z-index:1 moves it to step 9 (positive z-index), above the .ink runs. It stays an inline-block, so it is still an ATOMIC inline and the parent's background-clip:text cannot reach in and paint these glyphs a second time — which is the other bug this rule has to keep avoiding, see below. */ position:relative; z-index:1; /* global now — see the note on .hl__on-line above */ background-image:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--orange); -webkit-text-fill-color:var(--orange); font-size:clamp(30px, .40em, 74px); line-height:1; margin:0; padding:.16em .1em .3em .1em; text-transform:none; /* NO TRANSFORM. It carried a -2deg tilt and that is what put a second copy of "On Brady" across "HAUNTED" on the heroes — and only on the heroes, which is the tell: .fx--neon animates `filter` on the parent continuously, and a transformed child inside an animating-filter subtree gets rasterised from the wrong origin. The section lockups, which carry no .fx--neon, never showed it. Dropping the clip (below) was not enough on its own, because the hazard is the transform, not the clip. The stylesheet's own rule says it: keep the headline out of transforms. A 2deg tilt is not worth a ghost. */ /* the halo, same argument as .hero--shot .fx .ink — a tight near-opaque core that IS the background at the stroke edge, then two softer radii. Flat px, because this run is clamped to 15-34px and an em radius at the bottom of that range is sub-pixel. */ text-shadow: 0 0 3px rgba(6,6,5,1), 0 0 7px rgba(6,6,5,.95), 0 0 16px rgba(6,6,5,.8); } /* THE DARK BACKING, on the card titles now as well. These used to carry `filter:none` — no neon glow, because at 30-92px a bloom is just a smudge, and no dark either, because the scrim under them was at 86% and nothing needed it. The scrim is at 15% now, so the dark moves here: the same device .hero--shot uses, for the same reason, and it is the reason a 15% wash is survivable at all. No colour glow, only dark — the smudge argument still holds at this size. Flat px radii, not em: these titles clamp from 30px to 92px and an em radius at the bottom of that range is sub-pixel. Sub-opaque throughout, so the falloff has no edge in it and reads as a shadow behind the letters rather than a keyline drawn round them. Measured with BSSAudit() on this wash: the worst painted edge on the homepage row is "Christmas" at 4.75:1, against the site's 3.0 floor — comfortably better than the 3.14 it managed on its own bespoke 85% plate, because a halo tracks the glyph and a plate cannot. */ .event__title .ink{ /* FIVE layers here, where the hero gets two, and the difference is AREA. Filter cost is superlinear in the area rasterised, and the hero lockup is 190px against these titles' 30-92px — so layers that cost the hero 450ms of first paint cost these almost nothing, and they can have as many as they need. They need five. Laddered at 25%: three layers left "Hop" at 2.41 and "Christmas" at 2.94, four left "Hop" at 2.81, five clears the whole row with nothing under 3.4. Cut to one and it collapses to 1.09-2.07, because a single sub-opaque layer cannot become a ground however wide it is — it is the stacking that approaches opacity. Unlike the hero these carry no colour glow, so this is the only filter on them and there is no bloom for the dark to push outward. */ filter: drop-shadow(0 0 2px rgba(6,6,5,.50)) drop-shadow(0 0 4px rgba(6,6,5,.50)) drop-shadow(0 0 8px rgba(6,6,5,.48)) drop-shadow(0 0 14px rgba(6,6,5,.44)) drop-shadow(0 0 24px rgba(6,6,5,.35)); } /* ── THE DARK HALO — legibility that lives on the type ─────────────── The heroes carry no scrim at all now, so a neon word can land on a blown-out highlight with nothing between them. Rather than dim the photograph to fix that, each glyph gets its own dark backing: two tight shadows at 0 offset, drawn BEFORE the colour glows so the bloom still reads outside them rather than being ringed by black. This is not a trick — it is how a neon sign photographs. The tube is bright, its backing board is dark, and the bloom sits outside both. Measured as an effective background (the halo is what actually surrounds each stroke), it holds the violet lockup over the brightest part of a frame, which no plate could do without greying the picture. TWO RULES ON THE SHAPE OF IT, both learned by shipping it wrong: · NOTHING FULLY OPAQUE. A tight shadow at alpha 1 is a crisp dark rim, and it reads as a black keyline drawn around the letters rather than as a shadow behind them. Every layer here is sub-opaque so the falloff is a gradient with no edge in it. · THE DARK MUST STAY INSIDE THE COLOUR. Chained drop-shadows each cast from the RESULT of the last, so a wide dark layer pushes the colour bloom outward and leaves a black band sitting between the glyph and its own glow — which is what "the glow looks off" was. The dark now totals ~10px at a 175px lockup and the neon blooms to ~19px past it, so the tube reads lit again. Only on .hero--shot: the cards and bands still have real scrims, where a halo would only muddy already-passing type. Every radius carries a px floor via max(). Pure em radii scale with the word, which is right for the glow and wrong for the halo: on a 175px lockup .012em is 2.1px and does its job, but on the 34px "On Brady" line it is 0.4px — invisible, and that line sits on the same photograph. The floor is what the small type needs; the em term is what keeps the big type from wearing a hard outline. */ /* ONE dark layer, and the colour glow left at the site default. A hero lockup and a section lockup are the same object and have to look like it. They did not: the hero was carrying two dark layers plus a widened bloom (.04em/.105em against the standard .034em/.085em), and because chained drop-shadows each cast from the RESULT of the last, the dark was pushing the neon outward into a soft purple cloud while the section headline beside it stayed tight. Two lockups, two different signs. So the colour radii are now exactly `.fx .ink`'s — restated rather than inherited, because a filter list replaces wholesale — and the dark is a single 4.5px/.024em layer, which at a 190px lockup sits well inside the 16px bloom and cannot be seen. It is there purely as the effective background at the stroke edge. That makes the DARKNESS THE OVERLAY'S JOB. The two are coupled and there is no third option: at the 50% the brief asks for, the worst painted edge on the homepage lockup reads 1.99:1; at 62% it reads 2.65 and every other hero clears 3:1. The number to move is the overlay on .hero--shot > .hero__scrim, not this. */ /* THE DARK BACKING GOES LAST. This is the whole reason a hero lockup used to look like a different sign from the section headline below it, and it took three passes to find because the glow itself was never the problem — the ORDER was. Chained drop-shadows each cast from the RESULT of the last. With the dark layer first, every colour stop after it was pushed outward by the dark's own radius, so the bloom stopped hugging the glyph and became a detached ring floating 6px off it. A ring reads as a big soft halo; a bloom that starts at the letter reads as a lit tube. The hero's colour radii were actually SMALLER than the section's by then and it still looked like more glow, which is what finally gave it away. Moved to the end, the dark casts from (glyph + finished glow) and paints behind all of it: the neon is now pixel-identical to every other lockup on the site, and the dark is a soft aura on the photograph rather than a spacer inside the type. That is also how a real sign sits on a wall. No --neon-k here any more either. Halving the radii was compensating for the offset, and with the offset gone the heroes just use the same glow as everything else. */ /* THREE dark layers now, not one, because the scrim under them came down from 50% to 25% to match the event cards and this is where that darkness went. The order is still the thing that matters: var(--neon) first, dark LAST. Chained drop-shadows each cast from the RESULT of the last, so a dark layer placed before the colour pushes the bloom outward and leaves a black band between the glyph and its own glow — the bug written up at length above. Cast last, all three paint behind the finished neon and none of them touch it. A tight near-opaque core that IS the effective background at the stroke edge, then two softer radii so the falloff is a gradient with no edge in it. Nothing fully opaque, or it reads as a keyline drawn round the letters. Every radius keeps a px floor via max(): a pure em radius is right for the glow and wrong for the halo, because at the bottom of the clamp .016em is sub-pixel and the small type sits on the same photograph as the large. */ /* ONE dark layer, and the layer COUNT is a performance number. Chained drop-shadows each rasterise and blur the RESULT of the last, across the whole subtree — and this subtree is a 190px lockup, so the cost is superlinear in both the number of layers and the area. Measured on the Haunted page, first paint against layer count: no ink filter at all ............ 64-100ms --neon + ONE dark layer ........ 148-208ms --neon + THREE dark layers ..... 608-668ms Three cost about 450ms of blank screen on every navigation, which was most of "the site feels laggy between pages". So it is one layer, made denser and tighter than the .92/10px it used to be rather than repeated: a tight near-opaque layer is what sets the effective background at the stroke edge, and that is the whole job. The two softer radii were buying feathering, not contrast. NOT A TEXT-SHADOW, and this was tried. text-shadow would cost nothing here — it paints from the glyph outline with no subtree raster — but an .ink is background-clip:text with a transparent fill, and the shadow ends up painting OVER the clipped background instead of behind it: the lockup rendered as black letters inside a violet glow, 1.15:1. .hl__on can use a text-shadow because it paints its colour directly. An .ink cannot. TWO layers, not one, and not three. One cannot reach the floor at any radius — laddered at 10/14/18/24/30px it plateaus at 2.1-2.3 for the violet, because a single sub-opaque layer cannot become a ground no matter how wide it is; it is the STACKING that approaches opacity. Two gets there, and stops one rasterisation short of the three that cost 450ms. */ .hero--shot .fx .ink{ filter: var(--neon) drop-shadow(0 0 max(4px, .022em) rgba(6,6,5,.97)) drop-shadow(0 0 max(12px, .06em) rgba(6,6,5,.92)); } /* A .fx headline's drop-shadow is ONE filter over its whole subtree, so it cannot be scoped away from a differently-inked word: "Haunted" in violet was rendering a violet halo sitting inside the headline's orange one, and the glow read as the wrong colour. .fx--split says every visible run in this headline carries its own .ink, so the parent contributes no halo at all and each word glows in its own colour. It works by emptying --fx-filter rather than setting filter:none, because the neon keyframes animate var(--fx-filter) too — this way the flicker still dims the whole lockup, it just has no colour of its own to add. */ .fx--split{--fx-filter:none} /* per-event colourways — orange is the house accent, the other two belong to their event and are never used off it */ .fx--orange{ --fx-c:var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"), linear-gradient(var(--fx-c),var(--fx-c)); } .fx--green{ --fx-c:var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"), linear-gradient(var(--fx-c),var(--fx-c)); } .fx--red{ --fx-c:var(--red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"), linear-gradient(var(--fx-c),var(--fx-c)); } /* Safari repaints background-clip:text badly inside a transform or a will-change layer; keep the headline out of both. */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .fx{color:var(--fx-c); background-image:none} } .kicker{ font:500 11.5px/1.3 var(--body); text-transform:uppercase; letter-spacing:.24em; color:var(--text-3); margin:0; } .kicker--paper{color:rgba(255,255,255,.72)} .lede{font-size:clamp(18px,1.55vw,22px); line-height:1.6; color:var(--text-2); max-width:34ch; margin:0} .body p{margin:0 0 1.05em; max-width:62ch} .body p:last-child{margin-bottom:0} .small{font-size:14px; line-height:1.6; color:var(--text-2)} .tiny{font:500 11px/1.4 var(--body); text-transform:uppercase; letter-spacing:.18em; color:var(--text-3)} /* ============================================================ TEXTURE — the thing that makes it feel printed ============================================================ */ .grain{position:relative; isolation:isolate} .grain::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); /* overlay, not multiply: multiplying noise into a near-black ground produces nothing at all. Overlay lifts and drops around the mid point, so the tooth survives on black. */ opacity:.26; mix-blend-mode:overlay; } .grain--soft::after{opacity:.14} .grain--dark::after{mix-blend-mode:overlay; opacity:.3} /* ============================================================ TORN EDGE Sits on the seam where a light field meets a dark one. The SVG is filled with the colour of the field it belongs to, so the sheet reads as torn and overlapping rather than as a decorative border. --tear-fill says which field; .tear--up flips it for a bottom edge. Negative margins pull the seam over the join so there is no hairline. ============================================================ */ .tear{ display:block; width:100%; height:clamp(14px,1.8vw,26px); line-height:0; position:relative; z-index:1; pointer-events:none; color:var(--tear-fill, var(--paper)); } .tear svg{display:block; width:100%; height:100%; fill:currentColor} .tear--down{margin-bottom:-1px} .tear--up{margin-top:-1px; transform:rotate(180deg)} /* the fixed header tears into the page rather than ending on a straight edge. It hangs below the bar, so it must not intercept clicks (it is already pointer-events:none) and it hides while the header is transparent over a hero — a torn edge with nothing behind it reads as a stray shape rather than a torn sheet. */ .tear--hdr{ position:absolute; left:0; right:0; top:100%; height:clamp(9px,1.1vw,15px); /* No shadow. The torn edge reads by contrast against whatever is scrolling underneath — a photo, the white calendar, a card. Sitting over a flat --paper section it is invisible, which is what a torn sheet on matching paper actually looks like. */ z-index:1; transition:opacity .3s var(--quart); } /* flat edge against the bar, torn edge hanging into the page */ .tear--hdr svg{transform:scaleY(-1)} .hdr--over .tear--hdr{opacity:0} /* ============================================================ ENTRANCE REVEAL Deliberately quiet — a 14px rise and a fade, once, on the way in. The hidden state is scoped to html.has-js, which the script only adds when it is actually going to run: no JS, or prefers-reduced-motion, and the page renders fully visible with no transition at all. Only transform and opacity animate, so this stays on the compositor. ============================================================ */ .has-js [data-reveal] > *, .has-js [data-reveal]:not(:has(> *)){ opacity:0; transform:translate3d(var(--tx,0px),calc(14px + var(--ty,0px)),0) rotate(var(--rot,0deg)) scale(var(--sc,1)); transition:opacity .62s var(--ease), transform .62s var(--ease); will-change:opacity, transform; } /* This used to be `transform:none`, which flattened anything that carried a resting rotation OR a hover transform of its own — and because this rule is (0,3,0) it beat every `.thing:hover{transform:…}` on the site. Two things were silently broken by it: the polaroids rendered dead straight (their .tilt-* wiped the moment they revealed), and the ticket inside a reveal group never tilted on hover while identical tickets outside one did. So the transform is now composed entirely from three variables that any descendant is free to set — --tx/--ty (offset), --rot (angle), --sc (scale) — and interaction states set THOSE rather than fighting for `transform`. Specificity stops mattering: whichever rule wins still reads the same three values. Anything that sets none of them resolves to the identity and behaves exactly as before. */ .has-js [data-reveal] > .is-in, .has-js [data-reveal].is-in:not(:has(> *)){ opacity:1; transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotate(var(--rot,0deg)) scale(var(--sc,1)); } /* once it has landed, stop advertising the layer */ .has-js [data-reveal] > .is-in{will-change:auto} @media (prefers-reduced-motion: reduce){ .has-js [data-reveal] > *, .has-js [data-reveal]:not(:has(> *)){ opacity:1 !important; transform:none !important; transition:none !important; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ============================================================ FULL-BLEED HERO Picture edge to edge, header riding over it, everything centred. ============================================================ */ .hero{ position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100svh; display:grid; place-items:center; text-align:center; } .hero > .hero__media{position:absolute; inset:0; z-index:0; place-self:stretch} /* the "photo goes here" marker sits in a corner, not behind the headline */ .hero > .hero__media .photo__cap{ position:absolute; left:22px; bottom:20px; z-index:3; text-align:left; max-width:22ch; opacity:.4; padding:0; } @media (max-width:640px){ .hero > .hero__media .photo__cap{left:18px; bottom:16px} } .hero__media img{width:100%; height:100%; object-fit:cover} /* ── REAL PHOTOGRAPHY IN A HERO ────────────────────────────── A daylight source frame is graded toward dusk so a sunny picture can still sit under an October headline. The halftone stays but is dialled right down — print texture over a photo, not a riso wash. The night gradient stays underneath as the fallback, so a hero whose image is missing or still loading looks like the placeholder design rather than a black box. NOTE the specificity trap in the README: the scrim override below matches `.hero > .hero__scrim` at (0,2,0) and only wins by being declared later. Keep it after that rule. */ .hero > .hero__media--shot{ overflow:hidden; /* THE THING BEHIND THE PHOTOGRAPH, and it is on screen more often than it looks. This was the full orange -> red -> black gradient, written when the heroes had no pictures and that gradient WAS the hero. Now every one of them carries a 300-500KB photograph, and this paints for the frame or two before it decodes — so navigating between pages flashed bright orange and then cut to a dark photo. That is the page flicker. Kept as a gradient rather than flat, because a genuinely missing image should still look composed, but pulled down to the page's own ground: any gap now reads as the site continuing, not as a flash. */ background:linear-gradient(152deg,#231009 0%,#170c0a 46%,var(--ink-deep) 100%); } .hero__media--shot img{ width:100%; height:100%; object-fit:cover; display:block; /* IN COLOUR. These were fully desaturated and pulled down two stops; the pictures are good enough to run as pictures, so the grade is now barely there — a touch of saturation and contrast, nothing else. Everything the old grade was secretly doing for legibility has moved onto the TYPE — see the dark halo on .hero--shot .fx .ink. That is the whole trade: give the letterforms their own backing and leave the photograph alone. --hero-b is still exposed because exposure belongs to the PICTURE, not the component. It now defaults to 1 (untouched) and a frame that is genuinely over-bright can dial itself back without every other hero being pulled down to suit it. */ filter:saturate(1.06) contrast(1.03) brightness(var(--hero-b, 1)); /* --hero-pos is the crop. It matters far more now than it did when every hero was desaturated and two stops down, because WHERE the bright part of a picture lands is now the whole legibility argument: the plate can only be so strong before the photograph is grey again, so the honest fix for a hot subject is to crop it out from under the words rather than to bury it. Portrait sources especially — a 2:3 frame in a 16:10 hero throws away 60% of its height, and which 40% you keep is a composition decision, not a default. */ object-position:50% var(--hero-pos, 50%); /* if the file is missing or still loading, the browser paints the alt text across the hero. Hide it visually — the gradient underneath is the intended fallback. Screen readers still get the alt attribute. */ color:transparent; font-size:0; } /* warm dusk wash — marries the frame to the palette without hiding it. Halved now that the picture is in colour: at the old strength it was tinting a colour photograph orange rather than warming a grey one. */ .hero__media--shot::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(158deg, rgba(255,77,20,.06) 0%, rgba(232,32,42,.04) 45%, rgba(17,17,16,.10) 100%); mix-blend-mode:multiply; } /* print texture over photography, low (style guide calls for 8-15%) */ .hero__media--shot::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background-image:radial-gradient(rgba(17,17,16,.3) 1.4px, transparent 1.5px); background-size:7px 7px; mix-blend-mode:multiply; opacity:.09; } /* guarantees the centred type stays legible whatever picture lands here */ .hero > .hero__scrim{ position:absolute; inset:0; z-index:1; place-self:stretch; /* Two layers. The linear wash is the old full-height scrim. The radial is new: a soft plate centred on the headline, because a headline in --orange / --red measures 1.3:1 against the bright sky in the Brady Street picture and only ~2.8:1 against a green placeholder field. Darkening the whole photo to fix that killed the picture; darkening only the middle keeps the edges readable as an image. */ background: radial-gradient(125% 82% at 50% 42%, rgba(8,8,7,.78) 0%, rgba(8,8,7,.60) 46%, rgba(8,8,7,0) 88%), linear-gradient(180deg,rgba(10,10,9,.44) 0%,rgba(10,10,9,.24) 42%,rgba(10,10,9,.58) 100%); } /* ── NO OVERLAY ON A HERO CARRYING A REAL PICTURE ──────────────────── This element used to be the whole legibility system: a 125%x82% radial at .77 over a full-height wash, on top of a desaturated, two-stops-down image. It came down in stages — first to a 13% wash plus a plate cut to the type — and is now off entirely. The picture is the picture. Legibility moved onto the TYPE instead. See .hero--shot .fx .ink: a tight dark halo is drawn behind each glyph's own colour, which is how a neon tube reads against its own backing board in a real photograph. That protects the letterforms without touching a single pixel of the photograph, which no amount of scrim tuning can do. What is left is two flat layers and no plate: · a flat 38% black across the whole frame. Even, deliberately — it is an exposure decision applied to the picture, not a shape cut around the words, so the photograph reads the same in the corners as it does behind the lockup. 38 AND NOT THE CARDS' 25, and the gap is a performance decision rather than a design one. The darkness a mid-luminance ink needs has to come from either the scrim or the halo, and on a 190px lockup halo layers are expensive: 25% needs three of them to clear 3:1 and three cost ~450ms of first paint. 38% clears it with two. Laddered with two layers, the violet reads 2.69 / 2.91 / 3.11 at 25 / 32 / 38, so 38 is the first step that passes. The cards sit at 25 because their titles are 30-92px, where three layers cost nothing. · a shallow gradient over the top of that. Not a photo treatment but chrome: the fixed header floats transparently over the first 60px of every hero and its links have to sit on something predictable. THIS ONE WENT UP WHEN THE FLAT WASH CAME DOWN, and the arithmetic is the point. The two layers composite, so what the header actually sits on is 1-(1-top)(1-flat). At the old .34 over a .50 flat that was .67. Leaving .34 over the lighter flat would have dropped it to .505 — and the Shamrock hero has a lit television in its top-left corner, directly behind the logo, where 13px nav links need 4.5:1 and would have had about 3.6. Solving 1-(1-x)(1-.38)=.67 gives x=.47, so the top stop is .47 and the 9% stop scales with it. The header is protected exactly as well as it was at 50%; the picture below it is not touched. IT IS NO LONGER A HERO-ONLY NUMBER, and the note that used to say so has been rewritten rather than deleted, because the reason it gave was sound at the time. It said the cards "have no room to plate only the type, so the two were never the same instrument". That was true while the cards' protection was a 86% scrim on .event__shot::before. It is not true any more: the cards now carry the same dark halo on their own ink that the heroes do, which needs no room at all, so both surfaces are running the same instrument and 25% is deliberately the same number on each. A hero and a card of the same event should not be two different exposures of it. The halo on the type is what makes that survivable, and it is doing more of the work than it used to. History worth keeping: at 20% the halo alone put the worst painted edge at 2.17-2.71 across the four heroes; 50% cleared 3:1 outright with the halo as the belt rather than the braces. 38% sits between those, and the halo on .hero--shot .fx .ink went from one layer to two to take the difference back — see the note there for why not three. */ .hero--shot > .hero__scrim{ background: linear-gradient(180deg, rgba(8,8,7,.47) 0%, rgba(8,8,7,.20) 9%, rgba(8,8,7,0) 18%), linear-gradient(rgba(8,8,7,.38), rgba(8,8,7,.38)); } /* No per-ink variants any more. --red and --violet each needed their own deeper scrim when the scrim was the only protection; the halo on the ink is per-word by construction, which is a far smaller instrument. */ .hero__inner{ /* 1000px was an Anton-era measure. Jomhuria is ~1.5x wider at the same cap height, so "SHAMROCK" ran 541px past the old column. The sub-copy is unaffected — .hero__sub caps itself at 46ch. */ position:relative; z-index:2; width:100%; max-width:1320px; place-self:center; padding:calc(var(--hdr-h) + clamp(40px,7vh,88px)) 28px clamp(44px,7vh,84px); display:grid; justify-items:center; gap:clamp(18px,2.6vh,30px); color:var(--ink); } .hero__inner .kicker{color:rgba(255,255,255,.86)} /* A headline carrying .fx paints its own fill through background-clip:text, so it must keep color:transparent. This rule is (0,2,0) and would beat .fx at (0,1,0) — the same specificity trap `.photo` hits elsewhere in this file. Any NEW rule that sets `color` on .d1/.d2/.d3 needs the same :not(.fx) guard, or the headline silently goes solid. */ .hero__inner .d1:not(.fx),.hero__inner .d2:not(.fx){color:var(--ink)} /* The date line used to be a 12px tracked-out body label — a caption under a 190px headline, which made the one piece of hard information on the page the smallest thing on it. It now takes the .h4 display face (the "THREE DAYS A YEAR" setting), sans only: the script would fight the lockup directly above it. Line-height is .95 rather than .464 because this wraps to two lines on narrow screens and .h4's tight leading is drawn for single-line headings. */ .hero__meta{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(26px,2.9vw,40px); line-height:.95; letter-spacing:.05em; color:rgba(255,255,255,.94); margin:0; } /* The separators get their own element because Jomhuria's middle dot is wrong for this job twice over: the face has a very small cap height relative to its em (~.39), so a dot positioned for a normal x-height floats well above the cap band — and at 40px it comes out as a heavy blob. Set in the body face at a fraction of the size and nudged to the optical centre of the caps, it reads as punctuation rather than as a fourth word. */ .hero__meta .sep{ font-family:var(--body); font-size:.34em; letter-spacing:0; /* Measured, not guessed: at a 37px meta the cap band's optical centre sits 7.2px above the baseline and this dot's ink centre sits 3.65px, so it needs .0957em of the META size lifting — which is .28em of its own. Both terms are proportional, so it holds at every clamp step. */ vertical-align:.28em; margin:0 .5em; opacity:.62; } /* The plain text on a photographic hero gets the same treatment the headline does, by the only means available to it: a text-shadow. .hero__meta and the ticket's note are ordinary text, not background-clip fills, so a shadow works where a drop-shadow filter would also blur the glyphs. Three radii — a tight near-opaque core that IS the effective background at the stroke edge, then two softer ones so it reads as a glow rather than an outline. Only inside .hero--shot. On the paper heroes there is no picture and this would just be a smudge. */ .hero--shot .hero__meta, .hero--shot .hero__inner .ticket__note{ text-shadow: 0 0 4px rgba(6,6,5,.98), 0 0 10px rgba(6,6,5,.92), 0 0 22px rgba(6,6,5,.75); } @media (max-width:640px){ .hero__inner{padding-left:18px; padding-right:18px} } /* ── THE FONT GATE ─────────────────────────────────────────────────── The hero's content waits for the real typefaces, then fades in. This is not polish, it is a correctness fix. Every display measure on this site is tuned to JOMHURIA'S metrics — --hl-lead .46, the --fx-pt/--fx-pb paint-box padding, the script's -.29em tuck, and the negative margins that cancel all of it. Those numbers are meaningless against the fallback (Arial Narrow, with a cap height more than twice Jomhuria's), so for the moment before the woff2 lands the lockup does not merely look wrong, it COLLIDES: on the Shamrock hero "Shuffle" lands on top of "SHAMROCK 18". font-display:swap is what asks for that frame, and it is the right setting for body copy — text you can read in the wrong face beats text you cannot read at all. A display lockup whose layout is metric-tuned is the exception. So the gate is on .hero__inner rather than on .fx: .fx and .fx--lit already own their `animation` property for the neon, and a second animation there would fight the tube striking. Fading the hero's whole content block also keeps the lockup, the meta line and the ticket arriving together rather than in pieces. opacity only, never visibility or display: the box still lays out, so nothing below the hero moves when it appears. The class is removed by the guard in every page's on document.fonts.ready, with a 1.5s cap so a font that never arrives cannot leave an empty hero. .pagehead is gated with it. Only four pages carry a photographic hero; the other five open on a .pagehead instead, and its headline is the same metric-tuned display type with the same script tuck in it. Same problem, same fix. */ .hero__inner, .pagehead{transition:opacity .42s var(--ease)} .fonts-pending .hero__inner, .fonts-pending .pagehead{opacity:0} @media (prefers-reduced-motion:reduce){ .hero__inner, .pagehead{transition:none} } /* centred page heads on the pages that keep a paper hero */ .pagehead{text-align:center; display:grid; justify-items:center; gap:clamp(14px,2vw,22px)} .pagehead .lede{max-width:52ch} /* --- slim head: utility pages put the content first ------------------ Calendar, tickets, about and contact used the same full centred hero as the event pages, which pushed the thing people actually came for (the calendar grid, the ticket list, the form) most of a viewport down. Here the headline drops to .d3 scale, left-aligns, and the lede paragraph is dropped, so the content starts just under the kicker rule. Event pages keep the tall centred hero — this is deliberately only for the four. */ .pagehead--slim{ text-align:left; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:clamp(16px,3vw,44px); } .pagehead--slim > :first-child{margin:0} /* The exception to the merge above. These five heads were deliberately dropped to a smaller scale so the calendar, ticket list and form start near the top of the page instead of a viewport down; they keep the old .d3 ramp while every other headline moves up. */ .pagehead--slim .d3{font-size:clamp(34px, calc(30.1px + 2.63vw), 68px)} /* the head is now folded into the first content section rather than sitting in a band of its own, so it owns the gap to the content below it */ .pagehead--slim{margin-bottom:clamp(26px,3.4vw,52px)} /* Folding the head into whatever section came first meant it inherited that section's top padding — .band--tight on two pages, the default .band on three, which put the five menu headlines at two different heights (125px vs 173px). Normalise on the section that actually hosts a head so the set lines up whichever band it landed in. */ .band:has(> .shell > .pagehead--slim), .band:has(> .shell--tight > .pagehead--slim){ padding-top:clamp(40px,4.6vw,72px); } .pagehead--slim .taped{flex:0 0 auto; width:clamp(124px,13vw,168px)} @media (max-width:640px){ .pagehead--slim{gap:18px} .pagehead--slim .taped{width:150px} } /* ============================================================ SHELL & GRID ============================================================ */ .shell{max-width:var(--shell); margin:0 auto; padding:0 28px} /* the closing bands put a .d1 in here; 1000px was an Anton-era measure and clipped "So, are we Crawling?" by 102px */ .shell--tight{max-width:1180px} @media (max-width:640px){ .shell{padding:0 18px} } section{position:relative} .band{padding:clamp(56px,7.5vw,120px) 0} .band--tight{padding:clamp(36px,4.2vw,64px) 0} /* --paper2 and --grey used to step the ground up through --paper-2 and --paper-3 for visual rhythm between sections; Tanner asked for one flat dark gray everywhere except image sections (2026-09-02), so both classes now resolve to --paper, same as the unmodified .band. Kept as separate classes rather than stripped from markup, in case the step returns later. --ink-deep (.band--ink, .ftr) is deliberately UNCHANGED — the closing CTA and footer stay the darkest ground on purpose, confirmed with Tanner. --paper-2/--paper-3 tokens themselves are untouched: cards, the price panel, the drawer-link hover and .photo--grey still use them to read as raised OVER this new flat ground — only full-bleed section backgrounds were flattened. */ .band--paper2{background:var(--paper)} .band--ink{background:var(--ink-deep); color:var(--ink)} .band--ink .lede,.band--ink .small{color:rgba(255,255,255,.7)} .band--ink .kicker{color:rgba(255,255,255,.66)} /* NOTE: .band--ink .tiny / .ftr .tiny used to be grouped into the .band--orange rule below, which meant every small label on a dark band was silently painted with an orange background — a full-width orange stripe behind the block-level ones. They only ever wanted a colour. */ .band--ink .tiny,.ftr .tiny{color:rgba(255,255,255,.72)}.band--orange .lede{color:rgba(17,17,16,.86)} .band--orange .kicker{color:rgba(17,17,16,.84)} .band--orange .btn{border-color:var(--on-accent); color:var(--on-accent)} .band--orange .btn:hover{background:var(--on-accent); color:var(--orange)} .band--grey{background:var(--paper)} /* ============================================================ ON-WHITE — the calendar prints on white stock The token names already mean the right thing: --paper is "the surface you print on", --ink is "the mark on it". So this is a straight value swap, not a repaint, and every component built on those two inverts on its own. Three things do NOT come along for the ride: · --on-accent stays near-black. It is the colour of type sitting ON an accent, and orange is mid-luminance — white on --orange is 3.3:1 and fails whichever way round the page is. · --orange-on is swapped for --orange-d. #FF8A4D is tuned for small type on black; on white it measures under 3:1, --orange-d gives 4.9. · anything painting type on a solid --ink fill (buttons, active tabs) has to take --paper instead, or it lands black-on-black. ============================================================ */ .on-white{ --paper: #F8F8F6; --paper-2: #EFEFEB; --paper-3: #E4E4DF; --ink: #111110; --ink-deep: #FFFFFF; --ink-2: #DCDCD6; --stone: #C9C9C2; --text: var(--ink); --text-2: rgba(17,17,16,.74); --text-3: rgba(17,17,16,.62); /* .56 measured 4.24:1 — under 4.5 for 11px labels */ --rule: rgba(17,17,16,.16); --rule-hard: rgba(17,17,16,.72); --orange-on: var(--orange-d); --green-on: var(--green-d); background:var(--paper); color:var(--text); } /* the grain is tuned to lift a near-black ground; on white it only muddies */ .on-white.grain::after,.on-white .grain::after{display:none} /* type on a solid --ink fill flips with it */ .on-white .btn:hover{background:var(--ink); color:var(--paper)} .on-white .btn--paper{border-color:rgba(17,17,16,.5); color:var(--ink)} .on-white .btn--paper:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)} /* the sheet is redundant once the whole band is white — keep its spacing, drop the panel so it does not read as a black box (--ink is now black) */ .on-white .sheet{background:transparent; color:inherit; padding:0} /* a white headline glow is invisible on white; invert the halo */ /* NO GLOW ON A WHITE GROUND. Inside .on-white the ink token has already inverted to near-black, so --neon was deriving a dark halo from it — technically consistent, and wrong. The glow is a neon-sign device: a tube emits light onto a dark surround. Black type on white emits nothing, and a dark halo under it just reads as a printing fault. `none` rather than a tuned-down version, because there is no correct amount of glow here — the effect does not belong on this ground at all. Setting --neon empties both users of it: .fx's own --fx-filter and the filter on each .ink run. */ .on-white .fx,.on-white .fx .ink{--neon:none} /* --orange-lt (#FF8A4D) is tuned for small type on black and measures 2.3:1 on white. --orange-d is 4.9:1. Body links inside a white band take the dark orange; the underline is kept because colour alone is not a sufficient affordance for a link inside a paragraph. */ .on-white .lede a,.on-white .small a,.on-white p a{ color:var(--orange-d); text-decoration:underline; text-underline-offset:.16em; text-decoration-thickness:1px; } .on-white .kicker--paper{color:rgba(17,17,16,.62)} /* defensive: if a band--ink ever lands inside an on-white scope, its hardcoded rgba(255,255,255,…) text would go white-on-white */ .on-white .band--ink .lede,.on-white .band--ink .small{color:var(--text-2)} .on-white .band--ink .kicker,.on-white .band--ink .tiny, .on-white .band--ink .ticket__note{color:var(--text-3)} .on-white .sticker--ghost-paper{border-color:rgba(17,17,16,.4); color:var(--ink)} /* A low-opacity WHITE fill does nothing on a white ground — the chip vanishes and the composited fill actually darkens slightly, dropping --orange-d to 4.50:1. Give it a near-white fill and a hairline so it still reads as a tag: 4.94:1. */ .on-white .sticker{ background:rgba(255,255,255,.72); color:var(--orange-d); box-shadow:inset 0 0 0 1px rgba(17,17,16,.14); } .on-white .sticker--ghost,.on-white .sticker--ghost-paper{background:transparent} .cols{display:grid; gap:clamp(24px,3vw,48px)} .c-2{grid-template-columns:repeat(2,minmax(0,1fr))} .c-3{grid-template-columns:repeat(3,minmax(0,1fr))} .c-4{grid-template-columns:repeat(4,minmax(0,1fr))} /* asymmetric splits — never 50/50 unless it earns it */ .c-wide-left{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)} .c-wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)} .c-offset{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)} /* c-offset pairs a narrow label column with a wide content column. The numbered eyebrows that filled that label column are gone, leaving six of these grids with a single child — which would otherwise be squeezed into the .42fr column. Span it instead. Self-healing: put a label back and the two-column layout returns on its own. */ .c-offset > :only-child{grid-column:1 / -1} /* ── THE CTA PAIRING: copy left, one ticket right ─────────────────────── Measured before changing anything, at 1440px: the grid is 1304 wide, the copy stops at 573, and the 220px ticket sat left-aligned in a 481px column — leaving a 207px void mid-row and a 261px orphan to its right, with the ticket vertically centred against a taller text block so no two edges in the section lined up. That is the "something feels off". Two shared edges fix it. The ticket hangs on the grid's right edge, which is also the shell's right margin and the edge the header button sits on; and the row is bottom-aligned so the ticket's caption closes on the same line as the last line of copy. The headline keeps the top-left corner, the ticket takes the bottom-right. */ .cols--cta{align-items:end} .cols--cta > .pitch{justify-self:end; width:100%} /* ── THE PITCH ─────────────────────────────────────────────── The right column used to be a lone ticket floating in a 260px orphan of empty grid. It now carries the actual Haunted Bar Hop card — the same component the homepage and About use, so the thing being sold is SHOWN rather than described — and the ticket is tucked into its bottom-right corner, overlapping the frame and hanging off the edge like a stub pushed under a poster. The overlap is the point: two flat elements side by side read as a layout, one object sitting on another reads as a physical thing. */ .pitch{position:relative; width:100%} .pitch__card{display:block; text-decoration:none} /* .pitch .pitch__ticket, not .pitch__ticket: .ticket sets width:100% and its own max-width clamp, and it is declared LATER in this file, so a single-class override here loses on source order regardless of intent. */ .pitch .pitch__ticket{ position:absolute; /* Hangs BELOW the card, not past its right edge. An absolutely positioned child still counts toward document scrollWidth, and a right-hang of 24-31px on a card already sitting on the shell's right margin pushed the page 2-7px wide at some widths. Vertical overlap plus the rotation carries the same "sitting on top of it" read with no horizontal cost — the tilt itself only reaches ~4px past the edge, which the shell padding absorbs. */ right:0; bottom:-11%; width:min(46%, 200px); max-width:none; --rot:-5deg; z-index:3; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); } /* straightens and lifts further than a loose ticket does, because this one is pinned under something and has to look like it is coming out */ @media (hover:hover){ .pitch .pitch__ticket:hover{--rot:-1.5deg; --ty:-7px} } /* the stub slides out from under the card as the section arrives. `backwards` and NOT `both`: the fill must not survive the animation, or it would pin `transform` and the variable-driven hover above would stop working — the end state is already the element's resting style. */ @keyframes bss-tuck{ from{ opacity:0; transform:translate3d(0,26px,0) rotate(-12deg) } to { opacity:1; transform:translate3d(0,0,0) rotate(-5deg) } } .pitch.is-in .pitch__ticket{ animation:bss-tuck .74s var(--quart) .26s backwards } @media (prefers-reduced-motion: reduce){ .pitch.is-in .pitch__ticket{animation:none} } @media (max-width:900px){ .cols--cta{align-items:start} .cols--cta > .pitch{justify-self:stretch} } @media (max-width:520px){ /* at phone width the overlap crowds the meta row — the stub drops below the card and sits square */ .pitch .pitch__ticket{ position:static; width:clamp(150px,52%,210px); margin:14px 0 0 auto; display:block; --rot:-3deg; filter:none; } } @media (max-width:900px){ .c-3,.c-4{grid-template-columns:repeat(2,minmax(0,1fr))} .c-2,.c-wide-left,.c-wide-right,.c-offset{grid-template-columns:minmax(0,1fr)} } @media (max-width:560px){ .c-3,.c-4{grid-template-columns:minmax(0,1fr)} } .stack{display:grid; gap:18px; align-content:start} .stack--lg{gap:30px} .row{display:flex; gap:16px; flex-wrap:wrap; align-items:center} .row--between{justify-content:space-between} .row--end{justify-content:flex-end} /* ============================================================ HEADER — sticky, paper, one hairline ============================================================ */ /* The header is injected by JS, so between first paint and boot the bar is simply absent — on a fast refresh you see the hero slide up under nothing and then the bar drop in. body already reserves the height, so this is not a layout shift, it is a missing surface. Painting the empty holder as the bar means the correct block of colour is there on the very first frame and the real header replaces it in place. :empty stops applying the moment innerHTML lands, so there is nothing to clean up and no risk of a stray bar if boot never runs. */ #chrome-header:empty{ position:fixed; top:0; left:0; right:0; z-index:80; height:var(--hdr-h); background:var(--paper); } body.has-hero #chrome-header:empty{background:transparent} .hdr{ position:fixed; top:0; left:0; right:0; z-index:80; background:var(--paper); transition:background .3s var(--quart); } /* .tear--hdr hangs below the bar, so the header cannot clip it */ .hdr{overflow:visible} /* pages whose hero is a full-bleed image: the bar rides over the picture until you scroll, the way the Shamrock site does it */ .hdr--over{background:transparent} .hdr--over .nav > a,.hdr--over .nav button{color:rgba(255,255,255,.85)} .hdr--over .nav > a:hover,.hdr--over .nav button:hover{color:var(--ink)} .hdr--over .nav > a.is-active{color:var(--ink)} /* Floating over a hero the three marks lose their glow — a white drop-shadow on white type over a photograph is a smudge, not a lift — and drop a step in opacity so they read as chrome sitting on the picture rather than type printed into it. */ .hdr--over .nav a.nav__mark{color:rgba(255,255,255,.85); filter:none} .hdr--over .nav a.nav__mark:hover, .hdr--over .nav a.nav__mark.is-active{color:var(--ink); filter:none} .hdr--over .nav a.nav__mark::after{background:var(--ink)} /* the dropdown is its own white panel — it never inherits the over-hero colours */ .hdr--over .more__menu a{color:var(--ink)} .hdr--over .nav .soon{color:rgba(255,255,255,.6)} .hdr--over .burger{border-color:var(--ink); color:var(--ink)} .hdr--over .burger:hover{background:var(--ink); color:var(--on-accent)} /* everything below the header needs the height back, except full-bleed heroes which deliberately run underneath it */ body{padding-top:var(--hdr-h)} body.has-hero{padding-top:0} .hdr__in{ max-width:var(--shell); margin:0 auto; padding:13px 28px; display:flex; align-items:center; gap:26px; } @media (max-width:640px){ .hdr__in{padding:11px 18px; gap:14px} } /* ── THE LOGO ──────────────────────────────────────────────────────── images/bss-logo.svg is a single-colour "BAR SCENE / SOCIALS" wordmark. It is painted as a MASK with the colour supplied by the element, not as an
- , however tempting for the gap. A grid
container blockifies its children, which drops display:list-item and
takes the markers with it. Margins do the spacing instead. */
.facts{
list-style:disc; margin:0; padding:0 0 0 1.15em;
}
.facts li{
color:var(--text-2); max-width:64ch;
margin:0 0 clamp(10px,1.1vw,14px);
}
.facts li:last-child{margin-bottom:0}
.facts li::marker{color:var(--orange-on)}
/* on the deep band the copy lifts a step, same as every other run there */
.band--ink .facts li{color:rgba(255,255,255,.68)}
.band--ink .facts li::marker{color:var(--orange-lt)}
/* big stat — .stat and .stat__l went with the old metrics strip; only
.stat__n survives, on the two charity blocks that still set a figure in
display type. */
/* a straight x2.2 gave 211px, which put the widest stat ("24k", 1.05em of
advance) 37px into the neighbouring column of the 4-up grid at every
viewport over 1000px. 13vw/172px is the largest that fits the column. */
.stat__n{font-family:var(--display); font-size:clamp(101px,13vw,172px); line-height:.373; letter-spacing:.02em}
/* ============================================================
THE DROP — first-load curtain
A handful of tickets fall past the screen and the site is there.
Three rules keep it from being the thing everyone hates about
intros:
· it never blocks. The page is fully built and readable behind
it; the curtain is pointer-events:none the moment it starts
fading, and it removes itself on a timer that cannot hang.
· it runs ONCE per session (sessionStorage), so navigating the
site is not a series of curtains.
· prefers-reduced-motion and no-JS never see it at all.
============================================================ */
.drop{
position:fixed; inset:0; z-index:200;
background:var(--ink-deep);
overflow:hidden;
transition:opacity .5s var(--quart);
}
.drop[data-done]{opacity:0; pointer-events:none}
.drop__t{
position:absolute; top:0; left:0;
width:var(--w); will-change:transform;
animation:bss-drop var(--dur) cubic-bezier(.42,0,.72,1) var(--delay) forwards;
transform:translate3d(var(--x),-140%,0) rotate(var(--r0));
}
.drop__t svg{display:block; width:100%; height:auto}
@keyframes bss-drop{
from{ transform:translate3d(var(--x),-140%,0) rotate(var(--r0)) }
to { transform:translate3d(calc(var(--x) + var(--drift)),108vh,0) rotate(var(--r1)) }
}
/* the mark sits over the fall so the load has a subject, not just debris */
.drop__mark{
position:absolute; inset:0; display:grid; place-items:center;
color:var(--ink); pointer-events:none;
}
.drop__logo{width:clamp(148px,20vw,248px); opacity:.92}
/* ============================================================
THE WASH
A colour that arrives at one edge and is gone by the middle,
between two hairlines of the same ink. It started as a one-off on
the "ours" row of the listing and turned out to be the most useful
thing on the page: it marks a block as belonging to an event
without boxing it, without a fill that fights the photography, and
without another border.
One component, three inks. --wash sets the channel triplet so every
stop can carry its own alpha; --wash-from and --wash-to move the
fade so a wash can enter from the left, the right, or the top.
============================================================ */
.wash{
position:relative;
--wash:255,77,20;
background-image:linear-gradient(var(--wash-angle,90deg),
rgba(var(--wash),.13) 0%, rgba(var(--wash),.05) 42%, rgba(var(--wash),0) 78%);
}
/* Hairlines top and bottom are not optional — they are what stops the fade
ending in a soft edge and reading as a smudge. Part of the component. */
.wash{
border-top:1px solid rgba(var(--wash),.55);
border-bottom:1px solid rgba(var(--wash),.55);
}
.wash--orange{--wash:255,77,20}
.wash--green {--wash:0,194,78}
.wash--red {--wash:232,32,42}
/* enters from the right instead — for blocks whose content sits left */
.wash--rtl{--wash-angle:270deg}
/* The vertical variant is gone. It was used twice and both times it read
as a big tinted rectangle with a hard edge across the page rather than
as a wash — a pale mint block behind the charity figure, and a muddy
brown one behind the price stubs. The horizontal fade between two
hairlines is the treatment that works, so it is the only one. */
/* Bleeds past the column edge and pays the padding back, so the colour
runs to where the eye reads the margin rather than stopping on the text
block. Lifted off .listing__row--ours, which is where this started. */
.wash--bleed{
margin-inline:calc(-1 * clamp(14px,2vw,32px));
padding-inline:clamp(14px,2vw,32px);
}
/* vertical room, for washes on a content block rather than a table row */
.wash--pad{padding-block:clamp(20px,2.6vw,38px)}
/* ============================================================
THE LISTING — what else is on this month
Was four identical bordered rectangles with identical internal
layouts and equal spacing: the SaaS card grid, and the one thing
the art direction is explicitly not. A gig guide torn out of a
zine has no boxes in it — it has a hairline between entries, a
big date in the margin, and one entry circled.
So: rules, not borders. The date becomes display type in the left
margin at ~7x the meta line, which is the hierarchy the boxes were
faking with a border. And the one that is OURS breaks the grid
instead of merely changing border colour — it bleeds past the
column edge and carries a wash that fades out across the row.
============================================================ */
.listing{
list-style:none; margin:0; padding:0;
border-top:1px solid var(--rule);
}
.listing__row{
position:relative;
display:grid;
grid-template-columns:minmax(72px,9%) minmax(0,1fr) auto;
gap:clamp(16px,3vw,44px);
align-items:baseline;
padding:clamp(20px,2.8vw,34px) 0;
border-bottom:1px solid var(--rule);
/* the nudge is --tx, not a literal transform: these rows are direct
children of a [data-reveal] group, whose finished state owns
`transform` at (0,3,0) and would clobber a plain transform outright.
Same reason .taped and .ticket compose theirs from variables. */
transform:translate3d(var(--tx,0px),var(--ty,0px),0);
}
/* and the timing has to be reclaimed at matching specificity, or the
hover inherits the reveal's slow .62s entrance curve */
.listing__row,
.has-js [data-reveal] > .listing__row{
transition:opacity .62s var(--ease), transform .42s var(--quart);
}
/* the accent rule that wipes in under a hovered row. A second line laid
over the border rather than a colour change on it, so it can animate
from the left the way a pen would. */
.listing__row::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background:var(--orange); transform:scaleX(0); transform-origin:left center;
transition:transform .55s var(--quart);
}
@media (hover:hover){
.listing__row:hover{--tx:8px}
.listing__row:hover::after{transform:scaleX(1)}
}
.listing__day{
font-family:var(--display); font-weight:400;
font-size:clamp(52px,6.4vw,96px); line-height:.62; letter-spacing:.02em;
color:var(--text-3);
font-variant-numeric:tabular-nums;
}
.listing__body{display:grid; gap:6px; align-content:start}
.listing__when{font:500 11px/1.4 var(--body); letter-spacing:.18em;
text-transform:uppercase; color:var(--text-3); margin:0}
.listing__name{
font-family:var(--display); font-weight:400; text-transform:uppercase;
font-size:clamp(26px,2.9vw,40px); line-height:.62; letter-spacing:.03em;
margin:0; color:var(--text);
}
.listing__where{font:400 15px/1.5 var(--body); color:var(--text-2); margin:0}
.listing__act{justify-self:end; align-self:center}
/* ours: bleeds out of the column and takes the accent */
/* --orange-on, not --orange. This row now carries an orange wash, which
tints the white paper under the numeral to #f9e2d9 and drops --orange
from 3.12:1 to 2.67 — under the 3.0 floor for large text. --orange-on
resolves to --orange-d inside .on-white and measures 4.6. */
.listing__row--ours .listing__day{color:var(--orange-on)}
.listing__row--ours .listing__name{color:var(--text)}
.listing__row--ours::after{transform:scaleX(1); opacity:.55}
@media (max-width:720px){
/* the action drops under the entry rather than squeezing a third
column into a phone; the date keeps its margin position */
.listing__row{grid-template-columns:minmax(56px,auto) minmax(0,1fr); row-gap:16px}
.listing__act{grid-column:2; justify-self:start}
.listing__day{font-size:clamp(44px,13vw,64px)}
}
/* ============================================================
PRICE STUBS
White paper torn out and laid on the page. They were dark panels
with a border, which is the card grid the art direction keeps
rejecting; the site already has a paper register (the polaroid,
the calendar sheet, the white bands) and this belongs to it.
.on-white rides along in the markup, so every token inside flips
and the type, the chip and the rules all take their dark values
without a single override here. Same swap the calendar uses.
============================================================ */
.stubs{
display:grid; grid-template-columns:1.18fr 1fr;
gap:clamp(16px,2.4vw,34px); align-items:end;
}
.stub{
position:relative; display:block; text-decoration:none;
background:var(--paper); color:var(--text);
padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px) clamp(28px,3.2vw,40px);
/* Torn on all four edges. A deterministic polygon rather than an image:
it scales with the card, costs no request, and never tiles visibly.
Point density is split between the long and short edges so the teeth
stay about the same size on a card of this proportion. */
clip-path:polygon(0.00% 1.37%, 3.85% 0.00%, 7.69% 0.18%, 11.54% 0.69%, 15.38% 0.00%, 19.23% 0.08%, 23.08% 0.57%, 26.92% 1.19%, 30.77% 0.00%, 34.62% 1.20%, 38.46% 0.90%, 42.31% 1.31%, 46.15% 1.61%, 50.00% 0.80%, 53.85% 1.45%, 57.69% 1.55%, 61.54% 0.42%, 65.38% 0.46%, 69.23% 0.31%, 73.08% 0.65%, 76.92% 0.81%, 80.77% 0.26%, 84.62% 0.69%, 88.46% 1.35%, 92.31% 1.34%, 96.15% 0.31%, 100.00% 0.00%, 100.00% 4.55%, 99.34% 9.09%, 98.51% 13.64%, 100.00% 18.18%, 99.72% 22.73%, 99.34% 27.27%, 99.97% 31.82%, 98.72% 36.36%, 100.00% 40.91%, 99.48% 45.45%, 99.59% 50.00%, 100.00% 54.55%, 100.00% 59.09%, 100.00% 63.64%, 98.38% 68.18%, 99.46% 72.73%, 99.47% 77.27%, 98.24% 81.82%, 100.00% 86.36%, 100.00% 90.91%, 98.99% 95.45%, 100.00% 98.55%, 96.15% 98.76%, 92.31% 99.08%, 88.46% 98.88%, 84.62% 98.59%, 80.77% 99.34%, 76.92% 100.00%, 73.08% 99.99%, 69.23% 100.00%, 65.38% 99.66%, 61.54% 98.62%, 57.69% 100.00%, 53.85% 99.72%, 50.00% 99.56%, 46.15% 98.60%, 42.31% 99.36%, 38.46% 99.03%, 34.62% 99.92%, 30.77% 98.73%, 26.92% 98.87%, 23.08% 100.00%, 19.23% 98.45%, 15.38% 99.30%, 11.54% 99.22%, 7.69% 99.34%, 3.85% 99.24%, 0.85% 100.00%, 1.56% 95.45%, 0.53% 90.91%, 0.04% 86.36%, 1.46% 81.82%, 0.00% 77.27%, 1.78% 72.73%, 1.28% 68.18%, 0.99% 63.64%, 0.53% 59.09%, 0.00% 54.55%, 0.27% 50.00%, 0.32% 45.45%, 1.53% 40.91%, 1.47% 36.36%, 1.05% 31.82%, 1.36% 27.27%, 0.00% 22.73%, 1.63% 18.18%, 0.78% 13.64%, 1.43% 9.09%, 0.19% 4.55%);
transform:translate3d(0,var(--ty,0px),0);
transition:transform .34s var(--ease);
}
.stub__tier{font:600 clamp(15px,1.55vw,21px)/1.15 var(--body); letter-spacing:.13em;
text-transform:uppercase; color:var(--text); margin:0}
.stub__head{display:flex; justify-content:space-between; align-items:center; gap:12px}
.stub__amt{
font-family:var(--display); font-weight:400;
font-size:clamp(54px,7.1vw,96px); line-height:.38; letter-spacing:.02em;
margin:clamp(10px,1.4vw,16px) 0 0 -.06em; /* the $ hangs into the padding */
color:var(--ink);
}
.stub__amt sup{font-size:.36em; vertical-align:.9em; letter-spacing:0; margin-right:.04em}
.stub__ea{font:500 12px/1 var(--body); letter-spacing:.16em;
text-transform:uppercase; color:var(--text-3); margin-left:.5em; vertical-align:.42em}
.stub__note{font:400 15px/1.5 var(--body); color:var(--text-2); margin:clamp(10px,1.2vw,16px) 0 0}
.stub .ticket{margin-top:clamp(14px,1.8vw,22px); pointer-events:none}
/* the recommendation is larger and sits lower; the accent is a torn strip
of colour across the head rather than a rule on a box */
.stub--pick .stub__amt{font-size:clamp(60px,7.9vw,108px)}
.stub--pick::before{
content:""; position:absolute; left:0; right:0; top:0;
height:clamp(7px,.8vw,10px); background:var(--orange);
}
/* ONE hover for the whole card. The ticket used to be its own link inside
the card, so the card lifted and then the ticket tilted separately as
the cursor crossed it — two animations for one target. The ticket is now
inert markup (pointer-events:none above) and the card drives both. */
@media (hover:hover){
.stub:hover{--ty:-5px}
.stub:hover .ticket{--rot:-3.4deg; --ty:-3px}
}
.stub:focus-visible{outline:3px solid var(--orange); outline-offset:4px}
@media (max-width:720px){
.stubs{grid-template-columns:minmax(0,1fr); align-items:stretch}
}
/* ============================================================
RISO CALENDAR
============================================================ */
/* --- the white sheet ------------------------------------------------
The calendar prints on white stock, not on the page ground — it is the
one surface on the site that inverts. Everything inside it therefore has
to stop inheriting the dark-ground colours, including the .band--ink
overrides further down this file, which is why .sheet re-states them. */
.sheet{
background:var(--ink); color:var(--on-accent);
padding:clamp(16px,2.2vw,30px);
}
.sheet .kicker,.sheet .tiny{color:rgba(17,17,16,.62)}
.cal{
width:100%; border-collapse:collapse; table-layout:fixed;
--cal-pad-x:8px; --cal-pad-y:9px;
/* How far a label is pushed down in a square that has a picture in it.
Deliberately SHORTER than the picture: the label is meant to come
down over the bottom of the photograph like a caption stuck on it,
which is both what a collage does and what stops a square from
reading as three things stacked with air between them. */
--pinband:58px;
/* Space held at the foot of every square for the tape lanes. Sized to
the tallest case — a two-line gold strip on lane 1 over a thin navy
one on lane 0 — because a strip is positioned from the bottom and
ignores padding, so this is the only thing keeping a label off it. */
--laneband:86px;
/* pins are authored at a desktop size and scaled from there, so one
number per breakpoint moves all of them together */
--pin-scale:1;
}
.cal th{
font:500 10px/1 var(--body); text-transform:uppercase; letter-spacing:.19em;
color:var(--text-3); padding:0 0 12px; text-align:left; font-weight:500;
}
/* Taller than it was, and with a floor under it. The month used to hold
one painted square and a lot of white; it now holds a sticker stacked
over two strip lanes.
The bottom padding is the important part. A strip is positioned from
the PADDING box, so it ignores padding and stays pinned to the bottom
of the square — which means padding-bottom is free space that the
sticker above cannot grow into, and the cell grows downward instead of
the two colliding. Without it, Oct 4 (a sticker AND both lanes) put
"Landmark CU Live" underneath the Octoberfest tape. The value is the
two lanes plus a little air: 7 + 26 + 23 = 56, rounded up. */
.cal td{
border-top:1px solid var(--rule); height:clamp(230px,15.5vw,240px);
vertical-align:top;
padding:var(--cal-pad-y) var(--cal-pad-x) var(--laneband);
position:relative; overflow:visible;
}
/* display:block on purpose. As an inline span the numeral's line box was
set by the CELL's inherited line-height rather than its own, so it
occupied 29px in flow while reading as 15px — and every label below it
inherited that 14px of invisible slack. As a block it is exactly its
own line-height, which is what --pinband is measured against. */
.cal .dnum{
display:block; font-family:var(--display); font-size:33px;
letter-spacing:.03em; color:var(--text-3); line-height:.455;
}
.cal td.has .dnum{color:var(--ink)}
.cal .evt{
display:block; margin-top:7px; font:500 11px/1.35 var(--body);
text-transform:uppercase; letter-spacing:.07em; color:var(--ink); text-decoration:none;
}
.cal .evt em{display:block; font-style:normal; color:var(--text-3); letter-spacing:.13em; font-size:9.5px; margin-top:2px}
.cal .evt--ours{color:var(--orange); font-weight:700}
/* the hand-drawn "must go" ring — other people's events only */
.cal .must{position:absolute; left:2%; top:6%; width:96%; height:88%; pointer-events:none; overflow:visible}
.cal .must path{fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; opacity:.85}
/* ── THE COLLAGE LAYER ───────────────────────────────────────────────
Somebody else's event is a sticker, not a table row: a small label
with a die-cut border, tilted a degree or two and dropped a hair off
the page, the way one actually sits on a calendar pinned to a wall.
The tilt is authored per event in bss.js and pinned, for the same
reason the torn edge is pinned — an angle that re-rolls on every
navigation reads as a rendering bug rather than a hand.
transform-origin sits at the left edge, not the centre: these are
narrow cells, and rotating about the middle walks the right-hand end
of a sticker into the next square. */
.cal .stick{
/* Sized to its own words, but capped at roughly its own square. A long
name STACKS — the same treatment the name on our own date gets —
rather than running out across the week. Allowed to run wide it was
legible as a line and illegible as a grid: three squares of pale
blue lying over other people's dates read as a banner across the
calendar rather than as a note on one day. */
position:relative; z-index:2; display:block; margin-top:8px;
width:max-content; max-width:116%;
padding:5px 7px 6px; border:2px solid var(--stick-edge); border-radius:3px;
transform:rotate(var(--tilt,0deg)); transform-origin:8% 50%;
box-shadow:0 1px 0 rgba(17,17,16,.22), 0 3px 7px rgba(17,17,16,.13);
}
.cal .stick b{
display:block; font:700 14px/1.12 var(--body);
text-transform:uppercase; letter-spacing:.03em;
}
/* The venue goes into the handwriting — short, an aside, which is the
only thing the script face is for. The NAME stays in label type on
purpose: the one name on this calendar written by hand is Haunted Bar
Hop, and it stops being a signal the moment four others join it. */
.cal .stick em{
display:block; font-style:normal; font-family:var(--script);
font-size:17px; line-height:1.05; margin-top:3px;
color:rgba(17,17,16,.74);
}
.cal .stick--sky {background:var(--stick-sky); color:var(--on-accent)}
.cal .stick--lime {background:var(--stick-lime); color:var(--on-accent)}
.cal .stick--gold {background:var(--stick-gold); color:var(--on-accent)}
.cal .stick--blush{background:var(--stick-blush); color:var(--on-accent)}
.cal .stick--navy {background:var(--stick-navy); color:#FFFDF7}
.cal .stick--navy em{color:rgba(255,253,247,.82)}
/* ── THE PASTED-ON PICTURES ──────────────────────────────────────────
Real die-cut stickers, laid in the square at an angle. Each one is
authored with its own x / y / size / rotation in MONTH (bss.js) so no
two sit the same way — a uniform grid of pictures is a sticker SHEET,
and the thing being imitated is a sticker sheet that has been used.
THE DAY NUMERAL ALWAYS WINS. It is the one piece of information a
calendar exists to carry, and it is drawn at a fixed 33px at every
width — so as the column narrows the numeral does NOT, and a pin
placed by percentage walks straight into it. Two defences, because
one is not enough:
1. Geometry. Every pin is authored at x >= 34%, and below 760px
the percentage is abandoned altogether for centred-under-the-
numeral (see the narrow-column block further down), which is the
only placement that still clears a 45px column.
2. Order. The numeral is z-index 6, above every pin, every label
and every strip, so even a pin dropped in at a bad x stays
behind the date rather than on top of it.
The drop shadow does the separating, not the die-cut border: these
sit on a near-white sheet and three of the four are outlined in
white, so their own edge disappears into the paper. */
.cal .pin{
position:absolute; z-index:1;
left:var(--sx); top:var(--sy);
width:calc(var(--ss) * var(--pin-scale)); height:auto;
/* The sheet-wide `img{max-width:100%}` applies here too, and a pin's
containing block is ONE SQUARE — so every picture was being quietly
clamped to its column the moment the authored size passed it, which
is most of them below about 1200px and all of them on a phone. That
is not a safety net for these: overrunning the square is the whole
idea, and the clamp was what made a 99px sticker render at 48px. */
max-width:none;
transform:rotate(var(--tilt,0deg)); transform-origin:50% 88%;
filter:drop-shadow(0 2px 3px rgba(17,17,16,.30));
pointer-events:auto;
}
/* Anchored to the bottom of the square instead of hanging from the top.
This is what sets the Brewers glove down ON the playoff strip: --sy is
read as a distance up from the bottom rule, small enough that the
glove and the tape overlap, so the two read as one object rather than
a picture that happens to be in the same week.
z-index 4 puts it above the strips (3) — a glove the tape was drawn
over would look like a printing mistake rather than a sticker. */
.cal .pin--bottom{top:auto; bottom:var(--sy); z-index:4}
/* Hung off the right edge of its square instead of the left, so it
overruns backwards. The only way a mark wider than a column can sit
in the last column of a week without running off the sheet. */
.cal .pin--right{left:auto; right:var(--sx)}
/* The loose tickets: the homepage curtain's own silhouette, at confetti
size. A wrapping an