/* ============================================================================= Columbia Software Works — shared brand stylesheet CANONICAL SOURCE: ~/Claude/Projects/brand/tokens.css ⛔ Do not edit the copies in each site's assets/ folder. Edit this file and run ./sync.sh. A hand-edited copy is how the palettes drifted the first time. Loaded by every page as: or HOW THIS IS ORGANISED 1. Font faces 2. Shared neutrals, type scale, layout constants 3. Brand themes — the ONLY place raw brand hex values appear 4. Base: reset, focus, motion, links 5. Type 6. Buttons 7. Section rhythm, band, footer Everything after section 3 refers to SEMANTIC tokens (--primary, --accent-tx) and never to a brand hex. That is what lets one stylesheet serve both brands: swap the class on and the whole palette moves. ⚠️ EVERY RATIO IN THIS FILE WAS COMPUTED, NOT EYEBALLED. If you change a colour, recompute. The audience skews older and this is health content. ============================================================================= */ /* ---------- 1. fonts ------------------------------------------------------- Body copy is set in the serif on both brands, so serif 400 and 600 are the critical path. Preload them in each page's : Self-hosted woff2, no Google Fonts CDN call. That means no third-party request and nothing to disclose in a privacy policy. Keep it that way. -------------------------------------------------------------------------- */ @font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap} /* ---------- 2. shared neutrals, scale, layout ---------------------------- */ :root{ /* neutrals — identical on both brands */ --ink:#1A1D21; /* body text. 16.0:1 on either surface */ --gray700:#40464E; /* secondary text. 9.0:1 on either surface */ --gray500:#6B7280; /* captions, footer. 4.57:1 — passes, but only just */ --gray300:#D1D5DB; /* borders, rules */ --gray100:#F3F4F6; /* subtle fills, image placeholders */ --serif:'Source Serif 4',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Type scale. Both brands now use the READING scale: body in the serif at 19px. The argument, from the Aug 2026 design review of kevinleasemd.com: these are reading sites, the audience is frequently 55+, and a serif body reads as a letter from a doctor rather than as a product page. 19-20px costs nothing and signals care. */ --t-h1:clamp(38px,6.4vw,60px); --t-h2:36px; --t-lede:24px; --t-h3:21px; --t-body:19px; --t-small:16px; --t-meta:15px; --t-eyebrow:13px; /* The lede sits ABOVE h3, not level with it. A lede introduces a section and the h3s are the items inside it, so the old 21/21 tie inverted the hierarchy as well as flattening it. Do not "fix" this by matching them. */ --lh-body:1.7; --lh-head:1.18; --wrap:1080px; --measure:720px; /* max line length for prose */ --radius:6px; --radius-lg:10px; } /* ---------- 3. brand themes --------------------------------------------- THE ONLY PLACE RAW BRAND HEX VALUES APPEAR. Semantic name What it is Rule --primary headings, links, solid fill safe as text on --surface --primary-900 dark ground must carry white AND accent-dk --primary-tint quiet card fill NOT for --gray500 text (4.28:1) --accent the brand accent ⛔ RULES AND BORDERS ONLY --accent-tx accent darkened for text eyebrows, link hover, focus ring --accent-dk accent lightened for dark accent + focus ring on the band --accent-rule accent at low alpha section separator, decorative --surface the page's one light surface -------------------------------------------------------------------------- */ /* Kevin Lease, MD — sage + clay. The consumer channel. */ .brand-klmd{ --primary:#2E5D57; /* 7.45:1 white · 7.03:1 surface */ --primary-hover:#25514B; /* solid-button hover. white 8.91:1 on it */ --primary-900:#1C3834; /* 12.6:1 white. DERIVED — see tokens.md */ --primary-tint:#EEF2F0; /* primary 6.59:1 · gray700 8.44:1 on it */ --accent:#C2664B; /* 3.97:1 — FAILS AA AS TEXT */ --accent-tx:#9F543E; /* 5.51:1 white · 5.20:1 surface. DERIVED */ --accent-dk:#E8A183; /* 5.92:1 on --primary-900 */ --accent-rule:rgba(194,102,75,.34); --surface:#FBF8F4; } /* The Physician's Back Office — slate + ochre. The professional channel. */ .brand-pbo{ --primary:#22303F; /* 13.44:1 white */ --primary-hover:#334758; /* solid-button hover. white 9.62:1 on it */ --primary-900:#22303F; /* deliberately the same: slate is already dark enough to be a ground. White 13.44:1 and accent-dk 6.35:1 on it. Sage was not, which is the whole reason KLMD needed a separate 900. */ --primary-tint:#EDF1F4; /* primary 11.83:1 · gray700 8.39:1. DERIVED */ --accent:#C08A2E; /* 3.02:1 — FAILS AA AS TEXT */ --accent-tx:#8A6116; /* 5.51:1 white · 5.21:1 surface */ --accent-dk:#E0A93F; /* 6.35:1 on --primary-900 */ --accent-rule:rgba(192,138,46,.34); --surface:#FAF8F5; } /* ---------- 4. base ------------------------------------------------------ */ *{margin:0;padding:0;box-sizing:border-box} /* Smooth scrolling is opt-in: it is a vestibular trigger for some readers. */ html{scroll-behavior:auto} @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ background:var(--surface);color:var(--ink); font-family:var(--serif);font-size:var(--t-body);line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } /* Focus. Neither site had ANY focus style before Aug 2026, so keyboard users fell back to the browser default ring, which lands invisibly on custom coloured buttons. Non-text contrast needs 3:1 against what it sits on: accent-tx measures 5.2:1 on either surface, accent-dk 5.9-6.4:1 on the band. */ :focus-visible{outline:2px solid var(--accent-tx);outline-offset:2px;border-radius:3px} .band :focus-visible,.on-dark :focus-visible{outline-color:var(--accent-dk)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} /* narrow sections stay flush-left with the wide ones — constrain the children, not the wrapper, or the whole column shifts and stops aligning */ .wrap.narrow>*{max-width:var(--measure)} a{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} a:hover{color:var(--accent-tx)} /* ---------- 5. type ------------------------------------------------------ */ h1,h2,h3{ font-family:var(--serif);font-weight:600;line-height:var(--lh-head); letter-spacing:-0.006em;color:var(--primary); } h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2);margin-bottom:14px} h3{font-size:var(--t-h3);margin-bottom:4px} p+p{margin-top:1.05em} .lede{font-size:var(--t-lede);line-height:1.5;color:var(--gray700)} /* Sans is demoted to labels: eyebrows, buttons, footer. Keep it to two eyebrows per page at most — past that the device stops meaning anything. */ .eyebrow{ font-family:var(--sans); font-size:var(--t-eyebrow);font-weight:600;letter-spacing:0.14em;text-transform:uppercase; color:var(--accent-tx);margin-bottom:14px; } /* ---------- 6. buttons --------------------------------------------------- ⛔ The accent is never a fill. A peach or ochre fill under near-black text reads as a warning chip, not a call to action. Accent is a rule-and-eyebrow colour. Use .btn-solid on light and .btn-onDark on a dark ground. -------------------------------------------------------------------------- */ .btn{ display:inline-block;font-family:var(--sans);font-size:var(--t-small);font-weight:600; padding:14px 24px;border-radius:var(--radius);text-decoration:none; border:2px solid transparent;transition:background .15s,color .15s,border-color .15s; } /* on a light ground */ .btn-solid{background:var(--primary);color:#FFF;border-color:var(--primary)} .btn-solid:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#FFF} .btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)} .btn-outline:hover{background:var(--primary-tint);color:var(--primary)} /* on a dark ground */ .btn-onDark{background:#FFF;color:var(--primary-900);border-color:#FFF} .btn-onDark:hover{background:var(--primary-tint);color:var(--primary-900)} .btn-ghostDark{background:transparent;color:#FFF;border-color:rgba(255,255,255,.45)} .btn-ghostDark:hover{background:rgba(255,255,255,.1);color:#FFF} .btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} /* ---------- 7. section rhythm, band, footer ------------------------------ */ section>.wrap{padding-top:84px;padding-bottom:84px} /* One surface per site. Cream vs white is a difference nobody perceives and it costs two hairline rules; separate sections with space and one accent rule. */ section.ruled>.wrap{border-top:1px solid var(--accent-rule)} .sec-head{max-width:var(--measure);margin-bottom:34px} /* The dark band. Keep it to ONE per page so it reads as a signal rather than as wallpaper — two full-bleed dark bands put ~40% of a page in shadow and read institutional, which is the opposite of the job here. */ .band{background:var(--primary-900);color:#FFF} .band>.wrap{padding-top:72px;padding-bottom:72px} .band h2{color:#FFF} .band p{color:rgba(255,255,255,.92);max-width:640px} .band .note{font-size:17px;color:rgba(255,255,255,.78);margin-top:14px} /* Footer is sans and quieter than any disclaimer in the body: a body disclaimer lands as honesty, the footer one lands as legal. */ footer{border-top:1px solid var(--gray300);padding:44px 0 56px} footer p{font-family:var(--sans);font-size:var(--t-meta);line-height:1.6;color:var(--gray500)} footer p+p{margin-top:.8em} footer .links{font-family:var(--sans);margin-bottom:16px;font-size:var(--t-meta)} footer .links a{color:var(--gray700);margin-right:20px} .disclaimer{font-family:var(--sans);font-size:var(--t-meta);color:var(--gray500)} /* ---------- shared small-screen adjustments ------------------------------ */ @media(max-width:600px){ :root{--t-h2:30px;--t-lede:21px;--t-body:18px} body{font-size:var(--t-body)} section>.wrap{padding-top:58px;padding-bottom:58px} }