/* ============================================================ UNCAP DESIGN SYSTEM: colors & type tokens Sourced from uncap.com (Webflow site, Shopify Platinum partner brand) ============================================================ */ /* ---------- FONTS ---------- Brand sans is INTER, supplied as Latin-subsetted WOFF2 files in /fonts/. - Inter_18pt-* → "Inter" (body / UI text) - Inter_24pt-* → "Inter Display" (large headlines, lighter spacing) - Inter_28pt-* → "Inter Hero" (display-only, hero-scale headlines) Serif italic accent uses Fraunces; mono is JetBrains Mono. Both are pulled from Google Fonts via a in index.html (not @import) so they kick off in parallel with the local stylesheet rather than being discovered after CSS parse. Only weights actually used on the page are declared. Browsers fault in each face on first use, so unused weights cost nothing — but they still ship as files in the repo, so we keep this list tight. */ /* Inter 18pt: body / UI */ @font-face { font-family:"Inter"; font-weight:400; font-style:normal; src:url("./fonts/Inter_18pt-Regular.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter"; font-weight:400; font-style:italic; src:url("./fonts/Inter_18pt-Italic.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter"; font-weight:500; font-style:normal; src:url("./fonts/Inter_18pt-Medium.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter"; font-weight:500; font-style:italic; src:url("./fonts/Inter_18pt-MediumItalic.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter"; font-weight:600; font-style:normal; src:url("./fonts/Inter_18pt-SemiBold.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter"; font-weight:700; font-style:normal; src:url("./fonts/Inter_18pt-Bold.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter"; font-weight:800; font-style:normal; src:url("./fonts/Inter_18pt-ExtraBold.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter"; font-weight:900; font-style:normal; src:url("./fonts/Inter_18pt-Black.woff2") format("woff2"); font-display:swap } /* Inter 24pt: H1/H2 headlines */ @font-face { font-family:"Inter Display"; font-weight:400; font-style:normal; src:url("./fonts/Inter_24pt-Regular.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Display"; font-weight:400; font-style:italic; src:url("./fonts/Inter_24pt-Italic.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Display"; font-weight:500; font-style:normal; src:url("./fonts/Inter_24pt-Medium.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Display"; font-weight:500; font-style:italic; src:url("./fonts/Inter_24pt-MediumItalic.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Display"; font-weight:600; font-style:normal; src:url("./fonts/Inter_24pt-SemiBold.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Display"; font-weight:700; font-style:normal; src:url("./fonts/Inter_24pt-Bold.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Display"; font-weight:800; font-style:normal; src:url("./fonts/Inter_24pt-ExtraBold.woff2") format("woff2"); font-display:swap } /* Inter 28pt: hero-scale display */ @font-face { font-family:"Inter Hero"; font-weight:700; font-style:normal; src:url("./fonts/Inter_28pt-Bold.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Hero"; font-weight:800; font-style:normal; src:url("./fonts/Inter_28pt-ExtraBold.woff2") format("woff2"); font-display:swap } @font-face { font-family:"Inter Hero"; font-weight:900; font-style:normal; src:url("./fonts/Inter_28pt-Black.woff2") format("woff2"); font-display:swap } :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: #E8FF52; /* 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 ---------- */ --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; --font-display: "Inter Display", "Inter", -apple-system, sans-serif; /* H1/H2: 24pt optical size */ --font-hero: "Inter Hero", "Inter Display", "Inter", -apple-system, sans-serif; /* hero-scale: 28pt optical size */ --font-serif: "Fraunces", "Boska", Georgia, serif; /* substitute for Boska */ --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: 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 { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-3); padding: 1px 6px; border-radius: var(--r-sm); } /* Money-back badge in Closing.jsx. The wrapper holds the resting tilt and one-time pop animation. Only the inner SVG starburst (.uc-stamp-rotor) spins continuously — the text overlay sits on top and stays still. */ @keyframes uc-stamp-pop { 0% { transform: rotate(var(--stamp-rot, 0deg)) scale(0.5); opacity: 0; } 55% { transform: rotate(var(--stamp-rot, 0deg)) scale(1.14); opacity: 1; } 78% { transform: rotate(var(--stamp-rot, 0deg)) scale(0.94); } 100% { transform: rotate(var(--stamp-rot, 0deg)) scale(1); opacity: 1; } } @keyframes uc-stamp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .uc-stamp { animation: uc-stamp-pop 720ms cubic-bezier(.34,1.56,.64,1) both; transform-origin: 50% 50%; position: relative; } .uc-stamp-rotor { animation: uc-stamp-spin 28s linear infinite; transform-origin: 50% 50%; } @media (prefers-reduced-motion: reduce) { .uc-stamp { animation: none; transform: rotate(var(--stamp-rot, 0deg)); } .uc-stamp-rotor { animation: none; } } /* Slow attention pulse — used on the NEW badge in the hero chip. The yellow block scales and emits a soft signal-coloured glow on each beat so the eye keeps picking it up without the badge ever fully drawing focus. */ @keyframes uc-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 255, 82, 0.45); } 50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(232, 255, 82, 0); } } .uc-pulse { animation: uc-pulse 2.6s ease-in-out infinite; transform-origin: 50% 50%; } @media (prefers-reduced-motion: reduce) { .uc-pulse { animation: none; } } /* Blueprint artifact (hero right column). Hovering the wrapper makes the top card slide gently to the left while the two stacked sheets underneath fan out to the right, like opening a deck of papers. */ .uc-artifact-front, .uc-artifact-paper--mid, .uc-artifact-paper--back { transition: transform 480ms var(--ease-out), opacity 480ms var(--ease-out); will-change: transform; } .uc-artifact:hover .uc-artifact-front { transform: translate(-12px, -2px); } .uc-artifact:hover .uc-artifact-paper--mid { transform: translateX(10px); opacity: 0.82; } .uc-artifact:hover .uc-artifact-paper--back { transform: translateX(20px); opacity: 0.55; } @media (prefers-reduced-motion: reduce) { .uc-artifact-front, .uc-artifact-paper--mid, .uc-artifact-paper--back { transition: none; } .uc-artifact:hover .uc-artifact-front, .uc-artifact:hover .uc-artifact-paper--mid, .uc-artifact:hover .uc-artifact-paper--back { transform: none; opacity: inherit; } }