/* ============================================================================= * Component Supply — shared design tokens * * Source: docs/homepage-redesign/visual-design-production-specs.md, every value * measured in a headless render of prototype artifact 26f20fb8 v10 at * 1440 / 834 / 390. Not taken from the prototype's own token-sheet artboard, * which has drifted (it states a 36/700 display heading where the approved * artboards render 44/300). * * Scoped to .csc-widget, NOT :root, so the palette and type scale never leak * into pages that place no IFE widget. Every widget's outermost element carries * `csc-widget` plus its own machine name; tokens cascade into children. * * Anything rendered outside a widget's DOM subtree — a portal-style overlay * printed at wp_footer — cannot see these and must re-declare what it needs, * with a "change both together" comment at each end. * ========================================================================== */ .csc-widget { /* --- Ink ------------------------------------------------------------- */ --csc-ink: #0E1A2A; /* headings, figures, dark section grounds */ --csc-ink-2: #2E3F55; /* body copy 10.72:1 */ --csc-ink-3: #5C6B7E; /* secondary, captions, field hints 5.44:1 */ /* --csc-ink-4 (#98A4B5) is deliberately absent. * It measured 2.53:1 on white and 2.35:1 on --csc-bg, failing AA for * normal text wherever it was used — field hints and tile indices, 28 * instances. --csc-ink-3 replaces it at 5.44:1. This collapses four greys * to three and is the one contrast fix applied without asking, because it * reuses an existing token rather than changing the design. * See visual-design-production-specs.md §7.1. */ /* --- Blue: links, eyebrows, focus rings, header chrome --------------- */ --csc-blue: #2D80C3; /* the brand blue: fills, rules, icons, rings */ --csc-link: #2974B2; /* blue TEXT: links, eyebrows, labels */ --csc-blue-deep: #1E5C8E; /* hover and press only */ /* Two blues, decided 14 Oct (Ivan). The kit's Primary stays the brand * #2D80C3, which measures 4.21:1 on white and fails AA as body-size text. * Text that is blue uses --csc-link, #2974B2: 4.96:1 on white, 4.61 on * --csc-bg and 4.60 on the shop table's #F2F7FB stripe, so it passes on * every ground the site uses, and is hard to tell from the brand blue at * a glance. (#2A76B5 for a day, 14 Oct: 4.47 to 4.49 on the pale grounds.) Everything that is not * text keeps --csc-blue: non-text needs 3:1, and as a focus ring it * measures 4.21 on white, 3.92 on --csc-bg, 4.16 on --csc-ink. Large text * (24px, or 18.66px bold) passes at 3:1 in either blue. */ /* --- Green ----------------------------------------------------------- */ --csc-green-btn: #4CAF50; /* EVERY solid button. Never a link colour. */ --csc-green-hover: #43A047; --csc-green-press: #3F9A43; /* lightened from #388E3C — see --csc-on-green */ --csc-on-green: #0E1A2A; /* the label ON a solid button 6.30:1 */ --csc-green-disabled: #A5D6A7; --csc-green-text: #61BD69; /* accent TEXT on dark ground only, never a * fill — two near-identical greens must not * meet on one page. 7.49:1 on ink */ /* The button label is --csc-on-green, not white. CSC decision, 21 Sep 2026. * * White on this green measures 2.78:1 against a 4.5:1 AA threshold, and * button labels are 13.5–15px/700, which is not "large text", so the 3:1 * allowance does not apply. Nor does it rescue anything: white fails even * 3:1. Something on the button had to change. * * Darkening the LABEL fixes it without touching the brand colour, which is * what CSC chose — the bright green is deliberate, because medtech is navy * and white and they wanted the opposite. #4CAF50 is untouched and must * stay that way. * * navy on --csc-green-btn 6.30:1 rest * navy on --csc-green-hover 5.30:1 hover * navy on --csc-green-press 4.93:1 pressed * * ⚠ The press step LIGHTENS rather than darkens, which is why * --csc-green-press moved from #388E3C to #3F9A43. With a white label a * darker press increased contrast; with a dark label it reduces it, and * #388E3C measured 4.25:1 — the one state that would have failed. Any * future state added to a solid button gets checked against the LABEL, not * against white. */ /* --- Grounds and rules ----------------------------------------------- */ --csc-bg: #F4F7FB; /* alternate section ground, utility bar */ --csc-bg-2: #E6EEF6; --csc-ground-card: #152740; /* capability card inside the dark band */ --csc-rule: #D5DEE8; /* the hairline that replaces elevation */ --csc-rule-on-dark: #3E5875; /* the same hairline on --csc-ink grounds. * --csc-rule reads as a bright line on ink, * so the dark band carries its own. Measured * from the capability grid, where 1px gaps in * a container of this colour ARE the rules. */ --csc-rule-strong: #B9C5D3; /* field borders */ --csc-danger: #D8453A; --csc-on-dark: #B9C5D3; /* body copy on --csc-ink 9.99:1 */ --csc-tag-on-dark: #8FA3BC; /* ‹VERIFY› tags 6.78:1 */ /* --- Type ------------------------------------------------------------ */ --csc-font: 'Roboto', Helvetica, Arial, sans-serif; --csc-font-slab: 'Roboto Slab', Georgia, serif; /* once per section, max */ --csc-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Display — desktop values. Breakpoint overrides at the foot of this file. */ --csc-fs-h1: 44px; --csc-fs-h2: 32px; --csc-fs-h2-alt: 30px; /* stock table */ --csc-fs-h2-dark: 36px; /* dark ground */ --csc-fs-h3: 24px; /* sub-head, weight 700 */ --csc-lh-display: 1.08; /* tightens as size grows: 1.08 at 44, 1.15 at 30 */ --csc-lh-display-2: 1.15; --csc-ls-display: -0.01em; --csc-w-display: 300; /* the closing band is the one 700 exception */ /* Body and UI */ --csc-fs-body: 16px; /* long-form, hero subhead · lh 1.55 */ --csc-fs-card: 15px; /* card title · 500 · lh 1.25 */ --csc-fs-ui: 14px; /* buttons, nav, links · 700 */ --csc-fs-copy: 13px; /* tile and card copy · lh 1.55 */ --csc-fs-spec: 10.5px; /* card spec line, mono · lh 1.65 */ --csc-fs-label: 12px; /* field labels, eyebrows, mono, 700 */ --csc-fs-figure: 24px; /* trust-strip figures, mono, 700 */ --csc-lh-body: 1.55; --csc-lh-spec: 1.65; --csc-ls-eyebrow: 0.12em; /* load-bearing: at default tracking the * uppercase mono eyebrows read as shouting * rather than as labels */ /* --- Spacing --------------------------------------------------------- * A 4px scale. The artboards run 2/4/6/7/8/10/12/14/16/20/24/32/36/48, * which is fine in a design tool and wrong in Elementor where each value * becomes a control someone can edit. Five off-grid values round to the * nearest step; largest shift is 4px. See production specs §3.4. * The 2px step survives because it is the radius and the hairline. */ --csc-space-1: 4px; --csc-space-2: 8px; --csc-space-3: 12px; --csc-space-4: 16px; --csc-space-5: 20px; --csc-space-6: 24px; --csc-space-8: 32px; --csc-space-12: 48px; --csc-section-y: 56px; /* standard section padding, top and bottom */ /* --- Shape ------------------------------------------------------------ * Two radii. Surfaces — cards, panels, frames, fields, tags — stay at the * approved design's 2px. Buttons and button-like controls are 4px: CSC * asked for "the corners just a little more" rounded on 2 Oct, for buttons. * No elevation and no gradients anywhere — every surface boundary is a 1px * --csc-rule hairline. This is the decision that moves the page from store * to engineering document, and a box-shadow undoes it. */ --csc-radius: 2px; --csc-radius-btn: 4px; /* buttons; sheets outside .csc-widget write 4px */ --csc-hairline: 1px solid var(--csc-rule); /* --- Controls --------------------------------------------------------- * Three heights, not the artboard's four: the header search submit is built * at 46 to match the CTA beside it. The artboard also renders the search * submit at radius 0 where every other button is 2 — a slip, not intent. */ --csc-control-lg: 50px; /* primary section CTA */ --csc-control-md: 46px; /* header CTA, route-card CTA */ --csc-control-sm: 42px; /* capability box CTA */ --csc-field-h: 44px; /* input, select */ /* --- Layout ----------------------------------------------------------- * ⚠ The grid band is a SECTION override and never an Elementor kit change. * elementor-kit-12 governs container width site-wide — 23 pages, 72 posts, * 32 Custom Fabrication entries, the blog, the Resource Center, the cart. * Setting 1400 there produces the right homepage and silently reflows * everything else. QA.md phase 5 verifies the kit is untouched. * See homepage-redesign/CLAUDE.md §2.7. */ --csc-band: 1200px; --csc-band-grid: 1400px; /* csc-category-grid only, desktop only */ --csc-gutter: 20px; /* Base */ font-family: var(--csc-font); color: var(--csc-ink-2); -webkit-font-smoothing: antialiased; } /* Numbers are mono with tabular figures everywhere — dimensions, gauges, * tolerances, lead times, part numbers, phone numbers, quantities, cart counts, * hours. This is a legibility requirement, not a stylistic one: the whole * spec-figure argument rests on decimal points stacking so two sizes can be * compared by eye. */ .csc-widget .csc-num, .csc-widget .csc-spec { font-family: var(--csc-font-mono); font-variant-numeric: tabular-nums; } .csc-widget .csc-eyebrow { font-family: var(--csc-font-mono); font-size: var(--csc-fs-label); font-weight: 700; letter-spacing: var(--csc-ls-eyebrow); text-transform: uppercase; color: var(--csc-link); } /* Focus is visible and blue on every ground. Passes the 3:1 non-text minimum * at 4.21 / 3.92 / 4.16 — see the --csc-blue note above. */ .csc-widget :focus-visible { outline: 2px solid var(--csc-blue); outline-offset: 2px; } /* --- Breakpoints --------------------------------------------------------- * Elementor's defaults. Nothing in the design needs a custom boundary; 1440 / * 834 / 390 are drawing widths, not media queries. */ @media (max-width: 1024px) { .csc-widget { --csc-fs-h1: 34px; --csc-fs-h2: 28px; --csc-fs-h2-alt: 26px; --csc-fs-h2-dark: 30px; --csc-band: 100%; --csc-band-grid: 100%; --csc-gutter: 32px; } } @media (max-width: 767px) { .csc-widget { --csc-fs-h1: 28px; --csc-fs-h2: 24px; --csc-fs-h2-alt: 22px; --csc-fs-h2-dark: 26px; --csc-fs-h3: 22px; --csc-gutter: 16px; } }