/* ==========================================================================
Skillcare Limited — Heart of Homecare
Global stylesheet
--------------------------------------------------------------------------
Structure:
00. Fonts (self-hosted)
01. Tokens
02. Reset & base
03. Layout primitives
04. Typography
05. Buttons & pills
06. Ticker
07. Header / nav
08. Hero
09. Cards
10. Components (quiz, postcode, journey, accordion, tooltip pills)
11. Forms
12. Footer
13. Floating widgets (WhatsApp, HaiLL, cookies, back-to-top)
14. Scroll reveal
15. Responsive
========================================================================== */
/* ==========================================================================
[hidden] — must beat any class that sets display
--------------------------------------------------------------------------
The browser default `[hidden] { display: none }` is an element-level rule
and loses to any class selector that sets display. `.assist { display:flex }`
silently defeated it, so the assistant panel rendered open on every page
load and the close button appeared to do nothing. `.journey__controls` had
the same latent fault for the no-JS case.
Anything using the hidden attribute depends on this rule. Keep it, and keep
it above the component sections.
========================================================================== */
[hidden] { display: none !important; }
/* ==========================================================================
00. FONTS — self-hosted
--------------------------------------------------------------------------
Both faces are served from assets/fonts/ rather than from Google Fonts.
Three reasons: the page renders without a third-party round trip, the site
keeps working if Google is blocked or slow, and no visitor IP is handed to
a third party on page load — which a UK care provider handling health data
should prefer. Latin subsets only; total weight is about 120KB.
Licences (both SIL Open Font License 1.1) sit beside the files.
To switch back to the CDN, drop these rules and restore the in
build.py — the font-family names are identical either way.
========================================================================== */
@font-face {
font-family: "Libre Baskerville";
font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: normal; font-weight: 700; font-display: swap;
src: url("../fonts/libre-baskerville-latin-700-normal.woff2") format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: italic; font-weight: 700; font-display: swap;
src: url("../fonts/libre-baskerville-latin-700-italic.woff2") format("woff2");
}
/* Source Sans 3 is a variable font — one file covers 200-900. */
@font-face {
font-family: "Source Sans 3";
font-style: normal; font-weight: 200 900; font-display: swap;
src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
font-family: "Source Sans 3";
font-style: italic; font-weight: 200 900; font-display: swap;
src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations");
}
/* 01. TOKENS ============================================================== */
:root {
/* Brand — navy & teal. Signed off Aug 2026, replacing the purple/lilac
scheme. Accent #0f766e is 4.6:1 on white so it is safe on the small
uppercase eyebrow text; the brighter #0d9488 is used only for fills and
large marks, where contrast is not carrying the meaning. */
--accent: #0f766e; /* teal — eyebrows, icons, highlights */
--accent-dark: #115e59; /* links, hover */
--accent-bright: #0d9488; /* fills and large marks only */
--brand: #23295f; /* navy — primary buttons, active nav */
--brand-dark: #171c44;
--ink: #172047; /* headings */
--ink-deep: #101229; /* dark backgrounds; never pure black */
/* Neutrals. These replaced the lilac tints — most of the extra contrast
the client asked for comes from this change, not from the new hue. */
--mist: #f4f7f8;
--mist-2: #e8eef0;
--mist-3: #d4dee1;
/* Semantic colours — deliberately unchanged. Green marks the CQC rating
and Wellbeing monitoring; amber marks Rapid Response urgency. They carry
meaning, so they survive a rebrand. */
--green: #15803d;
--green-light: #dcfce7;
--green-dark: #0f5f2d;
--amber: #b45309;
--amber-light: #fef3c7;
--white: #ffffff;
/* The logo's own purple, sampled from the artwork (#a37cb7) and taken two
steps deeper so the small uppercase tagline clears 4.5:1 on white.
Used for the "Heart of Homecare" tagline only. */
--logo-purple: #7e5f9c;
/* Text */
--text: #1f253f;
--text-soft: #4b5468;
--text-mute: #6f7a8c;
--on-dark: #ffffff;
--on-dark-soft: rgba(255, 255, 255, .78);
/* Lines */
--line: #e2e8ea;
--line-strong: #cbd5d9;
/* Gradients */
--grad-hero: linear-gradient(135deg, #101229 0%, #1e2a5e 48%, #0d6a68 100%);
--grad-btn: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
--grad-wash: linear-gradient(135deg, #ffffff 0%, #eff5f6 100%);
/* Radii */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 22px;
--r-xl: 28px;
--r-pill: 999px;
/* Shadows */
--sh-1: 0 2px 8px rgba(23, 32, 71, .06);
--sh-2: 0 8px 24px rgba(23, 32, 71, .09);
--sh-3: 0 18px 44px rgba(23, 32, 71, .16);
--sh-4: 0 26px 60px rgba(16, 18, 41, .26);
/* Motion */
--ease: cubic-bezier(.22, .61, .36, 1);
--t-fast: .2s var(--ease);
--t: .3s var(--ease);
--t-slow: .45s var(--ease);
/* Metrics */
--wrap: 1200px;
--wrap-narrow: 880px;
--gut: 24px;
--header-h: 76px;
}
/* 02. RESET & BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 17.5px;
line-height: 1.68;
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
/* `clip` rather than `hidden` — it stops stray absolutely-positioned
tooltips widening the page without breaking position:sticky. */
overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
/* Links take the deeper teal — 6.4:1 on white, which matters on a site
read by a lot of older eyes. */
a { color: var(--accent-dark); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-bright); }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 999;
background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; color: #fff; }
/* 03. LAYOUT ============================================================== */
/* Keep anchor targets clear of the sticky header when jumped to */
:target, section[id], article[id] { scroll-margin-top: 104px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--mist { background: var(--mist); }
.section--mist-2 { background: var(--mist-2); }
.section--wash { background: var(--grad-wash); }
.section--dark { background: var(--grad-hero); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: var(--on-dark-soft); }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.center { text-align: center; }
.stack > * + * { margin-top: 16px; }
/* 04. TYPOGRAPHY ========================================================== */
h1, h2, h3, .display {
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
font-weight: 400;
line-height: 1.22;
letter-spacing: -.012em;
color: var(--ink);
margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 3.9vw, 3rem); line-height: 1.18; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; }
h4, h5 {
font-family: "Source Sans 3", system-ui, sans-serif;
font-weight: 600; font-size: 1.04rem; line-height: 1.45;
margin: 0 0 .5em; color: var(--ink);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
.lead { font-size: 1.16rem; line-height: 1.62; color: var(--text-soft); }
.section--dark .lead { color: var(--on-dark-soft); }
.muted { color: var(--text-mute); font-size: .93rem; }
.eyebrow {
display: block;
font-family: "Source Sans 3", sans-serif;
font-size: .74rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--accent); margin-bottom: 14px;
}
.section--dark .eyebrow { color: #7fd8ce; }
.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.strapline {
font-family: "Libre Baskerville", Georgia, serif;
font-style: italic; font-weight: 400;
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
color: var(--brand); text-align: center;
}
/* 05. BUTTONS & PILLS ===================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 14px 28px; border: 2px solid transparent; border-radius: var(--r-pill);
font-size: .97rem; font-weight: 600; letter-spacing: .01em;
text-align: center; cursor: pointer; white-space: nowrap;
transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--brand-dark); color: #fff; box-shadow: var(--sh-3); }
.btn--grad { background: var(--grad-btn); color: #fff; box-shadow: 0 10px 26px rgba(13, 148, 136, .34); }
.btn--grad:hover { color: #fff; box-shadow: 0 16px 36px rgba(13, 148, 136, .46); }
.btn--ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--mist); }
.btn--on-dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(8px); }
.btn--on-dark:hover { background: rgba(255,255,255,.2); color: #fff; border-color: #fff; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { color: var(--brand); }
.btn--amber { background: var(--amber); color: #fff; }
.btn--amber:hover { background: #92400e; color: #fff; }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-dark); color: #fff; }
.btn--sm { padding: 10px 20px; font-size: .88rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }
.pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 14px; border-radius: var(--r-pill);
font-size: .8rem; font-weight: 600; line-height: 1.4;
background: var(--mist-2); color: var(--brand);
}
.pill--green { background: var(--green-light); color: var(--green-dark); }
.pill--amber { background: var(--amber-light); color: var(--amber); }
.pill--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--text-soft); }
.pill--dark { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-cqc {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 13px; border-radius: var(--r-pill);
background: var(--green-light); color: var(--green-dark);
font-size: .76rem; font-weight: 700; letter-spacing: .02em;
border: 1px solid rgba(21, 128, 61, .22);
}
.dot-pulse {
width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* 06. TICKER ============================================================== */
.ticker {
background: var(--ink-deep); color: #fff; overflow: hidden;
font-size: .8rem; letter-spacing: .02em; padding: 8px 0;
}
.ticker__track { display: flex; width: max-content; animation: tickerScroll 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex-shrink: 0; }
.ticker__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 30px; white-space: nowrap; color: rgba(255,255,255,.9); }
.ticker__item span[aria-hidden] { color: var(--accent); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 07. HEADER / NAV ======================================================== */
.header {
position: sticky; top: 0; z-index: 200;
background: rgba(255,255,255,.94); backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--line);
transition: box-shadow var(--t), background var(--t);
/* The bar lands tall and generous, then shrinks out of the way once the
visitor starts reading. Every size below is driven from these four
variables, so the logo, the wordmark and the bar itself move together. */
--h: 150px;
--mark: 78px;
--name: 1.75rem;
--tag: .7rem;
}
.header.is-scrolled {
box-shadow: var(--sh-2); background: rgba(255,255,255,.98);
--h: 88px;
--mark: 46px;
--name: 1.15rem;
--tag: .55rem;
}
/* The header runs wider than the page grid so that ten nav items, the CQC
badge, the phone number and the CTA all fit without wrapping. */
.header__inner {
display: flex; align-items: center; gap: 16px;
min-height: var(--h);
max-width: 1560px;
transition: min-height var(--t-slow);
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.logo-mark { width: auto; height: var(--mark); flex-shrink: 0; transition: height var(--t-slow); }
.brand__name {
font-family: "Libre Baskerville", Georgia, serif;
font-size: var(--name); font-weight: 400; letter-spacing: .06em;
color: var(--ink); line-height: 1;
transition: font-size var(--t-slow);
}
.brand__tag {
display: block; font-family: "Source Sans 3", sans-serif;
font-size: var(--tag); letter-spacing: .22em; text-transform: uppercase;
color: var(--accent); font-weight: 600; margin-top: 4px;
transition: font-size var(--t-slow);
}
.nav { margin-left: auto; flex: 0 0 auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
display: block; padding: 10px 12px; border-radius: var(--r-sm); white-space: nowrap;
font-size: .96rem; font-weight: 500; color: var(--text-soft);
transition: background var(--t-fast), color var(--t-fast);
}
.nav__link:hover { background: var(--mist-2); color: var(--brand); }
.nav__link.is-active { color: var(--brand); font-weight: 600; background: var(--mist-2); }
/* A child page is open: highlight the parent without claiming to be current */
.nav__link.is-section { color: var(--brand); font-weight: 600; }
/* ---- submenus ---------------------------------------------------------
The parent label stays a real link to a real page; the caret beside it is
a separate button. On a touchscreen that means one tap for the page and
one tap for the menu, rather than hover, which does not exist there. */
.nav__item--menu { padding-right: 2px; }
.nav__caret {
display: grid; place-items: center; width: 24px; height: 28px; margin-left: -8px;
border: 0; background: none; color: var(--text-mute); font-size: .7rem; line-height: 1;
border-radius: 6px;
transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.nav__caret:hover { color: var(--brand); background: var(--mist-2); }
.nav__item--menu:hover .nav__caret,
.nav__caret[aria-expanded="true"] { color: var(--brand); transform: rotate(180deg); }
.nav__sub {
position: absolute; top: 100%; left: 0; z-index: 20; min-width: 210px;
padding: 8px; margin-top: 4px;
background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); box-shadow: var(--sh-3);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
/* An invisible bridge so the pointer can travel from the parent down into the
panel without crossing a dead gap and closing it on the way. */
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav__item--menu:hover .nav__sub,
.nav__item--menu:focus-within .nav__sub,
.nav__sub.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sublink {
display: block; padding: 10px 14px; border-radius: var(--r-sm);
font-size: .92rem; font-weight: 500; color: var(--text-soft); white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast);
}
.nav__sublink:hover { background: var(--mist); color: var(--brand); }
.nav__sublink.is-active { background: var(--mist-2); color: var(--brand); font-weight: 600; }
.header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 14px; }
.header__phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--ink); white-space: nowrap; }
.header__phone:hover { color: var(--accent); }
.nav-toggle {
display: none; width: 46px; height: 46px; margin-left: auto;
border: 1px solid var(--line-strong); border-radius: var(--r-sm);
background: #fff; align-items: center; justify-content: center;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
/* 08. HERO ================================================================ */
.hero {
position: relative; overflow: hidden;
background: var(--grad-hero); color: var(--on-dark);
padding: 96px 0 104px;
}
.hero__orbs { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.orb--1 { width: 420px; height: 420px; background: rgba(13,148,136,.52); top: -110px; right: -80px; animation: float1 17s ease-in-out infinite; }
.orb--2 { width: 320px; height: 320px; background: rgba(35,41,95,.78); bottom: -120px; left: -60px; animation: float2 21s ease-in-out infinite; }
.orb--3 { width: 220px; height: 220px; background: rgba(140,220,210,.30); top: 42%; left: 46%; animation: float1 25s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-38px, 34px) scale(1.09); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(44px,-30px) scale(1.06); } }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 em { color: #8fe6db; }
.hero__sub { font-size: 1.14rem; color: var(--on-dark-soft); max-width: 56ch; margin-bottom: 30px; }
.hero__badge {
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
padding: 7px 16px; border-radius: var(--r-pill);
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
backdrop-filter: blur(10px); font-size: .82rem; font-weight: 500; color: #fff;
}
.hero__checks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; }
.hero__checks li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--on-dark-soft); }
.check-mark {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
background: rgba(34,197,94,.22); color: #86efac;
display: grid; place-items: center; font-size: .7rem; font-weight: 700;
}
.glass {
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
backdrop-filter: blur(16px) saturate(140%); border-radius: var(--r-xl);
padding: 32px; box-shadow: var(--sh-4);
}
.glass h3 { color: #fff; font-size: 1.5rem; margin-bottom: 22px; }
.glass-stat { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.glass-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.glass-stat__icon {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.2rem;
}
.glass-stat__num { display: block; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.2rem; color: #fff; line-height: 1.15; margin-bottom: 3px; }
.glass-stat__label { display: block; font-size: .85rem; line-height: 1.5; color: var(--on-dark-soft); }
/* Inner page banner */
.page-hero { background: var(--grad-hero); color: var(--on-dark); padding: 68px 0 74px; position: relative; overflow: hidden; }
.page-hero__inner { position: relative; z-index: 1; max-width: 780px; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.3rem); margin-bottom: 16px; }
.page-hero p { color: var(--on-dark-soft); font-size: 1.1rem; }
.breadcrumb { font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }
/* 09. CARDS =============================================================== */
.card {
position: relative; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 28px;
box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card--link:hover, .card--link:focus-within { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
/* Whole-card click target: the stretched link covers the card face.
Any control that must stay separately clickable gets .above (z-index 2). */
.card__link-overlay { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card__link-overlay span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.above { position: relative; z-index: 2; }
.card__icon {
width: 56px; height: 56px; border-radius: var(--r-md);
background: var(--mist-2); display: grid; place-items: center;
font-size: 1.6rem; margin-bottom: 18px;
}
.card h3 { font-size: 1.32rem; margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: .96rem; }
.card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; font-size: .9rem; color: var(--brand); }
.card--link:hover .card__more { gap: 11px; }
.card__more { transition: gap var(--t-fast); }
.card--green { border-color: rgba(21,128,61,.28); background: linear-gradient(180deg, #f4fdf7 0%, #fff 62%); }
.card--green .card__icon { background: var(--green-light); }
.card--green h3 { color: var(--green-dark); }
.card--green .card__more { color: var(--green); }
.card--amber { border-color: rgba(180,83,9,.32); background: linear-gradient(180deg, #fffaf0 0%, #fff 62%); }
.card--amber .card__icon { background: var(--amber-light); }
.card--amber h3 { color: var(--amber); }
.card--amber .card__more { color: var(--amber); }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; }
.tile--tint { background: var(--mist); border-color: var(--mist-3); }
.tile h4 { margin-bottom: 12px; }
.tile ul li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: .94rem; color: var(--text-soft); }
.tile ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.panel-dark {
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
border-radius: var(--r-lg); padding: 28px; backdrop-filter: blur(8px);
transition: transform var(--t), background var(--t);
}
.panel-dark:hover { transform: translateY(-4px); background: rgba(255,255,255,.11); }
.panel-dark h3 { font-size: 1.2rem; }
.panel-dark p { font-size: .94rem; }
.stat-big { font-family: "Libre Baskerville", Georgia, serif; font-size: 2.15rem; line-height: 1; color: #fff; display: block; margin-bottom: 10px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; text-align: center; }
.stat-card__num { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.95rem; line-height: 1; color: var(--brand); display: block; margin-bottom: 8px; }
.stat-card__label { font-size: .86rem; color: var(--text-soft); }
.callout {
border-radius: var(--r-lg); padding: 26px 28px;
border-left: 5px solid var(--accent); background: var(--mist);
}
.callout--amber { border-left-color: var(--amber); background: #fffaf0; }
.callout--green { border-left-color: var(--green); background: #f4fdf7; }
.callout--note { border-left-color: var(--brand); background: var(--mist-2); }
.callout h4 { margin-bottom: 8px; }
.callout p { font-size: .95rem; color: var(--text-soft); }
.disclaimer { font-size: .88rem; font-style: italic; color: var(--text-soft); }
/* Trust bar */
.trustbar { background: var(--mist); border-block: 1px solid var(--line); padding: 22px 0; }
.trustbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 46px; }
.trustbar__item { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; color: var(--text-soft); }
.trustbar__item span[aria-hidden] { font-size: 1.1rem; }
/* Testimonials */
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.stars { color: #f59e0b; letter-spacing: 2px; font-size: .95rem; margin-bottom: 14px; }
.quote-card blockquote { margin: 0 0 20px; font-size: 1rem; color: var(--text); line-height: 1.7; }
.quote-card__who { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.avatar {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: var(--grad-btn); color: #fff; display: grid; place-items: center;
font-weight: 600; font-size: .9rem; letter-spacing: .02em;
}
.quote-card__name { font-weight: 600; font-size: .93rem; }
.quote-card__meta { font-size: .82rem; color: var(--text-mute); }
/* 10. COMPONENTS ========================================================== */
/* Postcode checker */
.postcode {
background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-xl);
padding: 34px; box-shadow: var(--sh-2); max-width: 760px; margin: 0 auto;
}
.postcode__form { display: flex; gap: 12px; flex-wrap: wrap; }
.postcode__form input {
flex: 1 1 240px; padding: 15px 20px; font-size: 1rem;
border: 2px solid var(--line-strong); border-radius: var(--r-pill);
text-transform: uppercase; transition: border-color var(--t-fast);
}
.postcode__form input::placeholder { text-transform: none; color: var(--text-mute); }
.postcode__form input:focus { outline: none; border-color: var(--accent); }
.postcode__result { margin-top: 20px; padding: 18px 22px; border-radius: var(--r-md); display: none; }
.postcode__result.is-shown { display: block; animation: fadeUp .35s var(--ease); }
.postcode__result.is-yes { background: var(--green-light); color: var(--green-dark); border: 1px solid rgba(21,128,61,.25); }
.postcode__result.is-no { background: var(--amber-light); color: var(--amber); border: 1px solid rgba(180,83,9,.25); }
.postcode__result strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Care finder quiz */
.quiz {
background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-xl);
padding: 38px; box-shadow: var(--sh-2); max-width: 860px; margin: 0 auto;
}
.quiz__bar { height: 7px; border-radius: var(--r-pill); background: var(--mist-2); overflow: hidden; margin-bottom: 10px; }
.quiz__bar-fill { height: 100%; width: 25%; border-radius: var(--r-pill); background: var(--grad-btn); transition: width var(--t-slow); }
.quiz__step { font-size: .8rem; color: var(--text-mute); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 22px; }
.quiz__q { font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--ink); margin-bottom: 24px; line-height: 1.32; }
.quiz__options { display: grid; gap: 12px; }
.quiz__option {
display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
padding: 17px 22px; border: 2px solid var(--line); border-radius: var(--r-md);
background: #fff; font-size: .99rem; font-weight: 500; color: var(--text);
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.quiz__option:hover { border-color: var(--accent); background: var(--mist); transform: translateX(4px); }
.quiz__option span[aria-hidden] { font-size: 1.3rem; }
.quiz__result { animation: fadeUp .4s var(--ease); }
.quiz__result-emoji { font-size: 3rem; line-height: 1; margin-bottom: 14px; }
.quiz__result h3 { font-size: 1.9rem; margin-bottom: 12px; }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--text-mute); font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--brand); }
/* Care journey — see section 19 for the stepper */
/* The diagram only scrolls when the viewport is narrower than its 900px
minimum, so the hint is hidden above that. */
@media (min-width: 1000px) { .journey__hint { display: none; } }
/* Accordion */
.acc { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; margin-bottom: 12px; }
.acc__btn {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
width: 100%; padding: 20px 24px; background: #fff; border: 0; text-align: left;
font-size: 1.02rem; font-weight: 600; color: var(--ink);
transition: background var(--t-fast);
}
.acc__btn:hover { background: var(--mist); }
.acc__icon {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
background: var(--mist-2); color: var(--brand);
display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
transition: transform var(--t), background var(--t-fast);
}
.acc__btn[aria-expanded="true"] { background: var(--mist); }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); background: var(--brand); color: #fff; }
.acc__panel { display: none; padding: 4px 24px 24px; border-top: 1px solid var(--line); }
.acc__panel.is-open { display: block; animation: fadeUp .3s var(--ease); }
.acc__panel p { color: var(--text-soft); font-size: .97rem; }
.acc__panel ul li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--text-soft); font-size: .95rem; }
.acc__panel ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* Selection color */
::selection { background: #ede9fe; color: #23295f; }
::-moz-selection { background: #ede9fe; color: #23295f; }
/* Tooltip / spill pills (touch friendly — JS toggles .is-open) */
.spill { position: relative; display: inline-block; }
.spill__trigger {
border: 1px solid var(--line-strong); background: var(--mist);
color: var(--brand); padding: 7px 15px; border-radius: var(--r-pill);
font-size: .84rem; font-weight: 600;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.spill__trigger:hover, .spill.is-open .spill__trigger { background: var(--brand); border-color: var(--brand); color: #fff; }
.spill__tip {
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
width: max-content; max-width: 280px; z-index: 30;
background: #ede9fe; color: #23295f; padding: 12px 16px;
border: 1px solid #c4b5fd;
border-radius: var(--r-md); font-size: .86rem; line-height: 1.45; font-weight: 500;
box-shadow: 0 10px 25px -5px rgba(76, 29, 149, 0.15), 0 8px 10px -6px rgba(76, 29, 149, 0.1); opacity: 0; visibility: hidden;
transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.spill__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #ede9fe; }
.spill.is-open .spill__tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.spill--green .spill__trigger { background: var(--green-light); border-color: rgba(21,128,61,.3); color: var(--green-dark); }
.spill--green .spill__trigger:hover, .spill--green.is-open .spill__trigger { background: var(--green); color: #fff; }
.spill--amber .spill__trigger { background: var(--amber-light); border-color: rgba(180,83,9,.3); color: var(--amber); }
.spill--amber.is-open .spill__trigger { background: var(--amber); color: #fff; }
/* Service row card (Services page) */
.service-row {
display: grid; grid-template-columns: 88px 1fr; gap: 24px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 30px; box-shadow: var(--sh-1); margin-bottom: 20px;
transition: box-shadow var(--t), transform var(--t);
}
.service-row:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.service-row__badge {
width: 88px; height: 88px; border-radius: var(--r-md);
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border: 1px solid rgba(99, 102, 241, 0.15);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
box-shadow: 0 4px 12px rgba(35, 41, 95, 0.05);
flex-shrink: 0;
padding: 8px;
}
.service-row__badge img { width: 32px; height: auto; display: block; }
.service-row__badge .ic { width: 20px; height: 20px; color: var(--brand); }
.service-row__icon { width: 88px; height: 88px; border-radius: var(--r-md); background: var(--mist-2); display: grid; place-items: center; font-size: 2rem; }
.service-row--green { border-color: rgba(21,128,61,.3); }
.service-row--green .service-row__badge { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: rgba(21,128,61,.2); }
.service-row--green .service-row__badge .ic { color: var(--green-dark); }
.service-row--green h3 { color: var(--green-dark); }
.service-row--urgent { border-color: rgba(180,83,9,.35); background: linear-gradient(180deg,#fffaf0 0%,#fff 55%); }
.service-row--urgent .service-row__badge { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: rgba(180,83,9,.25); }
.service-row--urgent .service-row__badge .ic { color: var(--amber); }
.service-row--amber { border-color: rgba(180,83,9,.35); background: linear-gradient(180deg,#fffaf0 0%,#fff 55%); }
.service-row--amber .service-row__icon { background: var(--amber-light); }
.service-row--amber h3 { color: var(--amber); }
/* Social side banner (fixed to viewport edge) */
.social-side-banner {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 95;
display: flex;
flex-direction: column;
background: rgba(35, 41, 95, 0.94);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-right: none;
border-radius: 12px 0 0 12px;
box-shadow: 0 10px 30px rgba(19, 22, 47, 0.25);
overflow: hidden;
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.social-side-banner:hover {
transform: translateY(-50%) translateX(-2px);
box-shadow: 0 12px 36px rgba(19, 22, 47, 0.35);
}
.social-side-banner__link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #fff;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
text-decoration: none;
position: relative;
}
.social-side-banner__link:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.social-side-banner__link--yt:hover {
background: #ff0000;
color: #fff;
}
.social-side-banner__link--li:hover {
background: #0077b5;
color: #fff;
}
.social-side-banner__link svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.social-side-banner__divider {
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 0 6px;
}
/* Live Care Tracker */
.live-tracker {
background: linear-gradient(135deg, #23295f 0%, #151a3d 100%);
border-radius: var(--r-xl);
padding: 36px 40px;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: var(--sh-4);
position: relative;
overflow: hidden;
}
.live-tracker::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(42, 167, 154, 0.25) 0%, transparent 70%);
pointer-events: none;
}
.live-tracker__header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-bottom: 18px;
}
.live-tracker__title {
margin: 0;
font-size: 1.5rem;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.live-tracker__status {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(34, 197, 94, 0.16);
border: 1px solid rgba(34, 197, 94, 0.35);
padding: 6px 14px;
border-radius: var(--r-pill);
font-size: 0.8rem;
font-weight: 700;
color: #4ade80;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.live-tracker__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.live-tracker__item {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--r-lg);
padding: 22px;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform var(--t), background var(--t);
}
.live-tracker__item:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.11);
}
.live-tracker__val {
font-family: "Libre Baskerville", Georgia, serif;
font-size: 2.1rem;
font-weight: 700;
color: #7fd8ce;
line-height: 1.1;
}
.live-tracker__lbl {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
}
.live-tracker__sub {
font-size: 0.84rem;
color: var(--on-dark-soft);
line-height: 1.45;
}
/* Header CQC Slot - Official compact badge with interactive widget popover */
.header-cqc-slot {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.cqc-pill-trigger {
display: inline-flex;
align-items: center;
gap: 7px;
background: #f0fdf4;
border: 1px solid rgba(22, 163, 74, 0.3);
padding: 5px 12px 5px 9px;
border-radius: var(--r-pill);
text-decoration: none;
color: #166534;
font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.82rem;
font-weight: 600;
transition: all var(--t-fast);
cursor: pointer;
white-space: nowrap;
}
.cqc-pill-trigger:hover {
background: #dcfce7;
border-color: rgba(22, 163, 74, 0.55);
color: #14532d;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(22, 163, 74, 0.15);
}
.cqc-pill-logo {
width: 20px;
height: 20px;
object-fit: contain;
display: block;
}
.cqc-pill-text strong {
font-weight: 800;
color: #14532d;
}
.cqc-pill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
display: inline-block;
}
/* Dropdown popover containing official live CQC widget */
.cqc-dropdown-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1000;
background: #fff;
border-radius: var(--r-lg);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
border: 1px solid var(--line);
padding: 10px;
min-width: 230px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
pointer-events: none;
}
.header-cqc-slot:hover .cqc-dropdown-panel,
.header-cqc-slot:focus-within .cqc-dropdown-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Triangle arrow pointing to pill */
.cqc-dropdown-panel::before {
content: "";
position: absolute;
top: -6px;
right: 28px;
width: 12px;
height: 12px;
background: #fff;
border-left: 1px solid var(--line);
border-top: 1px solid var(--line);
transform: rotate(45deg);
}
/* Clean up widget appearance inside dropdown */
.cqc-dropdown-panel div.cqc-widget {
box-shadow: none !important;
border: none !important;
margin: 0 !important;
border-radius: var(--r-md) !important;
}
/* Mobile drawer adaptation */
.nav__mobile-actions .cqc-dropdown-panel {
display: none !important;
}
/* Coverage region panels */
.region { border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line); background: #fff; border-top: 5px solid var(--rc, var(--accent)); }
.region h3 { color: var(--rc, var(--ink)); display: flex; align-items: center; gap: 10px; }
.region__count { font-family: "Source Sans 3", sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.loc {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 500;
background: color-mix(in srgb, var(--rc) 10%, #fff); color: var(--rc);
border: 1px solid color-mix(in srgb, var(--rc) 26%, #fff);
transition: background var(--t-fast), transform var(--t-fast);
}
.loc:hover { background: color-mix(in srgb, var(--rc) 18%, #fff); transform: translateY(-2px); }
.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.map-embed iframe { display: block; width: 100%; height: 460px; border: 0; }
/* Team */
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; text-align: center; box-shadow: var(--sh-1); }
.team-card__avatar {
width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 18px;
background: var(--grad-btn); display: grid; place-items: center; font-size: 2.2rem; color: #fff;
}
.team-card__role { color: var(--accent); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.placeholder-tag { display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--amber-light); color: var(--amber); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Case study */
.case { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; margin-bottom: 20px; box-shadow: var(--sh-1); }
.case__full { display: none; }
.case__full.is-open { display: block; animation: fadeUp .35s var(--ease); }
.pullquote {
margin: 22px 0; padding: 20px 26px; border-left: 4px solid var(--accent);
background: var(--mist); border-radius: 0 var(--r-md) var(--r-md) 0;
font-family: "Libre Baskerville", Georgia, serif; font-size: 1.1rem; font-style: italic;
font-weight: 400; color: var(--ink); line-height: 1.6;
}
/* Commissioner card */
.comm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; box-shadow: var(--sh-1); transition: box-shadow var(--t), transform var(--t); }
.comm-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.comm-card__num { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.2rem; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.comm-card ul { margin-bottom: 16px; }
.comm-card ul li { font-size: .89rem; color: var(--text-soft); padding-left: 18px; position: relative; margin-bottom: 5px; }
.comm-card ul li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--mist-3); }
.comm-card .card__more { margin-top: auto; }
/* Training */
.training-intro { background: var(--grad-wash); border: 1px solid var(--mist-3); border-radius: var(--r-xl); padding: 40px; }
.training-panel { background: var(--grad-hero); border-radius: var(--r-xl); padding: 48px; color: #fff; box-shadow: var(--sh-4); }
.training-card { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: 26px; transition: background var(--t), transform var(--t); }
.training-card:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
.training-card h4 { color: #fff; font-size: 1.05rem; margin-bottom: 10px; }
.training-card p { color: var(--on-dark-soft); font-size: .92rem; margin: 0; }
.training-card__n { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.3rem; color: #7fd8ce; line-height: 1; display: block; margin-bottom: 12px; }
.refresher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.refresher { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); font-size: .91rem; font-weight: 500; }
.refresher span[aria-hidden] { color: var(--green); font-weight: 700; }
/* Family portal banner */
.portal { background: linear-gradient(135deg, #e8eef0 0%, #d7f0ec 100%); border-radius: var(--r-xl); padding: 40px; border: 1px solid var(--mist-3); }
/* 11. FORMS =============================================================== */
.form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 34px; box-shadow: var(--sh-2); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .req { color: var(--amber); }
.field input, .field select, .field textarea {
width: 100%; padding: 13px 16px; font: inherit; font-size: .97rem;
border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
background: #fff; color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(15, 118, 110, .16);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__note { font-size: .84rem; color: var(--text-mute); margin-top: 14px; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; color: var(--text-soft); }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.contact-line { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line__icon { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--mist-2); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.contact-line__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.contact-line__value { font-size: 1.06rem; font-weight: 600; color: var(--ink); }
/* 12. FOOTER ============================================================== */
.footer { background: var(--ink-deep); color: rgba(255,255,255,.72); padding: 66px 0 0; font-size: .93rem; }
.footer h4 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; }
/* The brand lockup is purple and navy on white, so on the dark footer it is
presented on a white plaque rather than recoloured. */
.footer__plaque {
display: inline-block; background: #fff; border-radius: var(--r-lg);
padding: 20px 26px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.footer__lockup { width: 190px; height: auto; }
/* The one place the old purple survives: the tagline sits directly beneath
the logo artwork, so it takes the logo's own colour rather than the teal. */
.brand__tag { color: var(--logo-purple); }
.footer__tag { color: #b79fd0; }
.footer__phone { display: inline-block; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.45rem; color: #fff; margin: 18px 0 6px; }
.footer__links li { margin-bottom: 9px; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer__badge { padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .74rem; }
.footer__bottom {
border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0 28px;
display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between;
font-size: .84rem; color: rgba(255,255,255,.5);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
/* 13. FLOATING WIDGETS ==================================================== */
.floaters { position: fixed; left: 22px; bottom: calc(22px + var(--cookie-h, 0px)); z-index: 320; display: flex; flex-direction: column-reverse; gap: 14px; align-items: flex-start; }
.fab {
width: 58px; height: 58px; border-radius: 50%; border: 0;
display: grid; place-items: center; box-shadow: var(--sh-3);
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fab:hover { transform: scale(1.08); box-shadow: var(--sh-4); }
.fab--whatsapp { background: #25d366; color: #fff; }
/* The HaiLL badge artwork carries its own dark navy field, so the button is
coloured to match it instead of being tinted green. */
.fab--haill { background: #051226; color: #fff; position: relative; overflow: visible; padding: 0; }
.fab svg { width: 30px; height: 30px; }
.fab__logo { width: 38px; height: auto; border-radius: 50%; }
.new-badge {
position: absolute; top: -15px; right: -28px; z-index: 2;
padding: 4px 11px; border-radius: var(--r-pill);
background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
color: #422006; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
box-shadow: 0 4px 14px rgba(245, 158, 11, .6);
border: 2px solid #fff; overflow: hidden; pointer-events: none;
animation: newBounce 1.5s var(--ease) infinite;
}
.new-badge::after {
content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent);
animation: newShine 2.4s ease-in-out infinite;
}
@keyframes newBounce {
0%, 100% { transform: scale(1) rotate(-6deg); }
30% { transform: scale(1.22) rotate(5deg); }
55% { transform: scale(.97) rotate(-3deg); }
75% { transform: scale(1.08) rotate(2deg); }
}
@keyframes newShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.modal { position: fixed; inset: 0; z-index: 500; display: none; }
.modal.is-open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(16,18,41,.62); backdrop-filter: blur(4px); animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal__box {
position: relative; z-index: 1; width: min(460px, calc(100% - 40px));
margin: 12vh auto 0; background: #fff; border-radius: var(--r-xl);
overflow: hidden; box-shadow: var(--sh-4); animation: modalIn .32s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.modal__header { background: linear-gradient(135deg, #064e3b 0%, #0f766e 55%, #15803d 100%); color: #fff; padding: 26px 28px; position: relative; }
.modal__header h3 { color: #fff; font-size: 1.5rem; margin: 0; }
.modal__tagline { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-top: 6px; font-weight: 600; }
.modal__close {
position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff;
font-size: 1.1rem; line-height: 1; display: grid; place-items: center; transition: background var(--t-fast);
}
.modal__close:hover { background: rgba(255,255,255,.34); }
.modal__body { padding: 28px; }
.modal__body p { font-size: 1.05rem; color: var(--text); }
.modal__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.haill-logo { width: 52px; height: 52px; border-radius: 14px; background: #051226; display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; }
.haill-logo img { width: 40px; height: auto; }
.cookies {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
background: #fff; border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 30px rgba(23,32,71,.13);
padding: 20px 0; display: none;
}
.cookies.is-shown { display: block; animation: fadeUp .4s var(--ease); }
.cookies__inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cookies__text { flex: 1 1 380px; font-size: .9rem; color: var(--text-soft); }
.cookies__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Stacked above the HaiLL button, which now sits on the same baseline as the
assistant in the opposite corner. */
.to-top {
position: fixed; right: 22px; bottom: calc(94px + var(--cookie-h, 0px)); z-index: 300;
width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-strong);
background: #fff; color: var(--brand); box-shadow: var(--sh-2);
display: grid; place-items: center; font-size: 1.15rem;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
/* 14. SCROLL REVEAL ======================================================= */
/* Failsafe: only .js-on (set by main.js) hides content. If JS fails to load
or IntersectionObserver is unavailable, everything stays fully visible. */
.js-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-on .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js-on .reveal { opacity: 1 !important; transform: none !important; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* 15. RESPONSIVE ========================================================== */
/* Progressive shedding of header extras before the mobile menu kicks in.
The phone number now outlives the CQC badge: the rating is already stated
in the ticker directly above and again in the hero, whereas the number is
the thing a worried family actually needs to hand. Both reappear in the
mobile menu, so nothing is lost on a phone.
Re-measured after the Libre Baskerville / Source Sans 3 switch, which made
the bar narrower: brand 303 + nav 572 + button 124, plus padding and gaps,
needs 1107px. Adding the phone needs 1225px; adding the badge too needs
1343px. These breakpoints follow those numbers, not round guesses — if the
fonts or nav labels change again, re-measure before touching them. */
@media (max-width: 1360px) { .header__actions .badge-cqc { display: none; } }
@media (max-width: 1240px) { .header__phone { display: none; } }
@media (max-width: 1140px) {
.ticker { display: none; }
.nav, .header__actions { display: none; }
.nav-toggle { display: flex; }
/* A 150px bar would swallow a phone screen, so the same shrink happens
between two smaller sizes here. */
.header { --h: 100px; --mark: 56px; --name: 1.2rem; --tag: .55rem; }
.header.is-scrolled { --h: 74px; --mark: 42px; --name: 1rem; --tag: .5rem; }
.nav.is-open {
display: block; position: absolute; left: 0; right: 0; top: 100%;
background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-3);
padding: 14px var(--gut) 22px; max-height: calc(100vh - var(--h)); overflow-y: auto;
}
.nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
.nav.is-open .nav__item { display: block; position: static; }
.nav.is-open .nav__link { padding: 13px 14px; font-size: 1.02rem; }
.nav.is-open .nav__mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Submenus become plain accordions — no hover, no floating panel. */
.nav.is-open .nav__item--menu { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.nav.is-open .nav__caret { width: 44px; height: 44px; margin: 0; font-size: .9rem; }
.nav.is-open .nav__sub {
grid-column: 1 / -1;
position: static; min-width: 0; margin: 0 0 6px; padding: 2px 0 6px 14px;
border: 0; border-left: 2px solid var(--mist-3); border-radius: 0;
box-shadow: none; background: transparent;
display: none; opacity: 1; visibility: visible; transform: none;
}
.nav.is-open .nav__sub.is-open { display: block; }
.nav.is-open .nav__item--menu:hover .nav__sub,
.nav.is-open .nav__item--menu:focus-within .nav__sub { display: none; }
.nav.is-open .nav__item--menu:hover .nav__sub.is-open,
.nav.is-open .nav__item--menu:focus-within .nav__sub.is-open { display: block; }
.nav.is-open .nav__sublink { padding: 12px 14px; font-size: .98rem; }
.header { position: sticky; }
.header__inner { gap: 12px; position: relative; }
.hero__inner { grid-template-columns: 1fr; gap: 40px; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.nav__mobile-actions { display: none; }
/* Below desktop, anchor tooltips to the pill row rather than to each pill,
so a tooltip on a right-hand pill cannot hang off the viewport edge. */
@media (max-width: 1300px) {
.pill-row { position: relative; }
.spill { position: static; }
.spill__tip { left: 0; right: 0; width: auto; max-width: none; transform: translateY(4px); }
.spill.is-open .spill__tip { transform: translateY(0); }
.spill__tip::after { display: none; }
}
@media (max-width: 780px) {
body { font-size: 16px; }
.section { padding: 60px 0; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.service-row { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
.service-row__icon { width: 60px; height: 60px; font-size: 1.6rem; }
.training-panel, .training-intro, .portal { padding: 28px; }
.quiz, .postcode, .form { padding: 24px; }
.footer__grid { grid-template-columns: 1fr; gap: 32px; }
.floaters { left: 16px; bottom: calc(16px + var(--cookie-h, 0px)); }
.to-top { right: 16px; bottom: calc(88px + var(--cookie-h, 0px)); }
.btn { width: 100%; }
.btn-row { flex-direction: column; }
.btn-row .btn { width: 100%; }
.modal__box { margin-top: 8vh; }
}
@media print {
.header, .ticker, .floaters, .cookies, .to-top, .modal { display: none !important; }
body { font-size: 12pt; }
.js-on .reveal { opacity: 1 !important; transform: none !important; }
}
/* Training page banner — navy, distinguishing it from the care pages */
.page-hero--training { background: linear-gradient(135deg, #101229 0%, #23295f 55%, #2f3a7a 100%); }
/* ---- coming soon panel (training.html) ---- */
.coming-soon {
background: #fff; border: 1px dashed var(--line-strong);
border-radius: var(--r-xl); padding: 44px; text-align: center;
box-shadow: var(--sh-1);
}
.coming-soon__tag {
display: inline-block; margin-bottom: 16px; padding: 7px 18px;
border-radius: var(--r-pill); background: var(--mist-2); color: var(--brand);
font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.coming-soon h2 { margin-bottom: 14px; }
.coming-soon__list {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px;
}
.coming-soon__item {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 18px; border-radius: var(--r-pill);
background: var(--mist); border: 1px solid var(--line);
font-size: .89rem; font-weight: 500; color: var(--text-soft);
}
@media (max-width: 780px) { .coming-soon { padding: 28px 22px; } }
/* ==========================================================================
16. FAQ EXTRAS
========================================================================== */
/* Funding routes: each carries a link out to the relevant support page.
The destinations are still to be supplied, so they are marked rather than
left looking live — remove .is-placeholder once the real hrefs land. */
.funding-list li { margin-bottom: 18px; }
.funding-link {
display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
font-size: .9rem; font-weight: 600; color: var(--accent-dark);
transition: gap var(--t-fast), color var(--t-fast);
}
.funding-link:hover { gap: 12px; color: var(--accent-bright); }
.funding-link.is-placeholder::after {
content: "placeholder";
padding: 2px 8px; border-radius: var(--r-pill);
background: var(--amber-light); color: var(--amber);
font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* The out-of-hours number, given its own weight inside the answer */
.contact-callout {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 18px 0; padding: 16px 22px;
background: var(--mist); border: 1px solid var(--line);
border-left: 4px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.contact-callout__label {
font-size: .68rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--text-mute);
}
.contact-callout__number {
font-family: "Libre Baskerville", Georgia, serif;
font-size: 1.3rem; color: var(--brand); letter-spacing: .01em;
}
.contact-callout__number:hover { color: var(--accent-dark); }
/* The out-of-hours line, sitting under the main number in the footer */
.footer__ooh { font-size: .92rem; color: rgba(255, 255, 255, .6); margin: 0 0 6px; }
.footer__ooh a { color: rgba(255, 255, 255, .88); font-weight: 600; }
.footer__ooh a:hover { color: #fff; }
/* ==========================================================================
17. REQUEST CARE — attention glow
--------------------------------------------------------------------------
A slow breath on the shadow rather than a flash. 3.2s is deliberately
longer than a nervous pulse: the eye registers movement in peripheral
vision without the button nagging at someone who is already reading.
The glow sits on a ::after layer so it cannot inflate the button's box or
interfere with the hover lift.
========================================================================== */
.btn--attention { position: relative; isolation: isolate; }
.btn--attention::after {
content: ""; position: absolute; inset: -3px; z-index: -1;
border-radius: inherit; pointer-events: none;
box-shadow: 0 0 0 0 rgba(13, 148, 136, .55);
animation: requestGlow 3.2s var(--ease) infinite;
}
@keyframes requestGlow {
0% { box-shadow: 0 0 0 0 rgba(13, 148, 136, .5), 0 0 14px 2px rgba(13, 148, 136, .28); }
45% { box-shadow: 0 0 0 9px rgba(13, 148, 136, 0), 0 0 26px 7px rgba(13, 148, 136, .42); }
70%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0), 0 0 14px 2px rgba(13, 148, 136, .16); }
}
/* Once someone is on it, the glow has done its job and gets out of the way */
.btn--attention:hover::after,
.btn--attention:focus-visible::after { animation: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.btn--attention::after {
animation: none;
box-shadow: 0 0 16px 3px rgba(13, 148, 136, .3);
}
}
/* ==========================================================================
18. CQC RATING LINKS
The rating now points at the verified CQC location report, so anywhere it
is stated it also behaves like a link.
========================================================================== */
a.badge-cqc { text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
a.badge-cqc:hover { background: #c9f4da; border-color: rgba(21,128,61,.4); color: var(--green-dark); transform: translateY(-1px); }
.footer__badge--link { transition: background var(--t-fast), color var(--t-fast); }
.footer__badge--link:hover { background: rgba(255,255,255,.18); color: #fff; }
.trustbar__item--link { color: var(--text-soft); transition: color var(--t-fast); }
.trustbar__item--link:hover { color: var(--accent-dark); }
a.hero__badge { text-decoration: none; }
a.hero__badge:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.42); color: #fff; }
a.stat-card--link { display: block; text-decoration: none; transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
a.stat-card--link:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
a.stat-card--link:hover .stat-card__label { color: var(--accent-dark); }
/* ==========================================================================
19. CARE JOURNEY STEPPER
--------------------------------------------------------------------------
Every step is in the HTML and visible by default. main.js adds .is-stepper,
and only then does the panel collapse to one step and the controls appear.
That ordering is deliberate: a reader whose JavaScript fails gets all five
steps stacked rather than a dead widget showing one.
========================================================================== */
.journey {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
box-shadow: var(--sh-2); overflow: hidden;
max-width: 940px; margin: 0 auto;
}
.journey__steps { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.journey__step {
display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 38px; align-items: center;
padding: 42px 48px;
}
/* Stacked fallback: a rule between steps so they read as a sequence */
.journey__step + .journey__step { border-top: 1px solid var(--line); }
/* ---- the numbered marker ---- */
.journey__marker {
position: relative; width: 150px; height: 150px; border-radius: 50%;
display: grid; place-items: center; justify-self: center;
background: linear-gradient(145deg, var(--sc-a) 0%, var(--sc-b) 100%);
color: var(--sc-ink);
box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--sc-b) 70%, transparent);
}
.journey__icon { font-size: 2.6rem; line-height: 1; }
.journey__num {
position: absolute; bottom: 26px;
font-family: "Source Sans 3", sans-serif;
font-size: .68rem; font-weight: 700; letter-spacing: .18em;
opacity: .9;
}
/* ---- the copy ---- */
.journey__eyebrow {
font-size: .72rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.journey__title { margin: 0 0 12px; }
.journey__desc { color: var(--text-soft); margin: 0 0 18px; max-width: 64ch; }
.journey__when {
display: inline-block; padding: 7px 16px; border-radius: var(--r-pill);
background: var(--mist-2); color: var(--brand);
font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
/* ---- once JavaScript takes over ---- */
.journey.is-stepper .journey__step { display: none; border-top: 0; }
.journey.is-stepper .journey__step.is-current { display: grid; animation: stepIn .42s var(--ease); }
@keyframes stepIn {
from { opacity: 0; transform: translateX(14px); }
to { opacity: 1; transform: none; }
}
.journey.is-stepper .journey__step.is-back { animation: stepInBack .42s var(--ease); }
@keyframes stepInBack {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: none; }
}
/* ---- controls ---- */
.journey__controls {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 20px 44px; border-top: 1px solid var(--line); background: var(--mist);
}
.journey__arrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px; border-radius: var(--r-pill);
border: 1.5px solid var(--line-strong); background: #fff; color: var(--brand);
font-size: .92rem; font-weight: 600;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.journey__arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); transform: translateY(-1px); }
.journey__arrow:disabled { opacity: .35; cursor: default; }
.journey__arrow--next { background: var(--brand); border-color: var(--brand); color: #fff; position: relative; }
.journey__arrow--next:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
/* The prompt: a slow ring on the Next button, inviting the first click.
It is removed the moment the visitor engages — see initJourney() — so it
nudges once rather than nagging for the whole visit. */
.journey__arrow--next.is-prompting::after {
content: ""; position: absolute; inset: -3px; border-radius: inherit;
pointer-events: none;
animation: journeyPrompt 2.6s var(--ease) infinite;
}
@keyframes journeyPrompt {
0% { box-shadow: 0 0 0 0 rgba(13,148,136,.5), 0 0 12px 2px rgba(13,148,136,.25); }
50% { box-shadow: 0 0 0 8px rgba(13,148,136,0), 0 0 22px 6px rgba(13,148,136,.36); }
75%, 100% { box-shadow: 0 0 0 0 rgba(13,148,136,0), 0 0 12px 2px rgba(13,148,136,.12); }
}
/* ---- progress dots (also a way to jump) ---- */
.journey__dots { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.journey__dot {
width: 34px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill);
background: var(--mist-3); cursor: pointer;
transition: background var(--t-fast), width var(--t-fast);
}
.journey__dot:hover { background: var(--accent-bright); }
.journey__dot.is-current { background: var(--brand); width: 46px; }
.journey__dot.is-done { background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
.journey.is-stepper .journey__step.is-current,
.journey.is-stepper .journey__step.is-back { animation: none; }
.journey__arrow--next.is-prompting::after { animation: none; box-shadow: 0 0 14px 3px rgba(13,148,136,.28); }
}
@media (max-width: 860px) {
.journey__step { grid-template-columns: 1fr; gap: 22px; padding: 30px 24px; text-align: center; }
.journey__marker { width: 112px; height: 112px; }
.journey__icon { font-size: 2rem; }
.journey__num { bottom: 18px; }
.journey__desc { margin-inline: auto; }
.journey__controls { padding: 16px 20px; gap: 12px; }
.journey__arrow { padding: 11px 16px; font-size: .86rem; }
.journey__next-label { display: none; }
.journey__dot { width: 24px; }
.journey__dot.is-current { width: 34px; }
}
/* ==========================================================================
20. RAPID RESPONSE — the "urgent" treatment
--------------------------------------------------------------------------
Rapid Response used to be amber. The client moved it onto the same navy as
the Request care button so the two primary calls to action read as one
family. Amber is still in the palette for the funding placeholders and the
Stories case tags, so these are separate `--urgent` variants rather than a
redefinition of `--amber`.
Note the trade: hue is no longer doing the work of signalling urgency, so
emphasis does it instead — the same glow the Request care button carries.
========================================================================== */
/* Card on the homepage services grid */
.card--urgent {
border-color: rgba(35, 41, 95, .3);
background: linear-gradient(180deg, #f3f5fb 0%, #fff 62%);
}
.card--urgent .card__icon { background: #e4e8f4; }
.card--urgent h3 { color: var(--brand); }
.card--urgent .card__more { color: var(--brand); }
/* Full-width row on the Care page */
.service-row--urgent {
border-color: rgba(35, 41, 95, .32);
background: linear-gradient(180deg, #f3f5fb 0%, #fff 55%);
}
.service-row--urgent .service-row__icon { background: #e4e8f4; }
.service-row--urgent h3 { color: var(--brand); }
/* The "Need care urgently?" callouts */
.callout--urgent { border-left-color: var(--brand); background: #f3f5fb; }
/* Buttons and pills */
.btn--urgent { background: var(--brand); color: #fff; }
.btn--urgent:hover { background: var(--brand-dark); color: #fff; }
.pill--urgent { background: #e4e8f4; color: var(--brand); }
.spill--urgent .spill__trigger {
background: #eef1f8; border-color: rgba(35, 41, 95, .28); color: var(--brand);
}
.spill--urgent .spill__trigger:hover,
.spill--urgent.is-open .spill__trigger { background: var(--brand); color: #fff; }
/* Two numbers side by side in the FAQ callout */
.contact-callout__numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
@media (max-width: 560px) {
.contact-callout { flex-direction: column; align-items: flex-start; gap: 8px; }
.contact-callout__numbers { flex-direction: column; align-items: flex-start; gap: 4px; }
}
/* ==========================================================================
21. ICONS
--------------------------------------------------------------------------
Replaced the emoji iconography in Aug 2026. One monoline sprite, inheriting
currentColor, so an icon always matches the text it sits beside — including
inside coloured panels and on dark grounds.
========================================================================== */
.ic {
width: 1.25em; height: 1.25em;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
vertical-align: -0.18em;
}
.ic--lg { width: 2.1rem; height: 2.1rem; stroke-width: 1.4; }
/* Card icons: brand-tinted plate rather than a bare glyph. */
.card__icon .ic { width: 1.7rem; height: 1.7rem; stroke-width: 1.5; }
/* Hero stat marks — the Skillcare logo, per client request. */
.glass-stat__mark {
width: 34px; height: 28px;
object-fit: contain;
flex: none;
margin-top: 2px;
opacity: .92;
}
/* Quiz options: icon sits in a soft brand plate, not floating loose. */
.quiz__opt .ic { width: 1.5rem; height: 1.5rem; color: var(--accent-dark); }
/* Journey step icons keep their circular plate; only the glyph changed. */
.journey__icon .ic { width: 1.6rem; height: 1.6rem; }
/* Backdrop slot — an image is being supplied by the client. Until it lands
the section keeps its gradient, so nothing looks broken in the meantime. */
.has-backdrop { position: relative; isolation: isolate; }
.has-backdrop__img {
position: absolute; inset: 0; z-index: -1;
width: 100%; height: 100%; object-fit: cover;
opacity: .16;
}
/* Story cards carry the Skillcare mark, top right — client request Aug 2026.
Positioned so it never collides with the star row on the left. */
.quote-card { position: relative; }
.quote-card__brand {
position: absolute;
top: 16px; right: 16px;
width: 30px; height: 25px;
object-fit: contain;
opacity: .5;
pointer-events: none;
}
.quote-card blockquote { position: relative; }
@media (max-width: 480px) { .quote-card__brand { width: 24px; height: 20px; } }
/* Sized icon slots that previously held emoji at font-size. */
.service-row__icon .ic { width: 1.9rem; height: 1.9rem; }
.team-card__avatar .ic { width: 2.2rem; height: 2.2rem; }
.stat-card .ic, .comm-card .ic { width: 1.15em; height: 1.15em; }
/* ==========================================================================
22. ASSISTANT (DEMO)
--------------------------------------------------------------------------
One launcher replaces three floating buttons. WhatsApp and HaiLL are folded
into the panel footer — .is-folded hides their old FABs but keeps the markup,
so reverting is a one-line CSS change if the client wants them back out.
========================================================================== */
/* WhatsApp is folded into the assistant panel rather than sitting as its own
floating button. Markup kept, so restoring it is deleting this rule. */
.fab--whatsapp.is-folded { display: none; }
/* HaiLL keeps its own button, in the opposite corner from the assistant, and
stacked above the back-to-top control so the two never collide. */
.floaters--right {
left: auto; right: 22px;
bottom: calc(22px + var(--cookie-h, 0px)); /* level with the assistant */
align-items: flex-end;
}
/* Breakpoint deliberately matches the left-hand .floaters rule (780px).
When these two diverged the corners sat 6px out of line between 640 and 780. */
@media (max-width: 780px) {
.floaters--right { right: 16px; bottom: calc(16px + var(--cookie-h, 0px)); }
}
/* WhatsApp hand-off inside the assistant — a real action, not a footer link. */
.assist__wa {
display: flex; align-items: center; gap: 9px;
margin: 0 16px 10px;
padding: 8px 12px;
border: 1px solid #bfe8cb;
border-radius: 12px;
background: #f1fbf4;
color: #14663a;
font: 600 .82rem var(--sans);
text-decoration: none;
transition: background .15s ease, border-color .15s ease;
}
.assist__wa:hover { background: #e4f6ea; border-color: #8ed4a6; }
.assist__wa svg { width: 17px; height: 17px; flex: none; color: #25963f; }
.assist__chips { max-height: 96px; overflow-y: auto; }
.fab--assist {
display: inline-flex; align-items: center; gap: 9px;
width: auto; height: 58px; /* matches .fab, so it lines up with HaiLL */
padding: 0 22px 0 18px;
border: 0; border-radius: 999px;
background: var(--brand); color: #fff;
font: 600 .95rem/1 var(--sans);
cursor: pointer;
box-shadow: 0 10px 26px rgba(23,32,71,.28);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fab--assist:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(23,32,71,.34); }
.fab--assist:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.fab__ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fab--assist[aria-expanded="true"] { background: var(--brand-dark); }
/* ---- panel */
/* The launcher lives bottom-LEFT with the other floaters, so the panel opens
from the same corner. z-index sits above the cookie bar (300) — otherwise a
first-time visitor cannot reach the assistant until they dismiss cookies.
--cookie-h is set by main.js while the banner is showing. */
.assist {
position: fixed; left: 22px; bottom: calc(92px + var(--cookie-h, 0px)); z-index: 320;
width: min(370px, calc(100vw - 32px));
max-height: min(620px, calc(100vh - 130px));
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--mist-3);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(16,18,41,.26);
overflow: hidden;
animation: assistIn .22s ease both;
}
@keyframes assistIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .assist { animation: none; } }
.assist__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 16px 13px;
background: var(--grad-hero); color: #fff;
}
.assist__head h3 { margin: 0; font-size: 1.02rem; color: #fff; }
.assist__sub { margin: 3px 0 0; font-size: .78rem; opacity: .82; }
.assist__close {
border: 0; background: rgba(255,255,255,.14); color: #fff;
width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: .8rem; line-height: 1;
}
.assist__close:hover { background: rgba(255,255,255,.26); }
.assist__demo {
margin: 0; padding: 8px 16px;
background: #fef3c7; color: #78350f;
font-size: .74rem; font-weight: 600;
border-bottom: 1px solid #fde68a;
}
.assist__log { flex: 1 1 auto; min-height: 190px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.assist__msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.5; }
.assist__msg a { color: inherit; text-decoration: underline; }
.assist__msg--bot { align-self: flex-start; background: var(--mist-2); color: var(--ink); border-bottom-left-radius: 5px; }
.assist__msg--user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.assist__msg--alert {
align-self: stretch; max-width: 100%;
background: #fff4ed; border: 1px solid #f4c9a8; color: #7c2d12;
}
.assist__msg--alert strong { color: #7c2d12; }
.assist__msg--alert a { color: #7c2d12; font-weight: 700; }
.assist__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.assist__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--mist-3); animation: assistDot 1.1s infinite; }
.assist__typing span:nth-child(2) { animation-delay: .18s; }
.assist__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes assistDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .assist__typing span { animation: none; opacity: .6; } }
.assist__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.assist__chip {
border: 1px solid var(--mist-3); background: #fff; color: var(--accent-dark);
border-radius: 999px; padding: 7px 13px; font: 600 .78rem var(--sans); cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.assist__chip:hover { background: var(--mist); border-color: var(--accent); }
.assist__form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--mist-2); }
.assist__form input {
flex: 1; border: 1px solid var(--mist-3); border-radius: 999px;
padding: 10px 15px; font: 400 .88rem var(--sans); color: var(--ink);
}
.assist__form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.assist__send {
border: 0; background: var(--brand); color: #fff;
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
display: grid; place-items: center; flex: none;
}
.assist__send:hover { background: var(--brand-dark); }
.assist__foot {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 10px 16px 12px; border-top: 1px solid var(--mist-2);
background: var(--mist); font-size: .78rem;
}
.assist__foot a, .assist__haill {
color: var(--accent-dark); font-weight: 600; text-decoration: none;
border: 0; background: none; cursor: pointer; font-size: .78rem; padding: 0;
display: inline-flex; align-items: center; gap: 5px;
}
.assist__foot a:hover, .assist__haill:hover { text-decoration: underline; }
.new-badge--sm { position: static; font-size: .58rem; padding: 2px 5px; transform: none; }
@media (max-width: 520px) {
.assist { right: 12px; left: 12px; width: auto; bottom: calc(86px + var(--cookie-h, 0px)); max-height: calc(100vh - 140px - var(--cookie-h, 0px)); }
.fab--assist .fab__label { display: none; }
.fab--assist { width: 58px; padding: 0; justify-content: center; }
}
/* Illustrative case studies on the borough pages. These are scenarios, not
real client feedback — the label must stay until genuine, consented stories
replace them. Accurate marketing is a CQC expectation, not a preference. */
.case-illus { position: relative; }
.case-illus__tag {
display: inline-flex; align-items: center; gap: 6px;
background: #fef3c7; color: #78350f;
border: 1px solid #fde68a; border-radius: 999px;
padding: 4px 11px; font: 700 .68rem/1 var(--sans);
letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 12px;
}
.case-illus blockquote {
margin: 16px 0 0; padding: 14px 18px;
border-left: 3px solid var(--accent);
background: var(--mist); border-radius: 0 10px 10px 0;
font-style: italic; color: var(--ink);
}
.case-illus__meta { display: block; margin-top: 8px; font-style: normal; font-size: .82rem; color: var(--ink-soft, #5a6480); }
/* Borough pills that lead to a page of their own. Visually distinct from the
plain ones so it is obvious which are clickable. */
.loc--link {
text-decoration: none;
border-color: var(--accent);
color: var(--accent-dark);
font-weight: 600;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.loc--link:hover { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
/* ==========================================================================
23. FORM SUCCESS STATE
--------------------------------------------------------------------------
Shown in place of the form once an enquiry is sent. The tick draws itself
rather than appearing, which reads as confirmation rather than decoration.
========================================================================== */
.form-sent {
text-align: center;
padding: 40px 28px;
animation: sentIn .3s ease both;
}
@keyframes sentIn { from { opacity: 0; transform: translateY(8px); } }
.form-sent__tick {
width: 66px; height: 66px;
margin: 0 auto 20px;
display: block;
}
.form-sent__tick circle {
fill: none; stroke: var(--green); stroke-width: 2;
stroke-dasharray: 166; stroke-dashoffset: 166;
animation: tickRing .5s cubic-bezier(.65,0,.45,1) forwards;
}
.form-sent__tick path {
fill: none; stroke: var(--green); stroke-width: 3;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 48; stroke-dashoffset: 48;
animation: tickMark .3s cubic-bezier(.65,0,.45,1) .45s forwards;
}
@keyframes tickRing { to { stroke-dashoffset: 0; } }
@keyframes tickMark { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.form-sent { animation: none; }
.form-sent__tick circle, .form-sent__tick path { animation: none; stroke-dashoffset: 0; }
}
.form-sent h3 { margin: 0 0 10px; font-size: 1.4rem; }
.form-sent__lead { margin: 0 auto 18px; max-width: 46ch; color: var(--ink); }
.form-sent__when {
display: inline-flex; align-items: center; gap: 8px;
background: #eefbf2; border: 1px solid #bfe8cb; color: #14663a;
border-radius: 999px; padding: 9px 18px;
font: 600 .88rem var(--sans);
margin-bottom: 20px;
}
.form-sent__urgent {
max-width: 48ch; margin: 0 auto 18px;
font-size: .9rem; color: var(--ink);
padding: 14px 18px;
background: #fff4ed; border: 1px solid #f4c9a8; border-radius: 12px;
}
.form-sent__urgent a { color: #7c2d12; font-weight: 700; }
/* Delete this block once a real form endpoint replaces the mailto handoff. */
.form-sent__mailto { max-width: 48ch; margin: 0 auto 20px; font-size: .82rem; color: var(--muted, #5a6480); }
.form-sent__again {
background: none; border: 0; padding: 0;
color: var(--accent-dark); font: 600 .88rem var(--sans);
cursor: pointer; text-decoration: underline;
}
/* ==========================================================================
24. LEGAL PAGES
--------------------------------------------------------------------------
Privacy, Terms and Cookies. Set as documents rather than marketing pages:
a branded masthead, generous measure, numbered sections, and a table for
the cookie register. Readability matters more than personality here.
========================================================================== */
.legal-head {
display: flex; align-items: center; gap: 18px;
padding: 0 0 22px;
border-bottom: 2px solid var(--brand);
margin-bottom: 30px;
}
.legal-head__logo { width: 58px; height: auto; flex: none; }
.legal-head__text { min-width: 0; }
.legal-head__org {
display: block; font: 700 .72rem/1 var(--sans);
letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dark);
margin-bottom: 7px;
}
.legal-head h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.05rem); line-height: 1.15; }
.legal-meta { margin: 10px 0 0; font-size: .84rem; color: var(--muted, #5a6480); }
.legal { max-width: 74ch; }
.legal h2 {
font-size: 1.18rem; margin: 38px 0 12px;
padding-top: 18px; border-top: 1px solid var(--mist-2);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.legal h3 { font-size: 1rem; margin: 22px 0 8px; }
.legal p, .legal li { font-size: .95rem; line-height: 1.72; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal__note {
background: var(--mist); border-left: 3px solid var(--accent);
padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 20px 0;
}
.legal__note p:last-child { margin-bottom: 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: .88rem; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--mist-2); vertical-align: top; }
.legal-table th { background: var(--mist-2); font-weight: 700; color: var(--ink); }
.legal-table code { font-size: .84rem; background: var(--mist-2); padding: 2px 6px; border-radius: 4px; }
.legal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
.legal-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.legal-head__logo { width: 48px; }
}
/* ==========================================================================
25. CQC RATINGS WIDGET
--------------------------------------------------------------------------
The official widget served by cqc.org.uk. It renders itself into this
container during parsing, so the