/* ============================================================
INARO — design system v13 "cobalt + yellow, flat, HireUp-aligned"
Cobalt blue + sunshine yellow accent on pale blue-white · Manrope only · no gradients
┌──────────────────────────────────────────────────────────┐
│ TO RE-BRAND THE WHOLE SITE, EDIT ONLY THE :root BLOCK │
│ BELOW (the "BRAND CONTROL PANEL"). Every colour, shadow, │
│ gradient and glow on every page is derived from it. │
│ │
│ 3 places live OUTSIDE this file (CSS can't reach them) — │
│ see website/BRANDING.md: │
│ 1. in each .html │
│ 2. the favicon data-URI in each .html │
│ 3. two SVG icon strokes below (search "ICON-COLOUR") │
└──────────────────────────────────────────────────────────┘
============================================================ */
/* Inclusive Sans — same humanist sans Mable uses. Designed for accessibility
(clear letterforms, generous spacing) which fits an NDIS audience and
reads warmer than the previous Manrope. */
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
/* ============================================================
BRAND CONTROL PANEL — change these to re-colour everything
============================================================ */
:root {
/* ---- PRIMARY BRAND (cobalt blue) ---- */
--brand: #2F62E0; /* cobalt — buttons, key surfaces, hero */
--brand-deep: #1E3FA0; /* deep cobalt — hover/pressed, dark sections */
--brand-dark: #2F62E0; /* ink navy — navbar darker end / deepest backgrounds */
--brand-darkest: #2F62E0; /* same — deepest */
--brand-light: #4D7AED; /* brighter cobalt — for highlights/glows on top of brand bg */
--link: #2F62E0; /* cobalt links (readable on white) */
--brand-rgb: 47,98,224; /* MUST match --brand */
--brand-light-rgb: 77,122,237; /* brighter cobalt for glows */
/* ---- ACCENT (warm yellow — fills with dark text) ---- */
--accent: #FFC53D; /* sunshine yellow — stars, sticker fills, highlights */
--accent-deep: #B27E00; /* dark yellow for text contrast */
--accent-soft: #FFF3CF; /* pale yellow — tints, badges */
--accent-rgb: 255,197,61; /* MUST match --accent */
/* ---- NEUTRALS ---- */
--ink: #11203F; /* ink navy — headings / strong text */
--body: #11203F; /* body text on light */
--muted: #54607A; /* secondary text */
--line: #DCE3F5; /* soft blue border */
--paper: #FFFFFF; /* surface — cards lifting off page bg */
--wash: #E6ECFB; /* pale blue tint — icon tiles, badges */
--wash-2: #F4F6FD; /* PALE BLUE-WHITE — page background */
--warm: #FFF6D6; /* pale yellow tint — warm section bands (matches the new yellow accent) */
/* ---- DARK SURFACES (now cobalt — was dark navy) ---- */
--dark: #2F62E0; /* cobalt — dark sections / footer / topbar */
--dark-2: #1E3FA0; /* deep cobalt — variation */
--dark-rgb: 47,98,224; /* matches --dark */
--on-dark: #FFFFFF; /* primary text on cobalt — full white for max contrast */
--on-dark-soft:rgba(255,255,255,0.82); /* footer links */
--on-dark-faint:rgba(255,255,255,0.65); /* footer fine print */
/* ---- STATES (system) ---- */
--success: #1F9D6B; /* green success */
--warning: #E5860B; /* orange-amber */
--error: #C0392B; /* muted red */
/* ---- DERIVED solid colours (was gradients — flattened for HireUp-style consistency) ---- */
--glow-brand: rgba(var(--brand-rgb), 0.18);
--glow-accent: rgba(var(--accent-rgb), 0.16);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow: 0 4px 20px rgba(0,0,0,0.08);
--shadow-md: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
--shadow-brand: 0 6px 22px rgba(var(--brand-rgb), 0.40);
--shadow-accent:0 4px 16px rgba(var(--accent-rgb), 0.40);
/* ---- TYPE / SIZING ---- */
/* Aligned with Mable (Inclusive Sans). Same family for body + headings
for tonal consistency; weight does the work, not a separate family. */
--font-head: 'Inclusive Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-body: 'Inclusive Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--maxw: 1180px;
--r-sm: 10px; --r: 14px; --r-lg: 20px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* ---- LEGACY ALIASES (so existing rules + inline styles keep working;
do NOT edit these — they point at the tokens above) ---- */
--navy: var(--brand); --navy-deep: var(--brand-deep); --navy-700: var(--brand-dark);
--bright: var(--link);
--coral: var(--accent); --coral-deep: var(--accent-deep); --coral-soft: var(--accent-soft);
--gold: var(--accent); --gold-deep: var(--accent-deep); --gold-soft: var(--accent-soft);
--ink-soft: var(--body); --text-light: var(--muted); --text-lighter: #94A3B8; --slate-dark: #243044;
--bg-warm: var(--warm); --orange: var(--accent); --orange-100: var(--accent-soft); --orange-700: var(--accent-deep);
--sky-50: var(--wash-2); --sky-100: var(--wash);
--shadow-navy: var(--shadow-brand); --shadow-gold: var(--shadow-accent);
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--wash-2); /* pale blue-white — white cards lift off this */
color: var(--body);
/* Matches Mable: 16px / 30px line-height = 1.875. Reads quieter and
less "marketing-loud" than the previous 18px / 1.7. */
font-size: 16px;
line-height: 1.875;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); }
ul, ol { padding-left: 1.2rem; }
::selection { background: var(--brand); color: #fff; }
/* ---------- a11y ---------- */
.visually-hidden {
position: absolute !important; 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: 1rem; top: -4rem; z-index: 999;
background: var(--dark); color: #fff;
padding: .7rem 1.1rem; border-radius: 10px;
text-decoration: none; font-weight: 600; transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 5px; }
/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.container-narrow { max-width: 860px; }
.section { padding-block: clamp(3.8rem, 8.5vw, 7rem); }
.section-sm { padding-block: clamp(2.6rem, 5vw, 4rem); }
.bg-cream { background: var(--paper); } /* white — sections that lift off pale-blue page bg */
.bg-sky { background: var(--wash); } /* pale blue accent band */
/* bright cobalt section — used for the intro band (no more coral) */
.bg-brand { background: var(--brand); color: rgba(255,255,255,0.94); }
.bg-brand h1, .bg-brand h2, .bg-brand h3, .bg-brand h4 { color: #fff; }
.bg-brand .lead, .bg-brand p { color: rgba(255,255,255,0.94); }
.bg-brand .accent { color: var(--accent); font-weight: 700; } /* yellow on cobalt pops */
.bg-brand a { color: var(--accent); }
.bg-brand .btn-ghost { color: var(--accent); }
.bg-brand .btn-ghost:hover { color: #fff; }
/* checklist on cobalt: WHITE text + white circles with cobalt ticks */
.bg-brand .checklist li { color: #fff; }
.bg-brand .checklist li::before {
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F62E0' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.bg-blue { background: var(--dark); color: var(--on-dark); }
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4 { color: #fff; }
.bg-blue .lead { color: var(--on-dark); }
.bg-blue a:not(.btn) { color: var(--accent); } /* inline links go accent; buttons keep their own colour */
/* trust items inside a dark band — light text + coral icons */
.bg-blue .trust-item svg { color: var(--accent); }
.bg-blue .trust-item p { color: #fff; }
.bg-blue .trust-item p span { color: var(--on-dark); font-weight: 400; }
/* bright cobalt section (legacy class name kept) */
.bg-teal { background: var(--brand); color: rgba(255,255,255,0.94); }
.bg-teal h1, .bg-teal h2, .bg-teal h3, .bg-teal h4 { color: #fff; }
.bg-teal p, .bg-teal .lead { color: rgba(255,255,255,0.94); }
.bg-teal .accent { color: var(--accent); } /* yellow pops on teal */
.bg-teal a { color: var(--accent); }
.bg-teal .step-num { background: rgba(255,255,255,0.2); color: #fff; box-shadow: none; }
/* soft yellow / amber section */
.bg-gold { background: var(--warm); }
.bg-gold .accent { color: var(--accent-deep); }
/* ---------- typography ----------
Sized to match Mable. Headings clamp between the mobile and desktop
values from their CSS; we keep the cobalt ink colour and the brand's
slightly tighter weight feel, but drop the heavy negative letter-spacing
so the type doesn't read as "AI marketing big". */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: 0; }
h1 { font-size: clamp(2.25rem, 4.5vw, 3rem); line-height: 1.1; } /* 36px → 48px */
h2 { font-size: clamp(1.875rem, 3vw, 2.25rem); line-height: 1.2; } /* 30px → 36px */
h3 { font-size: clamp(1.5rem, 2vw, 1.625rem); line-height: 1.2; } /* 24px → 26px */
h4 { font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.2; } /* 18px → 20px */
p { color: var(--body); }
strong { color: var(--ink); font-weight: 700; }
.accent { color: var(--link); font-weight: 700; } /* cobalt accent in headings */
.bg-blue .accent { color: var(--accent); }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: var(--body); } /* 17px → 19px */
/* horizontal stats band — pale blue, 3 columns side-by-side (HireUp pattern) */
/* Trust strip — cobalt band between hero + cards. Punctuation between
two light sections; vibrant; concrete numbers ($64/hr, $20M) instead
of generic "employed, trained" copy. */
.stat-band { background: var(--brand); padding: 1.75rem 0; color: #fff; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 1.4rem 2rem; }
.stat { display: flex; align-items: center; gap: 1rem; line-height: 1.35; }
.stat svg { width: 34px; height: 34px; color: var(--accent); flex-shrink: 0; }
.stat-headline { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 .12rem; line-height: 1.2; }
.stat-sub { font-size: .85rem; color: rgba(255,255,255,0.78); margin: 0; line-height: 1.4; }
/* Legacy fallback for the older single-line .stat strong markup used elsewhere */
.stat strong { color: #fff; font-weight: 700; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; gap: 1.2rem; } }
/* (.uline removed — squiggly underlines retired) */
/* (.sticker / .hero-sticker removed — the rotated comic-book stamp badges
were retired in favour of a flatter, more grown-up look.) */
/* ---------- kicker / eyebrow (kept; unused) ---------- */
.kicker, .eyebrow {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--font-body); font-weight: 700; font-size: .78rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 1rem;
}
.bg-blue .kicker, .section-dark .eyebrow, .bg-blue .eyebrow { color: var(--accent); }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1;
padding: 1rem 1.7rem; border-radius: 50px; border: 1.6px solid transparent;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(var(--brand-rgb),0.5); }
.btn-secondary { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-accent); }
.btn-secondary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(var(--accent-rgb),0.5); }
.btn-gold { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-accent); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.55); filter: brightness(1.03); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--wash); transform: translateY(-2px); }
.bg-blue .btn-outline, .section-dark .btn-outline,
.cta .btn-outline, .cta-band .btn-outline { color: #fff; border-color: rgba(255,255,255,0.45); }
.bg-blue .btn-outline:hover, .section-dark .btn-outline:hover,
.cta .btn-outline:hover, .cta-band .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.10); color:#fff; }
.cta-band .btn-secondary, .cta .btn-secondary { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-accent); }
.cta-band .btn-secondary:hover, .cta .btn-secondary:hover { filter: brightness(1.04); transform: translateY(-2px); }
.btn-ghost { padding: 0; border-radius: 0; color: var(--link); font-weight: 600; font-family: var(--font-head); }
.btn-ghost:hover { color: var(--ink); }
.btn-lg { padding: 1.15rem 2.1rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.btn-row.center { justify-content: center; }
/* ---------- header (white nav — HireUp pattern with thin top-bar) ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
/* Thin topbar above the main nav — care-sector trust strip.
Left: contact + 24/7 safeguarding + accessibility tools.
Right: help centre + sign in. */
.topbar { background: var(--accent); color: var(--ink); padding: .55rem 0; font-size: .88rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.topbar a, .topbar button.topbar-a11y {
color: var(--ink); text-decoration: none; font-weight: 600;
background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
display: inline-flex; align-items: center; gap: .5rem;
line-height: 1;
}
.topbar a:hover, .topbar button.topbar-a11y:hover { color: var(--brand-deep); }
.topbar .sep { color: rgba(17,32,63,0.30); }
.topbar-icon { flex-shrink: 0; display: block; }
.topbar-phone { font-variant-numeric: tabular-nums; }
.topbar-signin { padding: .3rem .85rem; background: var(--ink); color: var(--paper) !important; border-radius: 999px; font-size: .82rem; }
.topbar-signin:hover { background: var(--brand); color: var(--paper) !important; }
/* Value message — the $64/hr below-the-cap hook, links through to pricing. */
.topbar-value { font-weight: 600; }
.topbar-value strong { color: var(--brand-deep); font-weight: 800; }
/* ---- Top-bar polish: depth, icon chips, hover pills, elevated CTA ---- */
.topbar {
background: linear-gradient(180deg, #FFD25E, var(--accent) 72%);
box-shadow: inset 0 -1px 0 rgba(17,32,63,.07);
}
/* phone + accessibility icons sit in clean white chips with cobalt glyphs,
so they read as intentional rather than flat/tacky */
.topbar-icon {
width: 15px; height: 15px; padding: 5px; box-sizing: content-box;
background: #fff; color: var(--brand); border-radius: 50%;
box-shadow: 0 1px 3px rgba(17,32,63,.18);
transition: transform .15s ease, box-shadow .15s ease;
}
.topbar-phone:hover .topbar-icon,
.topbar-a11y:hover .topbar-icon { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(17,32,63,.24); }
/* hover pills give tactile feedback to the left-side items + value hook */
.topbar-left a, .topbar-a11y {
padding: .25rem .55rem; border-radius: 999px;
transition: background .15s ease, color .15s ease;
}
.topbar-left a:hover, .topbar-a11y:hover { background: rgba(255,255,255,0.6); }
/* Help Centre → quiet outlined chip so it isn't 'just text' */
.topbar-right .sep { display: none; }
.topbar-right a:not(.topbar-signin) {
padding: .32rem .85rem; border-radius: 999px;
border: 1px solid rgba(17,32,63,.22);
transition: background .15s ease, border-color .15s ease;
}
.topbar-right a:not(.topbar-signin):hover { background: #fff; border-color: transparent; }
/* Sign in → cobalt CTA that pops off the yellow with proper breathing room.
Selector is deliberately specific (.topbar-right .topbar-signin) so it beats
the base ".topbar a { background:none }" rule that was killing the fill. */
.topbar-right .topbar-signin {
background: var(--brand); color: #fff !important;
padding: .45rem 1.25rem; font-size: .84rem; font-weight: 700; border: 0;
box-shadow: 0 2px 8px rgba(var(--brand-rgb),0.35);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.topbar-right .topbar-signin:hover { background: var(--brand-deep); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--brand-rgb),0.5); }
/* 24/7 safeguarding line — pulse dot signals 'always on'. Dot flows as a
regular inline-flex child so the parent's gap handles spacing — no more
absolute-position overlap with the text. */
.topbar-safeguarding { gap: .6rem; } /* slightly larger than the .5rem default so the pulse halo (8px) doesn't kiss the text */
.topbar-pulse {
display: inline-block;
width: .55rem; height: .55rem;
border-radius: 50%;
background: #d33b3b;
box-shadow: 0 0 0 0 rgba(211,59,59,0.6);
animation: topbar-pulse 2.2s ease-out infinite;
flex-shrink: 0;
}
@keyframes topbar-pulse {
0% { box-shadow: 0 0 0 0 rgba(211,59,59,0.55); }
70% { box-shadow: 0 0 0 7px rgba(211,59,59,0); }
100% { box-shadow: 0 0 0 0 rgba(211,59,59,0); }
}
@media (max-width: 720px) {
.topbar { font-size: .82rem; }
.topbar-left, .topbar-right { gap: 1.1rem; }
.topbar-safeguarding > span:last-child { display: none; } /* keep only the dot on mobile — aria-label still reads it */
.topbar-a11y-label { position: absolute; left: -9999px; } /* icon-only a11y on small screens */
.tb-sm-hide { display: none; } /* shorten the value hook → "$64/hr — below the cap" */
.topbar-right > a[href="resources.html"], .topbar-right > .sep { display: none; } /* Help Centre lives in the nav menu on mobile */
}
@media (max-width: 560px) {
.topbar-phone span { display: none; } /* phone → tap-to-call chip only on the smallest screens */
.topbar .container { row-gap: .45rem; }
.topbar-right { margin-left: auto; } /* right-align the Sign in when it wraps to its own row */
}
/* Accessibility panel — slides down under the topbar when the ♿ button is pressed.
Injected into the DOM by main.js so every HTML page gets it without copy-paste. */
.a11y-panel { background: var(--ink); color: var(--paper); border-top: 2px solid var(--accent); }
.a11y-panel[hidden] { display: none; }
.a11y-panel .container { padding-block: .9rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; }
.a11y-panel fieldset { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: .5rem; }
.a11y-panel legend { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.65); margin-right: .4rem; float: left; padding: 0; }
.a11y-panel button { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-weight: 600; cursor: pointer; }
.a11y-panel button:hover { border-color: var(--accent); color: var(--accent); }
.a11y-panel button[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.a11y-panel .a11y-close { margin-left: auto; font-size: 1.4rem; line-height: 1; padding: .2rem .7rem; }
/* Accessibility modes — applied on by main.js, scoped narrowly so we
don't fight the rest of the design system. */
html.a11y-font-large { font-size: 112.5%; }
html.a11y-font-xlarge { font-size: 125%; }
html.a11y-contrast-high body { background: #000; color: #fff; }
html.a11y-contrast-high a, html.a11y-contrast-high .accent, html.a11y-contrast-high h1, html.a11y-contrast-high h2, html.a11y-contrast-high h3 { color: #ffd400 !important; }
html.a11y-contrast-high .card, html.a11y-contrast-high .site-header, html.a11y-contrast-high .site-footer { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.a11y-contrast-high .btn, html.a11y-contrast-high button { outline: 2px solid #ffd400; }
html.a11y-reduced-motion *, html.a11y-reduced-motion *::before, html.a11y-reduced-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
/* Two-row nav: brand sits LEFT (above "Find support"), nav-links + nav-actions row below */
.nav {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"brand . ."
"links links actions";
align-items: center;
column-gap: 1.5rem;
row-gap: .8rem;
padding-block: 1.2rem;
}
.brand { grid-area: brand; display: flex; align-items: center; gap: .55rem; text-decoration: none; justify-self: start; }
.brand-mark { width: 38px; height: 38px; }
/* Width-constrained so the square Inaro logo occupies the same horizontal
space as the old 3:1 Inara wordmark did. Height comes from aspect ratio
(120×120). Tight vertical spacing is handled via .nav padding-block below. */
.brand-logo { width: 156px; height: auto; display: block; }
/* Footer uses the dark-background lockup (white wordmark + teal gem), which
already reads on the cobalt footer — no filter needed. */
.site-footer .brand-logo { width: 148px; height: auto; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.brand-name span { color: var(--brand); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; padding: 0; margin: 0; grid-area: links; justify-self: start; } /* left-align so first item sits under the logo */
.nav-links > li { position: relative; }
.nav-links a, .nav-trigger {
text-decoration: none; color: var(--ink);
font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
padding: .5rem 0; position: relative; white-space: nowrap;
display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
background: transparent; border: 0;
}
.nav-links a:hover, .nav-trigger:hover { color: var(--brand); }
.nav-links a::after, .nav-trigger::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-links a:hover::after, .nav-trigger:hover::after,
.nav-links a[aria-current="page"]::after, .has-menu[aria-current-section] .nav-trigger::after { transform: scaleX(1); }
.nav-trigger .caret { width: 18px; height: 18px; stroke-width: 3; margin-left: .35rem; color: var(--ink); opacity: 1; transition: transform .2s ease; } /* dark ink caret for max contrast on white nav */
.nav-trigger:hover .caret { color: var(--brand); }
.has-menu:hover .nav-trigger .caret,
.has-menu:focus-within .nav-trigger .caret { transform: rotate(180deg); }
/* HireUp-style dropdown menu */
.nav-menu {
position: absolute; top: 100%; left: -22px; margin-top: 12px;
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
padding: .75rem; min-width: 380px; z-index: 200;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* transparent hover-bridge so the menu doesn't close as the cursor crosses the gap */
.nav-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-menu:hover > .nav-menu,
.has-menu:focus-within > .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu-item {
display: block !important; text-decoration: none;
padding: .95rem 1.1rem; border-radius: var(--r);
transition: background .15s ease;
}
.nav-menu-item:hover { background: var(--wash); }
.nav-menu-item:hover::after { display: none; }
.nav-menu-title {
display: block; font-family: var(--font-head); font-weight: 700;
font-size: 1rem; color: var(--ink); margin-bottom: .2rem; line-height: 1.3;
}
.nav-menu-desc {
display: block; font-family: var(--font-body); font-size: .88rem;
color: var(--muted); line-height: 1.45;
}
.nav-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; grid-area: actions; justify-self: end; }
.nav-actions .btn { padding: .75rem 1.3rem; font-size: 1rem; }
/* nav buttons on white bar use the default dark-on-light styles */
/* small text link beside the primary CTA */
.nav-help {
font-family: var(--font-head); font-weight: 600; font-size: 1rem;
color: var(--ink); text-decoration: none;
padding: .5rem .35rem; white-space: nowrap;
}
.nav-help:hover { color: var(--brand); }
@media (max-width: 1100px) { .nav-help { display: none; } /* lives in the mobile menu via nav-links instead */ }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: .5rem; margin-left: auto; }
.nav-toggle span { width: 25px; height: 2.5px; background: var(--ink); border-radius: 2px; }
/* ---------- hero (WHITE-bg, dark-text — HireUp-style 2-col) ---------- */
.hero { position: relative; background: var(--paper); color: var(--body); }
/* Hero heading inherits the base h1 size (Mable scale: 36px → 48px). */
.hero h1, .hero h2 { color: var(--ink); font-size: clamp(2.25rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: 0; font-weight: 700; }
.hero .lead, .hero p { color: var(--body); }
.hero .accent { color: var(--brand); } /* cobalt accent on white */
.hero a:not(.btn) { color: var(--link); }
.hero .hero-center { padding-block: clamp(2.4rem, 5vw, 4rem); }
/* buttons fall back to the default global btn rules — no hero-specific override */
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2rem, 5vw, 4.6rem); align-items: center; padding-block: clamp(2.8rem, 6vw, 5.4rem); }
.hero h1 { margin-block: 1.1rem 1.3rem; }
.hero .lead { margin-bottom: 2rem; max-width: 38ch; }
.hero-mini { display: flex; align-items: center; gap: .7rem; margin-top: 1.8rem; font-size: .95rem; color: var(--body); }
.hero-mini svg { flex-shrink: 0; color: var(--brand-deep); }
.hero-media { position: relative; }
/* asymmetric hero — text left, photo right. Photo column slightly wider
than text so the larger square image reads as the visual anchor. */
.hero-asym {
display: grid; grid-template-columns: .95fr 1.05fr;
gap: clamp(2rem, 5vw, 5rem); align-items: center;
padding-block: clamp(3rem, 6.5vw, 5.5rem);
}
.hero-text { max-width: 580px; }
.hero-text h1 { margin: 0 0 1.3rem; }
.hero-text .lead { margin-bottom: 1.9rem; max-width: 52ch; }
.hero-text .hero-search { margin: 0; max-width: 460px; }
.hero-text .hero-alt { margin-top: 1rem; }
.hero-text .hero-mini { justify-content: flex-start; margin-top: 1.5rem; }
.hero-text .btn-row { justify-content: flex-start; } /* override stray `btn-row center` from pre-asym layouts */
/* Breadcrumb — sits at the top of every hero (except the homepage).
Mirrors HireUp's pattern: muted text, chevron separator, current page
bolded. Lives inside .hero-text so it sits left-aligned with the h1. */
.breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
font-size: .85rem; color: var(--muted); line-height: 1.4;
margin-bottom: 1.2rem;
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb-sep { color: var(--line); user-select: none; font-size: .9em; }
.breadcrumb-current { color: var(--ink); font-weight: 600; }
.hero-art { position: relative; }
/* "Leaning-leaf" hero photo — a roughly square crop with ONE
dramatically rounded corner (top-left, ~45%) and three subtle
rounded corners (~20px each). Matches the HireUp signature shape.
Yellow border + cobalt offset shadow creates a double-stamp effect:
photo sits on a yellow frame which sits on a cobalt offset block. */
.hero-image-frame {
position: relative; overflow: hidden;
aspect-ratio: 1/1; background: var(--wash);
border-radius: 45% 20px 20px 20px;
border: 4px solid var(--accent);
box-shadow: 14px 14px 0 var(--brand);
}
@media (max-width: 860px) {
.hero-image-frame {
border-width: 3px;
box-shadow: 9px 9px 0 var(--brand); /* smaller offset on mobile so the cobalt block doesn't push off-screen */
}
}
/* Full-length cutout treatment — used ONLY on the homepage hero. The
image stretches the full height of the hero column and is anchored to
the bottom (so the person's feet sit on the section base). A soft
yellow half-dome accent sits behind to give the figure somewhere to
"stand" visually. Requires a transparent-background PNG of a person to
render as a true cutout; with a regular landscape JPG it just renders
as a tall portrait crop. */
.hero.hero-cutout-layout .hero-asym { padding-block: 0; align-items: stretch; }
.hero.hero-cutout-layout .hero-text { padding-block: clamp(3rem, 6vw, 5rem); }
.hero-cutout {
position: relative;
align-self: stretch;
min-height: 520px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.hero-cutout::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 88%;
height: 70%;
background: var(--accent-soft);
border-radius: 50% 50% 0 0 / 60% 60% 0 0;
z-index: 0;
}
.hero-cutout > img {
position: relative;
z-index: 1;
max-height: 100%;
max-width: 100%;
width: auto;
height: 100%;
object-fit: contain;
object-position: bottom center;
display: block;
}
@media (max-width: 860px) {
.hero-cutout { min-height: 380px; }
.hero-cutout::before { width: 100%; height: 80%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
}
.hero-image-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
.hero-image-frame { aspect-ratio: 4/3; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 860px) {
.hero-asym { grid-template-columns: 1fr; }
.hero-text { max-width: none; }
.hero-text .hero-mini { justify-content: flex-start; }
}
/* legacy centred-hero kept (used by some pages) */
.hero-center {
max-width: 820px; margin-inline: auto; text-align: center;
padding-block: clamp(3.5rem, 7vw, 6rem);
}
.hero-center h1 { margin-block: 0 1.2rem; }
.hero-center .lead { margin-inline: auto; max-width: 56ch; margin-bottom: 1.8rem; }
.hero-center .hero-search { margin: 0 auto; }
.hero-center .hero-alt { margin-top: 1rem; }
.hero-center .hero-mini { justify-content: center; margin-top: 1.4rem; }
.hero-image-wrap { padding-bottom: clamp(2rem, 4vw, 4rem); }
.hero-image-placeholder {
position: absolute; inset: 0; display: grid; place-items: center;
text-align: center; padding: 1.5rem; background: var(--wash);
}
.hero-image-placeholder .ph-icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(--paper); border: 1px solid var(--line); margin-bottom: .9rem;
display: grid; place-items: center; color: var(--brand-deep); box-shadow: var(--shadow-sm);
}
.hero-image-placeholder p {
font-family: var(--font-head); font-weight: 600; color: var(--ink);
font-size: 1.05rem; margin: 0; max-width: 36ch;
}
.hero-image-placeholder span {
margin-top: .6rem; font-size: .65rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--muted); background: rgba(255,255,255,0.7); border: 1px solid var(--line);
padding: .25rem .65rem; border-radius: 999px;
}
@media (max-width: 700px) { .hero-image-frame { aspect-ratio: 4/3; } }
/* HireUp-style suburb/postcode search */
.hero-search {
display: flex; align-items: center; gap: .5rem;
background: var(--paper); border: 1px solid var(--line);
border-radius: 50px; padding: .4rem .4rem .4rem 1.1rem;
box-shadow: var(--shadow-md); max-width: 470px;
}
.hero-search-icon { display: grid; place-items: center; color: var(--brand-deep); flex-shrink: 0; }
.hero-search input {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: .65rem .2rem;
}
.hero-search input::placeholder { color: var(--muted); }
.hero-search .btn { flex-shrink: 0; }
.hero-alt { margin-top: 1rem; font-size: .96rem; color: var(--body); }
.cta .hero-search { margin: 1.8rem auto 0; }
@media (max-width: 560px) {
.hero-search { flex-wrap: wrap; border-radius: 18px; padding: .8rem; }
.hero-search input { width: 100%; }
.hero-search .btn { width: 100%; }
}
/* ---------- photo slots ---------- */
.photo {
position: relative; overflow: hidden; border-radius: var(--r-lg);
background: var(--wash);
border: 1px solid var(--line); display: grid; place-items: center;
}
.photo.tone-warm { background: var(--warm); }
.photo.tone-sky { background: var(--wash); }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo .ph-inner { position: relative; z-index: 1; text-align: center; padding: 1.6rem; max-width: 88%; }
.photo .ph-icon {
width: 52px; height: 52px; margin: 0 auto .8rem; border-radius: 50%;
background: var(--paper); border: 1px solid var(--line);
display: grid; place-items: center; color: var(--brand-deep); box-shadow: var(--shadow-sm);
}
.photo .ph-label { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.4; }
.photo .ph-tag {
display: inline-block; margin-top: .6rem; font-family: var(--font-body); font-size: .65rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--body);
background: rgba(255,255,255,0.7); border: 1px solid var(--line); padding: .25rem .6rem; border-radius: 999px;
}
.photo:has(img) .ph-inner { display: none; }
.ar-11 { aspect-ratio: 1/1; } .ar-43 { aspect-ratio: 4/3; } .ar-32 { aspect-ratio: 3/2; }
.ar-54 { aspect-ratio: 5/4; } .ar-45 { aspect-ratio: 4/5; } .ar-169 { aspect-ratio: 16/9; }
.media-frame { position: relative; }
.media-frame > .photo { box-shadow: var(--shadow-lg); }
.photo-note {
position: absolute; z-index: 3; background: var(--paper);
border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md);
padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem;
font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--ink); max-width: 235px;
}
.photo-note.bl { left: -18px; bottom: 24px; }
.photo-note.tr { right: -18px; top: 26px; }
.photo-note .nib {
width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep);
display: grid; place-items: center; flex-shrink: 0;
}
/* ---------- trust strip ---------- */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.trust-item { display: flex; align-items: flex-start; gap: .75rem; }
.trust-item svg { flex-shrink: 0; color: var(--brand); margin-top: 2px; }
.trust-item p { font-size: .96rem; color: var(--ink); font-weight: 600; line-height: 1.45; font-family: var(--font-head); }
.trust-item p span { display: block; color: var(--body); font-weight: 400; font-size: .9rem; font-family: var(--font-body); }
/* ---------- section heads ---------- */
.section-head { max-width: 680px; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 1rem; }
/* ---------- media rows ---------- */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5.5vw, 5rem); align-items: center; }
.media-row + .media-row { margin-top: clamp(3.4rem, 7vw, 6rem); }
.media-row--flip .mr-media { order: 2; }
.mr-text h2 { margin-bottom: 1rem; }
.mr-text .lead { margin-bottom: 1.4rem; }
/* ---------- grids / cards ---------- */
.grid { display: grid; gap: 1.6rem; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 2rem; box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(var(--dark-rgb),0.16); border-color: transparent; }
.card.on-cream { background: var(--wash-2); border-color: var(--wash); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: 1rem; }
/* Icons: no tile background, bigger + bolder strokes so they read as real iconography */
.icon-mark, .icon-badge {
color: var(--brand-deep);
display: inline-flex; align-items: center;
margin-bottom: 1.1rem;
}
.icon-mark.blue, .icon-badge.orange { color: var(--accent-deep); }
.icon-mark svg, .icon-badge svg {
width: 44px; height: 44px;
stroke-width: 2.2;
stroke-linecap: round; stroke-linejoin: round;
overflow: visible; /* prevents thick strokes clipping at SVG edges */
}
/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.5vw, 2rem); }
.step {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-top: 4px solid var(--brand); /* cobalt accent rail */
border-radius: var(--r-lg);
padding: clamp(1.6rem, 2.8vw, 2.2rem);
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num {
font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #fff;
width: 48px; height: 48px; border-radius: 50%; background: var(--brand);
display: grid; place-items: center; margin-bottom: 1.1rem; box-shadow: 0 6px 18px rgba(var(--brand-rgb),0.4);
}
.step h3 { margin-bottom: .5rem; }
/* ---------- duo panels ---------- */
/* Mirrored choice cards — used on the homepage "I'm looking for…" section.
Each card is a 2-column anchor (photo + text) using the same squircle
+ yellow border + cobalt offset shadow as the hero photo. The two cards
mirror each other: left card has photo-LEFT with heavy top-LEFT corner;
right card has photo-RIGHT with heavy top-RIGHT corner. Shadows point
inward toward each card's text block, framing the photos from the
outside-in. */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); margin-top: 2.4rem; }
.choice-card {
display: grid; grid-template-columns: minmax(180px, 1fr) 1.15fr;
align-items: center;
gap: clamp(1.2rem, 2.5vw, 2rem);
padding: clamp(1.4rem, 2.5vw, 2rem);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
text-decoration: none;
color: inherit;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.choice-card:hover {
transform: translateY(-4px);
border-color: var(--brand);
box-shadow: 0 18px 40px rgba(var(--brand-rgb), 0.14);
}
.choice-card--mirror { grid-template-columns: 1.15fr minmax(180px, 1fr); }
.choice-photo {
position: relative;
aspect-ratio: 1/1;
overflow: hidden;
background: var(--wash);
border: 4px solid var(--accent);
display: block;
}
.choice-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Left card: heavy top-LEFT corner, cobalt offset shadow bottom-RIGHT */
.choice-photo--left { border-radius: 45% 16px 16px 16px; box-shadow: 12px 12px 0 var(--brand); }
/* Right card: heavy top-RIGHT corner (mirror), cobalt offset shadow bottom-LEFT */
.choice-photo--right { border-radius: 16px 45% 16px 16px; box-shadow: -12px 12px 0 var(--brand); }
.choice-body { padding: .4rem .6rem; }
.choice-eyebrow {
font-family: var(--font-head); font-weight: 700; font-size: .78rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep);
margin: 0 0 .7rem;
}
.choice-body h3 {
font-size: clamp(1.5rem, 2.4vw, 1.95rem);
margin: 0 0 .8rem;
color: var(--ink);
line-height: 1.2;
}
.choice-body p { color: var(--body); margin: 0; font-size: .98rem; }
.choice-cta {
display: inline-flex; align-items: center; gap: .4rem;
margin-top: 1.4rem;
color: var(--brand); font-weight: 700;
font-family: var(--font-head); font-size: 1.05rem;
transition: gap .25s ease, color .25s ease;
}
.choice-cta svg { transition: transform .25s ease; }
.choice-card:hover .choice-cta { gap: .7rem; color: var(--brand-deep); }
.choice-card:hover .choice-cta svg { transform: translateX(3px); }
/* Mobile: stack to single column, text-first for accessibility, smaller offset shadows */
@media (max-width: 860px) {
.choice-grid { grid-template-columns: 1fr; gap: 2rem; }
.choice-card, .choice-card--mirror { grid-template-columns: 1fr; padding: 1.5rem; }
.choice-card--mirror .choice-body { order: 1; }
.choice-card--mirror .choice-photo { order: 2; }
.choice-photo { max-width: 380px; margin-inline: auto; }
.choice-photo--left { box-shadow: 8px 8px 0 var(--brand); }
.choice-photo--right { box-shadow: 8px 8px 0 var(--brand); }
}
/* Why-choose feature grid — used on the homepage. No card frames, just
icon + text rows in a 2×2. Yellow circular icon badge + cobalt heading
reads as a clean "feature manifesto" on a pale-blue band, instead of
the previous loud cobalt-section-with-white-cards stack. */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem); margin-top: 2.5rem; }
.why-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.why-item-icon {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--accent);
color: var(--ink);
display: grid;
place-items: center;
}
.why-item-icon svg { width: 24px; height: 24px; }
.why-item h3 { font-size: 1.1rem; margin: 0 0 .4rem; color: var(--ink); line-height: 1.25; }
.why-item p { color: var(--body); margin: 0; font-size: .95rem; line-height: 1.55; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; gap: 1.6rem; } }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.duo-card {
border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper);
box-shadow: var(--shadow); display: flex; flex-direction: column;
transition: transform var(--transition), box-shadow var(--transition);
/* overflow:visible (default) so absolutely-positioned stickers can stick out */
}
.duo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* round the top of the photo to match the card edge (was clipped by overflow:hidden before) */
.duo-card .photo { border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 1px solid var(--line); }
.duo-body { padding: clamp(1.7rem, 3vw, 2.5rem); }
.duo-body h3 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); margin-bottom: .7rem; }
.duo-body .btn { margin-top: 1.4rem; }
/* ---------- checklist ----------
ICON-COLOURS (3 inline SVGs below, since CSS data-URIs can't read variables):
- light variant ticks: white stroke (%23ffffff) on solid cobalt circle
- dark-section variant: ink stroke (%2311203F) on solid yellow circle
- card-on-dark override: white stroke (%23ffffff) on solid cobalt circle
If you change --brand or --accent, update --brand-deep / --ink hexes here too. */
/* Checklist — bold solid filled-circle + white tick (confident, not generic) */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.checklist li { position: relative; padding-left: 2.5rem; line-height: 1.5; color: var(--body); font-weight: 500; }
.checklist li::before {
content: ""; position: absolute; left: 0; top: .15rem;
width: 26px; height: 26px; border-radius: 50%;
background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
box-shadow: 0 2px 6px rgba(var(--brand-rgb),0.30);
}
/* Dark-section variant (when checklist sits directly on dark navy) → yellow circle + dark tick */
/* ============================================================
⚠ DARK-BG TEXT RULE — DO NOT WEAKEN ⚠
The base `strong { color: var(--ink); }` rule makes render
in dark navy by default. On ANY coloured / dark-background container,
that's unreadable. This rule lists every dark surface on the site —
keep it in sync whenever a new dark section class is introduced.
Includes: heroes, every brand/dark/cobalt section variant, the CTA
bands, dark rate cards, the footer, the dark a11y panel.
See PRE-LAUNCH-COPY-CHECK.md for the design rule.
============================================================ */
/* Hero is now WHITE-bg — strongs inherit the default dark var(--ink) and
are removed from this rule. The list below covers only the remaining
dark-background containers. */
.bg-blue strong, .bg-brand strong, .bg-teal strong,
.section-dark strong,
.cta strong, .cta-band strong,
.rate-cards.dark .rate-card strong,
.rate-callout strong,
.site-footer strong,
.a11y-panel strong { color: #fff; }
/* WHITE-CARD-ON-DARK-SECTION rule — when a .card (white bg) sits inside
a dark section, the section's white-text rules cascade into the card
and make text invisible (white text on white card). Restore dark text
for everything inside .card / .duo-card so they remain readable. */
.bg-blue .card, .bg-blue .duo-card,
.bg-brand .card, .bg-brand .duo-card,
.bg-teal .card, .bg-teal .duo-card,
.section-dark .card, .section-dark .duo-card { color: var(--body); }
.bg-blue .card h1, .bg-blue .card h2, .bg-blue .card h3, .bg-blue .card h4,
.bg-blue .duo-card h1, .bg-blue .duo-card h2, .bg-blue .duo-card h3, .bg-blue .duo-card h4,
.bg-brand .card h1, .bg-brand .card h2, .bg-brand .card h3, .bg-brand .card h4,
.bg-brand .duo-card h1, .bg-brand .duo-card h2, .bg-brand .duo-card h3, .bg-brand .duo-card h4,
.bg-teal .card h1, .bg-teal .card h2, .bg-teal .card h3, .bg-teal .card h4,
.section-dark .card h1, .section-dark .card h2, .section-dark .card h3, .section-dark .card h4 { color: var(--ink); }
.bg-blue .card p, .bg-blue .duo-card p,
.bg-brand .card p, .bg-brand .duo-card p,
.bg-teal .card p, .section-dark .card p { color: var(--body); }
.bg-blue .card strong, .bg-blue .duo-card strong,
.bg-brand .card strong, .bg-brand .duo-card strong,
.bg-teal .card strong, .section-dark .card strong { color: var(--ink); }
.bg-blue .card .accent, .bg-blue .duo-card .accent,
.bg-brand .card .accent, .section-dark .card .accent { color: var(--link); }
.bg-blue .checklist li, .section-dark .checklist li { color: #fff; }
.bg-blue .checklist li::before, .section-dark .checklist li::before {
background-color: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311203F' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
box-shadow: 0 2px 6px rgba(var(--accent-rgb),0.40);
}
/* When the checklist is INSIDE a white card on a dark section, revert to the cobalt+white variant */
.bg-blue .duo-card .checklist li, .bg-blue .card .checklist li,
.section-dark .duo-card .checklist li, .section-dark .card .checklist li {
color: var(--body);
}
.bg-blue .duo-card .checklist li::before, .bg-blue .card .checklist li::before,
.section-dark .duo-card .checklist li::before, .section-dark .card .checklist li::before {
background-color: var(--brand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
box-shadow: 0 2px 6px rgba(var(--brand-rgb),0.30);
}
/* ---------- quotes ---------- */
/* Pull-quote — editorial block to break up body content */
.pull-quote {
margin: 0;
padding: 1.5rem 0 1.5rem 2rem;
border-left: 4px solid var(--accent);
font-family: var(--font-head);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 600;
line-height: 1.22;
color: var(--ink);
letter-spacing: -0.02em;
}
.pull-quote p { color: var(--ink); margin-bottom: 1.2rem; }
.pull-quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1.1rem; }
.quote.feature { background: var(--wash); border-color: var(--wash); }
.quote .stars { color: var(--accent); letter-spacing: 2px; }
.quote blockquote { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; }
.quote .who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.quote .who .photo { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.quote .who .photo .ph-inner { padding: 0; }
.quote .who .photo .ph-icon { width: 26px; height: 26px; margin: 0; box-shadow: none; }
.quote .who-name { font-weight: 700; color: var(--ink); font-family: var(--font-head); }
.quote .who-role { font-size: .85rem; }
/* ---------- faq ----------
ICON-COLOUR: the +/- strokes use brand teal (%232F62E0). See BRANDING.md. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
cursor: pointer; list-style: none; padding: 1.4rem .4rem;
font-family: var(--font-head); font-weight: 600; font-size: 1.16rem; color: var(--ink);
display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex-shrink: 0; width: 24px; height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F62E0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s ease;
}
.faq details[open] summary::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F62E0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.faq details p { padding: 0 .4rem 1.5rem; }
/* ---------- callout ---------- */
.callout { border-left: 3px solid var(--brand); background: var(--wash); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1.3rem 1.5rem; }
/* Big-number rate display (3-column HireUp pay-rates style) */
.rates-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1.6rem; }
.rate { padding-left: 0; }
.rate-label { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: .4rem; }
.rate-amount { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.25rem, 4vw, 3rem); color: var(--brand); line-height: 1; letter-spacing: 0; }
.rate-sub { color: var(--muted); font-size: 1rem; margin-top: .3rem; }
@media (max-width: 760px) { .rates-row { grid-template-columns: 1fr; gap: 1.5rem; } }
/* Worker profile cards (HireUp homepage "search for support workers" grid) */
.worker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2rem; }
.worker-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .9rem; }
.worker-photo { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--wash); }
.worker-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.worker-name { position: absolute; bottom: 12px; left: 12px; background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .92rem; padding: .35rem .7rem; border-radius: 999px; }
.worker-tags { display: flex; flex-direction: column; gap: .35rem; }
.worker-tag { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); font-weight: 500; }
.worker-tag svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }
@media (max-width: 900px) { .worker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .worker-grid { grid-template-columns: 1fr; } }
/* Prominent multi-field search form (HireUp homepage "search by suburb / type / radius") */
.search-form-row {
display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .5rem;
background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
padding: .55rem; box-shadow: var(--shadow); max-width: 880px; margin: 1.5rem auto 0;
}
.search-field { display: flex; flex-direction: column; padding: .25rem .9rem; min-width: 0; }
.search-field + .search-field { border-left: 1px solid var(--line); }
.search-field label { font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: var(--ink); margin-bottom: 2px; }
.search-field input, .search-field select { border: 0; background: transparent; padding: 0; font-size: .92rem; color: var(--ink); outline: none; font-family: var(--font-body); width: 100%; }
.search-field input::placeholder { color: var(--muted); font-weight: 400; }
.search-form-row .btn { border-radius: 999px; padding: .85rem 1.6rem; }
@media (max-width: 760px) {
.search-form-row { grid-template-columns: 1fr; border-radius: var(--r-lg); padding: .9rem; }
.search-field + .search-field { border-left: 0; border-top: 1px solid var(--line); padding-top: .8rem; }
}
/* Mini CTA band (pale blue with centred buttons — HireUp's "Ready to learn more?" block) */
.mini-cta { background: var(--wash); border-radius: var(--r-lg); padding: clamp(2.2rem, 4vw, 3rem); text-align: center; }
.mini-cta h2 { margin-bottom: .6rem; }
.mini-cta p { color: var(--muted); max-width: 50ch; margin: 0 auto 1.4rem; }
.mini-cta .btn-row { justify-content: center; }
/* Time-of-day rate cards (HireUp's "Set hourly rates" block — icon + label + time + rate) */
.rate-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.8rem; }
.rate-cards.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }
.rate-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; color: var(--ink); }
.rate-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--brand); margin-bottom: 1rem; }
.rate-card-icon svg { width: 100%; height: 100%; }
.rate-card-title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin: 0 0 .25rem; }
.rate-card-time { color: var(--muted); font-size: .92rem; margin: 0 0 1.6rem; }
.rate-card-amount { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.1rem; margin: 0; }
.rate-card-amount strong { color: var(--brand); font-weight: 700; font-size: 1.2rem; }
/* Module catalogue — used on academy.html. A compact 2-up grid of training
modules, each with title, duration/format pill, and a one-line outcome.
Reads as a real "course catalogue" without needing a full LMS. */
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.4rem; }
.module-card { padding: 1.2rem 1.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.module-card h4 { font-size: 1.02rem; margin-bottom: .35rem; line-height: 1.3; color: var(--ink); font-weight: 700; }
.module-meta { font-size: .78rem; color: var(--accent-deep); font-weight: 700; letter-spacing: .02em; margin: 0 0 .55rem; text-transform: uppercase; }
.module-card > p:not(.module-meta) { font-size: .92rem; color: var(--body); margin: 0; line-height: 1.55; }
.module-cat-head { display: flex; align-items: baseline; gap: .75rem; margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.module-cat-head:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.module-cat-head h3 { font-size: 1.4rem; margin: 0; color: var(--ink); }
.module-cat-head .module-cat-count { font-size: .82rem; color: var(--muted); font-weight: 600; }
.module-cat-head p { margin: 0; width: 100%; color: var(--muted); font-size: .95rem; }
@media (max-width: 700px) { .module-grid { grid-template-columns: 1fr; } }
/* Benefit-tile grid — small cards on a dark (.bg-blue / .bg-brand) section.
Used on pricing-support-workers.html "What working at Inaro looks like".
Subtle white-tinted tile background so they read as tiles, not floating text. */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; }
.benefit-tile { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r); padding: 1.25rem 1.15rem; color: #fff; }
.benefit-tile svg { width: 22px; height: 22px; color: var(--accent); display: block; margin-bottom: .65rem; }
.benefit-tile h4 { color: #fff; font-size: 1rem; margin: 0 0 .35rem; font-weight: 700; line-height: 1.25; }
.benefit-tile p { color: rgba(255,255,255,0.82); font-size: .88rem; line-height: 1.5; margin: 0; }
@media (max-width: 1000px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .benefit-grid { grid-template-columns: 1fr; } }
/* Dark variant — the cards themselves carry the cobalt, so the surrounding
section can stay white. Used on pricing.html + pricing-support-workers.html
to break up the long blue runs. */
.rate-cards.dark .rate-card { background: var(--dark); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.rate-cards.dark .rate-card-icon { color: var(--accent); }
.rate-cards.dark .rate-card-title { color: #fff; }
.rate-cards.dark .rate-card-time { color: rgba(255,255,255,0.82); }
.rate-cards.dark .rate-card-amount { color: #fff; }
.rate-cards.dark .rate-card-amount strong { color: var(--accent); }
.rate-cards.dark .rate-card-time strong { color: var(--accent); } /* higher-classification price in the subtext line */
@media (max-width: 900px) { .rate-cards, .rate-cards.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .rate-cards, .rate-cards.cols-3 { grid-template-columns: 1fr; } }
/* small label above a section heading (HireUp uses "Hourly rates for Hireup bookings" kicker) */
.section-kicker { display: block; font-family: var(--font-head); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.bg-blue .section-kicker, .section-dark .section-kicker { color: var(--accent); }
/* Coloured highlight band (the "+$1.12 hourly allowance" style callout HireUp uses) */
.rate-callout {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
background: var(--brand); color: #fff;
padding: 1.2rem 1.5rem; border-radius: var(--r-lg);
margin-top: 1.8rem;
}
.rate-callout p { margin: 0; color: #fff; font-weight: 500; }
.rate-callout .btn { background: #fff; color: var(--brand); flex-shrink: 0; box-shadow: none; }
.rate-callout .btn:hover { background: var(--accent); color: var(--ink); }
@media (max-width: 700px) { .rate-callout { flex-direction: column; align-items: flex-start; } }
.callout.blue, .callout.orange { border-left-color: var(--accent); background: var(--accent-soft); }
.callout h4 { margin-bottom: .35rem; }
.callout p { margin: 0; font-size: .98rem; }
/* ---------- cta ---------- */
.cta { border-radius: var(--r-lg); background: var(--dark); color: var(--on-dark); padding: clamp(2.6rem, 6vw, 4.6rem); text-align: center; }
.cta h2 { color: #fff; margin-bottom: .9rem; }
.cta p { color: var(--on-dark); max-width: 52ch; margin-inline: auto; }
.cta .btn-row { margin-top: 1.9rem; justify-content: center; }
/* ---------- pricing ---------- */
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.price-card.featured { background: var(--wash); border-color: var(--brand); }
.price-tag { font-family: var(--font-head); font-weight: 700; font-size: 2.25rem; color: var(--ink); letter-spacing: 0; margin-block: .5rem; }
.price-tag small { font-size: .92rem; color: var(--body); font-weight: 500; }
/* ---------- table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; background: var(--paper); }
table.data th, table.data td { text-align: left; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); }
table.data th { font-family: var(--font-head); font-weight: 600; background: var(--wash-2); color: var(--ink); }
table.data tr:last-child td { border-bottom: 0; }
/* ---------- forms ---------- */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.7rem, 3vw, 2.6rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 600; font-size: .96rem; margin-bottom: .4rem; color: var(--ink); font-family: var(--font-head); }
.field .req { color: var(--accent-deep); }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--wash); }
.field textarea { resize: vertical; min-height: 130px; }
.field-hint { font-size: .85rem; margin-top: .3rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-status { margin-top: 1rem; }
/* ---------- contact methods ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .icon-mark, .contact-list .icon-badge { margin: 0; flex-shrink: 0; }
.contact-list .icon-mark svg, .contact-list .icon-badge svg { width: 34px; height: 34px; }
.contact-list strong { display: block; font-family: var(--font-head); font-size: 1.08rem; color: var(--ink); }
/* ---------- prose ---------- */
.prose h2 { margin-top: 2.6rem; margin-bottom: .8rem; }
.prose h3 { margin-top: 2rem; margin-bottom: .5rem; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin-bottom: 1rem; }
.prose li { margin-bottom: .45rem; }
/* ---------- tag ---------- */
.tag { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .03em; padding: .34rem .85rem; border-radius: 999px; background: var(--wash); color: var(--brand-deep); }
.tag.blue { background: var(--accent-soft); color: var(--accent-deep); }
/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--on-dark-soft); padding-block: 3.6rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255,255,255,0.12); } /* 5 cols: brand + participants + workers + company + support near you */
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-name span { color: var(--accent); }
.footer-brand p { color: var(--on-dark-soft); font-size: .96rem; margin-top: 1rem; max-width: 320px; }
.footer-col h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; font-family: var(--font-body); font-weight: 700; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-col a { color: var(--on-dark-soft); text-decoration: none; font-size: .97rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.9rem; font-size: .87rem; color: var(--on-dark-faint); }
.footer-bottom a { color: var(--on-dark-soft); }
.acknowledgement { margin-top: 1.7rem; font-size: .87rem; color: var(--on-dark-faint); line-height: 1.6; }
.footer-disclaimer { margin-top: .8rem; font-size: .82rem; color: var(--on-dark-faint); line-height: 1.6; opacity: .85; }
/* ---------- utilities ---------- */
.text-center { text-align: center; }
.mt-1 { margin-top: .7rem; } .mt-2 { margin-top: 1.3rem; } .mt-3 { margin-top: 2.2rem; }
.mb-0 { margin-bottom: 0; }
/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
}
/* ============================================================
SUB-PAGE COMPATIBILITY (earlier class vocabulary)
============================================================ */
/* page-hero — WHITE bg, dark text (matches the homepage hero) */
.page-hero {
padding-block: clamp(2.4rem, 5vw, 4rem);
background: var(--paper);
color: var(--body);
}
/* Page-hero (per-page header band) — same Mable-aligned scale as .hero. */
.page-hero h1, .page-hero h2 { color: var(--ink); font-size: clamp(2.25rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: 0; font-weight: 700; }
.page-hero h1 { margin-block: .2rem .9rem; max-width: 22ch; }
.page-hero .lead, .page-hero p { color: var(--body); max-width: 60ch; }
.page-hero .accent { color: var(--brand); }
.page-hero a:not(.btn) { color: var(--link); }
/* buttons + checklist fall back to default light-bg styling */
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.page-hero-media { position: relative; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.section-tint { background: var(--wash-2); }
.section-warm { background: var(--warm); }
.section-dark { background: var(--dark); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .lead { color: var(--on-dark); }
.section-dark a:not(.btn) { color: var(--accent); } /* same scope as .bg-blue */
.cta-band { border-radius: var(--r-lg); background: var(--dark); color: #fff; padding: clamp(2.4rem, 5.5vw, 4.2rem); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: .9rem; }
.cta-band p { max-width: 54ch; margin-inline: auto; color: var(--on-dark); }
.cta-band .btn-row { margin-top: 1.7rem; justify-content: center; }
.ribbon { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: .35rem .8rem; border-radius: 999px; margin-bottom: .8rem; }
.stars { color: var(--accent); letter-spacing: 2px; }
/* ---------- responsive ---------- */
@media (max-width: 1100px) {
/* drop the 2-row desktop grid → simple flex row with logo left + hamburger right */
.nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; }
.brand { justify-self: start; }
.nav-toggle { display: flex; }
.nav-links, .nav-actions { display: none; }
.nav-links.open, .nav-actions.open { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: .3rem; margin: 0; justify-self: stretch; }
.nav.open { flex-wrap: wrap; padding-bottom: 1rem; }
/* When open, lift the whole header off the page with a shadow so the menu
reads as a distinct panel instead of blending into the white hero below,
and give the top-level items hairline dividers so it reads as a list. */
.site-header.nav-open { box-shadow: 0 20px 34px -14px rgba(17,32,63,0.32); }
.nav-links.open > li { border-top: 1px solid var(--line); }
.nav-links.open > li:first-child { border-top: 0; }
/* The link list scrolls if it ever gets tall (several sections expanded) so
it can never push the CTAs or the page off-screen inside the sticky header. */
.nav-links.open { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .9rem; max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nav-links.open a, .nav-links.open .nav-trigger { padding: .7rem 0; }
.nav-actions.open { padding-top: .5rem; }
.nav-actions.open .btn { width: 100%; }
/* Dropdowns become tap-to-expand accordions on mobile — collapsed by default,
opened by toggling .expanded on the parent (see main.js). */
.nav-links.open .nav-menu {
position: static; opacity: 1; visibility: visible; transform: none;
background: transparent; border: 0; box-shadow: none; padding: 0 0 .4rem 1rem;
min-width: 0; margin: 0; display: none;
}
.nav-links.open .has-menu.expanded > .nav-menu { display: block; }
.nav-links.open .nav-menu-item { padding: .5rem .25rem; }
.nav-links.open .nav-menu-desc { display: none; }
.nav-links.open .nav-menu-title { color: var(--ink); font-weight: 500; font-size: .95rem; }
/* Keep the caret as the expand/collapse affordance, rotated when open. */
.nav-links.open .nav-trigger { justify-content: space-between; }
.nav-links.open .nav-trigger .caret { display: inline-block; transition: transform .2s ease; }
.nav-links.open .has-menu.expanded > .nav-trigger .caret { transform: rotate(180deg); }
}
@media (max-width: 1000px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-media { max-width: 520px; margin-inline: auto; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.trust-strip { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2rem; }
}
@media (max-width: 860px) {
.media-row, .media-row--flip .mr-media { grid-template-columns: 1fr; }
.media-row { grid-template-columns: 1fr; }
.media-row--flip .mr-media { order: -1; }
.cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: 1fr; }
.duo { grid-template-columns: 1fr; }
.page-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
body { font-size: 17px; }
.cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.trust-strip { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.btn-row .btn { width: 100%; }
.hero .lead { max-width: none; }
.footer-grid { grid-template-columns: 1fr; }
.photo-note { position: static; margin-top: 1rem; max-width: none; }
.media-frame::before { display: none; }
}
/* ============================================================
v14 — "Inaro vibrant glass" redesign (2026-06)
Multicolour + glassy + modern (monday.com energy). Appended last
so it re-skins the whole site by overriding the v13 tokens/components.
To dial back, delete from this banner to EOF.
============================================================ */
:root {
/* teal-led primary (from the new gem mark) */
--brand:#0E8C86; --brand-deep:#0A736E; --brand-light:#2DD4C4;
--brand-rgb:14,140,134; --brand-light-rgb:45,212,196;
--link:#0C7E78;
--ink:#0E1B33; --body:#1B2740; --muted:#5A6782; --line:#E5EAF2;
--wash-2:#F6F9FC; --wash:#EAF7F6;
/* multicolour accent system */
--teal:#0E8C86; --teal-deep:#0A736E; --teal-bright:#2DD4C4; --teal-rgb:14,140,134;
--coral:#FF6B6B; --coral-deep:#E14B4B; --coral-rgb:255,107,107;
--violet:#7C5CFC; --violet-deep:#5B3FD6; --violet-rgb:124,92,252;
--lime:#6FCB35; --lime-deep:#4E9A12; --lime-rgb:111,203,53;
--gold:#FFC53D; --gold-deep:#9A6B00;
/* gradients */
--grad-primary:linear-gradient(135deg,#1EC8BC 0%,#0E9AA8 45%,#2F62E0 100%);
--grad-text:linear-gradient(120deg,#0E9AA8,#7C5CFC 58%,#FF6B6B);
/* softer, larger, more modern */
--r-sm:14px; --r:18px; --r-lg:26px;
--shadow-sm:0 2px 8px rgba(16,30,60,0.05);
--shadow:0 10px 34px rgba(16,30,60,0.08);
--shadow-md:0 18px 50px rgba(16,30,60,0.10);
--shadow-lg:0 28px 72px rgba(16,30,60,0.14);
--shadow-brand:0 10px 28px rgba(14,140,134,0.32);
}
/* Frosted sticky header */
.site-header{ background:rgba(255,255,255,0.72); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); }
/* Buttons — gradient primary, bigger radius, glow */
.btn{ border-radius:14px; font-weight:700; }
.btn-primary{ background:var(--grad-primary); color:#fff; border:0; box-shadow:var(--shadow-brand); }
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 16px 40px rgba(14,140,134,0.42); }
.btn-outline{ border-radius:14px; border:1.5px solid var(--line); background:rgba(255,255,255,0.7); color:var(--ink); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.btn-outline:hover{ border-color:var(--teal); color:var(--teal-deep); background:#fff; transform:translateY(-2px); }
/* Cards — crisp, rounded, soft float */
.card{ background:#fff; border:1px solid rgba(14,140,134,0.10); border-radius:var(--r-lg); box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
/* Glass — for panels over colourful backgrounds */
.glass{ background:rgba(255,255,255,0.55); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); border:1px solid rgba(255,255,255,0.75); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
/* Hero — colourful gradient mesh + glassy art frame */
.hero{
background:
radial-gradient(48% 62% at 10% 16%, rgba(45,212,196,0.32), transparent 60%),
radial-gradient(46% 56% at 90% 8%, rgba(124,92,252,0.24), transparent 60%),
radial-gradient(52% 62% at 82% 96%, rgba(255,107,107,0.20), transparent 62%),
radial-gradient(46% 56% at 4% 98%, rgba(111,203,53,0.18), transparent 60%),
var(--wash-2);
}
.hero .accent{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-image-frame{ border-radius:28px; border:1px solid rgba(255,255,255,0.6); box-shadow:0 30px 72px rgba(16,30,60,0.18); overflow:hidden; }
/* Helpers */
.grad-text{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-grad{
background:
radial-gradient(42% 60% at 100% 0%, rgba(124,92,252,0.10), transparent 60%),
radial-gradient(42% 60% at 0% 100%, rgba(45,212,196,0.12), transparent 60%),
#FBFCFE;
}
/* Section accents recoloured */
.section-kicker{ color:var(--teal); }
.section-tint{ background:#F1FAF9; }
.section-warm{ background:linear-gradient(180deg,#FFF7E6,#FFFDF8); }
.section-dark{ background:linear-gradient(135deg,#0E9AA8 0%,#2F62E0 100%); }
.price-card.featured{ border-color:var(--teal); }
::selection{ background:var(--teal); color:#fff; }
/* ---- v14.1 — gradient navbar (stands out) + white nav text + glassy ---- */
.site-header{
background:linear-gradient(135deg, rgba(30,200,188,0.94) 0%, rgba(14,150,165,0.94) 45%, rgba(47,98,224,0.95) 100%);
-webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
border-bottom:1px solid rgba(255,255,255,0.16);
}
/* topbar: transparent over the gradient, white text */
.site-header .topbar{ background:transparent; border-bottom-color:rgba(255,255,255,0.18); }
.site-header .topbar a, .site-header .topbar button, .site-header .topbar .topbar-value,
.site-header .topbar .topbar-value strong, .site-header .topbar-a11y-label{ color:#fff; }
.site-header .topbar .sep{ color:rgba(255,255,255,0.5); }
/* top-level bar links → white (dropdown PANELS stay light; they're deeper than > li > a) */
.site-header .nav-trigger, .site-header .nav-links > li > a, .site-header .nav-help{ color:#fff; }
.site-header .nav-trigger .caret{ color:#fff; }
.site-header .nav-trigger:hover, .site-header .nav-links > li > a:hover,
.site-header .nav-help:hover, .site-header .nav-trigger:hover .caret{ color:var(--gold); }
.site-header .nav-toggle span{ background:#fff; }
/* CTAs on the gradient: outline → ghost-white; primary → solid white pill that pops */
.site-header .nav-actions .btn-outline{ border-color:rgba(255,255,255,0.55); color:#fff; background:rgba(255,255,255,0.12); }
.site-header .nav-actions .btn-outline:hover{ background:rgba(255,255,255,0.22); border-color:#fff; color:#fff; }
.site-header .nav-actions .btn-primary{ background:#fff; color:var(--teal-deep); box-shadow:0 6px 18px rgba(0,0,0,0.20); }
.site-header .nav-actions .btn-primary:hover{ background:#fff; filter:none; color:var(--brand); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.28); }
/* mobile menu sits on the gradient header — flip its items white, panels transparent */
@media (max-width:1100px){
.site-header .nav-links.open{ border-top-color:rgba(255,255,255,0.2); }
.site-header .nav-links.open > li{ border-top-color:rgba(255,255,255,0.18) !important; }
.site-header .nav-links.open .nav-trigger, .site-header .nav-links.open a,
.site-header .nav-links.open .nav-menu-title{ color:#fff; }
.site-header .nav-links.open .nav-menu-item:hover{ background:rgba(255,255,255,0.12); }
.site-header.nav-open{ box-shadow:0 20px 40px -14px rgba(8,20,46,0.5); }
}
/* ---- v14.2 — retire leftover cobalt + yellow; unify on teal/multicolour ---- */
:root{
/* accent: sunshine yellow -> bright teal (still a light fill that takes dark text) */
--accent:#23C4B6; --accent-deep:#0A736E; --accent-soft:#D6F5F0; --accent-rgb:35,196,182;
--gold:#23C4B6; --gold-deep:#0A736E;
/* dark / cobalt surfaces -> deep teal */
--dark:#0C6E74; --dark-2:#0A5760; --dark-rgb:12,110,116;
--brand-dark:#0E8C86; --brand-darkest:#0A736E;
--warm:#EAFBF8;
--shadow-accent:0 4px 16px rgba(35,196,182,0.35);
}
/* accent text stays readable on light backgrounds */
.accent{ color:var(--accent-deep); }
.section-kicker{ color:var(--teal); }
.section-warm{ background:linear-gradient(180deg,#EAFBF8,#FBFDFE); }
/* nav underline + hover go white on the gradient bar (no more yellow) */
.site-header .nav-links a::after, .site-header .nav-trigger::after{ background:rgba(255,255,255,0.92); }
.site-header .nav-trigger:hover, .site-header .nav-links > li > a:hover,
.site-header .nav-help:hover, .site-header .nav-trigger:hover .caret{ color:#fff; }
/* Footer → teal→cobalt gradient (bookends the gradient navbar); white/teal accents */
.site-footer{ background:linear-gradient(135deg,#0E9AA8 0%,#1E6FD6 100%); color:var(--on-dark); }
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer strong{ color:#fff; }
.section-dark a:not(.btn), .site-footer a:not(.btn){ color:rgba(255,255,255,0.86); }
.section-dark a:not(.btn):hover, .site-footer a:not(.btn):hover{ color:#fff; text-decoration:underline; }
/* ---- v14.3 — separate the top bar from the navbar + glassy see-through navbar ---- */
/* Navbar: translucent frosted gradient → reads as glass (hero/content shows through). */
.site-header{
background:linear-gradient(135deg, rgba(30,200,188,0.72) 0%, rgba(14,150,165,0.70) 45%, rgba(47,98,224,0.74) 100%);
-webkit-backdrop-filter:saturate(170%) blur(18px); backdrop-filter:saturate(170%) blur(18px);
border-bottom:1px solid rgba(255,255,255,0.20);
}
/* Top bar: a slim, deeper, SOLID strip so it's clearly its own band, with a hairline divider. */
.site-header .topbar{
background:#0A5760;
border-bottom:1px solid rgba(255,255,255,0.16);
}
/* ---- v14.4 — hero hook + "how it works" steps ---- */
.hero-eyebrow{
display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.86rem;
letter-spacing:.01em; color:var(--teal-deep); background:rgba(14,140,134,0.10);
padding:.4rem .9rem; border-radius:999px; margin-bottom:1.1rem;
}
.hero-trust{ margin-top:1.2rem; font-size:.92rem; color:var(--muted); font-weight:600; }
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:880px){ .how-grid{ grid-template-columns:1fr; } }
.how-step{ padding:1.9rem 1.7rem; }
.how-step h3{ margin:1rem 0 .5rem; color:var(--ink); }
.how-step p{ color:var(--muted); margin:0; }
.how-num{
display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:#fff;
background:var(--grad-primary); box-shadow:0 10px 24px rgba(14,140,134,0.34);
}
.how-cta{ display:flex; justify-content:center; margin-top:2.2rem; }
/* ---- v14.5 — persistent floating CTA (search→signup conversion) ---- */
.floating-cta{
position:fixed; right:1.15rem; bottom:1.15rem; z-index:90;
display:inline-flex; align-items:center; gap:.5rem;
padding:.85rem 1.35rem; border-radius:999px; color:#fff; font-weight:700;
font-family:var(--font-head); text-decoration:none;
background:var(--grad-primary); box-shadow:0 12px 30px rgba(14,140,134,0.45);
transition:transform .2s ease, box-shadow .2s ease;
}
.floating-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(14,140,134,0.55); color:#fff; }
.floating-cta:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
/* ---- v14.6 — sleeker header: multicolour top bar, WHITE navbar, standout gradient buttons ---- */
:root{
--grad-multi:linear-gradient(90deg,#16C8C8 0%,#2F62E0 36%,#7C5CFC 64%,#FF6B6B 90%);
--grad-primary:linear-gradient(135deg,#16C7BE 0%,#2F62E0 52%,#6A4CF0 100%); /* punchier, stands out */
}
/* Top bar = thin multicolour gradient strip (white text). */
.site-header .topbar{ background:var(--grad-multi); border-bottom:0; }
.site-header .topbar a, .site-header .topbar button, .site-header .topbar .topbar-value,
.site-header .topbar .topbar-value strong, .site-header .topbar-a11y-label{ color:#fff; }
.site-header .topbar .sep{ color:rgba(255,255,255,0.6); }
/* Main header (navbar) = clean white glass. */
.site-header{
background:rgba(255,255,255,0.88);
-webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px);
border-bottom:1px solid var(--line);
}
/* Nav text dark again on white. */
.site-header .nav-trigger, .site-header .nav-links > li > a, .site-header .nav-help{ color:var(--ink); }
.site-header .nav-trigger .caret{ color:var(--ink); }
.site-header .nav-trigger:hover, .site-header .nav-links > li > a:hover,
.site-header .nav-help:hover, .site-header .nav-trigger:hover .caret{ color:var(--teal-deep); }
.site-header .nav-links a::after, .site-header .nav-trigger::after{ background:var(--teal); }
.site-header .nav-toggle span{ background:var(--ink); }
/* Header CTAs: gradient primary pops on white; outline dark-on-white. */
.site-header .nav-actions .btn-primary{ background:var(--grad-primary); color:#fff; box-shadow:0 8px 22px rgba(47,98,224,0.34); }
.site-header .nav-actions .btn-primary:hover{ filter:brightness(1.05); color:#fff; transform:translateY(-2px); box-shadow:0 14px 34px rgba(47,98,224,0.45); }
.site-header .nav-actions .btn-outline{ border-color:var(--line); color:var(--ink); background:#fff; }
.site-header .nav-actions .btn-outline:hover{ border-color:var(--teal); color:var(--teal-deep); background:var(--wash); }
/* Mobile menu over the white header: dark items. */
@media (max-width:1100px){
.site-header .nav-links.open{ border-top-color:var(--line); }
.site-header .nav-links.open > li{ border-top-color:var(--line) !important; }
.site-header .nav-links.open .nav-trigger, .site-header .nav-links.open a,
.site-header .nav-links.open .nav-menu-title{ color:var(--ink); }
.site-header .nav-links.open .nav-menu-item:hover{ background:var(--wash); }
.site-header.nav-open{ box-shadow:0 20px 34px -14px rgba(17,32,63,0.22); }
}
/* ---- v14.7 — carry the multicolour through the whole site ---- */
/* Footer + dark CTA bands → the multicolour gradient (echoes the top strip). */
.site-footer{ background:linear-gradient(120deg,#0E9AA8 0%,#2F62E0 38%,#7C5CFC 70%,#FF6B6B 100%); }
.section-dark{ background:linear-gradient(120deg,#0E9AA8 0%,#2F62E0 42%,#7C5CFC 74%,#FF6B6B 100%); }
/* Richer colourful soft band. */
.section-grad{
background:
radial-gradient(40% 60% at 100% 0%, rgba(124,92,252,0.12), transparent 60%),
radial-gradient(40% 60% at 0% 100%, rgba(45,212,196,0.14), transparent 60%),
radial-gradient(44% 52% at 50% 118%, rgba(255,107,107,0.10), transparent 60%),
#FBFCFE;
}
/* 3-step "how it works" badges — one colour each. */
.how-grid .how-step:nth-child(1) .how-num{ background:linear-gradient(135deg,#16C8C8,#0E9AA8); box-shadow:0 10px 24px rgba(14,140,134,0.34); }
.how-grid .how-step:nth-child(2) .how-num{ background:linear-gradient(135deg,#8C6CFF,#5B3FD6); box-shadow:0 10px 24px rgba(124,92,252,0.34); }
.how-grid .how-step:nth-child(3) .how-num{ background:linear-gradient(135deg,#FF8A6B,#FF5E5E); box-shadow:0 10px 24px rgba(255,107,107,0.34); }
/* Trust-strip icons cycle colour. */
.stat-row .stat:nth-child(1) svg{ color:#0E9AA8; }
.stat-row .stat:nth-child(2) svg{ color:#7C5CFC; }
.stat-row .stat:nth-child(3) svg{ color:#FF6B6B; }
/* "I'm looking for…" choice cards — distinct accent per card. */
.choice-grid .choice-card:nth-child(1) .choice-eyebrow, .choice-grid .choice-card:nth-child(1) .choice-cta{ color:#0E9AA8; }
.choice-grid .choice-card:nth-child(2) .choice-eyebrow, .choice-grid .choice-card:nth-child(2) .choice-cta{ color:#7C5CFC; }
/* Section kickers pick up the brand teal (already), keep accent text teal-deep. */
/* ---- v14.8 — back to the single teal→cobalt gradient everywhere (no rainbow) ---- */
:root{
--grad-primary:linear-gradient(135deg,#1EC8BC 0%,#0E9AA8 42%,#2F62E0 100%); /* the button gradient */
--grad-multi:linear-gradient(90deg,#16C8C8 0%,#2F62E0 100%);
--grad-text:linear-gradient(120deg,#0E9AA8 0%,#2F62E0 100%);
}
/* Top bar, footer, dark CTA bands → teal→cobalt */
.site-header .topbar{ background:var(--grad-multi); }
.site-footer{ background:linear-gradient(120deg,#0E9AA8 0%,#2F62E0 100%); }
.section-dark{ background:linear-gradient(120deg,#0E9AA8 0%,#2F62E0 100%); }
/* Hero mesh + accent text → teal/cobalt only */
.hero{
background:
radial-gradient(50% 62% at 12% 16%, rgba(45,212,196,0.30), transparent 60%),
radial-gradient(48% 56% at 88% 10%, rgba(47,98,224,0.20), transparent 62%),
var(--wash-2);
}
.hero .accent, .grad-text{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-grad{
background:
radial-gradient(42% 60% at 100% 0%, rgba(47,98,224,0.10), transparent 60%),
radial-gradient(42% 60% at 0% 100%, rgba(45,212,196,0.13), transparent 60%),
#FBFCFE;
}
/* Accents that went rainbow → all teal→cobalt (match v14.7 specificity to win) */
.how-grid .how-step:nth-child(1) .how-num,
.how-grid .how-step:nth-child(2) .how-num,
.how-grid .how-step:nth-child(3) .how-num{ background:var(--grad-primary); box-shadow:0 10px 24px rgba(14,140,134,0.32); }
.stat-row .stat:nth-child(1) svg, .stat-row .stat:nth-child(2) svg, .stat-row .stat:nth-child(3) svg{ color:var(--teal-deep); }
.choice-grid .choice-card:nth-child(1) .choice-eyebrow, .choice-grid .choice-card:nth-child(2) .choice-eyebrow,
.choice-grid .choice-card:nth-child(1) .choice-cta, .choice-grid .choice-card:nth-child(2) .choice-cta{ color:var(--teal-deep); }
/* ---- v14.9 — product preview (app mock) ---- */
.app-mock{ max-width:940px; margin:0 auto; border-radius:22px; overflow:hidden; padding:0; }
.app-mock-bar{ display:flex; align-items:center; gap:.45rem; padding:.7rem 1rem; background:rgba(14,27,51,0.05); border-bottom:1px solid rgba(14,140,134,0.12); }
.app-mock-bar > span{ width:11px; height:11px; border-radius:50%; background:#CBD5E6; }
.app-mock-url{ width:auto; height:auto; flex:1; margin-left:.6rem; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.28rem .7rem; font-size:.8rem; color:var(--muted); }
.app-mock-body{ padding:1.4rem; background:rgba(255,255,255,0.55); }
.app-mock-search{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1.3rem; }
.app-mock-search input{ flex:1; min-width:170px; padding:.7rem .9rem; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font:inherit; }
.app-mock-chip{ padding:.5rem .85rem; border-radius:999px; background:var(--wash); color:var(--teal-deep); font-weight:600; font-size:.85rem; white-space:nowrap; }
.app-mock-find{ padding:.7rem 1.15rem; border-radius:12px; background:var(--grad-primary); color:#fff; font-weight:700; font-size:.9rem; box-shadow:0 8px 20px rgba(14,140,134,0.3); }
.app-mock-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .app-mock-grid{ grid-template-columns:1fr; } }
.app-mock-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.1rem; box-shadow:var(--shadow-sm); }
.app-mock-av{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:var(--grad-primary); margin-bottom:.75rem; }
.app-mock-name{ font-family:var(--font-head); font-weight:700; color:var(--ink); margin:0; }
.app-mock-loc{ font-size:.85rem; color:var(--muted); margin:.1rem 0 .7rem; }
.app-mock-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.9rem; }
.app-mock-tags span{ font-size:.74rem; padding:.22rem .6rem; border-radius:999px; background:var(--wash); color:var(--teal-deep); }
.app-mock-btn{ display:block; text-align:center; padding:.55rem; border-radius:10px; border:1.5px solid var(--line); color:var(--teal-deep); font-weight:600; font-size:.86rem; }
/* ---- v15.0 — tonal section rhythm (one brand hue at varied intensity) ----
Plain sections = clean white; .section-grad = a visibly teal wash; .section-dark
stays the teal→cobalt band. Ordered after .section so multi-class elements
(e.g. "section section-dark") keep the grad/dark background, not white. */
.section{ background:#FFFFFF; }
.section-grad{
background:
radial-gradient(62% 82% at 100% 0%, rgba(45,212,196,0.16), transparent 62%),
radial-gradient(56% 76% at 0% 100%, rgba(47,98,224,0.09), transparent 62%),
#EDF7F6;
}
.section-dark{ background:linear-gradient(120deg,#0E9AA8 0%,#2F62E0 100%); }
/* ---- v17 — nav "Find support" CTA → solid cobalt (stands out from the teal) ---- */
.nav-actions .btn-primary{ background:#2F62E0; background-image:none; box-shadow:0 8px 20px rgba(47,98,224,0.28); }
.nav-actions .btn-primary:hover{ background:#264FBF; filter:none; }
/* ──────────────────────────────────────────────────────────────────────────
v18 — IndyForms-style: flat BRIGHT BLUE (#1E66E6) + GOLD (#FFC83D).
De-gradients the palette and styles the new homepage components
(logo strip, problem split, 6-up feature grid, quotes). Appended last.
────────────────────────────────────────────────────────────────────────── */
:root{
--brand:#1E66E6; --brand-deep:#1750C0; --brand-light:#4D86F0; --link:#1E66E6; --brand-rgb:30,102,230;
--accent:#FFC83D; --accent-deep:#8A6100; --accent-soft:#FFF3CF; --accent-rgb:255,200,61;
--ink:#11203F; --body:#39435C; --muted:#6B7488; --line:#E4E8F2;
--wash:#EEF3FD; --wash-2:#FFFFFF; --dark:#1E66E6;
}
/* Buttons — flat */
.btn-primary{ background:#1E66E6; background-image:none; box-shadow:0 8px 18px rgba(30,102,230,0.22); color:#fff; }
.btn-primary:hover{ background:#1750C0; filter:none; }
.btn-secondary{ background:#FFC83D; background-image:none; color:#11203F; box-shadow:none; border:0; }
.btn-secondary:hover{ background:#F2B92E; color:#11203F; }
.btn-outline{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn-outline:hover{ background:var(--wash); border-color:var(--brand); color:var(--brand); }
.nav-actions .btn-primary{ background:#1E66E6; background-image:none; box-shadow:0 8px 18px rgba(30,102,230,0.22); }
.nav-actions .btn-primary:hover{ background:#1750C0; filter:none; }
/* Topbar (dark) + footer (deep blue) + cta band (bright blue) */
.site-header .topbar{ background:#11203F; }
.site-header .topbar, .site-header .topbar a, .site-header .topbar button, .site-header .topbar .topbar-value{ color:#fff; }
.site-header .topbar .topbar-value strong{ color:#FFC83D; }
.site-footer{ background:#0F2E6B; }
.cta-band{ background:#1E66E6; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,0.92); }
/* Section tones — white / soft blue-grey alternating */
.hero{ background:#FFFFFF; }
.section-grad, .bg-soft{ background:#F4F7FC; }
.section-dark{ background:#1E66E6; }
/* Accent words → solid blue (no gradient text); white on dark bands */
.hero .accent, .grad-text, .accent{
background:none!important; background-image:none!important;
-webkit-background-clip:initial!important; background-clip:initial!important;
-webkit-text-fill-color:#1E66E6!important; color:#1E66E6!important;
}
.section-dark .accent, .cta-band .accent{ -webkit-text-fill-color:#fff!important; color:#fff!important; }
/* Hero + problem illustrations */
.hero-illu, .prob-illu{ width:100%; height:auto; display:block; }
.hero-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--brand); text-decoration:none; padding:.7rem .2rem; }
.hero-link:hover{ text-decoration:underline; }
/* Social-proof logo strip (placeholder) */
.logo-strip{ padding:2.4rem 0 1.6rem; background:#fff; border-bottom:1px solid var(--line); }
.logo-strip-title{ text-align:center; color:var(--muted); font-size:.92rem; font-weight:600; margin-bottom:1.2rem; }
.logo-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.1rem 2.2rem; align-items:center; }
.logo-ph{ display:inline-grid; place-items:center; width:128px; height:40px; border-radius:8px; background:#EEF1F6; color:#AEB6C6; font-weight:700; font-size:.8rem; }
.placeholder-note{ text-align:center; color:#AEB6C6; font-size:.78rem; margin-top:1rem; font-style:italic; }
/* Problem split */
.split-row{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:820px){ .split-row{ grid-template-columns:1fr; } }
.split-text h2{ margin-bottom:1rem; }
.pain-list{ list-style:none; padding:0; margin:0 0 1.3rem; display:grid; gap:.6rem; }
.pain-list li{ position:relative; padding-left:2.1rem; color:var(--body); }
.pain-list li::before{ content:""; position:absolute; left:0; top:.1rem; width:21px; height:21px; border-radius:50%; background:#FDECEC; }
.pain-list li::after{ content:"\00d7"; position:absolute; left:6px; top:-.04rem; color:#E0586E; font-weight:800; }
/* Feature grid (6) */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.6rem; box-shadow:0 1px 2px rgba(16,30,60,.04),0 10px 26px rgba(16,30,60,.05); }
.feature-card .icon-mark{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:#EAF1FE; color:var(--brand); margin-bottom:1rem; }
.feature-card .icon-mark svg{ width:24px; height:24px; }
.feature-card h3{ margin-bottom:.4rem; }
.feature-card p{ color:var(--muted); }
/* Eyebrow chip (gold accent) */
.eyebrow{ display:inline-block; background:var(--accent-soft); color:#8A6100; font-weight:700; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .75rem; border-radius:999px; margin-bottom:.85rem; }
/* Alternating media row */
.media-row.reverse .mr-text{ order:2; }
.media-row.reverse .mr-media{ order:1; }
/* Testimonials */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:820px){ .quote-grid{ grid-template-columns:1fr; } }
.quote-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.6rem; margin:0; box-shadow:0 1px 2px rgba(16,30,60,.04),0 10px 26px rgba(16,30,60,.05); }
.quote-card blockquote{ margin:0 0 1rem; font-size:1.04rem; color:var(--ink); line-height:1.5; }
.quote-name{ display:block; font-weight:700; color:var(--ink); }
.quote-role{ display:block; color:var(--muted); font-size:.88rem; }
/* Flatten leftover gradient accents from earlier layers */
.how-grid .how-step .how-num{ background:#1E66E6!important; box-shadow:0 8px 18px rgba(30,102,230,.24)!important; }
.app-mock-find, .floating-cta{ background:#1E66E6!important; background-image:none!important; }
/* ──────────────────────────────────────────────────────────────────────────
v19 — IndyForms direction: no top bar, COLOURED CURVED HERO, big flat
coloured nav buttons, bright-GREEN primary CTA. Blue + yellow + green.
────────────────────────────────────────────────────────────────────────── */
:root{ --green:#16A95B; --green-deep:#0F8A49; }
/* Nav action buttons — big, flat, coloured (not gradients) */
.nav-actions{ display:flex; align-items:center; gap:.7rem; }
.nav-actions .nav-signin{ font-weight:700; color:var(--ink); text-decoration:none; padding:.55rem .5rem; }
.nav-actions .nav-signin:hover{ color:var(--brand); }
.btn-blue{ background:#1E66E6; background-image:none; color:#fff; border:0; box-shadow:0 8px 18px rgba(30,102,230,0.22); }
.btn-blue:hover{ background:#1750C0; color:#fff; }
.btn-green{ background:var(--green); background-image:none; color:#fff; border:0; box-shadow:0 10px 20px rgba(22,169,91,0.28); }
.btn-green:hover{ background:var(--green-deep); color:#fff; filter:none; }
.nav-actions .btn{ padding:.72rem 1.3rem; font-size:1rem; border-radius:12px; font-weight:700; }
/* Coloured CURVED hero (blue, white text, curved bottom edge) */
.hero{
background:#1E66E6; color:#fff;
border-bottom-left-radius:50% 70px; border-bottom-right-radius:50% 70px;
padding-bottom:clamp(3.5rem,8vw,7rem); margin-bottom:.5rem;
}
.hero h1{ color:#fff; }
.hero .accent{ -webkit-text-fill-color:#FFC83D!important; color:#FFC83D!important; }
.hero .lead{ color:rgba(255,255,255,0.94); }
.hero .lead strong{ color:#fff; }
.hero-trust{ color:rgba(255,255,255,0.82); }
.hero-link, .hero-link.light{ color:#fff; }
.hero-link:hover{ color:#fff; text-decoration:underline; }
/* Lift the illustration's backdrop off the blue hero */
.hero-illu rect:first-of-type{ fill:#3B7BEC; }
/* Bright-green floating CTA */
.floating-cta{ background:var(--green)!important; background-image:none!important; box-shadow:0 12px 26px rgba(22,169,91,0.4)!important; }
/* v19.1 — hero trust line fully white on the blue hero */
.hero .hero-trust{ color:#FFFFFF !important; }
/* ──────────────────────────────────────────────────────────────────────────
v20 — match the indyforms screenshot: deep-navy hero with a white WAVE
bottom (not a dome), big pill nav buttons (outline Log in + solid green),
brighter green. Appended last.
────────────────────────────────────────────────────────────────────────── */
:root{ --green:#23B065; --green-deep:#199653; }
/* Hero — deep navy with a subtle gradient + a white wave along the bottom */
.hero{
background:linear-gradient(125deg,#1C2A7C 0%,#2A3AA0 100%);
color:#fff; border-radius:0; position:relative; margin-bottom:0;
padding-bottom:clamp(5rem,9vw,8rem);
}
.hero h1{ color:#fff; }
.hero .lead{ color:rgba(255,255,255,0.92); }
.hero .lead strong{ color:#fff; }
.hero .hero-trust{ color:#fff !important; }
.hero-link, .hero-link.light{ color:#fff; }
.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; pointer-events:none; }
.hero-wave svg{ display:block; width:100%; height:72px; }
.hero-illu rect:first-of-type{ fill:#EAF1FE; }
/* Big, bold pill nav buttons — outline "Log in" + solid green CTA */
.nav-actions{ display:flex; align-items:center; gap:.7rem; }
.nav-actions .nav-signin{ font-weight:700; color:var(--ink); text-decoration:none; padding:.5rem .4rem; }
.nav-actions .nav-signin:hover{ color:var(--brand); }
.btn-ghost{ background:#fff; border:2px solid #1E66E6; color:#1E66E6; }
.btn-ghost:hover{ background:#EAF1FE; color:#1750C0; }
.nav-actions .btn{ padding:.82rem 1.55rem; font-size:1.02rem; border-radius:12px; font-weight:700; }
.btn-green{ background:var(--green); background-image:none; color:#fff; border:0; box-shadow:0 10px 20px rgba(35,176,101,0.28); }
.btn-green:hover{ background:var(--green-deep); color:#fff; filter:none; }
/* Bigger hero CTA */
.hero .btn.btn-lg{ padding:1rem 1.9rem; font-size:1.1rem; border-radius:12px; }
.floating-cta{ background:var(--green)!important; }
/* v20.1 — hero: visible navy → light sky-blue gradient, smaller band + wave */
.hero{ background:linear-gradient(100deg,#1A2876 0%,#2A4DBC 44%,#6FB0F0 100%); padding-bottom:clamp(2.5rem,5vw,4rem); }
.hero-wave svg{ height:46px; }
.hero-illu rect:first-of-type{ fill:#FFFFFF; }
/* ──────────────────────────────────────────────────────────────────────────
v21 — more visible hero curve + mobile fixes for the rebuild
────────────────────────────────────────────────────────────────────────── */
.hero-wave svg{ height:64px; }
/* Hero stacks cleanly on small screens */
@media (max-width:860px){
.hero .hero-asym{ display:flex; flex-direction:column; gap:1.3rem; text-align:center; }
.hero .hero-asym .hero-text{ order:1; }
.hero .hero-asym .hero-art{ order:2; width:100%; max-width:380px; margin:0 auto; }
.hero .btn-row{ justify-content:center; flex-wrap:wrap; }
.hero .hero-link{ justify-content:center; }
.media-row.reverse .mr-text, .media-row.reverse .mr-media{ order:0; }
}
/* Compact, fitting nav buttons on tablet/phone (Apply moves into the menu) */
@media (max-width:1100px){
.nav-actions{ gap:.45rem; }
.nav-actions .nav-signin{ display:none; }
.nav-actions .btn{ padding:.56rem .95rem; font-size:.9rem; border-radius:10px; }
}
@media (max-width:560px){
.site-header .brand-logo{ max-height:30px; width:auto; }
.nav-actions .btn{ padding:.5rem .8rem; font-size:.84rem; }
.search-form-row{ flex-direction:column; align-items:stretch; }
.search-form-row > *{ width:100%; }
.feature-grid, .quote-grid{ gap:1rem; }
}
/* Kill any horizontal overflow on phones */
html, body{ overflow-x:hidden; }
/* keep the hero "see how it works" link white on the navy hero */
.hero .hero-link, .hero .hero-link.light{ color:#fff !important; }
/* Nav dropdown carets — always clearly visible on the white navbar */
.site-header .nav-trigger{ display:inline-flex; align-items:center; }
.site-header .nav-trigger .caret{
display:inline-block !important; width:15px; height:15px; margin-left:.34rem;
opacity:1 !important; color:#11203F !important; stroke-width:3; vertical-align:middle;
}
.site-header .nav-trigger:hover .caret{ color:#1E66E6 !important; }
.site-header .has-menu:hover .nav-trigger .caret,
.site-header .has-menu:focus-within .nav-trigger .caret{ transform:rotate(180deg); }
/* Bulletproof dropdown arrow on nav triggers — solid ▾ after the label.
The inline SVG chevron wasn't showing, so render a real character instead. */
.site-header .nav-trigger > .caret{ display:none !important; }
.site-header .nav-trigger::before{
content:"\25BE"; order:1; color:#11203F; font-size:.72em; line-height:1;
margin-left:.18rem; transition:transform .2s ease;
}
.site-header .nav-trigger:hover::before{ color:#1E66E6; }
.site-header .has-menu:hover .nav-trigger::before,
.site-header .has-menu:focus-within .nav-trigger::before{ transform:rotate(180deg); }
/* ──────────────────────────────────────────────────────────────────────────
NEW BRAND — primary BLUE #1339f5 + accent PINK #fb4faf (matches the new logo)
Appended last; overrides the earlier indyforms blue/green/gold.
────────────────────────────────────────────────────────────────────────── */
:root{
--brand:#1339f5; --brand-deep:#0E2BBF; --brand-light:#4A63FF; --link:#1339f5; --brand-rgb:19,57,245;
--accent:#fb4faf; --accent-deep:#C8307F; --accent-soft:#FFE1F0; --accent-rgb:251,79,175;
--gold:#fb4faf; --gold-deep:#C8307F;
--teal:#1339f5; --teal-deep:#0E2BBF; --teal-bright:#4A63FF;
--green:#fb4faf; --green-deep:#E23B97;
--dark:#1339f5; --dark-2:#0E2BBF;
}
/* Buttons */
.btn-primary,.nav-actions .btn-primary{ background:#1339f5!important; background-image:none!important; box-shadow:0 8px 18px rgba(19,57,245,.22); color:#fff; }
.btn-primary:hover,.nav-actions .btn-primary:hover{ background:#0E2BBF!important; filter:none; }
.btn-blue{ background:#1339f5; background-image:none; color:#fff; } .btn-blue:hover{ background:#0E2BBF; color:#fff; }
.btn-green{ background:#fb4faf; background-image:none; color:#fff; box-shadow:0 10px 20px rgba(251,79,175,.30); } .btn-green:hover{ background:#E23B97; color:#fff; }
.btn-secondary{ background:#fb4faf; background-image:none; color:#fff; } .btn-secondary:hover{ background:#E23B97; color:#fff; }
.btn-ghost{ background:#fff; border:2px solid #1339f5; color:#1339f5; } .btn-ghost:hover{ background:#EEF1FF; color:#0E2BBF; }
.btn-outline:hover{ border-color:#1339f5; color:#1339f5; background:#EEF1FF; }
/* Hero — brand-blue band, pink accent word */
.hero{ background:linear-gradient(118deg,#1339f5 0%,#3650ff 52%,#8AA0FF 100%)!important; }
.hero h1{ color:#fff; } .hero .lead{ color:rgba(255,255,255,.94); } .hero .lead strong{ color:#fff; }
.hero .accent{ -webkit-text-fill-color:#fb4faf!important; color:#fb4faf!important; background:none!important; }
/* Generic accent text -> pink (white on dark bands) */
.accent,.grad-text{ -webkit-text-fill-color:#fb4faf!important; color:#fb4faf!important; background:none!important; -webkit-background-clip:initial!important; background-clip:initial!important; }
.section-dark .accent,.cta-band .accent,.site-footer .accent{ -webkit-text-fill-color:#fff!important; color:#fff!important; }
/* Dark surfaces */
.site-footer{ background:#0B1E8C!important; }
.section-dark,.cta-band{ background:#1339f5!important; }
/* Nav arrow + underline + hover */
.site-header .nav-trigger::before{ color:#1339f5!important; }
.site-header .nav-trigger:hover::before{ color:#fb4faf!important; }
.site-header .nav-links a::after,.site-header .nav-trigger::after{ background:#fb4faf!important; }
.site-header .nav-trigger:hover,.site-header .nav-links>li>a:hover{ color:#1339f5!important; }
/* Accents elsewhere */
.feature-card .icon-mark{ background:#E7ECFF; color:#1339f5; }
.eyebrow{ background:#FFE1F0; color:#C8307F; }
.section-kicker{ color:#1339f5; }
.how-grid .how-step .how-num{ background:#1339f5!important; }
.app-mock-find,.floating-cta{ background:#fb4faf!important; background-image:none!important; }
.pain-list li::after{ color:#fb4faf; }
::selection{ background:#fb4faf; color:#fff; }
/* ── Brand fixes ── */
/* 1. Hero accent word: white on the blue band (pink had poor contrast) */
.hero .accent{ -webkit-text-fill-color:#fff !important; color:#fff !important; background:none !important; }
/* 2. Outline buttons on coloured/dark bands were white-text on a white base bg
(invisible until hover). Make them transparent with a white outline + text. */
.cta-band .btn-outline, .section-dark .btn-outline, .hero .btn-outline, .bg-blue .btn-outline,
.section-grad .btn-outline.on-dark{
background:transparent !important; border-color:rgba(255,255,255,0.65) !important; color:#fff !important;
}
.cta-band .btn-outline:hover, .section-dark .btn-outline:hover, .hero .btn-outline:hover, .bg-blue .btn-outline:hover{
background:rgba(255,255,255,0.16) !important; border-color:#fff !important; color:#fff !important;
}
/* ──────────────────────────────────────────────────────────────────────────
Hero cutout photo — emerges from the wave; fits inside the curve on mobile.
────────────────────────────────────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; min-height:clamp(460px,46vw,560px); }
.hero .hero-asym{ position:relative; z-index:2; }
.hero-photo{
position:absolute; right:4%; bottom:0; width:38%; max-width:430px; height:auto;
display:block; z-index:2; filter:drop-shadow(0 12px 26px rgba(8,15,45,0.32));
}
.hero-wave{ z-index:4; } /* the white wave sits over the photo's base -> blends into the curve */
@media (max-width:860px){
.hero{ min-height:0; padding-bottom:0; }
.hero .hero-asym{ text-align:center; padding-bottom:1rem; }
.hero .btn-row{ justify-content:center; flex-wrap:wrap; }
.hero .hero-link{ justify-content:center; }
/* photo flows below the text, centred, its base tucked into the wave */
.hero-photo{ position:relative; right:auto; bottom:0; left:50%; transform:translateX(-50%);
width:66%; max-width:260px; margin:.5rem auto -2px; }
}
/* ── Hero framed photo (overrides the earlier cutout positioning) ── */
.hero{ min-height:0 !important; overflow:visible; }
.hero .hero-asym{ align-items:center; }
.hero-art{ position:relative; align-self:center; }
.hero-frame{
position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3;
border:4px solid rgba(255,255,255,0.92);
box-shadow:0 26px 54px -20px rgba(8,15,45,0.55);
}
.hero-photo{
position:static !important; right:auto !important; bottom:auto !important; left:auto !important;
transform:none !important; margin:0 !important; filter:none !important;
display:block; width:100% !important; max-width:none !important; height:100%; object-fit:cover;
}
@media (max-width:860px){
.hero-frame{ max-width:440px; margin:1rem auto 0; aspect-ratio:16/11; }
}
/* ── Hero photo → playful circle with floating bubbles (replaces the flat frame) ── */
.hero{ overflow:hidden !important; }
.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:340px; }
.hero-frame{
position:relative; z-index:2; width:min(80%,360px); aspect-ratio:1/1; border-radius:50%;
overflow:hidden; border:6px solid #fff; background:#0b1e8c;
box-shadow:0 24px 50px -16px rgba(8,15,45,0.55);
}
.hero-photo{
position:static !important; right:auto !important; bottom:auto !important; left:auto !important;
transform:none !important; margin:0 !important; filter:none !important;
display:block; width:100% !important; max-width:none !important; height:100%; object-fit:cover;
}
/* Bubbles — pink + white circles, some filled, some rings */
.hero-bubble{ position:absolute; border-radius:50%; z-index:1; }
.hb1{ width:26px; height:26px; background:#fb4faf; top:6%; left:16%; }
.hb2{ width:64px; height:64px; background:#fff; opacity:.16; bottom:4%; right:8%; }
.hb3{ width:16px; height:16px; background:#fff; bottom:20%; left:9%; }
.hb4{ width:42px; height:42px; border:7px solid #fb4faf; right:5%; top:14%; }
.hb5{ width:30px; height:30px; border:5px solid #fff; opacity:.6; bottom:26%; right:24%; }
.hb6{ width:12px; height:12px; background:#fb4faf; top:30%; right:30%; }
/* Mobile: keep the photo inside the curve (clip + leave room for the wave) */
@media (max-width:860px){
.hero{ padding-bottom:66px !important; }
.hero-art{ min-height:0; margin-top:.5rem; }
.hero-frame{ width:62%; max-width:230px; }
.hb2{ width:44px; height:44px; } .hb4{ width:30px; height:30px; border-width:5px; }
}
/* ── Inner-page brand consistency: retire leftover warm/yellow washes ── */
:root{
--warm:#FFE6F2; /* bg-gold / warm bands -> soft pink (was pale yellow) */
--wash:#EAF0FF; /* bg-sky / pale accent band -> soft blue */
}
.bg-gold{ background:#FFE6F2; }
.bg-sky{ background:#EAF0FF; }
.bg-warm{ background:#FFF0F7; }
.bg-cream{ background:#FFFFFF; }
/* page-hero accent stays pink; dark page-hero variants get white text */
.page-hero .accent{ color:#fb4faf; }
.page-hero.bg-blue .accent, .page-hero.bg-teal .accent{ color:#fff; }
/* ── Hero search bar (white, sits on the blue hero) ── */
.hero-search{
display:flex; flex-wrap:wrap; gap:.5rem; background:#fff; padding:.5rem;
border-radius:16px; box-shadow:0 18px 40px -16px rgba(8,15,45,0.5); max-width:560px;
}
.hero-search input{ flex:1; min-width:160px; border:0; padding:.75rem .9rem; border-radius:11px; font:inherit; color:var(--ink); background:#fff; }
.hero-search input::placeholder{ color:var(--muted); }
.hero-search input:focus{ outline:2px solid var(--brand); }
.hero-search select{ border:0; padding:.75rem .7rem; border-radius:11px; font:inherit; color:var(--ink); background:#F1F3FB; cursor:pointer; }
.hero-search .btn-green{ flex-shrink:0; }
@media (max-width:560px){ .hero-search{ flex-direction:column; } .hero-search > *{ width:100%; } }
/* ── Fix: nav links overlapping the action buttons (desktop only) ── */
@media (min-width:1101px){
.site-header .nav{ display:flex; align-items:center; gap:1.75rem; grid-template-columns:none; grid-template-areas:none; }
.site-header .brand{ flex:0 0 auto; }
.site-header .nav-links{ flex:0 1 auto; min-width:0; }
.site-header .nav-actions{ flex:0 0 auto; margin-left:auto; gap:.6rem; }
.site-header .nav-actions .btn{ padding:.6rem 1.05rem; font-size:.92rem; }
}
/* ── Redesign: hero search as a clean pill ── */
.hero-search{
display:flex; align-items:center; gap:.4rem; background:#fff; padding:.5rem .55rem;
border-radius:999px; box-shadow:0 20px 45px -15px rgba(8,15,45,0.55); max-width:600px; margin-top:.25rem;
}
.hero-search input{ flex:1; min-width:120px; border:0; background:transparent; padding:.7rem 1rem; font-size:1.02rem; color:var(--ink); }
.hero-search input::placeholder{ color:var(--muted); }
.hero-search input:focus{ outline:none; }
.hero-search select{ border:0; background:transparent; border-left:1px solid var(--line); padding:.7rem .8rem; color:var(--ink); cursor:pointer; max-width:170px; }
.hero-search .btn-green{ border-radius:999px; flex-shrink:0; padding:.72rem 1.5rem; }
@media (max-width:600px){
.hero-search{ border-radius:20px; flex-wrap:wrap; padding:.6rem; }
.hero-search input, .hero-search select, .hero-search .btn-green{ width:100%; }
.hero-search select{ border-left:0; border-top:1px solid var(--line); max-width:none; }
}