/* ============================================================
SB-CORE — FMC · The Incubator · production design system
Brand: SUNSET BOULEVARD (winning direction 04)
Cream paper · cocoa ink · burnt orange / mustard / avocado
Alfa Slab One (display) · Poppins (body)
No external images. Every graphic is CSS or inline SVG.
Fonts are loaded by the page ( preconnect + display=swap);
this sheet only references the families.
Pairs with /assets/js/sb-journey.js — the engine writes
--p (scene progress 0→1), --pc (completed-early progress:
min(--p / 0.7, 1) — scrubs finish by 70% of the pin and hold),
--py (parallax px), --tx/--ty (tilt),
and the classes .is-in / .is-active / .is-off / .sb-static / .sb-va.
============================================================ */
/* ============================================================
1 · ROOT DESIGN TOKENS
L1 raw palette → L2 semantic aliases → text-safe inks.
Recolour the whole site by swapping L1 only.
============================================================ */
:root {
/* ---- L1 · raw warm palette ---- */
--c-cream: #F3E7CE; /* paper · base surface */
--c-cream-2: #EAD9B6; /* deeper paper for plates / gradients */
--c-peach: #F0C468; /* peach tint · sunset glow, decorative */
--c-peach-2: #E6AD3F; /* deeper peach · ring + arc fills */
--c-orange: #BF0A30; /* FILM · burnt-orange marquee light */
--c-mustard: #FCA434; /* MUSIC · golden glow off vinyl */
--c-avocado: #1E4CA1; /* COMEDY · grounded, cheeky green */
--c-cocoa: #12234B; /* ink · deep base (dusk) */
--c-cocoa-2: #1E3660; /* lifted cocoa for panels */
/* ---- L1 · text-safe inks (the ONLY form a hue takes as text)
On cream #F3E7CE: orange-ink 5.5:1 · avocado-ink 6.1:1 ·
mustard-ink 5.1:1 — all ≥ AA 4.5:1 ---- */
--c-orange-ink: #9E0827;
--c-avocado-ink: #002868;
--c-mustard-ink: #96420C;
/* ---- L2 · semantic surfaces + inks ---- */
--paper: var(--c-cream);
--paper-2: var(--c-cream-2);
--ink: var(--c-cocoa);
--ink-panel: var(--c-cocoa-2);
/* ---- L2 · craft accents (Film / Music / Comedy) ---- */
--film: var(--c-orange);
--music: var(--c-mustard);
--comedy: var(--c-avocado);
--accent: var(--c-orange);
--film-ink: var(--c-orange-ink);
--music-ink: var(--c-mustard-ink);
--comedy-ink: var(--c-avocado-ink);
--accent-ink: var(--c-orange-ink);
--comedy-deep: var(--c-avocado-ink); /* band bg: cream text ≥ AA */
/* ---- hairlines + shadows ---- */
--hair: rgba(18, 35, 75, 0.18);
--hair-cream: rgba(243, 231, 206, 0.22);
--shadow-plate: 0 18px 40px -22px rgba(18, 35, 75, 0.55);
--shadow-lift: 0 10px 26px -16px rgba(18, 35, 75, 0.5);
/* ---- type families ---- */
--font-display: "Alfa Slab One", Georgia, "Times New Roman", serif;
--font-body: "Poppins", system-ui, "Helvetica Neue", Arial, sans-serif;
/* ---- type scale (fluid) ---- */
--fs-hero: clamp(3.4rem, 12vw, 8rem); /* cover wordmarks */
--fs-d1: clamp(2.2rem, 5.6vw, 3.2rem); /* section titles */
--fs-d2: clamp(1.7rem, 4.5vw, 2.4rem); /* sub-features */
--fs-d3: clamp(1.25rem, 2.6vw, 1.5rem); /* card heads */
--fs-lede: clamp(1.08rem, 2.2vw, 1.3rem); /* standfirsts */
--fs-body: 1.0625rem; /* 17px body */
--fs-sm: 1rem; /* captions, meta · 16px */
--fs-cap: 0.75rem; /* kickers, uppercase */
/* ---- spacing scale ---- */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 1rem;
--sp-4: 1.5rem;
--sp-5: 2.5rem;
--sp-6: 4rem;
--sp-7: clamp(3.5rem, 8vw, 6.5rem); /* band padding-block */
--flow: clamp(1.4rem, 3.5vw, 2.4rem); /* vertical rhythm unit */
--gutter: clamp(1.25rem, 5vw, 5rem);
--wrap: 1120px;
/* ---- sticky header footprint ----
The site header sticks at top:0, so anything else that sticks
there sits UNDERNEATH it. Pinned scenes offset by this much so
their kicker + title always clear the header. Driven off the one
declaration that sets the header's own height (§6 uses
--header-h-inner as its min-height) plus its 2px bottom rule, so
the two can't drift apart. */
--header-h-inner: 68px;
--header-h: calc(var(--header-h-inner) + 2px);
/* ---- shape ---- */
--radius: 999px; /* pills, buttons, badges */
--radius-plate: 14px; /* cards, plates */
/* ---- motion ---- */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
/* ---- logo ---- */
--logo-size: 240px; /* Record & Ticket scale knob */
}
/* ============================================================
2 · RESET + BASE TYPOGRAPHY
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.62;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: none; }
strong { font-weight: 600; }
::selection { background: var(--film); color: var(--paper); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* headings */
.title-hero,
.title-d1,
.title-d2 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.015em;
text-wrap: balance;
}
.title-hero { font-size: var(--fs-hero); line-height: 0.86; }
.title-d1 { font-size: var(--fs-d1); }
.title-d2 { font-size: var(--fs-d2); }
.title-d3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-d3); line-height: 1.2; }
.section-title { /* alias used across pages */
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-d1);
line-height: 1.0;
letter-spacing: -0.015em;
margin-bottom: 1.1rem;
text-wrap: balance;
}
.kicker {
font-size: var(--fs-cap);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-ink);
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.65em;
}
.kicker::before {
content: "";
width: 30px;
height: 3px;
background: var(--accent);
border-radius: 2px;
}
.lede {
font-size: var(--fs-lede);
font-weight: 500;
line-height: 1.5;
max-width: 48ch;
margin-bottom: var(--flow);
text-wrap: pretty;
}
.body-copy { font-size: var(--fs-body); line-height: 1.65; max-width: 62ch; }
.body-copy + .body-copy { margin-top: 1rem; }
.small { font-size: var(--fs-sm); line-height: 1.55; }
/* craft letter glyphs (F / M / C) */
.glyph--f { color: var(--film); }
.glyph--m { color: var(--music); }
.glyph--c { color: var(--comedy); }
/* ============================================================
3 · FOCUS + SKIP LINK (a11y furniture)
============================================================ */
:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
border-radius: 4px;
}
.band--cocoa :focus-visible,
.site-footer :focus-visible { outline-color: var(--music); }
.skip-link {
position: absolute;
top: 14px;
left: 16px;
z-index: 1000;
padding: 0.7em 1.3em;
background: var(--ink);
color: var(--paper);
font-weight: 600;
font-size: var(--fs-sm);
border-radius: var(--radius);
text-decoration: none;
/* slide in on transform, not `top` — no layout work on focus */
transform: translateY(-150px);
transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: none; }
/* screen-reader-only utility (visually hidden, still announced) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* sticky headers must never sit on top of an anchor target —
covers #main, #inside, #the-promise, #partners, #grid, … */
[id] { scroll-margin-top: calc(68px + 1.25rem); }
/* ============================================================
4 · LAYOUT — WRAP, BANDS, GRIDS
============================================================ */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }
.band {
position: relative;
padding-block: var(--sp-7);
overflow: hidden;
}
.band + .band { border-top: 2px solid var(--hair); }
.band--cream { background: var(--paper); color: var(--ink); }
.band--cream-2 { background: var(--paper-2); color: var(--ink); }
.band--cocoa { background: var(--ink); color: var(--paper); }
.band--mustard { background: var(--music); color: var(--ink); }
.band--avocado { background: var(--comedy-deep); color: var(--paper); }
.band--film { background: var(--film); color: var(--paper); }
.band--mustard, .band--avocado, .band--film {
box-shadow: inset 0 6px 0 -3px rgba(18, 35, 75, 0.25),
inset 0 -6px 0 -3px rgba(18, 35, 75, 0.25);
}
.band--cocoa .kicker,
.band--avocado .kicker,
.band--film .kicker { color: var(--music); }
.band--cocoa .kicker::before,
.band--avocado .kicker::before,
.band--film .kicker::before { background: var(--music); }
.band--mustard .kicker { color: var(--c-orange-ink); }
.band--mustard .kicker::before { background: var(--ink); }
/* two-column feature layout */
.two-col {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
.two-col--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .two-col, .two-col--even { grid-template-columns: 1fr; } }
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.card-row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .card-row, .card-row--2 { grid-template-columns: 1fr; } }
/* rendering perf: below-fold sections skip layout/paint offscreen */
.cv-auto {
content-visibility: auto;
contain-intrinsic-size: auto 640px;
}
/* ============================================================
5 · HEADER / NAV — sticky, cream, cocoa text
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 200;
background: var(--paper);
color: var(--ink);
border-bottom: 2px solid var(--hair);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
min-height: var(--header-h-inner); /* §1 · pinned scenes offset by this + the 2px rule */
flex-wrap: wrap;
padding-block: 0.55rem;
}
.site-header__brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--font-display);
font-size: 1.4rem;
line-height: 1;
color: var(--ink);
}
.site-header__brand .rt-logo { flex: none; }
.site-header__tag {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-avocado-ink);
}
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.15rem; align-items: center; }
.site-nav a {
display: inline-flex;
align-items: center;
min-height: 44px; /* tap target ≥ 44px */
padding: 0.5em 0.95em;
border-radius: var(--radius);
font-weight: 600;
font-size: var(--fs-sm);
text-decoration: none;
color: var(--ink);
transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav a:hover { background: var(--paper-2); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.site-nav .btn { margin-left: 0.5rem; }
/* no-JS fallback: six items wrap to 2–3 rows on small screens —
let the header scroll away instead of pinning ~25% of the viewport */
@media (max-width: 760px) { .site-header { position: static; } }
/* ---- compact-viewport nav ------------------------------------
html.sb-nav is set by assets/js/sb-nav.js (standalone, no
journey engine needed). Without it the wrapping fallback above
still rules, so no-JS pages read exactly as before.
Below 820px: brand + hamburger; the nav becomes a slide-down
cream sleeve off the header. Transform/opacity only; the exit
runs ~70% of the enter time. ---- */
.nav-toggle {
display: none;
flex: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 48px;
height: 48px; /* tap target ≥ 44px */
border-radius: 12px;
color: var(--ink);
cursor: pointer;
transition: background 0.2s var(--ease);
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-toggle__bar {
width: 24px;
height: 3px;
border-radius: 2px;
background: currentColor;
transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
/* hamburger → ticket-tear X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 820px) {
.sb-nav .site-header { position: sticky; top: 0; }
.sb-nav .site-header__inner { flex-wrap: nowrap; }
.sb-nav .nav-toggle { display: inline-flex; }
/* the panel — a cream record sleeve dropped from the header */
.sb-nav .site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 140%);
border-bottom: 2px solid var(--hair);
box-shadow: var(--shadow-plate);
max-height: calc(100dvh - 68px);
overflow-y: auto;
visibility: hidden;
opacity: 0;
transform: translateY(-14px);
transition: transform 0.22s var(--ease),
opacity 0.22s var(--ease),
visibility 0s 0.22s;
}
.sb-nav .site-nav.is-open {
visibility: visible;
opacity: 1;
transform: none;
transition: transform 0.32s var(--ease),
opacity 0.32s var(--ease),
visibility 0s 0s;
}
/* the panel earns its grain (background-image set in §9) */
.sb-nav .site-nav::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.28;
mix-blend-mode: soft-light;
background-size: 180px 180px;
}
.sb-nav .site-nav ul {
display: block;
padding: 0.6rem var(--gutter) 1.4rem;
}
.sb-nav .site-nav li + li { border-top: 1px solid var(--hair); }
.sb-nav .site-nav li:last-child { border-top: 0; } /* the booking stub */
.sb-nav .site-nav a:not(.btn) {
display: flex;
width: 100%;
align-items: center;
gap: 0.85rem;
min-height: 54px; /* tap target ≥ 44px */
padding: 0.55em 0.5em;
border-radius: 10px;
font-size: 1.02rem;
}
/* craft-colour ticks — record-sleeve label rules that grow on
hover/focus; film → music → comedy down the sleeve */
.sb-nav .site-nav a:not(.btn)::before {
content: "";
flex: none;
width: 26px;
height: 3px;
border-radius: 2px;
background: var(--tick, var(--film));
opacity: 0.4;
transform: scaleX(0.3);
transform-origin: left center;
transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.sb-nav .site-nav a:not(.btn):hover::before,
.sb-nav .site-nav a:not(.btn):focus-visible::before,
.sb-nav .site-nav a[aria-current="page"]::before {
opacity: 1;
transform: none;
}
.sb-nav .site-nav li:nth-child(3n + 1) a { --tick: var(--film); }
.sb-nav .site-nav li:nth-child(3n + 2) a { --tick: var(--music); }
.sb-nav .site-nav li:nth-child(3n) a { --tick: var(--comedy); }
.sb-nav .site-nav .btn {
margin: 1rem 0 0;
width: 100%;
justify-content: center;
}
/* items rise in behind the sleeve; exit is instant-ish */
.sb-nav .site-nav li {
opacity: 0;
transform: translateY(-8px);
transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}
.sb-nav .site-nav.is-open li {
opacity: 1;
transform: none;
transition-duration: 0.3s;
transition-delay: calc(var(--nav-i, 0) * 45ms);
}
.sb-nav .site-nav li:nth-child(1) { --nav-i: 1; }
.sb-nav .site-nav li:nth-child(2) { --nav-i: 2; }
.sb-nav .site-nav li:nth-child(3) { --nav-i: 3; }
.sb-nav .site-nav li:nth-child(4) { --nav-i: 4; }
.sb-nav .site-nav li:nth-child(5) { --nav-i: 5; }
.sb-nav .site-nav li:nth-child(6) { --nav-i: 6; }
.sb-nav .site-nav li:nth-child(n + 7) { --nav-i: 7; }
/* scrim — cocoa dusk over the page; catches outside clicks so
nothing underneath activates. Below the header (z 200). */
.sb-nav body::after {
content: "";
position: fixed;
inset: 0;
z-index: 150;
background: rgba(18, 35, 75, 0.42);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s var(--ease);
}
.sb-nav-open body::after {
opacity: 1;
pointer-events: auto;
transition-duration: 0.32s;
}
/* scroll lock — overflow hidden + stable gutter, so the page
neither scrolls nor jumps while the panel is open */
.sb-nav-open { overflow: hidden; scrollbar-gutter: stable; }
.sb-nav-open body { overflow: hidden; }
}
/* ============================================================
6 · BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
min-height: 44px; /* tap target ≥ 44px */
padding: 0.75em 1.5em;
border-radius: var(--radius);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-sm);
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: transform 0.2s var(--ease),
background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn--primary { background: var(--film); color: var(--paper); box-shadow: var(--shadow-plate); }
.btn--primary:hover { background: var(--film-ink); transform: translateY(-2px); }
.btn--seal { background: var(--music); color: var(--ink); }
.btn--seal:hover { background: var(--music-ink); color: var(--paper); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--ghost-cream { background: transparent; color: var(--paper); border: 2px solid var(--paper); }
.btn--ghost-cream:hover { background: var(--paper); color: var(--ink); }
.btn--lg { font-size: 1.05rem; padding: 0.9em 1.8em; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.band--cocoa .btn:focus-visible,
.site-footer .btn:focus-visible { outline-color: var(--music); }
/* ============================================================
6b · FMC-BRANDED BUTTONS — the ticket & the record
Additive re-skin: existing markup untouched. The primary
CTAs (.btn--seal on home, .btn-gold on calendar) ADOPT the
ticket look; .btn--record is a new secondary; .btn--ghost
gains a torn-ticket edge as the quiet tertiary.
Shape + character only; colour/contrast pairings unchanged
(mustard plate + cocoa text = 6.1:1). Only transform is
animated on press. Notch bites are cocoa half-discs painted
on the edges (faithful to .rt-logo__ticket, shadow-safe).
--tk-notch = bite radius.
============================================================ */
/* ---- THE TICKET — primary CTA -----------------------------
.btn.btn-gold is written at two-class specificity on purpose:
calendar.css sets `.btn-gold { background: var(--music) }` and
loads AFTER this sheet — the shorthand would wipe the notch
gradients. Two classes here outrank its one class regardless
of order, so the ticket survives on the calendar page too. */
.btn--ticket,
.btn--seal,
.btn.btn-gold {
--tk-perf: 23px; /* stub width / perforation x — PX so the notch,
perforation + ADMIT strap all align on the same
line no matter the button's font size */
--tk-notch: 5px; /* tear-notch radius */
position: relative;
border-radius: 6px;
/* the tear-notches are ink half-circles cut into the TOP + BOTTOM
edges, centred on the perforation line — well clear of the ADMIT
strap (vertically centred), so the hole-punch can never bite it. */
background-image:
radial-gradient(circle at var(--tk-perf) 0, var(--ink) var(--tk-notch), transparent calc(var(--tk-notch) + 0.6px)),
radial-gradient(circle at var(--tk-perf) 100%, var(--ink) var(--tk-notch), transparent calc(var(--tk-notch) + 0.6px));
background-repeat: no-repeat;
background-color: var(--music);
color: var(--ink);
/* label lives in the ticket BODY, centred; the stub zone (0 → perf)
plus a 15px gutter is reserved so the function text can never
reach the strap. */
padding-left: calc(var(--tk-perf) + 15px);
padding-right: 18px;
justify-content: center;
text-align: center;
overflow: hidden; /* stub text can't spill past the ticket edge */
}
.btn--ticket { box-shadow: var(--shadow-lift); }
/* the perforation — a dashed rule set in from the left edge, with a
tiny hand-set "ADMIT" micro-label riding just right of it. Pure
decoration: pointer-events off, hidden from the a11y tree. */
.btn--ticket::before,
.btn--seal::before,
.btn-gold::before {
content: "ADMIT";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--tk-perf); /* the stub band, up to the perforation */
display: grid;
place-items: center; /* ADMIT centred → clear of top/bottom notches */
writing-mode: vertical-rl;
transform: rotate(180deg); /* reads bottom-to-top like the logo */
font-size: 8px; /* px so "ADMIT" always fits a 44px button */
font-weight: 700;
letter-spacing: 1.4px;
line-height: 1;
color: currentColor;
opacity: 0.62;
pointer-events: none;
}
/* the perforation dashed line — its own pseudo so it stays exactly on
--tk-perf (no font-size to shift its em out of line with the notches) */
.btn--ticket::after,
.btn--seal::after,
.btn-gold::after {
content: "";
position: absolute;
left: var(--tk-perf);
top: 22%;
bottom: 22%;
border-left: 1.5px dashed currentColor;
opacity: 0.5;
pointer-events: none;
}
/* the big CTA is tall enough to spell it out in full — sized to fit */
.btn--lg.btn--ticket::before,
.btn--lg.btn--seal::before,
.btn--lg.btn-gold::before { content: "Admit One"; font-size: 7px; letter-spacing: 0.8px; }
/* the header-nav CTA is compact — make it a clean, notch-free ticket so
nothing can crowd or clip: no strap, no perforation, no punches. */
.site-nav .btn--ticket,
.site-nav .btn--seal,
.site-nav .btn.btn-gold {
padding-left: 1.1em;
padding-right: 1.1em;
background-image: none;
}
.site-nav .btn::before,
.site-nav .btn::after { content: none; }
/* the book-a-room screen's header CTA keeps the FULL ticket look (strap +
perforation) to match the room-tab / + New booking tickets on its bar —
just give the label room so it never crowds the ADMIT strap. */
.cal-nav .btn--seal {
padding-left: calc(var(--tk-perf) + 18px);
padding-right: 18px;
white-space: nowrap;
}
/* press = a quick, springy "tear-tilt": nudge + rotate that snaps
back. Transform-only; overshoot lives in the ease-out curve. */
.btn--ticket:active,
.btn--seal:active,
.btn-gold:active {
transform: translate3d(1px, 1px, 0) rotate(-1.4deg);
transition: transform 0.09s var(--ease-out);
}
/* hover keeps the house lift; seal/gold already darken on hover in
their own rules — the ticket variant matches that motion.
NOTE: .btn--seal:hover (§6) uses the `background` shorthand, which
would reset the notch gradients to none on hover. Re-assert the
plate via background-color here so the bites survive the darken.
.btn.btn-gold:hover out-specifies calendar.css's `.btn-gold:hover
{ background: var(--music-ink) }` for the same reason. */
.btn--ticket:hover { transform: translateY(-2px); }
.btn--ticket:hover,
.btn--seal:hover,
.btn.btn-gold:hover {
background-color: var(--music-ink);
color: var(--paper);
/* §6 / calendar.css :hover use the `background` shorthand, which
also sets background-image:none — re-paint the tear notches here
so they don't disappear on hover */
background-image:
radial-gradient(circle at var(--tk-perf) 0, var(--ink) var(--tk-notch), transparent calc(var(--tk-notch) + 0.6px)),
radial-gradient(circle at var(--tk-perf) 100%, var(--ink) var(--tk-notch), transparent calc(var(--tk-notch) + 0.6px));
background-repeat: no-repeat;
}
/* ---- THE RECORD — secondary CTA (.btn--record) ------------
A pressed 45: mustard-on-cocoa pill with faint concentric
groove rings and a legible centred label. Hover drops the
needle (a tonearm ::after swings in) with a hair of rotation.
Groove rings are a static repeating-radial-gradient — nothing
about them animates; only transform moves on hover/press. ---- */
.btn--record {
--rec-face: var(--c-cocoa-2);
--rec-disc: var(--c-cocoa);
--rec-ink: var(--paper);
position: relative;
background: var(--rec-face);
color: var(--rec-ink);
/* solid, seated feel: lift shadow + hairline rim + faint top highlight */
box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(243, 231, 206, 0.06);
padding-left: 3.25em; /* room for the mini vinyl on the left */
padding-right: 1.35em;
overflow: hidden;
}
/* the mini vinyl on the left — grooved cocoa disc, mustard centre
label + black spindle, all in one layered background */
.btn--record::before {
content: "";
position: absolute;
left: 0.6em;
top: 50%;
width: 2em;
height: 2em;
border-radius: 50%;
transform: translateY(-50%);
/* a solid mini record: gold centre label + spindle, soft well-spaced
grooves on a near-black disc — same clean recipe as .btn--disc */
background:
radial-gradient(circle closest-side, var(--c-cocoa) 0 8%, transparent 8.5%), /* spindle hole */
radial-gradient(circle closest-side,
var(--music) 0 34%,
var(--c-mustard-ink) 34% calc(34% + 1px),
transparent calc(34% + 1px)), /* gold label + ring */
repeating-radial-gradient(circle closest-side,
transparent 0 2.6px, rgba(240, 224, 190, 0.12) 2.6px 3.6px), /* soft grooves */
var(--ink); /* near-black disc */
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.32);
pointer-events: none;
z-index: 1;
}
/* the tonearm — cocoa arm + orange headshell resting on the disc,
swings a touch on hover */
.btn--record::after {
content: "";
position: absolute;
left: 1.5em;
top: 0.34em;
width: 1.4em;
height: 3px;
border-radius: 3px;
/* ink arm + orange headshell resting from the top-right onto the label,
matching the .btn--disc / .btn--vinyl tonearm direction */
background: linear-gradient(to left, var(--ink) 0 72%, var(--film) 72% 100%);
transform-origin: right center;
transform: rotate(35deg);
transition: transform 0.28s var(--ease-out);
pointer-events: none;
z-index: 2;
}
.btn--record:hover { transform: translateY(-2px); color: var(--music); }
.btn--record:hover::after { transform: rotate(28deg); }
.btn--record:active { transform: translateY(0) rotate(0.4deg); transition: transform 0.09s var(--ease-out); }
/* mustard-faced variant for dark / cocoa bands (cocoa disc still reads) */
.btn--record.btn--record-gold {
--rec-face: var(--music);
--rec-ink: var(--ink);
}
.btn--record.btn--record-gold:hover { color: var(--ink); }
/* ---- THE 45 — .btn--vinyl, a true CIRCLE record ------------
A round button that IS a vinyl single: grooved cocoa disc, a
cream centre label, a spindle hole, and a little spin on hover.
Built for ICON or 1–2 char actions (nav arrows, play, refresh).
Groove rings are a static gradient; only transform animates. ---- */
.btn--vinyl {
--vin-disc: var(--c-cocoa);
--vin-label: var(--music);
--vin-ink: var(--ink);
position: relative;
display: inline-grid;
place-items: center;
width: 3.3em;
height: 3.3em;
min-width: 52px;
min-height: 52px;
padding: 0;
border-radius: 50%;
color: var(--vin-ink);
/* mustard centre label + ring → clean, evenly-spaced grooves on a
near-black disc (matches the hero .platter; no moiré) */
background:
radial-gradient(circle closest-side,
var(--vin-label) 0 30%,
var(--c-mustard-ink) 30% calc(30% + 1px),
transparent calc(30% + 1px)),
repeating-radial-gradient(circle closest-side,
transparent 0 3px, rgba(243, 231, 206, 0.15) 3px 4.4px),
var(--ink);
box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(18, 35, 75, 0.3);
cursor: pointer;
overflow: visible; /* let the tonearm poke past the disc */
transition: transform 0.4s var(--ease-out), box-shadow 0.2s var(--ease);
}
/* spindle hole — a black dot on the mustard label */
.btn--vinyl::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-cocoa);
transform: translate(-50%, -50%);
z-index: 3;
pointer-events: none;
}
/* the tonearm — cocoa arm with an orange headshell tip, resting from
the top-right toward the label like a record player */
.btn--vinyl::after {
content: "";
position: absolute;
top: 6%;
right: -2%;
width: 58%;
height: 3px;
border-radius: 3px;
background: linear-gradient(to left, var(--c-cocoa) 0 78%, var(--c-orange) 78% 100%);
transform-origin: right center;
transform: rotate(33deg);
transition: transform 0.35s var(--ease-out);
z-index: 4;
pointer-events: none;
}
/* the icon rides the mustard centre label, above grooves + arm */
.btn--vinyl > * { position: relative; z-index: 2; }
.btn--vinyl > svg { width: 1.05em; height: 1.05em; }
.btn--vinyl:hover { transform: rotate(8deg); box-shadow: var(--shadow-plate), inset 0 0 0 1px rgba(18, 35, 75, 0.3); }
.btn--vinyl:hover::after { transform: rotate(26deg); }
.btn--vinyl:active { transform: rotate(3deg) scale(0.96); transition: transform 0.1s var(--ease-out); }
.btn--vinyl:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sb-static .btn--vinyl:hover,
.sb-static .btn--vinyl:active { transform: none; }
.sb-static .btn--vinyl:hover::after { transform: rotate(33deg); }
/* ---- THE DISC — .btn--disc, a full CIRCLE vinyl CTA -------
The button IS the record: a round grooved disc with the label
text sitting on the mustard centre label, a spindle hole and a
tonearm. Breaks up the row of pills/tickets. Wrap the text in
so it layers above the grooves.
Use for SHORT CTAs (2–3 words). ---- */
.btn--disc {
--disc-size: clamp(94px, 10vw, 116px);
position: relative;
display: inline-grid;
place-items: center;
width: var(--disc-size);
height: var(--disc-size);
padding: 0;
border-radius: 50%;
color: var(--ink);
text-decoration: none;
/* the record itself: a few soft, well-spaced grooves (low contrast, not
busy) on a near-black disc. NO needle/tonearm — just the vinyl. The
words sit on a solid gold label-plate (see .btn--disc__label). */
background:
repeating-radial-gradient(circle closest-side,
transparent 0 5px,
rgba(240, 224, 190, 0.10) 5px 6px),
var(--ink);
box-shadow: var(--shadow-plate), inset 0 0 0 1px rgba(18, 35, 75, 0.3);
font-family: var(--font-body);
font-weight: 800;
font-size: 0.9rem;
line-height: 1.05;
letter-spacing: 0.01em;
text-transform: uppercase;
text-align: center;
cursor: pointer;
overflow: visible;
transition: transform 0.5s var(--ease-out), box-shadow 0.2s var(--ease);
}
.btn--disc__label {
position: relative;
z-index: 2;
max-width: 82%;
text-wrap: balance;
/* solid gold label-plate under the words: bigger, clearly readable, and
it reads as a proper record label sticker on the disc */
background: var(--music);
color: var(--ink);
padding: 0.34em 0.6em;
border-radius: 0.6em;
box-shadow: 0 0 0 1.5px var(--c-mustard-ink), 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* spindle hole — tiny, sits under the label text */
.btn--disc::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-cocoa);
box-shadow: 0 0 0 3px var(--music); /* small cream-ish ring around the hole */
transform: translate(-50%, -50%);
z-index: 1;
}
/* no tonearm — the button is just the record. (::after intentionally empty) */
.btn--disc::after { content: none; }
.btn--disc:hover { transform: rotate(7deg); box-shadow: var(--shadow-plate), inset 0 0 0 1px rgba(18, 35, 75, 0.3); }
.btn--disc:active { transform: rotate(3deg) scale(0.97); transition: transform 0.1s var(--ease-out); }
.btn--disc:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.sb-static .btn--disc:hover,
.sb-static .btn--disc:active { transform: none; }
/* ---- THE QUIET STUB — .btn--ghost as torn tertiary --------
Keep the outlined ghost, but square one end + dash the near
edge so it reads as a blank ticket stub. Colour untouched. */
.btn--ghost {
border-radius: 5px 999px 999px 5px;
border-left-style: dashed;
}
/* reduced motion / static: buttons stay fully styled + usable, but
the tear-tilt and needle-drop don't move. */
.sb-static .btn--ticket:active,
.sb-static .btn--seal:active,
.sb-static .btn-gold:active,
.sb-static .btn--record:active,
.sb-static .btn--record:hover,
.sb-static .btn--ticket:hover { transform: none; }
.sb-static .btn--record::after { display: none; }
@media (prefers-reduced-motion: reduce) {
.btn--ticket:active,
.btn--seal:active,
.btn-gold:active,
.btn--record:active,
.btn--vinyl:hover,
.btn--vinyl:active,
.btn--disc:hover,
.btn--disc:active { transform: none !important; }
.btn--record::after { display: none; }
.btn--record:hover,
.btn--ticket:hover { transform: none; }
}
/* ============================================================
7 · BADGES + ROUNDEL SEAL
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.28em 0.85em;
border-radius: var(--radius);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.badge--film { background: var(--film); color: var(--paper); }
.badge--music { background: var(--music); color: var(--ink); }
.badge--comedy { background: var(--comedy); color: var(--paper); }
.badge--ink { background: var(--ink); color: var(--paper); }
.badge--line { background: transparent; color: var(--ink); border: 2px solid var(--hair); }
/* textPath roundel seal — pair with the inline SVG from the guide */
.seal { width: 150px; height: 150px; transform-origin: 50% 50%; animation: sb-spin 46s linear infinite; }
.seal--sm { width: 96px; height: 96px; }
.seal__ring { fill: none; stroke: var(--ink); stroke-width: 3; }
.seal__ring--thin { stroke-width: 1.4; stroke: var(--film); }
.seal__type {
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
fill: var(--ink);
text-transform: uppercase;
}
.seal__mark { font-family: var(--font-display); font-size: 46px; fill: var(--film); text-anchor: middle; }
.seal__est {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
fill: var(--ink);
text-anchor: middle;
text-transform: uppercase;
}
.band--cocoa .seal__ring, .site-footer .seal__ring { stroke: var(--paper); }
.band--cocoa .seal__est, .site-footer .seal__est { fill: var(--paper); }
.band--cocoa .seal__mark, .site-footer .seal__mark { fill: var(--music); }
/* ============================================================
8 · THE RECORD & TICKET — primary FMC mark, pure CSS
Scale with --logo-size (any element). Burnt-orange record
(FILM) with groove rings + cream label + spindle; mustard
ticket (MUSIC) torn across at -9°, FMC punched inside.
Internal geometry is em-based: font-size tracks --logo-size.
Ticket is sized so "ADMIT ONE" (vertical strap, ~4.05em run)
always fits inside the 4.8em ticket height with clear margin
at every scale — nothing may clip the ticket edges. Grooves
stay visible ~4.5em above and below the strap.
============================================================ */
.rt-logo {
position: relative;
width: var(--logo-size);
aspect-ratio: 1 / 1;
font-size: calc(var(--logo-size) / 15); /* 15em == full width */
flex: none;
}
.rt-logo__disc {
position: absolute;
inset: 4%;
border-radius: 50%;
background:
/* spindle hole → cream label → label ring */
radial-gradient(circle at 50% 50%,
var(--ink) 0 0.32em,
var(--paper) 0.32em 2.15em,
var(--c-orange-ink) 2.15em calc(2.15em + 2px),
transparent calc(2.15em + 2px)),
/* concentric groove rings */
repeating-radial-gradient(circle at 50% 50%,
transparent 0 0.58em,
rgba(243, 231, 206, 0.17) 0.58em calc(0.58em + 2px)),
var(--film);
transform-origin: 50% 50%;
animation: sb-spin 24s linear infinite;
}
.rt-logo__ticket {
position: absolute;
left: -4%;
width: 108%;
top: 50%;
height: 4.8em;
transform: translateY(-50%) rotate(-9deg);
display: flex;
align-items: center;
background: var(--music);
border: 2px solid var(--ink);
border-radius: 0.5em;
box-shadow: var(--shadow-lift);
}
/* notch bites, ticket-stub cue, both ends */
.rt-logo__ticket::before,
.rt-logo__ticket::after {
content: "";
position: absolute;
top: 50%;
width: 0.85em;
height: 0.85em;
border-radius: 50%;
background: var(--ink);
transform: translate(-50%, -50%);
}
.rt-logo__ticket::before { left: 0; }
.rt-logo__ticket::after { left: 100%; }
.rt-logo__admit {
writing-mode: vertical-rl;
transform: rotate(180deg);
/* physical margins on purpose — margin-inline follows the element's
vertical writing mode (maps to top/bottom), which is what shoved the
strap flush-left underneath the notch dot */
margin: 0 0.45em 0 0.9em;
font-size: 0.56em;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
}
.rt-logo__perf {
align-self: stretch;
width: 0;
border-right: 2px dashed rgba(18, 35, 75, 0.7);
}
.rt-logo__fmc {
flex: 1;
text-align: center;
font-family: var(--font-display);
font-size: 2.4em;
line-height: 1;
letter-spacing: -0.01em;
color: var(--ink);
}
/* mini variant — header brand mark, favicon-ish scale */
.rt-logo--mini { --logo-size: 42px; }
.rt-logo--mini .rt-logo__admit,
.rt-logo--mini .rt-logo__perf { display: none; }
.rt-logo--mini .rt-logo__ticket { border-width: 1.5px; }
.rt-logo--mini .rt-logo__fmc { font-size: 1.9em; }
.rt-logo--still .rt-logo__disc { animation: none; }
/* inline-SVG-friendly variant — paste the guide's