/* ============================================================ UNCAP DESIGN SYSTEM — colors & type tokens Sourced from uncap.com (Webflow site, Shopify Platinum partner brand) ============================================================ */ /* ---------- FONTS ---------- Three webfonts, all loaded from Google Fonts. No self-hosted files. Inter primary — headings, body, nav, buttons (UI everywhere) variable: wght 300..900 + ital, opsz 14..32 Fraunces serif accent — hero lead, quotes, italic flourishes variable: wght 400..700 + ital, opsz 9..144 JetBrains Mono mono labels — small eyebrows / metadata / code bits static: wght 400, 500, 600 (upright only) All three sans role tokens (--font-sans / --font-display / --font-hero) resolve to Inter. font-optical-sizing: auto lets Inter and Fraunces use their opsz axis automatically based on rendered size. */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* Enable opsz axis on the Google-served Inter variable font so a single family covers body, display, and hero roles. */ html { font-optical-sizing: auto; } :root { /* ---------- PALETTE ---------- */ /* Core neutrals — Uncap's site is overwhelmingly black/white/cream */ --uc-black: #0A0A0A; /* near-black, used on headings, buttons, footer */ --uc-ink: #1A1A1A; /* body text */ --uc-graphite: #2B2B2B; /* secondary surfaces */ --uc-stone-900: #4D4D4D; /* muted body */ --uc-stone-700: #707070; /* meta, captions */ --uc-stone-500: #9A9A9A; /* placeholder, dividers strong */ --uc-stone-300: #C9C7C0; /* hairlines */ --uc-stone-200: #E4E1D8; /* warm muted bg */ --uc-cream: #F2EFE7; /* signature warm off-white background */ --uc-bone: #F8F6F0; /* lighter cream */ --uc-paper: #FFFFFF; /* pure white cards */ /* Accent — Uncap is restrained; the only consistent accent is a warm signal-yellow used on small badges + a Shopify-partner green. The ⛯ icon mark itself is monochromatic. */ --uc-brand: #495af3; /* primary CTA blue */ --uc-brand-hover: #3647d8; /* darker on hover */ --uc-signal: #E8FF4E; /* electric lime — used sparingly */ --uc-signal-soft: #F4FBC6; /* tint */ --uc-shopify: #5A8A3A; /* Shopify partner badge green */ /* Semantic */ --uc-success: #2F7A47; --uc-warn: #B8741F; --uc-error: #B5322B; --uc-info: #2E5BB8; /* Foreground / background tokens */ --fg-1: var(--uc-black); /* primary text */ --fg-2: var(--uc-stone-900); /* secondary text */ --fg-3: var(--uc-stone-700); /* tertiary / meta */ --fg-on-dark: var(--uc-paper); --bg-1: var(--uc-cream); /* canvas */ --bg-2: var(--uc-paper); /* cards on canvas */ --bg-3: var(--uc-stone-200); /* subtle inset */ --bg-dark: var(--uc-black); /* alternating dark sections */ --line-1: var(--uc-stone-300); --line-2: var(--uc-black); /* ---------- TYPE FAMILIES ---------- All three sans roles point at the same Google Fonts variable "Inter". font-optical-sizing: auto handles body/display/hero metrics. */ --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; --font-display: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; --font-hero: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; --font-serif: "Fraunces", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- TYPE SCALE (1920 base) ---------- Uncap leans on a tight, condensed feel: tracking is mildly negative, line-height tight on display, generous on body. */ --t-display: clamp(48px, 6vw, 96px); /* hero */ --t-h1: clamp(40px, 4.5vw, 72px); --t-h2: clamp(32px, 3.4vw, 56px); --t-h3: clamp(24px, 2.2vw, 36px); --t-h4: clamp(20px, 1.6vw, 24px); --t-eyebrow: 13px; --t-body-lg: 20px; --t-body: 17px; --t-body-sm: 15px; --t-caption: 13px; --t-micro: 11px; --tr-tight: -0.03em; --tr-snug: -0.015em; --tr-normal: 0em; --tr-eyebrow: 0.12em; /* uppercase eyebrows */ --lh-tight: 1.02; --lh-snug: 1.12; --lh-normal: 1.45; --lh-loose: 1.6; /* ---------- 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; /* ---------- RADII ---------- */ /* Two values only. 5px on every button, card, input, box. 0 for full-bleed / dividers. */ --radius: 5px; --radius-0: 0px; /* Legacy aliases — all map to --radius so older components stay 5px */ --r-0: 0px; --r-sm: 5px; --r-md: 5px; --r-lg: 5px; --r-xl: 5px; --r-pill: 5px; /* ---------- ELEVATION ---------- */ /* The brand is flat — shadows are subtle, used on floating chips. */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.03); --shadow-2: 0 4px 16px rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04); --shadow-3: 0 12px 32px rgba(10,10,10,0.10), 0 2px 4px rgba(10,10,10,0.05); --shadow-inset: inset 0 0 0 1px var(--line-1); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.6,.05,.35,1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 400ms; } /* ---------- SEMANTIC TYPE STYLES ---------- */ .uc-eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-3); } .uc-display { font-family: var(--font-display); font-size: var(--t-display); font-weight: 700; letter-spacing: var(--tr-tight); line-height: var(--lh-tight); color: var(--fg-1); } h1, .uc-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 700; letter-spacing: var(--tr-tight); line-height: var(--lh-tight); color: var(--fg-1); } h2, .uc-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 700; letter-spacing: var(--tr-snug); line-height: var(--lh-snug); color: var(--fg-1); } h3, .uc-h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--tr-snug); line-height: var(--lh-snug); color: var(--fg-1); } h4, .uc-h4 { font-family: var(--font-sans); font-size: var(--t-h4); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-1); } .uc-serif { font-family: var(--font-serif); font-style: normal; /* Fraunces upright by default; add .uc-serif-italic for the italic accent */ font-weight: 400; } .uc-serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; } p, .uc-p { font-family: var(--font-sans); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-loose); color: var(--fg-2); text-wrap: pretty; } .uc-lead { font-family: var(--font-sans); font-size: var(--t-body-lg); font-weight: 400; line-height: var(--lh-normal); color: var(--fg-2); } .uc-meta { font-family: var(--font-sans); font-size: var(--t-caption); color: var(--fg-3); } code, .uc-code, pre, kbd, samp, tt { font-family: var(--font-mono); font-style: normal; /* JetBrains Mono should never be italic by default */ font-size: 0.92em; background: var(--bg-3); padding: 1px 6px; border-radius: var(--r-sm); } /* Belt-and-braces: anything explicitly opting into the mono family stays upright. */ [style*="--font-mono"], .uc-mono, [class*="mono"] { font-style: normal; }