/* Anatomy IT design tokens Source: Anatomy IT Brand Guidelines (Aug 2026 pages; values verified against brand_colors / fonts pages verbatim). Pending full brand book: - canonical navy (#012169 printed vs #041A6F in deck theme/icon SVGs) - Sky Blue vs Light Blue swatch fills looked swapped vs printed codes; codes below follow the PRINTED name→code pairing. */ :root { /* Primary */ --color-navy: #012169; /* Dark Blue — Pantone 280 C */ --color-purple: #8c6fca; /* Purple — Pantone 2665 U */ --color-sky: #5bc2e7; /* Sky Blue — Pantone 2985 C */ --color-blue: #5c88da; /* Light Blue — Pantone 2718 C */ --color-text: #434343; /* Black (text) */ --color-grey-light: #f1f3fd; /* Light Grey */ --color-white: #ffffff; /* not a brand swatch: page ground, ink on brand fills */ /* Secondary / accents */ --color-teal: #40c1bb; /* Teal — Pantone 325 U */ --color-yellow: #f6d57a; /* Yellow — Pantone P 7-6 C */ --color-yellow-light: #f9f6e5;/* Light Yellow — Pantone P 1-9 U */ /* Auxiliary greys (infrequent, mostly text/UI) */ --color-grey-90: #909090; --color-grey-c8: #c8c8c8; --color-grey-e8: #e8e8e8; --color-grey-blue: #e8ebf3; /* Semantic aliases — pages use THESE, so a brand-book revision is cheap */ --bg: var(--color-white); --bg-alt: var(--color-grey-light); --bg-dark: var(--color-navy); --ink: var(--color-text); --ink-heading: var(--color-navy); --ink-on-dark: var(--color-white); --accent: var(--color-purple); --accent-2: var(--color-teal); --link: var(--color-blue); /* Elevation, scrim and decorative fills. Each one restates a brand colour at low alpha: 1 33 105 is --color-navy, 92 136 218 --color-blue, 64 193 187 --color-teal, so a palette revision has to reach these lines too. Named for the surfaces they sit on. */ --shadow-card: 0 8px 24px rgba(1, 33, 105, 0.08); --shadow-card-subtle: 0 8px 24px rgba(1, 33, 105, 0.06); /* FAQ items, step tiles, cards on a tinted section */ --shadow-elevated: 0 12px 32px rgba(1, 33, 105, 0.12); /* nav dropdown, video embed */ --shadow-nav-menu: 0 16px 32px rgba(1, 33, 105, 0.12); /* mobile nav panel: same colour, dropped further */ /* Decorative hexes behind the home hero and the page hero. The teal fill differs by 0.02 in alpha between the two heroes; both are kept, so each hero renders as authored. */ --hex-fill-blue: rgba(92, 136, 218, 0.25); --hex-fill-teal-hero: rgba(64, 193, 187, 0.22); --hex-fill-teal-pagehero: rgba(64, 193, 187, 0.2); /* Services pages. The dot field of the (A) page hero and the soft wash behind the Advantage cards restate brand colours at low alpha: 91 194 231 is --color-sky, 140 111 202 --color-purple, 92 136 218 --color-blue, so a palette revision has to reach these lines too. */ --dot-hero: rgba(91, 194, 231, 0.85); --dot-hero-soft: rgba(91, 194, 231, 0.5); --wash-purple-soft: rgba(140, 111, 202, 0.3); --wash-blue-soft: rgba(92, 136, 218, 0.3); /* The page heroes that lay white copy over a photograph take the home page's veil (below): the same colour and strength behind the copy, clear where the gradient ends. Measured on all thirteen photographs at 1440 and 390 px, on the lightest pixel under each line, white copy keeps 4.5:1 at this strength; the sky eyebrow does not, so main.css sets it white on these heroes. Re-measure when a photograph or the copy changes. */ --scrim-pagehero-photo: var(--scrim-hero-photo); --scrim-pagehero-photo-far: var(--scrim-hero-photo-far); /* Home top block (17.09, re-graded 20.09, re-graded again 25.09). The veil over the photograph is the overlay colour the mock-ups use, #1f1f1f (31 31 31), and it is a horizontal gradient again rather than a flat wash: -photo is the full strength, held across the copy, and -far is the same colour at zero alpha, where the fade ends and the picture is clear. The narrow layout (<= 900px) runs the copy across the full width and so takes -photo flat. 0.61 is the lowest strength that keeps every line of the copy at 4.5:1 against white, measured on the lightest pixel under each line: this photograph puts a white wall and a blown-out window behind most of the copy, so the margin is thin - 0.61 measures 4.56:1 at its worst and 0.60 measures 4.38:1, which fails. Re-measure when the photograph or the copy changes. */ --scrim-hero-photo: rgba(31, 31, 31, 0.61); --scrim-hero-photo-far: rgba(31, 31, 31, 0); /* Readiness status scale — NOT part of the brand palette. Used by the sample report's score dial, verdict pill and category chart on /solutions/healthit-framework/, and by form field-error text/borders (-critical-ink only). The source is a sample report PDF (Surgical Center of Evergreen, Sept 2026, a fictional demo org, not a real client), which shows that the HEALTHIT 360 Scorecard computes this score. The four scale fills and the two soft tints are sampled from that PDF's scoring bar, verdict pill and chart track; -critical-ink is not from the PDF: a darkened red so the verdict text meets WCAG AA on the soft tint (the source PDF puts it below the threshold). */ --status-critical: #e04848; /* source scoring bar, 0-40% */ --status-moderate: #e0a000; /* source scoring bar, 41-60% */ --status-strong: #60b048; /* source scoring bar, 61-85% */ --status-excellent: #289840; /* source scoring bar, 86-100% */ --status-critical-soft: #fce9e9; /* source chart track behind a red bar */ --status-moderate-soft: #fbf2dd; /* source "Moderate Improvements Needed" pill */ --status-critical-ink: #a32222; /* not from the PDF, see above */ /* The one webinar shown full-width part-way down the list. It used to sit on flat --color-teal, which read too dark and as the wrong colour; this is the sky blue of the word "Productivity" (91 194 231) laid over the page at low alpha, so it is that same blue, lighter. A palette revision has to reach this line too. */ --tint-sky-panel: rgba(91, 194, 231, 0.22); /* Client Support page. The two Client Billing cards on the live page are a photograph under a white wash inside a hairline frame. Both values are read out of the live stylesheet itself (anatomyit.com/wp-content/uploads/bb-plugin/cache/6647-layout.css, nodes 679y0z8iobrs and r5xoq06fcke3), not sampled off a screenshot: the wash is plain white at 0.72 and #d1d1d1 is not one of the brand greys, so neither restates a palette colour and a brand-book revision leaves them alone. */ --wash-card-photo: rgba(255, 255, 255, 0.72); --border-card-photo: #d1d1d1; /* Careers page. The recruitment-scam dialog dims the page behind it. The value restates --color-navy (1 33 105) at the same alpha the page heroes use at the far end of their scrim, so a palette revision has to reach this line too. */ --scrim-modal: rgba(1, 33, 105, 0.6); /* Type */ --font-sans: "Montserrat", Arial, sans-serif; }