/* ========================================================================== Peak Compounding Pharmacy - design tokens SOURCE OF TRUTH: Peak-Compounding-Pharmacy-Brand-Direction.pdf (2026-08-28), page 07, as approved by Dr. Vandross when she picked Concept 02. This SUPERSEDES BRAND_GUIDE.md section 8. That earlier ruling retired the blue and led with teal, on the reasoning that the blue had no on-screen equity. The client-facing brand direction reversed that: the three brand colours are read straight out of her own logo vector, so the blue is the mark, and deep teal joins as the dark value the palette was missing. Her approval of Concept 02 carried the palette with it. When BRAND_GUIDE section 8 and this file disagree, THIS FILE WINS. Every ratio below was computed against its stated background, not assumed. Three of them are load-bearing: - White on green is 2.6:1 and FAILS. Green buttons are lettered in ink. - Peak Blue on white is 3.3:1: large display text only, never a paragraph and never a body-size link. - Peak Grey is 2.4:1. Rules and borders only. It is never text. ========================================================================== */ :root { /* --- Her palette, from her own vector file ----------------------------- */ --brand-blue: #0095da; /* Peak Blue. The mark, and large display text only. 3.3:1 on white - passes AA Large at 24px+, or 18.7px+ bold. Never a paragraph. */ --brand-green: #6eb261; /* Peak Green. Buttons, icons, confirmations. 2.6:1 - decorative only, NEVER text, and never a rule that has to be seen. */ --brand-grey: #a7a9ac; /* Peak Grey. Rules, borders, third capsule. 2.4:1 - never text. */ --ink: #033b4a; /* Deep Teal. The proposed addition, page 07. Body text, dark bars, footer. 12.1:1 AAA */ /* --- Working values derived from the above ----------------------------- */ --ink-deep: #012b36; /* footer floor, pressed dark states */ --ink-70: #35646f; /* de-emphasised body text. 7.0:1 AAA */ /* Links and any interactive element at body size need 4.5:1, which Peak Blue cannot reach. This is that same blue deepened until it does - the PDF's own fallback language for the colour question, applied to the one place the brand blue genuinely cannot go. */ --interactive: #0077ae; /* 4.9:1 on white AA */ --interactive-dk: #005e8a; /* hover / focus / pressed */ --interactive-sf: #e6f4fb; /* blue tint, bounded fills only */ /* Green is a fill, never a foreground. Anything sitting ON green is lettered in --ink, which measures 4.8:1 against it. */ --green-dk: #5c9850; /* green hover */ --green-soft: #eef6ec; --canvas: #ffffff; /* the page canvas is white. Always. */ --tint: #f5f9fb; /* BOUNDED card fills only, never page canvas */ --tint-deep: #e8f1f6; --line: #d9e2e7; --line-soft: #eaeff2; --line-strong: #7d949c; /* CONTROL boundaries only (inputs, selects). 3.19:1 on white, which is the WCAG floor for a component boundary. Peak Grey is 2.36:1 and fails it, which is why it is rules-only. */ --focus: #b7601c; /* focus ring. Deliberately outside the brand palette so it can never be mistaken for a decorative outline. 4.6:1 on white. */ --danger: #b3261e; /* form validation errors only. 6.5:1 on white, and far enough from --focus that an invalid field and a focused one never read as the same state. Never used decoratively. */ /* No gradients. Solid fields only. The blue-to-green wellness gradient is the category cliche and every competitor in Tampa runs some version. */ /* --- Type ------------------------------------------------------------- ARCHIVO display + SOURCE SANS 3 body. Decided 2026-08-28 after Ed rejected the serif. This returns to BRAND_GUIDE section 9's original pairing rather than inventing a third answer, and it is worth recording that the reason I left it in the first place did not hold up. I argued Archivo was a "near-miss" against the lockup's Questrial: two sans faces close enough to look like a mistake. Set side by side in a specimen that is plainly wrong. Questrial is geometric-humanist with round bowls and open forms; Archivo is a grotesque with squarer shapes, tighter apertures and vertical stress. They read as a deliberate pairing, not an accident. Archivo over the alternatives (Schibsted Grotesk, Public Sans, Instrument Sans, Epilogue) on legibility. It carries the largest x-height and the most open counters of the five, which matters on a pharmacy site whose audience skews older and which has to hold up in Spanish as well as English. It is sturdy rather than fashionable, which is the deck's "modern not trendy". Standard width only. SemiExpanded is reserved for the wordmark. Full Latin Extended, so Spanish diacritics render correctly in both faces. */ --font-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Interface type: navigation, buttons, eyebrows, labels, table headers. Anything that is a control or a signpost rather than something you read. Kept as a separate role so display type never ends up inside a button. */ --font-ui: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Fluid scale, 390px to 1440px. clamp() keeps the mobile end readable rather than merely proportional. */ --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --step-1: clamp(1.125rem, 1.06rem + 0.30vw, 1.3125rem); --step-2: clamp(1.375rem, 1.24rem + 0.58vw, 1.75rem); --step-3: clamp(1.625rem, 1.40rem + 1.00vw, 2.25rem); --step-4: clamp(2rem, 1.62rem + 1.65vw, 3rem); --step-5: clamp(2.375rem, 1.78rem + 2.58vw, 3.75rem); --leading-tight: 1.12; --leading-snug: 1.28; --leading-body: 1.6; /* --- Space ------------------------------------------------------------- One scale. Band padding is generous because the content is dense and regulated; whitespace is what makes a disclosure readable rather than buried. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --band-y: clamp(3rem, 2rem + 4.5vw, 5.5rem); /* vertical band rhythm */ /* --- Measure and containers -------------------------------------------- FULL WIDTH (Ed, 2026-08-28). The container now runs the width of the viewport with a generous gutter instead of stopping at 1200px, which is what the old site did and what he asked for. --measure is deliberately NOT widened with it. Line length and page width are different problems: a paragraph is unreadable past about 75 characters no matter how wide the screen is. So bands, grids and imagery go full width; running prose stays on a comfortable measure inside them. */ --container: 100%; --container-max: 1800px; /* a ceiling, so it does not sprawl on a 4K panel */ /* The peak. Used as a mask on every section eyebrow so the mark inherits the eyebrow's colour. Kept as a token because it is brand geometry, not a component detail, and it will be reused. */ --peak-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Cpath d='M1 21 11 4l6 9 4-6 10 14Z' fill='%23000'/%3E%3C/svg%3E"); --measure: 66ch; /* body copy never runs wider than this */ --gutter: clamp(1.25rem, 0.6rem + 3vw, 4.5rem); /* --- Radii, borders, elevation ----------------------------------------- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* Elevation is restrained on purpose. A pharmacy is not a SaaS dashboard; cards are defined by a hairline and a tint, not by a drop shadow stack. */ --shadow-sm: 0 1px 2px rgba(3, 59, 74, 0.06); --shadow: 0 2px 8px rgba(3, 59, 74, 0.07), 0 1px 2px rgba(3, 59, 74, 0.05); --shadow-lg: 0 12px 28px rgba(3, 59, 74, 0.10), 0 2px 6px rgba(3, 59, 74, 0.06); /* --- Motion ------------------------------------------------------------ Durations stay short. This is a healthcare site, not a showreel. Every one of these is disabled under prefers-reduced-motion in motion.css. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 520ms; /* Concept 02's spec sets the lockup at 224px in a 112px bar. That reads too heavy in a real header, so the lockup is dialled back to 180px in a 96px bar (Ed, 2026-08-28). Still comfortably above the 150px floor from brand direction page 11, below which the descriptor stops being readable and the mark must be used on its own. Do not go under 150. */ --utilitybar-h: 3rem; /* measured precisely by main.js after layout */ --header-h: 96px; } @media (max-width: 1040px) { /* The lockup drops to 168px wide, which is still above the 150px floor where the descriptor stops being readable (brand direction, page 11). At that width the three-line stack is 63px tall, so the bar needs 88px. */ :root { --header-h: 84px; } }