/* ========================================================================== HCT Bearings — Design Tokens (single source of truth) ========================================================================== Rule for humans and agents: change values HERE, not inline in components. If you are about to type a colour, a radius, a control height or a spacing value inside another stylesheet, add or reuse a token instead. -------------------------------------------------------------------------- LOAD ORDER -------------------------------------------------------------------------- assets/css/variables.css -> style.css -> global / typography / layout / components -> product / archive variables.css is a dependency of style.css (see includes/assets.php), so it always loads first and everything downstream may consume these tokens. Not loaded on purpose (see includes/assets.php): header.css / footer.css / responsive.css — empty; the legacy rules still live in style.css, which stays as compatibility code. elementor-bridge.css — dormant Elementor compatibility layer, awaiting scoped visual QA. -------------------------------------------------------------------------- BREAKPOINTS — read this before writing a media query -------------------------------------------------------------------------- CSS custom properties CANNOT be used inside `@media` conditions. The tokens below are documentation only; media queries must repeat the literal value. These are the breakpoints the live site actually uses: 1180px header collapses to the mobile menu; container gutter 24px 1000px homepage card grids drop to 2 columns 767px mobile typography scale; container gutter 16px; search folded 560px single column grids 480px footer collapses to one column 390px smallest supported viewport (logo shrink) -------------------------------------------------------------------------- BRAND PALETTE vs RUNTIME ALIASES -------------------------------------------------------------------------- Section 1 is the declared HCT brand palette. Section 2 keeps the names the running site already consumes. The live site still renders `--hct-primary`/`--hct-text` with the pre-rebrand values from the legacy sheet, and that was preserved on purpose: this round is a foundation round and must not restyle existing pages. MIGRATION (deferred to the visual phase, one line each): --hct-primary: var(--hct-navy); --hct-text: var(--hct-ink); After flipping those two, the header, buttons, links and focus ring adopt the brand navy everywhere. Nothing else needs to change. New Gutenberg sections opt in early by using the `.hct-foundation` class (see the bottom of this file), which re-maps the aliases to the brand palette inside that block only. -------------------------------------------------------------------------- NAMING FAMILIES (keep them consistent; do not introduce a synonym) -------------------------------------------------------------------------- --hct-fs-* font size --hct-fw-* font weight --hct-lh-* line height --hct-ls-* letter spacing --hct-space-* spacing --hct-radius-* corner radius All values below are the literals the live stylesheet renders today, so a component rewritten in tokens is pixel-identical to the legacy rule. ========================================================================== */ :root { /* --------------------------------------------------------------------- * 1. Brand palette — declared HCT values * ------------------------------------------------------------------ */ --hct-navy: #173B5E; --hct-gray: #5F6872; --hct-bg: #F7F8FA; --hct-accent: #D93832; --hct-ink: #20252B; /* --------------------------------------------------------------------- * 2. Runtime aliases — values currently rendered by the live site * ------------------------------------------------------------------ */ --hct-primary: #155F8F; /* live value; target: var(--hct-navy) */ --hct-primary-hover: #104D75; --hct-text: #15171A; /* live value; target: var(--hct-ink) */ --hct-muted: #5F6368; --hct-subtle: #8A949C; /* index numbers, de-emphasised counters */ --hct-white: #FFFFFF; --hct-surface: #F6F7F8; --hct-background: #FFFFFF; --hct-border: #E2E5E9; --hct-footer: #142431; --hct-footer-muted: #B8C5CE; /* On-dark surfaces (hero, contact band, footer) */ --hct-on-dark: #FFFFFF; --hct-on-dark-lead: #E2EAF0; --hct-on-dark-muted: #C5D3DD; --hct-sky: #89C8EC; /* Header shell extras */ --hct-border-header: #E4E8EB; --hct-border-soft: #DCE2E6; --hct-border-hairline: #EDF0F2; --hct-accent-hover: #BB2924; /* Hero scrims, kept separate: the soft stop differs between the hero backdrop and its ::after layer. */ --hct-overlay-hero: rgb(6 18 31 / 96%); --hct-overlay-hero-mid: rgb(7 22 37 / 86%); --hct-overlay-hero-soft: rgb(7 22 37 / 17%); /* --------------------------------------------------------------------- * 3. Layout * ------------------------------------------------------------------ */ --hct-container-width: 1280px; --hct-container: var(--hct-container-width); --hct-gutter: 32px; --hct-hero-min-height: 560px; /* --------------------------------------------------------------------- * 4. Typography * ------------------------------------------------------------------ */ --hct-font-sans: Inter, Arial, sans-serif; --hct-font-family: var(--hct-font-sans); /* Weights: the live sheet uses 500 / 600 / 650 / 700. */ --hct-fw-medium: 500; --hct-fw-semibold: 600; --hct-fw-bold: 650; --hct-fw-heavy: 700; /* Line heights */ --hct-lh-tight: 1.08; /* hero display headings */ --hct-lh-heading: 1.2; /* all other headings */ --hct-lh-snug: 1.45; /* dense meta lines */ --hct-lh-body: 1.65; /* Letter spacing */ --hct-ls-tight: -0.025em; /* headings */ --hct-ls-eyebrow: 0.14em; /* .hct-eyebrow */ --hct-ls-index: 0.1em; /* .hct-card-number / .hct-industry-index */ --hct-ls-kicker: 0.13em; /* .hct-card-kicker */ /* Type scale — desktop values, mirroring the live stylesheet */ --hct-fs-display: clamp(42px, 4.6vw, 62px); /* hero h1 */ --hct-fs-3xl: 54px; /* h1 */ --hct-fs-2xl: 40px; /* h2 */ --hct-fs-xl: 29px; /* h3 */ --hct-fs-lg: 23px; /* h4 */ --hct-fs-md: 20px; /* small card titles */ --hct-fs-lead: 17px; /* hero lead, intro paragraphs */ --hct-fs-body: 16px; --hct-fs-sm: 14px; --hct-fs-xs: 13px; --hct-fs-2xs: 12px; --hct-fs-3xs: 11px; /* Type scale — applied at max-width 767px */ --hct-fs-3xl-mobile: 36px; --hct-fs-2xl-mobile: 30px; --hct-fs-xl-mobile: 25px; --hct-fs-lg-mobile: 21px; /* --------------------------------------------------------------------- * 5. Spacing * ------------------------------------------------------------------ */ --hct-space-3xs: 0.25rem; --hct-space-2xs: 0.5rem; --hct-space-xs: 0.75rem; --hct-space-sm: 1rem; --hct-space-md: 1.5rem; --hct-space-lg: 2rem; --hct-space-xl: 3rem; --hct-section-space: 92px; --hct-section-space-mobile: 64px; /* --------------------------------------------------------------------- * 6. Borders, radius, shadow * ------------------------------------------------------------------ */ --hct-radius: 5px; --hct-radius-input: 4px; --hct-radius-sm: 3px; --hct-border-width: 1px; --hct-shadow: 0 10px 20px rgb(20 36 49 / 8%); --hct-shadow-panel: 0 12px 22px rgb(20 36 49 / 7%); /* --------------------------------------------------------------------- * 7. Controls and icons * ------------------------------------------------------------------ */ --hct-button-height: 46px; --hct-input-height: 46px; --hct-field-height: 44px; /* header search input, compact nav items */ --hct-icon-size: 21px; --hct-icon-size-lg: 36px; /* carousel controls */ /* --------------------------------------------------------------------- * 8. Breakpoints — documentation only, cannot be used in @media * ------------------------------------------------------------------ */ --hct-breakpoint-lg: 1180px; --hct-breakpoint-md: 1000px; --hct-breakpoint-sm: 767px; --hct-breakpoint-xs: 560px; --hct-breakpoint-2xs: 480px; --hct-breakpoint-tiny: 390px; /* --------------------------------------------------------------------- * 9. Compatibility aliases * --------------------------------------------------------------------- * Consumed only by the dormant Elementor bridge (elementor-bridge.css). * They are aliases, not new decisions: delete this block the day the * bridge is activated, after switching those rules to the canonical * names above. Do not use these names in new code. * ------------------------------------------------------------------ */ --hct-border-w: var(--hct-border-width); --hct-control-h: var(--hct-button-height); --hct-icon-size-sm: var(--hct-icon-size); } /* Responsive token overrides. These must live in this file (not in a later stylesheet) or the non-media `:root` declaration would win the cascade. */ @media (max-width: 1180px) { :root { --hct-gutter: 24px; } } @media (max-width: 767px) { :root { --hct-gutter: 16px; } } /* ========================================================================== Opt-in scope for NEW content (Gutenberg patterns, PHP template parts added after the foundation round). Legacy Elementor pages never carry this class, so they keep rendering with the runtime aliases above. ========================================================================== */ .hct-foundation { --hct-primary: var(--hct-navy); --hct-primary-hover: #102C47; --hct-text: var(--hct-ink); --hct-muted: var(--hct-gray); --hct-surface: var(--hct-bg); --hct-border: #DDE1E6; }