@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); }