/* ============================================================ CLO$ED — colors & type tokens Source of truth for the brand's visual foundations. Import this file, then style with the semantic helpers below. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap"); :root { /* ----- Core palette ------------------------------------ */ --closed-black: #0A0A0A; /* primary ink / hero bg */ --closed-charcoal: #1C1C1C; /* secondary dark surface */ --closed-cream: #F5F0E8; /* primary light surface — "paper" */ --closed-green: #2D5A3D; /* signature "$" green — money */ --closed-green-deep: #234730; /* pressed / hover state for green */ --closed-gold: #C9A96E; /* antique-gold accent, hairlines */ --closed-oxblood: #8B0000; /* favorites / saved indicator only */ /* ----- Hairlines + tints ------------------------------- */ --closed-line: rgba(201, 169, 110, 0.35); --closed-line-strong: rgba(201, 169, 110, 0.60); --closed-line-dark: rgba(201, 169, 110, 0.18); --closed-ink-soft: rgba(10, 10, 10, 0.55); --closed-ink-faint: rgba(10, 10, 10, 0.35); --closed-cream-soft: rgba(245, 240, 232, 0.78); --closed-cream-faint: rgba(245, 240, 232, 0.45); /* ----- Semantic surface vars --------------------------- */ --bg: var(--closed-cream); --bg-dark: var(--closed-black); --bg-card: var(--closed-cream); --fg: var(--closed-black); --fg-soft: var(--closed-ink-soft); --fg-faint: var(--closed-ink-faint); --fg-on-dark: var(--closed-cream); --accent: var(--closed-green); --accent-press: var(--closed-green-deep); --rule: var(--closed-line); --rule-strong: var(--closed-line-strong); /* ----- Type families ----------------------------------- */ --font-display: "Bebas Neue", "Oswald", "Helvetica Neue", Arial, sans-serif; --font-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; /* ----- Type scale (display = condensed caps) ----------- */ --t-mega: clamp(110px, 22vw, 360px); /* hero CLO$ED wordmark */ --t-h1: clamp(48px, 7vw, 104px); /* section heads */ --t-h2: clamp(40px, 5vw, 80px); /* secondary big type */ --t-h3: clamp(28px, 3.6vw, 56px); /* tagline / large display */ --t-h4: clamp(20px, 2.4vw, 32px); /* drop banner display */ --t-product: 22px; /* product card name */ --t-body: 15px; /* default reading text */ --t-body-lg: 16px; /* story / long copy */ --t-meta: 13px; /* mono meta lines */ --t-mono: 12px; /* mono labels */ --t-micro: 11px; /* uppercase eyebrows */ --t-nano: 10px; /* tiny tag pills */ /* ----- Letter spacing ---------------------------------- */ --ls-display: 0.02em; --ls-display-l: 0.06em; --ls-eyebrow: 0.22em; /* tight-cap mono */ --ls-mono: 0.16em; --ls-body: 0.00em; /* ----- Layout & rhythm --------------------------------- */ --max-w: 1440px; --pad: clamp(20px, 4vw, 56px); --gap-1: 6px; --gap-2: 10px; --gap-3: 14px; --gap-4: 22px; --gap-5: 32px; --gap-6: 48px; --gap-7: 72px; /* ----- Radii / borders --------------------------------- */ /* CLO$ED is hard-edged. 0 is the default. Pills only for live dots / counts. */ --r-0: 0px; --r-pill: 999px; /* ----- Shadows / focus --------------------------------- */ --shadow-glow-green: 0 0 12px rgba(45, 90, 61, 0.9), 0 0 24px rgba(45, 90, 61, 0.55); --shadow-focus: 0 0 0 1px var(--closed-green); /* ----- Motion ------------------------------------------ */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-scan: cubic-bezier(0.55, 0.05, 0.55, 0.95); --dur-fast: 0.20s; --dur-base: 0.35s; --dur-slow: 0.90s; --dur-reveal: 1.00s; } /* ============================================================ Base + semantic typography helpers ============================================================ */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--fg-on-dark); } a { color: inherit; text-decoration: none; } /* Display heads — ALWAYS uppercase Bebas, tight tracking */ .t-mega, .t-h1, .t-h2, .t-h3, .t-h4 { font-family: var(--font-display); font-weight: 400; line-height: 0.92; margin: 0; letter-spacing: var(--ls-display); } .t-mega { font-size: var(--t-mega); line-height: 0.84; } .t-h1 { font-size: var(--t-h1); } .t-h2 { font-size: var(--t-h2); } .t-h3 { font-size: var(--t-h3); letter-spacing: var(--ls-display-l); } .t-h4 { font-size: var(--t-h4); letter-spacing: var(--ls-display-l); } /* Mono — eyebrows, meta, tags, buttons */ .t-mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.04em; font-size: var(--t-mono); } .t-eyebrow, .t-micro { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-soft); } .t-nano { font-family: var(--font-mono); font-size: var(--t-nano); letter-spacing: 0.20em; text-transform: uppercase; } /* Body */ .t-body { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; } .t-body-lg { font-family: var(--font-body); font-size: var(--t-body-lg); line-height: 1.65; } /* Logo lockup — use as */ .closed-logo { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.06em; line-height: 1; display: inline-flex; align-items: baseline; } .closed-logo .dollar { color: var(--accent); display: inline-block; } /* Reveal-on-scroll baseline (used by the marketing site) */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--delay, 0ms); } .reveal.in { opacity: 1; transform: translateY(0); }