/* ============================================================ The Sweet Creative — Colors & Typography Source of truth for brand tokens. ============================================================ */ /* Webfonts: loaded by the tag in every page's — the @import that used to live here doubled the request and kept a render-blocking chain alive. If you ever self-host, put woff2 files in fonts/ and add @font-face rules here. */ :root { /* ---------- Brand colors ---------- */ /* Rose — primary brand. Dusty, slightly muted plum-pink. */ --rose-900: #6E2F3A; --rose-700: #8E4856; --rose-600: #A95C6B; /* primary */ --rose-500: #BF7382; --rose-400: #D08F9C; /* Blush — accent / soft secondary */ --blush-500: #E08A95; --blush-400: #EBA0A9; /* accent */ --blush-300: #F2BFC7; --blush-200: #F8D7DC; --blush-100: #FCEBEE; /* Cream / paper */ --cream: #FBF4EF; /* default page background */ --cream-2: #F4E9DF; /* secondary surface */ --paper: #FFFFFF; /* Warm neutrals (sand / taupe) */ --sand-100: #F1E7DC; --sand-200: #E5D6C5; --sand-300: #C8B6A2; --taupe-500: #8C7B6B; --taupe-700: #5A4F44; /* Ink — primary text / black for stickers */ --ink-900: #1F1A17; /* near-black, warm */ --ink-700: #3C342E; --ink-500: #6B5F55; --ink-300: #A89A8E; /* Semantic */ --fg-1: var(--ink-900); --fg-2: var(--ink-700); --fg-3: var(--ink-500); --fg-muted: var(--ink-300); --bg-1: var(--cream); --bg-2: var(--paper); --bg-3: var(--cream-2); --line: rgba(31, 26, 23, 0.10); --line-strong: rgba(31, 26, 23, 0.18); /* Status */ --success: #6E8E5E; --warning: #D4923B; --error: #B5403F; /* ---------- Type ---------- */ --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-script: 'Dancing Script', 'Parisienne', cursive; --font-sans: 'Jost', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Sizes */ --fs-display: clamp(56px, 8vw, 96px); --fs-h1: clamp(40px, 5vw, 64px); --fs-h2: clamp(30px, 3.6vw, 46px); --fs-h3: 22px; --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px; --fs-eyebrow: 11px; /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter-spacing */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; /* eyebrows + small all-caps */ --ls-widest: 0.28em; /* logo wordmark */ /* Line height */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* ---------- Spacing ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---------- Radii ---------- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --r-card: 16px; /* the one card radius — bundle/finish/gallery/builder tiles */ /* ---------- Shadows (soft, warm) ---------- */ --shadow-1: 0 1px 2px rgba(110, 47, 58, 0.04), 0 1px 3px rgba(110, 47, 58, 0.06); --shadow-2: 0 4px 14px rgba(110, 47, 58, 0.08), 0 1px 3px rgba(110, 47, 58, 0.05); --shadow-3: 0 12px 30px rgba(110, 47, 58, 0.12), 0 4px 10px rgba(110, 47, 58, 0.06); --shadow-card: 0 6px 24px rgba(140, 123, 107, 0.08); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; /* ---------- Photo / product surfaces ---------- Flat colour fields that transparent product cutouts sit on. All derived moods of the existing palette — no new hues. */ --field-blush: #F6D9DE; /* primary cutout field */ --field-rose: #E8B7BF; /* deeper — For Her / Valentine moods */ --field-sand: #EFE3D5; /* warm neutral — For Him / Wake Up */ --field-cream: #F8F0E8; /* quietest — Baby / Spa / page heroes */ --field-ink: #2A2420; /* dark — black/gold milestone balloons */ --line-on-field: rgba(110, 47, 58, 0.12); /* Aspect ratios */ --ar-product: 4 / 5; /* bundle cards, gallery tiles */ --ar-banner: 21 / 9; /* full-width photo bands */ /* Cutout treatment — the signature device */ --cutout-shadow: drop-shadow(0 24px 32px rgba(110, 47, 58, 0.18)); --cutout-shadow-sm: drop-shadow(0 10px 16px rgba(110, 47, 58, 0.14)); } /* ============================================================ Semantic typography classes ============================================================ */ .t-display { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); } .t-h1 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); } .t-h2 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); } .t-h3 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); } .t-script { font-family: var(--font-script); font-weight: var(--fw-regular); font-size: clamp(34px, 4vw, 54px); line-height: 1; color: var(--rose-600); } .t-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--rose-600); } .t-wordmark { font-family: var(--font-sans); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--ink-900); } .t-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); } .t-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-3); } .t-mono { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--fg-2); } /* Element defaults — opt in by importing this file */ body.tsc { background: var(--bg-1); color: var(--fg-2); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }