/* Shared card styles for preview/*.html */
/* ============================================================
MINDSPACE — Colors & Type Foundations
Source: Mindspace Brandbook 2025, Figma "Graphic design 2026",
MIN002 brand summary deck.
Fonts: PP Right Serif (display)
ABC Diatype (text/UI)
============================================================ */
/* --- WEB FONTS ----------------------------------------------- */
:root {
/* ===========================================================
COLOURS — three brand families, each with a tonal scale.
Names mirror the Mindspace brandbook ("MintMinded",
"CreamMinded", "PinkMinded"). Tones use a 50/100/200/300/400
/600/800/900 scale.
=========================================================== */
/* MintMinded — the primary brand green family */
--mint-50: #E0F5E8; /* MintMinded 50 • PMS 351 */
--mint-100: #CBF6D2; /* MintMinded 100 • PMS 352 */
--mint-200: #7FDE8D; /* MintMinded 200 • PMS 2415 — Mindspace Green */
--mint-300: #6BCA79; /* MintMinded 300 • PMS 2416 */
--mint-800: #17382A; /* MintMinded 800 • PMS 7729 — Mindspace Dark Green */
--mint-900: #032416; /* MintMinded 900 • PMS 2466 */
/* CreamMinded — the warm neutral / paper family */
--cream-50: #FDFCF7; /* CreamMinded 50 — “no print color” / paper white */
--cream-100: #F9F2DF; /* CreamMinded 100 • PMS 7499 */
--cream-150: #FBEEC8; /* CreamMinded 150 • PMS 7501 */
--cream-200: #ECD8A1; /* CreamMinded 200 • PMS 7501 */
--cream-300: #D8C48D; /* CreamMinded 300 • PMS 7502 */
--cream-600: #B9AA80; /* CreamMinded 600 • PMS 7503 */
/* PinkMinded — the playful purple/lilac family */
--pink-50: #F8F0FF; /* PinkMinded 50 • PMS 7443 */
--pink-100: #F0DEFD; /* PinkMinded 100 • PMS 2635 */
--pink-200: #D2B1F0; /* PinkMinded 200 • PMS 2095 */
--pink-300: #BE9DDC; /* PinkMinded 300 • PMS 2096 */
--pink-600: #A48ABC; /* PinkMinded 600 • PMS 2096 */
/* True black + white as utility (rarely used on top of the brand) */
--black: #000000;
--white: #FFFFFF;
/* -------- SEMANTIC TOKENS (foreground/background) ---------- */
/* Default surface vibe is dark green with cream type — the
hero treatment used on covers, slides, brochures. */
--bg: var(--mint-800); /* page background */
--bg-paper: var(--cream-50); /* paper / light surfaces */
--bg-accent: var(--cream-150); /* highlight blocks */
--bg-soft: var(--mint-50); /* tinted soft background */
--bg-pop: var(--pink-100); /* feminine accent block */
--fg: var(--cream-150); /* primary type on dark */
--fg-on-paper: var(--mint-800); /* primary type on cream */
--fg-muted: var(--cream-600); /* secondary text on dark */
--fg-muted-paper: #737373; /* secondary text on cream*/
--fg-inverse: var(--cream-50);
--rule: rgba(251,238,200,0.35); /* hairline on dark */
--rule-paper: #D8D8D8; /* hairline on cream */
--brand: var(--mint-200); /* the bright vivid green */
--brand-deep: var(--mint-800);
/* -------- SHADOW + RADII ----------------------------------- */
--radius-xs: 4px; /* swatch chips, subtle UI corners */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-pill: 999px;
--shadow-1: 0 1px 2px rgba(3,36,22,0.05), 0 4px 14px rgba(3,36,22,0.06);
--shadow-2: 0 4px 24px rgba(3,36,22,0.10), 0 1px 4px rgba(3,36,22,0.05);
--shadow-press: inset 0 1px 0 rgba(0,0,0,0.05);
/* -------- SPACING SCALE (4 / 8 grid) ----------------------- */
--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;
/* ===========================================================
TYPOGRAPHY
Display: PP Right Serif (warm, slightly idiosyncratic
serif, a touch of soul) — used for headlines,
location names, the wordmark, big numbers.
Text: ABC Diatype (clean, modern grotesque) — used
for body copy, UI, captions, supporting copy.
=========================================================== */
--ff-display: "PP Right Serif", "Cormorant Garamond", "DM Serif Display", Georgia, serif;
--ff-text: "ABC Diatype", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--tracking-display: -0.030em; /* tightened serif headlines */
--tracking-text: -0.005em;
--tracking-eyebrow: 0.04em; /* wide for tiny labels */
--leading-display: 0.9;
--leading-text: 1.45;
/* ----- BASE TYPE SIZES (desktop / mobile) -----------------
Mirrors the “Variables / Typeface / Size” table in Figma. */
--t-xs: 12px; /* mobile 10 */
--t-s: 14px; /* mobile 12 */
--t-base: 18px; /* mobile 14 */
--t-m: 25px; /* mobile 16 */
--t-l: 30px; /* mobile 20 */
--t-xl: 35px; /* mobile 25 */
--t-xxl: 50px; /* mobile 30 */
--t-xxxl: 75px; /* mobile 40 */
}
/* ============================================================
Semantic type classes — drop-in for slide/page authoring.
============================================================ */
html, body {
font-family: var(--ff-text);
font-weight: 300;
color: var(--fg-on-paper);
background: var(--bg-paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.h-display, h1, .display-xxxl {
font-family: var(--ff-display);
font-weight: 400;
font-size: clamp(56px, 7vw, var(--t-xxxl));
line-height: var(--leading-display);
letter-spacing: var(--tracking-display);
margin: 0;
}
.display-xxl, h2 {
font-family: var(--ff-display);
font-weight: 400;
font-size: clamp(40px, 4.6vw, var(--t-xxl));
line-height: 1.0;
letter-spacing: var(--tracking-display);
margin: 0;
}
.display-xl, h3 {
font-family: var(--ff-display);
font-weight: 400;
font-size: clamp(28px, 2.8vw, var(--t-xl));
line-height: 1.05;
letter-spacing: var(--tracking-display);
margin: 0;
}
.display-l, h4 {
font-family: var(--ff-display);
font-weight: 400;
font-size: var(--t-l);
line-height: 1.1;
letter-spacing: var(--tracking-display);
margin: 0;
}
.display-italic {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
}
/* Body */
.text-l { font-family: var(--ff-text); font-size: var(--t-l); line-height: 1.25; font-weight: 300; }
.text-m { font-family: var(--ff-text); font-size: var(--t-m); line-height: 1.3; font-weight: 300; }
.text-base, p {
font-family: var(--ff-text); font-size: var(--t-base); line-height: var(--leading-text); font-weight: 300;
margin: 0;
}
.text-s { font-family: var(--ff-text); font-size: var(--t-s); line-height: 1.4; font-weight: 400; }
.text-xs { font-family: var(--ff-text); font-size: var(--t-xs); line-height: 1.4; font-weight: 400; }
/* Eyebrow / Nav / CTA */
.eyebrow {
font-family: var(--ff-text);
font-size: var(--t-xs);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.nav, .button-text {
font-family: var(--ff-text);
font-size: var(--t-s);
font-weight: 400;
letter-spacing: 0;
}
/* Wordmark — the “Mindspace” signature. Use this anywhere a
compact typeset logo is needed. The brand recommends never
splitting the wordmark across lines. */
.wordmark {
font-family: var(--ff-display);
font-weight: 400;
font-style: normal;
letter-spacing: -0.025em;
white-space: nowrap;
display: inline-block;
}
html,body { margin:0; padding:0; background:var(--cream-50); }
.card {
width: 700px;
box-sizing: border-box;
padding: 24px;
background: var(--cream-50);
color: var(--mint-800);
font-family: var(--ff-text);
}
.row { display:flex; gap:12px; align-items:flex-end; }
.swatch {
flex: 1 1 0;
height: 100px;
border-radius: var(--radius-xs);
display:flex; align-items:flex-end; justify-content:flex-start;
padding: 10px;
font-family: var(--ff-display);
font-size: 22px;
letter-spacing: -0.02em;
position: relative;
overflow: hidden;
}
.swatch .num { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:28px; }
.swatch.border { border:1px solid #E8E4D6; }
.meta { font-size: 11px; line-height:1.4; color: var(--fg-muted-paper); margin-top: 8px; }
.meta b { color: var(--mint-800); font-weight: 500; }
.label { font-size: 12px; color: var(--fg-muted-paper); margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }