/* ============================================================= KENZAI DIGITAL — Design Tokens colors_and_type.css Two surface modes: 'green' (signature dark) and 'cream' (light). Default :root is the green/dark mode used on most hero surfaces. Use .surface-cream on a container to flip to the light palette. ============================================================= */ /* ------------------------------------------------------------- 1. WEBFONTS Primary display + UI: "Poppins" (Google Fonts) — confirmed brand font Fallback monospace: "JetBrains Mono" Poppins is a modern geometric sans-serif by Jonny Pinhorn & Ninad Kale, matching the wordmark in the official brand guidelines. ------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap"); /* ------------------------------------------------------------- 2. RAW COLOR PALETTE Sampled directly from brand guidelines artboards. ------------------------------------------------------------- */ :root { /* Brand primaries */ --kz-green-900: #0B2A23; /* deepest, hover/pressed surfaces */ --kz-green-800: #0F362E; /* signature brand green — primary surface */ --kz-green-700: #16463C; /* lifted surface on green bg */ --kz-green-600: #1F5A4D; /* secondary surface, dividers */ --kz-green-500: #2B7361; /* used in app-icon variant */ --kz-green-300: #6C9B8F; /* muted accent / disabled green */ --kz-green-100: #DCE7E3; /* subtle green tint on cream */ --kz-gold-900: #8C6710; /* pressed / deep ink-on-gold */ --kz-gold-700: #B5851C; /* hover gold */ --kz-gold-600: #D6A024; /* signature mustard gold — primary accent */ --kz-gold-500: #E2B447; /* lighter accent / chips */ --kz-gold-200: #F5E2A8; /* gold-tinted surface */ --kz-gold-100: #FAF1D6; /* faintest gold wash / pill bg on cream */ --kz-cream-50: #FBF8F1; /* lightest paper */ --kz-cream-100: #F4EFE3; /* signature cream — primary light surface */ --kz-cream-200: #ECE5D2; /* dividers on cream */ --kz-cream-300: #D9CFB5; /* muted on cream */ --kz-ink-900: #0E1115; /* near-black, dark cards on cream */ --kz-ink-700: #1F242B; --kz-ink-500: #4A5159; /* muted body on cream */ --kz-ink-300: #8A9097; /* tertiary / metadata */ --kz-white: #FFFFFF; /* Semantic status (kept in-palette — green is success, gold caution) */ --kz-success: #2F9E6F; /* dashboard "↑" gains in screens */ --kz-warning: var(--kz-gold-600); --kz-danger: #C24545; --kz-info: var(--kz-green-500); } /* ------------------------------------------------------------- 3. SEMANTIC TOKENS — GREEN (DEFAULT / DARK) SURFACE Use these everywhere instead of raw colors. ------------------------------------------------------------- */ :root { --bg: var(--kz-green-800); --bg-elevated: var(--kz-green-700); --bg-sunken: var(--kz-green-900); --fg: var(--kz-cream-100); /* primary text on green */ --fg-muted: rgba(244, 239, 227, 0.72); /* secondary text */ --fg-subtle: rgba(244, 239, 227, 0.48); /* tertiary / labels */ --fg-on-gold: var(--kz-green-900); /* text sitting on gold */ --accent: var(--kz-gold-600); --accent-hover: var(--kz-gold-700); --accent-active: var(--kz-gold-900); --accent-soft: rgba(214, 160, 36, 0.12); /* tinted pill backgrounds */ --border: rgba(244, 239, 227, 0.12); --border-strong: rgba(244, 239, 227, 0.24); --divider: rgba(244, 239, 227, 0.08); --focus-ring: var(--kz-gold-500); } /* Flip to cream surface */ .surface-cream { --bg: var(--kz-cream-100); --bg-elevated: var(--kz-white); --bg-sunken: var(--kz-cream-200); --fg: var(--kz-green-900); --fg-muted: var(--kz-ink-500); --fg-subtle: var(--kz-ink-300); --fg-on-gold: var(--kz-green-900); --border: rgba(15, 54, 46, 0.10); --border-strong: rgba(15, 54, 46, 0.20); --divider: rgba(15, 54, 46, 0.06); } /* Optional ink surface — used for "Our Services" black panel on website */ .surface-ink { --bg: var(--kz-ink-900); --bg-elevated: var(--kz-ink-700); --fg: var(--kz-cream-100); --fg-muted: rgba(244, 239, 227, 0.65); --border: rgba(244, 239, 227, 0.10); } /* ------------------------------------------------------------- 4. TYPOGRAPHY — RAW SCALE Modular scale, base 16px → 1.250 (major third) for body, then widened steps for display. ------------------------------------------------------------- */ :root { --font-display: "Poppins", system-ui, -apple-system, sans-serif; --font-body: "Poppins", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Sizes */ --fs-12: 0.75rem; /* 12 — micro labels, legal */ --fs-13: 0.8125rem; /* 13 — eyebrow / overline */ --fs-14: 0.875rem; /* 14 — small body */ --fs-16: 1rem; /* 16 — body default */ --fs-18: 1.125rem; /* 18 — large body / lead */ --fs-20: 1.25rem; /* 20 — small heading */ --fs-24: 1.5rem; /* 24 — h4 */ --fs-32: 2rem; /* 32 — h3 */ --fs-40: 2.5rem; /* 40 — h2 */ --fs-56: 3.5rem; /* 56 — h1 */ --fs-80: 5rem; /* 80 — display */ --fs-112: 7rem; /* 112 — hero display */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Line heights */ --lh-tight: 1.05; /* display */ --lh-snug: 1.15; /* headings */ --lh-normal: 1.5; /* body */ --lh-loose: 1.65; /* long-form */ /* Tracking */ --tr-tight: -0.02em; /* display */ --tr-snug: -0.01em; /* headings */ --tr-normal: 0; --tr-wide: 0.04em; /* eyebrows, all-caps labels */ --tr-wider: 0.12em; /* short all-caps "GROW YOUR BRAND" treatment */ } /* ------------------------------------------------------------- 5. SEMANTIC TYPE STYLES Use these classes (or the underlying selectors) for actual text. ------------------------------------------------------------- */ .kz-display, h1.kz-display { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(var(--fs-56), 6vw + 1rem, var(--fs-112)); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg); } h1, .kz-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(var(--fs-40), 3.5vw + 1rem, var(--fs-56)); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg); } h2, .kz-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(var(--fs-32), 2.4vw + 1rem, var(--fs-40)); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg); } h3, .kz-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg); } h4, .kz-h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg); } .kz-eyebrow, .kz-overline { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-13); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--accent); } p, .kz-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg-muted); text-wrap: pretty; } .kz-lead { font-size: var(--fs-18); line-height: var(--lh-normal); color: var(--fg-muted); } .kz-small { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-muted); } .kz-meta { font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-subtle); } code, .kz-code { font-family: var(--font-mono); font-size: 0.92em; background: var(--accent-soft); color: var(--accent); padding: 0.1em 0.4em; border-radius: 4px; } /* Accent treatment used everywhere in marketing copy:

Grow Your Online Business

*/ .kz-accent { color: var(--accent); } /* ------------------------------------------------------------- 6. SPACING, RADIUS, SHADOW, MOTION ------------------------------------------------------------- */ :root { /* 4px base grid */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* Radii — generous, soft. App icon uses ~22% squircle. */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* Shadows — restrained. Brand prefers flat-on-color over heavy shadow. These are reserved for floating dashboards / popovers on cream. */ --shadow-xs: 0 1px 2px rgba(11, 42, 35, 0.06); --shadow-sm: 0 2px 6px rgba(11, 42, 35, 0.08); --shadow-md: 0 8px 24px rgba(11, 42, 35, 0.10); --shadow-lg: 0 20px 48px rgba(11, 42, 35, 0.14); --shadow-glow-gold: 0 10px 30px rgba(214, 160, 36, 0.28); /* Motion — calm, confident. No bounces. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ------------------------------------------------------------- 7. BASE RESET ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-normal); } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } ::selection { background: var(--accent); color: var(--fg-on-gold); }