/* ============================================================ mewæ Design System — Colors, Type, Spacing Peach-orange accent · Deep-navy ink · Sky→Blush gradient base Instrument Serif (display) × Inter (UI/data) ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ---------- Surfaces ---------- */ --paper: #FFFFFF; /* card / surface */ --paper-warm: #FFF4F1; /* soft peach tint — metric bgs, hover */ --paper-cool: #E4EEFF; /* sky-blue cool side of the page gradient */ /* The signature page background — sky → blush, subtle, never dramatic */ --bg-gradient: linear-gradient(135deg, #E4EEFF 0%, #EFF1FA 45%, #FFF4F1 100%); --bg-gradient-soft: linear-gradient(180deg, #E4EEFF 0%, #FFFFFF 60%, #FFF4F1 100%); --ink: #0C1A35; /* deep navy — primary text & UI bg */ --ink-soft: #16243F; /* secondary surface on dark */ --ink-line: #E2E7F0; /* hairline border on paper */ --ink-line-2: #CDD6E5; /* slightly stronger hairline */ /* ---------- Foreground (text) ---------- */ --fg-1: #0C1A35; /* primary */ --fg-2: #2E3F5E; /* secondary, body lede */ --fg-3: #6B7FA3; /* muted text — captions, eyebrows */ --fg-4: #A0AEC4; /* placeholder, disabled */ --fg-on-dark: #FFFFFF; --fg-on-accent: #FFFFFF; /* ---------- Brand accent — peach-orange (the dot, all CTAs) ---------- */ --peach-50: #FFF4F1; --peach-100: #FFE2D8; --peach-300: #FFB59C; --peach-500: #FF7550; /* primary accent */ --peach-600: #E85F3B; /* hover */ --peach-700: #C44A2A; /* press */ --accent: var(--peach-500); --accent-hover: var(--peach-600); --accent-press: var(--peach-700); --accent-tint-04: color-mix(in oklab, var(--accent) 4%, var(--paper)); --accent-tint-08: color-mix(in oklab, var(--accent) 8%, var(--paper)); --accent-glow: color-mix(in oklab, var(--accent) 22%, transparent); --accent-glow-strong: color-mix(in oklab, var(--accent) 36%, transparent); /* ---------- Semantic ---------- */ --success: #4CAF7A; /* paid / delivered only */ --success-tint: #E5F4EC; --warning: #C98717; --warning-tint: #FBF2DF; --danger: #D04A3A; --danger-tint: #FBE4E0; /* ---------- Type ---------- */ --font-display: "Instrument Serif", "Times New Roman", serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --tracking-display: -0.02em; --tracking-tight: -0.015em; --tracking-normal: -0.005em; --tracking-wide: 0.08em; --tracking-wider: 0.14em; --leading-display: 0.95; --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.55; --leading-loose: 1.7; /* Type scale — fluid where it matters */ --t-display: clamp(72px, 9vw, 144px); --t-h1: clamp(56px, 6vw, 88px); --t-h2: clamp(40px, 4.5vw, 64px); --t-h3: 32px; --t-h4: 24px; --t-h5: 20px; --t-lede: 20px; --t-body: 17px; --t-body-sm: 15px; --t-caption: 13px; --t-eyebrow: 12px; --t-mono: 13px; /* ---------- Spacing — generous & deliberate ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px; /* canonical between-section gap */ --s-48: 192px; /* ---------- Radii ---------- */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-5: 28px; /* default card */ --r-pill: 999px; /* default button */ /* ---------- Borders — 0.5 px hairlines ---------- */ --hairline: 0.5px solid color-mix(in oklab, var(--ink) 10%, transparent); --hairline-strong: 0.5px solid color-mix(in oklab, var(--ink) 22%, transparent); --hairline-soft: 0.5px solid color-mix(in oklab, var(--ink) 5%, transparent); --hairline-on-dark: 0.5px solid color-mix(in oklab, #fff 14%, transparent); /* ---------- Shadows ---------- */ --shadow-sm: 0 1px 2px rgba(12, 26, 53, 0.05), 0 1px 1px rgba(12, 26, 53, 0.04); --shadow-md: 0 6px 16px -6px rgba(12, 26, 53, 0.10), 0 2px 4px rgba(12, 26, 53, 0.05); --shadow-lg: 0 24px 48px -16px rgba(12, 26, 53, 0.16), 0 4px 12px rgba(12, 26, 53, 0.06); --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(12,26,53,0.05), 0 8px 24px -12px rgba(12,26,53,0.10); /* Peach "warm glow" — for primary CTAs and floating device shots */ --shadow-glow: 0 0 0 0.5px rgba(255,117,80,0.45) inset, 0 8px 24px -4px var(--accent-glow), 0 2px 6px -2px var(--accent-glow); --shadow-glow-hover: 0 0 0 0.5px rgba(255,117,80,0.55) inset, 0 14px 36px -6px var(--accent-glow-strong), 0 3px 10px -2px var(--accent-glow-strong); /* "Raised tactile" — primary button: highlight inside, soft shadow outside */ --shadow-raised: 0 0 0 0.5px rgba(255,255,255,0.20) inset, 0 1px 0 rgba(255,255,255,0.22) inset, 0 1px 1px rgba(12,26,53,0.06), 0 6px 14px -6px rgba(12,26,53,0.20); /* iPhone hero shot — soft floating shadow on the gradient */ --shadow-device: 0 40px 80px -20px rgba(12, 26, 53, 0.22), 0 16px 32px -12px rgba(255, 117, 80, 0.18); /* ---------- Glass ---------- */ --glass-bg: color-mix(in oklab, #FFFFFF 65%, transparent); --glass-bg-dark: color-mix(in oklab, var(--ink) 60%, transparent); --glass-blur: saturate(140%) blur(18px); --glass-border: 0.5px solid color-mix(in oklab, var(--ink) 10%, transparent); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms; /* ---------- Layout ---------- */ --container: 1280px; --container-tight: 1080px; --gutter: clamp(20px, 4vw, 48px); --section-gap: var(--s-40); } /* ============================================================ Page background — apply on or for the whole site ============================================================ */ html, body { background: var(--bg-gradient) fixed; } html { font-family: var(--font-ui); color: var(--fg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } body { font-size: var(--t-body); line-height: var(--leading-body); overflow-x: hidden; } /* ============================================================ Type primitives ============================================================ */ .display, h1.display { font-family: var(--font-display); font-weight: 400; font-size: var(--t-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--fg-1); text-wrap: balance; } h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--fg-1); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h3); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h4, .h4 { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-h4); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h5, .h5 { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-h5); line-height: var(--leading-snug); color: var(--fg-1); } .lede { font-family: var(--font-ui); font-weight: 400; font-size: var(--t-lede); line-height: var(--leading-snug); color: var(--fg-2); letter-spacing: var(--tracking-normal); text-wrap: pretty; } p, .body { font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--leading-body); color: var(--fg-2); text-wrap: pretty; } .body-sm { font-size: var(--t-body-sm); line-height: var(--leading-body); color: var(--fg-2); } .caption { font-family: var(--font-ui); font-size: var(--t-caption); line-height: var(--leading-snug); color: var(--fg-3); } .eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); display: inline-flex; align-items: center; gap: var(--s-2); } .mono, code, kbd { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--fg-1); } .italic-display { font-family: var(--font-display); font-style: italic; } .ae-mark { font-family: var(--font-display); font-style: italic; color: var(--accent); } .ae { font-family: var(--font-display); font-style: italic; color: var(--accent); font-weight: 400; } ::selection { background: var(--accent); color: var(--fg-on-accent); } /* ============================================================ Mobile — ensure text wraps and no horizontal scroll ============================================================ */ @media (max-width: 768px) { /* Force heading text to wrap — overrides text-wrap:balance class/inline */ h1, h2, h3, h4, .h1, .h2, .h3, .hero-h1, .section-h2, .section-h3 { text-wrap: pretty !important; overflow-wrap: break-word !important; word-break: break-word !important; } p, .lede, .body, .body-sm, .caption, .section-body, .eyebrow-label { overflow-wrap: break-word; word-break: break-word; } /* Close navy gap at top of footer across all pages */ footer { padding-top: var(--s-8) !important; } }