/* ═══════════════════════════════════════════════════════════════════════ The club's base layer: the two typefaces, the reset, the crumpled-paper stage, the film grain, the one button and the footer. Everything a NightCut page needs before it decides what kind of page it is. Like every stylesheet here it names no colour — each one resolves through the theme tokens tools/build.js writes into the page's . ═══════════════════════════════════════════════════════════════════════ */ /* ════════════════════════ FONTS ════════════════════════ */ /* AM Gazet Angled — headers / display only */ @font-face { font-family: 'AM Gazet'; src: url('../font/AM%20Gazet/Angled/woff2/AMGazetAngled-Regular.woff2') format('woff2'), url('../font/AM%20Gazet/Angled/woff/AMGazetAngled-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'AM Gazet'; src: url('../font/AM%20Gazet/Angled/woff2/AMGazetAngled-Medium.woff2') format('woff2'), url('../font/AM%20Gazet/Angled/woff/AMGazetAngled-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'AM Gazet'; src: url('../font/AM%20Gazet/Angled/woff2/AMGazetAngled-Bold.woff2') format('woff2'), url('../font/AM%20Gazet/Angled/woff/AMGazetAngled-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } /* Akrobat (Fontfabric) — all running text */ @font-face { font-family: 'Akrobat'; src: url('../font/Akrobat/Akrobat-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Akrobat'; src: url('../font/Akrobat/Akrobat-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Akrobat'; src: url('../font/Akrobat/Akrobat-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } /* ════════════════════════ TOKENS ════════════════════════ */ :root { /* The theme tokens (--surface … --ink-faint) are injected per page from data/sessions.js — see tools/build.js. Only the type and the gutter below belong to the club rather than to one evening. */ --font-display: 'AM Gazet', Georgia, serif; --font-body: 'Akrobat', 'Helvetica Neue', Arial, sans-serif; --gutter: clamp(1.25rem, 4vw, 4rem); } /* ════════════════════════ BASE ════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x guard */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--black); color: var(--beige); font-family: var(--font-body); font-size: clamp(1.05rem, 1.1vw + 0.7rem, 1.3rem); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--wine); color: var(--beige); } /* the crumpled-paper stage */ /* The image itself is set per page, in the inline theme block: a relative URL inside a custom property resolves against the stylesheet that uses it rather than the page that declares it, which is the wrong base here. */ .paper-bg { position: fixed; inset: 0; z-index: -1; /* Long-hand on purpose: the `background` shorthand would reset the image the page sets in its own inline theme block, whichever order they load. */ background-color: var(--surface); background-position: center; background-size: cover; background-repeat: no-repeat; } img { max-width: 100%; display: block; } a { color: inherit; } /* Akrobat = the information layer: labels, dates, seats, nav, buttons */ .label { font-family: var(--font-body); font-weight: 600; font-size: clamp(0.66rem, 0.8vw, 0.82rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--beige-dim); } /* ════════════════════════ SKIP LINK ════════════════════════ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 4000; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; padding: 0.8em 1.5em; text-decoration: none; } .skip-link:focus { left: 0; } /* ════════════════════════ GRAIN OVERLAY ════════════════════════ */ .grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 2000; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-shift 0.9s steps(4) infinite; } @keyframes grain-shift { 0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); } 50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,2%); } 100% { transform: translate(0,0); } } /* ════════════════════════ RESERVE BUTTON ════════════════════════ */ .btn-reserve { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-body); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.3em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--paper); padding: 1.35em 2.8em; border: none; border-radius: 999px; cursor: pointer; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, color 0.35s ease; } .btn-reserve:hover { transform: translateY(-3px); background: var(--beige); } .btn-reserve .arrow { transition: transform 0.35s ease; } .btn-reserve:hover .arrow { transform: translateX(6px); } /* ════════════════════════ FOOTER ════════════════════════ */ .footer { border-top: 1px dashed var(--beige-faint); padding: clamp(2.5rem, 6vh, 4rem) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } /* the brand block is the way home from any page */ .footer-brand { display: flex; align-items: center; gap: 1.2rem; text-decoration: none; } .footer-brand:hover .label { color: var(--wine-bright); } .footer-brand img { width: 56px; height: 56px; } .footer-brand .label { letter-spacing: 0.22em; } .footer-right { display: flex; gap: 1rem 2.5rem; align-items: center; flex-wrap: wrap; } @media (max-width: 640px) { .footer-right { gap: 0.8rem 1.4rem; } } .footer-link { text-decoration: none; transition: color 0.3s ease; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; } .footer-link:hover { color: var(--wine-bright); } /* ════════════════════════ ACCESSIBILITY ════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .manifesto-text .word { color: var(--beige); } .grain { animation: none; } }