@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Anton&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================================================
T & S Wedding — Colors & Type
--------------------------------------------------------------------------
Vibe: Palm Springs mid-century modern × Coachella desert disco.
Not traditional wedding — no script fonts, no eucalyptus green, no blush
pink hand-lettering. Think: sun-faded stucco, breeze-block geometry,
pastel doors against bright white walls, mountains in the distance, a
disco ball spinning at golden hour.
========================================================================= */
/* -------------------------------------------------------------------------
Google Fonts — load these in :
These are Google Fonts — no licensing concerns, used as recommended.
------------------------------------------------------------------------- */
:root {
/* ===================================================================
COLORS — Primary palette
The pastel doors of Palm Springs MCM, set against bright white stucco.
=================================================================== */
--pink-door: #F4A6B6; /* the pink door */
--pink-door-deep: #E07A95;
--pink-door-soft: #FBD7DE;
--yellow-door: #F5C84B; /* the yellow door — sun, citrus */
--yellow-door-deep: #E0A82E;
--yellow-door-soft: #FBE8AC;
--pool-blue: #8CC8D6; /* the baby-blue door / pool tile */
--pool-blue-deep: #4A9CB0;
--pool-blue-soft: #D6ECF1;
--cactus: #6B8E5A; /* sage / desert greenery */
--cactus-deep: #4A6940;
--cactus-soft: #C4D3B4;
--sunset: #E97B4A; /* terracotta, desert sunset */
--sunset-deep: #C45A2C;
/* ===================================================================
COLORS — Neutrals
Sun-bleached stucco to deep palm-shadow black.
=================================================================== */
--stucco-00: #FBF8F2; /* paper / off-white stucco */
--stucco-50: #F4EFE5; /* warm cream */
--stucco-100: #E8DFCB; /* desert sand */
--stucco-200: #C9BFA6; /* dry grass */
--stucco-300: #9A917B; /* mountain dust */
--stucco-400: #6B6457; /* dusk shadow */
--stucco-500: #3D3A33; /* palm shadow */
--stucco-900: #161513; /* deep night, near-black */
--white: #FFFFFF;
--black: #0B0A09;
/* ===================================================================
COLORS — Semantic
=================================================================== */
--bg: var(--stucco-00);
--bg-elevated: var(--white);
--bg-inverse: var(--stucco-900);
--bg-accent: var(--pink-door-soft);
--fg: var(--stucco-900);
--fg-muted: var(--stucco-400);
--fg-subtle: var(--stucco-300);
--fg-inverse: var(--stucco-00);
--fg-accent: var(--pink-door-deep);
--border: var(--stucco-100);
--border-strong: var(--stucco-300);
--border-inverse: var(--stucco-500);
--link: var(--pool-blue-deep);
--link-hover: var(--stucco-900);
--success: var(--cactus-deep);
--warning: var(--yellow-door-deep);
--danger: var(--sunset-deep);
/* ===================================================================
TYPE — Font families
=================================================================== */
--font-display: "Bagel Fat One", "Bowlby One", "Impact", sans-serif; /* big retro-disco moments */
--font-headline: "Anton", "Oswald", "Helvetica Neue", sans-serif; /* condensed poster — pairs with Bagel */
--font-body: "DM Sans", "Helvetica Neue", sans-serif; /* everything else */
--font-mono: "DM Mono", "IBM Plex Mono", monospace; /* dates, codes, meta */
/* ===================================================================
TYPE — Scale (modular, 1.25 ratio with a hero jump)
=================================================================== */
--fs-hero: clamp(72px, 14vw, 200px); /* @kind font */ /* Bagel Fat One — names */
--fs-display: clamp(48px, 7vw, 96px); /* @kind font */ /* Anton — section openers */
--fs-h1: 48px;
--fs-h2: 36px;
--fs-h3: 24px;
--fs-h4: 20px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-caption: 12px;
--fs-overline: 11px;
--lh-tight: 0.95; /* @kind font */
--lh-snug: 1.15; /* @kind font */
--lh-normal: 1.45; /* @kind font */
--lh-relaxed: 1.7; /* @kind font */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.18em; /* for overlines */
/* ===================================================================
SPACING — 4px base
=================================================================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* ===================================================================
RADII — restrained. MCM is mostly sharp; soft radii only for
organic shapes (the curved walkway, breeze-block circles).
=================================================================== */
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 6px;
--radius-lg: 12px;
--radius-pill: 999px;
/* ===================================================================
SHADOWS — keep them honest, sun is bright in the desert
=================================================================== */
--shadow-sm: 0 1px 2px rgba(22, 21, 19, 0.06);
--shadow-md: 0 4px 16px rgba(22, 21, 19, 0.08);
--shadow-lg: 0 18px 48px -12px rgba(22, 21, 19, 0.18);
--shadow-hard: 6px 6px 0 var(--stucco-900); /* offset block-shadow, retro poster */
}
/* =========================================================================
Semantic type primitives.
Use these instead of redeclaring fonts on every component.
========================================================================= */
.hero,
h1.hero {
font-family: var(--font-display);
font-size: var(--fs-hero);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: 400; /* Monoton is single weight */
text-transform: uppercase;
}
.display {
font-family: var(--font-headline);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: 0;
text-transform: uppercase;
font-weight: 400; /* Anton is single weight */
}
h1 {
font-family: var(--font-headline);
font-size: var(--fs-h1);
line-height: var(--lh-snug);
letter-spacing: 0;
text-transform: uppercase; /* Anton wants to be uppercase */
font-weight: 400;
}
h2 {
font-family: var(--font-headline);
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: 0;
text-transform: uppercase;
font-weight: 400;
}
h3 {
/* h3 stays mixed-case for sub-section legibility */
font-family: var(--font-headline);
font-size: var(--fs-h3);
line-height: var(--lh-snug);
letter-spacing: 0.01em;
font-weight: 400;
}
h4 {
font-family: var(--font-body);
font-size: var(--fs-h4);
line-height: var(--lh-snug);
font-weight: 600;
}
p, body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
font-weight: 400;
color: var(--fg);
}
p.lead {
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
color: var(--fg-muted);
}
small, .caption {
font-size: var(--fs-caption);
line-height: var(--lh-normal);
color: var(--fg-muted);
}
.overline {
font-family: var(--font-mono);
font-size: var(--fs-overline);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--fg-muted);
}
.mono {
font-family: var(--font-mono);
font-feature-settings: "ss01";
}
code, kbd, pre {
font-family: var(--font-mono);
font-size: 0.92em;
}
a {
color: var(--link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 120ms ease;
}
a:hover { color: var(--link-hover); }
/* =========================================================================
RESPONSIVE — phones & small tablets.
--------------------------------------------------------------------------
The site is built with React inline styles, so these overrides hook onto
class names added to the layout containers and use !important to win over
the inline `style` attribute. Desktop layout is the default; everything
here only kicks in below the breakpoints.
========================================================================= */
/* Nav: link row is inline by default; the hamburger is desktop-hidden. */
.ts-nav-links { display: flex; align-items: center; gap: 32px; }
.ts-nav-toggle { display: none; }
/* Tablet: the home card grid drops from three columns to two. */
@media (max-width: 900px) {
.ts-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
/* --- Page gutters: 48px → 20px ------------------------------------- */
.ts-pad { padding-left: 20px !important; padding-right: 20px !important; }
/* --- Any multi-column grid collapses to a single column ------------- */
.ts-stack { grid-template-columns: 1fr !important; }
.ts-cards { grid-template-columns: 1fr !important; }
/* --- Nav → wordmark + RSVP + hamburger; links become a dropdown ----- */
.ts-nav { padding: 12px 20px !important; }
.ts-wordmark { font-size: 18px !important; }
.ts-nav-toggle { display: inline-flex !important; }
.ts-nav-links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: flex-start; gap: 2px;
background: var(--bg); border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-md);
padding: 8px 20px 16px; display: none;
}
.ts-nav-links.is-open { display: flex; }
.ts-nav-links a {
width: 100%;
padding-top: 10px !important; padding-bottom: 10px !important;
border-top: 0 !important;
}
/* --- Display type scales with the viewport so it never clips -------- */
.ts-hero-name { font-size: clamp(56px, 15vw, 96px) !important; }
.ts-title-xl { font-size: clamp(34px, 9vw, 56px) !important; }
.ts-title-lg { font-size: clamp(30px, 8vw, 44px) !important; }
/* --- Portraits that relied on grid-stretch get an explicit ratio ---- */
.ts-portrait {
height: auto !important; width: 100%;
aspect-ratio: 4 / 5; max-height: 70vh;
}
/* --- Map: 16:7 is too short on a narrow screen --------------------- */
.ts-map { aspect-ratio: 4 / 3 !important; }
/* --- Schedule day rows: stack date, day name, and event cards ------ */
.ts-dayrow { grid-template-columns: 1fr !important; gap: 12px !important; }
.ts-dayrow-date {
flex-direction: row !important; align-items: baseline !important;
gap: 10px !important; font-size: 44px !important; padding-top: 0 !important;
}
.ts-dayrow-day {
writing-mode: horizontal-tb !important; font-size: 22px !important;
padding: 0 !important;
}
/* --- EventDetail: drop the big gap left when the accent bar stacks -- */
.ts-eventdetail {
gap: 16px !important;
padding-top: 40px !important; padding-bottom: 40px !important;
}
/* --- PageHeader: trim the tall hero header a little ---------------- */
.ts-pageheader { min-height: 480px !important; padding-bottom: 56px !important; }
}