/* ==========================================================================
FGA events — SHARED base stylesheet
Handwritten CSS. No build step. Loaded by every event page.
This file is STRUCTURE: layout, spacing, components, breakpoints.
It holds NO colours of its own — every colour is a var() defined in the
event's own event.css, which each page loads AFTER this file.
Don't put event-specific styles here, and don't rename this path:
every event page and the template hard-code /shared/css/base.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts
-------------------------------------------------------------------------- */
@font-face {
font-family: "TAY Roony";
src: url("/shared/fonts/tay-roony.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "TAY Second String";
src: url("/shared/fonts/tay-second-string.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* DM Sans is loaded with a in the page . */
/* --------------------------------------------------------------------------
2. Design tokens
-------------------------------------------------------------------------- */
/* Structural tokens only. Every COLOUR token lives in the event's event.css,
which is loaded after this file — that is what makes a new event re-skinnable
by editing one file. Fonts are shared, so they stay here. */
:root {
/* Type — shared across every event. TAY faces are self-hosted above. */
--font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "TAY Roony", Georgia, serif;
--font-condensed: "TAY Second String", system-ui, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
/* Layout */
--wide: 1400px;
--shell-pad: 1.5rem;
/* Paper-grain noise used on the orange band and the venue section. */
--noise: url("data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
:root { --shell-pad: 3rem; }
}
/* --------------------------------------------------------------------------
3. Reset / base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: hidden;
background: var(--background);
color: var(--foreground);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
address { font-style: normal; }
::selection { background: var(--primary); color: var(--cream); }
:focus-visible {
outline: 3px solid currentColor;
outline-offset: 4px;
}
/* Anchor targets sit below the fixed header. */
[id] { scroll-margin-top: 6rem; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
4. Type helpers
-------------------------------------------------------------------------- */
.display {
font-family: var(--font-display);
font-weight: 400;
line-height: 0.9;
}
.condensed {
font-family: var(--font-condensed);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* --------------------------------------------------------------------------
5. Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
padding: 1rem 2rem;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn svg { flex: none; transition: transform 0.3s ease; }
.btn:hover svg.arrow-right { transform: translateX(4px); }
.btn--primary { background: var(--primary); color: var(--on-dark); }
.btn--primary:hover { background: var(--foreground); color: var(--on-dark); }
.btn--dark { background: var(--foreground); color: var(--on-dark); }
.btn--dark:hover { background: var(--primary); }
.btn--outline { border: 1px solid rgb(var(--foreground-rgb) / 0.2); color: var(--foreground); }
.btn--outline:hover { border-color: var(--foreground); }
.btn--light { background: var(--surface); color: var(--primary); padding: 1.25rem 2rem; }
.btn--light:hover { background: var(--foreground); color: var(--on-dark); }
.btn--ghost-light {
border: 1px solid rgb(var(--cream-rgb) / 0.3);
color: var(--cream);
}
.btn--ghost-light:hover { background: var(--cream); color: var(--foreground); }
.btn--onprimary { background: var(--primary); color: var(--on-dark); }
.btn--onprimary:hover { background: var(--surface); color: var(--primary); }
/* --------------------------------------------------------------------------
6. Site header + navigation
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
padding-block: 1.5rem;
background: transparent;
transition: background-color 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
}
.site-header.is-scrolled {
padding-block: 1rem;
background: rgb(var(--cream-rgb) / 0.9);
backdrop-filter: blur(12px);
box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.site-header__inner {
max-width: var(--wide);
margin-inline: auto;
padding-inline: var(--shell-pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.site-header__logo { position: relative; z-index: 70; display: block; }
.site-header__logo img { height: 2.5rem; width: auto; object-fit: contain; }
.nav-desktop { display: none; align-items: center; gap: 2rem; }
.nav-desktop__link {
position: relative;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
transition: color 0.3s ease;
}
.nav-desktop__link:hover { color: var(--primary); }
.nav-desktop__link::after {
content: "";
position: absolute;
left: 0;
bottom: -0.5rem;
height: 2px;
width: 0;
background: var(--primary);
transition: width 0.3s ease;
}
.nav-desktop__link:hover::after { width: 100%; }
.nav-desktop .btn { padding: 0.75rem 1.5rem; }
/* Mobile navigation — a element, so it works with JS disabled. */
.nav-mobile { position: relative; z-index: 60; }
.nav-mobile > summary {
list-style: none;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
margin-right: -0.5rem;
cursor: pointer;
color: var(--foreground);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary .icon-close { display: none; }
.nav-mobile[open] > summary .icon-menu { display: none; }
.nav-mobile[open] > summary .icon-close { display: block; }
.nav-mobile:not([open]) .nav-mobile__panel { display: none; }
.nav-mobile__panel {
position: fixed;
inset: 0;
z-index: 1;
background: var(--cream);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.nav-mobile__link {
font-family: var(--font-display);
font-size: 2.25rem;
line-height: 1;
transition: color 0.3s ease;
}
.nav-mobile__link:hover { color: var(--primary); }
.nav-mobile__panel .btn { margin-top: 2rem; font-size: 1.125rem; padding: 1rem 2.5rem; }
/* Lock the page behind the open menu. */
body:has(.nav-mobile[open]) { overflow: hidden; }
@media (min-width: 768px) {
.site-header { padding-block: 1.5rem; }
.site-header__logo img { height: 3rem; }
.nav-desktop { display: flex; }
.nav-mobile { display: none; }
}
/* --------------------------------------------------------------------------
7. Hero — banner image + dark info bar
-------------------------------------------------------------------------- */
.hero-banner {
padding-top: 6rem;
padding-bottom: 2.5rem;
}
.hero-banner__img {
width: 100%;
height: auto;
background: var(--primary);
object-fit: cover;
}
.infobar-wrap { padding: 1.25rem 1rem 0; }
.infobar {
max-width: 1280px;
margin-inline: auto;
border-top: 4px solid var(--primary);
background: var(--foreground);
color: var(--cream);
padding: 1.5rem;
box-shadow: 0 18px 45px rgb(24 23 21 / 0.16);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.infobar__facts {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
width: 100%;
text-align: center;
}
.infobar__fact { display: flex; align-items: center; gap: 0.75rem; }
.infobar__fact svg { color: var(--primary); flex: none; }
.infobar__label {
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
color: var(--primary);
margin-bottom: 0.25rem;
}
.infobar__value { font-weight: 700; font-size: 1.125rem; letter-spacing: 0.025em; }
.infobar__divider { display: none; width: 1px; height: 3rem; background: rgb(var(--cream-rgb) / 0.2); }
.infobar .btn { margin-top: 1.5rem; flex: none; }
@media (min-width: 640px) {
.infobar__facts { flex-direction: row; }
.infobar__divider { display: block; }
}
@media (min-width: 768px) {
.hero-banner { padding-top: 7rem; padding-bottom: 4rem; }
.infobar-wrap { padding: 1.75rem 2rem 0; }
.infobar { flex-direction: row; padding: 1.5rem 2.5rem; }
.infobar__facts { gap: 3rem; text-align: left; width: auto; }
.infobar .btn { margin-top: 0; }
}
/* --------------------------------------------------------------------------
8. Intro — "The Fight Starts With You."
-------------------------------------------------------------------------- */
.intro {
position: relative;
overflow: hidden;
padding: 0 var(--shell-pad) 6rem;
}
.intro::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 66.6667%;
height: 100%;
background: rgb(var(--blush-rgb) / 0.4);
transform: skewX(-12deg);
transform-origin: top right;
z-index: 0;
}
.intro__grid {
position: relative;
z-index: 1;
max-width: var(--wide);
margin-inline: auto;
display: grid;
gap: 3rem;
align-items: center;
}
.eyebrow-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: var(--blush-solid);
border: 1px solid rgb(var(--border-rgb) / 0.5);
padding: 0.5rem 1rem;
margin-bottom: 1.5rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
color: var(--blush-ink);
}
.eyebrow-badge .dot {
width: 0.5rem; height: 0.5rem;
border-radius: 999px;
background: var(--primary);
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
.intro h1 {
font-family: var(--font-display);
font-size: 3rem;
line-height: 0.9;
letter-spacing: -0.025em;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.intro__lead {
font-size: 1.125rem;
line-height: 1.7;
color: rgb(var(--foreground-rgb) / 0.8);
max-width: 28rem;
margin-bottom: 2.5rem;
}
.intro__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.intro__media { position: relative; width: 100%; }
.intro__frame {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 4 / 3;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.intro__frame img { width: 100%; height: 100%; object-fit: cover; }
.intro__frame::after {
content: "";
position: absolute;
inset: 0;
background: rgb(var(--primary-rgb) / 0.1);
mix-blend-mode: multiply;
}
.intro__stamp { display: none; }
.intro__ring { display: none; }
@media (min-width: 768px) {
.intro h1 { font-size: 3.75rem; }
.intro__lead { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
.intro__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 2rem;
}
.intro__copy { grid-column: span 5; }
.intro__media { grid-column: span 7; padding: 2rem; height: 620px; }
.intro h1 { font-size: 4.5rem; }
.intro__frame { aspect-ratio: auto; height: 100%; }
.intro__stamp {
display: flex;
position: absolute;
bottom: -2rem; left: -2rem;
width: 12rem; height: 12rem;
padding: 1.5rem;
background: var(--primary);
color: var(--on-dark);
font-family: var(--font-display);
font-size: 1.875rem;
line-height: 0.9;
align-items: center;
justify-content: center;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
z-index: 2;
}
.intro__ring {
display: block;
position: absolute;
top: 25%; right: -3rem;
width: 16rem; height: 16rem;
border: 1px solid rgb(var(--foreground-rgb) / 0.1);
border-radius: 999px;
}
}
@media (min-width: 1280px) {
.intro__media { height: 720px; }
}
/* --------------------------------------------------------------------------
9. About — "A War States Can Win."
-------------------------------------------------------------------------- */
.about {
position: relative;
overflow: hidden;
padding: 6rem var(--shell-pad);
background: var(--foreground);
color: var(--cream);
}
.about::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 50%; height: 100%;
background: rgb(var(--primary-rgb) / 0.1);
transform: skewX(-12deg);
transform-origin: bottom;
}
.about__grid {
position: relative;
z-index: 1;
max-width: var(--wide);
margin-inline: auto;
display: grid;
gap: 4rem;
align-items: center;
}
.about h2 {
font-family: var(--font-display);
font-size: 3.75rem;
line-height: 0.9;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 2rem;
}
.about h2 .cream { color: var(--cream); }
.about__rule { height: 4px; width: 6rem; background: var(--primary); }
.about__body { display: flex; flex-direction: column; gap: 2rem; }
.about__body p {
font-size: 1.125rem;
font-weight: 300;
line-height: 1.7;
color: rgb(var(--cream-rgb) / 0.8);
}
.about__body p.lead {
font-size: 1.5rem;
font-weight: 400;
color: var(--cream);
}
.about__contact {
padding-top: 2rem;
border-top: 1px solid rgb(var(--cream-rgb) / 0.2);
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: space-between;
}
.about__contact .label {
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
color: var(--primary);
margin-bottom: 0.25rem;
}
.about__contact .note { font-size: 0.875rem; color: rgb(var(--cream-rgb) / 0.6); font-weight: 400; }
@media (min-width: 640px) {
.about__contact { flex-direction: row; align-items: center; }
}
@media (min-width: 768px) {
.about { padding-block: 8rem; }
.about h2 { font-size: 4.5rem; }
.about__body p { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
.about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about h2 { font-size: 7rem; }
}
/* --------------------------------------------------------------------------
10. Photo collage
-------------------------------------------------------------------------- */
.collage {
position: relative;
overflow: hidden;
padding: 4rem var(--shell-pad);
background: var(--background);
}
.collage::before {
content: "";
position: absolute;
top: 50%; left: 0;
width: 33.3333%; height: 50%;
background: rgb(var(--blush-rgb) / 0.3);
transform: skewY(-12deg);
z-index: 0;
}
.collage__grid {
position: relative;
z-index: 1;
max-width: var(--wide);
margin-inline: auto;
display: grid;
gap: 2rem;
align-items: center;
}
.collage__main { position: relative; height: 400px; }
.collage__main img {
width: 100%; height: 100%;
object-fit: cover;
border: 8px solid var(--background);
background: var(--background);
box-shadow: 0 20px 50px rgb(0 0 0 / 0.15);
}
.collage__main::before {
content: "";
position: absolute;
bottom: -2rem; left: -2rem;
width: 12rem; height: 12rem;
background: rgb(var(--primary-rgb) / 0.1);
z-index: -1;
}
.collage__stack { display: grid; gap: 1rem; }
.collage__wide { position: relative; height: 250px; }
.collage__wide img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 22%;
filter: grayscale(0.2);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}
.collage__wide::after {
content: "";
position: absolute; inset: 0;
background: rgb(var(--primary-rgb) / 0.1);
mix-blend-mode: multiply;
}
.collage__inset { position: relative; height: 250px; margin-top: -3rem; z-index: 2; }
.collage__inset img {
width: 100%; height: 100%;
object-fit: cover;
border: 4px solid var(--background);
background: var(--background);
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
@media (min-width: 768px) {
.collage { padding-block: 6rem; }
.collage__main { height: 500px; }
.collage__stack { gap: 2rem; }
.collage__wide { height: 350px; }
.collage__inset { height: 300px; margin-top: -6rem; }
}
@media (min-width: 1024px) {
.collage__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.collage__main { grid-column: span 5; }
.collage__stack { grid-column: span 7; }
.collage__wide { margin-left: 3rem; }
.collage__inset { margin-right: 3rem; }
}
/* --------------------------------------------------------------------------
11. Pillars — the orange "How the War Is Won." band
-------------------------------------------------------------------------- */
.pillars {
position: relative;
overflow: hidden;
padding: 6rem var(--shell-pad);
background: var(--primary);
color: var(--foreground);
}
.pillars::before {
content: "";
position: absolute; inset: 0;
background-image: var(--noise);
opacity: 0.15;
pointer-events: none;
}
.pillars__inner { position: relative; z-index: 1; max-width: var(--wide); margin-inline: auto; }
.pillars__head { max-width: 48rem; margin: 0 auto 4rem; text-align: center; }
.pillars__head .eyebrow {
display: block;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.875rem;
color: rgb(var(--foreground-rgb) / 0.7);
margin-bottom: 1rem;
}
.pillars__head h2 {
font-family: var(--font-display);
font-size: 3rem;
line-height: 0.9;
text-transform: uppercase;
}
.pillars__head p {
margin-top: 1.5rem;
font-size: 1.125rem;
color: rgb(var(--foreground-rgb) / 0.8);
}
.pillars__grid { display: grid; gap: 2rem; }
.pillar {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border-top: 4px solid var(--primary);
padding: 2rem;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
transition: transform 0.3s ease;
}
.pillar:hover { transform: translateY(-0.5rem); }
.pillar__num {
position: absolute;
top: 1.5rem; right: 2rem;
font-family: var(--font-display);
font-size: 3.75rem;
line-height: 1;
color: var(--primary);
opacity: 0.1;
user-select: none;
transition: opacity 0.3s ease;
}
.pillar:hover .pillar__num { opacity: 0.2; }
.pillar h3 {
position: relative;
z-index: 1;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.pillar p { position: relative; z-index: 1; flex: 1; color: rgb(var(--foreground-rgb) / 0.8); line-height: 1.7; }
@media (min-width: 768px) {
.pillars { padding-block: 8rem; }
.pillars__head { margin-bottom: 6rem; }
.pillars__head h2 { font-size: 3.75rem; }
.pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar { padding: 2.5rem; }
}
@media (min-width: 1024px) {
.pillars__grid { gap: 3rem; }
}
/* --------------------------------------------------------------------------
12. Agenda
-------------------------------------------------------------------------- */
.agenda {
position: relative;
padding: 6rem var(--shell-pad);
background: var(--cream);
}
.agenda__inner { max-width: 1000px; margin-inline: auto; }
.agenda__head { margin-bottom: 5rem; }
.agenda__head h2 {
font-family: var(--font-display);
font-size: 3rem;
line-height: 0.9;
text-transform: uppercase;
margin-bottom: 1rem;
}
.agenda__head p { font-size: 1.125rem; color: rgb(var(--foreground-rgb) / 0.6); }
.agenda__day + .agenda__day { margin-top: 6rem; }
.agenda__daytitle {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.agenda__daytitle h3 {
font-family: var(--font-display);
font-size: 1.875rem;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.agenda__daytitle .rule { height: 2px; width: 100%; background: rgb(var(--primary-rgb) / 0.2); }
.agenda__list { list-style: none; margin: 0; padding: 0; }
.agenda__item {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 2rem 1.5rem;
margin-inline: -1.5rem;
border-bottom: 1px solid rgb(var(--foreground-rgb) / 0.1);
transition: background-color 0.3s ease;
}
.agenda__item:hover { background: var(--surface); }
.agenda__time {
width: 10rem;
flex: none;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
color: var(--primary);
}
.agenda__item h4 {
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.15;
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.agenda__item:hover h4 { color: var(--primary); }
.agenda__label {
display: block;
margin: 0.75rem 0 0.25rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.68rem;
color: var(--primary);
}
.agenda__detail--presenter {
font-family: var(--font-serif);
font-style: italic;
color: rgb(var(--foreground-rgb) / 0.7);
}
.agenda__detail--description {
max-width: 48rem;
line-height: 1.6;
color: rgb(var(--foreground-rgb) / 0.65);
}
@media (min-width: 768px) { .agenda__detail { font-size: 1.125rem; } }
@media (min-width: 768px) {
.agenda { padding-block: 8rem; }
.agenda__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.agenda__head h2 { font-size: 4.5rem; }
.agenda__head p { font-size: 1.25rem; }
.agenda__daytitle { flex-direction: row; align-items: center; }
.agenda__daytitle h3 { font-size: 2.25rem; }
.agenda__item { flex-direction: row; gap: 3rem; padding-inline: 2rem; margin-inline: -2rem; }
.agenda__item h4 { font-size: 1.5rem; }
.agenda__detail { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
13. "Build The Strategy." image band
-------------------------------------------------------------------------- */
.strategy {
position: relative;
isolation: isolate;
height: 400px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.strategy img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 30%; /* the speaker's head sits in the upper third of the photo */
filter: grayscale(0.4);
}
.strategy__shade { position: absolute; inset: 0; z-index: 1; background: rgb(var(--foreground-rgb) / 0.6); mix-blend-mode: multiply; }
.strategy__burn { position: absolute; inset: 0; z-index: 2; background: rgb(var(--primary-rgb) / 0.3); mix-blend-mode: color-burn; }
.strategy h2 {
position: relative;
z-index: 3;
text-align: center;
padding-inline: 1.5rem;
font-family: var(--font-display);
font-size: 3rem;
line-height: 0.9;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--on-dark);
}
@media (min-width: 768px) {
.strategy { height: 500px; }
.strategy h2 { font-size: 4.5rem; }
}
@media (min-width: 1024px) {
.strategy h2 { font-size: 6rem; }
}
/* --------------------------------------------------------------------------
14. Venue / location
-------------------------------------------------------------------------- */
.venue {
position: relative;
overflow: hidden;
padding: 6rem var(--shell-pad);
background: var(--sand);
}
.venue::before {
content: "";
position: absolute; inset: 0;
background-image: var(--noise);
opacity: 0.2;
pointer-events: none;
}
.venue__inner { position: relative; z-index: 1; max-width: var(--wide); margin-inline: auto; }
.venue__grid { display: grid; gap: 2rem; }
.venue__grid > * { min-width: 0; }
.venue__card {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--cream);
padding: 2.5rem;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.venue__tag {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--primary);
margin-bottom: 1.5rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
}
.venue__card h2 {
font-family: var(--font-display);
font-size: 2rem;
overflow-wrap: break-word;
line-height: 1.1;
margin-bottom: 1rem;
}
.venue__card > p { font-size: 1.125rem; color: rgb(var(--foreground-rgb) / 0.7); margin-bottom: 2rem; }
.venue__card address { color: rgb(var(--foreground-rgb) / 0.7); line-height: 1.7; margin-bottom: 2rem; }
.venue__meta {
margin-top: auto;
padding-top: 2rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: flex-start;
}
.venue__date { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; }
.venue__date svg { color: var(--primary); flex: none; }
.venue__directions {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
color: var(--primary);
transition: color 0.3s ease;
}
.venue__directions:hover { color: var(--foreground); }
.venue__map {
position: relative;
min-height: 460px;
overflow: hidden;
background: var(--cream);
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.venue__cta {
margin-top: 2rem;
background: var(--primary);
color: var(--on-dark);
padding: 2.5rem;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.venue__cta .eyebrow {
display: block;
margin-bottom: 0.75rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
color: rgb(var(--on-dark-rgb) / 0.75);
}
.venue__cta h2 {
font-family: var(--font-display);
font-size: 2.25rem;
line-height: 1;
text-transform: uppercase;
}
.venue__cta p { margin-top: 1rem; max-width: 42rem; font-size: 1.125rem; color: rgb(var(--on-dark-rgb) / 0.9); }
.venue__cta strong { font-weight: 700; }
@media (min-width: 768px) {
.venue { padding-block: 8rem; }
.venue__card { padding: 4rem; }
.venue__card h2 { font-size: 3rem; }
.venue__cta { padding: 3.5rem; }
.venue__cta h2 { font-size: 3rem; }
}
@media (min-width: 1024px) {
.venue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
.venue__cta { margin-top: 4rem; flex-direction: row; align-items: center; justify-content: space-between; }
}
/* --------------------------------------------------------------------------
15. Footer
-------------------------------------------------------------------------- */
.site-footer {
background: var(--foreground);
color: var(--cream);
padding: 4rem 1.5rem;
}
.site-footer__inner {
max-width: var(--wide);
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.site-footer__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.site-footer__brand img { height: 2.5rem; width: auto; filter: brightness(0) invert(1); }
.site-footer__divider { display: none; width: 1px; height: 2rem; background: rgb(var(--cream-rgb) / 0.2); }
.site-footer__copy { font-size: 0.875rem; color: rgb(var(--cream-rgb) / 0.5); text-align: center; }
.site-footer__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
color: rgb(var(--cream-rgb) / 0.5);
}
.site-footer__links a { transition: color 0.3s ease; }
.site-footer__links a:hover { color: var(--primary); }
@media (min-width: 640px) {
.site-footer__brand { flex-direction: row; }
.site-footer__divider { display: block; }
.site-footer__copy { text-align: left; }
}
@media (min-width: 768px) {
.site-footer__inner { flex-direction: row; }
}
/* --------------------------------------------------------------------------
16. Register page
-------------------------------------------------------------------------- */
.register-header {
position: sticky;
top: 0;
z-index: 50;
padding: 1.5rem var(--shell-pad);
background: var(--cream);
border-bottom: 1px solid var(--border);
}
.register-header__inner {
max-width: var(--wide);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.register-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
transition: color 0.3s ease;
}
.register-back:hover { color: var(--primary); }
.register-back svg { transition: transform 0.3s ease; }
.register-back:hover svg { transform: translateX(-4px); }
.register-back .long { display: none; }
.register-header img { height: 2rem; width: auto; object-fit: contain; }
@media (min-width: 640px) {
.register-back .long { display: inline; }
.register-back .short { display: none; }
}
@media (min-width: 768px) {
.register-header img { height: 2.5rem; }
}
.register-banner { background: var(--primary); overflow: hidden; }
.register-banner img { width: 100%; height: auto; object-fit: cover; }
.register-strip {
border-bottom: 1px solid var(--border);
background: var(--blush-solid);
padding: 1.5rem var(--shell-pad);
}
.register-strip__inner {
max-width: var(--wide);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.register-strip h1 {
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.875rem;
color: var(--blush-ink);
margin-bottom: 0.25rem;
}
.register-strip p { font-size: 0.875rem; color: rgb(var(--blush-ink-rgb) / 0.7); }
.ping { position: relative; display: flex; width: 0.75rem; height: 0.75rem; flex: none; }
.ping::before {
content: "";
position: absolute; inset: 0;
border-radius: 999px;
background: var(--primary);
opacity: 0.75;
animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ping::after {
content: "";
position: relative;
width: 0.75rem; height: 0.75rem;
border-radius: 999px;
background: var(--primary);
}
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0 } }
@media (min-width: 640px) {
.register-strip__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cvent {
position: relative;
width: 100%;
min-height: 100dvh;
background: var(--surface);
}
.cvent [data-cvt-embed="true"],
.cvent iframe {
width: 100% !important;
min-height: 100dvh !important;
}
.cvent iframe { border: 0; display: block; }
/* Embed failed: drop the reserved full-height box so the help text is visible. */
.cvent--failed { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.cvent--failed [data-cvt-embed="true"] { display: none; }
.cvent__spinner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
pointer-events: none;
}
.cvent__spinner[hidden] { display: none; }
.cvent__spinner .ring {
width: 2.5rem; height: 2.5rem;
border: 4px solid rgb(var(--primary-rgb) / 0.2);
border-top-color: var(--primary);
border-radius: 999px;
animation: spin 1s linear infinite;
}
.cvent__spinner .label {
font-family: var(--font-display);
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--primary);
}
@keyframes spin { to { transform: rotate(360deg) } }
.cvent__fallback {
position: relative;
z-index: 2;
max-width: 40rem;
margin: 0 auto;
padding: 3rem 1.5rem;
text-align: center;
background: var(--surface);
}
.cvent__fallback h2 {
font-family: var(--font-display);
font-size: 1.75rem;
text-transform: uppercase;
margin-bottom: 1rem;
}
.cvent__fallback p { color: rgb(var(--foreground-rgb) / 0.75); margin-bottom: 1.5rem; }
.cvent__fallback .links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* --------------------------------------------------------------------------
17. Scroll reveal
The `js` class is only added by site.js when IntersectionObserver exists,
so with JS off (or broken) nothing is ever hidden.
-------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in {
opacity: 1;
transform: none;
transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}