/* =========================================================================
Andrew & Anitha — Baby Shower Gift Registry
-------------------------------------------------------------------------
Palette is drawn from the list itself: the parents asked for "nude and pink"
on nearly every soft item, so the page is built on warm cream with a deep
rose as the single action colour and an antique gold used only as trim.
Every text/background pair below is contrast-checked; the ratios are noted
where they were close.
========================================================================= */
:root {
/* Surfaces — warm stone and sage. Deliberately ungendered: Andrew & Anitha
are keeping the surprise, so nothing here may read as an announcement.
Every text/background pair below is contrast-checked; ratios are noted. */
--surface: #faf7f2; /* warm off-white — never pure #fff */
--surface-2: #f1ede4; /* banded sections */
--tile: #e6e8df; /* soft sage-stone behind every gift icon */
--deep: #2f3a33; /* deep forest: hero, banner, footer */
--deep-2: #26302a;
/* Ink */
--ink: #232724; /* 14.5:1 on surface */
--ink-soft: #5e655e; /* 5.6:1 on surface */
--ink-faint: #949a92;
/* Brand */
--primary: #4a6350; /* deep sage — 6.2:1 on surface, 6.6:1 vs white text */
--primary-dark: #3c5242;
--primary-tint: #e9efe9;
--primary-soft: #6d8a72; /* the lighter end of the progress gradient */
--gold: #b08a3e; /* trim; 4.8:1 for ink on gold */
--gold-light: #ddb765; /* 6.2:1 on --deep, safe for text on dark */
--line: #e2ddd2;
--line-strong: #cfc8b9;
/* Type */
--display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
--body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* 8px spacing grid */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
--s5: 48px; --s6: 64px; --s7: 80px; --s8: 96px;
--container: 1200px;
--radius: 10px;
--radius-sm: 6px;
--shadow: 0 14px 40px -18px rgba(35, 39, 36, 0.35);
--shadow-lift: 0 22px 50px -20px rgba(35, 39, 36, 0.45);
--ease: 0.2s ease;
}
/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--surface);
color: var(--ink);
font-family: var(--body);
font-size: 1rem; /* 16px floor, mobile included */
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
/* Cormorant's default figures are old-style, where 1 reads as a capital I
("3-in-I Bassinet", step "I"). Lining figures everywhere, inherited. */
font-variant-numeric: lining-nums;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
p { margin: 0; max-width: 65ch; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: var(--s2);
top: -80px;
z-index: 200;
background: var(--primary);
color: #fff;
padding: 12px 20px;
border-radius: var(--radius-sm);
font-weight: 700;
transition: top var(--ease);
}
.skip-link:focus { top: var(--s2); }
/* --------------------------------------------------------------- layout */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--s3); /* content never touches the edge */
}
section { padding-block: clamp(3rem, 8vw, 7rem); }
/* The nav is fixed at 72px, so an in-page anchor would otherwise drop the
heading it jumped to underneath it. */
section[id], div[id='top'] { scroll-margin-top: 88px; }
.band { background: var(--surface-2); }
.section-head { max-width: 760px; margin-bottom: var(--s5); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }
.eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: var(--s1);
}
.section-head h2 + p,
.section-head .eyebrow + h2 { margin-top: 0.5rem; }
.section-head h2 + p { margin-top: 0.85rem; color: var(--ink-soft); font-size: 1.06rem; }
/* A short gold rule used as section trim. Decorative only. */
.rule {
width: 56px;
height: 2px;
background: var(--gold);
border: 0;
margin: var(--s2) 0 0;
}
.section-head.center .rule { margin-inline: auto; }
/* --------------------------------------------------------------- buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0.85rem 2rem;
border-radius: var(--radius-sm);
border: 1.5px solid transparent;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
transition: background var(--ease), color var(--ease), border-color var(--ease),
transform var(--ease), box-shadow var(--ease);
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
/* On the dark banner the rose CTA barely separates from the background
(1.7:1 against --deep), so the primary action there switches to gold with
dark ink: 4.3:1 against the banner, 4.8:1 for the label itself. */
.btn-accent { background: var(--gold); color: var(--ink); }
.btn-accent:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn-on-dark:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; transform: translateY(-2px); }
.btn-ghost {
background: transparent; border: 0; color: var(--ink-soft);
padding: 8px 4px; min-height: 44px; font-weight: 500; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.btn-ghost:hover { color: var(--primary); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
/* ------------------------------------------------------------------- nav */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: 72px;
background: var(--surface);
border-bottom: 1px solid var(--line);
transition: box-shadow var(--ease), background var(--ease);
}
.nav.scrolled { box-shadow: 0 6px 24px -14px rgba(35, 39, 36, 0.45); }
.nav-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s2);
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--ink);
min-width: 0;
}
.brand-mark {
flex: none;
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-family: var(--display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-family: var(--display); font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.brand-sub {
/* 0.66rem measured at 10.6px on a phone — legible but mean. */
font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-faint); font-weight: 500; white-space: nowrap;
}
.nav-links { display: none; align-items: center; gap: var(--s3); }
.nav-links a {
color: var(--ink);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
padding: 6px 0;
border-bottom: 2px solid transparent;
transition: color var(--ease), border-color var(--ease);
white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); border-bottom-color: var(--primary); }
.nav-cta { display: none; }
.nav .btn { padding: 0.6rem 1.35rem; min-height: 44px; }
.nav-toggle {
width: 44px; height: 44px; /* full 44×44 touch target */
display: grid; place-items: center; /* always vertically centred */
background: transparent; border: 0; cursor: pointer; flex: none;
}
.nav-toggle span {
display: block; width: 22px; height: 2px; background: var(--ink);
position: relative; transition: background var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
content: ''; position: absolute; left: 0; width: 22px; height: 2px;
background: var(--ink); transition: transform var(--ease), top var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { top: 0; transform: rotate(-45deg); }
.mobile-menu {
position: fixed;
inset: 72px 0 0 0;
z-index: 99;
background: var(--surface);
display: grid;
align-content: start;
gap: var(--s1);
padding: var(--s5) var(--s3) var(--s6);
overflow-y: auto;
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity var(--ease), transform var(--ease);
}
.mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a {
text-align: center;
font-size: 1.25rem;
font-family: var(--display);
font-weight: 600;
color: var(--ink);
text-decoration: none;
padding: 14px;
border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { margin-top: var(--s2); }
@media (min-width: 900px) {
.nav-links, .nav-cta { display: flex; }
.nav-toggle { display: none; }
.mobile-menu { display: none; }
}
/* ------------------------------------------------------------------ hero */
.hero {
position: relative;
min-height: 80vh;
display: grid;
align-items: center;
padding-block: calc(72px + var(--s6)) var(--s7);
isolation: isolate;
overflow: hidden;
}
@media (min-width: 900px) { .hero { min-height: 100vh; } }
/* Short desktop windows (720/800px tall) must not clip the hero content. */
@media (min-width: 900px) and (max-height: 820px) {
.hero { min-height: 0; padding-block: calc(72px + var(--s5)) var(--s6); }
}
/* Photograph under a deep sage wash. The images are self-hosted and hand
cropped (see public/assets/) rather than hotlinked, so the framing cannot
change under us and nothing loads from a third party. Every candidate was
measured for rose content before it was allowed in — the baby's sex is a
surprise, and a blush blanket in shot would give it away. */
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--deep); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Never the raw photo — this wash is what makes the type readable. */
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background-image:
url("data:image/svg+xml,"),
linear-gradient(135deg, rgba(47, 58, 51, 0.90) 0%, rgba(47, 58, 51, 0.78) 100%);
background-size: 240px 240px, auto;
}
.hero-inner { max-width: 820px; color: #fff; }
.hero h1 { color: #fff; margin-block: 0.6rem 0; }
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--gold-light);
}
.hero-eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold-light); }
.hero-sub {
margin-top: var(--s3);
font-size: clamp(1.02rem, 1.7vw, 1.18rem);
color: rgba(255, 255, 255, 0.92);
max-width: 56ch;
}
.hero-trust {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
margin-top: var(--s4);
padding-top: var(--s3);
border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hero-trust div { display: flex; align-items: center; gap: 9px; font-size: 0.93rem; color: rgba(255,255,255,0.9); }
.hero-trust svg { flex: none; width: 17px; height: 17px; color: var(--gold-light); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; } }
.scroll-hint {
position: absolute;
left: 50%; bottom: var(--s3);
transform: translateX(-50%);
display: none;
align-items: center; gap: 8px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
@media (min-width: 900px) and (min-height: 700px) { .scroll-hint { display: flex; } }
.scroll-hint svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
.scroll-hint svg { animation: nudge 2s ease-in-out infinite; }
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* ------------------------------------------------------------- rsvp bar */
.rsvp-bar { background: var(--deep); color: #fff; padding-block: var(--s4); }
.rsvp-inner {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--s3);
}
.rsvp-copy { min-width: 0; }
.rsvp-eyebrow {
display: block;
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-light);
}
.rsvp-title {
color: #fff;
font-size: clamp(1.6rem, 3.4vw, 2.2rem);
margin-top: 4px;
}
.rsvp-count { color: rgba(255, 255, 255, 0.82); margin-top: 6px; font-size: 0.98rem; }
.rsvp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.btn-ghost.on-dark { color: rgba(255, 255, 255, 0.82); }
.btn-ghost.on-dark:hover { color: var(--gold-light); }
@media (max-width: 720px) {
.rsvp-inner { flex-direction: column; align-items: flex-start; gap: var(--s2); }
.rsvp-actions { width: 100%; }
.rsvp-actions .btn { flex: 1 1 100%; }
}
/* ----------------------------------------------------------------- steps */
.steps { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s4) var(--s3);
transition: transform var(--ease), box-shadow var(--ease);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.step-num {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
background: var(--primary-tint); color: var(--primary);
font-family: var(--display); font-size: 1.35rem; font-weight: 700;
margin-bottom: var(--s2);
}
.step h3 { margin-bottom: 0.75rem; }
.step p { color: var(--ink-soft); }
/* ----------------------------------------------------------------- story */
/* A short signed note. No heading and no photograph by request — what is left
is the five things a guest actually needs to know. */
.story-note {
max-width: 660px;
margin-inline: auto;
text-align: center;
}
.leaf-divider {
display: block;
width: 104px; height: 22px;
margin: var(--s2) auto var(--s4);
color: var(--gold);
}
.checklist {
list-style: none;
margin: 0;
padding: 0;
display: inline-grid;
gap: 14px;
text-align: left; /* centred block, left-aligned lines */
}
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist svg { flex: none; width: 20px; height: 20px; color: var(--primary); margin-top: 3px; }
.checklist strong { color: var(--ink); font-weight: 700; }
.signature {
margin-top: var(--s4);
font-family: var(--display);
font-size: 1.6rem;
font-style: italic;
color: var(--primary);
}
/* -------------------------------------------------------------- registry */
/* "Not limited to the list" is the single thing guests most need permission
for, so it gets its own block rather than a line of fine print. */
.not-limited {
max-width: 62ch;
margin: var(--s3) auto 0;
padding: 14px var(--s3);
background: var(--primary-tint);
border-left: 3px solid var(--primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--ink);
font-size: 1rem;
text-align: left;
}
.not-limited strong { color: var(--primary-dark); }
.registry-progress {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s3);
margin-bottom: var(--s3);
}
.progress-top {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: var(--s1) var(--s2);
margin-bottom: 12px;
}
.progress-top strong { font-family: var(--display); font-size: 1.5rem; }
.progress-top span { color: var(--ink-soft); font-size: 0.92rem; }
.progress-track { height: 8px; border-radius: 99px; background: var(--tile); overflow: hidden; }
.progress-fill {
height: 100%; width: 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
border-radius: 99px;
transition: width 0.5s ease;
}
.toolbar { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.search-wrap { position: relative; }
.search-wrap svg {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none;
}
.search-wrap input {
width: 100%;
min-height: 48px;
padding: 12px 14px 12px 42px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
font-size: 1rem;
}
.search-wrap input::placeholder { color: var(--ink-faint); }
.search-wrap input:focus { border-color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
.chips {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* bleed to the screen edge so it reads as a scrollable strip */
margin-inline: calc(var(--s3) * -1);
padding-inline: var(--s3);
padding-bottom: 4px;
}
.chips::-webkit-scrollbar { display: none; }
.chip { scroll-snap-align: start; }
}
.chip {
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--ink-soft);
border-radius: 99px;
padding: 9px 16px;
min-height: 42px;
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all var(--ease);
white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.toolbar-row {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--s2);
}
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; font-size: 0.92rem; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
width: 44px; height: 25px; border-radius: 99px;
background: var(--line-strong); position: relative; transition: background var(--ease); flex: none;
}
.switch-track::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 19px; height: 19px; border-radius: 50%; background: #fff;
transition: transform var(--ease);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(19px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--primary); outline-offset: 3px; }
.result-count { color: var(--ink-soft); font-size: 0.9rem; }
/* Read by screen readers, invisible on screen. */
.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;
}
.result-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* "Updates live": the list polls the registry, so a gift another guest takes
greys out here without anyone refreshing. The dot goes still (and the pill
says so) whenever the connection drops, rather than claiming to be live. */
.live-pill {
display: inline-flex; align-items: center; gap: 7px;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--primary-dark); background: var(--primary-tint);
border-radius: 99px; padding: 5px 11px 5px 9px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.live-pill.is-offline { color: var(--ink-soft); background: var(--surface-2); }
.live-pill.is-offline .live-dot { background: var(--ink-faint); }
@media (prefers-reduced-motion: no-preference) {
.live-pill:not(.is-offline) .live-dot { animation: pulse 2s ease-in-out infinite; }
/* A card that another guest has just taken says so for a moment. */
.gift.just-changed { animation: just-changed 1.6s ease-out; }
}
@keyframes just-changed {
0% { box-shadow: 0 0 0 3px var(--gold); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Card grid — CSS Grid so every card in a row is the same height. */
/* Two across even on a phone. Thirty-five gifts in a single column is a very
long scroll, and the photo makes each card recognisable at half width. */
.gift-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Below ~360px two cards cannot hold the action row on one line, so the
oldest small phones get a single column and the row keeps its full size. */
@media (max-width: 359px) { .gift-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) { .gift-grid { gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gift {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.gift:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.gift-media {
position: relative;
aspect-ratio: 7 / 5; /* no height jump while the photo loads */
background: var(--tile);
display: grid;
place-items: center;
border-bottom: 1px solid var(--line);
overflow: hidden;
}
/* The drawn icon sits underneath. If a photo exists it covers it; if the file
is missing the ![]()
removes itself and the icon is what you see. */
.gift-icon { width: 52px; height: 52px; color: var(--primary); opacity: 0.6; }
.gift-photo {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--ease);
}
.gift:hover .gift-photo { transform: scale(1.04); }
.gift-cat {
position: absolute; top: 10px; left: 10px;
background: rgba(250, 247, 242, 0.94);
color: var(--ink-soft);
border-radius: 99px;
padding: 4px 10px;
font-size: 0.64rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
}
.badge-yours {
position: absolute; top: 10px; right: 10px;
background: var(--gold); color: var(--ink);
border-radius: 99px; padding: 4px 10px;
font-size: 0.64rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
}
.gift-body { padding: 14px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
@media (min-width: 700px) { .gift-body { padding: var(--s3); gap: 10px; } }
.gift-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s2); flex-wrap: wrap;
}
.gift-body h3 { font-size: 1.02rem; flex: 1 1 auto; line-height: 1.2; }
@media (min-width: 700px) { .gift-body h3 { font-size: 1.15rem; } }
.status {
flex: none;
order: -1;
font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 10px; border-radius: 99px; white-space: nowrap;
}
.status-free { background: var(--primary-tint); color: var(--primary-dark); }
.status-gone { background: var(--surface-2); color: var(--ink-faint); }
.btn-taken {
background: var(--surface-2); color: var(--ink-faint);
cursor: default; border-color: var(--line);
}
.btn-taken:hover { transform: none; box-shadow: none; }
.gift-note { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; }
.gift-price { font-weight: 700; color: var(--primary); font-size: 1.05rem; }
/* The action and the shop link share one line at every width, phones included.
Two cards across leaves roughly 122px of content on a 360px screen, so the
labels shorten rather than wrap: "Reserve This Gift" becomes "Reserve" and
the link collapses to its arrow, keeping a full 44px tap target. */
.gift-actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 10px;
}
.gift-actions .btn {
flex: 1 1 auto;
min-width: 0;
padding: 0.6rem 0.7rem;
min-height: 44px;
font-size: 0.86rem;
white-space: nowrap;
}
.label-short { display: none; }
/* "Reserve This Gift" plus "Where to buy" on one line needs about 280px of
card content. A three-up card only gets that past roughly 1100px, so below
that the button uses its short label rather than wrapping. */
@media (max-width: 1099px) {
.btn .label-full { display: none; }
.btn .label-short { display: inline; }
}
/* Below 600px the link drops to its arrow alone and keeps a square target. */
@media (max-width: 599px) {
.buy-link .label-full { display: none; }
}
@media (max-width: 480px) {
.gift-actions { gap: 6px; }
.gift-actions .btn { font-size: 0.8rem; padding: 0.55rem 0.5rem; }
}
@media (min-width: 700px) {
.gift-actions { gap: 10px; }
.gift-actions .btn { padding: 0.65rem 1.1rem; font-size: 0.92rem; }
}
.buy-link {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 0.82rem;
font-weight: 700;
color: var(--ink-soft);
text-decoration: none;
white-space: nowrap;
/* A square tap target once the words are gone. */
min-width: 44px;
min-height: 44px;
}
.buy-link:hover { color: var(--primary); }
.buy-link svg { width: 13px; height: 13px; flex: none; }
@media (min-width: 600px) {
.buy-link { min-width: 0; padding-inline: 2px; }
}
.gift.is-full { border-color: var(--line); background: var(--surface-2); }
.gift.is-full .gift-media { opacity: 0.55; }
.gift.is-full h3 { color: var(--ink-soft); }
.badge-done {
display: inline-flex; align-items: center; gap: 7px;
background: var(--primary-tint); color: var(--primary);
border-radius: var(--radius-sm); padding: 11px 16px;
font-size: 0.88rem; font-weight: 700; width: 100%; justify-content: center;
}
.badge-done svg { width: 15px; height: 15px; }
.badge-yours {
display: inline-flex; align-items: center; gap: 6px;
background: var(--gold); color: var(--ink);
border-radius: 99px; padding: 4px 11px;
font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
}
.empty-state {
text-align: center; padding: var(--s7) var(--s3);
border: 1px dashed var(--line-strong); border-radius: var(--radius);
color: var(--ink-soft);
}
.empty-state h3 { margin-bottom: 8px; }
/* Skeletons while /api/list is in flight. Not a loading screen — the page is
fully rendered and readable; only the grid fills in. */
.skeleton { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.skeleton-media { height: 150px; background: var(--tile); }
.skeleton-body { padding: var(--s3); display: grid; gap: 10px; }
.skeleton-line { height: 12px; border-radius: 4px; background: var(--surface-2); }
.skeleton-line.short { width: 55%; }
@media (prefers-reduced-motion: no-preference) {
.skeleton-media, .skeleton-line { animation: pulse 1.4s ease-in-out infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* ----------------------------------------------------------------- modal */
.modal {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center;
padding: var(--s2);
background: rgba(35, 39, 36, 0.62);
opacity: 0; pointer-events: none;
transition: opacity var(--ease);
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card {
width: 100%; max-width: 480px;
max-height: calc(100vh - var(--s4));
overflow-y: auto;
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
padding: var(--s4) var(--s3);
transform: translateY(10px);
transition: transform var(--ease);
}
.modal.open .modal-card { transform: none; }
@media (min-width: 560px) { .modal-card { padding: var(--s4); } }
.modal-close {
float: right; width: 44px; height: 44px; margin: -12px -8px 0 0;
border: 0; background: transparent; cursor: pointer;
color: var(--ink-faint); font-size: 1.5rem; line-height: 1;
}
.modal-close:hover { color: var(--ink); }
.modal-card h3 { margin-bottom: 4px; }
.modal-item { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: var(--s3); }
.field { display: grid; gap: 7px; margin-bottom: var(--s2); }
.field label { font-size: 0.88rem; font-weight: 700; }
.field .hint { font-size: 0.82rem; color: var(--ink-faint); font-weight: 400; }
.field input, .field textarea, .field select {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
font-size: 1rem;
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); }
.modal .btn { width: 100%; margin-top: var(--s1); }
.modal-foot { margin-top: var(--s2); font-size: 0.84rem; color: var(--ink-faint); text-align: center; }
.form-error {
background: var(--primary-tint);
border-left: 3px solid var(--primary);
color: var(--primary-dark);
padding: 11px 14px;
border-radius: var(--radius-sm);
font-size: 0.9rem;
margin-bottom: var(--s2);
}
/* --------------------------------------------------------------- details */
.details-grid { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.detail-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s4) var(--s3);
text-align: center;
}
.detail-icon {
width: 52px; height: 52px; border-radius: 50%; margin: 0 auto var(--s2);
background: var(--primary-tint); color: var(--primary);
display: grid; place-items: center;
}
.detail-icon svg { width: 23px; height: 23px; }
.detail-label {
font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--ink-faint); font-weight: 700;
}
.detail-value { font-family: var(--display); font-size: 1.4rem; font-weight: 700; margin-top: 6px; font-variant-numeric: lining-nums; }
.detail-extra { color: var(--ink-soft); font-size: 0.92rem; margin-top: 4px; }
/* ------------------------------------------------------------------- faq */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.faq summary {
cursor: pointer; list-style: none;
padding: 18px var(--s3);
font-weight: 700; font-size: 1.02rem;
display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+'; flex: none;
font-family: var(--display); font-size: 1.5rem; font-weight: 700;
color: var(--primary); line-height: 1; transition: transform var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .answer { padding: var(--s2) var(--s3) var(--s3); color: var(--ink-soft); }
/* ------------------------------------------------------------ cta banner */
.cta-banner {
position: relative;
isolation: isolate;
overflow: hidden;
color: #fff;
text-align: center;
}
.cta-banner .bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--deep-2); }
.cta-banner .bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner .bg::after {
content: ''; position: absolute; inset: 0;
background-image:
url("data:image/svg+xml,"),
linear-gradient(135deg, rgba(47, 58, 51, 0.92) 0%, rgba(38, 48, 42, 0.86) 100%);
background-size: 240px 240px, auto;
}
.cta-banner h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-banner p { color: rgba(255, 255, 255, 0.88); margin: var(--s2) auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s4); }
.cta-actions .btn { flex: 1 1 240px; }
@media (min-width: 560px) { .cta-actions .btn { flex: 0 0 auto; } }
/* ---------------------------------------------------------------- footer */
.footer { background: var(--deep-2); color: rgba(255, 255, 255, 0.76); padding-block: var(--s6) var(--s4); }
.footer-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); } }
.footer h4 {
color: #fff; font-family: var(--body); font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--s2);
}
.footer p { font-size: 0.94rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: rgba(255, 255, 255, 0.76); text-decoration: none; font-size: 0.94rem; }
.footer a:hover { color: var(--gold-light); }
.footer .brand-mark { background: var(--gold); color: var(--deep-2); }
.footer .brand-name, .footer .brand-text { color: #fff; }
.footer-bottom {
margin-top: var(--s5); padding-top: var(--s3);
border-top: 1px solid rgba(255, 255, 255, 0.14);
display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
justify-content: space-between; font-size: 0.85rem;
}
/* ------------------------------------------------- whatsapp float + toast */
.wa-float {
position: fixed; right: 18px; bottom: 18px; z-index: 150;
width: 58px; height: 58px; border-radius: 50%;
background: #25d366; color: #fff;
display: grid; place-items: center;
box-shadow: 0 10px 26px -8px rgba(37, 211, 102, 0.75);
transition: transform var(--ease);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; }
/* Keep clear of the safe-area on phones with a home indicator. */
@supports (padding: env(safe-area-inset-bottom)) {
.wa-float { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}
.toast {
position: fixed; left: 50%; bottom: 24px; z-index: 300;
transform: translate(-50%, 16px);
background: var(--deep); color: #fff;
padding: 14px 22px; border-radius: var(--radius-sm);
box-shadow: var(--shadow-lift);
font-size: 0.94rem; font-weight: 500;
max-width: calc(100vw - var(--s4));
opacity: 0; pointer-events: none;
transition: opacity var(--ease), transform var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--primary-dark); }
/* ----------------------------------------------------------- scroll reveal
Deliberately inverted: .reveal on its own does NOTHING. Content is visible
by default, and JS opts an element into the animation by adding .armed once
the observer is actually watching it. If the script never runs, or throws
halfway through, the page is still fully readable instead of a column of
blank space. Never hide something in CSS that only JS can bring back. */
@media (prefers-reduced-motion: no-preference) {
.reveal.armed { opacity: 0; transform: translateY(20px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.armed.in { opacity: 1; transform: none; }
}