/* ============================================================
Kult Yard
Palette: near-black ground, bone type, one electric accent.
The posters and drink videos supply all the colour the page needs.
============================================================ */
:root {
--bg: #0a0a0b;
--bg-soft: #121214;
--bg-lift: #17171a;
--line: rgba(237, 234, 227, 0.12);
--line-soft: rgba(237, 234, 227, 0.07);
--text: #edeae3;
--muted: #8f8b83;
--dim: #6a675f;
--accent: #e8407f;
--accent-dim: rgba(232, 64, 127, 0.16);
/* Neon tiers. Small type gets a tight halo only — a wide blur on 9px text
turns to mud. The big hero word can afford the full three-layer bloom. */
--glow-sm: 0 0 6px rgba(232, 64, 127, 0.38);
--glow-md: 0 0 10px rgba(232, 64, 127, 0.45), 0 0 26px rgba(232, 64, 127, 0.18);
--glow-lg: 0 0 14px rgba(232, 64, 127, 0.5),
0 0 42px rgba(232, 64, 127, 0.22),
0 0 90px rgba(232, 64, 127, 0.1);
--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--gutter: clamp(1.25rem, 5vw, 4rem);
--wrap: 1240px;
--t: 520ms cubic-bezier(0.22, 1, 0.36, 1);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-dramatic: cubic-bezier(0.83, 0, 0.17, 1);
}
/* ---------- intro loader ----------
`display:none` by default: without the `.js` class (set inline in )
this never appears, so a no-script visitor is never stuck behind a curtain. */
.intro { display: none; }
.js .intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.75rem, 4vh, 2.75rem);
position: fixed; inset: 0; z-index: 200;
background: var(--bg);
transition: transform 950ms var(--ease-dramatic), visibility 0s linear 950ms;
}
/* the curtain lifts */
.js.intro-done .intro {
transform: translateY(-101%);
visibility: hidden;
pointer-events: none;
}
/* hold the page still underneath while the loader is up */
.js:not(.intro-done) body { overflow: hidden; }
.intro-inner {
display: flex; flex-direction: column; align-items: center;
gap: clamp(1.25rem, 3vh, 2rem);
transition: opacity 420ms ease, transform 420ms var(--ease-dramatic);
}
.js.intro-done .intro-inner { opacity: 0; transform: translateY(-14px); }
.intro-line {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(1.85rem, 6.5vw, 4rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--text);
text-align: center;
text-wrap: balance;
max-width: 14ch;
}
/* the trailing beat, lit like the rest of the neon */
.intro-ellipsis {
color: var(--accent);
text-shadow: var(--glow-md);
letter-spacing: 0.05em;
}
.intro-count {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.4em;
text-indent: 0.4em; /* balance the trailing letter-space */
color: var(--muted);
/* fixed box + tabular figures: the number counts without nudging the layout */
font-variant-numeric: tabular-nums;
width: 6ch;
text-align: center;
}
.intro-bar {
position: absolute;
bottom: clamp(2.5rem, 8vh, 5rem);
width: clamp(120px, 18vw, 200px);
height: 1px;
background: var(--line-soft);
overflow: hidden;
}
.intro-bar-fill {
display: block; width: 100%; height: 100%;
background: var(--accent);
box-shadow: var(--glow-sm);
transform: scaleX(0);
transform-origin: left center;
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-weight: 300;
font-size: clamp(0.975rem, 0.93rem + 0.22vw, 1.0625rem);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
.skip {
position: absolute; left: -9999px;
top: 0.75rem; z-index: 100;
padding: 0.6rem 1rem;
background: var(--text); color: var(--bg);
border-radius: 2px;
}
.skip:focus { left: 0.75rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.nowrap { white-space: nowrap; }
.fine { color: var(--dim); font-size: 0.8125rem; letter-spacing: 0.02em; }
/* ---------- type ---------- */
.eyebrow {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--muted);
font-weight: 400;
}
.section-title {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.25rem);
line-height: 1.02;
letter-spacing: -0.015em;
margin-top: 0.7rem;
}
.section-lede {
color: var(--muted);
max-width: 46ch;
margin-top: 1.25rem;
}
/* ---------- buttons ---------- */
.btn {
--pad: 0.85rem 1.6rem;
display: inline-flex; align-items: center; justify-content: center;
padding: var(--pad);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
border: 1px solid transparent;
transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--text); color: var(--bg); }
.btn-solid:hover { background: var(--accent); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); background: rgba(237, 234, 227, 0.05); }
/* ---------- header ---------- */
.site-head {
position: fixed; inset: 0 0 auto 0; z-index: 50;
transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
border-bottom: 1px solid transparent;
}
/* drops in once the curtain lifts, like YIELD's nav */
.js .site-head {
opacity: 0;
transform: translateY(-1.5rem);
transition: opacity 1.1s var(--ease), transform 1.1s var(--ease),
background var(--t), border-color var(--t), backdrop-filter var(--t);
}
.js.hero-in .site-head { opacity: 1; transform: none; }
.site-head.is-stuck {
background: rgba(10, 10, 11, 0.82);
backdrop-filter: blur(14px) saturate(140%);
border-bottom-color: var(--line-soft);
}
.head-inner {
max-width: var(--wrap); margin-inline: auto;
padding: 1rem var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* logo-mark.png carries a real alpha channel, keyed from the white-on-black
original. A blend mode can't work here: the header's backdrop-filter makes
an isolated stacking context, so `screen` would paint the black box through. */
.brand img { width: clamp(84px, 8vw, 108px); height: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav > a:not(.btn) {
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
position: relative;
padding-block: 0.35rem;
transition: color var(--t);
}
.nav > a:not(.btn)::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 100%; height: 1px; background: var(--accent);
box-shadow: var(--glow-sm);
transform: scaleX(0); transform-origin: right;
transition: transform var(--t);
}
.nav > a:not(.btn):hover { color: var(--text); }
.nav > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { --pad: 0.7rem 1.35rem; }
/* ---------- mobile nav ---------- */
.nav-toggle { display: none; align-items: center; gap: 0.6rem; }
.nav-toggle-label {
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.nav-toggle-bars { display: block; width: 22px; }
.nav-toggle-bars i {
display: block; height: 1px; background: var(--text);
transition: transform var(--t), opacity var(--t);
}
.nav-toggle-bars i + i { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 860px) {
.nav-toggle { display: inline-flex; }
.nav {
position: fixed; inset: 0;
background: var(--bg);
flex-direction: column; justify-content: center;
gap: 2rem;
opacity: 0; visibility: hidden;
transition: opacity var(--t), visibility var(--t);
}
.nav.is-open { opacity: 1; visibility: visible; }
.nav > a:not(.btn) { font-size: 1rem; letter-spacing: 0.2em; color: var(--text); }
.site-head:has(.nav.is-open) { background: transparent; backdrop-filter: none; }
.site-head:has(.nav.is-open) .nav-toggle,
.site-head:has(.nav.is-open) .brand { position: relative; z-index: 1; }
}
/* ---------- hero ---------- */
.hero {
position: relative;
min-height: 100svh;
display: flex; align-items: flex-end;
padding: 8rem 0 clamp(4rem, 9vh, 7rem);
overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 40%;
}
/* the reel sits on top of its poster and crossfades in once it can play */
.hero-media video {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 1200ms ease;
/* worn-tape colour: pushed saturation, crushed blacks, a touch cold.
The reel has some very bright frames; brightness() keeps the headline legible. */
filter: saturate(1.4) contrast(1.14) brightness(0.82) hue-rotate(-4deg);
/* scaled up a hair so the jitter never exposes an edge */
transform: scale(1.015);
animation: vhs-jitter 7s steps(1) infinite;
}
.hero-media video.is-ready { opacity: 1; }
/* No SVG feOffset channel-split here on purpose: at dpr 1.5 that reprocesses
~3.5M pixels through seven filter primitives every video frame and locks the
renderer. The chroma fringe below is baked into the scanline gradient, which
the compositor paints once. */
/* ---------- VHS overlay stack ---------- */
.vhs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* feTurbulence rasterised once into a tiling data-URI, then shuffled per frame */
.vhs-grain {
position: absolute; inset: -50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
opacity: 0.08;
mix-blend-mode: overlay;
animation: vhs-grain 0.5s steps(1) infinite;
will-change: transform;
}
/* Scanline plus chroma bleed in a single gradient: a magenta edge above each
dark line and a cyan one below reads as colour fringing without a filter pass. */
.vhs-scanlines {
position: absolute; inset: 0;
background: repeating-linear-gradient(
to bottom,
rgba(255, 64, 140, 0.07) 0 1px,
rgba(0, 0, 0, 0.32) 1px 2px,
rgba(80, 200, 255, 0.07) 2px 3px,
rgba(0, 0, 0, 0) 3px 4px
);
opacity: 0.7;
}
/* the head-switching band that crawls up an old tape */
.vhs-tracking {
position: absolute; left: 0; right: 0;
height: 18%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.035) 42%,
rgba(255, 255, 255, 0.07) 50%,
rgba(255, 255, 255, 0.03) 58%,
rgba(255, 255, 255, 0) 100%
);
mix-blend-mode: screen;
animation: vhs-tracking 9s linear infinite;
will-change: transform;
}
@keyframes vhs-grain {
0% { transform: translate(0, 0); }
20% { transform: translate(-4%, 3%); }
40% { transform: translate(3%, -5%); }
60% { transform: translate(-2%, 4%); }
80% { transform: translate(5%, -2%); }
100% { transform: translate(0, 0); }
}
/* mostly still, with an occasional tape stumble */
@keyframes vhs-jitter {
0%, 91% { transform: scale(1.015) translateX(0); }
92% { transform: scale(1.015) translateX(-2px); }
93% { transform: scale(1.015) translateX(2px); }
94% { transform: scale(1.015) translateX(-1px); }
95%, 100%{ transform: scale(1.015) translateX(0); }
}
@keyframes vhs-tracking {
from { transform: translateY(-120%); }
to { transform: translateY(660%); }
}
/* vignette + bottom-weighted scrim: the reel swings from near-black to blown-out,
so the headline needs a floor it can always sit on */
.hero-veil {
position: absolute; inset: 0;
background:
radial-gradient(125% 95% at 50% 42%, rgba(10,10,11,0) 38%, rgba(10,10,11,0.5) 100%),
linear-gradient(to top, var(--bg) 2%, rgba(10,10,11,0.8) 38%, rgba(10,10,11,0.48) 70%, rgba(10,10,11,0.66) 100%);
}
.hero-inner { position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.hero-title {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(2.6rem, 1.1rem + 6.6vw, 6.5rem);
line-height: 0.98;
letter-spacing: -0.02em;
margin-top: 1.1rem;
}
.hero-title span, .hero-title em { display: block; }
.hero-title em {
font-style: italic;
color: var(--accent);
padding-left: clamp(1.5rem, 6vw, 6rem);
text-shadow: var(--glow-lg);
animation: neon-breathe 9s var(--t-ease, ease-in-out) infinite;
}
/* Mostly steady, with the odd stutter a tired tube makes. */
@keyframes neon-breathe {
0%, 43%, 100% { text-shadow: var(--glow-lg); }
45% { text-shadow: var(--glow-md); }
47% { text-shadow: var(--glow-lg); }
49% { text-shadow: var(--glow-md); }
52% { text-shadow: var(--glow-lg); }
70% { text-shadow: var(--glow-md); }
}
/* the eyebrow is small and sits high, where the reel is often at its brightest */
.hero .eyebrow { color: rgba(237, 234, 227, 0.82); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.hero-lede { color: var(--muted); max-width: 44ch; margin-top: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
/* ---------- hero entrance ----------
No fade. Each word sits fully outside a one-edge mask, so it does not exist
until it snaps in. Held until `.hero-in` lands, which the script adds when the
curtain lifts and the failsafe adds regardless, so copy is never lost.
Each mask clips ONLY the edge its word enters from. Clipping the other three
would cut the descenders on "of their own" and shear the neon bloom off
"a spirit" — the glow reaches 90px past the glyphs. -100vw/-100vh means
"don't clip this side at all". */
.js [data-mask] { display: block; }
.js [data-mask="down"] { clip-path: inset(0 -100vw -100vh -100vw); } /* clip top */
.js [data-mask="up"] { clip-path: inset(-100vh -100vw 0 -100vw); } /* clip bottom */
.js [data-mask="left"] { clip-path: inset(-100vh -100vw -100vh 0); } /* clip left */
.js [data-hero] {
display: block;
transform: var(--from);
/* expo-out: leaves hard, lands soft. Aggressive without bouncing. */
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
will-change: transform;
}
/* 110%, not 100%: clears the edge even when ink overshoots the line box */
.js [data-hero="down"] { --from: translateY(-110%); }
.js [data-hero="up"] { --from: translateY(110%); }
.js [data-hero="left"] { --from: translateX(-110%); }
.js.hero-in [data-hero] { transform: none; }
/* the stagger, in the order the eye reads them. --d inherits into the mask. */
.hero-inner .eyebrow { --d: 0ms; }
.hero-title > span:nth-of-type(1) { --d: 90ms; }
.hero-title > span:nth-of-type(2) { --d: 190ms; }
.hero-title > span:nth-of-type(3) { --d: 300ms; }
.hero-lede { --d: 430ms; }
.hero-actions-mask { --d: 560ms; }
.scroll-cue {
position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0;
width: 1px; height: 54px; background: var(--line);
overflow: hidden;
}
.scroll-cue span {
position: absolute; inset: 0;
background: var(--accent);
box-shadow: var(--glow-md);
animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
0% { transform: translateY(-100%); }
60% { transform: translateY(100%); }
100% { transform: translateY(100%); }
}
/* ---------- sections ---------- */
.section { padding-block: clamp(5rem, 11vh, 9.5rem); }
.section-alt { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }
.section-head { max-width: 60ch; margin-bottom: clamp(2.75rem, 6vh, 4.5rem); }
/* ---------- signature drinks ---------- */
.drink-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: clamp(1.5rem, 3vw, 2.75rem);
}
.drink-dots { display: none; }
/* ---------- mobile: the three drinks become a swipeable carousel ----------
Desktop keeps the grid untouched; everything here is behind the breakpoint. */
@media (max-width: 860px) {
.drink-grid {
display: flex;
grid-template-columns: none;
gap: 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* bleed to the screen edges so a centred card looks intentional */
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.drink-grid::-webkit-scrollbar { display: none; }
.drink {
flex: 0 0 82%;
scroll-snap-align: center;
}
.drink-dots {
display: flex;
justify-content: center;
gap: 0.6rem;
margin-top: 2rem;
}
.drink-dot {
width: 6px; height: 6px;
border-radius: 50%;
padding: 0;
background: var(--line);
transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.drink-dot.is-active {
background: var(--accent);
box-shadow: var(--glow-sm);
transform: scale(1.35);
}
/* the tap target is bigger than the dot */
.drink-dot::before {
content: "";
position: absolute;
inset: -12px;
}
.drink-dot { position: relative; }
}
.drink-media {
position: relative;
aspect-ratio: 9 / 16;
background: var(--bg-lift);
border: 1px solid var(--line-soft);
border-radius: 3px;
overflow: hidden;
}
.drink-media video {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.drink-media video.is-ready { opacity: 1; }
.drink:hover .drink-media video.is-ready { transform: scale(1.03); }
/* shown only when autoplay is blocked or motion is reduced */
.drink-sound {
position: absolute; inset: auto 0 0 0;
padding: 0.7rem;
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
background: rgba(10, 10, 11, 0.72);
backdrop-filter: blur(6px);
border-top: 1px solid var(--line-soft);
}
.drink-sound[hidden] { display: none; }
.drink-copy { padding-top: 1.5rem; }
.drink-copy h3 {
font-family: var(--serif);
font-weight: 400;
font-size: 1.65rem;
line-height: 1.2;
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.drink-copy p { color: var(--muted); margin-top: 0.6rem; font-size: 0.9375rem; }
.drink-copy .af {
color: var(--dim); font-size: 0.75rem;
letter-spacing: 0.1em; text-transform: uppercase;
margin-top: 0.8rem;
}
.price {
font-family: var(--sans); font-size: 0.9375rem; font-weight: 400;
color: var(--accent); white-space: nowrap;
text-shadow: var(--glow-sm);
}
.price sup { font-size: 0.6em; top: -0.4em; }
/* ---------- tabs ---------- */
.tablist {
display: flex; flex-wrap: wrap; gap: 0.4rem;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 2.75rem;
}
.tab {
padding: 0.85rem 1.35rem;
font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--dim);
border-bottom: 1px solid transparent;
margin-bottom: -1px;
transition: color var(--t), border-color var(--t);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabpanel[hidden] { display: none; }
.panel-note { color: var(--dim); font-size: 0.8125rem; margin-bottom: 2rem; letter-spacing: 0.02em; }
/* ---------- mobile: clamp each menu panel behind a "See full menu" ----------
.panel-body is created by script.js, so a no-JS visitor gets the whole menu. */
.panel-more { display: none; }
@media (max-width: 860px) {
.js .panel-clip { position: relative; }
.js .panel-body {
max-height: 30rem;
overflow: hidden;
/* slack so `overflow:hidden` doesn't shear the pink glow off the prices
sitting flush against the panel's right edge */
padding-inline: 8px;
margin-inline: -8px;
transition: max-height 0.6s var(--ease-dramatic);
}
/* sibling of .panel-body, so the body's own overflow can't clip it */
.js .panel-fade {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 6rem;
pointer-events: none;
background: linear-gradient(to top, var(--bg-soft) 10%, rgba(18, 18, 20, 0));
transition: opacity 0.35s var(--ease);
}
.js .tabpanel.is-open .panel-fade { opacity: 0; }
.js .panel-fade[hidden] { display: none; }
.js .panel-more {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.75rem;
padding: 0.8rem 1.5rem;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
border: 1px solid var(--line);
border-radius: 999px;
transition: border-color var(--t), color var(--t);
}
.js .panel-more:hover { border-color: var(--accent); color: var(--accent); }
.js .panel-more[hidden] { display: none; }
}
/* ---------- menu lists ---------- */
.menu-list { columns: 2; column-gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 780px) { .menu-list { columns: 1; } }
.menu-list > li {
break-inside: avoid;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
column-gap: 0.75rem;
padding-bottom: 1.9rem;
margin-bottom: 0.1rem;
}
.menu-list h3 {
font-family: var(--serif);
font-weight: 400;
font-size: 1.3rem;
line-height: 1.3;
}
.menu-list > li > p {
grid-column: 1 / -1;
color: var(--muted);
font-size: 0.875rem;
line-height: 1.6;
margin-top: 0.4rem;
max-width: 52ch;
}
.dots {
border-bottom: 1px dotted var(--line);
transform: translateY(-0.28em);
min-width: 1.5rem;
}
/* a note directly under a group heading belongs to it, not to the list below */
.group + .fine { margin-top: -0.5rem; margin-bottom: 1.1rem; }
/* .plain drops the two-column flow so the list can sit inside a .col */
.menu-list.plain { columns: 1; }
.menu-list.plain > li { padding-bottom: 1.4rem; }
.menu-list + .fine, .menu-list.plain + .fine { margin-top: -0.4rem; }
.af-tag {
display: inline-block;
font-family: var(--sans);
font-size: 0.5625rem;
letter-spacing: 0.14em;
color: var(--accent);
background: var(--accent-dim);
border-radius: 2px;
padding: 0.18em 0.42em;
vertical-align: 0.32em;
margin-left: 0.35rem;
box-shadow: var(--glow-sm); /* the tag is a lit chip, not lit text */
}
/* Dietary marks stay monochrome — the pink is reserved for prices and the
alcohol-free tag, so these read as annotation rather than emphasis. */
.diet {
display: inline-block;
font-family: var(--sans);
font-size: 0.5625rem;
letter-spacing: 0.14em;
color: var(--muted);
border: 1px solid var(--line);
border-radius: 2px;
padding: 0.16em 0.4em;
vertical-align: 0.32em;
margin-left: 0.35rem;
}
.diet.v { color: #9ec49a; border-color: rgba(158, 196, 154, 0.35); }
.diet.gf { color: var(--dim); }
.crown { color: var(--accent); font-size: 0.7em; vertical-align: 0.3em; text-shadow: var(--glow-sm); }
.callout-price { text-shadow: var(--glow-sm); }
.callout-price .pax { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-shadow: none; }
.dietary {
margin-top: 2.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line-soft);
}
.dietary p { color: var(--muted); font-size: 0.8125rem; }
.dietary .diet { margin-left: 0; margin-right: 0.2rem; }
.dietary .fine { margin-top: 0.75rem; }
/* ---------- column lists (spirits / beer) ---------- */
.cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
.group {
font-family: var(--serif);
font-weight: 400;
font-size: 1.45rem;
margin-bottom: 1.1rem;
}
.group:not(:first-child) { margin-top: 2.75rem; }
.group .zero { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--accent); vertical-align: 0.55em; }
.simple > li {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
column-gap: 0.7rem;
padding-block: 0.42rem;
font-size: 0.9375rem;
}
.simple > li > span:first-child { color: var(--text); }
.simple em { font-style: italic; color: var(--dim); font-size: 0.85em; }
.fine + .simple { margin-top: 0.25rem; }
.simple + .fine { margin-top: 0.6rem; }
.callout {
margin-top: 2.75rem;
padding: 1.6rem;
background: var(--bg-lift);
border: 1px solid var(--line-soft);
border-radius: 3px;
}
.callout .group { margin-top: 0; }
.callout p { color: var(--muted); font-size: 0.875rem; margin-top: 0.6rem; }
.callout strong { color: var(--text); font-weight: 400; }
.callout-price { color: var(--accent) !important; letter-spacing: 0.04em; }
/* ---------- what's on ---------- */
.onair {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: start;
}
@media (max-width: 940px) { .onair { grid-template-columns: 1fr; } }
.schedule > li {
display: grid;
grid-template-columns: 4.5rem 1fr auto;
align-items: baseline;
gap: 1rem;
padding-block: 1.15rem;
border-bottom: 1px solid var(--line-soft);
transition: background var(--t), padding-inline var(--t);
}
.schedule > li:first-child { border-top: 1px solid var(--line-soft); }
.schedule > li:hover { background: rgba(237, 234, 227, 0.02); }
.schedule .day {
font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
}
.schedule .what { font-family: var(--serif); font-size: clamp(1.2rem, 1.6vw, 1.6rem); }
.schedule .what em { display: block; font-family: var(--sans); font-style: normal; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 0.25rem; }
.schedule .when { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.schedule .closed .what { color: var(--dim); }
/* .schedule-col keeps the list and its footnote as a single grid item, so the
posters stay in the right-hand column instead of being pushed to row two.
It also anchors the hand-drawn arrow, and reserves room beneath so the arrow
never lands on the posters once the grid stacks. */
.schedule-col { position: relative; padding-bottom: clamp(70px, 8vw, 108px); }
.after-schedule { margin-top: 1.75rem; color: var(--muted); font-size: 0.875rem; }
/* Hand-drawn arrow. Its head is at the top-left of the artwork and points up-left,
so the head has to sit just beneath the link for it to indicate it.
The artwork's ink is baked to --accent (#e8407f) and its shape lives in the
alpha channel, so the glow below must use the same pink.
Right-aligning to the column is what makes it land: the link ends ~50px shy of
the column's right edge, so a right-aligned graphic drops its head directly
beneath the link. Anchoring the head to the link's right end instead would fling
the 3.2:1 tail straight through the posters. */
.cuo-arrow {
position: absolute;
top: calc(100% - clamp(70px, 8vw, 108px) + 4px); /* undo the reserved padding */
right: -1.25rem; /* nudges the head off the link's first letter */
width: clamp(170px, 13vw, 220px);
height: auto;
pointer-events: none;
filter: drop-shadow(0 0 14px rgba(232, 64, 127, 0.35));
}
/* fades in behind the line it points at, no clip-path so the glow survives */
.js .cuo-arrow {
opacity: 0;
transform: translate(-12px, 12px);
transition: opacity 0.6s var(--ease) 0.25s,
transform 0.75s var(--ease-dramatic) 0.25s;
}
.js .after-schedule.is-in ~ .cuo-arrow { opacity: 1; transform: none; }
.js.reveal-all .cuo-arrow { opacity: 1; transform: none; transition: none; }
@media (max-width: 940px) {
.cuo-arrow { right: 0; width: clamp(160px, 44vw, 240px); }
}
.after-schedule a { color: var(--text); border-bottom: 1px solid var(--line); transition: color var(--t), border-color var(--t); }
.after-schedule a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.posters { display: grid; gap: 1.25rem; }
.posters img {
width: 100%; height: auto;
border: 1px solid var(--line-soft);
border-radius: 3px;
}
/* ---------- visit ---------- */
.visit {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
}
@media (max-width: 940px) { .visit { grid-template-columns: 1fr; } }
/* ---------- expand-map ----------
Vanilla port of the React/motion LocationMap. Same choreography — 3D tilt on
pointer, spring-ish height expand, roads drawing in, buildings popping, pin
dropping — with no React, no motion library, no Tailwind. The component's
emerald is swapped for our pink accent so it belongs to the neon system. */
.visit-map { margin-top: 2.75rem; }
/* The "click me" hint hangs ~28px below the card, and the generic
`[data-reveal].is-in` bleed is only 0.75em, so it would shave the hint off.
The [data-reveal] qualifier is load-bearing: without it this rule ties the
generic one on specificity and loses, since that one is declared later. */
.js .visit-map[data-reveal].is-in { clip-path: inset(-0.75em -0.6em -2.75em -0.6em); }
.fact-label {
display: block;
font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--dim); margin-bottom: 0.9rem;
}
.expand-map {
position: relative; width: min(100%, 440px);
cursor: pointer; user-select: none;
-webkit-tap-highlight-color: transparent;
}
.expand-map:focus-visible { outline: none; }
.expand-map:focus-visible .expand-map__card { outline: 2px solid var(--accent); outline-offset: 3px; }
.expand-map__card {
position: relative; overflow: hidden; border-radius: 1rem;
height: clamp(150px, 22vw, 172px);
background: var(--bg-lift);
border: 1.5px solid var(--line);
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
transition: transform 0.3s var(--ease),
height 0.55s cubic-bezier(0.34, 1.15, 0.4, 1),
border-color 0.3s var(--ease);
will-change: transform;
}
.expand-map.is-expanded .expand-map__card { height: clamp(300px, 46vw, 358px); }
.expand-map:hover .expand-map__card { border-color: rgba(232, 64, 127, 0.55); }
/* faint grid, collapsed state */
.expand-map__grid {
position: absolute; inset: 0; opacity: 0.55;
background-image:
linear-gradient(rgba(237, 234, 227, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(237, 234, 227, 0.08) 1px, transparent 1px);
background-size: 22px 22px;
transition: opacity 0.3s var(--ease);
}
.expand-map.is-expanded .expand-map__grid { opacity: 0; }
/* stylised map scene, expanded state */
.expand-map__scene {
position: absolute; inset: 0; opacity: 0; pointer-events: none;
transition: opacity 0.4s var(--ease) 0.05s;
}
.expand-map.is-expanded .expand-map__scene { opacity: 1; }
.expand-map__scene::after { /* keep the label legible over the map */
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, var(--bg-lift), transparent 55%);
}
.expand-map__roads { position: absolute; inset: 0; width: 100%; height: 100%; }
/* pathLength=1 turns each road into a 0..1 dash we can draw in */
.rd { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rd--main { stroke: rgba(237, 234, 227, 0.28); stroke-width: 3; }
.rd--arty { stroke: rgba(237, 234, 227, 0.22); stroke-width: 2.5; }
.rd--st { stroke: rgba(237, 234, 227, 0.12); stroke-width: 1; }
.expand-map.is-expanded .rd { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s var(--ease); }
.expand-map.is-expanded .rd:nth-child(1) { transition-delay: 0.15s; }
.expand-map.is-expanded .rd:nth-child(2) { transition-delay: 0.2s; }
.expand-map.is-expanded .rd:nth-child(3) { transition-delay: 0.3s; }
.expand-map.is-expanded .rd:nth-child(4) { transition-delay: 0.35s; }
.expand-map.is-expanded .rd:nth-child(n+5) { transition-delay: 0.5s; }
.bldg {
position: absolute; border-radius: 3px;
background: rgba(237, 234, 227, 0.2);
border: 1px solid rgba(237, 234, 227, 0.14);
opacity: 0; transform: scale(0.8);
}
.expand-map.is-expanded .bldg {
opacity: 1; transform: scale(1);
transition: opacity 0.4s var(--ease) 0.5s, transform 0.4s var(--ease) 0.5s;
}
.expand-map__pin {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -60%) translateY(-14px) scale(0); opacity: 0;
}
.expand-map.is-expanded .expand-map__pin {
transform: translate(-50%, -60%) translateY(0) scale(1); opacity: 1;
transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) 0.3s, opacity 0.3s var(--ease) 0.3s;
}
.expand-map__pin svg { filter: drop-shadow(0 4px 10px rgba(232, 64, 127, 0.45)); }
.expand-map__pin path { fill: var(--accent); }
.expand-map__pin circle { fill: var(--bg); }
.expand-map__content {
position: relative; z-index: 2; height: 100%;
display: flex; flex-direction: column; justify-content: space-between;
padding: 1.15rem 1.25rem;
}
.expand-map__top { display: flex; align-items: flex-start; justify-content: space-between; }
.expand-map__icon {
color: var(--accent);
filter: drop-shadow(0 0 4px rgba(232, 64, 127, 0.35));
transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
.expand-map:hover .expand-map__icon { filter: drop-shadow(0 0 8px rgba(232, 64, 127, 0.55)); }
.expand-map.is-expanded .expand-map__icon { opacity: 0; }
.expand-map__live {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.28rem 0.6rem; border-radius: 100px;
background: rgba(237, 234, 227, 0.06);
font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--muted);
transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.expand-map:hover .expand-map__live { transform: scale(1.05); background: rgba(237, 234, 227, 0.11); }
.expand-map__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
.expand-map__live i { animation: mapPulse 1.9s var(--ease) infinite; }
}
@keyframes mapPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232, 64, 127, 0.55); }
50% { box-shadow: 0 0 0 4px transparent; }
}
.expand-map__bottom { display: flex; flex-direction: column; gap: 0.3rem; }
.expand-map__place {
font-family: var(--serif); font-weight: 400;
font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text);
transition: transform 0.3s var(--ease);
}
.expand-map:hover .expand-map__place { transform: translateX(4px); }
.expand-map__addr,
.expand-map__coords,
.expand-map__link {
opacity: 0; max-height: 0; overflow: hidden;
transition: opacity 0.25s var(--ease), max-height 0.25s var(--ease);
}
.expand-map__addr { font-size: 0.75rem; color: var(--muted); }
.expand-map__coords {
font-size: 0.75rem; color: var(--dim);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.expand-map__link {
font-size: 0.8rem; font-weight: 500; color: var(--accent);
text-shadow: var(--glow-sm);
pointer-events: none; align-self: start;
}
.expand-map__link:hover { text-decoration: underline; }
.expand-map.is-expanded .expand-map__addr { opacity: 1; max-height: 2rem; transition-delay: 0.1s; }
.expand-map.is-expanded .expand-map__coords { opacity: 1; max-height: 2rem; transition-delay: 0.18s; }
.expand-map.is-expanded .expand-map__link { opacity: 1; max-height: 2rem; pointer-events: auto; transition-delay: 0.26s; }
.expand-map__underline {
height: 1.5px; margin-top: 0.2rem;
background: linear-gradient(90deg, var(--accent), rgba(232, 64, 127, 0.3), transparent);
box-shadow: var(--glow-sm);
transform: scaleX(0.3); transform-origin: left;
transition: transform 0.4s ease;
}
.expand-map:hover .expand-map__underline,
.expand-map.is-expanded .expand-map__underline { transform: scaleX(1); }
.expand-map__hint {
position: absolute; left: 50%; bottom: -1.75rem;
transform: translateX(-50%);
font-size: 0.72rem; font-weight: 500; color: var(--accent);
white-space: nowrap; letter-spacing: 0.04em;
pointer-events: none;
transition: opacity 0.3s var(--ease);
}
.expand-map__hint.is-typing::after {
content: ""; display: inline-block; width: 1px; height: 0.95em;
margin-left: 2px; vertical-align: -0.1em; background: currentColor;
animation: hintCaret 0.7s step-end infinite;
}
@keyframes hintCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.expand-map__hint.is-pulsing { animation: hintPulse 1.6s var(--ease) infinite; }
@keyframes hintPulse {
0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
.expand-map.is-expanded .expand-map__hint { opacity: 0; animation: none; }
.facts { margin-top: 2.75rem; display: grid; gap: 1.5rem; }
.facts dt {
font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--dim); margin-bottom: 0.4rem;
}
.facts dd { margin: 0; }
.facts a { border-bottom: 1px solid var(--line); transition: border-color var(--t), color var(--t); }
.facts a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* ---------- meet our kultists ----------
Hand-lettered heading (an image of text, hence the alt), then slots waiting on
real portraits. The .kultist-slot placeholders are disposable — each one gets
swapped for a as the photos arrive. */
.kultists-title { margin: 0; }
.kultists-title img {
display: block;
width: 100%;
max-width: 520px;
height: auto;
}
.kultist-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(0.75rem, 1.6vw, 1.25rem);
margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.kultist-slot {
aspect-ratio: 3 / 4;
border: 1px dashed var(--line);
border-radius: 3px;
background:
radial-gradient(60% 60% at 50% 42%, rgba(237, 234, 227, 0.03), transparent 70%);
}
/* the shape a real portrait takes, so dropping one in needs no CSS */
.kultist { margin: 0; }
.kultist img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 3px;
filter: saturate(0.9);
}
.kultist figcaption {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-top: 0.7rem;
}
.kultist figcaption b {
font-family: var(--serif);
font-weight: 400;
font-size: 1.05rem;
color: var(--text);
}
.kultist figcaption span {
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dim);
}
.kultists-note { margin-top: 1.1rem; }
/* ---------- footer ---------- */
.site-foot { padding-top: clamp(4rem, 8vh, 6rem); border-top: 1px solid var(--line-soft); overflow: hidden; }
.foot-inner {
display: flex; flex-wrap: wrap; gap: 2rem;
align-items: center; justify-content: space-between;
}
.foot-brand img { width: 110px; height: auto; }
.foot-links, .foot-social { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot-links a, .foot-social a {
font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
transition: color var(--t);
}
.foot-links a:hover, .foot-social a:hover { color: var(--accent); }
.wordmark {
font-family: var(--serif);
font-weight: 300;
text-align: center;
line-height: 0.8;
font-size: clamp(3.5rem, 17vw, 15rem);
letter-spacing: -0.02em;
color: transparent;
-webkit-text-stroke: 1px var(--line);
margin-block: clamp(2.5rem, 7vh, 5rem) 0;
user-select: none;
}
.foot-fine {
display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
padding-block: 2rem;
border-top: 1px solid var(--line-soft);
margin-top: 2rem;
color: var(--dim); font-size: 0.75rem; letter-spacing: 0.04em;
}
/* Anything that turns pink on hover lights up with it. Grouped here rather than
repeated on each rule, so the glow can never drift out of sync with the colour. */
.foot-links a,
.foot-social a,
.facts a,
.after-schedule a,
.tab { transition: color var(--t), border-color var(--t), text-shadow var(--t); }
.foot-links a:hover,
.foot-social a:hover,
.facts a:hover,
.after-schedule a:hover { text-shadow: var(--glow-sm); }
/* A box-shadow on .tab haloes all four sides and reads as a boxed button.
Glow the underline itself instead. */
.tab { position: relative; }
.tab[aria-selected="true"]::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -1px;
height: 1px;
background: var(--accent);
box-shadow: var(--glow-sm);
}
/* ---------- reveal on scroll ----------
Content slides out of a clipped line rather than fading up. Gated behind .js so
nothing is hidden when JavaScript is off; `.reveal-all` (set by the
failsafe) force-shows everything if script.js never runs. */
.js [data-reveal] {
--lr: 0.5em;
opacity: 0;
clip-path: inset(100% 0 0 0); /* up: hidden as a sliver on the bottom line */
transform: translateY(var(--lr));
transition: clip-path 0.75s var(--ease-dramatic),
transform 0.75s var(--ease-dramatic),
opacity 0.5s var(--ease);
will-change: clip-path, transform;
}
/* labels and standfirsts invert — clipped at the top, dropping down */
.js .eyebrow[data-reveal],
.js .section-lede[data-reveal] {
clip-path: inset(0 0 100% 0);
transform: translateY(calc(-1 * var(--lr)));
}
/* Settled state bleeds outward. It can't be `none` (clip-path won't transition to
that), and the bleed must clear the widest thing inside — the pink glow on the
prices runs 6px past the glyphs, so 0.6em of horizontal slack. */
.js [data-reveal].is-in {
opacity: 1;
clip-path: inset(-0.75em -0.6em -0.75em -0.6em);
transform: none;
}
/* if script.js never loads, the copy must not stay clipped into nothing */
.js.reveal-all [data-reveal] {
opacity: 1;
clip-path: none;
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
.js .site-head { opacity: 1; transform: none; }
.btn:hover { transform: none; }
.scroll-cue span { animation: none; }
.drink:hover .drink-media video.is-ready { transform: none; }
/* keep the still grain and scanlines, kill everything that moves */
.vhs-grain, .vhs-tracking, .hero-media video { animation: none !important; }
.vhs-tracking { display: none; }
/* the neon stays lit, it just stops flickering */
.hero-title em { animation: none !important; text-shadow: var(--glow-lg); }
/* the curtain fades out instead of sweeping up */
.js .intro { transition: opacity 300ms ease, visibility 0s linear 300ms; }
.js.intro-done .intro { transform: none; opacity: 0; }
.js.intro-done .intro-inner { transform: none; }
/* the hero copy is simply there — no sliding, no masks */
.js [data-hero] { transform: none; transition: none; }
.js [data-mask] { clip-path: none; }
/* the map still expands, it just doesn't tilt, pulse or type */
.expand-map__hint { animation: none !important; }
.expand-map__card { transform: none !important; }
.js .cuo-arrow { opacity: 1; transform: none; transition: none; }
*, *::before, *::after { transition-duration: 0.01ms !important; }
}