/* ============================================================ ZOFFER DESIGN SYSTEM — Colors & Typography Source of truth: poster-design/brand.md + brand/website-context.md ============================================================ */ /* Font loading: linked via in each page's , not @import here — @import blocks on this file parsing before the Google Fonts request even starts. See index.html / tally/index.html. */ :root { /* ──────────────────────────────────────────────── BRAND COLORS (LOCKED — poster-design/brand.md) ──────────────────────────────────────────────── */ --zoffer-navy: #10335c; /* Primary — Zoffer Navy */ --zoffer-orange: #f66922; /* Secondary — Zoffer Orange */ --zoffer-cream: #f4efe7; /* Warm cream — ALWAYS used as page bg */ --zoffer-ink: #1a1a1a; /* Primary text on light */ --zoffer-muted: #6b6560; /* Muted/secondary text */ /* Web-product blue (website-context.md — note: slightly different from poster brand navy. Both appear in the ecosystem.) */ --zoffer-tech-blue: #005B96; /* Used on zoffer.in — links, headings */ --zoffer-deep-navy: #001F3F; /* Used on zoffer.in — body, dark bg */ /* ── Tints & shades (derived) ── */ --navy-95: #1a4678; /* navy hover */ --navy-20: rgba(16, 51, 92, 0.20); --navy-12: rgba(16, 51, 92, 0.12); --navy-08: rgba(16, 51, 92, 0.08); --navy-04: rgba(16, 51, 92, 0.04); --orange-hover: #e55a15; --orange-20: rgba(246, 105, 34, 0.20); --orange-12: rgba(246, 105, 34, 0.12); --orange-08: rgba(246, 105, 34, 0.08); /* ── Neutral scale ── */ --cream-dark: #ebe3d3; /* Cream border / subtle divider */ --gray-100: #f2eee5; --gray-200: #e5ded0; --gray-300: #d1c9b9; --gray-400: #9a9389; --gray-500: #6b6560; /* alias of --zoffer-muted */ --gray-700: #3d3a36; --gray-900: #1a1a1a; /* alias of --zoffer-ink */ /* ── Semantic ── */ --success: #1f7a4f; --success-bg: #e4f2ea; --warning: #b87109; --warning-bg: #fbefd8; --danger: #a8271a; --danger-bg: #fae3df; --info: #005B96; --info-bg: #e1edf5; /* ── Surfaces (semantic aliases) ── */ --fg-1: var(--zoffer-ink); --fg-2: var(--zoffer-muted); --fg-3: var(--gray-400); --fg-on-navy: #ffffff; --fg-on-navy-muted: rgba(255,255,255,0.65); --fg-on-navy-faint: rgba(255,255,255,0.40); --bg-page: var(--zoffer-cream); --bg-surface: #ffffff; --bg-surface-2: var(--gray-100); --bg-dark: var(--zoffer-navy); --bg-dark-2: var(--zoffer-deep-navy); --border-subtle: rgba(16, 51, 92, 0.08); --border-default: rgba(16, 51, 92, 0.15); --border-strong: rgba(16, 51, 92, 0.30); --border-accent: var(--zoffer-orange); /* ──────────────────────────────────────────────── TYPOGRAPHY ──────────────────────────────────────────────── */ --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-casual: 'Caveat', 'Bradley Hand', cursive; /* founder voice, max 1 in 5 posts */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale (design frames at 1080–1920). Scale down for web UI. */ --fs-display: 72px; /* hero / poster headlines */ --fs-h1: 56px; --fs-h2: 40px; --fs-h3: 28px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-overline: 11px; --fs-button: 14px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.6; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; --ls-overline: 0.2em; /* uppercase eyebrows */ /* ──────────────────────────────────────────────── SHAPE / SPACING ──────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 4px; /* tags, inputs */ --radius-md: 8px; /* cards, buttons */ --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --bw-hairline: 1px; --bw-default: 1px; --bw-medium: 2px; /* feature borders, accents */ --bw-thick: 3px; --bw-heavy: 6px; /* accent bars (LinkedIn cover) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; /* poster margin (LOCKED) */ --space-10: 120px; /* Poster-specific locks */ --poster-margin: 80px; --poster-logo-size: 56px; /* ──────────────────────────────────────────────── ELEVATION / SHADOW ──────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(16, 51, 92, 0.06); --shadow-md: 0 4px 12px rgba(16, 51, 92, 0.08); --shadow-lg: 0 12px 32px rgba(16, 51, 92, 0.10); --shadow-xl: 0 24px 56px rgba(16, 51, 92, 0.14); --shadow-inner: inset 0 1px 2px rgba(16, 51, 92, 0.10); --ring-focus: 0 0 0 3px rgba(246, 105, 34, 0.35); /* ──────────────────────────────────────────────── MOTION ──────────────────────────────────────────────── */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ============================================================ SEMANTIC ELEMENT DEFAULTS ============================================================ */ .zoffer-body, .zoffer h1, .zoffer h2, .zoffer h3, .zoffer h4, .zoffer p, .zoffer .eyebrow, .zoffer .lede, .zoffer .caption { font-feature-settings: 'ss01', 'cv11', 'liga'; } .zoffer-root { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .zoffer h1, .display { font-family: var(--font-headline); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--zoffer-navy); } .zoffer .display { font-size: var(--fs-display); } .zoffer h2 { font-family: var(--font-headline); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--zoffer-navy); } .zoffer h3 { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--zoffer-navy); } .zoffer h4 { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--zoffer-ink); } .zoffer p, .zoffer .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); } .zoffer .lede { font-family: var(--font-headline); font-style: italic; font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--fg-2); } .zoffer .eyebrow, .zoffer .overline { font-family: var(--font-body); font-size: var(--fs-overline); font-weight: 600; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--zoffer-orange); } .zoffer .caption { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--fg-2); } .zoffer .mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); } .zoffer .casual { font-family: var(--font-casual); font-weight: 500; } /* CTA signature — orange italic Playfair Display + arrow (LOCKED) */ .zoffer .cta-signature { font-family: var(--font-headline); font-style: italic; font-weight: 400; color: var(--zoffer-orange); } .zoffer .cta-signature::after { content: ' →'; font-style: normal; font-family: var(--font-body); font-weight: 300; } /* URL treatment — "zoffer.in" with orange dot (LOCKED) */ .zoffer .url-lockup { font-family: var(--font-body); font-size: 15px; font-weight: 500; } .zoffer .url-lockup .u-name { color: var(--zoffer-navy); } .zoffer .url-lockup .u-dot { color: var(--zoffer-orange); } .zoffer .url-lockup .u-tld { color: var(--zoffer-navy); }