/* Hunter Glass - design tokens Source of truth for colour, type, spacing, radii, shadows, gradients and motion. Port as-is into the Enfold child theme (style.css or a tokens.css enqueued before it). */ :root { /* ---------- Colour: brand ---------- */ --hg-accent: #055ae9; /* PRIMARY ACCENT - buttons, links, active tab, accent bars */ --hg-accent-hover: #0246b6; /* hover / active on accent */ --hg-accent-tint: #dce6fa; /* hover fill on white buttons */ --hg-navy: #16296b; /* HEADINGS, navy button, outline-button text */ --hg-ink: #132966; /* page base text colour (body wrapper) */ --hg-navy-deep: #101d3b; /* hero gradient start */ --hg-blue-band: #2a548f; /* Home "About / Promise" band */ --hg-body: #46536f; /* BODY TEXT */ --hg-muted: #5b6884; /* secondary text, stat labels */ --hg-subtle: #7c8bab; /* captions, meta, dates */ --hg-tab-idle: #6d7a94; /* idle tab label */ --hg-mega-title: #8794b0; /* mega menu column title */ --hg-mega-link: #26365e; /* mega menu links */ --hg-on-dark: #ffffff; /* text on navy */ --hg-on-dark-muted: #d3ddec; /* body text on navy / blue band */ --hg-on-dark-hover: #cddcf6; /* nav link hover */ --hg-star: #f0a726; /* review stars */ --hg-quote-mark: #c9d5ea; /* decorative quote mark */ /* ---------- Colour: surfaces + lines ---------- */ --hg-paper: #ffffff; /* BACKGROUND (default band) */ --hg-mist: #f4f6fb; /* light band / testimonial / FAQ background */ --hg-mist-2: #eef2f9; /* inset panel (e.g. Insurance Work) */ --hg-sheet-sub: #f7f9fc; /* mobile menu sub-list */ --hg-mega-bg: #f2f2ef; /* mega menu panel */ --hg-border: #e4e9f2; /* HAIRLINE - cards, testimonials */ --hg-border-strong: #d3ddee; /* inputs, chips */ --hg-border-input: #cfd9ea; /* form inputs */ --hg-input-bg: #fbfcfe; --hg-rule: #dcdcd6; /* mega menu divider */ --hg-sheet-rule: #e6eaf3; /* mobile menu dividers */ /* ---------- Gradients + overlays ---------- */ --hg-grad-header: linear-gradient(96deg, #24386a 0%, #1b2f59 55%, #24386a 100%); --hg-grad-navy: linear-gradient(112deg, #101d3b 0%, #16296b 55%, #1d397e 100%); /* page heroes, "How it works" */ --hg-grad-home-band:linear-gradient(100deg, rgba(15,29,59,0.9) 0%, rgba(22,38,74,0.9) 45%, rgba(34,52,92,0.9) 100%); /* angled band over home slider */ --hg-grad-cta: linear-gradient(105deg, #12336b 0%, #132966 48%, #1e4788 100%); /* CTA band */ --hg-cta-glow: radial-gradient(closest-side, rgba(5,90,233,0.42), rgba(5,90,233,0) 100%); --hg-grad-footer: linear-gradient(115deg, #24396b 0%, #1d3364 55%, #22386a 100%); --hg-tile-shade: linear-gradient(102deg, rgba(19,42,85,0.8) 0%, rgba(28,55,104,0.8) 100%); /* image tile label band */ --hg-step-bg: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%); --hg-step-bg-final: linear-gradient(160deg, rgba(5,90,233,0.34) 0%, rgba(5,90,233,0.08) 100%); --hg-step-border: rgba(255,255,255,0.16); --hg-step-border-final: rgba(120,166,247,0.4); --hg-texture-opacity: 0.13; /* assets/brand/texture-glass-background.jpg over navy */ --hg-angle-band: rgba(5,90,233,0.16); /* angled overlay at foot of heroes */ --hg-badge-before: rgba(13,26,51,0.82); --hg-badge-after: rgba(5,90,233,0.92); /* Angles (clip-path) */ --hg-clip-tile: polygon(0 68%, 100% 83%, 100% 100%, 0 100%); /* tile label band */ --hg-clip-hero-foot: polygon(0 100%, 100% 0, 100% 100%); /* angle at foot of page heroes */ --hg-clip-home-band: polygon(0 50.4%, 100% 80.5%, 100% 100%, 0 100%); /* home slider band, desktop */ --hg-clip-home-band-mobile: polygon(0 0, 100% 28px, 100% 100%, 0 100%); --hg-clip-corner: polygon(100% 0, 100% 100%, 0 0); /* blue corner on hero photo */ /* ---------- Shadows ---------- */ --hg-shadow-tile: 0 1px 3px rgba(19,41,102,0.07); --hg-shadow-tile-hover: 0 18px 40px rgba(19,41,102,0.28); --hg-shadow-card: 0 8px 26px rgba(19,41,102,0.10), 0 2px 6px rgba(19,41,102,0.05); --hg-shadow-aside: 0 10px 34px rgba(19,41,102,0.09), 0 2px 8px rgba(19,41,102,0.05); --hg-shadow-card-hover: 0 14px 34px rgba(19,41,102,0.16); --hg-shadow-photo: 0 14px 34px rgba(11,26,58,0.35); --hg-shadow-mega: 0 18px 40px rgba(7,18,44,0.35); --hg-shadow-sheet: 0 24px 44px rgba(7,18,44,0.28); /* ---------- Motion ---------- */ --hg-ease: ease; --hg-t-fast: 150ms; /* tab colour */ --hg-t-menu: 180ms; /* mega menu fade + 8px drop */ --hg-t-tile: 300ms; /* tile shadow lift */ --hg-slide-fade: 1800ms; --hg-slide-interval: 5000ms; --hg-photo-tilt: 4.45deg; /* home promise photo rotation (3deg below 1500px) */ /* ---------- Typography ---------- */ --hg-font: "Poppins", system-ui, sans-serif; /* ONE family for headings, body, labels. Google Fonts weights 300/400/500/600/700 */ --hg-fw-light: 300; /* H1 / section H2 lead word ("Our") */ --hg-fw-regular: 400; --hg-fw-medium: 500; --hg-fw-semibold: 600; --hg-fw-bold: 700; --hg-fs-h1: 58px; /* page hero H1 desktop; 44px @989; 34px @767 */ --hg-fs-h1-home: 55px; /* home H1 (light 300, "Hunter Glass" bold) line-height 62px */ --hg-fs-h2: 42px; /* section H2; 34px @989; 28px @767 */ --hg-fs-h2-display: 54px;/* "Our Services" display H2 */ --hg-fs-h2-cta: 48px; --hg-fs-h3: 22px; --hg-fs-lead: 21px; /* hero paragraph */ --hg-fs-body: 19px; /* body copy desktop; 17px @767 */ --hg-fs-small: 16px; --hg-fs-eyebrow: 14px; /* uppercase, letter-spacing 1.4px, weight 700 */ --hg-fs-btn: 19px; /* 18px in header */ --hg-lh-tight: 1.1; /* H1 */ --hg-lh-heading: 1.2; --hg-lh-body: 1.6; --hg-ls-h1: -0.8px; --hg-ls-display: -0.2px; --hg-ls-eyebrow: 1.4px; /* ---------- Spacing ---------- */ --hg-space-1: 4px; --hg-space-2: 8px; --hg-space-3: 12px; --hg-space-4: 16px; --hg-space-5: 24px; --hg-space-6: 32px; --hg-space-7: 48px; --hg-space-8: 64px; --hg-space-9: 96px; --hg-pad-s: 48px; /* section padding S (desktop) - 32px @767 */ --hg-pad-m: 72px; /* M - 48px @767 */ --hg-pad-l: 108px; /* L (default band) - 56px @767 */ /* ---------- Layout ---------- */ --hg-max: 1350px; /* default content width (Enfold content width 1350, gutter 5vw) */ --hg-max-narrow: 1000px; /* FAQ, CTA band, article (Enfold 3/4 centred) */ --hg-max-text: 820px; /* privacy / long-form */ --hg-page-max: 1920px; --hg-gutter: 5vw; --hg-gap: 24px; /* grid gap; 30px on service tiles; 16px on highlight strip */ --hg-header-h: 117px; /* 84px at and below 989px */ /* ---------- Radii ---------- */ --hg-radius-btn: 5px; /* SQUARE-ISH buttons (not pills) */ --hg-radius-card: 14px; /* highlight cards */ --hg-radius-aside: 16px; /* "Why Hunter Glass" aside */ --hg-radius-pill: 100px; /* blog filter chips only */ --hg-radius-none: 0; /* bands, tiles, testimonials, FAQ items */ /* ---------- Breakpoints (Enfold) - reference only, CSS vars can't drive media queries ---------- 989px burger menu + tablet layout 767px columns stack 480px small phones */ }