/* =============================================================================
Ottawa Bodybuilding — Design System
Dark theme · Glass nav · Responsive · No frameworks
Colours are injected from PHP/config via :root overrides in
============================================================================= */
@charset "UTF-8";
/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'MW_Title';
src: url('../fonts/Anton.woff2') format('woff2'),
url('../fonts/Anton.woff') format('woff');
font-display: swap;
}
/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
/* Event colours — defaults; PHP overrides these in */
--color-primary: #63A7FE;
--color-secondary: #084CD7;
--color-accent-light: #ffe8be;
--color-accent-dark: #a16900;
/* Dark palette */
--bg-0: #05080b; /* absolute darkest — footer, page banner */
--bg-1: #0d1117; /* base page background */
--bg-2: #131c24; /* alternating section */
--bg-card: rgba(255,255,255,0.04);
--bg-card-hover: rgba(255,255,255,0.07);
/* Borders */
--border-0: rgba(255,255,255,0.05);
--border-1: rgba(255,255,255,0.10);
--border-2: rgba(255,255,255,0.18);
/* Text */
--text-1: #f0f6fc; /* primary — headings, key values */
--text-2: #d4dce6; /* secondary — body copy */
--text-3: #9ba8b3; /* muted — labels, meta, captions */
/* Layout */
--header-h: 64px;
--container: 1200px;
--gap: clamp(1rem, 2.5vw, 1.5rem);
--radius: 6px;
--radius-lg: 12px;
/* Fonts */
--font-title: 'MW_Title', 'Anton', Impact, sans-serif;
--font-body: 'Barlow', 'Roboto', Helvetica, sans-serif;
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--dur-fast: 0.15s;
--dur-mid: 0.25s;
--dur-slow: 0.4s;
}
/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--bg-1);
color: var(--text-2);
font-family: var(--font-body);
font-size: clamp(0.9rem, 1.5vw, 1rem);
line-height: 1.75;
padding-top: var(--header-h);
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: underline; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--color-secondary); text-decoration: none; }
/* ── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
line-height: 1.2;
letter-spacing: 0.06em;
color: var(--text-1);
text-transform: uppercase;
}
h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-bottom: 0.8em; }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); margin-bottom: 0.6em; }
h4 { font-size: 1rem; margin-bottom: 0.5em; }
p { margin-bottom: 1.4em; }
strong {
font-weight: 600;
letter-spacing: 0.015em;
color: var(--text-1);
}
/* Page-title font (banner headings) */
.display-title {
font-family: var(--font-title);
font-size: clamp(2rem, 8vw, 5rem);
letter-spacing: 0;
line-height: 1;
color: #fff;
text-transform: uppercase;
text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 0 60px rgba(99,167,254,0.15);
}
/* ── Colour utilities ──────────────────────────────────────────────────────── */
.color-primary { color: var(--color-primary) !important; }
.color-secondary { color: var(--color-secondary) !important; }
.color-white { color: #ffffff !important; }
.color-red { color: #e84040 !important; }
.color-muted { color: var(--text-3) !important; }
/* ── Container & Grid ──────────────────────────────────────────────────────── */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gap);
width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(-1 * var(--gap) / 2);
}
.row > [class^="col-"] {
padding: 0 calc(var(--gap) / 2);
}
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* ── Sections ──────────────────────────────────────────────────────────────── */
.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section-dark { background: var(--bg-1); color: var(--text-2); }
.section-medium { background: var(--bg-2); color: var(--text-2); }
/* Gradient accent bar — elegant replacement for thick coloured border */
.section-border-top {
position: relative;
}
.section-border-top::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-secondary) 20%,
var(--color-primary) 50%,
var(--color-secondary) 80%,
transparent 100%
);
}
/* ── Page banner strip (inner pages) ──────────────────────────────────────── */
.page-banner {
background: var(--bg-0);
padding: clamp(2.5rem, 6vw, 4rem) 1rem;
text-align: center;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border-0);
}
.page-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 100% at 50% 100%,
rgba(99,167,254,0.07) 0%, transparent 70%);
pointer-events: none;
}
.page-title {
font-family: var(--font-title);
font-size: clamp(2.2rem, 8vw, 4.5rem);
letter-spacing: 0;
color: #ffffff;
text-transform: uppercase;
text-shadow: 0 0 40px rgba(99,167,254,0.25);
position: relative;
z-index: 1;
margin: 0;
}
.page-title .icon { opacity: 0.8; }
/* ── ═══════════════ NAVIGATION ═══════════════ ──────────────────────────── */
#site-header {
position: fixed;
top: 0; left: 0;
width: 100%;
height: var(--header-h);
z-index: 9000;
transition: background var(--dur-slow) var(--ease),
box-shadow var(--dur-slow) var(--ease);
/* Default: translucent gradient — looks great over banner */
background: linear-gradient(to bottom, rgba(5,8,11,0.85) 0%, rgba(5,8,11,0.2) 100%);
}
/* backdrop-filter lives on ::before so it never creates a stacking context
that clips the mobile nav overlay (position:fixed child) when scrolled. */
#site-header::before {
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0;
transition: opacity var(--dur-slow) var(--ease);
pointer-events: none;
z-index: -1;
}
/* Scrolled state — JS adds this class */
#site-header.scrolled {
background: rgba(5, 8, 11, 0.92);
box-shadow: 0 1px 0 var(--border-0),
0 8px 32px rgba(0,0,0,0.5);
}
#site-header.scrolled::before {
opacity: 1;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 clamp(1rem, 4vw, 2rem);
max-width: var(--container);
margin: 0 auto;
gap: 1rem;
}
/* Logo */
.header-logo {
display: flex;
align-items: center;
gap: 0.5em;
text-decoration: none;
flex-shrink: 0;
white-space: nowrap;
}
.logo-year {
font-family: var(--font-title);
font-size: clamp(1rem, 2.2vw, 1.3rem);
color: var(--color-primary);
letter-spacing: 0.02em;
line-height: 1;
}
.logo-sep {
color: var(--border-2);
font-weight: 100;
font-size: 1.2em;
line-height: 1;
}
.logo-name {
font-family: var(--font-title);
font-size: clamp(0.75rem, 1.5vw, 1rem);
color: var(--text-2);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
transition: color var(--dur-fast);
}
.header-logo:hover .logo-name { color: #fff; }
.header-logo:hover .logo-year { color: #fff; }
/* Desktop nav */
#mainNav ul {
display: flex;
list-style: none;
gap: 0;
}
#mainNav ul li a {
display: block;
height: var(--header-h);
line-height: var(--header-h);
padding: 0 clamp(0.5rem, 1.2vw, 1rem);
font-family: var(--font-title);
font-size: clamp(0.6rem, 1vw, 0.78rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
text-decoration: none;
position: relative;
transition: color var(--dur-fast) var(--ease);
white-space: nowrap;
}
/* Animated underline: scale from center */
#mainNav ul li a::after {
content: '';
position: absolute;
bottom: 12px;
left: clamp(0.5rem, 1.2vw, 1rem);
right: clamp(0.5rem, 1.2vw, 1rem);
height: 2px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dur-mid) var(--ease);
border-radius: 1px;
}
#mainNav ul li a:hover { color: var(--text-1); }
#mainNav ul li a.active { color: var(--color-primary); }
#mainNav ul li a:hover::after,
#mainNav ul li a.active::after { transform: scaleX(1); }
/* Hamburger button */
.nav-toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
background: var(--bg-card);
border: 1px solid var(--border-1);
border-radius: var(--radius);
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-fast), border-color var(--dur-fast);
z-index: 9002; /* stays above overlay */
}
.nav-toggle:hover { background: var(--bg-card-hover); border-color: var(--border-2); }
.nav-toggle span {
display: block;
width: 20px;
height: 1.5px;
background: #fff;
border-radius: 2px;
transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── ═══════════════ HERO BANNER ══════════════ ──────────────────────────── */
.home-banner {
width: 100%;
height: auto;
display: block;
margin-bottom: 0;
}
/* ── ═══════════════ HOME SECTIONS ════════════ ──────────────────────────── */
/* Intro: about the show */
.home-intro {
background: var(--bg-1);
border-top: 3px solid transparent;
border-image: linear-gradient(90deg,
transparent, var(--color-secondary), var(--color-primary), var(--color-secondary), transparent
) 1;
padding: clamp(3rem, 6vw, 5rem) 0;
}
.home-intro h2 {
font-family: var(--font-title);
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
letter-spacing: 0;
line-height: 1.2;
color: #fff;
margin-bottom: 1rem;
}
/* Quick links */
.quick-links {
background: var(--bg-2);
padding: clamp(3rem, 6vw, 5rem) 0;
border-top: 1px solid var(--border-0);
border-bottom: 1px solid var(--border-0);
}
/* About promoters */
.home-about {
background: var(--bg-1);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.home-about h2 {
font-family: var(--font-title);
font-size: clamp(1.4rem, 3vw, 2rem);
letter-spacing: 0;
}
.promoter-photo {
float: left;
width: min(30%, 200px);
height: auto;
margin: 0.25em 1.5em 1em 0;
border: 3px solid var(--color-primary);
border-radius: var(--radius);
box-shadow: 0 0 32px rgba(99,167,254,0.2);
}
.promoter-quote {
color: var(--color-primary);
font-style: italic;
opacity: 0.9;
}
.social-buttons {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* ── ═══════════════ CARDS (quick links) ══════ ──────────────────────────── */
.card-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
margin-bottom: var(--gap);
text-align: center;
transition:
border-color var(--dur-mid) var(--ease),
background var(--dur-mid) var(--ease),
transform var(--dur-mid) var(--ease),
box-shadow var(--dur-mid) var(--ease);
}
.card-link:hover .card {
background: var(--bg-card-hover);
border-color: var(--color-primary);
transform: translateY(-5px);
box-shadow: 0 20px 48px rgba(0,0,0,0.4),
0 0 0 1px rgba(99,167,254,0.15);
}
.card h3 {
color: var(--text-1);
letter-spacing: 0.04em;
font-size: clamp(0.95rem, 2vw, 1.1rem);
margin: 0;
}
/* Card icon circle */
.card .icon.major {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3em;
height: 3em;
font-size: 1.8em;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
margin-bottom: 1.25em;
box-shadow: 0 0 0 8px rgba(99,167,254,0.08),
0 0 24px rgba(99,167,254,0.25);
transition: box-shadow var(--dur-mid), background var(--dur-mid);
}
.card-link:hover .card .icon.major {
background: var(--color-secondary);
box-shadow: 0 0 0 8px rgba(8,76,215,0.12),
0 0 32px rgba(8,76,215,0.35);
}
/* ── ═══════════════ BUTTONS ══════════════════ ──────────────────────────── */
.button,
button.button,
input[type="submit"],
input[type="button"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.7em 1.75em;
font-family: var(--font-body);
font-size: 0.85em;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border: none;
border-radius: var(--radius);
cursor: pointer;
appearance: none;
transition:
background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
/* Default: dark fill */
background: var(--bg-card);
color: var(--text-1) !important;
border: 1px solid var(--border-1);
}
.button:hover {
background: var(--bg-card-hover);
border-color: var(--border-2);
}
/* Outline variant */
.button-outline {
background: transparent;
color: var(--text-2) !important;
border: 1px solid var(--border-1);
}
.button-outline:hover {
background: rgba(99,167,254,0.08);
border-color: var(--color-primary);
color: var(--color-primary) !important;
transform: translateY(-1px);
}
/* Primary filled CTA */
.button-primary {
background: var(--color-primary);
color: #000 !important;
border: none;
font-size: 1.1em;
font-weight: 600;
padding: 0.8em 2em;
box-shadow: 0 0 28px rgba(99,167,254,0.3);
letter-spacing: 0.06em;
}
.button-primary:hover {
background: var(--color-secondary);
color: #fff !important;
box-shadow: 0 0 36px rgba(8,76,215,0.4);
transform: translateY(-2px);
}
/* Full-width modifier */
.button-full {
display: flex;
width: 100%;
}
/* ── ═══════════════ SIDEBAR ══════════════════ ──────────────────────────── */
.sidebar {
border-left: 1px solid var(--border-1);
padding-left: clamp(1rem, 3vw, 2rem);
}
.sidebar-section {
padding: 0;
margin-bottom: 1.75rem;
font-size: 0.92em;
line-height: 1.7;
}
.sidebar-section:not(:first-child) {
border-top: 1px solid var(--border-0);
padding-top: 1.5rem;
}
.sidebar-section h3 {
font-size: 0.75rem;
letter-spacing: 0.16em;
color: var(--text-2); /* was text-3 — too muted */
margin-bottom: 0.8em;
text-transform: uppercase;
}
/* ── ═══════════════ INFO BLOCKS ══════════════ ──────────────────────────── */
.info-block {
font-size: 0.92em;
line-height: 1.9;
margin-bottom: 1rem;
}
.info-label {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.1em;
margin-top: 0.5em;
}
/* ── ═══════════════ SPONSOR GRID ═════════════ ──────────────────────────── */
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--gap);
margin-top: 2rem;
}
.sponsor-item a {
display: block;
background: var(--bg-card);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: 1.25rem;
text-decoration: none;
transition:
border-color var(--dur-mid) var(--ease),
transform var(--dur-mid) var(--ease),
box-shadow var(--dur-mid) var(--ease);
}
.sponsor-item a:hover {
border-color: var(--color-primary);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(99,167,254,0.1);
}
.sponsor-item a.no-link {
cursor: default;
pointer-events: none;
}
.sponsor-item img { width: 100%; height: auto; }
/* ── ═══════════════ HOTEL RATE TABLE ═════════ ──────────────────────────── */
.rate-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92em;
margin-bottom: 1.25rem;
}
.rate-table tr { border-bottom: 1px solid var(--border-0); }
.rate-table tr:last-child { border-bottom: none; }
.rate-table td { padding: 0.5em 0; color: var(--text-3); }
.rate-table td:first-child { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; }
.rate-table td:last-child { text-align: right; color: #fff; font-size: 1.05em; padding-left: 1rem; }
/* ── ═══════════════ MAP ══════════════════════ ──────────────────────────── */
.map-wrapper {
margin-top: 1.5rem;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-1);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.map-wrapper iframe {
display: block;
width: 100%;
height: 440px;
border: none;
}
/* ── ═══════════════ LINKS LIST ═══════════════ ──────────────────────────── */
.link-list {
list-style: none;
font-size: 0.9em;
}
.link-list li {
border-top: 1px solid var(--border-0);
padding: 0.45em 0;
}
.link-list li:first-child { border-top: none; padding-top: 0; }
.link-list a { text-decoration: none; color: var(--text-2); }
.link-list a:hover { color: var(--color-primary); text-decoration: none; }
/* ── ═══════════════ POSTER ═══════════════════ ──────────────────────────── */
.poster-link {
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
border: 2px solid var(--border-1);
transition:
border-color var(--dur-mid) var(--ease),
box-shadow var(--dur-mid) var(--ease),
transform var(--dur-mid) var(--ease);
}
.poster-link img { width: 100%; }
.poster-link:hover {
border-color: var(--color-primary);
box-shadow: 0 0 32px rgba(99,167,254,0.25);
transform: translateY(-3px);
}
/* ── ═══════════════ HR ════════════════════════ ─────────────────────────── */
hr { border: none; border-bottom: 1px solid var(--border-0); margin: 2.5em 0; }
hr.major { margin: 3em 0; }
/* ── ═══════════════ FOOTER ═══════════════════ ──────────────────────────── */
#site-footer {
background: var(--bg-0);
border-top: 1px solid var(--border-0);
padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
text-align: center;
}
.footer-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(1.5rem, 4vw, 3rem);
padding-bottom: 2.5rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border-0);
}
.footer-logo {
height: 55px;
width: auto;
max-width: 150px;
object-fit: contain;
opacity: 0.82; /* was 0.65 — too dim */
transition: opacity var(--dur-fast), transform var(--dur-fast);
filter: brightness(1.05);
}
.footer-logo:hover { opacity: 1; transform: scale(1.04); }
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
font-size: 0.8em;
letter-spacing: 0.06em;
color: var(--text-3);
text-transform: uppercase;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--color-primary); }
.powered-by {
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.muscleware-logo {
height: 18px;
width: auto;
opacity: 0.7;
transition: opacity var(--dur-fast);
vertical-align: middle;
}
.muscleware-logo:hover { opacity: 1; }
/* ── ═══════════════ RESPONSIVE ═══════════════ ──────────────────────────── */
/* ── Tablet: ≤ 900px ─────────────────────── */
@media (max-width: 900px) {
.col-4, .col-8 {
flex: 0 0 100%;
max-width: 100%;
}
.sidebar {
border-left: none;
border-top: 1px solid var(--border-0);
padding-left: 0;
padding-top: 2rem;
margin-top: 1.5rem;
}
.promoter-photo { width: min(40%, 180px); }
.sponsor-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Hotel/venue: stack the two columns */
.hotel-venue-pair .col-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ── Mobile: ≤ 640px ─────────────────────── */
@media (max-width: 640px) {
/* Show hamburger */
.nav-toggle { display: flex; }
/* Full-screen mobile overlay */
#mainNav {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
bottom: 0;
background: rgba(5, 8, 11, 0.97);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity var(--dur-slow) var(--ease-out),
visibility var(--dur-slow),
transform var(--dur-slow) var(--ease-out);
border-top: 1px solid var(--border-1);
}
#mainNav.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#mainNav ul {
flex-direction: column;
align-items: center;
width: 100%;
gap: 0;
}
#mainNav ul li {
width: 100%;
text-align: center;
}
#mainNav ul li a {
height: auto;
line-height: 1;
padding: 1em 2rem;
font-size: clamp(1.4rem, 6vw, 2.2rem);
color: rgba(255,255,255,0.45);
letter-spacing: 0.1em;
border-bottom: 1px solid var(--border-0);
transition: color var(--dur-fast), background var(--dur-fast);
}
#mainNav ul li:last-child a { border-bottom: none; }
#mainNav ul li a::after { display: none; }
#mainNav ul li a:hover,
#mainNav ul li a.active {
color: var(--color-primary);
background: rgba(99,167,254,0.04);
}
/* Stack all columns */
.col-4, .col-6, .col-8, .col-12 {
flex: 0 0 100%;
max-width: 100%;
}
.promoter-photo { width: 45%; }
.page-banner { padding: 2rem 1rem; }
.map-wrapper iframe { height: 280px; }
.footer-logo { height: 42px; max-width: 110px; }
.home-intro h2 { font-size: clamp(1.3rem, 5vw, 1.75rem); }
.button-primary { width: 100%; text-align: center; }
.sponsor-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
/* Stack hotel + venue side by side cards on mobile */
.hotel-venue-pair { flex-direction: column; }
}
/* ── Very small: ≤ 380px ─────────────────── */
@media (max-width: 380px) {
.logo-name { display: none; }
.logo-sep { display: none; }
#mainNav ul li a { font-size: 1.3rem; }
}
/* =============================================================================
NEW COMPONENTS — legibility, visitor context, consistency pass
============================================================================= */
/* ── Section heading — replaces all per-page inline h2 overrides ─────────── */
.section-heading {
font-size: clamp(1.5rem, 4vw, 2.25rem);
letter-spacing: 0;
line-height: 1.15;
margin-bottom: 0.5em;
}
/* ── Page intro paragraph — muted lead text below h2 ────────────────────── */
.page-intro {
color: var(--text-3);
font-size: 0.92em;
max-width: 600px;
margin-bottom: 2rem;
line-height: 1.75;
}
/* ── Row helpers ─────────────────────────────────────────────────────────── */
.row-stretch {
align-items: stretch;
margin-bottom: 2.5rem;
}
/* ── Info card enhancements ──────────────────────────────────────────────── */
/* h3 inside an info-card (hotel name, venue name, etc.) */
.info-card h3 {
letter-spacing: 0;
font-size: 1.05rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--text-1);
}
/* Descriptive sub-copy inside a card (e.g. session description) */
.info-card-desc {
font-size: 0.9em;
color: var(--text-3);
margin: 0.5rem 0 1rem;
line-height: 1.6;
}
/* When info-cards stack vertically, add gap between them */
.info-card + .info-card {
margin-top: var(--gap);
}
/* ── Ticket price block ───────────────────────────────────────────────────── */
.ticket-prices {
margin-top: 0.5rem;
}
.ticket-prices h3 {
font-size: 1rem;
letter-spacing: 0;
margin-bottom: 0.75rem;
color: var(--color-primary);
}
.ticket-prices p {
margin-bottom: 0.5rem;
}
/* Type label inside a price row (e.g. "Adult:", "Junior:") */
.price-label {
color: var(--text-3);
font-size: 0.9em;
}
/* ── Event callout: keep CTA button from wrapping ───────────────────────── */
.event-callout-inner > .button {
flex-shrink: 0;
}
/* ── Event callout band (home page, below banner) ────────────────────────── */
.event-callout {
background: var(--bg-0);
border-bottom: 1px solid var(--border-1);
padding: 0.9rem 0;
}
.event-callout-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 2rem;
}
.event-callout-facts {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1.75rem;
flex: 1;
min-width: 0;
}
.event-fact {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.event-fact-label {
font-size: 0.62rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.2em;
}
.event-fact-value {
font-size: 0.92rem;
font-weight: 400;
color: var(--text-1);
white-space: nowrap;
}
.event-fact-sep {
font-size: 1.4rem;
color: var(--border-2);
line-height: 1;
align-self: center;
}
/* ── Stat strip (key facts bar, e.g. top of registration page) ───────────── */
.stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 1px; /* gap fills with border-0 to create grid lines */
background: var(--border-0);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 2.5rem;
}
.stat-item {
background: var(--bg-card);
padding: 1.15rem 1.25rem;
text-align: center;
}
.stat-label {
display: block;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary); /* matches .info-label colour */
margin-bottom: 0.35em;
opacity: 0.9;
}
.stat-value {
display: block;
font-family: var(--font-body); /* Barlow — consistent with rest of site */
font-size: 0.95rem;
font-weight: 600;
color: var(--text-1);
letter-spacing: 0.02em;
}
/* ── Info card (structured block for venue / hotel / check-in details) ────── */
.info-card {
background: var(--bg-card);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: 1.5rem;
height: 100%;
}
.info-card-label {
display: block;
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-primary);
border-bottom: 1px solid var(--border-0);
padding-bottom: 0.7rem;
margin-bottom: 1rem;
}
/* ── Info label (inline field labels inside info blocks) ─────────────────── */
/* Full definition — overrides the earlier partial one */
.info-label {
display: block;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
margin-top: 0.9em;
margin-bottom: 0.15em;
opacity: 0.9;
}
.info-label:first-child { margin-top: 0; }
/* ── Icons inside headings ───────────────────────────────────────────────── */
/* Small accent icons inside sidebar section headings */
.sidebar-section h3 i {
color: var(--color-primary);
margin-right: 0.4em;
font-size: 0.85em;
opacity: 0.8;
vertical-align: middle;
}
/* Icons inside section-heading h2 (e.g. Map & Directions) */
.section-heading i {
color: var(--color-primary);
margin-right: 0.3em;
font-size: 0.85em;
opacity: 0.85;
vertical-align: middle;
}
/* Margin utility — used when a button follows inline text (avoids
) */
.mt-gap { margin-top: var(--gap); }
/* ── Sidebar body copy ───────────────────────────────────────────────────── */
.sidebar-section > p {
font-size: 0.88em;
margin-bottom: 0.75rem;
line-height: 1.6;
}
/* Buttons that follow an info-label (e.g. Event Services) */
.info-label + .button {
margin-top: 0.5em;
}
/* Last paragraph in an info-card — flush with bottom padding */
.info-card p:last-child {
margin-bottom: 0;
}
/* ── Notice / disclaimer text ────────────────────────────────────────────── */
.notice {
font-size: 0.82em;
font-style: italic;
color: var(--text-3);
line-height: 1.55;
margin-top: 0.5rem;
margin-bottom: 1rem;
}
/* ── Warning / alert text (e.g. late fee notice) ─────────────────────────── */
.alert-notice {
font-size: 0.85em;
color: #e84040;
line-height: 1.5;
}
/* ── Amenity list (hotel features) ──────────────────────────────────────── */
.amenity-list {
list-style: none;
margin: 0.5rem 0 1rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.amenity-list li {
display: flex;
align-items: center;
gap: 0.6em;
color: var(--text-1);
font-size: 0.92em;
}
.amenity-list li::before {
content: '✓';
color: var(--color-primary);
font-size: 0.8em;
flex-shrink: 0;
}
/* ── Responsive additions ────────────────────────────────────────────────── */
@media (max-width: 900px) {
.info-card { margin-bottom: var(--gap); }
}
@media (max-width: 640px) {
.event-callout-inner .button-primary { width: 100%; }
.event-fact-sep { display: none; }
.stat-item { padding: 0.85rem 0.6rem; }
.stat-value { font-size: 0.92rem; }
.info-card { padding: 1.1rem; }
.event-callout { padding: 1rem 0; }
/* Gap between stacked flex columns — row-gap is reliable where
child margin-bottom can be swallowed by height:100% resolution */
.row-stretch { row-gap: var(--gap); }
}