/* ============================================================
GOOGLE FONT IMPORT
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Primary brand color — CTAs, active states, feeds --color-brand* below */
--color-primary: #f68511;
--color-primary-dark: #d1710e;
--color-primary-light: #fef5eb;
/* Secondary accent — links, focus states, tabs, calendar/time selection */
--color-secondary: #29abe2;
--color-secondary-dark: #218cb9;
--color-secondary-light: #edf8fc;
--color-secondary-glow: #29abe226;
/* Ink — headings, body emphasis, and dark surfaces (header, footer, table heads) */
--color-ink: #023047;
--color-ink-mid: #0a4a68;
--color-ink-pale: #eff2f3;
--color-ink-glow: #02304726;
--color-white: #ffffff;
--color-off-white: #f4f6f8;
--color-surface: #f8fafb;
--color-border: #e2e8ef;
--color-border-mid: #cbd5e1;
--color-text: #404042;
--color-text-muted: #64748b;
--color-text-faint: #94a3b8;
/* Typography */
--font-base: 'Avenir', 'Avenir Next', 'Nunito', 'Century Gothic', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
/* Spacing */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
/* Shadows */
--shadow-xs: 0 1px 3px #0230470f;
--shadow-sm: 0 2px 8px #02304714;
--shadow-md: 0 4px 16px #0230471a;
--shadow-lg: 0 8px 32px #02304724;
--shadow-secondary: 0 4px 20px #29abe240;
--shadow-primary: 0 4px 20px #f6851159;
/* Transitions */
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Override Envibe's own brand vars — these names are dictated by Envibe's base
stylesheet, not by us, so they keep their original names rather than being
renamed to --color-primary* like the tokens above */
--color-brand: var(--color-primary);
--color-brand-light: var(--color-primary);
--color-brand-dark: var(--color-primary-dark);
}
/* ============================================================
GLOBAL RESET & BASE
============================================================ */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body,
input, button, select, textarea,
p, span, li, td, th, div, a, h1, h2, h3, h4, h5, label {
font-family: var(--font-base) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--color-off-white) !important;
background-color: var(--color-off-white) !important;
color: var(--color-text) !important;
}
a {
color: var(--color-secondary) !important;
-webkit-transition: var(--transition) !important;
transition: var(--transition) !important;
}
a:hover { color: var(--color-secondary-dark) !important; text-decoration: none !important; }
/* ============================================================
HEADER BANNER
Full-bleed background photo behind the logo and strapline.
Depends on this markup existing in HTML Body Content:
============================================================ */
#clientheader {
background-image: url('/File/Custom/30E72D4F75B4C368DA643322B7076ACAE66CBDDA/Website Banner.png') !important;
background-position: center 42% !important;
background-repeat: no-repeat !important;
-webkit-background-size: cover !important;
background-size: cover !important;
min-height: 150px !important;
position: relative !important;
overflow: hidden !important;
border-bottom: none !important;
}
/* Minimal white wash over the left of the banner photo so the logo
plate sits on a faded (not solid-covered) section of the photo.
Peaks at 50% opacity and stretches out gradually to transparent
by the header's midpoint (55%), rather than snapping off early. */
#clientheader:before {
content: '' !important;
position: absolute !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
background: -webkit-linear-gradient(left, #ffffff80 0%, #ffffff33 25%, #ffffff00 55%) !important;
background: linear-gradient(to right, #ffffff80 0%, #ffffff33 25%, #ffffff00 55%) !important;
z-index: 1 !important;
}
/* This is Envibe body-content markup (an inline