/* ==========================================================================
Aegis Health — homecare launch layer
Added 2026-09-13
WHAT THIS IS FOR
Homecare is the first Aegis service to trade, taking placements from
1 October 2026, well before the 5th Lane centre opens. This file carries
the three pieces of that launch framing:
1. .nav-live the green Now Active pill beside Homecare in the nav
2. .hc-banner the availability banner on the two homecare pages
3. .hc-steps the six step request process
The green is only used to mark availability. It is deliberately not part
of the brand palette, so it reads as a status rather than as decoration,
and #2A7049 clears 5.4:1 on the cream ground and 6:1 as white on green.
WHEN THE LAUNCH IS OVER
Delete this file, the to it in the 17 pages, the .nav-live spans
and the .hc-banner block. The .hc-steps sections should stay, since the
referral pathway is permanent. Move their styles into the page CSS first.
========================================================================== */
:root {
--live-green: #2A7049;
--live-green-deep: #1F5637;
--live-green-soft: #E6F1EA;
}
/* ---- 1. Now Active pill in the navigation --------------------------- */
.nav-live {
display: inline-block;
background: var(--live-green);
color: #FFFFFF;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 100px;
margin-left: 7px;
vertical-align: middle;
white-space: nowrap;
line-height: 1.3;
}
/* The mobile menu stacks, so the pill sits on its own line beside the label
rather than pushing the nav wider. */
@media (max-width: 900px) {
.nav-live { font-size: 0.68rem; padding: 2px 7px; margin-left: 6px; }
}
/* ---- 2. Availability banner ----------------------------------------- */
.hc-banner {
max-width: 900px;
margin: 0 auto;
padding: 28px 60px 0;
}
.hc-banner-inner {
display: flex;
align-items: flex-start;
gap: 18px;
background: var(--live-green-soft);
border: 1px solid rgba(42, 112, 73, 0.28);
border-radius: 14px;
padding: 20px 26px;
}
.hc-banner-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--live-green);
flex-shrink: 0;
margin-top: 7px;
position: relative;
}
.hc-banner-dot::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid rgba(42, 112, 73, 0.45);
}
.hc-banner h2 {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--live-green-deep);
margin: 0 0 8px;
}
.hc-banner p {
font-size: 1rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
font-weight: 400;
}
.hc-banner p + p { margin-top: 10px; }
.hc-banner strong { font-weight: 600; color: var(--charcoal-dark); }
.hc-banner a {
color: var(--live-green-deep);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(42, 112, 73, 0.45);
}
.hc-banner a:hover { border-bottom-color: var(--live-green-deep); }
@media (max-width: 700px) {
.hc-banner { padding: 22px 20px 0; }
.hc-banner-inner { padding: 18px 18px; gap: 14px; }
}
/* The gold variant, for a service that is set up but not yet bookable.
Physiotherapy and Occupational Therapy use this until they open. The
dot loses its pulse ring so it does not read as a live status light. */
.hc-banner-soon .hc-banner-inner {
background: rgba(196, 154, 92, 0.1);
border-color: rgba(138, 99, 41, 0.3);
}
.hc-banner-soon .hc-banner-dot { background: var(--horizon-deep); }
.hc-banner-soon .hc-banner-dot::after { display: none; }
.hc-banner-soon h2 { color: var(--horizon-deep); }
.hc-banner-soon a {
color: var(--horizon-deep);
border-bottom-color: rgba(138, 99, 41, 0.45);
}
.hc-banner-soon a:hover { border-bottom-color: var(--horizon-deep); }
/* ---- 3. The six step request process --------------------------------- */
.hc-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 44px;
}
.hc-step {
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--cream-warm);
border-radius: 12px;
padding: 24px 24px 26px;
}
.hc-step-num {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 500;
color: var(--live-green);
line-height: 1;
display: block;
margin-bottom: 12px;
font-variant-numeric: tabular-nums;
}
.hc-step h3 {
font-family: var(--font-display);
font-size: 1.16rem;
font-weight: 500;
color: var(--charcoal-dark);
margin: 0 0 8px;
line-height: 1.3;
}
.hc-step p {
font-size: 1rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
font-weight: 400;
}
/* On the dark sections the cards need the inverse treatment. */
.services .hc-step,
.cta .hc-step {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(221, 208, 187, 0.22);
}
.services .hc-step h3,
.cta .hc-step h3 { color: var(--cream-light); }
.services .hc-step p,
.cta .hc-step p { color: var(--cream-mid); }
.services .hc-step-num,
.cta .hc-step-num { color: var(--horizon-warm); }
@media (max-width: 900px) { .hc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hc-steps { grid-template-columns: 1fr; gap: 14px; } }
/* ---- 4. How to request, the three routes ----------------------------- */
.hc-routes {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin-top: 34px;
}
.hc-route {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--cream-warm);
border-radius: 100px;
padding: 12px 22px;
font-size: 0.9rem;
color: var(--charcoal-dark);
text-decoration: none;
background: rgba(255, 255, 255, 0.5);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.hc-route:hover { border-color: var(--live-green); transform: translateY(-1px); }
.hc-route svg { width: 17px; height: 17px; stroke: var(--live-green); fill: none; stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) {
.hc-route { transition: none; }
.hc-route:hover { transform: none; }
}
/* ---- 5. Dropdown items that are not live yet ------------------------- */
/* Physiotherapy, Occupational Therapy, Speech & Language Therapy and
Podiatry are listed under Homecare so families can see what is coming,
but they have no pages yet. They are spans rather than links, so nothing
404s and nothing lands in the tab order. Turn each into an
and drop the .dropdown-soon class when its page goes live. */
.dropdown-soon {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 24px;
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
color: var(--charcoal-soft);
opacity: 0.72;
white-space: nowrap;
cursor: default;
}
/* The dropdown is dark on some pages and cream on others, so the muted
colour has to follow its ground. */
.nav-dark .dropdown-soon,
.dropdown-menu[style*="charcoal"] .dropdown-soon {
color: var(--muted-on-dark);
}
.dropdown-soon em {
font-style: normal;
font-size: 0.62rem;
letter-spacing: 0.08em;
padding: 2px 7px;
border-radius: 100px;
border: 1px solid currentColor;
opacity: 0.85;
}
.dropdown-menu .dropdown-first-soon {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid rgba(140, 130, 115, 0.22);
}
/* ---- 6. Three column explainer, physiotherapy and OT ----------------- */
/* The page CSS ships a two column .details-grid. The physio and OT page
sets three ideas side by side (physio, OT, why they are one service),
so it opts in with .details-3 and folds to one column earlier. */
.details-grid.details-3 { grid-template-columns: repeat(3, 1fr); gap: 48px; }
@media (max-width: 1040px) { .details-grid.details-3 { grid-template-columns: 1fr; gap: 44px; } }
/* ---- 7. Cognitive OT block, reversed layout -------------------------- */
/* The cognitive occupational therapy block puts the photograph on the left
so it alternates with the block above it. Once responsive.css collapses
inline grids to one column, that would leave the image ahead of its own
heading, so the image is pushed below the copy on a phone. */
@media (max-width: 700px) {
.ot-cog .ot-cog-img { order: 2; }
}