/* MEET2 — Design Tokens
Warm, mature, matchmaking brand. Cream + dusty pink + champagne gold.
All theme-able via CSS custom properties so Tweaks can hot-swap them. */
:root {
/* ── Palette: Soft (default) ───────────────────── */
--bg: #faf7f2; /* warm cream */
--bg-elev: #ffffff; /* card / surface */
--bg-tint: #f3ece2; /* subtle tint */
--bg-pink: #f5e6e2; /* dusty rose wash */
--bg-deep: #2a2620; /* warm near-black for dark sections */
--gold: #b8945a; /* champagne gold (from logo) */
--gold-soft: #d4b685;
--gold-deep: #8e6d3e;
--pink: #d4a8a4; /* dusty pink */
--pink-deep: #b88683;
--ink: #2a2620; /* primary text */
--ink-2: #5a5048; /* secondary text */
--ink-3: #8a8076; /* tertiary, captions */
--line: rgba(42, 38, 32, 0.10);
--line-strong: rgba(42, 38, 32, 0.18);
/* ── Type ──────────────────────────────────────── */
--font-serif-cn: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", serif;
--font-sans-cn: "Noto Sans TC", "PingFang TC", "Helvetica Neue", sans-serif;
--font-serif-en: "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
--font-sans-en: "Inter", "Helvetica Neue", system-ui, sans-serif;
--font-display: var(--font-serif-en), var(--font-serif-cn);
--font-heading: var(--font-serif-cn), var(--font-serif-en);
--font-body: var(--font-sans-cn), var(--font-sans-en);
/* ── Spacing ───────────────────────────────────── */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 18px;
--radius-pill: 999px;
/* ── Container ────────────────────────────────── */
--content-w: 1200px;
--gutter: 64px;
}
/* === Helpers used by all variants ============================ */
.m-eyebrow {
font-family: var(--font-sans-en);
font-size: 12px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
}
.m-divider-orn {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--gold);
}
.m-divider-orn::before,
.m-divider-orn::after {
content: "";
display: block;
width: 36px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
.m-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
padding: 0 28px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
border: 1px solid transparent;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
text-decoration: none;
white-space: nowrap;
outline: 0 solid transparent;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
}
.m-btn:focus { outline: 0 solid transparent; }
.m-btn:focus-visible { outline: 0 solid transparent; box-shadow: 0 0 0 3px rgba(184,148,90,.25), 0 4px 14px -6px rgba(184,148,90,.45); }
.m-btn-primary {
background: var(--gold);
color: #fff;
box-shadow: 0 4px 14px -6px rgba(184,148,90,.45);
}
.m-btn-primary:hover {
background: var(--gold-deep);
transform: translateY(-1px);
box-shadow: 0 8px 20px -6px rgba(184,148,90,.55);
}
.m-btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
.m-btn-ghost:hover { background: rgba(42,38,32,.04); }
.m-btn-dark {
background: var(--ink);
color: var(--bg);
}
/* Photo placeholders — warm gradient + label so the brand team
knows what to drop in. */
.m-photo {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
radial-gradient(120% 100% at 100% 100%, rgba(212,168,164,.5), transparent 60%),
linear-gradient(135deg, #e9d8c7 0%, #d4b8a8 50%, #c9a89a 100%);
isolation: isolate;
}
.m-photo::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.04) 6px 7px);
mix-blend-mode: overlay;
pointer-events: none;
}
.m-photo[data-tone="dusk"] {
background:
radial-gradient(120% 80% at 20% 10%, rgba(255,220,200,.4), transparent 60%),
linear-gradient(160deg, #c9a89a 0%, #8e6d62 60%, #524238 100%);
}
.m-photo[data-tone="gold"] {
background:
radial-gradient(120% 80% at 30% 30%, rgba(255,240,210,.7), transparent 60%),
linear-gradient(135deg, #e6cd9f 0%, #b8945a 60%, #8e6d3e 100%);
}
.m-photo[data-tone="pink"] {
background:
radial-gradient(100% 80% at 70% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #f5e6e2 0%, #e3c0bb 60%, #c9968f 100%);
}
.m-photo[data-tone="cream"] {
background:
radial-gradient(100% 80% at 30% 30%, rgba(255,255,255,.6), transparent 60%),
linear-gradient(135deg, #f3ece2 0%, #e8d8c4 60%, #c9b89a 100%);
}
.m-photo .m-photo-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
z-index: 1;
}
.m-photo[data-has-img="true"]::after { display: none; }
.m-photo .m-photo-label {
position: absolute;
left: 12px;
bottom: 12px;
font-family: var(--font-sans-en);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
background: rgba(0,0,0,.18);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 4px 8px;
border-radius: 999px;
z-index: 2;
}
/* Subtle "M heart" silhouette used as a watermark in some sections */
.m-mark-heart {
width: 1em;
height: 1em;
display: inline-block;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}