/* ============================================================ Zeal Sourcing — Colors & Type Source: ZEAL22 v7 theme (theme1.xml, Sales Deck 10-25.pptx) Tagline: "Buying stuff, but better" ============================================================ */ /* Webfont — Avenir Next LT Pro (brand face). Only Regular (400) is licensed/uploaded so far; all weights fall back to 400 until additional weights are supplied. Manrope is kept as a metrics-compatible fallback for any missing weight. */ @font-face { font-family: "Avenir Next LT Pro"; src: url("fonts/Avenir_Next_LT_Pro_Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap'); :root { /* -------------------------------------------------------- */ /* CORE PALETTE — from ZEAL22 v7 theme */ /* -------------------------------------------------------- */ /* Teal — the anchor brand color */ --zeal-teal: #006971; /* dk2 — primary, logo on white */ --zeal-teal-mid: #3B97A1; /* lt2 — hover, secondary surfaces */ --zeal-teal-pale: #CBEAED; /* accent1 — tints, muted backgrounds */ /* Warm accents */ --zeal-lime: #D3DE32; /* accent2 — energy, callouts */ --zeal-pink: #F6BBC3; /* accent3 — soft highlight */ --zeal-red: #F64E55; /* accent4 — emphasis, alerts */ --zeal-yellow: #F2D17F; /* accent5 — warm highlight */ /* Neutrals */ --zeal-black: #000000; /* accent6 — logo, headings on light */ --zeal-ink: #1A1A1A; /* body text on light */ --zeal-gray: #5E5E5E; /* dk1 — secondary text */ --zeal-gray-mid: #8C8C8C; /* supporting UI, borders strong */ --zeal-gray-soft: #D6D6D6; /* borders, dividers */ --zeal-paper: #F5F1EA; /* warm off-white paper tone (from illustration highlights) */ --zeal-white: #FFFFFF; /* lt1 */ /* Link */ --zeal-link: #0563C1; --zeal-link-vis: #954F72; /* -------------------------------------------------------- */ /* SEMANTIC — tokens for surfaces, text, borders */ /* -------------------------------------------------------- */ --fg-1: var(--zeal-ink); --fg-2: var(--zeal-gray); --fg-3: var(--zeal-gray-mid); --fg-inv: var(--zeal-white); --fg-brand: var(--zeal-teal); --bg-1: var(--zeal-white); --bg-2: var(--zeal-paper); --bg-3: var(--zeal-teal-pale); --bg-brand: var(--zeal-teal); --bg-brand-soft: var(--zeal-teal-pale); --border-1: var(--zeal-gray-soft); --border-2: var(--zeal-gray-mid); --border-brand: var(--zeal-teal); --accent-energy: var(--zeal-lime); --accent-warm: var(--zeal-yellow); --accent-soft: var(--zeal-pink); --accent-alert: var(--zeal-red); /* -------------------------------------------------------- */ /* TYPE — Manrope (→ Avenir Next LT Pro in production) */ /* -------------------------------------------------------- */ --font-sans: "Avenir Next LT Pro", "Manrope", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif; /* The logo itself uses a classical Didone serif (display-only). For decorative headline use, pair with a classical display serif. */ --font-display-serif: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif; /* Type scale — tuned against the Sales Deck's proportions. Slide titles run 36–48pt; body ~14–18pt. */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --fs-5xl: 88px; --lh-tight: 1.08; --lh-snug: 1.2; --lh-body: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-super: 0.14em; /* eyebrow / section labels — Zeal deck uses ALL-CAPS wide-tracked */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-xbold: 800; /* -------------------------------------------------------- */ /* SPACING, RADIUS, SHADOW, MOTION */ /* -------------------------------------------------------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Corners — Zeal deck uses generously-rounded "capsule/pentagon" shapes, not boxy panels. Lean soft. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-3: 0 12px 28px rgba(0, 40, 44, 0.10), 0 4px 10px rgba(0, 40, 44, 0.06); --shadow-painterly: 0 24px 60px rgba(0, 60, 66, 0.18), 0 6px 14px rgba(0, 60, 66, 0.10); --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms; } /* ============================================================ Base element styles — apply directly by using `class="zeal"` on an ancestor (avoids leaking globally). ============================================================ */ .zeal, .zeal * { box-sizing: border-box; } .zeal { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* HEADINGS — bold, tight, long-form titles break onto multiple lines with the second fragment often set in italic-style emphasis. The Zeal deck uses a sans-only system with weight as the hierarchy. */ .zeal h1, .zeal .h1 { font-size: clamp(40px, 5.2vw, var(--fs-4xl)); font-weight: var(--fw-xbold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0 0 var(--sp-5); text-wrap: balance; } .zeal h2, .zeal .h2 { font-size: clamp(30px, 3.8vw, var(--fs-3xl)); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--sp-4); text-wrap: balance; } .zeal h3, .zeal .h3 { font-size: var(--fs-xl); font-weight: var(--fw-semi); line-height: var(--lh-snug); margin: 0 0 var(--sp-3); } .zeal h4, .zeal .h4 { font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: var(--lh-snug); margin: 0 0 var(--sp-3); } .zeal p, .zeal .body { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-1); margin: 0 0 var(--sp-4); text-wrap: pretty; max-width: 68ch; } .zeal .lead { font-size: var(--fs-lg); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--fg-1); } .zeal small, .zeal .small { font-size: var(--fs-sm); color: var(--fg-2); } /* EYEBROW — the wide-tracked ALL-CAPS label seen at top of every section in the Zeal deck (e.g. "ABOUT US", "EXPERT AS A SERVICE"). */ .zeal .eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: var(--tracking-super); text-transform: uppercase; color: var(--fg-brand); display: inline-block; } .zeal .eyebrow--dark { color: var(--zeal-black); } .zeal .eyebrow--onDark { color: var(--zeal-white); } .zeal a { color: var(--zeal-teal); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } .zeal a:hover { color: var(--zeal-teal-mid); } .zeal code, .zeal pre, .zeal .mono { font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; } /* Utilities */ .zeal .text-brand { color: var(--fg-brand); } .zeal .text-inv { color: var(--fg-inv); } .zeal .bg-brand { background: var(--bg-brand); color: var(--fg-inv); } .zeal .bg-paper { background: var(--bg-2); } .zeal .bg-pale { background: var(--bg-3); }