/* ============================================================================ BRAND LAYER — Bleed Blue Digital (Pranayama Strategies LLC) Loaded AFTER css/os.css. css/os.css IS the live OS production bundle (capture srcSha d1a6fd8343, 2026-08-21). Never hand-edit it; re-capture it instead. Everything per-prospect lives in this file. HOW THE LIVE TOKENS WORK — get this wrong and the override no-ops: • --ink-50 … --ink-950 the neutral/dark ramp. Sidebar, display type, borders, every grey. • --accent-50 … --accent-900 the brand ramp. Active nav, primary buttons, chart emphasis, links. • Everything else is DERIVED and is left alone: --primary → var(--accent-600) · --gold → var(--accent-600) --gold-bg → var(--accent-100) · --gold-soft → var(--accent-500) --k2a-navy-* → var(--ink-*) · --k2a-bg → var(--paper) Overriding a derived alias instead of the ramp recolours one surface and leaves forty others on K2A navy. ── WHERE THESE COLOURS COME FROM ───────────────────────────────────────── Read out of their own Elementor global kit (elementor-post-5922.css) and their logo SVG, ranked by real usage weight across the site. Nothing here was chosen; it was counted. #053B73 69 refs — primary. Every heading, button fill, section band. #4BB3FD 60 refs — accent. The logo fill, the favicon, links, CTA band. #EE4E4A 16 refs — tertiary. Campaign red: the default button background, h3, and every hover state. #F3FAFF 16 refs — the page ground. Their site is NOT white. #032D58 13 refs — body text. #75C5FD 12 refs — the card offset-shadow colour. #00487C the logo's navy half (the "bleed blue" wordmark). ── THE ONE-HUE FACT THAT MAKES THIS SKIN COHERENT ──────────────────────── Every blue in their kit sits between hue 204.7 and 210.5: #F3FAFF ground hue 205.0 #4BB3FD accent hue 204.9 #75C5FD offset hue 204.7 #00487C logo navy hue 205.2 #053B73 primary hue 210.5 #032D58 body hue 210.4 So the identity is ONE hue family at seven lightnesses, which is why a ten-step ramp reproduces the brand rather than approximating it. The ink ramp is built on their PRIMARY hue (210) and the accent ramp on their ACCENT hue (205) — a two-degree distinction their own kit makes, and keeping it is what stops the chrome and the accent collapsing into one another. Their real values sit in the ramp verbatim, not near it: --ink-700 = #053B73 their primary navy --ink-800 = #032D58 their body text --accent-300 = #75C5FD their card offset-shadow blue --accent-400 = #4BB3FD their logo blue --accent-900 = #053B73 their primary navy again, closing the loop --paper = #F3FAFF their page ground ── WHY THE LOGO BLUE IS NOT accent-600 ─────────────────────────────────── #4BB3FD carries white text at 2.29:1 and reads as text on their ground at 2.17:1 — both far under the 4.5:1 AA floor. accent-600 is the step the OS spends on primary buttons AND on link text ("View all →", panel footers), so it must clear 4.5:1 in both directions at once. #0074C7 is the LIGHTEST fully-saturated hue-205 blue that does (4.86:1 carrying white, 4.61:1 as text on their ground). The logo blue is still everywhere you look; it is just not the token asked to hold a sentence. Every contrast figure in this file was computed against --paper #F3FAFF. ========================================================================= */ :root { /* ── ink — hue 210, their primary-navy family ────────────────────────── Contrast vs --paper, with even steps through the readable range: 300 → 3.04 · 400 → 5.05 · 500 → 6.75 · 600 → 8.83 · 700 → 10.60 · 800 → 13.11 · 900 → 15.56 · 950 → 17.45. The progression IS the hierarchy; a flat set of near-identical navies would destroy it. */ --ink-50: #eef4fb; --ink-100: #dde8f4; --ink-200: #bccfe6; --ink-300: #7492b8; --ink-400: #4f6d94; --ink-500: #3a5a80; --ink-600: #26496d; --ink-700: #053b73; /* ← their primary navy, verbatim */ --ink-800: #032d58; /* ← their body text, verbatim */ --ink-900: #02203f; /* the sidebar. White on it 16.39:1; the logo blue #4BB3FD on it 7.16:1, so the mark keeps its colour on the rail instead of going flat. */ --ink-950: #01152a; /* ── accent — hue 205, their accent-blue family ──────────────────────── 300 and 400 are their real values verbatim; 900 closes the loop back onto their primary navy. */ --accent-50: #eff8ff; --accent-100: #d9efff; --accent-200: #aedeff; --accent-300: #75c5fd; /* ← their card offset-shadow blue, verbatim */ --accent-400: #4bb3fd; /* ← their logo blue, verbatim */ --accent-500: #1c95e6; --accent-600: #0074c7; /* white-on 4.86:1 · on-paper 4.61:1 */ --accent-700: #005ea3; --accent-800: #004a80; --accent-900: #053b73; /* ← their primary navy again */ --paper: #f3faff; /* ← their page ground, verbatim */ /* ── the campaign red — ONE job ─────────────────────────────────────── #EE4E4A is their tertiary: the default button fill and every hover state. In this OS it is spent on exactly one thing — the HARD STOP — because that is the only thing in a political email programme that earns a colour nothing else uses: a sending domain over the 0.30% complaint line, a suppressed record that must not be mailed, a state with no disclaimer on file, an FEC deadline inside 72 hours. Their raw #EE4E4A reads at 3.42:1 on their ground and carries white at 3.61:1, so it fails both text duties. --block is the same hue at the lightness that passes (4.98:1 as text, 5.25:1 carrying white); the raw value stays available as a fill where nothing sits on top of it. */ --block: #c9332f; --block-raw: #ee4e4a; --block-bg: #fdeceb; --block-border: #f5c6c4; } /* ── COMPOSED OVERRIDE #1 — semantic pair contrast on THEIR ground ───────── Re-measured against --paper #F3FAFF rather than inherited: --good #16a34a → 3.14:1 fails as text → #16794a 5.15:1 --warn #d97706 → 3.03:1 fails as text → #8a5a06 5.62:1 Both carry status words ("Delivered", "Throttled", "Suppressed") in tables at 11–12px, which is exactly where a 3:1 pair disappears. */ :root { --good: #16794a; --warn: #8a5a06; } /* ── COMPOSED OVERRIDE #2 — form-control boundary ────────────────────────── The base OS uses --ink-200 as the input border, 1.51:1 against this ground, missing WCAG 1.4.11 for a UI boundary. Moving the boundary to --ink-300 puts it at 3.04:1 without darkening ink-200 everywhere (it is still correct as a decorative hairline on card edges). */ .k2a-input, .k2a-select, .k2a-textarea, .k2a-field input, .k2a-field select { border-color: var(--ink-300); } /* ── COMPOSED OVERRIDE #3 — placeholders carry meaning here ──────────────── They name the expected value ("EOM push · house file", "(202) 555-0148", "mail..org", "ALVAREZ-EM-20260930-04-B"), so they are lifted off the non-text step onto ink-400 at 5.05:1. */ .k2a-input::placeholder, .k2a-textarea::placeholder { color: var(--ink-400); } /* ── COMPOSED OVERRIDE #4 — the mobile drawer scrim ──────────────────────── A literal K2A navy (#0f1a2b8c) that no ramp reaches. Matched to ink-950. */ .k2a-mobile-menu-backdrop { background-color: #01152a80; } /* ── DISPLAY TYPE ────────────────────────────────────────────────────────── The OS's UI type (Inter) and mono (JetBrains Mono) are the product's own and are deliberately NOT changed — this demo is the product re-skinned, not re-typeset. Only the serif role moves, because the OS uses a serif-italic qualifier in every page title, so it is the one type slot that can carry a brand without touching the chrome. bleedblue.win sets its display type in akzidenz-grotesk-next-pro at weight 800 (Adobe Typekit, kit vnu4eod) — the extended grotesque you can read in the wordmark. Typekit will not serve to a third-party origin, so the slot takes Archivo at wdth 112: the closest extended grotesque on Google Fonts, with the same squared bowls, the same low stroke contrast and the same wide-set rhythm. Their BODY face is Poppins, which IS on Google Fonts and would be a 1:1 match — and it is deliberately not used. Swapping the OS's body face would re-typeset the product rather than re-skin it, and the demo's whole claim is that this is the real thing with their data in it. Poppins is noted here so the choice reads as a decision rather than an oversight. */ :root { --font-serif: "Archivo", "Inter", "Helvetica Neue", Arial, sans-serif; } .k2a-page-title em, .vp-page-header em, h1 em, h2 em { font-family: var(--font-serif); font-variation-settings: "wdth" 112; font-weight: 700; font-style: normal; /* Archivo has no italic axis. The OS's qualifier reads as a weight-and-width shift instead of a slant — which is exactly how the real wordmark separates its two words. */ letter-spacing: -0.02em; /* their display sets at -2px on 91px */ } /* Archivo at wdth 112 sets wider than Inter at the same px, so the display clamps come back one notch or the h1 crowds the topbar. */ :root { --type-display-xl: clamp(30px, 3.7vw, 46px); --type-display-lg: clamp(25px, 2.6vw, 33px); } /* ── the eyebrow — their most distinctive gesture ────────────────────────── Their site sets its eyebrow in akzidenz-grotesk-next-EXTEND, 600, uppercase, at 6.3px of letter-spacing — an enormous, deliberate track that is the single most recognisable thing about their typography. This reproduces it in the demo's proportions: 10.5px type at 0.24em, which is the same optical gesture at a UI size. On ink-500 (6.75:1). Sits above card titles and above the h1 ("2.0M EMAILS · 5.0M CELLS · 12 COMMITTEES"). */ .bb-eyebrow { font-family: var(--font-serif); font-variation-settings: "wdth" 125; font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-500); } /* ── the card offset shadow — stolen verbatim ────────────────────────────── Their site has no soft shadows anywhere. Every card is `border-radius: 2px; box-shadow: -10px 10px 0 0 #75C5FD` — a hard offset block with zero blur that collapses to nothing on hover. Reproduced here at demo scale (-6px/6px reads at a UI density where -10px/10px would eat the gutter) and applied ONLY to the feature cards a page leads with, not to every surface: at 40 cards a page the gesture stops being a signature and becomes noise. */ .bb-offset { border-radius: 2px; box-shadow: -6px 6px 0 0 var(--accent-300); transition: box-shadow .18s ease, transform .18s ease; } .bb-offset:hover { box-shadow: 0 0 0 0 var(--accent-300); transform: translate(-3px, 3px); } @media (prefers-reduced-motion: reduce) { .bb-offset { transition: none; } .bb-offset:hover { transform: none; } } /* ── the sidebar wordmark ────────────────────────────────────────────────── images/logo-white.svg is their real logo with the #00487C half knocked to white and the #4BB3FD half kept, so the mark holds its two-tone identity on the dark rail — the same figure/ground relationship their own navy footer uses. No white chip, no box: the mark sits on the ink. */ .k2a-sidebar-brand img { width: 100%; max-width: 172px; height: auto; } /* ── COMPOSED OVERRIDE #5 — the tab strip has no base styling ────────────── `css/os.css` styles `.k2a-tabstrip-btn` only inside its apple-os overlay (radius, transition, pressed shadow) and never gives it base typography, so a bare strip renders as unstyled buttons run together. That is a gap in the captured bundle rather than in this demo, and os.css is the live production bundle which is never hand-edited — so the base lands here, where every per-demo override belongs, and disappears the day the bundle grows one. Three painters hit this independently and each patched it inside their own page's namespace. One definition is better than five. */ .k2a-tabstrip { display: flex; gap: 2px; flex-wrap: wrap; } .k2a-tabstrip-btn { font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-500); cursor: pointer; white-space: nowrap; } .k2a-tabstrip-btn:hover { background: var(--mat-hover); color: var(--ink-700); } .k2a-tabstrip-btn.active, .k2a-tabstrip-btn[data-active="true"], .k2a-tabstrip-btn[aria-selected="true"] { background: var(--accent-600); color: #fff; font-weight: 600; } .k2a-tabstrip-btn:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; } /* ── COMPOSED OVERRIDE #6 — the offset card was inert ────────────────────── `.apple-os .k2a-surface` in the production bundle sets `box-shadow` and `border-radius` with `!important`, so `.bb-offset` above never rendered: the computed style stayed at `0 2px 4px` / radius 24px and this skin's one borrowed gesture was invisible on every page that used it. Their site has no soft shadows anywhere. Every card is a hard offset block with zero blur that collapses on hover, and reproducing that is most of what makes the demo read as theirs rather than as the OS wearing their colours. So this specificity fight is worth winning, and it is won at the one place the bundle can be overridden without editing it. */ .apple-os .k2a-surface.bb-offset, .k2a-surface.bb-offset, .bb-offset { border-radius: 2px !important; box-shadow: -6px 6px 0 0 var(--accent-300) !important; } .apple-os .k2a-surface.bb-offset:hover, .k2a-surface.bb-offset:hover { box-shadow: 0 0 0 0 var(--accent-300) !important; transform: translate(-3px, 3px); } @media (prefers-reduced-motion: reduce) { .apple-os .k2a-surface.bb-offset:hover, .k2a-surface.bb-offset:hover { transform: none; } }