/* ===============================================================
Bayfront Arts — Components
=============================================================== */
/* ---------- Header / Navigation ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: color-mix(in oklab, var(--color-bg) 88%, transparent);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color var(--transition-slow), background-color var(--transition-slow);
}
.site-header--scrolled {
border-bottom-color: var(--color-divider);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
padding-block: var(--space-5);
}
.brand {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text);
}
.brand__mark {
width: 32px;
height: 32px;
color: var(--color-primary);
}
.nav {
display: flex;
align-items: center;
gap: clamp(var(--space-4), 2.5vw, var(--space-8));
}
.nav__link {
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-text-muted);
position: relative;
padding-block: var(--space-1);
}
.nav__link:hover,
.nav__link[aria-current='page'] {
color: var(--color-text);
}
.nav__link[aria-current='page']::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: var(--color-accent);
}
.nav__cta {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-inverse);
background: var(--color-text);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.nav__cta:hover {
background: var(--color-primary);
transform: translateY(-1px);
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-full);
color: var(--color-text-muted);
border: 1px solid transparent;
}
.theme-toggle:hover {
color: var(--color-text);
border-color: var(--color-border);
}
.nav-toggle {
display: none;
width: 36px;
height: 36px;
color: var(--color-text);
}
@media (max-width: 860px) {
.nav {
position: fixed;
inset: 64px 0 auto 0;
flex-direction: column;
align-items: stretch;
background: var(--color-surface);
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
padding: var(--space-6) var(--gutter);
gap: var(--space-4);
transform: translateY(-120%);
transition: transform var(--transition-slow);
max-height: calc(100vh - 64px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav[data-open='true'] {
transform: translateY(0);
}
.nav__link {
font-size: var(--text-lg);
font-family: var(--font-display);
padding-block: var(--space-2);
}
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
/* Language switcher inside the mobile drawer: reorder so it sits above the
Contact CTA and is visible without scrolling. */
.nav .lang-switch {
align-self: flex-start;
margin-top: var(--space-2);
margin-right: 0;
padding: 4px;
order: 50;
}
.nav .nav__cta { order: 60; }
.nav .theme-toggle { order: 70; }
.nav .lang-switch::before {
margin-left: 10px;
width: 16px;
height: 16px;
}
.nav .lang-btn {
padding: 8px 14px;
font-size: 14px;
min-height: 32px;
}
/* Hide the desktop theme toggle inside the mobile drawer — it already appears
elsewhere and clutters the language row */
.nav .theme-toggle { align-self: flex-start; }
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1;
border: 1px solid transparent;
white-space: nowrap;
}
.btn--primary {
background: var(--color-text);
color: var(--color-text-inverse);
}
.btn--primary:hover { background: var(--color-primary); transform: translateY(-1px); }
.btn--ghost {
color: var(--color-text);
border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-text); }
.btn--accent {
background: var(--color-accent);
color: #fff;
}
.btn--accent:hover { background: var(--color-accent-hover); }
/* ---------- Hero ---------- */
.hero {
position: relative;
padding-block: clamp(var(--space-16), 12vw, var(--space-32));
overflow: hidden;
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(var(--space-8), 6vw, var(--space-20));
align-items: center;
}
@media (max-width: 900px) {
.hero__grid {
grid-template-columns: 1fr;
}
}
.hero__eyebrow {
margin-bottom: var(--space-6);
}
.hero__title {
font-size: var(--text-hero);
line-height: 0.95;
letter-spacing: -0.03em;
font-weight: 300;
color: var(--color-text);
}
.hero__title em {
font-style: italic;
font-weight: 300;
color: var(--color-primary);
}
.hero__title .accent {
color: var(--color-accent);
font-style: italic;
font-weight: 300;
}
.hero__lede {
margin-top: var(--space-8);
max-width: 52ch;
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text-muted);
}
.hero__actions {
margin-top: var(--space-10);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.hero__image {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__caption {
position: absolute;
bottom: var(--space-4);
left: var(--space-4);
right: var(--space-4);
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(251, 248, 242, 0.8);
background: rgba(18, 20, 24, 0.4);
padding: var(--space-2) var(--space-3);
backdrop-filter: blur(6px);
border-radius: var(--radius-sm);
}
/* Marquee ticker beneath hero */
.ticker {
border-block: 1px solid var(--color-divider);
overflow: hidden;
background: var(--color-surface);
}
.ticker__track {
display: flex;
gap: var(--space-12);
padding-block: var(--space-5);
animation: ticker 60s linear infinite;
width: max-content;
}
.ticker__item {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-muted);
white-space: nowrap;
}
.ticker__item strong {
color: var(--color-text);
font-weight: 500;
font-family: var(--font-display);
font-size: var(--text-base);
}
.ticker__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent);
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------- Section headings ---------- */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-8);
margin-bottom: var(--space-12);
flex-wrap: wrap;
}
.section-head__title {
font-size: var(--text-2xl);
line-height: 1;
letter-spacing: -0.02em;
max-width: 20ch;
}
.section-head__title em {
font-style: italic;
color: var(--color-primary);
}
.section-head__lede {
max-width: 48ch;
color: var(--color-text-muted);
font-size: var(--text-base);
}
.section-head__link {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text);
border-bottom: 1px solid var(--color-text);
padding-bottom: 2px;
}
.section-head__link:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
/* ---------- Show cards ---------- */
.show-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: clamp(var(--space-6), 3vw, var(--space-10)) clamp(var(--space-6), 3vw, var(--space-8));
}
.show-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.show-card__link {
display: flex;
flex-direction: column;
gap: var(--space-4);
text-decoration: none;
color: inherit;
}
.show-card__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.show-card__foot {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.show-card__price {
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.show-card__tickets {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-1);
padding: 8px 14px;
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--color-text);
text-decoration: none;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.show-card__tickets:hover,
.show-card__tickets:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
}
.show-card__tickets span {
display: inline-block;
transition: transform var(--transition-fast);
}
.show-card__tickets:hover span {
transform: translate(2px, -2px);
}
.show-card__image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-surface-offset);
}
.show-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.show-card__link:hover .show-card__image img {
transform: scale(1.04);
}
.show-card__badges {
position: absolute;
top: var(--space-3);
left: var(--space-3);
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
padding: 5px var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.badge--accent {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
.badge--primary {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
.show-card__meta {
display: flex;
gap: var(--space-3);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.show-card__meta span + span::before {
content: '·';
margin-right: var(--space-3);
color: var(--color-text-faint);
}
.show-card__title {
font-size: var(--text-lg);
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.01em;
}
.show-card__link:hover .show-card__title {
color: var(--color-primary);
}
.show-card__company {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.show-card__company strong {
color: var(--color-text);
font-weight: 500;
}
/* Featured / spotlight show — large editorial card */
.spotlight {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(var(--space-8), 5vw, var(--space-16));
align-items: center;
padding-block: clamp(var(--space-12), 8vw, var(--space-20));
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
}
@media (max-width: 820px) {
.spotlight { grid-template-columns: 1fr; }
}
.spotlight__image {
aspect-ratio: 5 / 4;
overflow: hidden;
border-radius: var(--radius-md);
}
.spotlight__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.spotlight__eyebrow {
margin-bottom: var(--space-5);
}
.spotlight__title {
font-size: var(--text-3xl);
line-height: 0.95;
letter-spacing: -0.025em;
margin-bottom: var(--space-5);
font-weight: 300;
}
.spotlight__title em {
font-style: italic;
color: var(--color-accent);
}
.spotlight__company {
font-size: var(--text-base);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.spotlight__desc {
color: var(--color-text-muted);
font-size: var(--text-base);
margin-bottom: var(--space-8);
max-width: 50ch;
}
.spotlight__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-6) var(--space-8);
margin-bottom: var(--space-10);
padding-block: var(--space-6);
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
}
.spotlight__meta dt {
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-bottom: var(--space-1);
}
.spotlight__meta dd {
font-size: var(--text-sm);
color: var(--color-text);
font-family: var(--font-display);
font-size: var(--text-base);
}
/* ---------- Filter bar ---------- */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
align-items: flex-end;
padding-block: var(--space-8);
border-bottom: 1px solid var(--color-divider);
margin-bottom: var(--space-12);
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.filter-group__label {
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-faint);
font-weight: 500;
}
.filter-chips {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-text-muted);
background: transparent;
}
.chip:hover { color: var(--color-text); border-color: var(--color-text); }
.chip[aria-pressed='true'] {
background: var(--color-text);
color: var(--color-text-inverse);
border-color: var(--color-text);
}
.search-input {
flex: 1 1 240px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-sm);
outline: none;
}
.search-input:focus { border-color: var(--color-primary); }
.filter-count {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
font-variant-numeric: tabular-nums;
}
.filter-count strong { color: var(--color-text); font-weight: 500; font-family: var(--font-display); font-size: var(--text-base); }
/* ---------- Company card ---------- */
.company-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-2);
border-top: 1px solid var(--color-divider);
}
.company-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-5);
align-items: center;
padding: var(--space-6) var(--space-5);
border-bottom: 1px solid var(--color-divider);
text-decoration: none;
color: inherit;
transition: background-color var(--transition-interactive);
}
.company-card:hover {
background: var(--color-surface);
}
.company-card__num {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
min-width: 2.5ch;
}
.company-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 400;
line-height: 1.15;
}
.company-card__sub {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.company-card__arrow {
color: var(--color-text-muted);
transition: transform var(--transition-interactive), color var(--transition-interactive);
}
.company-card:hover .company-card__arrow {
color: var(--color-primary);
transform: translateX(4px);
}
/* ---------- Detail page ---------- */
.detail-hero {
padding-block: clamp(var(--space-12), 8vw, var(--space-20));
border-bottom: 1px solid var(--color-divider);
}
.detail-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(var(--space-8), 5vw, var(--space-16));
align-items: center;
}
@media (max-width: 900px) { .detail-hero__grid { grid-template-columns: 1fr; } }
.detail-hero__image {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.detail-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__title {
font-size: var(--text-3xl);
line-height: 0.95;
letter-spacing: -0.025em;
margin-block: var(--space-5);
font-weight: 300;
}
.detail-hero__title em { font-style: italic; color: var(--color-primary); }
.detail-hero__company {
font-size: var(--text-lg);
color: var(--color-text-muted);
font-family: var(--font-display);
}
.detail-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-6);
margin-top: var(--space-10);
padding-top: var(--space-8);
border-top: 1px solid var(--color-divider);
}
.detail-meta dt {
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-faint);
font-weight: 500;
margin-bottom: var(--space-2);
}
.detail-meta dd {
font-family: var(--font-display);
font-size: var(--text-base);
color: var(--color-text);
}
.detail-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: clamp(var(--space-8), 5vw, var(--space-16));
padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}
@media (max-width: 860px) { .detail-body { grid-template-columns: 1fr; } }
.detail-body__sidebar {
position: sticky;
top: 88px;
align-self: start;
font-size: var(--text-sm);
}
.detail-body__prose {
font-size: var(--text-lg);
line-height: 1.65;
color: var(--color-text);
max-width: 64ch;
}
.detail-body__prose p + p { margin-top: var(--space-6); }
.detail-body__prose h3 {
font-size: var(--text-xl);
margin-top: var(--space-12);
margin-bottom: var(--space-4);
font-weight: 400;
}
.detail-body__prose blockquote {
border-left: 3px solid var(--color-accent);
padding: var(--space-4) var(--space-6);
margin-block: var(--space-8);
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-xl);
line-height: 1.3;
color: var(--color-text);
}
.detail-body__prose blockquote footer {
font-family: var(--font-body);
font-style: normal;
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-3);
}
.spec-list {
list-style: none;
padding: 0;
}
.spec-list li {
display: flex;
justify-content: space-between;
padding-block: var(--space-3);
border-bottom: 1px solid var(--color-divider);
gap: var(--space-4);
}
.spec-list dt, .spec-list__k {
color: var(--color-text-muted);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.spec-list__v {
color: var(--color-text);
text-align: right;
font-family: var(--font-display);
}
/* ---------- Stats band ---------- */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-1);
background: var(--color-divider);
border-block: 1px solid var(--color-divider);
}
.stats__item {
background: var(--color-bg);
padding: var(--space-10) var(--space-6);
text-align: left;
}
.stats__num {
display: block;
font-family: var(--font-display);
font-size: var(--text-3xl);
line-height: 1;
letter-spacing: -0.03em;
color: var(--color-text);
font-weight: 300;
margin-bottom: var(--space-3);
}
.stats__num em { font-style: italic; color: var(--color-primary); }
.stats__label {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* ---------- Manifesto / quote band ---------- */
.manifesto {
max-width: 900px;
margin-inline: auto;
text-align: left;
padding-block: clamp(var(--space-20), 10vw, var(--space-32));
}
.manifesto__text {
font-family: var(--font-display);
font-size: var(--text-2xl);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--color-text);
font-weight: 300;
}
.manifesto__text em { font-style: italic; color: var(--color-accent); }
/* ---------- Presenters CTA ---------- */
.cta-band {
background: var(--color-primary);
color: var(--color-text-inverse);
padding-block: clamp(var(--space-16), 10vw, var(--space-24));
position: relative;
overflow: hidden;
}
.cta-band__inner {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: var(--space-12);
align-items: center;
}
@media (max-width: 820px) {
.cta-band__inner { grid-template-columns: 1fr; }
}
.cta-band__title {
font-size: var(--text-2xl);
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-text-inverse);
font-weight: 300;
margin-bottom: var(--space-5);
max-width: 16ch;
}
.cta-band__title em { font-style: italic; color: var(--color-accent); }
.cta-band__desc {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.8);
max-width: 46ch;
margin-bottom: var(--space-8);
}
.cta-band__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cta-band .btn--ghost {
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
.cta-band .btn--ghost:hover { border-color: #fff; }
.cta-band .btn--primary {
background: #fff;
color: var(--color-primary);
}
.cta-band .btn--primary:hover { background: var(--color-surface-offset); transform: translateY(-1px); }
/* ---------- Footer ---------- */
.site-footer {
padding-block: var(--space-16) var(--space-10);
background: var(--color-surface);
border-top: 1px solid var(--color-divider);
font-size: var(--text-sm);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.3fr repeat(3, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-16);
}
@media (max-width: 780px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer__brand p {
color: var(--color-text-muted);
max-width: 32ch;
margin-top: var(--space-4);
font-size: var(--text-sm);
}
.footer-col h4 {
font-family: var(--font-body);
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-faint);
font-weight: 500;
margin-bottom: var(--space-4);
}
.footer-col ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer-col a {
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.footer-col a:hover { color: var(--color-text); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-8);
border-top: 1px solid var(--color-divider);
flex-wrap: wrap;
gap: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-xs);
letter-spacing: 0.08em;
}
/* ---------- Page hero (interior pages) ---------- */
.page-hero {
padding-block: clamp(var(--space-16), 10vw, var(--space-24)) clamp(var(--space-10), 6vw, var(--space-16));
border-bottom: 1px solid var(--color-divider);
}
.page-hero__eyebrow { margin-bottom: var(--space-5); }
.page-hero__title {
font-size: var(--text-3xl);
line-height: 0.95;
letter-spacing: -0.025em;
max-width: 18ch;
font-weight: 300;
margin-bottom: var(--space-6);
}
.page-hero__title em { font-style: italic; color: var(--color-primary); }
.page-hero__lede {
max-width: 58ch;
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text-muted);
}
/* ---------- About / prose page ---------- */
.prose-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: clamp(var(--space-8), 6vw, var(--space-20));
padding-block: clamp(var(--space-12), 8vw, var(--space-20));
border-bottom: 1px solid var(--color-divider);
}
@media (max-width: 860px) { .prose-grid { grid-template-columns: 1fr; } }
.prose-grid h2 {
font-size: var(--text-2xl);
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-text);
position: sticky;
top: 88px;
align-self: start;
}
.prose-grid h2 em { font-style: italic; color: var(--color-primary); }
.prose-body {
font-size: var(--text-lg);
line-height: 1.65;
color: var(--color-text);
max-width: 62ch;
}
.prose-body p + p { margin-top: var(--space-5); }
.prose-body h3 {
font-size: var(--text-xl);
margin-top: var(--space-10);
margin-bottom: var(--space-3);
font-weight: 400;
}
.prose-body ul {
padding-left: var(--space-6);
margin-top: var(--space-4);
}
.prose-body li { margin-bottom: var(--space-3); }
/* ---------- Form ---------- */
.form {
display: grid;
gap: var(--space-5);
max-width: 560px;
}
.form__field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form__field label {
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
}
.form__field input,
.form__field textarea,
.form__field select {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
outline: none;
font-size: var(--text-base);
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
border-color: var(--color-primary);
}
.form__field textarea {
min-height: 140px;
resize: vertical;
}
/* ---------- Scroll reveal (progressive enhancement) ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* ==============================================================
SUBMIT PAGE
============================================================== */
.submit-layout {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
gap: clamp(var(--space-8), 5vw, var(--space-16));
align-items: start;
}
.submit-aside {
position: sticky;
top: calc(var(--space-16) + 20px);
display: grid;
gap: var(--space-8);
padding-right: var(--space-4);
}
.submit-aside__block .eyebrow {
margin-bottom: var(--space-3);
}
.submit-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.55;
}
.submit-list li {
padding-left: var(--space-4);
position: relative;
}
.submit-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 6px;
height: 1px;
background: var(--color-text-faint);
}
.submit-list--timeline li {
padding-left: 0;
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--space-3);
padding-block: var(--space-2);
border-top: 1px solid var(--color-border);
}
.submit-list--timeline li::before { display: none; }
.submit-list--timeline li:last-child {
border-bottom: 1px solid var(--color-border);
}
.submit-list--timeline li span:first-child {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
color: var(--color-primary);
font-size: var(--text-sm);
}
.submit-note {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
}
.submit-link {
color: var(--color-primary);
border-bottom: 1px solid var(--color-primary);
}
.submit-link:hover { opacity: 0.8; }
/* Form */
.submit-form {
display: grid;
gap: var(--space-8);
}
.submit-fieldset {
border: 0;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-5);
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border);
}
.submit-fieldset:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
.submit-fieldset legend {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
color: var(--color-text);
margin-bottom: var(--space-3);
padding: 0;
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.req {
color: var(--color-accent);
font-weight: 500;
margin-left: 2px;
}
.submit-checkbox {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: start;
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.55;
cursor: pointer;
text-transform: none;
letter-spacing: normal;
}
.submit-checkbox input[type="checkbox"] {
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: var(--color-primary);
}
.submit-consent label {
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.submit-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-6);
padding-top: var(--space-4);
}
.submit-legal {
font-size: var(--text-xs);
color: var(--color-text-faint);
margin: 0;
max-width: 44ch;
line-height: 1.55;
}
.submit-status {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: var(--text-sm);
color: var(--color-text-muted);
background: var(--color-surface-offset);
}
.submit-status[data-state="pending"] {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Success card */
.submit-success__card {
max-width: 640px;
margin: 0 auto;
padding: var(--space-10) var(--space-8);
text-align: center;
border: 1px solid var(--color-border);
background: var(--color-surface-offset);
border-radius: 4px;
}
.submit-success__title {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-4xl, 2.5rem);
margin: var(--space-4) 0 var(--space-4);
color: var(--color-text);
}
.submit-success__card p {
color: var(--color-text-muted);
max-width: 48ch;
margin: 0 auto var(--space-6);
line-height: 1.65;
}
.submit-success__actions {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 900px) {
.submit-layout { grid-template-columns: 1fr; }
.submit-aside { position: static; padding-right: 0; }
.form__row { grid-template-columns: 1fr; }
}
/* =====================================================
SERVICES GRID (homepage)
===================================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
margin-top: var(--space-12);
}
.service-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-10) var(--space-8);
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-lg);
min-height: 320px;
transition: border-color .2s ease, transform .2s ease;
}
.service-card:hover {
border-color: var(--color-text);
transform: translateY(-2px);
}
.service-card__num {
font-family: var(--font-display);
font-size: var(--text-sm);
letter-spacing: 0.2em;
color: var(--color-accent);
text-transform: uppercase;
}
.service-card__title {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-2xl);
line-height: 1.15;
margin: 0;
}
.service-card__body {
color: var(--color-text-muted);
line-height: 1.65;
flex: 1;
margin: 0;
}
.service-card__link {
color: var(--color-text);
text-decoration: none;
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: 0.02em;
border-bottom: 1px solid var(--color-text);
align-self: flex-start;
padding-bottom: 2px;
transition: color .2s ease, border-color .2s ease;
}
.service-card__link:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
@media (max-width: 900px) {
.services-grid { grid-template-columns: 1fr; gap: var(--space-6); }
.service-card { min-height: 0; padding: var(--space-8) var(--space-6); }
}
/* =====================================================
PATRONS PAGE
===================================================== */
.patrons-hero {
padding: var(--space-16) 0 var(--space-12);
background: var(--color-bg);
}
.patrons-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
margin-top: var(--space-12);
}
.patron-track {
padding: var(--space-10);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.patron-track[data-track="patron"] {
background: linear-gradient(180deg, rgba(22, 68, 79, 0.04), transparent);
}
.patron-track[data-track="company"] {
background: linear-gradient(180deg, rgba(204, 92, 70, 0.05), transparent);
}
.patron-track__eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
.patron-track__title {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
line-height: 1.1;
margin: 0 0 var(--space-4);
}
.patron-track__title em {
font-style: italic;
color: var(--color-accent);
}
.patron-track__body {
color: var(--color-text-muted);
line-height: 1.65;
margin-bottom: var(--space-6);
}
.patron-track__list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6);
display: grid;
gap: var(--space-3);
}
.patron-track__list li {
padding-left: var(--space-5);
position: relative;
color: var(--color-text);
line-height: 1.5;
}
.patron-track__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 10px;
height: 1px;
background: var(--color-accent);
}
/* Seeking support listings */
.seeking-list {
display: grid;
gap: var(--space-6);
margin-top: var(--space-10);
}
.seeking-card {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-6);
padding: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
align-items: start;
}
.seeking-card__header {
display: flex;
gap: var(--space-3);
align-items: baseline;
flex-wrap: wrap;
margin-bottom: var(--space-2);
}
.seeking-card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 400;
margin: 0;
line-height: 1.2;
}
.seeking-card__company {
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.seeking-card__meta {
display: flex;
gap: var(--space-5);
flex-wrap: wrap;
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: var(--space-3) 0 var(--space-4);
}
.seeking-card__meta span strong {
color: var(--color-text);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
font-size: var(--text-sm);
margin-left: var(--space-1);
}
.seeking-card__body {
color: var(--color-text);
line-height: 1.6;
margin: 0 0 var(--space-4);
max-width: 60ch;
}
.seeking-card__ask {
padding: var(--space-5);
background: var(--color-bg);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
min-width: 220px;
}
.seeking-card__ask dt {
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.seeking-card__ask dd {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 400;
margin: 0 0 var(--space-3);
}
.seeking-card__ask dd:last-child { margin-bottom: 0; }
.seeking-card__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-2);
}
@media (max-width: 900px) {
.patrons-split { grid-template-columns: 1fr; gap: var(--space-6); }
.patron-track { padding: var(--space-8); }
.seeking-card { grid-template-columns: 1fr; }
.seeking-card__ask { min-width: 0; }
}
/* =====================================================
JOBS PAGE
===================================================== */
.jobs-gate {
max-width: 720px;
margin: 0 auto;
padding: var(--space-12) 0;
text-align: center;
}
.jobs-gate__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.jobs-gate__badge::before {
content: "";
width: 6px;
height: 6px;
background: var(--color-accent);
border-radius: 50%;
display: inline-block;
}
.jobs-gate__title {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 300;
line-height: 1.05;
margin: 0 0 var(--space-5);
}
.jobs-gate__title em {
font-style: italic;
color: var(--color-accent);
}
.jobs-gate__lede {
color: var(--color-text-muted);
font-size: var(--text-lg);
line-height: 1.55;
max-width: 56ch;
margin: 0 auto var(--space-10);
}
.jobs-access-form {
max-width: 560px;
margin: 0 auto;
padding: var(--space-10);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
text-align: left;
}
.jobs-preview {
margin-top: var(--space-16);
}
.jobs-preview__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 400;
margin: 0 0 var(--space-2);
}
.jobs-preview__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-8);
}
.jobs-preview__list {
display: grid;
gap: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
filter: blur(0);
position: relative;
}
.jobs-preview__item {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
background: var(--color-surface);
align-items: center;
font-size: var(--text-sm);
}
.jobs-preview__role {
font-family: var(--font-display);
font-size: var(--text-base);
color: var(--color-text);
}
.jobs-preview__org,
.jobs-preview__location {
color: var(--color-text-muted);
}
.jobs-preview__lock {
color: var(--color-text-muted);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: var(--space-2);
}
.jobs-preview__locked .jobs-preview__item {
filter: blur(5px);
opacity: 0.85;
user-select: none;
pointer-events: none;
}
.jobs-preview__locked {
position: relative;
}
.jobs-preview__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(250,247,242,0) 0%, rgba(250,247,242,0.92) 80%);
pointer-events: none;
border-radius: var(--radius-md);
}
@media (max-width: 900px) {
.jobs-preview__item { grid-template-columns: 1fr; gap: var(--space-1); }
}
/* =====================================================
NAV BADGE (for "Soon" on Festival link)
===================================================== */
.nav__link .nav__badge {
display: inline-block;
margin-left: var(--space-2);
padding: 2px 7px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
background: rgba(204, 92, 70, 0.1);
border: 1px solid rgba(204, 92, 70, 0.3);
border-radius: 999px;
vertical-align: 2px;
line-height: 1;
}
/* =====================================================
FESTIVAL PAGE
===================================================== */
.festival-hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
overflow: hidden;
color: #fdf7ec;
background: #0a0d10;
}
.festival-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.festival-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.78;
filter: saturate(1.05) contrast(1.04);
}
.festival-hero__bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 40%, rgba(10, 13, 16, 0.4) 0%, rgba(10, 13, 16, 0.85) 100%),
linear-gradient(180deg, rgba(10, 13, 16, 0.25) 0%, rgba(10, 13, 16, 0.6) 70%, rgba(10, 13, 16, 0.95) 100%);
pointer-events: none;
}
.festival-hero__inner {
position: relative;
z-index: 2;
max-width: 820px;
padding: var(--space-16) 0;
}
.festival-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
border: 1px solid rgba(253, 247, 236, 0.4);
border-radius: 999px;
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(253, 247, 236, 0.85);
margin-bottom: var(--space-8);
backdrop-filter: blur(6px);
}
.festival-hero__eyebrow::before {
content: "";
width: 7px;
height: 7px;
background: #e8a957;
border-radius: 50%;
box-shadow: 0 0 12px #e8a957;
animation: festivalPulse 2s ease-in-out infinite;
}
@keyframes festivalPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.festival-hero__title {
font-family: var(--font-display);
font-size: clamp(3.25rem, 9vw, 7rem);
font-weight: 300;
line-height: 0.95;
letter-spacing: -0.02em;
color: #fdf7ec;
margin: 0 0 var(--space-6);
}
.festival-hero__title em {
font-style: italic;
color: #f4c06e;
}
.festival-hero__lede {
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.5rem);
line-height: 1.45;
font-weight: 300;
color: rgba(253, 247, 236, 0.85);
max-width: 56ch;
margin: 0 0 var(--space-10);
}
.festival-hero__meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
padding: var(--space-6) 0;
border-top: 1px solid rgba(253, 247, 236, 0.18);
border-bottom: 1px solid rgba(253, 247, 236, 0.18);
margin-bottom: var(--space-10);
}
.festival-hero__meta dt {
font-size: var(--text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(253, 247, 236, 0.55);
margin-bottom: var(--space-2);
}
.festival-hero__meta dd {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
color: #fdf7ec;
margin: 0;
}
.festival-hero__actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.festival-hero__actions .btn--primary {
background: #f4c06e;
color: #0a0d10;
border-color: #f4c06e;
}
.festival-hero__actions .btn--primary:hover {
background: #fdf7ec;
border-color: #fdf7ec;
}
.festival-hero__actions .btn--ghost {
color: #fdf7ec;
border-color: rgba(253, 247, 236, 0.5);
background: transparent;
}
.festival-hero__actions .btn--ghost:hover {
background: rgba(253, 247, 236, 0.08);
border-color: #fdf7ec;
}
/* Countdown */
.festival-countdown {
background: #0a0d10;
color: #fdf7ec;
padding: var(--space-16) 0;
position: relative;
overflow: hidden;
}
.festival-countdown::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(244, 192, 110, 0.08) 0%, transparent 60%);
}
.festival-countdown__inner {
position: relative;
text-align: center;
}
.festival-countdown__label {
font-size: var(--text-xs);
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(253, 247, 236, 0.55);
margin-bottom: var(--space-4);
}
.festival-countdown__grid {
display: flex;
gap: var(--space-10);
justify-content: center;
margin: var(--space-6) 0 var(--space-4);
flex-wrap: wrap;
}
.festival-countdown__unit {
min-width: 110px;
}
.festival-countdown__num {
font-family: var(--font-display);
font-size: clamp(3rem, 8vw, 5.5rem);
font-weight: 300;
color: #f4c06e;
line-height: 1;
font-variant-numeric: tabular-nums;
display: block;
}
.festival-countdown__unit-label {
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(253, 247, 236, 0.55);
margin-top: var(--space-2);
display: block;
}
/* Pillars */
.festival-pillars {
padding: var(--space-16) 0;
background: var(--color-bg);
}
.festival-pillars__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-10);
margin-top: var(--space-12);
}
.pillar {
position: relative;
}
.pillar__num {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 300;
line-height: 0.9;
color: var(--color-accent);
opacity: 0.5;
margin-bottom: var(--space-4);
}
.pillar__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 400;
line-height: 1.15;
margin: 0 0 var(--space-3);
}
.pillar__body {
color: var(--color-text-muted);
line-height: 1.65;
}
/* Register strip */
.festival-register {
background: linear-gradient(135deg, #16444f 0%, #0e2f38 100%);
color: #fff;
padding: var(--space-16) 0;
position: relative;
overflow: hidden;
}
.festival-register::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(244, 192, 110, 0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(204, 92, 70, 0.1) 0%, transparent 50%);
}
.festival-register__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
}
.festival-register__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 300;
line-height: 1.05;
margin: 0 0 var(--space-5);
}
.festival-register__title em {
font-style: italic;
color: #f4c06e;
}
.festival-register__desc {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: var(--space-6);
max-width: 46ch;
}
.festival-register__form {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.festival-register__input {
flex: 1;
min-width: 240px;
padding: var(--space-4) var(--space-5);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-base);
}
.festival-register__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.festival-register__input:focus {
outline: none;
border-color: #f4c06e;
background: rgba(255, 255, 255, 0.12);
}
.festival-register__submit {
background: #f4c06e;
color: #0a0d10;
border: 1px solid #f4c06e;
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-base);
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.festival-register__submit:hover {
background: #fdf7ec;
transform: translateY(-1px);
}
.festival-register__detail dl {
display: grid;
gap: var(--space-5);
}
.festival-register__detail dt {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: var(--space-1);
}
.festival-register__detail dd {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 300;
margin: 0;
}
/* Timeline */
.festival-timeline {
padding: var(--space-16) 0;
}
.timeline {
margin-top: var(--space-12);
position: relative;
}
.timeline::before {
content: "";
position: absolute;
left: 13px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--color-border);
}
.timeline__item {
position: relative;
padding-left: var(--space-12);
padding-bottom: var(--space-10);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
content: "";
position: absolute;
left: 8px;
top: 6px;
width: 12px;
height: 12px;
background: var(--color-bg);
border: 2px solid var(--color-accent);
border-radius: 50%;
}
.timeline__item--active::before {
background: var(--color-accent);
box-shadow: 0 0 0 4px rgba(204, 92, 70, 0.2);
}
.timeline__date {
font-size: var(--text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
font-weight: 600;
margin-bottom: var(--space-2);
}
.timeline__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 400;
margin: 0 0 var(--space-2);
}
.timeline__desc {
color: var(--color-text-muted);
line-height: 1.6;
max-width: 60ch;
}
@media (max-width: 900px) {
.festival-hero { min-height: 70vh; }
.festival-hero__meta { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) 0; }
.festival-pillars__grid { grid-template-columns: 1fr; gap: var(--space-8); }
.festival-register__inner { grid-template-columns: 1fr; gap: var(--space-8); }
.festival-countdown__grid { gap: var(--space-5); }
.festival-countdown__unit { min-width: 70px; }
}
/* Recommended / Featured adjustments */
.company-card__headline {
display: flex;
align-items: baseline;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-1);
}
.company-card__badge {
font-size: var(--text-xs);
padding: 2px 8px;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
/* =====================================================
HOW STEPS (homepage)
===================================================== */
.how-steps {
list-style: none;
padding: 0;
margin: var(--space-12) 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
counter-reset: how;
}
.how-step {
position: relative;
padding: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.how-step__num {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
color: var(--color-accent);
margin-bottom: var(--space-4);
font-style: italic;
}
.how-step__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 400;
margin: 0 0 var(--space-3);
}
.how-step__body {
color: var(--color-text-muted);
line-height: 1.6;
font-size: var(--text-sm);
margin: 0;
}
@media (max-width: 900px) {
.how-steps { grid-template-columns: 1fr; }
}
/* =====================================================
MATCH PAGE
===================================================== */
.match-hero {
padding: clamp(var(--space-16), 10vw, var(--space-24)) 0 var(--space-12);
border-bottom: 1px solid var(--color-border);
}
.match-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(var(--space-8), 6vw, var(--space-16));
align-items: start;
}
.match-hero__signals {
display: flex;
gap: var(--space-8);
flex-wrap: wrap;
margin-top: var(--space-10);
padding-top: var(--space-6);
border-top: 1px dashed var(--color-border);
}
.match-hero__signals > div {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.match-hero__signals span {
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.match-hero__signals strong {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-lg);
color: var(--color-text);
}
.match-hero__quote {
padding: var(--space-10);
background: var(--color-bg-alt, #f4efe8);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius-sm);
}
.match-hero__quote blockquote {
margin: 0 0 var(--space-5);
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-lg);
line-height: 1.5;
color: var(--color-text);
}
.match-hero__quote footer {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.match-pulse {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-accent);
margin-right: var(--space-2);
animation: match-pulse 1.6s ease-in-out infinite;
vertical-align: middle;
}
@keyframes match-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.4); }
}
@media (max-width: 900px) {
.match-hero__grid { grid-template-columns: 1fr; }
}
/* Console: two-column brief + output */
.match-console {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: var(--space-10);
align-items: start;
margin-top: var(--space-12);
}
@media (max-width: 1100px) {
.match-console { grid-template-columns: 1fr; }
}
.match-brief {
padding: var(--space-10);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
position: sticky;
top: calc(var(--space-10) + 60px);
}
.match-brief__head h2 {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 300;
margin: var(--space-4) 0 var(--space-3);
}
.match-brief__head p {
color: var(--color-text-muted);
font-size: var(--text-sm);
margin: 0 0 var(--space-8);
line-height: 1.6;
}
.match-brief__step {
display: flex;
gap: 6px;
}
.match-brief__step-dot {
width: 28px; height: 3px;
border-radius: 2px;
background: var(--color-border);
transition: background 0.3s ease;
}
.match-brief__step-dot.is-active {
background: var(--color-accent);
}
.match-brief__group {
border: none;
padding: 0;
margin: 0 0 var(--space-8);
}
.match-brief__group legend {
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-4);
padding: 0;
}
.match-brief__actions {
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.match-brief__foot {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: var(--space-4) 0 0;
line-height: 1.5;
}
.btn--full { width: 100%; justify-content: center; display: inline-flex; gap: 8px; }
@media (max-width: 1100px) {
.match-brief { position: static; }
}
/* Terminal */
.match-terminal {
background: #0f1720;
border-radius: var(--radius-md);
overflow: hidden;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
color: #e7e5df;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.match-terminal__head {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: #1a2430;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.match-terminal__dots {
display: flex;
gap: 6px;
}
.match-terminal__dots span {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
}
.match-terminal__dots span:nth-child(1) { background: #ff5f57; }
.match-terminal__dots span:nth-child(2) { background: #febc2e; }
.match-terminal__dots span:nth-child(3) { background: #28c840; }
.match-terminal__title {
font-size: 12px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.05em;
}
.match-terminal__body {
padding: var(--space-6) var(--space-6) var(--space-8);
font-size: 13px;
line-height: 1.75;
max-height: 360px;
overflow-y: auto;
}
.match-terminal__body p { margin: 0 0 6px; }
.match-terminal__muted { color: rgba(231, 229, 223, 0.55); }
.match-terminal__muted--small { font-size: 11px; margin-top: var(--space-4) !important; }
.match-prompt { color: #7dd3c0; margin-right: 6px; }
.match-log-line { white-space: pre-wrap; }
.match-log-text { color: #e7e5df; }
/* Sample briefs */
.match-examples { margin-top: var(--space-8); }
.match-examples__list {
display: grid;
gap: var(--space-3);
}
.match-example {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--space-4) var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-align: left;
cursor: pointer;
transition: border-color 0.2s, transform 0.2s;
font: inherit;
color: inherit;
}
.match-example:hover {
border-color: var(--color-accent);
transform: translateX(2px);
}
.match-example strong {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-base);
}
.match-example span {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* Results */
.match-summary {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-8);
padding: var(--space-8);
background: var(--color-bg-alt, #f4efe8);
border-radius: var(--radius-md);
border-left: 3px solid var(--color-accent);
margin-bottom: var(--space-10);
align-items: start;
}
.match-summary h2 {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 300;
margin: var(--space-3) 0 var(--space-3);
}
.match-summary p {
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.6;
margin: 0;
}
.match-summary__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.match-summary__meta > div {
display: flex; flex-direction: column; gap: 2px;
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.match-summary__meta span {
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.match-summary__meta strong {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 400;
}
@media (max-width: 900px) {
.match-summary, .match-summary__meta { grid-template-columns: 1fr; }
}
.match-results__grid {
display: grid;
gap: var(--space-6);
}
.match-result {
display: grid;
grid-template-columns: 1fr 240px 1.6fr;
gap: var(--space-6);
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
align-items: start;
}
@media (max-width: 1100px) {
.match-result { grid-template-columns: 1fr; }
}
.match-result__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: start; gap: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.match-result__rank {
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-2);
font-weight: 500;
}
.match-result__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 400;
margin: 0 0 var(--space-2);
line-height: 1.2;
}
.match-result__company {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
}
.match-result__image {
width: 240px; height: 180px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-bg-alt);
}
.match-result__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.match-result__body { min-width: 0; }
.match-result__why {
font-size: var(--text-sm);
line-height: 1.65;
margin: 0 0 var(--space-5);
}
/* Score ring */
.match-score { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.match-score__ring {
--pct: 80;
--size: 64px;
width: var(--size); height: var(--size);
border-radius: 50%;
background:
conic-gradient(var(--color-accent) calc(var(--pct) * 1%), var(--color-border) 0);
display: grid;
place-items: center;
position: relative;
}
.match-score__ring::before {
content: '';
position: absolute;
inset: 4px;
background: var(--color-surface);
border-radius: 50%;
}
.match-score__num {
position: relative;
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
}
.match-score__label {
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Fit list */
.match-fit, .match-avail { margin-bottom: var(--space-5); }
.match-fit__heading {
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 var(--space-3);
font-weight: 500;
}
.match-fit__list {
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2) var(--space-4);
}
.match-fit__list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
font-size: var(--text-sm);
padding: 6px 0;
border-bottom: 1px dotted var(--color-border);
}
.match-fit__list li span:last-child { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.fit-icon { font-size: 14px; margin-right: var(--space-1); display: inline-block; width: 1em; }
.fit-icon--good { color: #2f9e5f; }
.fit-icon--ok { color: #d48b2c; }
.fit-icon--weak { color: #c44a4a; }
.match-avail p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; }
/* Draft email panel */
.match-draft {
margin-top: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-bg-alt, #f4efe8);
}
.match-draft summary {
list-style: none;
cursor: pointer;
padding: var(--space-4) var(--space-5);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: var(--text-sm);
}
.match-draft summary::-webkit-details-marker { display: none; }
.match-draft__chev { transition: transform 0.2s; font-size: 12px; }
.match-draft[open] .match-draft__chev { transform: rotate(180deg); }
.match-draft__body {
padding: var(--space-5);
border-top: 1px solid var(--color-border);
background: var(--color-surface);
}
.match-draft__field { margin-bottom: var(--space-4); }
.match-draft__field label {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.match-draft__field input, .match-draft__field textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: 1.6;
}
.match-draft__field textarea {
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 12.5px;
line-height: 1.65;
}
.match-draft__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.match-draft__note { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.btn--sent { background: #2f9e5f !important; color: #fff !important; cursor: default; }
/* Results foot */
.match-results__foot {
margin-top: var(--space-8);
padding: var(--space-6) var(--space-8);
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-6);
flex-wrap: wrap;
}
.match-results__foot strong { font-family: var(--font-display); font-size: var(--text-base); display: block; margin-bottom: var(--space-1); }
.match-results__foot p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 48ch; }
/* After section */
.match-post {
margin-top: var(--space-20);
padding-top: var(--space-16);
border-top: 1px solid var(--color-border);
}
.match-post h2 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
margin: var(--space-3) 0 var(--space-10);
}
.match-post__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
.match-post__grid > div {
padding: var(--space-6);
border-left: 2px solid var(--color-accent);
}
.match-post__grid strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; margin-bottom: var(--space-3); }
.match-post__grid p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 900px) {
.match-post__grid { grid-template-columns: 1fr; }
}
/* ========================================
PRICING PAGE
======================================== */
.pricing-hero {
padding-block: clamp(var(--space-16), 12vw, var(--space-24)) var(--space-12);
border-bottom: 1px solid var(--color-divider);
}
.pricing-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-8);
}
.pricing-hero__chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: var(--text-sm);
color: var(--color-text-muted);
background: var(--color-surface);
}
.pricing-hero__chip strong {
font-weight: 600;
color: var(--color-text);
}
/* ---- Tier cards ---- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-10);
}
@media (max-width: 980px) {
.pricing-grid { grid-template-columns: 1fr; }
}
.tier-card {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: var(--space-8) var(--space-7) var(--space-7);
display: flex;
flex-direction: column;
gap: var(--space-6);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tier-card:hover {
border-color: var(--color-text-muted);
transform: translateY(-2px);
}
.tier-card--featured {
border-color: var(--color-primary);
box-shadow: 0 20px 50px -30px rgba(0,0,0,0.25);
}
.tier-card--dark {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
.tier-card--dark .tier-card__name,
.tier-card--dark .tier-card__amount,
.tier-card--dark .tier-card__amount-to,
.tier-card--dark .tier-card__period,
.tier-card--dark .tier-card__features strong {
color: var(--color-text-inverse);
}
.tier-card--dark .tier-card__tag,
.tier-card--dark .tier-card__features,
.tier-card--dark .tier-card__note {
color: rgba(255,255,255,0.78);
}
.tier-card--dark .tier-card__inherit {
color: rgba(255,255,255,0.6);
border-bottom-color: rgba(255,255,255,0.18);
}
.tier-card--dark .tier-check {
color: var(--color-accent);
}
.tier-card--dark .btn--primary {
background: #fff;
color: var(--color-primary);
}
.tier-card--dark .btn--primary:hover { background: var(--color-surface-offset); }
.tier-card__ribbon {
position: absolute;
top: -12px;
left: var(--space-7);
background: var(--color-accent);
color: #fff;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
}
.tier-card__head {
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.tier-card--dark .tier-card__head {
border-bottom-color: rgba(255,255,255,0.18);
}
.tier-card__name {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 400;
letter-spacing: -0.01em;
margin-bottom: var(--space-4);
}
.tier-card__price {
display: flex;
align-items: baseline;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.tier-card__amount {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
color: var(--color-text);
letter-spacing: -0.01em;
}
.tier-card__amount-to {
font-size: 0.72em;
font-weight: 400;
color: var(--color-text-muted);
letter-spacing: 0;
margin-left: 2px;
}
.tier-card__period {
font-size: var(--text-sm);
color: var(--color-text-muted);
font-weight: 400;
}
.tier-card__tag {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
line-height: 1.5;
}
.tier-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--text-sm);
line-height: 1.55;
flex: 1;
}
.tier-card__features li {
display: block;
padding-left: 22px;
position: relative;
}
.tier-card__features li .tier-check,
.tier-card__features li .tier-dash {
position: absolute;
left: 0;
top: 0;
}
.tier-card__inherit {
display: block !important;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-1);
}
.tier-card__muted {
color: var(--color-text-muted);
}
.tier-check {
color: var(--color-accent);
font-weight: 600;
font-size: 14px;
line-height: 1.3;
}
.tier-dash {
color: var(--color-text-muted);
opacity: 0.5;
}
.tier-card__note {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
font-style: italic;
}
.tier-card .btn {
margin-top: auto;
width: 100%;
justify-content: center;
}
.pricing-fine {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.65;
}
/* ---- Presenter fee ---- */
.presenter-fee {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-6);
align-items: stretch;
margin-top: var(--space-10);
}
@media (max-width: 820px) {
.presenter-fee { grid-template-columns: 1fr; }
.presenter-fee__or { justify-self: center; padding: var(--space-2) 0; }
}
.presenter-fee__card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: var(--space-8) var(--space-7);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.presenter-fee__rate {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 3.25rem);
line-height: 1;
font-weight: 300;
color: var(--color-primary);
letter-spacing: -0.02em;
}
.presenter-fee__label {
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.presenter-fee__body {
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-text);
margin: 0;
}
.presenter-fee__or {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 400;
color: var(--color-text-muted);
letter-spacing: 0.05em;
}
.presenter-fee__terms {
list-style: none;
padding: 0;
margin: var(--space-10) 0 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5) var(--space-8);
font-size: var(--text-sm);
line-height: 1.6;
}
@media (max-width: 720px) {
.presenter-fee__terms { grid-template-columns: 1fr; }
}
.presenter-fee__terms li {
padding-left: var(--space-5);
position: relative;
color: var(--color-text);
}
.presenter-fee__terms li::before {
content: "→";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: 500;
}
.presenter-fee__terms strong {
display: block;
margin-bottom: 2px;
font-weight: 500;
}
/* ---- Economics grid ---- */
.econ-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-10);
}
@media (max-width: 820px) {
.econ-grid { grid-template-columns: 1fr; }
}
.econ-card {
border: 1px solid var(--color-border);
border-radius: 12px;
padding: var(--space-8) var(--space-7);
background: var(--color-surface);
}
.econ-card--featured {
background: var(--color-surface-offset, #faf7f2);
border-color: var(--color-accent);
}
.econ-card__figure {
font-family: var(--font-display);
font-size: clamp(2.25rem, 4vw, 2.75rem);
font-weight: 300;
letter-spacing: -0.02em;
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--space-2);
}
.econ-card__caption {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin-bottom: var(--space-5);
}
.econ-card__body {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.6;
margin: 0;
}
/* ---- FAQ ---- */
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: var(--space-8);
border-top: 1px solid var(--color-border);
max-width: 72ch;
}
.faq {
border-bottom: 1px solid var(--color-border);
padding: var(--space-5) 0;
}
.faq summary {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 400;
letter-spacing: -0.01em;
cursor: pointer;
list-style: none;
position: relative;
padding-right: var(--space-8);
color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
position: absolute;
right: 0;
top: 0;
font-size: 1.5em;
color: var(--color-text-muted);
font-weight: 300;
transition: transform 0.2s;
}
.faq[open] summary::after {
content: "−";
}
.faq p {
margin: var(--space-4) 0 0;
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-text-muted);
max-width: 68ch;
}
/* ---- Signup ---- */
.pricing-signup__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: var(--space-12);
align-items: start;
}
@media (max-width: 900px) {
.pricing-signup__grid { grid-template-columns: 1fr; }
}
.pricing-signup__list {
list-style: none;
padding: 0;
margin: var(--space-8) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.pricing-signup__list li {
padding-left: var(--space-5);
position: relative;
}
.pricing-signup__list li::before {
content: "·";
position: absolute;
left: 0;
top: -4px;
color: var(--color-accent);
font-size: 1.3em;
}
.pricing-signup__form {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: var(--space-8);
}
.tier-choice {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (max-width: 520px) {
.tier-choice { grid-template-columns: 1fr; }
}
.tier-choice__opt {
position: relative;
display: block;
cursor: pointer;
text-transform: none;
letter-spacing: normal;
font-size: var(--text-sm);
color: var(--color-text);
font-weight: 400;
}
.tier-choice__opt input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
.tier-choice__opt span {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: 8px;
transition: border-color 0.15s, background 0.15s;
}
.tier-choice__opt strong {
font-weight: 500;
color: var(--color-text);
}
.tier-choice__opt em {
font-style: normal;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.tier-choice__opt:hover span {
border-color: var(--color-text-muted);
}
.tier-choice__opt input:checked + span {
border-color: var(--color-primary);
background: var(--color-surface-offset, #faf7f2);
}
.submit-hint {
font-size: var(--text-sm);
color: var(--color-text-muted);
font-style: italic;
}
/* ========================================
PRICING PAGE — MOBILE
======================================== */
@media (max-width: 720px) {
/* Tighter hero on narrow screens */
.pricing-hero {
padding-block: var(--space-12) var(--space-8);
}
.pricing-hero__meta {
margin-top: var(--space-6);
gap: var(--space-2);
}
.pricing-hero__chip {
font-size: 0.8rem;
padding: 6px var(--space-3);
}
/* Collapse huge section padding on mobile */
#company-tiers,
#presenter-fee,
#economics,
#faq,
.pricing-signup {
padding-block: var(--space-10) !important;
margin-top: 0 !important;
}
#presenter-fee {
padding-block: var(--space-10) !important;
}
/* Section heads align-stack on mobile, less cramped */
.pricing-hero .page-hero__title,
#company-tiers .section-head__title,
#presenter-fee .section-head__title,
#economics .section-head__title,
#faq .section-head__title,
.pricing-signup .section-head__title {
font-size: clamp(1.9rem, 8vw, 2.4rem);
line-height: 1.05;
}
/* Tier cards — softer padding */
.pricing-grid {
gap: var(--space-5);
margin-top: var(--space-8);
}
.tier-card {
padding: var(--space-7) var(--space-6) var(--space-6);
gap: var(--space-5);
border-radius: 12px;
}
.tier-card__ribbon {
left: var(--space-6);
font-size: 0.65rem;
}
.tier-card__name {
font-size: 1.5rem;
}
.tier-card__amount {
font-size: 1.4rem;
}
/* Presenter fee — tighter cards */
.presenter-fee {
gap: var(--space-4);
margin-top: var(--space-8);
}
.presenter-fee__card {
padding: var(--space-6) var(--space-5);
border-radius: 10px;
}
.presenter-fee__rate {
font-size: clamp(2rem, 10vw, 2.75rem);
}
.presenter-fee__terms {
gap: var(--space-4);
margin-top: var(--space-8);
}
/* Econ cards */
.econ-grid {
gap: var(--space-4);
margin-top: var(--space-8);
}
.econ-card {
padding: var(--space-6) var(--space-5);
border-radius: 10px;
}
.econ-card__figure {
font-size: 2rem;
}
.econ-card__caption {
margin-bottom: var(--space-3);
}
/* FAQ */
.faq summary {
font-size: 1.05rem;
padding-right: var(--space-6);
}
/* Signup form */
.pricing-signup__grid {
gap: var(--space-8);
}
.pricing-signup__list {
margin-top: var(--space-6);
}
.pricing-signup__form {
padding: var(--space-6) var(--space-5);
border-radius: 10px;
}
.tier-choice {
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.tier-choice__opt span {
padding: var(--space-3);
}
.tier-choice__opt strong {
font-size: 0.95rem;
}
.tier-choice__opt em {
font-size: 0.7rem;
}
}
@media (max-width: 420px) {
.tier-choice {
grid-template-columns: 1fr;
}
.presenter-fee__terms {
grid-template-columns: 1fr !important;
}
.pricing-hero__chip {
font-size: 0.75rem;
}
/* Section-head stacks vertically already; let's prevent blurb from eating whitespace */
.section-head {
gap: var(--space-3);
}
}
/* =====================================================
Segmented currency control (directory + pricing)
===================================================== */
.seg-control {
display: inline-flex;
gap: 0;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 3px;
align-items: stretch;
flex-wrap: wrap;
}
.seg-btn {
appearance: none;
border: none;
background: transparent;
color: var(--color-text-muted);
font: inherit;
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.03em;
padding: 7px 14px;
border-radius: calc(var(--radius-md) - 4px);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
min-width: 56px;
}
.seg-btn:hover {
color: var(--color-text);
}
.seg-btn[aria-pressed="true"] {
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* The currency row in the directory gets a touch more breathing room
and a subtle divider so viewers read it as an initial setting. */
.filter-group--currency {
padding-bottom: var(--space-4);
border-bottom: 1px dashed var(--color-divider);
margin-bottom: var(--space-3);
}
/* Inline currency converter next to a tier price. */
.price-currency {
display: inline-flex;
gap: 6px;
align-items: center;
margin-top: var(--space-3);
padding: 3px;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.price-currency .seg-btn {
padding: 5px 10px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
min-width: 42px;
}
/* Dark tier: segmented control needs inverse-friendly tones. */
.tier-card--dark .price-currency {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
.tier-card--dark .price-currency .seg-btn {
color: rgba(255, 255, 255, 0.6);
}
.tier-card--dark .price-currency .seg-btn:hover {
color: #fff;
}
.tier-card--dark .price-currency .seg-btn[aria-pressed="true"] {
background: rgba(255, 255, 255, 0.92);
color: var(--color-ink, #0b1728);
box-shadow: none;
}
/* On mobile, stack the filter group label above the segmented control. */
@media (max-width: 640px) {
.filter-group--currency .seg-control {
align-self: flex-start;
}
}
/* =====================================================
Language switcher in the header
===================================================== */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
background: rgba(11, 23, 40, 0.04);
border: 1px solid rgba(11, 23, 40, 0.18);
border-radius: 999px;
margin-right: var(--space-2, 8px);
position: relative;
}
.lang-switch::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-left: 8px;
margin-right: 2px;
background-color: currentColor;
color: var(--color-text-muted, #6b7280);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.75;
}
[data-theme="dark"] .lang-switch {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .lang-switch::before {
color: rgba(255, 255, 255, 0.7);
}
.lang-btn {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 5px 11px;
font-size: 13px;
font-weight: 500;
line-height: 1;
color: var(--color-text, #0b1728);
border-radius: 999px;
transition: color 120ms ease, background 120ms ease;
font-family: inherit;
min-height: 26px;
letter-spacing: 0.02em;
opacity: 0.65;
}
.lang-btn:hover {
color: var(--color-text, #0b1728);
opacity: 1;
}
[data-theme="dark"] .lang-btn:hover {
color: #fff;
}
.lang-btn[aria-pressed="true"] {
background: var(--color-surface, #fff);
color: var(--color-text, #0b1728);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
font-weight: 600;
opacity: 1;
}
[data-theme="dark"] .lang-btn[aria-pressed="true"] {
background: rgba(255, 255, 255, 0.92);
color: var(--color-ink, #0b1728);
box-shadow: none;
}
/* Hide on narrow mobile (it shows in mobile menu via nav__lang if needed; for
now we keep it in the nav bar which wraps on mobile) */
@media (max-width: 480px) {
.lang-switch { margin-right: 0; padding: 2px; }
.lang-switch::before { margin-left: 6px; width: 12px; height: 12px; }
.lang-btn { padding: 4px 8px; font-size: 12px; }
}
/* =====================================================
CTA-band definition list values
Used inside dark cta-band sections. Previously rendered
in Fraunces weight 300 which is hard to read at small
sizes on a dark background — switched to the body sans
at a readable weight while keeping a generous tracking
for a slightly editorial feel.
===================================================== */
.cta-band__inner dl dt {
font-size: var(--text-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: var(--space-2);
font-family: var(--font-body);
font-weight: 500;
}
.cta-band__inner dl dd {
font-family: var(--font-body);
color: #fff;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.005em;
font-size: var(--text-base);
}
.cta-band__inner dl dd.is-lead {
font-size: var(--text-lg);
font-weight: 500;
letter-spacing: -0.01em;
}