/* ========================================================================== The Little Theatre · Redesign · shared stylesheet Direction C: Editorial — cobalt + cream + black, Anton + Source Serif 4. Anthony picked C on 2026-05-11; this stylesheet replaces the Curtain & Cream one. Most legacy utility classes (.show-card, .donate-banner, .tier-card, .credit-list, .grid-2-asym etc.) are preserved by name so inner pages can be ported page-by-page without breaking. ========================================================================== */ :root { /* Editorial palette — Ticket 1.6 navy rebrand. The token names still say "cobalt" so the rest of the CSS doesn't need rewriting; only the hex values flip to navy. Every cobalt accent across the site inherits the navy treatment and stays in sync with the header triangle fill. `--navy` / `--navy-deep` are aliases for selectors that want to read as "navy" semantically. */ --cobalt: #1E2A4F; /* navy primary */ --cobalt-deep: #14193A; /* navy-deep */ --cobalt-light: #5B82E8; /* bright contrast highlight on dark sections */ --navy: #1E2A4F; --navy-deep: #14193A; --cream: #FAF6EE; --cream-deep: #F0EAD8; --paper-backdrop: #E5DEC9; /* Ticket 2.3 · warm beige surface the paper sits on */ --black: #0A0A0A; --ink-soft: #4A4A4A; --rule: rgba(10, 10, 10, 0.14); --rule-strong: rgba(10, 10, 10, 0.28); --font-display: 'Anton', 'Bebas Neue', 'Oswald', system-ui, sans-serif; --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --container: 1320px; --container-narrow: 920px; --gutter: 32px; --paper-cap: 1400px; /* Ticket 2.3 · hard page-width cap (paper edge) */ } /* -------- Reset -------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--paper-backdrop); } img, picture, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } input, textarea, select { font: inherit; color: inherit; } /* -------- Base -------- */ body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--black); background: var(--cream); font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; /* Ticket 2.3 · paper shadow. Body is hard-capped at --paper-cap and centred, with a three-layer drop shadow on the warm-beige backdrop set on . The hero carousel and other full-bleed sections now bleed only to the paper edge, not the viewport. */ max-width: var(--paper-cap); margin-left: auto; margin-right: auto; min-height: 100vh; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 14px 36px -8px rgba(10, 10, 10, 0.10), 0 36px 90px -28px rgba(10, 10, 10, 0.12); } /* Drop the body shadow on narrow viewports where the paper fills the screen anyway. */ @media (max-width: 800px) { body { box-shadow: none; } } ::selection { background: var(--cobalt); color: var(--cream); } /* sr-only utility — visually hidden, exposed to assistive tech. Used by .hero-cast-list mobile-toggle and ad-hoc landmark labels. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--cobalt-deep); } .skip-link { position: absolute; top: -100px; left: 12px; background: var(--black); color: var(--cream); padding: 12px 18px; z-index: 200; text-decoration: none; font-weight: 600; font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; } .skip-link:focus { top: 12px; } /* -------- Typography -------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: normal; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); } h1 { font-size: clamp(48px, 8vw, 112px); } h2 { font-size: clamp(40px, 6vw, 84px); } h3 { font-size: clamp(26px, 3vw, 36px); } h4 { font-size: 22px; } .display { font-family: var(--font-display); font-weight: normal; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; } .display-xl { font-family: var(--font-display); font-weight: normal; font-size: clamp(72px, 14vw, 220px); line-height: 0.88; letter-spacing: -0.018em; text-transform: uppercase; } /* Editorial numbered eyebrow ("N° 01 · The Season"). */ .ed-num { font-family: var(--font-body); font-size: 13px; font-style: italic; letter-spacing: 0.04em; color: var(--cobalt); display: inline-block; } /* Legacy eyebrow class — still works, restyled to editorial italic-serif tone. */ .eyebrow { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; font-style: italic; font-weight: 400; color: var(--cobalt); display: inline-block; } /* Pass 7 — removed .eyebrow.on-dark (selector never appears in any HTML) */ .kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: normal; color: var(--cobalt); } .lede { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; color: var(--ink-soft); max-width: 60ch; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } em { font-style: italic; } /* -------- Layout -------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); } section { padding: clamp(80px, 12vw, 160px) 0; } section.tight { padding: clamp(56px, 8vw, 96px) 0; } .bg-alt { background: var(--cream-deep); } .bg-ink { background: var(--cobalt); color: var(--cream); } .bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--cream); } .bg-ink .lede { color: rgba(250, 246, 238, 0.78); } .bg-cobalt { background: var(--cobalt); color: var(--cream); } .bg-cobalt h1, .bg-cobalt h2, .bg-cobalt h3 { color: var(--cream); } .bg-cobalt .lede { color: rgba(250, 246, 238, 0.88); } .bg-cobalt .ed-num, .bg-cobalt .eyebrow { color: rgba(250, 246, 238, 0.78); } .section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); } .section-head .ed-num, .section-head .eyebrow { display: block; margin-bottom: 14px; } .section-head h2 { margin-bottom: 16px; max-width: 16ch; } .rule { border: 0; height: 1px; background: var(--rule); margin: clamp(56px, 7vw, 88px) 0; } /* -------- 8-column editorial grid -------- */ .grid8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 24px; } @media (max-width: 720px) { .grid8 { grid-template-columns: repeat(4, 1fr); gap: 18px; } } /* -------- Legacy grid utilities (restyled to editorial spacing) -------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 48px); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); } .grid-2-asym { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 32px); } @media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .grid-2-asym { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* -------- Header (traditional editorial bar) -------- Ticket 2 (2026-05-19) — sticky cream header, big logo top-left, italic Source Serif nav floating right, navy donate slab on the far right. Triangle pediment from Ticket 1.5 is gone. The cobalt token still resolves to navy (Ticket 1.6 palette retained per Anthony's override 2026-05-19); --navy is also defined as an explicit token for future use. Defensive clip-path: none + ::before kill so cached residue of the triangle can never re-render. */ :root { --header-height: 96px; } .site-header { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 1px solid var(--rule); height: var(--header-height); width: 100%; clip-path: none; -webkit-clip-path: none; margin-bottom: 0; overflow: visible; } .site-header::before { content: none !important; display: none; } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); } .brand { position: static; top: auto; left: auto; right: auto; transform: none; display: flex; align-items: center; flex-shrink: 0; width: auto; max-width: none; text-decoration: none; color: var(--black); } .brand picture { display: block; width: auto; } .brand img { display: block; height: clamp(64px, 8vw, 96px); width: auto; max-width: none; } .nav-desktop { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); flex-wrap: nowrap; } .nav-desktop a { position: relative; /* anchor for the .nav-curtain span below */ font-family: var(--font-body); font-size: 17px; font-style: italic; font-weight: 500; letter-spacing: 0.01em; color: var(--black); text-decoration: none; padding: 6px 2px 8px; /* +2 below baseline so the curtain sits ~6px under the text */ border: none; transition: color 120ms; line-height: 1.2; text-transform: none; } .nav-desktop a:hover { color: var(--cobalt); } .nav-desktop a.is-active, .nav-desktop a[aria-current="page"] { color: var(--cobalt); } /* ===== Curtain pull underline · Ticket 2.2 ===== A 2px line opens from the centre outward via scaleX on a styled inside each .nav-desktop link. The active link (aria-current="page" / .is-active) shows the line at rest; hover and focus-visible trigger it on inactive links. Out-state = 200ms ease-in (the "lift the marker"); in-state = 280ms ease-out via the in-state rule's transition override. The html.pre-anim class (added by the head gate, removed on the first rAF in site.js) hides the active line until the page is visible so it draws in on load instead of appearing pre-drawn. Reduced-motion users get the rest / hover states instantly. */ .nav-curtain { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cobalt); border-radius: 1px; transform: scaleX(0); transform-origin: center center; transition: transform 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53); pointer-events: none; } .nav-desktop a:hover .nav-curtain, .nav-desktop a:focus-visible .nav-curtain, .nav-desktop a[aria-current="page"] .nav-curtain, .nav-desktop a.is-active .nav-curtain { transform: scaleX(1); transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1); } html.pre-anim .nav-curtain { transition: none; transform: scaleX(0); } @media (prefers-reduced-motion: reduce) { .nav-curtain { transition: none !important; } } /* Donate slab — Anton uppercase, navy filled, cream text. */ .btn-donate { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--cobalt); color: var(--cream); padding: 14px 22px; text-decoration: none; line-height: 1; border: 2px solid var(--cobalt); border-radius: 2px; font-style: normal; transition: background 120ms, border-color 120ms; } .btn-donate:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--cream); } /* Specificity fix — .nav-desktop a (color: black) outranks plain .btn-donate, so the cream text loses without this override. Same for the mobile drawer. */ .nav-desktop .btn-donate, .nav-mobile .btn-donate { background: var(--cobalt); color: var(--cream); border: 2px solid var(--cobalt); } .nav-desktop .btn-donate:hover, .nav-mobile .btn-donate:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--cream); } .nav-desktop .btn-donate { margin-left: 12px; } /* ===== Donate emphasis · Ticket 2.3 paper-shadow companion ===== Layered cues stacked on the CTA, no anime.js: · larger padding + slightly larger font (more presence at rest) · ambient breath (slow 7s scale loop, paused on hover) · hover lift (translateY + scale + deeper shadow — the ticket lifts off the page, matching the paper metaphor) · hover arrow (::after `→` slides in to the right of "Donate") Reduced motion bails on the breath and the lift transform but still gets the bigger button and the colour-swap hover. */ .nav-desktop .btn-donate { position: relative; padding: 18px 32px; font-size: 19px; letter-spacing: 0.08em; margin-left: 18px; transition: background 160ms ease, border-color 160ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1); animation: donate-breath 7s ease-in-out infinite; will-change: transform, box-shadow; } .nav-desktop .btn-donate::after { content: '→'; display: inline-block; font-family: var(--font-body); font-style: normal; vertical-align: -1px; opacity: 0; max-width: 0; margin-left: 0; overflow: hidden; transition: opacity 180ms ease, margin-left 220ms cubic-bezier(0.22, 0.61, 0.36, 1), max-width 220ms cubic-bezier(0.22, 0.61, 0.36, 1); } .nav-desktop .btn-donate:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 4px 8px -2px rgba(10, 10, 10, 0.18), 0 14px 28px -8px rgba(30, 42, 79, 0.34); animation-play-state: paused; } .nav-desktop .btn-donate:hover::after { opacity: 1; margin-left: 10px; max-width: 22px; } @keyframes donate-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @media (prefers-reduced-motion: reduce) { .nav-desktop .btn-donate { animation: none; } .nav-desktop .btn-donate:hover { transform: none; } } /* Mobile drawer toggle — hidden on desktop, visible <980px. */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--black); background: transparent; border: 0; flex-shrink: 0; } .nav-toggle:hover { color: var(--cobalt); } .nav-toggle svg { width: 26px; height: 26px; } /* Defensive — hide any legacy donate or toggle that sits outside .nav-desktop on desktop; mobile breakpoint re-enables the toggle. */ .site-header-inner > .btn-donate { display: none; } @media (max-width: 980px) { :root { --header-height: 72px; } .nav-desktop { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 720px) { .site-header-inner { padding: 0 20px; } } /* -------- Hero carousel (home page) -------- Full-bleed photo carousel. Each slide carries a data-accent="#hex" curated colour. site.js sets the --slide-accent CSS variable on .hero-carousel when slides advance, and ALSO runs canvas pixel-sampling on each backdrop to auto-detect the dominant colour and override the curated value (when the image is same-origin and the canvas isn't tainted). The accent then bleeds into the scrim, the primary CTA, the eyebrow, and the .carousel-bleed strip below the carousel. */ .hero-carousel { position: relative; width: 100%; height: clamp(560px, 80vh, 760px); overflow: hidden; background: var(--black); /* Default accent until site.js overrides per slide. --cobalt = navy. */ --slide-accent: var(--cobalt); } .carousel-track { position: absolute; inset: 0; } .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease; pointer-events: none; } .carousel-slide.is-active { opacity: 1; pointer-events: auto; } .carousel-slide-photo { position: absolute; inset: 0; background-size: cover; background-position: center; } /* Home "Upcoming Productions" feature (Kait-approved season layout, 2026-06-03): three larger cards with status badges + a "see the full season" CTA. */ .upcoming { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 980px) { .upcoming { grid-template-columns: 1fr; } } .up-card { display: flex; flex-direction: column; text-decoration: none; color: var(--black); background: var(--cream-deep); border: 1px solid var(--rule); overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .up-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -6px rgba(10,10,10,0.18); border-color: var(--cobalt); } .up-art { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--cobalt-deep); position: relative; } .up-art .badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; background: var(--cobalt); color: var(--cream); padding: 6px 10px; } .up-art .badge.muted { background: rgba(10, 10, 10, 0.7); } .up-meta { padding: 22px 22px 24px; } .up-meta .num { font-family: var(--font-body); font-style: italic; color: var(--cobalt); letter-spacing: 0.04em; font-size: 13px; display: block; margin-bottom: 6px; } .up-meta h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.0; font-size: clamp(24px, 2.2vw, 30px); margin: 0 0 10px; } .up-meta .dates { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.4; } .up-meta .blurb { font-family: var(--font-body); font-size: 14px; color: var(--black); margin: 0; line-height: 1.5; } .see-more { display: flex; justify-content: center; margin: 36px 0 0; } .see-more a { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase; background: var(--cobalt); color: var(--cream); padding: 16px 32px; text-decoration: none; border: 2px solid var(--cobalt); transition: background 140ms ease, border-color 140ms ease; } .see-more a:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); } @media (prefers-reduced-motion: reduce) { .up-card { transition: none; } .up-card:hover { transform: none; } } /* Scrim — base dark gradient PLUS a soft tint of the slide accent at the bottom so the colour bleeds through the photo. */ .carousel-slide-scrim { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.55) 35%, rgba(10, 10, 10, 0.18) 70%, rgba(10, 10, 10, 0.0) 100% ), linear-gradient( to bottom, transparent 50%, color-mix(in srgb, var(--slide-accent) 30%, transparent) 100% ); transition: background 700ms ease; } .carousel-slide-content { position: absolute; left: clamp(24px, 6vw, 96px); bottom: clamp(48px, 8vw, 112px); max-width: 620px; color: var(--cream); z-index: 2; } .carousel-slide .ed-num { font-family: var(--font-body); font-style: italic; color: color-mix(in srgb, var(--slide-accent) 55%, var(--cream)); letter-spacing: 0.04em; font-size: 16px; margin: 0 0 16px; display: block; transition: color 700ms ease; } .carousel-slide h2 { font-family: var(--font-display); font-size: clamp(48px, 6.5vw, 96px); letter-spacing: -0.01em; text-transform: uppercase; line-height: 0.92; margin: 0 0 18px; color: var(--cream); } .carousel-slide-dates { font-family: var(--font-body); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); margin: 0 0 28px; opacity: 0.92; } .carousel-slide-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .carousel-slide-ctas .btn { display: inline-block; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border-radius: 2px; line-height: 1; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } /* Carousel primary CTA picks up the slide accent — this is the bleed. */ .hero-carousel .btn-primary { background: var(--slide-accent); color: var(--cream); border: 2px solid var(--slide-accent); } .hero-carousel .btn-primary:hover { background: color-mix(in srgb, var(--slide-accent) 75%, black); border-color: color-mix(in srgb, var(--slide-accent) 75%, black); color: var(--cream); } .hero-carousel .btn-ghost { background: transparent; color: var(--cream); border: 2px solid var(--cream); } .hero-carousel .btn-ghost:hover { background: var(--cream); color: var(--black); } /* Dots */ .carousel-dots { position: absolute; bottom: 24px; right: clamp(24px, 6vw, 96px); display: flex; gap: 10px; z-index: 3; } .carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(250, 246, 238, 0.4); border: 0; padding: 0; cursor: pointer; transition: background 200ms; } .carousel-dot.is-active { background: var(--cream); } .carousel-dot:hover { background: rgba(250, 246, 238, 0.75); } /* Arrows */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(10, 10, 10, 0.35); border: 2px solid rgba(250, 246, 238, 0.6); color: var(--cream); cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: var(--font-display); transition: background 120ms, border-color 120ms; } .carousel-arrow:hover { background: rgba(10, 10, 10, 0.65); border-color: var(--cream); } .carousel-arrow.prev { left: clamp(16px, 2.5vw, 32px); } .carousel-arrow.next { right: clamp(16px, 2.5vw, 32px); } /* The bleed strip — sits directly under the carousel, fades the slide accent into the cream body so the colour reads as carrying into the page rather than stopping at the carousel edge. */ .carousel-bleed { position: relative; height: 96px; margin-top: -96px; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, color-mix(in srgb, var(--slide-accent, var(--cobalt)) 28%, transparent) 0%, transparent 100% ); transition: background 700ms ease; } @media (max-width: 800px) { .hero-carousel { height: 65vh; } .carousel-slide-scrim { background: linear-gradient( 180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.5) 60%, rgba(10, 10, 10, 0.88) 100% ), linear-gradient( 180deg, transparent 60%, color-mix(in srgb, var(--slide-accent) 30%, transparent) 100% ); } .carousel-slide-content { left: 24px; right: 24px; bottom: 80px; max-width: none; } .carousel-arrow { display: none; } .carousel-dots { right: 24px; } .carousel-bleed { height: 64px; margin-top: -64px; } } /* -------- Mobile nav -------- */ .nav-mobile { position: fixed; inset: 0; background: var(--cream); z-index: 100; padding: 80px var(--gutter) 32px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; visibility: hidden; } .nav-mobile.is-open { transform: translateX(0); pointer-events: auto; visibility: visible; } .nav-mobile-close { position: absolute; top: 14px; right: var(--gutter); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; color: var(--black); font-family: var(--font-body); font-weight: 300; } .nav-mobile-close:hover { background: var(--cream-deep); } .nav-mobile ul { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 16px; } .nav-mobile a { font-family: var(--font-display); font-size: clamp(32px, 7vw, 44px); text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.95; text-decoration: none; color: var(--black); padding: 10px 0; display: block; } .nav-mobile a:hover, .nav-mobile a:focus-visible { color: var(--cobalt); } .nav-mobile .btn-donate { align-self: flex-start; font-size: 14px; padding: 14px 28px; margin-top: 32px; } /* -------- Buttons -------- */ .btn { display: inline-block; padding: 18px 44px; text-decoration: none; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.20em; text-transform: uppercase; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 2px solid transparent; cursor: pointer; line-height: 1; } .btn-primary { background: var(--cobalt); color: var(--cream); border-color: var(--cobalt); } .btn-primary:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--cream); } /* C-1 fix — on navy heroes the default cobalt-on-cobalt button is invisible. Override to cream-filled slab with navy text so the button shape reads. */ .hero-page .btn-primary { background: var(--cream); color: var(--cobalt); border-color: var(--cream); } .hero-page .btn-primary:hover { background: var(--cream-deep); color: var(--cobalt-deep); border-color: var(--cream-deep); } .btn-secondary { background: transparent; color: var(--cobalt); border-color: var(--cobalt); } .btn-secondary:hover { background: var(--cobalt); color: var(--cream); } .btn-ghost { background: transparent; color: var(--cream); border-color: rgba(250,246,238,0.4); } .btn-ghost:hover { background: var(--cream); color: var(--cobalt); border-color: var(--cream); } .btn-cream { background: var(--cream); color: var(--cobalt); border-color: var(--cream); } .btn-cream:hover { background: var(--cobalt-deep); color: var(--cream); border-color: var(--cobalt-deep); } /* H-10 — was cobalt-light (3.36 fails AA); cobalt-deep is 15.84 PASS AAA */ .btn-link { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; transition: color 0.15s; } .btn-link:hover { color: var(--cobalt-deep); } /* -------- Page hero (for inner pages: season, about, get-involved, contact) -------- */ .hero-page { background: var(--cobalt); /* Ticket 1.6 — was var(--black); now navy to match the triangle */ color: var(--cream); padding: clamp(96px, 14vw, 180px) 0 clamp(56px, 8vw, 96px); position: relative; overflow: hidden; } .hero-page::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgb(from var(--cobalt-light) r g b / 0.14) 0%, transparent 65%), linear-gradient(160deg, transparent 0%, rgb(from var(--cobalt-deep) r g b / 0.45) 100%); pointer-events: none; } .hero-page .container { position: relative; z-index: 1; } .hero-page .eyebrow, .hero-page .ed-num { color: rgba(250, 246, 238, 0.78); display: block; margin-bottom: 14px; } /* C-4 — see .hero-meta note */ .hero-page h1 { color: var(--cream); margin: 8px 0; } .hero-page h1 em { font-style: italic; font-weight: 400; color: var(--cream); } .hero-page .lede { color: rgba(250, 246, 238, 0.78); font-style: italic; } /* -------- Show tile (editorial, used on home and season) -------- */ .show-tile { text-decoration: none; color: var(--black); display: flex; flex-direction: column; gap: 18px; transition: transform 0.22s ease; } .show-tile:hover { transform: translateY(-4px); } .show-tile-poster { background: linear-gradient(160deg, var(--cobalt) 0%, var(--cobalt-deep) 100%); /* fallback; per-show overrides below */ position: relative; overflow: hidden; border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--cobalt); transition: box-shadow 0.22s ease, border-color 0.22s ease; } .show-tile:hover .show-tile-poster { box-shadow: 10px 10px 0 var(--cobalt); border-color: var(--cobalt-deep); } /* Per-show poster backgrounds + matching offset shadow (extracted from each 2026-27 poster via Pillow dominant-color quantization, 2026-05-22). The linear-gradient runs from the primary dominant color to the second most- dominant color of the poster; the offset shadow uses a 35%-luminance shade of the primary so the drop reads as the poster's own shadow rather than a stock cobalt slab. */ .show-tile[href*="bonnie-and-clyde"] .show-tile-poster { background: linear-gradient(160deg, #BE4D2E 0%, #DA8340 100%); box-shadow: 6px 6px 0 #421A10; } .show-tile[href*="bonnie-and-clyde"]:hover .show-tile-poster { box-shadow: 10px 10px 0 #421A10; border-color: #421A10; } .show-tile[href*="a-christmas-carol"] .show-tile-poster { background: linear-gradient(160deg, #233A18 0%, #9CA698 100%); box-shadow: 6px 6px 0 #0C1408; } .show-tile[href*="a-christmas-carol"]:hover .show-tile-poster { box-shadow: 10px 10px 0 #0C1408; border-color: #0C1408; } .show-tile[href*="little-shop-of-horrors"] .show-tile-poster { background: linear-gradient(160deg, #2F690F 0%, #7E1C16 100%); box-shadow: 6px 6px 0 #102405; } .show-tile[href*="little-shop-of-horrors"]:hover .show-tile-poster { box-shadow: 10px 10px 0 #102405; border-color: #102405; } .show-tile[href*="dial-m-for-murder"] .show-tile-poster { background: linear-gradient(160deg, #D81420 0%, #860E16 100%); box-shadow: 6px 6px 0 #4B070B; } .show-tile[href*="dial-m-for-murder"]:hover .show-tile-poster { box-shadow: 10px 10px 0 #4B070B; border-color: #4B070B; } .show-tile[href*="anastasia"] .show-tile-poster { background: linear-gradient(160deg, #240A25 0%, #C8AB74 100%); box-shadow: 6px 6px 0 #0C030C; } .show-tile[href*="anastasia"]:hover .show-tile-poster { box-shadow: 10px 10px 0 #0C030C; border-color: #0C030C; } .show-tile[href*="captain-dick-flint"] .show-tile-poster { background: linear-gradient(160deg, #150C16 0%, #572433 100%); box-shadow: 6px 6px 0 #070407; } .show-tile[href*="captain-dick-flint"]:hover .show-tile-poster { box-shadow: 10px 10px 0 #070407; border-color: #070407; } .show-tile-poster-label { position: absolute; bottom: 16px; left: 16px; font-family: var(--font-body); font-size: 11px; font-style: italic; color: rgba(250, 246, 238, 0.7); z-index: 1; letter-spacing: 0.02em; } .show-tile-num { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cobalt); } .show-tile-title { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.005em; line-height: 0.95; text-transform: uppercase; color: var(--black); } .show-tile-meta { font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--ink-soft); } .show-tile-blurb { font-size: 16px; color: var(--black); max-width: 38ch; line-height: 1.5; } .show-tile.t-a { grid-column: 1 / 5; } .show-tile.t-a .show-tile-poster { aspect-ratio: 3/4; } .show-tile.t-b { grid-column: 5 / 9; align-self: end; padding-bottom: 20px; } .show-tile.t-b .show-tile-poster { aspect-ratio: 4/5; } .show-tile.t-c { grid-column: 1 / 9; } .show-tile.t-c .show-tile-poster { aspect-ratio: 21/9; } .show-tile.t-c .show-tile-title { font-size: clamp(48px, 7vw, 96px); } @media (max-width: 720px) { .show-tile.t-a, .show-tile.t-b, .show-tile.t-c { grid-column: 1 / 5; padding-bottom: 0; } .show-tile.t-c .show-tile-poster { aspect-ratio: 4/5; } } /* -------- Show card (legacy, restyled — for season grid alternate, news cards) -------- */ .show-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--rule); overflow: hidden; transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s; text-decoration: none; color: var(--black); height: 100%; } .show-card:hover { transform: translateY(-3px); border-color: var(--black); box-shadow: 0 10px 24px rgba(10,10,10,0.08); color: var(--black); } .show-card-img, .show-card-spotlight { position: relative; aspect-ratio: 3/2; background: linear-gradient(160deg, var(--cobalt) 0%, var(--cobalt-deep) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--black); } .show-card-img::after, .show-card-spotlight::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.14) 0%, transparent 50%); } .show-card-img-label, .show-card-spotlight-label { position: relative; z-index: 1; font-family: var(--font-body); font-size: 11px; font-style: italic; color: rgba(250, 246, 238, 0.7); text-align: center; padding: 0 16px; letter-spacing: 0.02em; } .show-card-body { padding: clamp(22px, 2.4vw, 28px); flex: 1; display: flex; flex-direction: column; } .show-card-dates { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 8px; } .show-card-title { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -0.005em; line-height: 0.95; text-transform: uppercase; margin-bottom: 12px; } .show-card-blurb { color: var(--ink-soft); font-size: 16px; line-height: 1.55; flex: 1; margin-bottom: 16px; } .show-card-link { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; align-self: flex-start; } /* -------- Donate banner (legacy class, restyled to cobalt-on-cream slab) -------- */ .donate-banner { background: var(--cobalt); color: var(--cream); padding: clamp(72px, 10vw, 120px) 0; position: relative; overflow: hidden; } .donate-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 50%, rgba(250,246,238,0.10) 0%, transparent 50%); } .donate-banner .container { position: relative; z-index: 1; max-width: 980px; } .donate-banner h2 { color: var(--cream); margin-bottom: 16px; max-width: 14ch; } .donate-banner p { color: rgba(250, 246, 238, 0.85); max-width: 56ch; margin-bottom: 32px; font-size: 18px; } .donate-banner .btn-secondary { background: var(--cream); color: var(--cobalt); border-color: var(--cream); } .donate-banner .btn-secondary:hover { background: transparent; color: var(--cream); border-color: var(--cream); } .donate-banner .ed-num, .donate-banner .eyebrow { color: rgba(250,246,238,0.78); } /* -------- Pull quote -------- */ .pull-quote { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.32; color: var(--black); max-width: 24ch; border-left: 2px solid var(--cobalt); padding-left: clamp(20px, 3vw, 28px); } /* Pass 7 — removed .about-teaser-img / .about-img dead rules (selectors never appear in any HTML; rule body contained the old-cobalt rgba(26,79,217,X) + hardcoded #18203a/#050811 ink leak that the post-Ticket-1.6 audit flagged). */ /* -------- Person card (board, staff, cast) -------- */ .person-card { text-align: left; } .person-card-img { aspect-ratio: 4/5; /* C-7 fix — was rgba(26, 79, 217, 0.30) (old cobalt) + hardcoded #18203a/#050811 ink. Updated to the navy palette to match the post-Ticket-1.6 rebrand. */ background: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(91, 130, 232, 0.28) 0%, transparent 60%), linear-gradient(160deg, var(--cobalt) 0%, var(--cobalt-deep) 100%); margin-bottom: 14px; display: flex; align-items: flex-end; padding: 14px; font-family: var(--font-body); font-size: 11px; font-style: italic; color: rgba(250, 246, 238, 0.6); } .person-card-name { font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: -0.005em; text-transform: uppercase; margin-bottom: 4px; } .person-card-role { font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--ink-soft); letter-spacing: 0.02em; } /* -------- Donor tiers -------- */ .tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .tier-grid { grid-template-columns: 1fr; } } .tier-card { background: var(--cream); border: 1px solid var(--black); padding: 32px 28px; display: flex; flex-direction: column; transition: background 0.15s, color 0.15s; } .tier-card:hover { background: var(--cream-deep); } .tier-card.featured { background: var(--cobalt); color: var(--cream); border-color: var(--cobalt); } .tier-card.featured:hover { background: var(--cobalt); } .tier-card.featured .tier-amount, .tier-card.featured .tier-name { color: var(--cream); } .tier-card.featured .tier-perks { color: rgba(250, 246, 238, 0.82); } .tier-card.featured .tier-perks li::before { background: var(--cobalt-light); } .tier-amount { font-family: var(--font-display); font-size: clamp(40px, 4vw, 52px); letter-spacing: -0.005em; color: var(--cobalt); line-height: 1; margin-bottom: 6px; text-transform: uppercase; } .tier-name { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--black); margin-bottom: 18px; } .tier-perks { font-size: 15px; line-height: 1.55; color: var(--ink-soft); list-style: none; } .tier-perks li { padding-left: 18px; position: relative; margin-bottom: 6px; } .tier-perks li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--cobalt); } /* -------- Forms -------- */ .form-row { margin-bottom: 22px; position: relative; } .form-row label { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row select, .form-row textarea { width: 100%; padding: 14px 0; font-family: var(--font-body); font-size: 17px; background: transparent; border: 0; border-bottom: 1px solid var(--black); color: var(--black); transition: border-color 0.15s; } .form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: 2px solid var(--cobalt); /* H-14 — outline restored; was outline:none + 1px border swap, nearly invisible */ outline-offset: 4px; border-bottom-color: var(--cobalt); } .form-row textarea { min-height: 140px; resize: vertical; font-family: var(--font-body); } .form-row .check-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; } .form-row .check-row label { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; font-family: var(--font-body); color: var(--black); margin: 0; } .form-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cobalt); } .form-row .field-error { display: none; font-family: var(--font-body); font-style: italic; font-size: 13px; color: #B7263F; margin-top: 8px; } .form-row.has-error .field-error { display: block; } .form-row.has-error input, .form-row.has-error textarea, .form-row.has-error select { border-bottom-color: #B7263F; } .form-status { margin-top: 14px; font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--cobalt); min-height: 22px; } .form-status.is-error { color: #B7263F; } .hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; } /* -------- Cast / creative team list -------- */ .credit-list { list-style: none; border-top: 1px solid var(--rule); margin-top: 12px; } .credit-list li { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; } .credit-list li .role { font-family: var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--cobalt); align-self: center; } .credit-list li .name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.005em; text-transform: uppercase; } /* -------- Gallery placeholder -------- */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 740px) { .gallery-grid { grid-template-columns: 1fr 1fr; } } .gallery-cell { aspect-ratio: 4/3; background: radial-gradient(ellipse 60% 50% at 40% 30%, rgba(91, 130, 232, 0.32) 0%, transparent 55%), linear-gradient(135deg, var(--cobalt) 0%, var(--cobalt-deep) 100%); display: flex; align-items: flex-end; padding: 14px; color: rgba(250, 246, 238, 0.55); font-family: var(--font-body); font-size: 11px; font-style: italic; letter-spacing: 0.04em; } /* -------- Volunteer embed placeholder -------- */ .vol-embed { min-height: 600px; border: 2.5px dashed var(--rule-strong); padding: 40px; background: var(--cream); display: grid; place-items: center; text-align: center; color: var(--ink-soft); font-family: var(--font-body); font-style: italic; font-size: 16px; } /* -------- News list / strip -------- */ .news-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 800px) { .news-strip { grid-template-columns: 1fr; } } .news-card { border-top: 2px solid var(--black); padding-top: 20px; display: flex; flex-direction: column; text-decoration: none; color: var(--black); } .news-card .news-date { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 10px; } .news-card h3 { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.005em; line-height: 1; text-transform: uppercase; margin-bottom: 10px; } .news-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; flex: 1; } .news-card .btn-link { font-size: 11px; letter-spacing: 0.24em; } /* -------- Get Involved 5-card grid -------- */ .involve-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 1100px) { .involve-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .involve-grid { grid-template-columns: 1fr; } } .involve-card { display: flex; flex-direction: column; justify-content: space-between; background: var(--cream); border: 1px solid var(--black); padding: 28px 24px; text-decoration: none; color: var(--black); min-height: 220px; transition: background 0.18s, color 0.18s; } .involve-card:hover, .involve-card:focus-visible { background: var(--cobalt); color: var(--cream); } .involve-card:hover .involve-card-num { color: var(--cobalt-light); } .involve-card:hover p { color: rgba(250,246,238,0.78); } .involve-card:hover .involve-arrow { color: var(--cobalt-light); } .involve-card.is-feature { background: var(--cobalt); color: var(--cream); border-color: var(--cobalt); } .involve-card.is-feature .involve-card-num { color: rgba(250,246,238,0.7); } .involve-card.is-feature p { color: rgba(250,246,238,0.82); } .involve-card.is-feature .involve-arrow { color: var(--cream); } .involve-card-num { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt); } .involve-card h3 { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.005em; line-height: 0.95; text-transform: uppercase; margin: 12px 0 8px; } .involve-card p { font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); } .involve-arrow { font-family: var(--font-display); font-size: 22px; color: var(--cobalt); margin-top: 14px; } /* -------- Donate hub (3-path) -------- */ .donate-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--black); } @media (max-width: 880px) { .donate-hub { grid-template-columns: 1fr; } } .donate-path { padding: 40px 32px 36px; display: flex; flex-direction: column; background: var(--cream); border-right: 1px solid var(--black); } .donate-path:last-child { border-right: 0; } @media (max-width: 880px) { .donate-path { border-right: 0; border-bottom: 1px solid var(--black); } .donate-path:last-child { border-bottom: 0; } } .donate-path.is-feature { background: var(--cobalt); color: var(--cream); } .donate-path.is-feature h3 em { color: var(--cobalt-light); } .donate-path.is-feature .donate-path-tier { color: rgba(250, 246, 238, 0.78); } /* C-4 — 11px body, cream-78 passes AA */ .donate-path.is-feature p, .donate-path.is-feature li { color: rgba(250, 246, 238, 0.78); } .donate-path.is-feature li::before { background: var(--cobalt-light); } .donate-path-tier { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 12px; } .donate-path h3 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; line-height: 0.95; margin-bottom: 14px; } .donate-path h3 em { color: var(--cobalt); font-style: normal; } .donate-path p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 16px; } .donate-path ul { list-style: none; margin: 12px 0 24px; } .donate-path li { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); padding: 8px 0 8px 18px; border-top: 1px solid var(--rule); position: relative; } .donate-path li:first-child { border-top: 0; } .donate-path li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--cobalt); } .donate-path .btn-link { margin-top: auto; align-self: flex-start; } /* -------- Capital Campaign (gated) -------- */ .gated { display: none; } .gated.is-demo { display: block; } .capital { background: var(--cobalt); color: var(--cream); border-top: 1px solid var(--black); } .capital h2 { color: var(--cream); } .capital h2 em { color: var(--cobalt-light); font-style: normal; } .capital .ed-num { color: rgba(250, 246, 238, 0.7); } .capital-goal { font-family: var(--font-display); font-size: clamp(56px, 8vw, 120px); color: var(--cobalt-light); letter-spacing: -0.005em; line-height: 0.9; margin: 16px 0 24px; text-transform: uppercase; } .capital-progress { display: grid; grid-template-columns: max-content 1fr; gap: 28px; align-items: center; margin-bottom: 32px; } @media (max-width: 700px) { .capital-progress { grid-template-columns: 1fr; } } .capital-progress strong { font-family: var(--font-display); font-size: 36px; color: var(--cobalt-light); letter-spacing: -0.005em; text-transform: uppercase; } .capital-bar { position: relative; height: 12px; background: rgba(250,246,238,0.12); } .capital-bar::after { content: ''; position: absolute; inset: 0 var(--bar-empty, 68%) 0 0; background: var(--cobalt-light); } .capital-bar-label { font-family: var(--font-body); font-style: italic; font-size: 13px; color: rgba(250,246,238,0.7); } .capital-work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; } @media (max-width: 980px) { .capital-work { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .capital-work { grid-template-columns: 1fr; } } .capital-work-item { border-top: 1px solid rgba(250,246,238,0.3); padding-top: 16px; font-family: var(--font-body); font-size: 14.5px; color: rgba(250,246,238,0.85); } .capital-work-item strong { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.005em; text-transform: uppercase; color: var(--cream); margin-bottom: 6px; } .capital-updates { margin-top: 36px; } .capital-update { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid rgba(250,246,238,0.3); font-family: var(--font-body); font-size: 14.5px; color: rgba(250,246,238,0.88); } @media (max-width: 700px) { .capital-update { grid-template-columns: 1fr; } } .capital-update span { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt-light); padding-top: 2px; } /* -------- Visit blocks -------- */ .visit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 72px); } @media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } } .visit-block { margin-bottom: 32px; } .visit-block h3 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 8px; } .visit-block p, .visit-block address { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--black); font-style: normal; } /* -------- Map embed -------- */ .map-frame { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--black); background: var(--cream-deep); } /* -------- Footer -------- */ .site-footer { background: var(--cobalt); /* Ticket 1.6 audit — was var(--black); navy for sitewide cohesion */ color: var(--cream); padding: clamp(80px, 10vw, 120px) 0 28px; } .site-footer h3 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(250, 246, 238, 0.6); margin-bottom: 16px; } .site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(250, 246, 238, 0.15); } @media (max-width: 1100px) { .site-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; gap: 36px; } } .foot-brand-mark { display: block; height: 40px; width: auto; margin-bottom: 14px; } .foot-brand-blurb { font-family: var(--font-body); font-size: 14px; color: rgba(250, 246, 238, 0.7); line-height: 1.55; max-width: 32ch; } .newsletter-blurb { font-family: var(--font-body); font-size: 14px; color: rgba(250, 246, 238, 0.7); max-width: 32ch; margin-bottom: 14px; line-height: 1.55; } .newsletter-form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; } .newsletter-form input { padding: 12px 14px; background: rgba(250, 246, 238, 0.05); border: 1px solid rgba(250, 246, 238, 0.2); color: var(--cream); font-family: var(--font-body); font-size: 14px; } .newsletter-form input::placeholder { color: rgba(250,246,238, 0.65); } /* H-11 — was 0.4 (3.37 fails AA); 0.65 is 6.39 PASS AA */ .newsletter-form input:focus { outline: 2px solid var(--cream); outline-offset: 2px; border-color: var(--cream); } /* H-14 — outline restored on dark footer; cream against navy is 12.99 PASS */ .newsletter-form button { background: var(--cobalt); color: var(--cream); padding: 12px 22px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; border: 0; cursor: pointer; transition: background 0.15s; align-self: flex-start; } .newsletter-form button:hover { background: var(--cobalt-light); } .site-footer address { font-family: var(--font-body); font-style: normal; color: rgba(250, 246, 238, 0.75); line-height: 1.7; font-size: 14px; } .site-footer-links { list-style: none; line-height: 2.1; font-size: 14px; } .site-footer-links a { color: rgba(250, 246, 238, 0.75); text-decoration: none; font-family: var(--font-body); } .site-footer-links a:hover { color: var(--cobalt-light); } .footer-social { display: flex; gap: 10px; margin-top: 16px; } .footer-social a { width: 36px; height: 36px; background: rgba(250, 246, 238, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--cream); text-decoration: none; transition: background 0.15s; } .footer-social a:hover { background: var(--cobalt); } .footer-social svg { width: 16px; height: 16px; } .site-footer-bottom { padding-top: 24px; font-family: var(--font-body); font-style: italic; font-size: 12px; color: rgba(250, 246, 238, 0.55); /* H-12 — was 0.5 (4.40 fails AA body); 0.55 is 4.99 PASS */ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* -------- Section pattern for sub-pages (numbered editorial) -------- */ .ed-section .grid8 { row-gap: 24px; } .ed-section-num { grid-column: 1 / 9; } .ed-section-head { grid-column: 1 / 8; margin-bottom: clamp(40px, 5vw, 72px); } .ed-section-head h2 { max-width: 16ch; margin-bottom: 16px; } .ed-section-head .lede { max-width: 56ch; } .ed-section-body { grid-column: 1 / 5; } .ed-section-aside { grid-column: 6 / 9; } @media (max-width: 720px) { .ed-section-body, .ed-section-aside, .ed-section-head { grid-column: 1 / 5; } } /* -------- Reduced motion -------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------- Motion layer (additive). Initial hidden states for scroll-reveal; */ /* site.js + anime.js animate these to visible. Gated on html.motion (set */ /* pre-paint by the inline head gate) so reduced-motion + no-JS see everything. */ html.motion :is(.section-head, .show-tile, .involve-card, .tier-card, .news-card, .donate-path, .person-card, .gallery-cell, .credit-list, .capital-work-item, .capital-update, .pull-quote) { opacity: 0; transform: translateY(14px); will-change: opacity, transform; }