/* src/static/css/core.css */ /* src/static/css/core.css Loaded on every page. Tokens, base, nav, footer, lightbox, dividers, sections, buttons, alerts, shared form fields, scroll reveals, reduced-motion. Page-specific files (home/rsvp/admin) cascade on top. */ /* --- Fonts --- Cormorant Garamond and Manrope load from Google Fonts in . */ /* --- Custom Properties --- Palette tokens hold raw brand colors. Rules throughout the file must reference the semantic tokens below (primary, accent, bg, surface, …), not the palette tokens directly — that's what lets dark mode swap roles. */ :root { /* Palette (do not use directly in rules) */ --burgundy: #660314; --burgundy-light: #7a1a2e; --burgundy-dark: #4d0210; --gold: #ddbb6b; --gold-light: #e8cc8a; --gold-dark: #c9a550; --cream: #fffdf8; --cream-dark: #fff5e6; --white: #ffffff; /* Semantic roles — light theme */ --bg: var(--cream); --bg-alt: var(--cream-dark); --surface: var(--white); --surface-alt: var(--cream); --text: #2c2c2c; --text-light: #4a4a4a; --text-lighter: #777; --border: #e8e0d4; --primary: var(--burgundy); --primary-hover: var(--burgundy-light); --primary-dark: var(--burgundy-dark); --primary-on: var(--cream); --accent: var(--gold); --accent-soft: var(--gold-light); --accent-dark: var(--gold-dark); --accent-on: var(--burgundy-dark); --nav-scrolled-bg: rgba(255, 253, 248, 0.95); --nav-open-bg: rgba(255, 253, 248, 0.98); --section-layer-1: var(--bg); --section-layer-2: var(--bg-alt); --section-layer-3: color-mix(in srgb, var(--surface) 74%, var(--bg)); --section-frame: color-mix(in srgb, var(--primary) 28%, transparent); --section-edge: rgba(102, 3, 20, 0.12); --section-glow: rgba(255, 255, 255, 0.58); --ok: #2d7d46; --danger: #c44; --danger-hover: #a33; --danger-on: #fff; --alert-bg: #fff0f0; --alert-border: #ffd0d0; --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03); --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.06); --shadow-card-sm: 0 2px 12px rgba(0, 0, 0, 0.02); --shadow-card-lift: 0 8px 24px rgba(0, 0, 0, 0.06); --dot-on-dark-label: rgba(255, 253, 248, 0.5); --dot-on-dark-label-active: var(--cream); --dot-on-dark: var(--cream); --decor-ink: var(--burgundy); --decor-ink-opacity: 0.85; --font-heading: "Cormorant Garamond", Georgia, serif; --font-body: "Manrope", system-ui, -apple-system, sans-serif; --max-width: 900px; --section-padding: 6rem 2rem; --button-radius: 6px; } html.dark { /* Muted matte maroon grounds. Keep the hue warm and powdery rather than black, violet, or saturated wine. */ --bg: #4b0610; --bg-alt: #4f0c13; --surface: #561819; --surface-alt: #320309; /* Warm parchment text against burgundy — cooler greys would read grey. */ --text: #f3e6d1; --text-light: #dfcdb7; --text-lighter: #b69f8b; /* Translucent gold hairlines — they pop against burgundy without the heavy contrast of solid gold rules. */ --border: rgba(221, 187, 107, 0.22); /* Brand role swap: gold becomes primary. Primary "on" text sits on a gold button, so use deep burgundy instead of pure black. */ --primary: var(--gold); --primary-hover: var(--gold-light); --primary-dark: var(--gold-dark); --primary-on: #4b0610; /* Accent stays gold (solid) for dividers / card top-borders / focus rings so they read as gold accents, not hairlines. --accent-dark semantically means "more emphatic accent" — on cream that's a deeper gold, on burgundy it's a brighter gold. */ --accent: var(--gold); --accent-soft: var(--gold-light); --accent-dark: var(--gold-light); --accent-on: #4b0610; --nav-scrolled-bg: rgba(75, 6, 16, 0.92); --nav-open-bg: rgba(75, 6, 16, 0.98); --section-layer-1: #4b0610; --section-layer-2: #4f0c13; --section-layer-3: #320309; --section-frame: rgba(221, 187, 107, 0.18); --section-edge: rgba(42, 3, 9, 0.72); --section-glow: rgba(245, 219, 166, 0.03); --ok: #6edc87; --danger: #f07b7b; --danger-hover: #e45656; --danger-on: #4b0610; --alert-bg: #5d151b; --alert-border: #7d3030; --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.7); --shadow-card-sm: 0 2px 12px rgba(0, 0, 0, 0.45); --shadow-card-lift: 0 8px 24px rgba(0, 0, 0, 0.6); --dot-on-dark-label: rgba(243, 230, 209, 0.5); --dot-on-dark-label-active: var(--gold); --dot-on-dark: var(--gold); --decor-ink: var(--gold); --decor-ink-opacity: 0.8; } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); font-weight: 300; color: var(--text); background-color: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } .heading { font-family: var(--font-heading); font-weight: 400; } img { max-width: 100%; height: auto; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary-hover); } /* --- Navigation --- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; backdrop-filter: none; border-bottom: 1px solid transparent; transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; } .site-nav.nav-scrolled { background: var(--nav-scrolled-bg); backdrop-filter: blur(10px); border-bottom-color: var(--border); } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-logo { font-family: var(--font-heading); font-size: 1.25rem; color: var(--primary); letter-spacing: 0.12em; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links a { font-size: 0.85rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); transition: color 0.2s; } .nav-links a:hover { color: var(--primary); } .nav-links a.btn { color: var(--btn-color); } .nav-links a.btn:hover { color: var(--btn-hover-color); } .nav-cta { flex-shrink: 0; } .nav-toggle { display: none; } .nav-toggle.btn { display: none; } .site-nav.open { background: var(--nav-open-bg); backdrop-filter: blur(10px); border-bottom-color: var(--border); } /* --- Theme Toggle --- margin-left:auto pushes this (and every sibling after it in .nav-inner) to the right, so desktop layout is [logo] [theme][nav-links] and mobile is [logo] [theme][hamburger] — keeping the toggle visible without the user having to open the menu. */ .theme-toggle { margin-left: auto; margin-right: 0.5rem; flex-shrink: 0; } .theme-toggle .theme-icon { width: 20px; height: 20px; display: none; } /* In light mode, offer the moon (click to go dark). In dark mode, offer the sun. */ .theme-toggle .theme-icon-moon { display: block; } html.dark .theme-toggle .theme-icon-moon { display: none; } html.dark .theme-toggle .theme-icon-sun { display: block; } /* --- Dividers --- */ .hero-divider, .section-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0 2rem; } .divider-line { width: 60px; height: 1px; background: var(--accent); } .divider-diamond { color: var(--accent); font-size: 0.6rem; } .gold-divider .divider-line { background: var(--accent-soft); } .gold-divider .divider-diamond { color: var(--accent-soft); } /* --- Sections --- */ .section { padding: var(--section-padding); } .section-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; } .section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--primary); letter-spacing: 0.05em; } .section-alt { background: var(--bg-alt); } /* --- Buttons --- */ .btn { --btn-bg: transparent; --btn-border: transparent; --btn-color: var(--text); --btn-hover-bg: color-mix(in srgb, var(--text) 8%, transparent); --btn-hover-border: color-mix(in srgb, var(--text) 18%, transparent); --btn-hover-color: var(--text); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 0.78rem 1.35rem; border: 1px solid var(--btn-border); border-radius: var(--button-radius); background: var(--btn-bg); color: var(--btn-color); appearance: none; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s; } .btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: var(--btn-hover-color); text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible, .btn-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-primary { --btn-bg: var(--primary); --btn-border: var(--primary); --btn-color: var(--primary-on); --btn-hover-bg: var(--primary-hover); --btn-hover-border: var(--primary-hover); --btn-hover-color: var(--primary-on); } .btn-secondary { --btn-bg: color-mix(in srgb, var(--surface) 72%, transparent); --btn-border: var(--border); --btn-color: var(--text); --btn-hover-bg: color-mix(in srgb, var(--text) 8%, var(--surface)); --btn-hover-border: color-mix(in srgb, var(--primary) 56%, var(--border)); --btn-hover-color: var(--text); } .btn-ghost { --btn-bg: transparent; --btn-border: transparent; --btn-color: var(--text-light); --btn-hover-bg: color-mix(in srgb, var(--text) 7%, transparent); --btn-hover-border: color-mix(in srgb, var(--text) 10%, transparent); --btn-hover-color: var(--primary); } .btn-danger { --btn-bg: color-mix(in srgb, var(--danger) 14%, transparent); --btn-border: var(--danger); --btn-color: var(--danger); --btn-hover-bg: var(--danger); --btn-hover-border: var(--danger); --btn-hover-color: var(--danger-on); } .btn-sm { min-height: 34px; padding: 0.35rem 0.7rem; font-size: 0.74rem; } .btn-block { width: 100%; } .btn-icon { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; letter-spacing: 0; } .btn-icon.btn-sm { width: 30px; height: 30px; min-height: 30px; padding: 0; } .btn-reset { appearance: none; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } /* --- Form Fields (shared by RSVP + admin edit) --- */ .attending-toggle { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; } .toggle-option { flex: 1; cursor: pointer; } .toggle-option input { display: none; } .toggle-label { display: block; text-align: center; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--button-radius); font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.2s; } .toggle-option input:checked + .toggle-label.accept { background: var(--primary); border-color: var(--primary); color: var(--primary-on); } .toggle-option input:checked + .toggle-label.decline { background: var(--bg); border-color: var(--primary); color: var(--primary); } .comments-section { margin-top: 1rem; } .field-label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.5rem; margin-top: 1rem; } .field-label:first-child { margin-top: 0; } .input-text, .input-select, .input-textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border); background: var(--surface-alt); font-family: var(--font-body); font-size: 0.9rem; color: var(--text); outline: none; transition: border-color 0.2s; } .input-text:focus, .input-select:focus, .input-textarea:focus { border-color: var(--accent); } .input-textarea { resize: vertical; } /* --- Alert --- */ .alert { padding: 1rem 1.5rem; margin-bottom: 1.5rem; font-size: 0.9rem; max-width: 400px; margin-left: auto; margin-right: auto; } .alert-error { background: var(--alert-bg); border: 1px solid var(--alert-border); color: var(--primary); } /* --- Footer --- Breakout cream band: local token overrides pin the footer to the light-theme palette so burgundy ink on darker cream renders in both modes. Children keep using semantic tokens. */ .site-footer { --bg: var(--cream); --primary: var(--burgundy); --decor-ink: var(--burgundy); --decor-ink-2: #b8541f; --decor-ink-split: 58.46%; --decor-ink-opacity: 0.85; background: var(--bg); text-align: center; padding: 3rem 2rem 2rem; border-top: 1px solid var(--border); } html.dark .site-footer { --bg: var(--cream-dark); } .footer-cats { margin-bottom: 1.5rem; } .footer-cat-img { display: inline-block; height: 200px; aspect-ratio: 2867 / 2013; background-image: linear-gradient( to right, var(--decor-ink) 0, var(--decor-ink) var(--decor-ink-split), var(--decor-ink-2) var(--decor-ink-split), var(--decor-ink-2) 100% ); opacity: var(--decor-ink-opacity); -webkit-mask: url("../img/cat-trio-mask.png") center / contain no-repeat; mask: url("../img/cat-trio-mask.png") center / contain no-repeat; cursor: zoom-in; transition: opacity 180ms ease, transform 220ms ease; } .footer-cat-img:hover, .footer-cat-img:focus-visible { opacity: 1; transform: scale(1.02); } .footer-cat-img:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; } .lightbox { --bg: var(--cream); --decor-ink: var(--burgundy); --decor-ink-2: #b8541f; --decor-ink-split: 58.46%; --decor-ink-opacity: 0.85; position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 5vmin; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); opacity: 0; transition: opacity 220ms ease; } html.dark .lightbox { --bg: var(--cream-dark); } .lightbox[hidden] { display: none; } .lightbox.is-open { opacity: 1; } .lightbox-image { width: min(92vw, calc(92vh * 2867 / 2013)); aspect-ratio: 2867 / 2013; background-image: linear-gradient( to right, var(--decor-ink) 0, var(--decor-ink) var(--decor-ink-split), var(--decor-ink-2) var(--decor-ink-split), var(--decor-ink-2) 100% ); opacity: var(--decor-ink-opacity); -webkit-mask: url("../img/cat-trio-mask.png") center / contain no-repeat; mask: url("../img/cat-trio-mask.png") center / contain no-repeat; transform: scale(0.94); transition: transform 260ms cubic-bezier(0.22, 0.9, 0.3, 1.2); } .lightbox.is-open .lightbox-image { transform: scale(1); } .lightbox-close { position: absolute; top: max(env(safe-area-inset-top, 0px), 18px); right: max(env(safe-area-inset-right, 0px), 18px); --btn-bg: color-mix(in srgb, var(--decor-ink) 12%, transparent); --btn-border: transparent; --btn-color: var(--decor-ink); --btn-hover-bg: color-mix(in srgb, var(--decor-ink) 22%, transparent); --btn-hover-border: transparent; --btn-hover-color: var(--decor-ink); } body.lightbox-open { overflow: hidden; } .footer-names { font-size: 1.2rem; color: var(--primary); margin-bottom: 0.25rem; } .footer-date { font-family: var(--font-heading); font-variant-numeric: lining-nums; font-size: 1.05rem; color: var(--primary); letter-spacing: 0.18em; } /* --- Scroll Reveals --- */ .reveal { opacity: 0; transform: translateY(35px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; } .reveal-d3 { transition-delay: 0.3s; } .reveal-d4 { transition-delay: 0.4s; } /* --- Responsive (core) --- */ @media (max-width: 768px) { :root { --section-padding: 4rem 1.5rem; } .nav-toggle { display: flex; } .nav-toggle.btn { display: flex; } .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--nav-open-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); flex-direction: column; padding: 1.5rem 2rem; gap: 1rem; } .site-nav.open .nav-links { display: flex; } /* Keep the toggle always reachable (not behind the hamburger) with a bigger tap target. margin-left:auto is inherited from the base rule. */ .theme-toggle { width: 44px; height: 44px; margin-right: 0.25rem; } .attending-toggle { flex-direction: column; } } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .reveal { opacity: 1 !important; transform: none !important; } }