/* ========================================================================= PULSE DESIGN SYSTEM — colors + type tokens -------------------------------------------------------------------------- Pulse is a Midwest AI transformation consultancy. The brand reads warm, confident, technical. Coral is the throughline — borrowed directly from the logo's heart-with-heartbeat mark. Type uses Poppins as the single brand face — its rounded-geometric forms match the logo's "pulse" wordmark, and it carries both UI and display weight without a serif pair. A monospace shows up for proof points (numbers, metrics, "2-Day AI POC") — the firm sells on measurable outcomes, so numbers earn their own type role. Drop into any prototype: ========================================================================= */ /* ---------- Webfonts: loaded via tags in each page's (a CSS @import here is render-blocking — SEO audit finding #2, task 86aj0bw4k) -- */ :root { /* ===================================================================== COLORS — primitives The coral scale is the brand. Use --coral-500 as the default brand hit; the scale gives you tints for backgrounds, hovers, and pressed states. ===================================================================== */ /* Coral — primary brand scale, sampled from the logo */ --coral-50: #FFF5F3; /* page-tint, hover-bg on light surfaces */ --coral-100: #FFE6E1; /* soft chip bg, callout tint */ --coral-200: #FCC9BF; /* dividers in branded sections */ --coral-300: #FC9A91; /* light coral — logo upper-section fill */ --coral-400: #F8786B; /* mid coral — sampled from lower-section fill */ --coral-500: #F7574B; /* PRIMARY — sampled from logo outer stroke + V */ /* Coral state tokens — internal hover/press depths, not part of the public scale */ --coral-hover: #E8453A; /* button hover on primary */ --coral-press: #C73A30; /* pressed / on-light text */ --coral-deep: #A02C24; /* deep accent for emphasis text */ --coral-cta: #D63F33; /* CTA surfaces that carry white text — the lightest coral that passes WCAG AA (4.55:1 with #FFF). coral-500 itself is 3.27:1 — keep it for large display text, icons, and non-text UI only. */ /* Navy — secondary brand color. Pairs with coral; carries authority & calm. Use for headlines on cream, dark sections, depth contrast against coral. */ --navy-50: #F2F5FA; --navy-100: #DCE3EE; --navy-200: #B5C2D8; --navy-300: #7E91B0; --navy-400: #3F567C; --navy-500: #002057; /* PRIMARY navy — headings, dark sections */ --navy-700: #001640; /* deepest navy — inverse surfaces */ /* Ink — neutral text + UI scale. Cool-warm neutrals (a hint of warmth) so they sit alongside coral. */ --ink-0: #FFFFFF; --ink-50: #FAFAF8; /* page background, "cream" */ --ink-100: #F2F2EE; /* card background on cream */ --ink-150: #E8E8E2; /* hairlines, subtle dividers */ --ink-200: #D6D6CF; /* borders */ --ink-300: #B5B5AC; /* placeholder text, disabled */ --ink-400: #8C8C82; /* tertiary text */ --ink-500: #6B6B62; /* secondary text */ --ink-600: #4A4A43; /* body text */ --ink-700: #2E2E2A; /* strong body, dark UI */ --ink-800: #1A1A18; /* headings */ --ink-900: #0E0E0D; /* near-black, hero type on cream */ /* Support — semantic only. Used sparingly; coral does most heavy lifting. */ --green-500: #2E8B6B; /* success, "shipped" badges */ --green-50: #E8F4EE; --amber-500: #D49327; /* warn, "in progress" */ --amber-50: #FAF1DE; --blue-500: #2C5F8D; /* info, links inside long-form copy */ --blue-50: #E5EEF6; /* ===================================================================== SEMANTIC COLOR TOKENS — prefer these in product code ===================================================================== */ --bg: var(--ink-50); /* default page background — cream */ --bg-elev-1: var(--ink-0); /* card on page */ --bg-elev-2: var(--ink-100); /* nested card / well */ --bg-inverse: var(--ink-900); /* dark sections, footers */ --bg-brand: var(--coral-500); /* brand block fill */ --bg-brand-soft: var(--coral-50); /* brand-tinted section bg */ --fg-1: var(--ink-900); /* primary text */ --fg-2: var(--ink-600); /* body */ --fg-3: var(--ink-500); /* secondary */ --fg-4: #70706A; /* tertiary, captions — darkened from ink-400 (#8C8C82, 3.25:1) to meet WCAG AA 4.5:1 on cream (now 4.77:1). ink-400 primitive unchanged for dark-surface use. */ --fg-disabled: var(--ink-300); --fg-on-brand: var(--ink-0); /* white text on coral */ --fg-on-inverse:var(--ink-50); /* on dark surfaces */ --fg-link: var(--coral-press); /* high-contrast link in copy */ --fg-brand: var(--coral-500); --border-subtle: var(--ink-150); --border-default: var(--ink-200); --border-strong: var(--ink-700); --border-brand: var(--coral-500); /* ===================================================================== TYPOGRAPHY — primitives ===================================================================== */ --font-sans: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif; --font-display: "Poppins", "Fraunces", Georgia, serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Scale — modular, ~1.20 ratio at body, expanding at display */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base:16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 84px; --text-7xl: 112px; /* hero, "From 2,500 hours to 15 minutes" */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-black: 800; /* Line heights */ --leading-tight: 1.05; /* display */ --leading-snug: 1.18; /* H1/H2 */ --leading-normal: 1.45; /* body */ --leading-loose: 1.65; /* long-form */ /* Tracking — Poppins runs better with slightly negative tracking at size */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mono-label: 0.12em; /* eyebrow / "CASE STUDY" labels */ /* ===================================================================== SPACING + RADII + ELEVATION ===================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* default card */ --radius-xl: 24px; --radius-pill: 999px; /* Shadows — soft, warm. Coral tints in the deeper layers reinforce brand. */ --shadow-xs: 0 1px 2px rgba(26, 26, 24, 0.04); --shadow-sm: 0 2px 6px rgba(26, 26, 24, 0.05), 0 1px 2px rgba(26, 26, 24, 0.04); --shadow-md: 0 6px 16px rgba(26, 26, 24, 0.06), 0 2px 4px rgba(26, 26, 24, 0.04); --shadow-lg: 0 18px 40px rgba(26, 26, 24, 0.08), 0 4px 8px rgba(26, 26, 24, 0.04); --shadow-brand: 0 12px 32px rgba(248, 88, 72, 0.18); /* "lift" for primary CTAs */ /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; } /* ========================================================================= SEMANTIC TYPE CLASSES Hand-rolled, not Tailwind — drop these on elements and the styling lands. ========================================================================= */ html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; } body { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-2); } /* Display — used on hero / section headers */ .display-xl, h1.display, .h-display { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-7xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); font-variation-settings: "opsz" 144; } .display-lg { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-6xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-variation-settings: "opsz" 144; } /* Headings — Poppins, bold + tight tracking. SITEWIDE HEADING SCALE (86ahzzkyt) — the only permitted heading sizes: desktop mobile (<=768px) h1 display (home hero) --text-5xl 64px --text-3xl 38px h1 interior (all else) --text-4xl 48px --text-2xl 30px h2 section --text-3xl 38px --text-2xl 30px h2 long-form .article --text-xl 24px --text-lg 20px (case-study body) h3 subsection --text-xl 24px --text-xl 24px h3/h4 card title --text-md 18px (use the .h4 utility class) Pages must not declare their own heading sizes outside this table. */ h1, .h1 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-5xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0 0 var(--space-4); } h2, .h2 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg-1); margin: 0 0 var(--space-3); } h3, .h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: 1.3; letter-spacing: var(--tracking-snug); color: var(--fg-1); margin: 0 0 var(--space-2); } h4, .h4 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: 1.35; color: var(--fg-1); margin: 0 0 var(--space-2); } /* Eyebrow — uppercase mono label. Used for "CASE STUDY", "2-DAY AI POC" */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; /* coral-press, not coral-500: eyebrows are ~12px text and coral-500 is only 3.13:1 on cream (AA needs 4.5:1 for small text). Dark-background eyebrow overrides (e.g. .case-band) keep their lighter corals. */ color: var(--coral-press); } /* Body */ p, .body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-loose); color: var(--fg-2); margin: 0 0 var(--space-4); text-wrap: pretty; } .body-lg { font-size: var(--text-md); line-height: var(--leading-loose); } .body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); } /* Lead — opening paragraph treatment */ .lead { font-family: var(--font-sans); font-size: var(--text-lg); line-height: 1.5; color: var(--fg-1); font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); } /* Caption / micro */ .caption, small { font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.4; color: var(--fg-3); } /* Metric — the workhorse for case-study results: "2,500 HR → 15 MIN" */ .metric { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-5xl); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--fg-1); font-feature-settings: "tnum" 1, "ss01" 1; } .metric-label { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--fg-4); } /* Code/inline mono */ code, .mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--ink-100); padding: 0.1em 0.4em; border-radius: var(--radius-xs); color: var(--fg-1); } /* Links inside body copy */ a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--coral-deep); text-decoration-thickness: 2px; } /* Selection */ ::selection { background: var(--coral-200); color: var(--coral-deep); } /* ================================================================ ACCESSIBILITY Skip link, visible keyboard focus, and minimum touch targets. Applies globally via the design system so every page inherits it. ================================================================ */ /* Skip-to-content link: off-screen until focused by keyboard/AT */ .skip-link { position: absolute; left: 8px; top: -56px; z-index: 1000; background: var(--ink-900); color: var(--ink-0); padding: 10px 16px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-sm); text-decoration: none; transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: 8px; outline: 2px solid var(--coral-500); outline-offset: 2px; } /* Visible focus ring for keyboard users only (mouse clicks stay clean) */ :focus-visible { outline: 2px solid var(--coral-500); outline-offset: 2px; border-radius: var(--radius-xs); } /* Main-content target: don't show an outline when focused programmatically via the skip link, and keep the heading clear of any fixed nav */ #main-content { scroll-margin-top: 88px; } #main-content:focus { outline: none; } /* Minimum touch targets (WCAG 2.5.5). Primary controls & icon buttons get the full 44px; stacked text links get a comfortable ≥32px hit area. */ .btn { min-height: 44px; } .nav-links a { display: inline-flex; align-items: center; min-height: 44px; } .footer-icons a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .footer-col a { display: inline-flex; align-items: center; min-height: 32px; } /* On touch viewports every footer link gets the full 44px (WCAG 2.5.5) */ @media (max-width: 768px) { .footer-col a { min-height: 44px; } }