/* ============================================================
GOOGLE FONT IMPORT
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* Font notes — Ashburton District Council (ADC):
ADC's brand guide/typeface was not supplied, so this pairing is a
close visual match taken from the ADC/EA Networks Centre website
(adc.govt.nz): a bold geometric-rounded sans for headings and a
clean humanist sans for body copy. Montserrat and Inter are used
here as free, open-license stand-ins for whatever proprietary/
licensed fonts the real site is using — confirm against ADC's
brand guide if/when it becomes available and swap in this block. */
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Primary brand color — CTAs, active states, feeds --color-brand* below */
--color-primary: #0F4F79; /* ADC "Teal" — PMS 7700 */
--color-primary-dark: #003858; /* ADC "Dark Teal" — PMS 302 */
--color-primary-light: #e6eef3;
/* Secondary accent — links, focus states, tabs, calendar/time selection */
--color-secondary: #0090A6; /* ADC "Turquoise" — PMS 7467 */
--color-secondary-dark: #00707F;
--color-secondary-light: #e3f3f5;
--color-secondary-glow: #0090A626;
/* Ink — headings, body emphasis, and dark surfaces (header, footer, table heads) */
--color-ink: #003858; /* ADC "Dark Teal" — PMS 302 */
--color-ink-mid: #0F4F79; /* ADC "Teal" */
--color-ink-pale: #eff2f3;
--color-ink-glow: #00385826;
--color-white: #ffffff;
--color-off-white: #f4f6f8;
--color-surface: #f8fafb;
--color-border: #e2e8ef;
--color-border-mid: #cbd5e1;
--color-text: #464749; /* ADC "Dark Gray" — PMS Cool Gray 10 */
--color-text-muted: #64748b;
--color-text-faint: #94a3b8;
/* Accent — used for CTAs/highlights that need to pop against teal (ADC's
equivalent role to BMCC's Fern green accent) */
--color-accent: #F07F0A; /* ADC "Orange" — PMS 144 */
--color-accent-dark: #c3660a;
/* Typography — ADC brand font not confirmed (see note above the @import).
Montserrat carries headings/nav weight, Inter carries body copy, with
system sans-serif as the safety-net fallback. */
--font-base: 'Inter', -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
--font-heading: 'Montserrat', -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
/* Spacing */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
/* Shadows */
--shadow-xs: 0 1px 3px #021d490f;
--shadow-sm: 0 2px 8px #021d4914;
--shadow-md: 0 4px 16px #021d491a;
--shadow-lg: 0 8px 32px #021d4924;
--shadow-secondary: 0 4px 20px #6dbd3340;
--shadow-primary: 0 4px 20px #00549059;
/* 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;
overflow-anchor: auto;
}
/* Explicit overflow-anchor: auto (long shot, low risk)
Scroll anchoring is on by default in Chrome/Firefox and nothing
here was disabling it, so this doesn't change anything that
wasn't already true — it's here in case some inherited context
was suppressing it. It does NOT work in Safari/iOS at all, and
even where supported it may not help if a content swap is too
large for the browser's anchoring heuristic to find a stable
point to lock onto. The real fix for that kind of issue is scroll
handling in Envibe's own JS on the relevant interaction, which
this stylesheet has no way to reach. */
body {
overflow-anchor: auto;
}
*, *: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;
}
/* Headings carry Montserrat instead of the base Inter — matches the
heading/body split seen on the ADC/EA Networks Centre website. */
h1, h2, h3, h4, h5, h6,
section.page-heading h1,
.footer-info__heading {
font-family: var(--font-heading) !important;
font-weight: 700 !important;
}
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
Solid Teal banner (no background photo) behind the logo and
strapline. Depends on this markup existing in HTML Body Content:
Swim - Gym - Courts - Community
============================================================ */
/* ============================================================
HEADER BANNER
White-to-teal fade banner (Option B, approved by client):
solid white on the left where the logo sits, dissolving into
the banner photo, with a dark teal wash over the photo's right
half so the whole band reads as one connected piece rather than
"white box + separate photo." Depends on this markup existing
in HTML Body Content:
Swim - Gym - Courts - Community
============================================================ */
#clientheader {
background-image:
linear-gradient(to right, #ffffff 0%, #ffffff 22%, transparent 58%),
linear-gradient(to right, transparent 0%, #003858b3 40%, #0F4F7940 70%, transparent 100%),
url('/File/Custom/0a6c318ba4e96e5a62993e7745ff7b8a1865b2f0/Banner.jpg') !important;
background-size: cover, cover, cover !important;
background-position: center center, center center, center center !important;
background-repeat: no-repeat, no-repeat, no-repeat !important;
background-color: var(--color-primary) !important; /* fallback while the photo loads */
min-height: 120px !important;
position: relative !important;
overflow: hidden !important;
border-bottom: none !important;
}
/* This is Envibe body-content markup (an inline