/* ============================================================================ GFI DESIGN SYSTEM - TOKENS Location: /wp-content/themes/blocksy-child/assets/css/tokens.css ---------------------------------------------------------------------------- THE single source of truth for every design value on the site. Nothing in this file draws anything: it only declares custom properties. Base element styles and utility classes live in `global.css`, which loads immediately after this file and depends on it. Typography and spacing here are transcribed from the design system spreadsheets (`design system_Typography.csv`, `design system_Spacing and Layout.csv`). If a value in this file and a value in those sheets disagree, the sheet wins and this file is the bug. RULE FOR ALL NEW CSS: reference a token. Do not write a raw hex colour or a raw px font-size in component CSS. If the value you need does not exist as a token, that is a design system gap worth raising rather than a licence to hardcode. ============================================================================ */ :root { /* ======================================================================== 1. TYPE FAMILIES Louize for headings, Inter for everything else. Faces are declared in `local-fonts.css`, which loads before this file. ======================================================================== */ --gfi-font-heading: 'Louize', serif; --gfi-font-body: 'Inter', sans-serif; /* ======================================================================== 2. TYPE SCALE - DESKTOP Desktop values. The tablet (<=1024px) and mobile (<=767px) blocks near the bottom of this file reassign these same custom properties, so a rule that reads `var(--gfi-font-h2)` is responsive for free and must never be wrapped in its own media query to resize text. ======================================================================== */ --gfi-font-display-xl: 64px; /* Homepage hero */ --gfi-font-display-l: 56px; /* Hero for other pages */ --gfi-font-h1: 48px; /* Main page heading */ --gfi-font-h2: 40px; /* Major section heading */ --gfi-font-h3: 30px; /* Subsection heading */ --gfi-font-h4: 24px; /* Card / feature heading */ --gfi-font-h5: 20px; /* Small section heading */ --gfi-font-h6: 18px; /* Compact UI heading */ --gfi-font-body-xl: 20px; /* Intro paragraphs */ --gfi-font-body-l: 18px; /* Featured descriptions */ --gfi-font-body-l-medium: 18px;/* FAQs on desktop */ --gfi-font-body-m: 16px; /* Default body text, FAQs on mobile */ --gfi-font-body-s: 14px; /* Secondary / supporting text */ --gfi-font-caption: 12px; /* Metadata / captions */ --gfi-font-eyebrow: 12px; /* Labels / categories */ --gfi-font-eyebrow-m: 14px; /* Question label in forms */ --gfi-font-button-l: 16px; /* Primary CTA */ --gfi-font-button-m: 15px; /* Secondary CTA, option fields */ --gfi-font-button-s: 14px; /* Compact button */ --gfi-font-nav-link: 15px; /* Navbar items */ --gfi-font-input-text: 16px; /* Forms / fields */ --gfi-font-h-des: 18px; /* Heading descriptions */ /* ======================================================================== 3. LINE HEIGHTS Unitless, so they scale with whatever font-size lands on the element. Percentages from the sheet converted 1:1 (115% -> 1.15). H1 is the one value the sheet leaves blank. 1.15 is used here because it sits between Display L (1.10) and H2 (1.20) and matches what the site already shipped. Replace it if the sheet is ever filled in. ======================================================================== */ --gfi-lh-display-xl: 1.15; --gfi-lh-display-l: 1.1; --gfi-lh-h1: 1.15; --gfi-lh-h2: 1.2; --gfi-lh-h3: 1.25; --gfi-lh-h4: 1.3; --gfi-lh-h5: 1.35; --gfi-lh-h6: 1.4; --gfi-lh-body-xl: 1.65; --gfi-lh-body-l: 1.6; --gfi-lh-body-l-medium: 1.2; --gfi-lh-body-m: 1.55; --gfi-lh-body-s: 1.5; --gfi-lh-caption: 1.45; --gfi-lh-eyebrow: 1.4; --gfi-lh-eyebrow-m: 1.4; --gfi-lh-button: 1; --gfi-lh-nav-link: 1; --gfi-lh-input-text: 1.4; --gfi-lh-h-des: 1.2; /* ======================================================================== 4. WEIGHTS Only these three weights of each face are self-hosted. Asking for 600 on Louize, or 300 anywhere, gets a synthesised face from the browser and looks wrong - stick to the tokens. ======================================================================== */ --gfi-fw-regular: 400; --gfi-fw-medium: 500; --gfi-fw-bold: 700; /* ======================================================================== 5. LETTER SPACING The sheet specifies -2% on every Louize display/heading token down to H4, nothing on H5/H6, and +2% on Eyebrow M only. ======================================================================== */ --gfi-ls-default: 0; --gfi-ls-heading: -0.02em; /* Display XL/L, H1, H2, H3, H4 */ --gfi-ls-heading-sm: 0; /* H5, H6 - sheet leaves these blank */ --gfi-ls-eyebrow-m: 0.02em; /* ======================================================================== 6. COLOUR - RAW SCALES These are the palette. Reach for the ROLE ALIASES in section 7 from component CSS wherever one fits; it keeps intent in the code and lets the palette move without a site-wide find-and-replace. ======================================================================== */ --gfi-color-black: #000000; --gfi-color-white: #ffffff; /* Light neutrals */ --gfi-color-base-01: #f2f2f2; --gfi-color-base-02: #e6e6e6; --gfi-color-base-03: #cccccc; --gfi-color-base-04: #b2b2b2; /* Mid neutrals */ --gfi-color-mid-01: #999999; --gfi-color-mid-02: #808080; --gfi-color-mid-03: #666666; /* Dark neutrals */ --gfi-color-contrast-01: #4d4d4d; --gfi-color-contrast-02: #333333; --gfi-color-contrast-03: #181818; /* Primary scale - teal, lightest to mid */ --gfi-color-primary-50: #e0f4f0; --gfi-color-primary-100: #c4ece3; --gfi-color-primary-200: #a8e5d7; --gfi-color-primary-300: #92decb; --gfi-color-primary-400: #6cd6bc; --gfi-color-primary-500: #61bfad; /* Accent scale - deep teal. 500 is the brand CTA colour; 600/700 are the darker steps the job board already shipped, kept at their exact values so tokenising them changed nothing visually. */ --gfi-color-accent-500: #2f8f7b; --gfi-color-accent-600: #26715f; --gfi-color-accent-700: #0f7a63; /* Semantics */ --gfi-color-warning: #c98a2e; --gfi-color-success: #2e8b57; --gfi-color-error: #c94a4a; /* ======================================================================== 7. COLOUR - ROLE ALIASES Prefer these in component CSS. ======================================================================== */ --gfi-color-bg: var(--gfi-color-white); --gfi-color-surface: var(--gfi-color-white); --gfi-color-surface-subtle: var(--gfi-color-base-01); --gfi-color-surface-accent: var(--gfi-color-primary-50); --gfi-color-text: var(--gfi-color-contrast-03); --gfi-color-text-muted: var(--gfi-color-contrast-01); --gfi-color-text-soft: var(--gfi-color-mid-03); --gfi-color-text-inverse: var(--gfi-color-white); --gfi-color-border: var(--gfi-color-base-02); --gfi-color-border-soft: var(--gfi-color-base-01); --gfi-color-border-strong: var(--gfi-color-base-03); /* `brand` is the mid-teal used for borders, focus rings and hover hints. `brand-accent` is the deep teal used for solid fills and for any teal TEXT, because primary-500 on white is only 1.9:1 and unreadable. */ --gfi-color-brand: var(--gfi-color-primary-500); --gfi-color-brand-accent: var(--gfi-color-accent-500); /* Primary CTA. See the accessibility note at the foot of this file before changing the foreground. */ --gfi-color-cta-bg: var(--gfi-color-accent-500); --gfi-color-cta-bg-hover: var(--gfi-color-accent-600); --gfi-color-cta-bg-active: #1e5a4c; --gfi-color-cta-fg: var(--gfi-color-white); --gfi-color-focus-ring: var(--gfi-color-primary-500); --gfi-color-focus-ring-soft: rgba(97, 191, 173, 0.4); /* ======================================================================== 8. SPACING 8px grid, transcribed from the spacing sheet. The number in the token name IS the grid multiplier: --gfi-space-3 is 3x = 24px. Values are rem so they respect a user's root font-size preference. There is deliberately no 11x, 13x or 15x. If a gap needs one of those, the layout is usually fighting the grid. ======================================================================== */ --gfi-space-0: 0; --gfi-space-0-5: 0.25rem; /* 0.5x - 4px */ --gfi-space-1: 0.5rem; /* 1x - 8px */ --gfi-space-2: 1rem; /* 2x - 16px */ --gfi-space-3: 1.5rem; /* 3x - 24px */ --gfi-space-4: 2rem; /* 4x - 32px */ --gfi-space-5: 2.5rem; /* 5x - 40px */ --gfi-space-6: 3rem; /* 6x - 48px */ --gfi-space-7: 3.5rem; /* 7x - 56px */ --gfi-space-8: 4rem; /* 8x - 64px */ --gfi-space-9: 4.5rem; /* 9x - 72px */ --gfi-space-10: 5rem; /* 10x - 80px */ --gfi-space-12: 6rem; /* 12x - 96px */ --gfi-space-14: 7rem; /* 14x - 112px */ --gfi-space-16: 8rem; /* 16x - 128px */ /* ======================================================================== 9. RADII ======================================================================== */ --gfi-radius-xs: 4px; --gfi-radius-sm: 8px; --gfi-radius-md: 12px; --gfi-radius-lg: 16px; --gfi-radius-xl: 24px; --gfi-radius-2xl: 32px; --gfi-radius-pill: 999px; /* ======================================================================== 10. SHADOWS Neutral black-tinted. Brand-tinted shadows go murky at the saturation these teals carry. ======================================================================== */ --gfi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --gfi-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --gfi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --gfi-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08); --gfi-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12); /* ======================================================================== 11. LAYOUT Breakpoint values are documented here for reference only - CSS cannot use a custom property inside a media query condition, so the numbers are repeated literally in the media queries below and in component CSS. Keep them in step by hand. tablet and below : max-width 1024px mobile and below : max-width 767px ======================================================================== */ --gfi-container-max: 1200px; --gfi-container-narrow: 800px; --gfi-container-pad: var(--gfi-space-3); /* 24px gutter */ /* ======================================================================== 12. MOTION ======================================================================== */ --gfi-ease: cubic-bezier(0.4, 0, 0.2, 1); --gfi-duration-fast: 0.12s; --gfi-duration-base: 0.18s; --gfi-duration-slow: 0.3s; } /* ============================================================================ RESPONSIVE TYPE - TABLET (<= 1024px) Only the font-size tokens move. Line heights, weights and letter spacing are constant across breakpoints per the sheet. ============================================================================ */ @media (max-width: 1024px) { :root { --gfi-font-display-xl: 56px; --gfi-font-display-l: 48px; --gfi-font-h1: 40px; --gfi-font-h2: 34px; --gfi-font-h3: 26px; --gfi-font-h4: 22px; --gfi-font-h5: 18px; --gfi-font-h6: 18px; --gfi-font-body-xl: 18px; --gfi-font-body-l: 18px; --gfi-font-body-l-medium: 18px; --gfi-font-body-m: 16px; --gfi-font-body-s: 14px; --gfi-font-caption: 12px; --gfi-font-eyebrow: 12px; --gfi-font-eyebrow-m: 14px; --gfi-font-button-l: 16px; --gfi-font-button-m: 15px; --gfi-font-button-s: 14px; --gfi-font-nav-link: 15px; --gfi-font-input-text: 16px; --gfi-font-h-des: 16px; } } /* ============================================================================ RESPONSIVE TYPE - MOBILE (<= 767px) ============================================================================ */ @media (max-width: 767px) { :root { --gfi-font-display-xl: 44px; --gfi-font-display-l: 40px; --gfi-font-h1: 34px; --gfi-font-h2: 30px; --gfi-font-h3: 24px; --gfi-font-h4: 20px; --gfi-font-h5: 18px; --gfi-font-h6: 16px; --gfi-font-body-xl: 18px; --gfi-font-body-l: 16px; --gfi-font-body-l-medium: 16px; --gfi-font-body-m: 16px; --gfi-font-body-s: 14px; --gfi-font-caption: 12px; --gfi-font-eyebrow: 12px; --gfi-font-eyebrow-m: 12px; --gfi-font-button-l: 15px; --gfi-font-button-m: 14px; --gfi-font-button-s: 13px; --gfi-font-nav-link: 15px; --gfi-font-input-text: 16px; --gfi-font-h-des: 14px; } } /* ============================================================================ DEPRECATED ALIASES - DO NOT USE IN NEW CSS ---------------------------------------------------------------------------- These names come from the retired `local-tokens.css`, which declared a second competing scale and was never actually enqueued. Page content authored in Elementor lives in the database rather than in this repo, so there is no way to grep for editors who pasted these names into a widget's Custom CSS field. They are kept, at their original values, so that any such content keeps rendering. Note that the old `--gfi-s-*` spacing scale is NOT the 8px grid - it includes off-grid 12px and 20px steps. That is exactly why it was retired. Map onto `--gfi-space-*` when you touch a rule that uses one of these. ============================================================================ */ :root { --gfi-black: var(--gfi-color-black); --gfi-white: var(--gfi-color-white); --gfi-base-01: var(--gfi-color-base-01); --gfi-base-02: var(--gfi-color-base-02); --gfi-base-03: var(--gfi-color-base-03); --gfi-base-04: var(--gfi-color-base-04); --gfi-mid-01: var(--gfi-color-mid-01); --gfi-mid-02: var(--gfi-color-mid-02); --gfi-mid-03: var(--gfi-color-mid-03); --gfi-contrast-01: var(--gfi-color-contrast-01); --gfi-contrast-02: var(--gfi-color-contrast-02); --gfi-contrast-03: var(--gfi-color-contrast-03); --gfi-primary-50: var(--gfi-color-primary-50); --gfi-primary-100: var(--gfi-color-primary-100); --gfi-primary-200: var(--gfi-color-primary-200); --gfi-primary-300: var(--gfi-color-primary-300); --gfi-primary-400: var(--gfi-color-primary-400); --gfi-primary-500: var(--gfi-color-primary-500); --gfi-accent-500: var(--gfi-color-accent-500); --gfi-warning: var(--gfi-color-warning); --gfi-success: var(--gfi-color-success); --gfi-error: var(--gfi-color-error); --gfi-bg: var(--gfi-color-bg); --gfi-surface: var(--gfi-color-surface); --gfi-surface-muted: var(--gfi-color-surface-subtle); --gfi-surface-accent: var(--gfi-color-surface-accent); --gfi-border: var(--gfi-color-border); --gfi-border-soft: var(--gfi-color-border-soft); --gfi-border-strong: var(--gfi-color-primary-200); --gfi-text: var(--gfi-color-text); --gfi-text-muted: var(--gfi-color-text-muted); --gfi-text-soft: var(--gfi-color-text-soft); --gfi-cta-bg: var(--gfi-color-cta-bg); --gfi-cta-bg-hover: var(--gfi-color-cta-bg-hover); --gfi-cta-bg-active: var(--gfi-color-cta-bg-active); --gfi-cta-fg: var(--gfi-color-cta-fg); --gfi-focus-ring: var(--gfi-color-focus-ring); --gfi-focus-ring-soft: var(--gfi-color-focus-ring-soft); /* Off-grid legacy spacing - kept at original px values, not remapped. */ --gfi-s-0: 0; --gfi-s-1: 4px; --gfi-s-2: 8px; --gfi-s-3: 12px; /* off-grid */ --gfi-s-4: 16px; --gfi-s-5: 20px; /* off-grid */ --gfi-s-6: 24px; --gfi-s-7: 32px; --gfi-s-8: 40px; --gfi-s-9: 48px; --gfi-s-10: 64px; --gfi-s-11: 80px; --gfi-s-12: 96px; --gfi-s-13: 128px; --gfi-r-xs: var(--gfi-radius-xs); --gfi-r-sm: var(--gfi-radius-sm); --gfi-r-md: var(--gfi-radius-md); --gfi-r-lg: var(--gfi-radius-lg); --gfi-r-xl: var(--gfi-radius-xl); --gfi-r-2xl: var(--gfi-radius-2xl); --gfi-r-pill: var(--gfi-radius-pill); --gfi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --gfi-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --gfi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --gfi-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08); --gfi-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12); } /* ============================================================================ ACCESSIBILITY NOTE - CTA CONTRAST ---------------------------------------------------------------------------- `--gfi-color-cta-fg` is white on `--gfi-color-cta-bg` (#2f8f7b), which measures 3.94:1. That clears WCAG AA for large text (3:1) and for non-text UI components, but it is under the 4.5:1 required for normal-size text - and Button L is 16px Medium, which counts as normal size. Three ways out, in order of preference: 1. Darken the resting CTA to --gfi-color-accent-600 (#26715f). White on that is 5.82:1 and passes comfortably. 2. Keep #2f8f7b and set --gfi-color-cta-fg to --gfi-color-black, which measures 5.34:1. 3. Accept 3.94:1 only where the label is >=18.66px bold or >=24px. This is left as-is pending a design call, because it changes the look of every primary button on the site. It is recorded here so the next person does not have to re-derive the numbers. ============================================================================ */