@property --rot{syntax:"";inherits:false;initial-value:0deg} @property --pat-rot{syntax:"";inherits:false;initial-value:0deg} /* ========================================================================== Fenian's Pub — v2.1 "Snug Collage" Right angles, imperfect shards, lead lines, dirt, frosted stained glass. Colour sampled from the window. Type from Typekit kit luu5kja only. ========================================================================== */ /* ---------- metric-matched fallbacks (22 Sep) ---------------------------- The kit is font-display:auto (the kit project sets that, not this sheet), so text is held for up to 3 seconds and then paints in whatever is next in the stack. Measured on the phone profile the kit lands at 9.5s, so there is a long stretch in Impact and Georgia, and the moment the real face arrives every line re-wraps: that swap is the WHOLE of this site's layout shift (About 0.066 at 4.15s, the hero box 461->458px and the section under it moving 51px; Menu 0.043 on the tab panel; pub-life 0.027 on the hero plate). Each rule below is the same local font with size-adjust set so its average advance matches the kit face it stands in for, and ascent/descent overridden to that face's. Measured in the browser against the live kit (docs/tools/fontmetrics.py writes the numbers; re-run it if Opie republishes the kit). Nothing here touches the settled page: once the kit face is there it wins, and these only ever describe the wait. local() with no url(): if the machine has no Impact or Georgia the rule simply fails to match and the stack falls through to the plain name behind it, which is exactly what happens today. Nothing is downloaded. */ @font-face{font-family:"bourbon-fb";src:local("Impact");size-adjust:77.2%;ascent-override:129%;descent-override:15.8%;line-gap-override:0%} @font-face{font-family:"bourbon-lines-fb";src:local("Impact");size-adjust:77.2%;ascent-override:129.1%;descent-override:15.5%;line-gap-override:0%} @font-face{font-family:"broadsheet-fb";src:local("Georgia");size-adjust:86.3%;ascent-override:124.2%;descent-override:37%;line-gap-override:0%} @font-face{font-family:"duality-steel-fb";src:local("Impact");size-adjust:97.5%;ascent-override:108.1%;descent-override:24.5%;line-gap-override:0%} @font-face{font-family:"gastromond-fb";src:local("Georgia");size-adjust:117.6%;ascent-override:97.1%;descent-override:20.6%;line-gap-override:0%} :root{ /* ---- the palette, and only the palette ---------------------------- Adobe Color "FENIAN'S UPDATED", 20 September. Source of truth: C:\fenians\LOGOS\AdobeColor FENIAN'S UPDATED.ase (six swatches). Every other colour on this sheet is one of these six, an alpha of one of them. Nothing else goes in. */ --c-green:#058646; --c-cream:#f2e2d3; --c-teal:#226f7c; --c-orange:#b04900; --c-red:#740001; --c-black:#1f1d1d; /* Role names the stylesheet already speaks, aliased onto the six. The old three-step ramps (gold/bright/deep, green/glass/deep) collapse to one swatch each; the names stay so nothing downstream has to move. */ --cream:var(--c-cream); --cream-2:var(--c-cream); --paper:var(--c-cream); --gold:var(--c-orange); --gold-bright:var(--c-orange); --gold-deep:var(--c-orange); --green:var(--c-green); --green-glass:var(--c-green); --green-deep:var(--c-green); --ruby:var(--c-red); --ruby-bright:var(--c-red); --lead:var(--c-black); --came:var(--c-teal); --oak:var(--c-teal); /* both unused */ --night:var(--c-black); --ink:var(--c-black); /* The box surface. Opie, 20 September: no box on this site is black or grey — the black is the page behind them and nothing else. Teal is the swatch with no other job, and it is the one cool value in a warm set. */ --stock:var(--c-teal); --smoke:rgba(242,226,211,.66); --smoke-2:rgba(242,226,211,.4); --f-wood:"bourbon","bourbon-fb",Impact,sans-serif; /* set oblique on .wood */ --f-wood-lines:"bourbon-lines","bourbon-lines-fb",Impact,sans-serif; --f-tape:"broadsheet","broadsheet-fb",Georgia,serif; /* tape captions + the nav */ --f-sub:"duality-steel","duality-steel-fb",Impact,sans-serif; /* sub- and pre-headings */ --track-wood:.045em; /* Bourbon sets tight; open it up */ --f-fat:"gastromond","gastromond-fb",Georgia,serif; --f-did:"essonnes-headline",Georgia,serif; --f-body:"mrs-eaves",Georgia,serif; --f-sc:"mrs-eaves-roman-small-caps","mrs-eaves",Georgia,serif; --f-type:"de-walpergens-pica","Courier New",monospace; --f-num:"ratiomodern","Arial Narrow",sans-serif; --f-item:"broadsheet","broadsheet-fb",Georgia,serif; /* menu item names (Opie, 21 Sep) */ --max:1360px; --sh-w:6px; --rot-max:1.45; --pat-w:160px; --pat-rot-max:15; --pat-opacity:.3; --pat-src:url("../img/tex/seamless-01-dark.svg"); --gut:clamp(18px,3vw,44px); --nav-h:74px; --ease:cubic-bezier(.22,.8,.26,1); --snap:cubic-bezier(.2,1.4,.4,1); --out:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} /* Shift+Tab scrolls the stop it lands on to the top of the scrollport, which is under the fixed .nav (height --nav-h). Measured 23 Sep: pub-life's "Back to About Fenian's" and the Events hero pause button landed completely behind the bar, focus ring and all, on four pages at 1440 and three at 390 (WCAG 2.4.11). scroll-padding shrinks the scrollport for scroll-into-view only — it moves no box and changes no page height. It also lands the skip link's #main and every "Book a table" #book below the bar instead of under it. */ html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)} body{margin:0;background:var(--night);color:var(--cream);font:400 19px/1.6 var(--f-body);overflow-x:hidden;position:relative} /* body::before was a fixed full-viewport dirt-03 layer blended with SCREEN. The Dirt-01 art is pure black with an alpha mask, and screen(backdrop, black) is the backdrop, so it painted nothing on any page and the compositor carried it on every scroll. Cut 22 Sep, pixel-diffed at five scroll positions on four pages: 0 changed pixels. Verbatim in docs/REMOVED-2026-09-22.md. */ body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(0,0,0,.55))} body > *,body > main > *{position:relative;z-index:1} /*
wraps each page's body (build.py page(), verify 21 Sep: the skip link's target and the page's main landmark). It must not become a stacking context, or the Store's drawer (z 95) would sit inside it, under the nav (z 90); static, its children stack against the nav, overlay and drawer exactly as they did as body's own children. No ring round the whole page when the skip link lands. */ body > main{position:static;z-index:auto} main:focus{outline:none} /* #book (the footer) carries tabindex="-1" since 22 Sep so a click on any "Book a table" hands the keyboard its place; measured before, focus fell back to and the next Tab restarted at the top of the page. Same treatment as
above: a destination, not a control, so no ring. */ .footer:focus{outline:none} /* The skip link: first stop on every page, out of sight until a keyboard lands on it; then it sits over the nav's top-left corner. */ .skip{position:fixed;left:var(--gut);top:10px;z-index:120;translate:0 calc(-100% - 24px); font-family:var(--f-tape);text-transform:uppercase;letter-spacing:.1em;font-size:14px;line-height:1; background:var(--c-cream);color:var(--c-black);padding:12px 18px;border:2px solid var(--c-black); box-shadow:var(--sh-w) var(--sh-w) 0 var(--c-orange)} .skip:focus{translate:none} .skip:focus-visible{outline-color:var(--c-cream)} /* it sits over the hero: the cream ring, as the nav's */ img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px} /* WCAG 1.4.11 (verify, 21 Sep): the orange ring measured 1.05-2.4:1 wherever it is drawn over a coloured box (teal, green, red, and the boxes' own orange shadows) and 2.6-3:1 over the hero footage. There it is cream, as the pinned quote's toggle already was; it stays orange on the page black (3.0:1) and on the paper and cream stock (4.8:1). */ .shard :focus-visible,.shard:focus-visible,.glass :focus-visible,.drawer :focus-visible, .nav :focus-visible,[data-hero-video] :focus-visible,.overlay :focus-visible{outline-color:var(--c-cream)} .shard.cream :focus-visible,.paper :focus-visible{outline-color:var(--gold-bright)} ::selection{background:var(--ruby);color:var(--cream)} p{margin:0 0 1.1em} /* ---------- type ---------- */ /* Bourbon Oblique for the face, Bourbon Oblique Lines for the drop — the two layers of the same family, so they set and wrap identically and the drop is just the same string behind the face. Opie, 20 September. The drop is FLAT --c-orange. No opacity, no blend, no mix, no second text-shadow. If it does not measure #b04900 on screen, something has been added that should not be there. Offset: --drop-o. The page heroes keep the full --sh-w; every other headline runs at a third of it, which is what Opie asked for after the 6px drop started crowding the eyebrows and body copy under it. */ .wood{--face:var(--cream);--drop-o:var(--sh-w); font-family:var(--f-wood);letter-spacing:var(--track-wood);font-style:italic;font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:var(--track-wood);position:relative;display:inline-block;color:var(--face);margin:0} .wood::before{content:attr(data-text);position:absolute;left:var(--drop-o);top:var(--drop-o);width:100%;z-index:-1; font-family:var(--f-wood-lines);font-style:italic;color:var(--c-orange);opacity:1} .wood.ink{--face:var(--c-black)} /* everything that is not a page hero */ .h-md,.h-sm,.card .wood,.break .wood,.sec-head .wood{--drop-o:2px} .type{font-family:var(--f-type);text-transform:uppercase;letter-spacing:.08em;font-size:14px;line-height:1.3} h1,h2,h3,h4{margin:0} .h-md{font-size:clamp(32px,4.4vw,64px)} .h-sm{font-size:clamp(24px,2.6vw,36px)} .kick{font-family:var(--f-sub);font-size:clamp(22px,2.6vw,34px);letter-spacing:.03em;color:var(--cream);display:block;margin-bottom:6px} .lede{font-size:clamp(19px,1.6vw,23px);color:var(--smoke);max-width:56ch;line-height:1.5} .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)} .sec{padding:clamp(70px,9vw,140px) 0;position:relative;overflow-x:clip} /* overflow-x:clip on every section (integration, 21 Sep): whatever hangs past a box (the Blog photo's EST stamp, right:-30px; a tape at left:-20px) stops at the viewport edge instead of widening a phone's layout (the Blog laid out 398-405px wide at 390). fx-boxes already added the same clip at runtime (.fx-bx-clipx) to any section holding a box group; this makes it true with no JS, reduced motion and ?static too. clip, not hidden: no scroll container, so position:sticky inside (the calendar detail, the post glossary) still works, and vertical overhangs stay. */ /* The section head owns its seeded tilt (it is in ROT_SEL). It used to reach it only through .rv, whose resting transform is translateY(0) rotate(--rot); the motion pass took .sec-head off .rv (fx-type reveals the title instead of the block rising), so the rest state is stated here. Same angle as before. */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,60px);transform:rotate(var(--rot,0deg))} .mark{position:relative;white-space:nowrap} .mark::after{content:"";position:absolute;left:-2%;right:-3%;bottom:.04em;height:.28em;background:var(--gold);z-index:-1;transform:rotate(var(--rot,0deg));opacity:.9} .mark.green::after{background:var(--green-glass)} /* ---------- collage bits ---------- */ .tape{display:inline-block;font-family:var(--f-tape);text-transform:uppercase;letter-spacing:.06em;font-size:13px;line-height:1;background:rgba(242,226,211,.88);color:var(--ink);padding:9px 16px;transform:rotate(var(--rot,0deg));box-shadow:0 2px 6px rgba(0,0,0,.35);position:relative;z-index:2} .tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:8px;background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(0,0,0,.08) 3px 5px)} .tape::before{left:0}.tape::after{right:0} .tape.gold{background:var(--gold)} .tape.ruby{background:var(--ruby);color:var(--cream)} .tape.green{background:var(--green);color:var(--cream)} .stamp{width:118px;height:118px;border-radius:50%;border:3px double var(--ruby-bright);color:var(--ruby-bright);display:grid;place-items:center;text-align:center;font-family:var(--f-type);text-transform:uppercase;font-size:11px;letter-spacing:.14em;line-height:1.1;transform:rotate(var(--rot,0deg));opacity:.92;position:relative;padding:12px;overflow:hidden} /* .stamp::after was dirt-05 blended with SCREEN over black art: invisible. Cut 22 Sep (docs/REMOVED-2026-09-22.md). dirt-05.png is now referenced by nothing. */ .stamp b{font-family:var(--f-wood);letter-spacing:var(--track-wood);font-size:30px;display:block;letter-spacing:.02em} .sticker{display:inline-grid;place-items:center;text-align:center;padding:14px 18px;background:var(--gold-bright);color:var(--cream);font-family:var(--f-wood);letter-spacing:var(--track-wood);text-transform:uppercase;font-size:22px;line-height:.95;border:2px solid var(--lead);box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead);transform:rotate(var(--rot,0deg))} .sticker.ruby{background:var(--ruby);color:var(--cream)} /* ---------- shard panels ---------- */ .shard{position:relative;background:var(--stock);color:var(--cream);--smoke:var(--c-cream);border:2px solid var(--lead);box-shadow:var(--sx,var(--sh-w)) var(--sy,var(--sh-w)) 0 var(--sh,var(--gold));transform:rotate(var(--rot,0deg))} /* No image here since 22 Sep: the base rule's dirt-07 was blended with SCREEN over black art, i.e. invisible on every .shard on the site. The rule stays because the two modifiers below DO paint (multiply) and inherit its box, position, size and repeat. Give any new modifier its own background-image. */ .shard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-position:center;background-size:900px;background-repeat:repeat;mix-blend-mode:multiply} /* :where() so this carries no specificity — a tape or sticker that sets its own z-index keeps it. At (0,1,1) this beat .tape{z-index:2} and every label overhanging a photo slid behind it. */ :where(.shard) > :where(:not(.pat)){position:relative;z-index:1} /* seamless shamrock pattern — one layer per box, no image inside. .pat is injected by site.js (see PAT_SEL); it clips itself so the box can keep overflow:visible and its stickers can still peek out. The tile is the black copy of the shamrock, blended soft-light. Soft-light shifts lightness and leaves hue alone, so the motif comes out a shade of whatever the box already is — lighter green on green, lighter ruby on ruby — instead of a grey stamped on top. One flat file drawn with background-image. It was written as one file under a CSS mask first and that worked, but mask-image on an SVG is newer than this site needs to be, and where it is missing the layer vanishes completely with nothing to see. Knobs: --pat-w, --pat-opacity, --pat-src. */ .has-pat{position:relative} .pat{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit} .pat::before{content:"";position:absolute;inset:-60%; background:var(--pat-src) 0 0/var(--pat-w) auto repeat; transform:rotate(var(--pat-rot,0deg)); mix-blend-mode:soft-light;opacity:var(--pat-opacity)} /* Direction. Every stock Opie set reads as a motif a shade DARKER than the field. So the dark copy is the only one used; there is no light copy any more. Strength varies by stock: see the two overrides under this rule. */ /* Strength. Soft-light bites far harder on a light field than a dark one — the same opacity that is a whisper on the green panel is mottling on the paper — so the pale stock runs at about a third. */ /* Dark saturated stock carries it heavier than anything else at the same number — the shaded motif goes almost black. Opie took 25% off the green and the red; the teal box stock is the same condition and is eased with them. This rule sits FIRST: it and the pale rule below have equal specificity, so the pale stock has to win on source order or a cream shard takes .225. */ .shard,.grn,.rby,.shard.green,.shard.ruby{--pat-opacity:.225} .cream,.gold,.paper,.card{--pat-opacity:.11} /* Lift the content off the pattern layer. Written with :where() so this carries ZERO specificity: a tape, sticker or stamp that sets its own z-index keeps it. Without that, this rule beat .tape{z-index:2} and every label that overhangs a photo slid behind it — the crew cards were the visible case, but it applied to every tape and sticker on the site. */ :where(.has-pat) > :where(:not(.pat)){position:relative;z-index:1} .shard.ruby{--sh:var(--ruby)} .shard.green{--sh:var(--green-glass)} .shard.cream{background:var(--paper);color:var(--ink);--sh:var(--lead)} .shard.cream::after{background-image:url("../img/tex/dirt-01.webp");mix-blend-mode:multiply;opacity:.35} .shard.gold{background:var(--gold);color:var(--cream);--sh:var(--lead)} /* dirt-07 spelled out here since 22 Sep: it used to be inherited from .shard::after, which no longer carries an image. This is the one place on the site the file shows. */ .shard.gold::after{background-image:url("../img/tex/dirt-07.webp");mix-blend-mode:multiply;opacity:.25} .shard.grn{background:var(--green);--sh:var(--gold)} .shard.rby{background:var(--ruby);--sh:var(--gold-bright)} /* glass — frosted, tinted, stained */ .glass{position:relative;color:var(--cream);background:linear-gradient(135deg,rgba(176,73,0,.22),rgba(5,134,70,.24) 55%,rgba(116,0,1,.18)),rgba(34,111,124,.34);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(242,226,211,.42);box-shadow:inset 0 1px 0 rgba(242,226,211,.35),inset 0 -1px 0 rgba(0,0,0,.35),var(--sh-w) var(--sh-w) 0 rgba(31,29,29,.7)} /* -faint: the 1280px copy webimg.py writes. The mosaic is drawn here at 16% opacity through `overlay`, so the full 1920px plate was 8x the file for a difference no one can see (SSIM 0.98 at full strength, far above that at 16%). */ .glass::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background:url("../img/tex/glass-brown-faint.webp") center/900px} /* .glass::after was dirt-09 blended with SCREEN over black art: invisible. Cut 22 Sep (docs/REMOVED-2026-09-22.md). dirt-09 still shows on .prod .art, multiply. */ :where(.glass) > :where(:not(.pat)){position:relative;z-index:1} .glass.green{background:linear-gradient(135deg,rgba(5,134,70,.28),rgba(5,134,70,.42)),rgba(34,111,124,.34)} .glass.green::before{background-image:url("../img/tex/glass-green-faint.webp")} .glass.amber{background:linear-gradient(135deg,rgba(176,73,0,.32),rgba(116,0,1,.22)),rgba(34,111,124,.34)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-wood);letter-spacing:var(--track-wood);text-transform:uppercase;font-size:22px;letter-spacing:.05em;line-height:1;color:var(--cream);background:var(--gold-bright);padding:16px 26px 14px;border:2px solid var(--lead);box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead);transition:transform .15s var(--snap),box-shadow .15s;position:relative} .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead)} .btn:active{transform:translate(4px,4px);box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead)} .btn--ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold)} .btn--ghost:hover{box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold)} .btn--sm{font-size:18px;padding:12px 18px 10px;box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead)} .link{font-family:var(--f-type);text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--cream);border-bottom:2px solid var(--gold-bright);padding-bottom:2px} .link:hover{color:var(--cream);border-color:var(--cream)} /* ========================================================================== NAV ========================================================================== */ .nav{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);display:flex;align-items:center;transition:.35s} .nav.is-solid{background:rgba(31,29,29,.88);border-bottom:2px solid var(--lead);box-shadow:0 var(--sh-w) 0 var(--gold)} /* The open overlay is taller than a phone (and a 768 tablet), so it scrolls, and at the top of a page the nav is clear: the tiles slid under the logo and it printed over them. The nav wears its own scrolled bar while the menu is open (the same three values; fx.css html.hv-nav repeats them too). */ .menu-open .nav{background:rgba(31,29,29,.88);border-bottom:2px solid var(--lead);box-shadow:0 var(--sh-w) 0 var(--gold)} .nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px} .nav-brand{display:flex;align-items:center;min-width:0} .nav-brand img{height:42px;width:auto;max-width:100%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))} .nav-links{display:flex;gap:6px;justify-content:center} .nav-links a{font-family:var(--f-tape);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);padding:9px 12px;border:2px solid transparent;transition:.15s} .nav-links a:hover{border-color:var(--cream);transform:rotate(var(--rot,0deg))} .nav-links a.is-current{background:var(--cream);color:var(--ink);border-color:var(--lead);box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold);transform:rotate(var(--rot,0deg))} .nav-right{display:flex;justify-content:flex-end;align-items:center;gap:12px} /* The properties are named one by one because `all` also tweens `visibility`, and the bag drawer's close button wears this same class. .drawer.is-open flips that button's inherited visibility; a discrete transition only flips at the half-way point, so the focus() call openDrawer() makes in the same task landed on a button still computing visibility:hidden and did nothing (measured 23 Sep: activeElement stayed on ). ?static hid it for a whole pass because html.static kills transitions. Only :hover animates here, transform and box-shadow, so naming the list moves nothing. */ .burger{width:46px;height:46px;border:2px solid var(--cream);display:grid;place-items:center;background:var(--c-orange);box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold);transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s,color .15s} .burger:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold)} .burger span{display:block;width:20px;height:3px;background:var(--cream);position:relative;transition:.3s} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:3px;background:var(--cream);transition:.3s} .burger span::before{top:-7px}.burger span::after{top:7px} .menu-open .burger span{background:transparent} .menu-open .burger span::before{top:0;transform:rotate(45deg)} .menu-open .burger span::after{top:0;transform:rotate(-45deg)} .overlay{position:fixed;inset:0;z-index:80;background:rgba(31,29,29,.94);padding:calc(var(--nav-h) + 20px) var(--gut) 40px;opacity:0;visibility:hidden;transition:.35s;overflow:auto} /* The texture is on .menu-open, not on .overlay, since 22 Sep. The CLOSED overlay sits in every page's markup, so the old rule downloaded a 1.12 MB stained-glass plate on every first load for a layer nobody sees until they tap the burger — a third of the whole landing page. Same picture, same 12%, fetched when the menu opens; it is the faint 1280px copy because 12% cannot tell the difference. */ .overlay::before{content:"";position:absolute;inset:0;background-position:center;background-size:cover;opacity:.12;pointer-events:none} .menu-open .overlay::before{background-image:url("../img/tex/glass-brown-faint.webp")} .menu-open .overlay{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s} /* visible at once on the way in, so site.js can put focus on the first tile; it still fades */ .overlay .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;grid-auto-rows:minmax(140px,auto);position:relative} .ov-tile{padding:24px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:transform .45s var(--snap),opacity .4s} .ov-tile{transform:translateY(30px) rotate(var(--rot,0deg))} .menu-open .ov-tile{transform:translateY(0) rotate(var(--rot,0deg));opacity:1} .menu-open .ov-tile:nth-child(2){transition-delay:.05s}.menu-open .ov-tile:nth-child(3){transition-delay:.1s}.menu-open .ov-tile:nth-child(4){transition-delay:.15s} .menu-open .ov-tile:nth-child(5){transition-delay:.2s}.menu-open .ov-tile:nth-child(6){transition-delay:.25s}.menu-open .ov-tile:nth-child(7){transition-delay:.3s} .ov-tile .n{font-family:var(--f-wood);letter-spacing:var(--track-wood);font-size:clamp(34px,4.6vw,66px);text-transform:uppercase;line-height:.9} .ov-tile .s{font-family:var(--f-type);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:8px} .ov-tile .idx{position:absolute;top:14px;left:18px;font-family:var(--f-type);font-size:12px;letter-spacing:.2em} /* B12, 21 Sep (Opie's marked-up screenshot: "five full sized boxes and the two half sized"). Desktop, 6 columns: About 2x2, Menu / Events / Store 2 each, Blog and Home 1 each, then ONE Find us + Hours box across the whole grid. At <=1100px (tablet and phone) 2 columns: full tiles span both, the two half tiles one each, so Blog and Home stay side by side at every width. */ .ov-tile.big{grid-column:span 2;grid-row:span 2}.ov-tile.wide{grid-column:span 2}.ov-tile.half{grid-column:span 1} /* a half tile is narrow enough on a phone for its line to wrap and push the name up into the idx label: keep the name clear of it */ .ov-tile.half{padding-top:40px} .ov-tile.info{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:start;justify-content:stretch;font-size:15px;line-height:1.5} /* Find us beside Hours, split by the same rule that sits under "Book a table" (.link: 2px solid --gold-bright). Vertical between the columns; on a phone the hours rows do not fit beside the address, so the two stack and the rule turns horizontal (RESPONSIVE, <=560px). */ .ov-tile.info .ov-col{min-width:0;padding-right:clamp(18px,3vw,40px)} .ov-tile.info .ov-col + .ov-col{border-left:2px solid var(--gold-bright);padding-left:clamp(18px,3vw,40px);padding-right:0} .ov-tile.info strong{font-family:var(--f-type);letter-spacing:.14em;text-transform:uppercase;font-size:12px;display:block;margin-bottom:6px;color:var(--cream)} /* ========================================================================== HERO — the window you light ========================================================================== */ .hero{min-height:min(100svh,980px);position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--nav-h) + 20px) 0 70px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center} .hero-mosaic{position:absolute;left:-10%;right:-10%;bottom:-20%;height:60%;z-index:-1;opacity:.35;background:url("../img/tex/glass-brown.webp") center/1200px;transform:rotate(var(--rot,0deg));mix-blend-mode:overlay;-webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:center;position:relative} .stack{position:relative;width:min(640px,92%);aspect-ratio:1116/944;margin:0 auto;transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s linear;will-change:transform;--mx:50%;--my:45%} .stack.is-idle{transition:transform 1.2s var(--out)} .stack > img,.stack > .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none} .stack .dark{filter:brightness(.38) saturate(.55) contrast(1.1);transform:translateZ(0)} .stack .lit{transform:translateZ(38px);-webkit-mask:radial-gradient(circle 190px at var(--mx) var(--my),#000 0,#000 45%,transparent 100%);mask:radial-gradient(circle 190px at var(--mx) var(--my),#000 0,#000 45%,transparent 100%);filter:drop-shadow(0 0 30px rgba(176,73,0,.55))} .stack .sheen{transform:translateZ(60px);background:linear-gradient(115deg,transparent 30%,rgba(242,226,211,.28) 46%,rgba(242,226,211,.05) 50%,transparent 62%);background-size:220% 100%;background-position:calc(var(--mx) * 1.4) 0;-webkit-mask:url("../img/web/logo-mask-700.webp") center/contain no-repeat;mask:url("../img/web/logo-mask-700.webp") center/contain no-repeat;opacity:.8} .stack .shadow{position:absolute;left:8%;right:8%;bottom:-8%;height:14%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.7),transparent 70%);transform:translateZ(-40px)} .hero-copy{position:relative;z-index:2;margin-left:-8%} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hero-copy .wood{font-size:clamp(64px,9.2vw,150px);transform:rotate(var(--rot,0deg));transform-origin:left bottom;display:block;width:max-content} .hero-copy .line1{margin-left:6%} .hero-copy .line2{margin-left:14%} .hero-copy .tape{position:relative;display:block;width:max-content;max-width:100%;margin:26px auto 0;--rot:-1.45deg;font-size:16px;padding:12px 20px;text-align:center} .hero-cta{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;margin-left:6%} .btn{transform:rotate(var(--rot,0deg))} .hero-cta .btn:hover{transform:translate(-2px,-2px) rotate(0)} .hero-meta{position:absolute;bottom:26px;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);font-family:var(--f-type);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)} /* was --smoke-2: 2.9:1 over the B10 hero footage */ .hero-meta span:nth-child(2){grid-column:2;text-align:center} /* ========================================================================== BREAKS — mosaic band, frosted panel overlapping both neighbours ========================================================================== */ .break{position:relative;height:clamp(240px,40vh,420px);margin:-70px 0;z-index:3;pointer-events:none} .break .band{position:absolute;left:-6%;right:-6%;top:0;bottom:0;background:url("../img/tex/glass-brown.webp") center/1400px;transform:rotate(var(--rot,0deg));border-top:3px solid var(--lead);border-bottom:3px solid var(--lead);box-shadow:0 0 0 var(--sh-w) var(--gold-deep),0 24px 60px rgba(0,0,0,.6);will-change:transform} .break.green .band{background-image:url("../img/tex/glass-green.webp")} /* Phones take the 1280px copy of both mosaics (22 Sep). The band draws its texture at a 1400px tile inside a box that is 437px wide at 390, so under a third of the tile is ever on screen and the full 1920px plate is pixels the device cannot show: -183 KB (brown) and -139 KB (green) on the connection that can least afford them. The Blog's .hero-mosaic goes with them — it is the same file, drawn at 35% through `overlay` behind a gradient mask, and on a phone it was that page's LCP element at 14.5s. Desktop is untouched. This must stay AFTER the two rules above and after .hero-mosaic. */ @media(max-width:860px){ .break .band,.hero-mosaic{background-image:url("../img/tex/glass-brown-faint.webp")} .break.green .band{background-image:url("../img/tex/glass-green-faint.webp")} } /* B5: the band overhangs .break by 6% a side, which widened a 390px phone to 413px of scrollable page even under body{overflow-x:hidden}. THIS is the only copy of the rule (22 Sep: fx.css stated it identically; site.css keeps it because it covers every page whether or not fx.css loads). clip, not hidden: no scroll container, and the shadows still hang past vertically. */ .break{overflow-x:clip} .break .band::after{content:"";position:absolute;inset:0;background:url("../img/tex/dirt-11.webp") center/1200px repeat;mix-blend-mode:multiply;opacity:.4} .break .brk-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--rot,0deg));width:min(760px,86%);padding:clamp(24px,4vw,48px);pointer-events:auto;text-align:center} .break .brk-panel .wood{font-size:clamp(36px,5.4vw,80px)} .break .brk-panel p{margin:10px 0 0;color:var(--cream);font-family:var(--f-did);font-style:italic;font-size:clamp(18px,2vw,26px)} /* B5, 21 Sep: the tapes sit on the plaque's straight top and bottom runs, clear of the notched corners (the outer cut reaches .66 x --plq-b along the edge), and rest inside the 1.45deg ceiling. site.js never re-rolls them — their .break owns the seeded angle — so these ARE the resting angles (were -4 / 3). */ .break .brk-panel .tape{position:absolute;top:-16px;left:calc(var(--plq-b,64px) * .9);--rot:-1.4deg} .break .brk-panel .tape.r{left:auto;right:calc(var(--plq-b,64px) * .9);top:auto;bottom:-16px;--rot:1.2deg} /* ========================================================================== COLLAGE GRID (home) — imperfect boxes ========================================================================== */ .collage{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(120px,auto);gap:24px;position:relative} .collage > *{transition:transform .35s var(--snap)} /* The lift hovers (here, .ev and .prod) are for a pointer that hovers. On touch a tap leaves :hover stuck until the next tap elsewhere, so the box loses its seeded tilt and hangs 6px up. They were dead after the old rise-in reveal; the motion pass (21 Sep) brought them back. */ @media (hover:hover){.collage > *:hover{transform:rotate(0) translateY(-6px);z-index:4}} .c-tile{padding:58px 26px 26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;overflow:hidden;isolation:isolate} .c-tile img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.85) contrast(1.05)} .c-tile .scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(31,29,29,.05) 30%,rgba(31,29,29,.88))} .c-tile .t{font-family:var(--f-wood);letter-spacing:var(--track-wood);text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:.9} .c-tile .d{font-size:16px;color:var(--smoke);margin-top:8px;max-width:34ch;line-height:1.45} .c-tile .tape{position:absolute;top:14px;left:14px;z-index:2} .c-tile .sticker{position:absolute;top:14px;right:14px;z-index:2;font-size:16px;padding:10px 12px} .c-tile.cream .d{color:rgba(31,29,29,.72)} .c-tile.gold .d{color:rgba(242,226,211,.82)} .pour{margin:0;padding:0;font-family:var(--f-num);font-weight:500;text-transform:uppercase;letter-spacing:.06em} .pour li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:2px dotted rgba(242,226,211,.28);font-size:20px} .pour li:last-child{border:0} .pour b{font-weight:800;color:var(--cream)} .pour small{font-family:var(--f-type);font-size:11px;letter-spacing:.14em;opacity:.7} .hours{font-family:var(--f-wood);font-style:italic;font-weight:400;text-transform:uppercase;letter-spacing:var(--track-wood);font-size:17px;display:grid;grid-template-columns:auto 1fr;gap:3px 18px;margin:8px 0 0} .hours dt{color:var(--ruby)}.hours dd{margin:0} /* TWO SETS OF HOURS, side by side and labelled. A pub that prints one set sends somebody to the door at half nine for a plate the kitchen stopped serving at nine; this is the fix, and it is why the kitchen column comes first. Stacks under 600px, kitchen still first. */ .hours-card{max-width:780px;margin:0 auto 46px} .hours-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px clamp(20px,4vw,52px);margin-top:10px} .hours-h{display:block;font-family:var(--f-wood);letter-spacing:var(--track-wood);text-transform:uppercase; font-size:15px;color:var(--c-orange)} .hours-card .hours{margin-top:4px} .hours-late{margin:18px 0 0;max-width:58ch;color:rgba(26,21,16,.78);font-size:15px;line-height:1.5} .hours-late b{color:var(--ruby)} @media(max-width:600px){.hours-cols{grid-template-columns:1fr;gap:14px}} /* The kitchen line where there is room for a sentence and not a table: the footer and the burger overlay. */ .foot-kitchen,.hours-kit{margin:10px 0 0;font-family:var(--f-body);font-style:normal; text-transform:none;letter-spacing:0;font-size:14px;line-height:1.45;color:var(--smoke)} .big-time{font-family:var(--f-wood);letter-spacing:var(--track-wood);font-size:clamp(44px,4.6vw,72px);text-transform:uppercase;line-height:.9} .s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12} .r2{grid-row:span 2}.r3{grid-row:span 3} /* ========================================================================== MARQUEE ========================================================================== */ .marquee{overflow:hidden;background:var(--ruby);border-top:3px solid var(--lead);border-bottom:3px solid var(--lead);box-shadow:0 var(--sh-w) 0 var(--gold);padding:14px 0;transform:rotate(var(--rot,0deg)) scale(1.04);margin:70px 0 30px;position:relative;z-index:2} .marquee.green{background:var(--green);transform:rotate(var(--rot,0deg)) scale(1.04);box-shadow:0 calc(var(--sh-w) * -1) 0 var(--gold)} /* The band is scaled 1.04 so its tilted ends never show a gap, which puts it ~2% past the viewport each side; it sits between sections, so this wrapper (build.py, the Blog page) clips it at the viewport edge. overflow-x:clip makes no formatting context, so the band's margins and its vertical overhang are exactly as before. */ .marquee-clip{overflow-x:clip} .marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite} .marquee.green .marquee-track{animation-direction:reverse} .marquee.is-paused .marquee-track{animation-play-state:paused} @media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}} /* a tap leaves :hover stuck on touch, which held it paused */ /* The pause toggle (site.js, WCAG 2.2.2): a tap or click on the band pauses it; a keyboard reaches this button, which is out of sight until it has focus. */ .marquee-clip{position:relative} .mq-toggle{position:absolute;left:var(--gut);top:50%;z-index:3;translate:0 -50%;opacity:0;pointer-events:none; font-family:var(--f-tape);text-transform:uppercase;letter-spacing:.1em;font-size:14px;line-height:1; background:var(--c-cream);color:var(--c-black);padding:12px 18px;border:2px solid var(--c-black); box-shadow:var(--sh-w) var(--sh-w) 0 var(--c-orange)} .mq-toggle:focus-visible{opacity:1;pointer-events:auto;outline-color:var(--c-cream)} .marquee span{font-family:var(--f-wood);letter-spacing:var(--track-wood);font-size:clamp(30px,3.6vw,52px);text-transform:uppercase;color:var(--cream);padding:0 22px;display:flex;align-items:center;gap:22px;white-space:nowrap;line-height:1} /* Box accents. Every little square mark on the site is a shamrock now — shamrocks_three_leaf.svg, one flat contrasting colour per placement, no border and no box behind it. --mark-sz and --mark-rot are the two knobs. Opie, 20 September. The files are pre-coloured rather than masked; see the pattern note above for why nothing here leans on mask-image. */ .marquee span::after{content:"";--mark-src:url("../img/brand/shamrock-cream.svg");--mark-sz:32px;--mark-rot:-12deg; background:var(--mark-src) center/contain no-repeat;width:var(--mark-sz);height:var(--mark-sz);border:0; transform:rotate(var(--mark-rot));flex:none} @keyframes marquee{to{transform:translateX(-50%)}} /* ========================================================================== THE ROOM ========================================================================== */ .room{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center} .room-img{position:relative;--rot:-1.45deg;padding:0;overflow:visible} .room-img img{width:100%;height:auto;display:block;filter:saturate(.9)} .room-img .stamp{position:absolute;right:-30px;bottom:-30px;--rot:1.4deg} .room-img .tape{position:absolute;left:-20px;top:22px;--rot:-1.4deg} .room-copy{position:relative} .room-copy p{color:var(--smoke)} /* B2, 21 Sep: the Favrile footnote tape under the Chapter one copy. In flow, so it can never sit on the paragraphs; line-height opened up because it wraps on a phone. */ .room-copy .tape.fn{margin-top:14px;--rot:-1.2deg;max-width:100%;line-height:1.35} .room-copy p:first-of-type::first-letter{font-family:var(--f-fat);font-size:4.4em;float:left;line-height:.78;margin:8px 12px 0 0;color:var(--cream)} /* ========================================================================== RUNAROUND — the copy flows round the shape of a picture, not its box. About, Chapter one (build.py). Opie, 24 Sep, against Framer's Runaround Text Wrap component: "text dynamically wraps around the actual visible contours, not bounding boxes." It is `float` + `shape-outside:url()`: the browser reads the picture's ALPHA CHANNEL and makes the float area that silhouette. So the two cut-outs have to be transparent PNGs/WebPs, and they are (assets/img/cut/, see the README there). `shape-image-threshold` is how opaque a pixel must be to count as solid, which is what keeps a soft edge or a drop shadow from pushing the text away; `shape-margin` is the gutter the text keeps off the silhouette. Those two are Framer's "Alpha Threshold" and "Wrap Padding" under different names. TWO PLACES NAME EACH FILE: the in build.py and the shape-outside below. They must stay the same file or the text will wrap round one picture while a different one is drawn. There is no way round it: shape-outside takes one URL and cannot read the element's own src. SAME ORIGIN ONLY. A shape-outside image from another origin is ignored without a word and the float goes back to being a rectangle. These are ours, served from the same host, so it holds. NO PARALLAX ON A RUNAROUND FLOAT. A `translate` moves the picture and not the hole the text is keeping for it, so the two come apart. Fig. 2 lost its data-px when it moved in here. ========================================================================== */ .runaround{max-width:900px;margin:0 auto} .runaround::after{content:"";display:block;clear:both} /* the container holds its floats */ /* The footnote flows beside a float like anything else: the last paragraph is short and clearing here left a hole under the lamp. */ .runaround .tape.fn{display:inline-block;margin-top:18px} .ra{ --ra-w:34%; /* width, as a share of the column */ --ra-t:.45; /* shape-image-threshold: how opaque a pixel must be to be solid */ --ra-m:22px; /* shape-margin: the gutter the text keeps off the silhouette */ width:var(--ra-w); height:auto; /* MARGINS STAY ZERO. shape-outside:url() maps the picture into the MARGIN box, so a margin on one side stretches the silhouette away from the picture that is drawn. All the spacing is shape-margin, which inflates the shape itself and leaves the mapping alone. */ margin:0; shape-margin:var(--ra-m); shape-image-threshold:var(--ra-t); } .ra-l{float:left} .ra-r{float:right} img.ra{display:block;height:auto} /* ---- the bleed (Opie, 24 Sep: "slight out of frame") ---- Each cut-out runs past the edge of the text column into the page gutter, so the tram's front end and the lamp's near side sit outside the measure. It is a negative margin on the OUTER side, and it has to be: `translate` or `position:relative` would move the picture and leave the hole the text is keeping for it behind. .sec is overflow-x:clip, so on a narrow desk screen the bleed is simply cropped at the viewport instead of widening the page. WHAT THAT COSTS, and why it is affordable here. shape-outside:url() maps the picture into the MARGIN box, so a negative margin squeezes the silhouette by that much. The squeeze is on the bleeding side, where the margin is, and the inner side (margin 0) stays pinned to the box edge — which is the side the text is actually running down. Measured at 1440: the contour tracks the tram within a couple of px of the drawn edge. Widen the bleed much past 10% and it will start to show; check it against the picture, not the numbers. */ .ra-trolley{--ra-w:38%;shape-outside:url("../img/cut/trolley-cut.webp"); margin-right:-8%;margin-top:-18px} .ra-tiffany{--ra-w:37%;shape-outside:url("../img/cut/tiffany-cut.webp"); margin-left:-7%;margin-top:-26px} /* ---- the tape on a cut-out ---- The house tape, as every framed picture here wears one. It is absolutely positioned, so it is outside the float's box and outside the silhouette the text is following: the text does not know it is there. SO IT HAS TO SIT ON SOLID PICTURE. Hung off the top edge, the way the framed shards wear theirs, it would float in the middle of the hole the text has left — the top of both these cut-outs is transparent (sky over the tram, the gap either side of the lamp's crown). Each is placed at the height where its object is widest and hung one tape-thickness past that edge, which is inside the shape-margin gutter. Move a tape and check it against the silhouette, not against the box. The angle is site.js's: .tape is in ROT_SEL, so each one is re-rolled per load inside the 1.45 degree ceiling. The values here are the no-JS resting tilt, nothing more. */ .ra{position:relative} .ra > img{width:100%;height:auto;display:block} .ra .tape{position:absolute;z-index:2;white-space:nowrap} .ra-trolley .tape{left:-14px;top:42%;--rot:-1.4deg} /* across the tram's rear end, the inner side */ .ra-tiffany .tape{left:-12px;top:64%;--rot:1.3deg} /* low on the drum, clear of the horse */ /* ---- LIVE: the copy re-wraps while you move a picture (assets/js/fx-wrap.js) ---- Everything above is the floor: a float, a silhouette, and no way to move it. The engine adds the half of Framer's component Opie asked for by name, the one where you drag an object and the text keeps re-wrapping. It cannot be CSS: shape-outside only applies to a float, a float sits where the flow puts it, and CSS Exclusions never shipped anywhere. So under .ra-live the two cut-outs come out of flow and go to absolute, measured to exactly where the floats had them, and the text is instead broken against a LADDER of zero-content floats down each side, one rung every few px, each rung as wide as the objects intrude at that height. The browser still does the line breaking; it is just given something to break against. The engine writes nothing but rung widths. ========================================================================== */ .runaround{position:relative} /* The copy's own formatting context, built by the engine. display:flow-root keeps the first paragraph's top margin from collapsing out through the rung ladder, which is what made the rungs an uneven grid and put every width in at the wrong height. */ .ra-copy{display:flow-root} .ra-rung{display:block;width:0;pointer-events:none} .ra-rung-left{float:left;clear:left} .ra-rung-right{float:right;clear:right} .ra-live .ra{position:absolute;z-index:3;float:none;margin:0;shape-outside:none;touch-action:none} /* The drop cap stops floating and is pinned by the engine instead; see the long note in fx-wrap.js. A float cannot be placed above an earlier one, so left in the flow it would be shoved to the foot of the rung ladder and the paragraph would open on a missing letter. */ /* .ra-live and .room-copy are the SAME element, so a descendant combinator between them matches nothing. Written with a space first, this rule never applied: the drop cap went on floating, could not be placed above the rung ladder in front of it, and landed at the foot of the ladder as a stray capital in the middle of the section. */ .ra-live.room-copy p:first-of-type::first-letter, .ra-live .ra-copy p:first-of-type::first-letter{float:none;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;color:inherit} .ra-cap{position:absolute;z-index:2;pointer-events:none; font-family:var(--f-fat);font-size:4.4em;line-height:.78;color:var(--cream)} /* No text selection anywhere in the block while something is being dragged. */ .ra-dragging{-webkit-user-select:none;user-select:none} .ra-dragging .ra{will-change:left,top} /* ?wrap=debug — Framer's Debug Mode: the rungs the text is breaking against, and the picture's own box under its silhouette. */ .ra-debug .ra-rung{background:rgba(176,73,0,.35);outline:1px solid rgba(242,226,211,.35)} .ra-debug .ra{outline:1px dashed var(--c-cream)} /* Narrow: a float in a column this size leaves a gutter of text nobody can read, so they stack and the silhouette stops mattering. */ @media (max-width:820px){ .ra{float:none;width:min(78%,340px);margin:26px auto !important;shape-outside:none} } /* ========================================================================== MENU — printed cards on the paper wall ========================================================================== */ /* overflow-x:clip: each card's upper-right shamrock hangs 26px past it, which pushed a 390px phone's Menu page out to 407px. clip, not hidden: it makes no scroll container, and the marks still hang past the cards vertically. */ .paper{background:var(--paper);color:var(--ink);position:relative;overflow-x:clip} .paper::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("../img/tex/dirt-01.webp") center/1200px repeat;mix-blend-mode:multiply;opacity:.4} .paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("../img/tex/glass-brown-faint.webp") center/1600px;mix-blend-mode:multiply;opacity:.08} .paper > *{position:relative;z-index:1} .paper .kick{color:var(--ruby)} .paper .link{color:var(--green-deep);border-color:var(--green-deep)} .card{background:var(--c-cream);color:var(--ink);padding:34px 30px 30px;border:2px solid var(--lead);box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold);position:relative;transform:rotate(var(--rot,0deg))} .card::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold-deep);pointer-events:none} .card::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("../img/tex/dirt-03.webp") center/900px repeat;mix-blend-mode:multiply;opacity:.3} .card > *{position:relative;z-index:1} .card .corner{position:absolute;width:12px;height:12px;background:var(--ruby);border:2px solid var(--lead);z-index:2} /* Opie, 20 September: on the menu cards only the upper-right mark turns into a shamrock. The other three stay as they are. */ .card .corner.tr{--mark-src:url("../img/brand/shamrock-red.svg");--mark-sz:38px;--mark-rot:16deg; width:var(--mark-sz);height:var(--mark-sz);background:var(--mark-src) center/contain no-repeat;border:0; transform:rotate(var(--mark-rot))} .card .corner.tl{top:-8px;left:-8px}.card .corner.tr{top:-28px;right:-26px}.card .corner.bl{bottom:-8px;left:-8px}.card .corner.br{bottom:-8px;right:-8px} .card .eyebrow{display:block;margin-bottom:6px;font-family:var(--f-sub);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--green)} .card .wood{display:block;font-size:clamp(30px,3vw,44px);color:var(--c-teal)} /* A card note: one line the whole list shares, so five rows do not each repeat it (the dressings are all made here and all bottled). Sits under the heading, above the list, and reads as the list's own aside. */ .card-note{margin:2px 0 14px;max-width:46ch;color:rgba(26,21,16,.72);font-size:15px;line-height:1.45} .card-note a{color:inherit;text-decoration:underline;text-underline-offset:3px} .menu-list{margin:14px 0 0;padding:0} .menu-list li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:12px 0;border-bottom:2px dotted rgba(31,29,29,.3);align-items:baseline} .menu-list li:last-child{border:0} .menu-list .n{font-family:var(--f-item);font-weight:400;text-transform:uppercase;font-size:20px;letter-spacing:.02em;color:var(--green-deep)} .menu-list .p{font-family:var(--f-fat);font-size:24px;color:var(--ruby)} .menu-list .d{grid-column:1/-1;font-size:15.5px;color:rgba(31,29,29,.7);line-height:1.45} .menu-list .badge{display:inline-block;font-family:var(--f-type);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--ruby);color:var(--cream);padding:3px 7px;margin-left:8px;vertical-align:middle;transform:rotate(var(--rot,0deg))} .menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px;align-items:start} .menu-grid .card:nth-child(1){--rot:-1.45deg}.menu-grid .card:nth-child(2){--rot:1deg;margin-top:34px}.menu-grid .card:nth-child(3){--rot:-.6deg;margin-top:10px} .menu-two{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px;align-items:start} .menu-two .card:nth-child(2){--rot:1.2deg;margin-top:40px} .tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px} .tab{font-family:var(--f-wood);letter-spacing:var(--track-wood);text-transform:uppercase;font-size:22px;padding:12px 20px 10px;border:2px solid var(--lead);color:var(--ink);background:var(--cream);box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead);transition:.15s;transform:rotate(var(--rot,0deg))} .tab:nth-child(1){--rot:-1.45deg}.tab:nth-child(2){--rot:1.45deg}.tab:nth-child(3){--rot:-1deg}.tab:nth-child(4){--rot:1.45deg} .tab[aria-selected="true"]{background:var(--green);color:var(--cream);transform:translate(-2px,-2px) rotate(0);box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead)} .tab:hover{transform:translate(-2px,-2px) rotate(0)} .panel{display:none;animation:drop .5s var(--snap)} .panel.is-active{display:block} /* Per-panel heading, for the no-JS render only: head()'s noscript style opens all four panels and hides .tabs, and the panels are labelled by those tab buttons and nothing else. display:none here means no pixel moves for anyone with scripting on. */ .nojs-h{display:none;font-family:var(--f-sub);font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 18px} @keyframes drop{from{opacity:0;transform:translateY(-18px) rotate(var(--rot,0deg))}} /* ========================================================================== EVENTS ========================================================================== */ .rail{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px var(--gut) 36px;margin:0 calc(var(--gut) * -1);scrollbar-width:thin;scrollbar-color:var(--gold) transparent} .ev{flex:0 0 min(380px,84vw);scroll-snap-align:start;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start} .ev:nth-child(odd){--rot:-1.45deg}.ev:nth-child(even){--rot:1.45deg;margin-top:18px} @media (hover:hover){.ev:hover{transform:rotate(0) translateY(-6px)}} .day{width:78px;background:var(--cream);color:var(--green-deep);text-align:center;padding:10px 0 8px;border:2px solid var(--lead);box-shadow:var(--sh-w) var(--sh-w) 0 var(--ruby);font-family:var(--f-type);text-transform:uppercase;line-height:1;transform:rotate(var(--rot,0deg))} .day b{display:block;font-family:var(--f-wood);letter-spacing:var(--track-wood);font-size:38px;margin:2px 0} .day small{font-size:11px;letter-spacing:.2em} .ev h3{font-family:var(--f-wood);letter-spacing:var(--track-wood);text-transform:uppercase;font-size:28px;line-height:.95;margin:0 0 7px} .ev .when{font-family:var(--f-sub);letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--cream);display:block;margin-bottom:4px} .ev p{color:var(--smoke);font-size:15.5px;margin:8px 0 12px;line-height:1.45} /* minmax(0,1fr) and min-width/min-height:0 on the cells: an aspect-ratio box takes its content height (47px) as a minimum and hands it to its width, so the grid could not get narrower than 366px and cut the Sunday column and the next-month button off a 360 or 375 phone (the .sec clip hides the overflow). The ≤520px block shrinks the cell's own padding and figure. */ .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} /* The week rows exist only to satisfy the WAI-ARIA grid pattern site.js builds (role=row around role=gridcell). display:contents takes the box out of layout entirely, so every cell is still a direct grid item of .cal and not one pixel moves. Never give .cal-row a background, border, padding or shadow: display:contents paints none of them. */ .cal-row{display:contents} /* The week rows exist only to satisfy the WAI-ARIA grid pattern site.js builds (role=row around role=gridcell). display:contents takes the box out of layout entirely, so every cell is still a direct grid item of .cal and not one pixel moves. Never give .cal-row a background, border, padding or shadow: display:contents paints none of them. */ .cal-row{display:contents} .cal .dow{font-family:var(--f-type);letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--cream);text-align:center;padding:6px 0} .cal .cell{aspect-ratio:1;min-width:0;min-height:0;border:2px solid rgba(242,226,211,.16);padding:8px;position:relative;font-family:var(--f-num);font-weight:500;font-size:17px;color:var(--smoke-2);transition:.15s} .cal .cell.has{border-color:var(--cream);color:var(--cream);cursor:pointer;background:rgba(242,226,211,.04);box-shadow:var(--sh-w) var(--sh-w) 0 var(--lead)} .cal .cell.has:hover,.cal .cell.is-sel{background:var(--green);border-color:var(--lead);transform:rotate(var(--rot,0deg));box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold)} .cal .cell.today{outline:2px dashed var(--gold-bright);outline-offset:-4px} /* .cal .cell.today is (0,3,0) and beats the house :focus-visible at (0,1,0), so without this the today cell drew the same ring focused and unfocused - i.e. no focus indicator at all (measured 23 Sep). Same ring its neighbours get; unfocused, the dashed marker is unchanged. */ .cal .cell.today:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px} /* .cal .cell.today is (0,3,0) and beats the house :focus-visible at (0,1,0), so without this the today cell drew the same ring focused and unfocused - i.e. no focus indicator at all (measured 23 Sep). Same ring its neighbours get; unfocused, the dashed marker is unchanged. */ .cal .cell.today:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px} .cal .cell.pad{opacity:.2;border-style:dashed} .cal .cell .dot{position:absolute;bottom:8px;left:8px;right:8px;font-family:var(--f-type);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cal-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start} .cal-wrap > *{min-width:0} /* the column (and the detail panel under it on a phone) follows the calendar down */ .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .cal-nav{display:flex;gap:10px} .cal-nav button{width:42px;height:42px;position:relative;border:2px solid var(--cream);display:grid;place-items:center;box-shadow:var(--sh-w) var(--sh-w) 0 var(--gold);font-size:20px} /* 42px drawn, 44px to a thumb (WCAG 2.5.5). The extra ring is an invisible pseudo-element, not padding: padding would grow the bordered square and the two arrows are part of the look. inset is measured from the PADDING box, which is the border box less its 2px borders, so -1px measured 42x42 and bought nothing; -3px is what reaches 1px outside the button. The 10px gap leaves 4px between the two expanded areas, so neither can steal the other's taps. Same trick would suit any other small control. */ .cal-nav button::after{content:"";position:absolute;inset:-3px} .cal-nav button:hover{background:var(--gold);color:var(--cream)} .ev-detail{padding:26px;position:sticky;top:calc(var(--nav-h) + 24px);--rot:1.45deg} .ev-detail img{width:100%;aspect-ratio:16/10;object-fit:cover;border:2px solid var(--lead);margin-bottom:18px;filter:saturate(.9)} .ev-detail .eyebrow{font-family:var(--f-sub);letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--cream);margin-bottom:6px;display:block} .ev-detail .wood{font-size:clamp(30px,3vw,44px)} /* Contract 7, 21 Sep: an event may carry a line-up (`bill`: slot, name, one_liner) and a "learn more" post (`url` + `link`, its label). site.js renders both into the detail panel, between the blurb and the Book button; an event without them looks exactly as it did. Cream on the box stock, as the blurb above them is. */ .ev-bill{margin:0 0 18px;padding:0;list-style:none;border-top:2px dotted rgba(242,226,211,.3)} .ev-bill li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;padding:10px 0;border-bottom:2px dotted rgba(242,226,211,.3)} .ev-bill .ev-slot{grid-row:span 2;min-width:3.6em;padding-top:5px;font-family:var(--f-type);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-cream)} .ev-bill b{font-family:var(--f-wood);font-style:italic;font-weight:400;text-transform:uppercase;letter-spacing:var(--track-wood);font-size:20px;line-height:1.05;color:var(--c-cream)} .ev-bill .ev-line{font-size:15px;line-height:1.4;color:var(--c-cream)} .ev-more{display:table;margin:0 0 22px} /* WCAG 2.5.8: "Details" draws 72.8x20.9 and .ev-more 290.6x32.6, both under the 24px floor in height. Same invisible ::after as .cal-nav button; the padding box is 18.9px after the 2px border-bottom, so -13px takes it to 44.9. Both are the last thing in their box, so the pad falls on the paragraph above and into the margin below and nothing drawn moves. Scoped to .ev .link, so .sec-head a.link and .paper .link are untouched. */ .ev .link,.ev-more{position:relative} .ev .link::after,.ev-more::after{content:"";position:absolute;inset:-13px -6px} /* The calendar's no-JS floor (build.py cal_nojs).