/* tokens.css - GLOBAL design tokens: brand colors, typography (fonts), and the base kit settings. These were buried in page-index.css / page-contact.css, so pages that didn't load those (the tools pages) had no colors/fonts. Now every page loads this, so ANY page - including ones added later - gets the full brand look automatically. This is the single source of truth for colors & fonts. */ /* ───────────────────────────────────────────────────────────────────────────── BRAND PALETTE & FONTS (human-readable reference) Every brand color and font used on the site, named clearly and defined once. The Elementor kit below uses cryptic auto-generated names (e.g. --e-global-color-cd5ca53); these friendly aliases map to the same values so the palette is easy to read and reuse. Change a value here and it updates everywhere that references the alias. COLORS --brand-primary #001D1C dark teal (primary brand / accent / text-dark) --brand-secondary #D1ED77 lime green (buttons, highlights) --brand-tint #D1ED7769 lime at ~41% opacity (subtle backgrounds) --brand-white #FFFFFF pure white --brand-off-white #FDFDFD page background --brand-grey-50 #F7F7F7 light grey surfaces --brand-grey-900 #222222 near-black text --brand-black #000000 text FONTS (only two on the whole site) --font-display "Anton" headings / display --font-body "Outfit" body, UI, buttons ───────────────────────────────────────────────────────────────────────────── */ :root { /* Colors */ --brand-primary: #001D1C; --brand-secondary: #D1ED77; --brand-tint: #D1ED7769; --brand-white: #FFFFFF; --brand-off-white: #FDFDFD; --brand-grey-50: #F7F7F7; --brand-grey-900: #222222; --brand-black: #000000; /* Fonts */ --font-display: "Anton"; --font-body: "Outfit"; } .elementor-kit-3676 { --e-global-color-primary: #001D1C; --e-global-color-secondary: #D1ED77; --e-global-color-text: #000000; --e-global-color-accent: #001D1C; --e-global-color-cd5ca53: #FDFDFD; --e-global-color-e7ef6e7: #F7F7F7; --e-global-color-cf74a19: #FFFFFF; --e-global-color-6061557: #222222; --e-global-color-1382cb1: #D1ED7769; --e-global-typography-primary-font-family: "Anton"; --e-global-typography-primary-font-weight: 500; --e-global-typography-secondary-font-family: "Outfit"; --e-global-typography-secondary-font-weight: 700; --e-global-typography-text-font-family: "Outfit"; --e-global-typography-text-font-size: 14px; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: "Outfit"; --e-global-typography-accent-font-size: 14px; --e-global-typography-accent-font-weight: 500; --e-global-typography-0011c86-font-family: "Anton"; --e-global-typography-0011c86-font-size: 16px; background-color: #FDFDFD; color: var(--e-global-color-primary); font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); } .elementor-kit-3676 button, .elementor-kit-3676 input[type="button"], .elementor-kit-3676 input[type="submit"], .elementor-kit-3676 .elementor-button { background-color: var(--e-global-color-secondary); font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); color: var(--e-global-color-primary); } .elementor-kit-3676 button:hover, .elementor-kit-3676 button:focus, .elementor-kit-3676 input[type="button"]:hover, .elementor-kit-3676 input[type="button"]:focus, .elementor-kit-3676 input[type="submit"]:hover, .elementor-kit-3676 input[type="submit"]:focus, .elementor-kit-3676 .elementor-button:hover, .elementor-kit-3676 .elementor-button:focus { background-color: var(--e-global-color-accent); color: var(--e-global-color-cd5ca53); } .elementor-kit-3676 a { font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); } .elementor-kit-3676 a:hover { color: #63C3DA; } .elementor-kit-3676 h1 { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); } .elementor-kit-3676 h2 { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); } .elementor-kit-3676 h3 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-kit-3676 h4 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-kit-3676 h5 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-kit-3676 h6 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-kit-3676 { font-size: var(--e-global-typography-text-font-size); } .elementor-kit-3676 a { font-size: var(--e-global-typography-text-font-size); } .elementor-kit-3676 { font-size: var(--e-global-typography-text-font-size); } .elementor-kit-3676 a { font-size: var(--e-global-typography-text-font-size); } /* === General widget defaults (headings, buttons, links, text) - site-wide. */ /* Moved here from page-index.css so EVERY page styles widgets consistently. */ .elementor-kit-3676 button, .elementor-kit-3676 input[type="button"], .elementor-kit-3676 input[type="submit"], .elementor-kit-3676 .elementor-button { background-color: var(--e-global-color-secondary); font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); color: var(--e-global-color-primary); } .elementor-kit-3676 button:hover, .elementor-kit-3676 button:focus, .elementor-kit-3676 input[type="button"]:hover, .elementor-kit-3676 input[type="button"]:focus, .elementor-kit-3676 input[type="submit"]:hover, .elementor-kit-3676 input[type="submit"]:focus, .elementor-kit-3676 .elementor-button:hover, .elementor-kit-3676 .elementor-button:focus { background-color: var(--e-global-color-accent); color: var(--e-global-color-cd5ca53); } .elementor-kit-3676 a { font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); } .elementor-kit-3676 a:hover { color: #63C3DA; } .elementor-kit-3676 h1 { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); } .elementor-kit-3676 h2 { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); } .elementor-kit-3676 h3 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-kit-3676 h4 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-kit-3676 h5 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-kit-3676 h6 { font-family: var(--e-global-typography-secondary-font-family), outfit; font-weight: var(--e-global-typography-secondary-font-weight); } .elementor-widget-heading .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); color: var(--e-global-color-primary); } .elementor-widget-text-editor { font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text); } .elementor-widget-heading .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); color: var(--e-global-color-primary); } .elementor-widget-text-editor { font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text); } /* === General icon / icon-box / image widget defaults - site-wide. === */ .elementor-widget-icon-box.elementor-view-stacked .elementor-icon { background-color: var(--e-global-color-primary); } .elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon { fill: var(--e-global-color-primary); color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); } .elementor-widget-icon-box .elementor-icon-box-title { color: var(--e-global-color-primary); } .elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title { color: var(--e-global-color-primary); } .elementor-widget-icon-box .elementor-icon-box-description { font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text); } .elementor-widget-icon-box.elementor-view-stacked .elementor-icon { background-color: var(--e-global-color-primary); } .elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon { fill: var(--e-global-color-primary); color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); } .elementor-widget-icon-box .elementor-icon-box-title { color: var(--e-global-color-primary); } .elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title { color: var(--e-global-color-primary); } .elementor-widget-icon-box .elementor-icon-box-description { font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text); } .elementor-widget-icon-box.elementor-view-stacked .elementor-icon { background-color: var(--e-global-color-primary); } .elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon { fill: var(--e-global-color-primary); color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a { font-family: var(--e-global-typography-primary-font-family), outfit; font-weight: var(--e-global-typography-primary-font-weight); } .elementor-widget-icon-box .elementor-icon-box-title { color: var(--e-global-color-primary); } .elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title { color: var(--e-global-color-primary); } .elementor-widget-icon-box .elementor-icon-box-description { font-family: var(--e-global-typography-text-font-family), outfit; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text); } /* === GLOBAL container spacing: default section/container padding, content width, widget spacing - for every breakpoint. Site-wide so every page (and new pages) get the same vertical/horizontal rhythm, not the bare 10px fallback. === */ .e-con { --container-default-padding-top: 80px; --container-default-padding-right: 30px; --container-default-padding-bottom: 80px; --container-default-padding-left: 30px; } .elementor-element { --widgets-spacing: 20px 20px; --widgets-spacing-row: 20px; --widgets-spacing-column: 20px; } @media(max-width:1024px) { .e-con { --container-max-width: 1024px; --container-default-padding-top: 60px; --container-default-padding-right: 20px; --container-default-padding-bottom: 60px; --container-default-padding-left: 20px; } } @media(max-width:767px) { .e-con { --container-max-width: 767px; --container-default-padding-top: 60px; --container-default-padding-right: 20px; --container-default-padding-bottom: 60px; --container-default-padding-left: 20px; } }