/* ═══════════════════════════════════════════════════════════════════════ The two pages that are not a session: the home screen and the archive of evenings. Loaded after base.css, which already brings the typefaces, the paper stage, the grain and the footer. Names no colour of its own — the palette arrives as theme tokens in the page's , the same way a session page is dressed. ═══════════════════════════════════════════════════════════════════════ */ /* ════════════════════════ SLOW WINE GLOWS ════════════════════════ */ /* Two drifting pools of accent, so the black never sits flat on a page that has no photography to carry it. */ .page-glow { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.5; z-index: -1; pointer-events: none; } .page-glow-a { width: min(60vw, 34rem); height: min(60vw, 34rem); top: -12vh; left: -10vw; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%); animation: page-drift-a 22s ease-in-out infinite alternate; } .page-glow-b { width: min(52vw, 28rem); height: min(52vw, 28rem); bottom: -14vh; right: -8vw; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%); animation: page-drift-b 28s ease-in-out infinite alternate; } @keyframes page-drift-a { to { transform: translate(6vw, 5vh) scale(1.12); } } @keyframes page-drift-b { to { transform: translate(-5vw, -6vh) scale(1.08); } } /* ════════════════════════ THE MARK ════════════════════════ */ /* The wordmark at full size, for the home page. The session pages animate their own copy with GSAP; this one is static on purpose — the front door loads no scroll machinery at all. */ .home-mark { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.6rem, 15vw, 11rem); line-height: 0.86; letter-spacing: -0.015em; display: flex; justify-content: center; white-space: nowrap; } .home-mark .word-cut { color: var(--accent-bright); position: relative; } /* the "cut": a thin slice starting inside NIGHT and rising through CUT */ .home-mark .word-cut::after { content: ""; position: absolute; left: -38%; right: -3%; top: 34%; height: 1px; background: var(--text); transform: rotate(-3deg); opacity: 0.65; } /* ════════════════════════ PAGE SHELL ════════════════════════ */ .screen { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(2rem, 6vh, 3.5rem); padding: clamp(1.75rem, 5vh, 3rem) var(--gutter); } .screen-center { text-align: center; } .wordmark { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; } .middle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.1rem, 3vh, 1.8rem); } /* the live dot next to "Session 02 · Lisbon" */ .eyebrow { display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); animation: eyebrow-pulse 2.6s ease-in-out infinite; } @keyframes eyebrow-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } } .page-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 9vw, 6rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 16ch; } .page-title em { font-style: normal; color: var(--accent-bright); } .lede { max-width: 34rem; color: var(--text-dim); } .links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.9rem, 3vw, 2rem); margin-top: clamp(0.5rem, 2vh, 1rem); } .link { font-family: var(--font-body); font-weight: 600; font-size: clamp(0.72rem, 0.9vw, 0.86rem); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; padding-bottom: 0.35em; border-bottom: 1px solid var(--text-faint); transition: color 0.25s ease, border-color 0.25s ease; } .link:hover, .link:focus-visible { color: var(--accent-bright); border-color: var(--accent-bright); } .page-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6em 1.4em; color: var(--text-faint); font-size: clamp(0.72rem, 0.9vw, 0.82rem); letter-spacing: 0.12em; text-transform: uppercase; } .page-foot a { text-decoration: none; } .page-foot a:hover { color: var(--accent-bright); } /* a quiet fade-up on load */ .rise { opacity: 0; transform: translateY(14px); animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .rise:nth-child(2) { animation-delay: 0.1s; } .rise:nth-child(3) { animation-delay: 0.2s; } .rise:nth-child(4) { animation-delay: 0.3s; } .rise:nth-child(5) { animation-delay: 0.4s; } @keyframes rise { to { opacity: 1; transform: none; } } /* ════════════════════════ HOME ════════════════════════ */ /* A column of blocks rather than a scroll of scenes: the mark, who the club is, the evenings, and the way out to each of them. */ .home { width: 100%; max-width: 52rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(2.5rem, 7vh, 4.5rem); padding-block: clamp(1rem, 4vh, 3rem); } .home-intro { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 3vh, 1.6rem); text-align: center; } .home-tagline { font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.75rem); line-height: 1.3; color: var(--text-dim); max-width: 24ch; } .home-tagline em { font-style: italic; color: var(--text); } .home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; } .home-section-more { text-decoration: none; color: var(--text-dim); transition: color 0.25s ease; } .home-section-more:hover { color: var(--accent-bright); } /* ════════════════════════ THE EVENINGS (home) ════════════════════════ */ /* High on the page and deliberately loud: this is the one section a visitor is looking for. The rows are bigger here than on the archive page, and the evening you can actually still get into is pulled out of the list. */ .home-sessions-scene { padding: clamp(6rem, 15vh, 11rem) var(--gutter); } .sessions-inner { max-width: 68rem; margin: 0 auto; } .sessions-head { margin-bottom: clamp(2.5rem, 6vh, 4rem); } .sessions-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.98; margin-top: 0.25em; } .sessions-list .archive-row { padding: clamp(2rem, 5vh, 3.2rem) 0; align-items: center; } .sessions-list .archive-num { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 0.9; } .sessions-list .archive-name { font-size: clamp(1.7rem, 4.5vw, 3rem); line-height: 1.05; } .sessions-list .archive-meta { margin-top: 0.6em; } /* ── the nearest evening ── */ /* It gets the accent, a heavier rule above it and a number you cannot miss. Everything behind it stays a quiet list. */ .sessions-list .is-next { border-top-color: var(--accent); border-top-width: 2px; } .sessions-list .is-next .archive-num { color: var(--accent-bright); } .sessions-list .is-next .archive-name { color: var(--text); } .sessions-list .is-next .archive-tag { border-color: var(--accent-bright); color: var(--accent-bright); } /* a slim wash of accent behind the row, so it reads as a block not a line */ .sessions-list .is-next { position: relative; } .sessions-list .is-next::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -0.5); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%); pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .sessions-list .is-next::before { opacity: 1; } .sessions-more { margin-top: clamp(2rem, 5vh, 3rem); } @media (max-width: 40rem) { .sessions-list .archive-row { align-items: start; } } @media (max-width: 40rem) { .home .links { justify-content: center; } .home-section-head { flex-direction: column; align-items: flex-start; gap: 0.4rem; } } /* ════════════════════════ PAST EVENINGS STRIP ════════════════════════ */ /* On the home screen: a quiet line of what has already happened, so the club reads as something with a history rather than a single event. */ .past-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8em 1.6em; margin-top: clamp(1.5rem, 5vh, 3rem); padding-top: clamp(1.5rem, 4vh, 2.5rem); border-top: 1px solid var(--text-ghost); } .past-strip a { text-decoration: none; color: var(--text-dim); transition: color 0.25s ease; } .past-strip a:hover { color: var(--text); } /* ════════════════════════ ARCHIVE ════════════════════════ */ .archive { max-width: 62rem; margin: 0 auto; width: 100%; } .archive-head { margin-bottom: clamp(2.5rem, 7vh, 4.5rem); } .archive-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 7vw, 4.5rem); line-height: 1.05; margin-top: 0.4em; } .archive-list { list-style: none; } .archive-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.6rem clamp(1rem, 3vw, 2.5rem); padding: clamp(1.6rem, 4vh, 2.4rem) 0; border-top: 1px solid var(--text-ghost); text-decoration: none; transition: border-color 0.3s ease; } .archive-list li:last-child .archive-row { border-bottom: 1px solid var(--text-ghost); } .archive-row:hover { border-color: var(--text-faint); } .archive-num { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; color: var(--text-faint); transition: color 0.3s ease; } .archive-row:hover .archive-num { color: var(--accent-bright); } .archive-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.15; } .archive-meta { margin-top: 0.5em; display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; } /* the evening's own palette, worn as a small swatch on its row */ .archive-swatch { display: inline-block; width: 0.65em; height: 0.65em; border-radius: 50%; margin-right: 0.2em; vertical-align: baseline; } .archive-tag { font-family: var(--font-body); font-weight: 600; font-size: clamp(0.6rem, 0.75vw, 0.72rem); letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; padding: 0.5em 1.1em; border-radius: 999px; border: 1px solid var(--text-faint); color: var(--text-dim); } .archive-tag.is-open { border-color: var(--accent-bright); color: var(--accent-bright); } @media (max-width: 40rem) { .archive-row { grid-template-columns: auto 1fr; } .archive-tag { grid-column: 2; justify-self: start; margin-top: 0.6em; } } @media (prefers-reduced-motion: reduce) { .page-glow-a, .page-glow-b, .eyebrow::before { animation: none; } .rise { animation: none; opacity: 1; transform: none; } }