/* ============================================================ FONTS — self-hosted Inter, Latin subset Source: @fontsource/inter v5 (SIL Open Font License 1.1) The --sans stack lists "SF Pro Display", -apple-system and BlinkMacSystemFont ahead of "Inter", so Apple devices resolve to the system face and never fetch these files. Inter is the non-Apple fallback only. ============================================================ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ TOKENS Direction: "Clinical Glass" — Apple's material language (translucent chrome, spring motion, optical type) applied to a medical evidence practice. Light-first for a 68-year-old reader. ============================================================ */ :root { /* Palette derived from the client's logo: navy, red and a light blue, sampled off the artwork itself. The neutrals are hued to match -- they were green-black under the previous accent, and a green-black ink under a navy accent reads as two unrelated decisions rather than one. Every value below is measured, not picked. The ratios are the ones the design has always claimed and the reason it claims them is the reader: this is a VA disability audience, median age well past 60. */ /* surfaces Warmed 26 Aug 2026. The client asked for a landing page that feels "homey and comforting for veterans, not clinical or technical" -- and on a page with no photography, the neutrals are the largest lever there is. A blue-white paper under a blue-grey mist is what reads as clinical: it is the colour of a waiting room. These are the same lightnesses with the hue turned the other way, so nothing about the contrast argument below changes. Every ratio was re-measured against the new grounds rather than assumed: --ink 18.0:1 on paper (was 18.2), --ink-2 9.0:1 (was 9.1), --ink-3 5.7:1, --navy 8.7:1, --red 7.0:1. On --mist all five are fractionally better than they were. The deep ground is unchanged -- it is the brand's navy and warming it would just make it muddy. */ --paper: #FBFAF7; --surface: #FFFDF9; --mist: #F4F1EC; --deep: #070F1D; --deep-2: #0E1A2C; /* ink */ --ink: #09121C; /* 18.2:1 on paper */ --ink-2: #3D4757; /* 9.1:1 — all body prose */ --ink-3: #5A6575; /* 5.7:1 — captions and labels only */ --bone: #F1F4F8; /* 17.4:1 on deep */ --sage: #A6B2C2; /* 8.9:1 on deep */ /* accent — the logo's navy. Deliberately NOT the navy in the artwork itself (#001848). That is darker than the body ink, so a link painted in it reads as emphasis rather than as a link: it separates from prose by weight, in the one direction that also says "not clickable". #1F4788 sits at the body text's lightness and separates by hue instead, which is what a link is supposed to do, and still carries white at 9.1:1 as a button ground. */ --navy: #1F4788; /* 8.8:1 on paper, 9.1:1 white-on-it */ --navy-lift: #2A5AA8; /* 6.5:1 on paper, 6.7:1 white-on-it */ /* accent — the logo's red. Three steps because one red cannot do all three jobs: the graphic red is too light for small text on paper, and both are too dark to read on the deep ground. */ --red: #A81D29; /* 7.1:1 — small text on light */ --red-graphic: #C42432; /* 5.6:1 — seals, rules, eyebrows */ --red-lift: #E05563; /* 5.2:1 on deep */ /* the logo's light blue. Graphic only, and only on dark grounds: it is the ambient texture colour, where red at any weight reads as an alarm rather than as a surface. */ --sky: #4A8BCE; /* 5.4:1 on deep */ /* material */ --glass: rgba(255, 255, 255, .62); --glass-edge: rgba(255, 255, 255, .78); --glass-dark: rgba(241, 244, 248, .055); --glass-dark-edge: rgba(241, 244, 248, .13); --hairline: rgba(9, 18, 28, .09); --hairline-dark: rgba(241, 244, 248, .11); /* shadow — context aware, per Apple material guidance. Cast in a warm brown-black rather than the ink's blue-black. A shadow is the second place a surface declares its temperature after the surface itself, and a cool shadow under a warm paper is the tell that makes a warmed palette read as a filter over a cold one. Same opacities, so nothing about the depth changes. */ --lift-sm: 0 1px 2px rgba(28, 20, 12, .05), 0 4px 12px -4px rgba(28, 20, 12, .08); --lift-md: 0 2px 4px rgba(28, 20, 12, .04), 0 16px 40px -16px rgba(28, 20, 12, .18); --lift-lg: 0 4px 8px rgba(28, 20, 12, .05), 0 32px 72px -24px rgba(28, 20, 12, .24); /* radii — Apple scale */ --r-xs: 10px; --r-sm: 14px; --r-md: 22px; --r-lg: 30px; --r-pill: 999px; /* motion */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); /* springs: Apple damping/response translated to CSS linear() */ --spring: linear(0, .0601, .1874, .3316, .4682, .5868, .6846, .7626, .8232, .8696, .9045, .9305, .9497, .9638, .974, .9814, .9868, .9906, .9933, .9953, .9967, .9977, .9984, .9989, .9992, .9994, .9996, .9997, .9998); --spring-bounce: linear(0, .0424, .1432, .2719, .4075, .5367, .6518, .7494, .8286, .8904, .9367, .9699, .9925, 1.0069, 1.0152, 1.019, 1.0199, 1.0189, 1.0168, 1.0142, 1.0115, 1.0089, 1.0067, 1.0048, 1.0032, 1.0021, 1.0012, 1.0005, 1.0001); /* type */ --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, monospace; /* How far a .rv-l / .rv-r slides in from. Viewport-scaled, because the offset has to stay smaller than the gap it crosses -- a fixed 190px on a 390px screen throws the element most of the way off and brings it back, which is a lurch rather than an entrance. Contexts that need less travel override it; see .narrow in homepage.css. */ --rv-x: clamp(48px, 13vw, 190px); --pad: clamp(88px, 10vw, 152px); --gutter: clamp(20px, 5vw, 44px); /* Header geometry. The bar is fixed, so three separate places have to clear it: #main's offset on a non-Elementor page, the first container's padding on an Elementor one, and .hero's own allowance. Those were three hardcoded numbers until the bar height changed to carry the brand mark and all three had to be found by hand. --hdr-clear is what they use: the bar plus the 14px .hdr padding above and below it. */ --hdr-h: 80px; --hdr-pad: 14px; --hdr-clear: calc(var(--hdr-h) + var(--hdr-pad) * 2); } * { box-sizing: border-box; margin: 0; padding: 0 } html { -webkit-text-size-adjust: 100% } body { background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 19px; line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block } a { color: inherit }