/* --------------------------------------------------------- Loving Care Disability Services — design tokens Cream/ink base + given radius carried over from brief; accent hues sampled from the LCDS mark (blue + orange). --------------------------------------------------------- */ :root { /* Surface hierarchy: base -> elevated -> recessed. The peach is now an accent, reserved for the masthead + hero. */ /* Neutral grey base + pure white cards. Was #e5e5e5 (kismet's value); lifted to #eff0f0 — trymeridian.com's base — so the whole site sits on one slightly brighter neutral. Every page inherits this through `body`. */ --cream: #eff0f0; --paper: #ffffff; --surface-alt: #ededed; /* Masthead + hero share this. Set to the page base so the hero reads as one continuous surface with the rest of the site (was sage #dbe2cd). */ --accent-warm: #eff0f0; --ink: #241f1c; /* Darkened from #6b6058 on 2026-08-24. At the old value this sat at 5.35:1 on the cream base — passing, but with only 0.85 of headroom above AA, which is what capped the page-wide dot field at a barely-visible alpha. #5a514a measures 6.62:1 and buys back ~1.3 of that budget. Every one of its 30 uses is re-checked against its real rendered background by _ink-soft-audit.mjs, because a few sit on dark surfaces where darkening HURTS. */ --ink-soft: #5a514a; --line: #e3dbd2; --sun: #a4552a; --sun-dark: #83421f; --sky: #5f7565; --sky-deep: #3a4a3f; /* Warm glow, ported from trymeridian.com. Their hero is `linear-gradient(0deg, #f75d00, #eff0f0 50%)` — a saturated orange pooled at the section's bottom edge dissolving upward into the page base. That base is near-identical to our --cream, so the blend transfers directly. One change from the reference: Meridian lets the orange run to full saturation at the bottom edge because a white strip follows it. Our hero is followed by the dark green zone, and orange meeting that head-on reads as a hard seam. So the glow peaks at --glow-peak and fades back to the page base by --glow-fade, leaving a neutral bottom edge for the dark section to meet. */ --glow: #f9832f; --glow-peak: 18%; --glow-fade: 55%; /* How much of --glow the hero band is allowed to reach. The band used to run to full #f9832f at --glow-peak and the user called it too much orange on 2026-08-27, so the peak is now a mix toward the page base rather than the raw token. --glow itself is unchanged: it still drives the .arc-card gradient and the card/footer dot fields at full strength, so this dims the hero only. Raise the percentage to bring the orange back. */ --glow-hero: color-mix(in srgb, var(--glow) 45%, var(--accent-warm)); /* Button fill — warm gold. The roles inverted 2026-08-24: gold is now the resting fill and the logo blue became the colour in motion (see the sweep tokens below). Label text had to flip with it — cream on gold is ~2:1, so buttons now carry --ink. */ --cta: #f2a51a; --cta-dark: #d9910f; /* The blue that stayed. Still the LCDS mark's blue, held dark enough to pass AA as text on the light page base; the sweep uses a lighter tint. */ --blue-ink: #1f6ba5; /* Endpoints of the CTA's sweep (see .btn-chars::before). --cta-sweep-a is the resting fill, --cta-sweep-b is the travelling band. All three stops are chosen so --ink label text clears AA across the whole sweep — measured with _sweep-contrast.mjs by decoding real pixels, not reasoned about. The band is a LIGHT blue on purpose: the mark's full-strength #1f6ba5 drops dark-on-blue to 2.88:1 and would fail mid-sweep. */ --cta-sweep-a: #f2a51a; --cta-sweep-b: #5fa3d9; /* Bridges gold to blue through a pale tint rather than blending them directly — they are near-complementary, so a straight blend meets in a muddy grey-olive. Same lesson as the previous blue/rust pairing. */ --cta-sweep-mid: #e6d9bf; --radius: 1.5rem; --radius-sm: 0.85rem; /* Tighter corner for compact cards sitting inside a larger surface — trymeridian.com's enterprise cards, measured at 10px. */ --radius-xs: 0.625rem; --radius-pill: 999px; /* Shared neumorphic pill treatment used by Services headings and homepage card labels. Centralized so the two components cannot drift apart. */ --soft-pill-surface: #e0e5ec; --soft-pill-ink: #3d4852; --soft-pill-accent: #6c63ff; --soft-pill-shadow-dark: rgba(163, 177, 198, 0.62); --soft-pill-shadow-light: rgba(255, 255, 255, 0.72); /* Single family throughout, as kismet.healthcare does. Was Hanken Grotesk (a free stand-in for kismet's commercial TT Hoves Pro); swapped to DM Sans on 2026-09-09 at the user's request, after biofarma.com.ar/nosotros was found to use it. Free, open-source (SIL OFL), loaded the same way Hanken was -- no licensing gate needed, unlike the TT Hoves/TT Norms trial packs evaluated earlier (tt-hoves-preview.css, still on disk, not linked from any page). --font-utility is untouched: biofarma has no equivalent to the mono eyebrow/stat-caption labels, so that design element is unaffected. */ --font-display: "DM Sans", "Segoe UI", sans-serif; --font-body: "DM Sans", "Segoe UI", sans-serif; --font-utility: "IBM Plex Mono", ui-monospace, monospace; /* z-index scale — no arbitrary values */ --z-header: 50; --z-topbar: 51; --z-grain: 60; --z-skip: 70; /* Type scale — wider jumps between levels so hierarchy reads at a glance */ /* h1 matched to biofarma.com.ar/nosotros's own

, measured live at both ends of its responsive range: 60px at 1440px wide, 32px at 390px wide. 2rem/3.75rem are exactly 32px/60px at the 16px root this site uses. */ --fs-h1: clamp(2rem, 5vw, 3.75rem); --fs-h2: clamp(1.9rem, 3vw, 2.6rem); --fs-h2-sm: clamp(1.6rem, 2.4vw, 2rem); /* Layered, colour-tinted shadows: tight contact shadow + wide ambient */ --shadow-soft: 0 2px 4px -1px rgba(42, 16, 6, 0.05), 0 24px 48px -24px rgba(42, 16, 6, 0.18); --shadow-card: 0 1px 2px rgba(42, 16, 6, 0.04), 0 10px 26px -14px rgba(42, 16, 6, 0.14); --shadow-raised: 0 1px 2px rgba(42, 16, 6, 0.05), 0 4px 12px -6px rgba(42, 16, 6, 0.1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* The base colour lives here rather than on `body` so the fixed .page-dots canvas can sit at z-index:-1 — behind every section, but still in front of the page ground. With the fill on `body` it paints in a later step and buries the canvas entirely. Visually identical on pages without the canvas: both elements cover the viewport. */ background: var(--cream); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; /* Transparent on purpose — see the note on `html` above. */ background: transparent; color: var(--ink); font-family: var(--font-body); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fixed grain overlay breaks up the flat colour fields */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } .skip-link { position: fixed; top: 0.6rem; left: 0.6rem; z-index: var(--z-skip); padding: 0.7rem 1.15rem; border-radius: var(--radius-pill); background: var(--ink); color: #fff8f0; font-weight: 600; font-size: 0.9rem; text-decoration: none; transform: translateY(-250%); transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .skip-link:focus-visible { transform: translateY(0); } img { max-width: 100%; /* Load-bearing since every gained intrinsic width/height attributes on 2026-09-08. Those reserve the aspect box and stop layout shift, but without height:auto the height attribute wins over the CSS width and the image is stretched — the NDIS badge rendered at a 2.077 ratio against its true 2.439. Components that set their own height (.referral-media img, .tile img) are more specific and still win. */ height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; } .wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; text-wrap: balance; } /* The Tailwind CDN injects Preflight into at runtime, so it lands AFTER this stylesheet. Its `h1..h6 {font-weight:inherit}` and `body{line-height:inherit}` tie on specificity and win on order — these descendant selectors take it back. */ html body { line-height: 1.7; } /* Kismet sets headings at 400. 500 keeps that light, airy feel while holding up at the larger sizes used here. */ body h1, body h2 { font-weight: 500; } /* Default heading leading, so headings don't inherit the 1.7 body value. Section rules carrying a class still override these. */ body h1 { line-height: 1.05; } body h2 { line-height: 1.15; } body h3 { font-weight: 600; line-height: 1.35; } /* Tracking scaled per level — a serif needs less negative tracking than a grotesk */ h1 { letter-spacing: -0.02em; } h2 { letter-spacing: -0.015em; } /* Serif is for display sizes only — at card-title size it turns muddy, so h3 drops back to the sans */ h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; } p { text-wrap: pretty; } /* Figures line up in columns instead of jittering */ .glass-stat-value, .glass-mini-item .v, .stat-number, .glass-meter-row { font-variant-numeric: tabular-nums; } p { margin: 0; } /* One warm treatment for every eyebrow, on every page (2026-08-24). These used to be four different colours — sage for --core, rust for --capacity, translucent white for --light on dark bands, and a white pill for --paper — which made the same component read as four things. The modifier classes are kept as aliases rather than stripped out of the markup, so a variant can diverge again later without touching four HTML files. Fill is --sun at 20% over white (#eddcd4); text is --sun-dark. Measured 5.75:1, so it clears AA for text this small. Note the fill is opaque, which is what lets the same pill sit on the dark green bands as well as the light page without a second variant. */ .eyebrow, .eyebrow--core, .eyebrow--capacity, .eyebrow--light, .eyebrow--paper { background: color-mix(in srgb, var(--sun) 20%, white); border: 1px solid color-mix(in srgb, var(--sun) 38%, transparent); color: var(--sun-dark); } .eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-utility); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); font-weight: 600; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; /* Shape and size ported from trymeridian.com's header buttons — measured there at border-radius 10px, 1px border, padding 10px 20px, 36.4px tall. Was a pill (--radius-pill) until 2026-08-27; trialled on the homepage first as .btn--rect, then rolled out to every button on every page at the user's request, so the modifier is gone and this is simply what a button is now. Only font-size was NOT taken from the reference — theirs is 12px mono, which is most of how they reach 36px, and this site's audience includes people with low vision. At 0.95rem the button lands at ~45px. --radius-xs is the same corner .trust-card and .arc-card use. */ padding: 0.625rem 1.25rem; border-radius: var(--radius-xs); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } /* Dark label, not cream: cream on this gold measures ~2:1. Shadows retinted warm to match the new fill — a blue-tinted shadow under a gold button reads as a mismatched light source. */ .btn--primary { background: var(--cta); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(180, 118, 12, 0.55); } .btn--primary:hover { background: var(--cta-dark); } .btn--on-dark { background: var(--cta); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(180, 118, 12, 0.55); } .btn--on-dark:hover { background: var(--cta-dark); } /* The outlined half of the reference's CTA pair ("Login" beside "Get Started"). `.btn--ghost` was already in the markup on the homepage hero but had NO rule anywhere in this stylesheet, so that button was rendering as bare text with padding — a secondary CTA with no affordance at all. It is used exactly once, on the pair this shape was ported for, so defining it here affects nothing else. The reference's outline is full black; --ink is the equivalent. */ .btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--cream); } /* `.btn--rect` was the trial modifier for the shape above. It is now the default on `.btn` for every button on every page, so the modifier is gone. Any stray `btn--rect` left in markup is harmless — it matches nothing. */ /* Warm light sweeping across the CTA — the technique ditiswatt.nl uses on its hero button. The trick is the @property registrations below. A custom property is an untyped token by default and CANNOT be transitioned — declaring a `syntax` gives the browser a type it can interpolate, which is what lets the gradient's colour stops travel instead of snapping. Drop the @property blocks and this degrades to an instant jump, not a broken button. Two differences from the reference, both deliberate: 1. It sweeps a along a linear gradient rather than rotating stops in a conic one. A conic gradient on a wide pill radiates wedges from its centre, which fights the shape; the reference's button is a large rounded rect where that reads fine. Same mechanism, better fit. 2. The warm band stays narrow instead of splitting the button in half. Blue and rust are near-complementary, so a 50/50 blend meets in a muddy olive. Keeping the band narrow reads as light crossing the button and never lets the two sit at full strength side by side. The two edges use slightly different durations so the band stretches a little as it travels, rather than sliding rigidly — same idea as the reference's uneven .7/.6/.7. */ @property --s0 { syntax: ""; inherits: false; initial-value: -34%; } @property --s1 { syntax: ""; inherits: false; initial-value: -8%; } /* Fill lives on a ::before layer so it can swell on hover without moving the text */ .btn-chars { position: relative; background: transparent; isolation: isolate; } .btn-chars::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; --s0: -34%; --s1: -8%; background: linear-gradient( 100deg, var(--cta-sweep-a) 0%, var(--cta-sweep-a) var(--s0), var(--cta-sweep-mid) calc(var(--s0) + 13%), var(--cta-sweep-b) var(--s1), var(--cta-sweep-mid) calc(var(--s1) + 13%), var(--cta-sweep-a) calc(var(--s1) + 28%), var(--cta-sweep-a) 100% ); transition: --s0 0.75s ease-in-out, --s1 0.6s ease-in-out, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .btn-chars:hover::before, .btn-chars:focus-visible::before { --s0: 82%; --s1: 108%; transform: scale(1.05); } .btn-chars:hover { transform: none; } /* Pressed feedback — physical click cue that was missing everywhere */ .btn:active, .btn-chars:active { transform: scale(0.97); } .strip-list a:active { transform: translateY(0) scale(0.99); } .btn-chars .char-track { display: inline-block; } .btn-chars .char-group { display: inline-block; } .btn-chars .char { display: inline-block; opacity: 0; /* Was --cta-dark, which under the old blue fill meant letters shifted colour as they faded in (the vaulk.com effect shifts opacity AND colour). Under the gold fill that start value is gold-on-gold, so the label spent ~0.7s mid-reveal at a very low contrast ratio. Starting at --ink keeps the per-letter stagger but leaves every letter legible the moment it appears. */ color: var(--ink); } .btn-chars.is-revealed .char { opacity: 1; color: var(--ink); transition: opacity 1.4s cubic-bezier(0.215, 0.61, 0.355, 1), color 1.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: var(--d, 0s); } .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--sky-deep); text-decoration: none; border-bottom: 1px solid transparent; } .link-arrow:hover { border-color: currentColor; } .link-arrow svg { transition: transform 0.15s ease; } .link-arrow:hover svg { transform: translateX(3px); } /* ---------------------------------- top utility bar ---------------------------------- */ .topbar { position: sticky; top: 0; z-index: var(--z-topbar); height: 42px; background: var(--accent-warm); overflow: hidden; } .topbar-cut { position: absolute; inset: 0; background: linear-gradient(120deg, var(--sky), var(--sky-deep)); clip-path: polygon(29% 0, 100% 0, 100% 100%, 24% 100%); } /* Full-bleed so the top bar's right edge lines up with the nav below it */ .topbar-inner { width: 100%; max-width: none; padding-inline: 4rem; height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 2rem; } .topbar-inner a { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600; } .topbar-inner a:hover { text-decoration: underline; } /* ---------------------------------- header ---------------------------------- */ /* Header modelled on kismet.healthcare: transparent, no shadow, content held in a 1280px column with a hairline rule beneath it. */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--accent-warm); } /* Header runs edge to edge rather than sitting in the 1180px content column, so the logo sits hard left and the nav hard right */ /* Three zones: logo left, nav centred, CTA right — kismet's arrangement. The 1fr side columns are what keeps the nav optically centred. */ .site-header .wrap { position: relative; z-index: 1; width: min(1280px, 100% - 4rem); max-width: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: 105px; padding: 0; border-bottom: 1px solid rgba(36, 31, 28, 0.14); } .site-header .brand { justify-self: start; } .site-header .site-nav { justify-self: center; } /* Was a single ; now wraps two, so the class moved from the anchor to a flex container around both. justify-self:end still places the WHOLE group in the header grid's right-hand 1fr column (see .site-header .wrap above) — nothing else about that placement changed. */ .header-cta { justify-self: end; display: flex; align-items: center; gap: 0.6rem; } /* The in-panel duplicate only exists for the mobile menu */ .nav-cta-mobile { display: none; } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); } .brand-logo { height: 54px; width: auto; display: block; } .brand-logo--footer { height: 68px; } .site-nav { display: flex; align-items: center; gap: 1.6rem; } /* 16px / weight 400, matching kismet */ .site-nav a:not(.btn) { text-decoration: none; font-weight: 400; font-size: 1rem; color: var(--ink); } .site-nav a:not(.btn):hover { color: var(--ink); } /* Dropdown panels are light, so their links stay dark */ .nav-dropdown li a, .nav-dropdown li a:hover { color: var(--ink); } /* Mobile: collapse to logo + hamburger, and surface the CTA inside the panel */ @media (max-width: 900px) { .site-header .wrap { grid-template-columns: auto auto; justify-content: space-between; height: 76px; width: min(1280px, 100% - 3rem); } .site-header .site-nav { justify-self: end; } .header-cta { display: none; } .nav-cta-mobile { display: inline-flex; justify-content: center; margin-top: 0.5rem; } .nav-item.is-active::after { display: none; } } /* 32px between links, matching kismet's nav rhythm */ .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-item { position: relative; padding-bottom: 0.9rem; margin-bottom: -0.9rem; } .nav-link { display: inline-flex; align-items: center; gap: 0.3rem; } /* Current page gets a short rule beneath it, as kismet does */ .nav-item.is-active .nav-link { color: var(--ink); font-weight: 500; } .nav-item.is-active { position: relative; } /* -25px lands it exactly on the header's bottom rule (measured: nav item bottom sits 25px above the wrap's border) */ .nav-item.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -25px; height: 2px; background: var(--ink); } .nav-chevron { flex-shrink: 0; transition: transform 0.15s ease; } .nav-item:hover .nav-chevron, .nav-item:focus-within .nav-chevron { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 0.6rem; min-width: 210px; list-style: none; margin: 0; display: none; z-index: 60; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: block; } .nav-dropdown li a { display: block; padding: 0.55rem 0.8rem; border-radius: 0.5rem; font-size: 0.88rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .nav-dropdown li a:hover { background: var(--cream); color: var(--sky); } .nav-toggle { display: none; border: none; background: none; padding: 0.4rem; cursor: pointer; } .nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; } /* ---------------------------------- internal page photo headers ---------------------------------- A consistent split banner for every page except Home. The image is kept in the document (rather than as a decorative background) so its meaning and dimensions remain available to assistive technology and the browser. */ .page-header { padding-block: 0 clamp(2.25rem, 4vw, 3.5rem); border-bottom: 0; } .page-header .page-header-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); width: 100%; max-width: none; height: clamp(320px, 25vw, 360px); min-height: 0; padding: 0; overflow: hidden; border-block: 1px solid rgba(185, 104, 44, 0.14); border-inline: 0; border-radius: 0; background: radial-gradient(circle at 5% 0%, rgba(255, 183, 77, 0.18), transparent 42%), linear-gradient(135deg, #fffaf4 0%, #fff0df 100%); box-shadow: var(--shadow-card); } .page-header-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 1.5rem; padding-right: clamp(1.5rem, 3vw, 3.5rem); padding-left: max(1.5rem, calc((100vw - 1180px) / 2 + 1.5rem)); } .page-header-copy::before { content: ""; width: 3.4rem; height: 0.3rem; margin-bottom: 0.8rem; border-radius: 999px; background: linear-gradient(90deg, var(--sun-dark), var(--sun)); } .page-header h1 { max-width: 14ch; margin: 0 0 0.75rem; color: var(--ink); font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1.04; text-wrap: balance; } .page-header p { max-width: 52ch; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; } .page-header-media { position: relative; height: 100%; min-height: 0; overflow: hidden; background: #eadfce; } .page-header-media::after { content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(2.5rem, 6vw, 6.5rem); background: linear-gradient(90deg, rgba(255, 240, 223, 0.88), transparent); pointer-events: none; } .page-header-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Referral header: the official transparent logo is repeated through the Z axis to give the mark visible depth during its slow rotation. This stays as live HTML/CSS rather than a video, so it remains sharp and lightweight. */ .page-header-media--logo { display: grid; place-items: center; isolation: isolate; overflow: hidden; perspective: 1100px; background: radial-gradient(circle at 68% 34%, rgba(255, 184, 0, 0.32), transparent 24%), radial-gradient(circle at 28% 68%, rgba(34, 164, 221, 0.3), transparent 28%), linear-gradient(135deg, #f8fbfd 0%, #e5f2f7 48%, #fff1dc 100%); } .page-header-media--logo::before { content: ""; position: absolute; width: min(72%, 34rem); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: rgba(255, 255, 255, 0.18); box-shadow: inset 18px 18px 36px rgba(34, 164, 221, 0.1), inset -18px -18px 36px rgba(255, 184, 0, 0.1), 0 18px 50px rgba(36, 73, 92, 0.12); } .page-header-media--logo::after { inset: auto 50% 11%; width: min(52%, 25rem); height: 1.35rem; border-radius: 50%; background: rgba(36, 73, 92, 0.22); filter: blur(13px); transform: translateX(50%); animation: referral-logo-shadow 7.2s ease-in-out infinite; } .referral-logo-stage { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; transform-style: preserve-3d; } .referral-logo-reveal { position: relative; width: min(76%, 34rem); aspect-ratio: 1122 / 570; transform-style: preserve-3d; } .page-header-media--logo .referral-logo-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; transform-origin: 50% 45%; will-change: transform, opacity, clip-path, filter; } .referral-logo-symbol, .referral-logo-piece { clip-path: inset(0 0 40% 0); filter: drop-shadow(0 7px 7px rgba(24, 79, 108, 0.17)) drop-shadow(0 15px 20px rgba(24, 79, 108, 0.13)); } .referral-logo-symbol { animation: referral-logo-symbol 7.2s linear infinite; } .referral-logo-piece { opacity: 0; filter: brightness(0.92) saturate(1.15) drop-shadow(8px 8px 5px rgba(22, 67, 93, 0.18)) drop-shadow(-3px -2px 2px rgba(31, 169, 230, 0.28)); } .referral-logo-piece--left { clip-path: polygon(0 0, 42.5% 0, 42.5% 60%, 0 60%); animation: referral-logo-piece-left 7.2s cubic-bezier(0.22, 0.72, 0.18, 1) infinite; } .referral-logo-piece--centre { clip-path: polygon(42.5% 0, 59% 0, 59% 60%, 42.5% 60%); animation: referral-logo-piece-centre 7.2s cubic-bezier(0.22, 0.72, 0.18, 1) infinite; } .referral-logo-piece--right { clip-path: polygon(59% 0, 100% 0, 100% 60%, 59% 60%); animation: referral-logo-piece-right 7.2s cubic-bezier(0.22, 0.72, 0.18, 1) infinite; } .referral-logo-wordmark { clip-path: inset(60% 0 0 0); filter: drop-shadow(0 5px 5px rgba(24, 79, 108, 0.15)) drop-shadow(0 12px 18px rgba(24, 79, 108, 0.12)); animation: referral-logo-wordmark 7.2s cubic-bezier(0.22, 0.72, 0.18, 1) infinite; } @keyframes referral-logo-symbol { 0%, 13% { opacity: 1; transform: scale(1); } 15%, 48% { opacity: 0; transform: scale(0.96); } 51%, 100% { opacity: 1; transform: scale(1); } } @keyframes referral-logo-piece-left { 0%, 13% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 15% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } 27% { opacity: 1; transform: translate3d(-2.35rem, 0.75rem, 2rem) rotateY(48deg) rotateZ(-8deg) scale(0.9); } 38% { opacity: 1; transform: translate3d(-1.3rem, -0.4rem, 1rem) rotateY(27deg) rotateZ(-3deg) scale(0.94); } 48% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); } 51%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } } @keyframes referral-logo-piece-centre { 0%, 13% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 15% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } 27% { opacity: 1; transform: translate3d(0, -2rem, 2.6rem) rotateX(26deg) rotateY(-38deg) scale(0.88); } 38% { opacity: 1; transform: translate3d(0, -0.8rem, 1.2rem) rotateX(12deg) rotateY(-20deg) scale(0.95); } 48% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); } 51%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } } @keyframes referral-logo-piece-right { 0%, 13% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 15% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } 27% { opacity: 1; transform: translate3d(2.35rem, 0.85rem, 2rem) rotateY(-48deg) rotateZ(8deg) scale(0.9); } 38% { opacity: 1; transform: translate3d(1.3rem, -0.35rem, 1rem) rotateY(-27deg) rotateZ(3deg) scale(0.94); } 48% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); } 51%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } } @keyframes referral-logo-wordmark { 0%, 13% { opacity: 1; clip-path: inset(60% 0 0 0); filter: drop-shadow(0 8px 12px rgba(24, 79, 108, 0.14)); } 16%, 52% { opacity: 0; clip-path: inset(60% 100% 0 0); filter: grayscale(0.35) brightness(0.82) blur(1px); } 53% { opacity: 1; clip-path: inset(60% 100% 0 0); filter: grayscale(0.35) brightness(0.82) blur(1px); } 72%, 100% { opacity: 1; clip-path: inset(60% 0 0 0); filter: drop-shadow(0 8px 12px rgba(24, 79, 108, 0.14)); } } @keyframes referral-logo-shadow { 0%, 13%, 51%, 100% { opacity: 0.82; transform: translateX(50%) scaleX(1); } 27%, 38% { opacity: 0.38; transform: translateX(50%) scaleX(0.48); } } @media (prefers-reduced-motion: reduce) { .referral-logo-symbol, .referral-logo-piece, .referral-logo-wordmark, .page-header-media--logo::after { animation: none; } .referral-logo-symbol, .referral-logo-wordmark { opacity: 1; transform: none; } .referral-logo-wordmark { clip-path: inset(60% 0 0 0); } .referral-logo-piece { opacity: 0; } } .page-header .eyebrow { margin-bottom: 0.85rem; } .page-header .policy-meta { margin-top: 1rem; font-size: 0.8rem; } .page-header .policy-actions { max-width: none; margin-top: 1.25rem; } @media (max-width: 820px) { .page-header .page-header-card { grid-template-columns: 1fr; height: auto; min-height: 0; } .page-header-copy { padding: clamp(1.5rem, 7vw, 2.5rem); } .page-header-media { height: auto; min-height: clamp(180px, 52vw, 280px); } .page-header-media::after { inset: 0 0 auto; width: auto; height: 3.5rem; background: linear-gradient(180deg, rgba(255, 240, 223, 0.72), transparent); } } @media (max-width: 480px) { .page-header { padding-block: 0 2.25rem; } .page-header h1 { font-size: clamp(2rem, 10vw, 2.75rem); } .page-header p { font-size: 0.98rem; } } /* .page-header p (1 class + 1 element) otherwise outranks .purpose-lead (1 class) on font-size, leaving the About hero's lead line the same size as the paragraph under it. */ .page-header .purpose-lead { font-size: 1.16rem; margin-bottom: 0.6rem; } /* ---------------------------------- hero ---------------------------------- */ .hero { position: relative; z-index: 1; background: linear-gradient( 0deg, var(--accent-warm) 0%, var(--glow-hero) var(--glow-peak), var(--accent-warm) var(--glow-fade) ); padding-block: 3.5rem 7rem; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; } .hero-copy h1 { font-size: var(--fs-h1); line-height: 1.02; margin-block: 1.1rem 1.1rem; } .hero-accent { color: var(--sun); display: block; } .hero-sub { font-size: 1.08rem; color: var(--ink-soft); max-width: 46ch; } .hero-actions { display: flex; gap: 0.9rem; margin-top: 1.8rem; flex-wrap: wrap; } /* The six trust points that used to sit here repeated the why-choose-us cards below word for word, so the hero now lists what we actually do instead. */ .hero-services { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.4rem; } .hero-services a { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.92rem; color: var(--ink); text-decoration: none; transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .hero-services svg { color: var(--sun); flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (hover: hover) and (pointer: fine) { .hero-services a:hover { color: var(--sun-dark); } .hero-services a:hover svg { transform: translateX(3px); } } .hero-services a:focus-visible { color: var(--sun-dark); border-radius: 0.35rem; outline-offset: 4px; } .hero-services a:focus-visible svg { transform: translateX(3px); } .hero-services a:active svg { transform: translateX(1px); } .hero-badge { height: 52px; width: auto; margin-top: 1.8rem; } .hero-visual { position: relative; } /* No card chrome — the photo dissolves straight into the hero background via a soft elliptical mask instead of sitting on it as a framed object. */ .hero-photo-card { position: relative; } .hero-photo-card img { width: 100%; height: 520px; object-fit: cover; object-position: center 35%; display: block; /* Feather all four edges while keeping the centre fully opaque — a radial vignette would wash out the two faces, which sit near the outer edges. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ---------------------------------- quick contact band ---------------------------------- */ .quick-band { padding-block: clamp(2rem, 4vw, 3.5rem); } .quick-band-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; } .quick-band-copy { position: relative; min-height: 27rem; overflow: hidden; border: 1px solid rgba(31, 107, 165, 0.12); border-radius: var(--radius); background: radial-gradient(circle at 85% 78%, rgba(242, 165, 26, 0.22), transparent 28%), linear-gradient(135deg, #eef6fb 0%, #dcecf6 100%); box-shadow: 0 18px 38px -26px rgba(31, 107, 165, 0.36); isolation: isolate; } .quick-band-copy h2 { position: relative; z-index: 2; width: 55%; max-width: 11ch; margin: 0; padding: clamp(2rem, 4vw, 3.25rem) 0 2rem clamp(1.5rem, 3.5vw, 3rem); color: #17384e; font-size: clamp(2.1rem, 4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.045em; } .quick-band-copy__portrait { position: absolute; z-index: 1; right: clamp(-1.5rem, -1vw, -0.4rem); bottom: -0.2rem; width: min(55%, 25rem); height: 96%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 16px 20px rgba(23, 56, 78, 0.16)); } .quick-band-copy p { color: var(--ink-soft); max-width: 46ch; } .quick-band-copy a { color: var(--sun-dark); font-weight: 600; } @media (max-width: 860px) { .quick-band-inner { grid-template-columns: 1fr; gap: 1rem; } .quick-band-copy h2 { width: 58%; } } .quick-contact { display: flex; padding: 1.35rem; border: 1px solid rgba(31, 107, 165, 0.14); border-radius: var(--radius); background: linear-gradient(145deg, #f7fafc 0%, #e8f2f8 100%); box-shadow: 0 18px 38px -26px rgba(31, 107, 165, 0.34); flex-direction: column; justify-content: center; } .quick-contact h3 { margin-bottom: 0.85rem; color: #17384e; font-size: 1.3rem; } .qc-field { margin-bottom: 0.72rem; } .qc-field input, .qc-field select { width: 100%; padding: 0.68rem 0.85rem; border: 1px solid rgba(23, 56, 78, 0.18); border-radius: 0.6rem; background: rgba(255, 255, 255, 0.92); font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); } .qc-field input::placeholder { color: var(--ink-soft); } .qc-error { display: none; color: #dc2626; font-weight: 700; font-size: 0.82rem; margin: 0.4rem 0 0; } .qc-field.invalid input { border-color: #dc2626; border-bottom: 2px solid #dc2626; } .qc-field.invalid .qc-error { display: block; } .qc-submit { width: 100%; padding: 0.78rem; border: none; border-radius: 0.75rem; background: linear-gradient(100deg, var(--sun-dark), var(--cta)); color: #071a29; font-family: var(--font-body); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.15s ease; } .qc-submit:hover { background: linear-gradient(100deg, #713716, var(--cta-dark)); } @media (max-width: 560px) { .quick-band-copy { min-height: 31rem; } .quick-band-copy h2 { width: 100%; max-width: 12ch; padding: 1.6rem 1.35rem; font-size: clamp(2rem, 10vw, 3rem); } .quick-band-copy__portrait { right: -1.25rem; width: min(82%, 23rem); height: 72%; } } /* ---------------------------------- service strip ---------------------------------- */ .service-strip { padding-block: 1rem 3rem; } /* ---------------------------------- elastic service gallery ---------------------------------- */ .strip-heading { font-size: var(--fs-h2); margin-block: 0.9rem 1.7rem; } .elastic-gallery { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.7rem; height: 460px; } .eg-item { flex: 1 1 0; min-width: 0; transition: flex-grow 0.7s cubic-bezier(0.25, 1, 0.5, 1); } /* Expand on hover or keyboard focus — siblings keep flex-grow 1 and give way */ .eg-item:hover, .eg-item:focus-within { flex-grow: 4; } .eg-item > a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--radius); text-decoration: none; isolation: isolate; } .eg-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.09); transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1); } .eg-item:hover img, .eg-item:focus-within img { transform: scale(1); } /* Dim every panel once the row is engaged, then bring the hovered one back */ .eg-item > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 6, 2, 0.82), rgba(12, 6, 2, 0.25) 55%, rgba(12, 6, 2, 0.3)); transition: background 0.5s ease; } .elastic-gallery:hover .eg-item > a::after, .elastic-gallery:focus-within .eg-item > a::after { background: linear-gradient(to top, rgba(12, 6, 2, 0.7), rgba(12, 6, 2, 0.55) 55%, rgba(12, 6, 2, 0.6)); } .elastic-gallery .eg-item:hover > a::after, .elastic-gallery .eg-item:focus-within > a::after { background: linear-gradient(to top, rgba(12, 6, 2, 0.85), rgba(12, 6, 2, 0.12) 60%, transparent); } /* Collapsed state — vertical spine label */ .eg-spine { position: absolute; bottom: 1.6rem; left: 50%; z-index: 1; transform: translateX(-50%); writing-mode: vertical-rl; white-space: nowrap; font-family: var(--font-utility); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #fff8f0; opacity: 1; transition: opacity 0.35s ease; } .eg-item:hover .eg-spine, .eg-item:focus-within .eg-spine { opacity: 0; transition-duration: 0.2s; } /* Expanded state — full detail panel */ .eg-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.8rem; opacity: 0; transform: translateY(2.5rem); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.25, 1, 0.5, 1); } .eg-item:hover .eg-panel, .eg-item:focus-within .eg-panel { opacity: 1; transform: translateY(0); transition-delay: 0.12s; } .eg-tag { font-family: var(--font-utility); font-size: 0.66rem; letter-spacing: 0.14em; font-weight: 600; color: #fff8f0; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .eg-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.05; letter-spacing: -0.015em; color: #fff8f0; } .eg-desc { font-size: 0.92rem; color: rgba(255, 248, 240, 0.82); max-width: 34ch; } .eg-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-family: var(--font-utility); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--sun); } .eg-item:hover .eg-cta svg, .eg-item:focus-within .eg-cta svg { transform: translate(2px, -2px); } .eg-cta svg { transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); } /* Touch devices get no hover, so drop the accordion for a plain card grid */ @media (max-width: 900px) { .elastic-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; height: auto; } .eg-item, .eg-item:hover, .eg-item:focus-within { flex: none; } .eg-item > a { height: 190px; } .eg-item img, .eg-item:hover img { transform: scale(1); } .eg-spine { display: none; } .eg-panel { opacity: 1; transform: none; padding: 1rem; gap: 0.3rem; } .eg-tag, .eg-desc { display: none; } .eg-title { font-size: 1.05rem; } .eg-cta { font-size: 0.6rem; } } .service-strip .eyebrow { margin-bottom: 1.1rem; } .strip-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; list-style: none; margin: 0; padding: 0; } .strip-list a { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; row-gap: 0.3rem; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-raised); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .strip-list a:hover { border-color: var(--sky); transform: translateY(-2px); box-shadow: var(--shadow-card); } .strip-icon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sky) 12%, white); color: var(--sky-deep); flex-shrink: 0; } .strip-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 700; font-size: 0.98rem; } .strip-arrow { color: var(--ink-soft); flex-shrink: 0; transition: transform 0.15s ease; } .strip-list a:hover .strip-arrow { transform: translateX(3px); color: var(--sky); } .strip-desc { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; } /* ---------------------------------- about ---------------------------------- */ .about { padding-block: 3rem 4.5rem; } .about .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: center; } .about-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); } .about-media img { width: 100%; height: 320px; object-fit: cover; object-position: top; } .about-copy h2 { font-size: var(--fs-h2); margin-block: 0.9rem 1rem; line-height: 1.15; } .about-copy p { color: var(--ink-soft); font-size: 1.02rem; max-width: 56ch; } .about-copy p + p { margin-top: 1rem; } .stat-callout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; margin-top: 1.4rem; padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--sun); border-radius: var(--radius-sm); max-width: 56ch; } .stat-number { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); flex-shrink: 0; } .stat-label { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; } /* ---------------------------------- trust grid ---------------------------------- */ /* One continuous dark region spanning the stats band + "Why choose us", so the page switches background colour once instead of twice. */ .dark-zone { position: relative; isolation: isolate; color: #f4ece3; background: radial-gradient(85% 55% at 3% 0%, rgba(110, 143, 118, 0.32), transparent 62%), radial-gradient(75% 60% at 97% 100%, rgba(164, 85, 42, 0.17), transparent 64%), linear-gradient(155deg, var(--sky-deep), #2d3a31); } .dark-zone::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.28; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='dz'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dz)' opacity='0.4'/%3E%3C/svg%3E"); } /* First child of the dark zone now, so it needs its own top breathing room */ .trust { padding-block: 4rem 4.5rem; } .trust h2 { font-size: var(--fs-h2); margin-block: 0.9rem 0.9rem; color: #fff; } .trust-intro { color: rgba(244, 236, 227, 0.72); font-size: 1.02rem; max-width: 62ch; margin-bottom: 1.8rem; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } /* About's commitments grid holds four cards, so three columns strand the last one alone on a second row. Four across matches trymeridian.com's enterprise row, which is where this card treatment comes from. Drops to two columns early — at 1100px four cards are ~250px wide and the mono label starts wrapping to three lines. Below 900px / 560px the shared .trust-grid rules in the responsive block take over. */ .trust-grid--four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .trust-grid--four { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------- NDIS stats band ---------------------------------- */ /* Deep near-black strip capping the page just above the footer */ .stats-band { position: relative; color: #f4ece3; background: radial-gradient(70% 130% at 94% 50%, rgba(164, 85, 42, 0.2), transparent 62%), linear-gradient(180deg, #28322b, #303c34); padding-block: 3.2rem; } .stats-band-inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; } .stats-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .stats-list li { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.16); } .stats-list li:first-child { padding-left: 0; border-left: 0; } .stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; } .stat-cap { font-size: 0.84rem; line-height: 1.4; color: rgba(244, 236, 227, 0.68); } .stats-aside p { color: rgba(244, 236, 227, 0.8); font-size: 0.95rem; max-width: 44ch; } .stats-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1rem; font-weight: 700; font-size: 0.92rem; /* Was --sun. That rust is built for the LIGHT page, where it passes comfortably; on this dark green band it measured 2.15-2.47:1 at 14.72px/700 — under half the 4.5 it needs, and failing with the dot field entirely disabled, so this was a pre-existing bug rather than anything the field introduced. Gold is the site's existing on-dark accent (see .ed-cta) and measures 5.58:1 against the band's darkest stop. */ color: var(--cta); text-decoration: none; } .stats-link svg { transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); } .stats-link:hover svg, .stats-link:focus-visible svg { transform: translateX(4px); } /* Needs to out-specify `.stats-aside p` above, which would otherwise win on size */ .stats-aside .stats-source { margin-top: 1.2rem; font-family: var(--font-utility); font-size: 0.64rem; letter-spacing: 0.06em; line-height: 1.5; color: rgba(244, 236, 227, 0.45); max-width: none; } @media (max-width: 900px) { .stats-band-inner { grid-template-columns: 1fr; gap: 2rem; } .stats-list { grid-template-columns: 1fr; gap: 1.2rem; } .stats-list li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1.1rem; } .stats-list li:first-child { border-top: 0; padding-top: 0; } } /* Same frosted treatment as the glass stats card in the closing band */ /* Solid light cards on the dark green field. These were translucent white over the dark zone; going opaque means everything inside had to flip from light-on-dark to dark-on-light, and backdrop-filter came out — there's nothing left to blur through an opaque card, it was only costing GPU time. */ /* Geometry ported from trymeridian.com/enterprise, measured rather than eyeballed: 1px hairline, 10px radius, 16px/20px padding, 128px min-height, flat fill with no drop shadow. Their card fill is #eff0f0 — the same value this card already used — so only the frame changed. Two deliberate departures. Their border is #c5c7c8, a cool grey; here it is ink at 20% over the fill, which composites to ~#c6c6c6 at the same weight but carries the site's warm tint instead of a second grey family. And their card is shadowless because it sits on a near-white page: on a dark green band a shadowless card reads as pasted on, so a single tight contact shadow tinted to the band's own green keeps it seated without reintroducing the floating-tile stack this card used to carry. */ .trust-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 8rem; background: #eff0f0; border: 1px solid rgba(36, 31, 28, 0.2); border-radius: var(--radius-xs); padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(20, 28, 23, 0.24); transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.35s ease, background 0.35s ease; } /* Warm wash that rises from the lower-left corner on hover */ .trust-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(115% 90% at 18% 112%, color-mix(in srgb, var(--sun) 18%, transparent), transparent 68%); transition: opacity 0.45s ease; } /* Accent rule that draws across the top edge */ .trust-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--sun), #ffc857); transform: scaleX(0); transform-origin: left center; transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1); } .trust-card > * { position: relative; z-index: 1; } /* Gated to real pointers — on touch, :hover sticks after a tap and would leave a card stuck in its lifted state */ @media (hover: hover) and (pointer: fine) { .trust-card:hover { transform: translateY(-3px); background: #ffffff; border-color: color-mix(in srgb, var(--sun) 42%, transparent); box-shadow: 0 1px 2px rgba(20, 28, 23, 0.26), 0 14px 28px -18px rgba(20, 28, 23, 0.5); } .trust-card:hover::before { opacity: 1; } .trust-card:hover::after { transform: scaleX(1); } } /* Icon and title share a row, as on the reference — 20px icon, 10px gap, centred, 20px of air before the body copy. The icon lost its rounded tinted chip in the process: the reference sets the accent on the glyph itself, and a chip at this card size would outweigh the label beside it. */ .trust-card-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; } .trust-icon { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; align-items: center; justify-content: center; /* Full-strength --sun, the direct equivalent of the reference's brand orange. 4.67:1 on this fill — icons need 3:1, so there is room. */ color: var(--sun); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.35s ease; } @media (hover: hover) and (pointer: fine) { .trust-card:hover .trust-icon { transform: scale(1.1); color: var(--sun-dark); } } /* --------- animated line icons: About commitments and home services --------- A plain-CSS port of the icon motion on galvanite.io. Theirs is a Lottie — an After Effects export played through Webflow's lottie-web: measured live at 36 frames / 60fps = 0.6s, autoplay off, loop off, parked at frame 0 and played forward on card hover, snapping back to frame 0 on mouse-out. Not ported as Lottie, deliberately. That needs lottie-web plus a JSON per icon, and this project's stack is static files with puppeteer as the only npm dependency — CLAUDE.md's standing instruction is to port effects to plain CSS. What is reproduced is the READ, not the file: each part of the icon pops into place with a stagger, over the reference's own 0.6s total (0.42s per part + 3 x 0.06s of stagger), then sits still. Mouse-out drops the animation, which is the snap-back to frame 0. The same build motion is shared by About's commitments and the circular service icons beneath the home hero, keeping the icon language consistent. `transform-box: fill-box` is load-bearing: without it each path scales about the SVG's origin and the pieces fly in from the top-left corner instead of growing in place. Gated twice, as every motion on this site is: never under reduced motion, and never on coarse pointers, where :hover sticks after a tap and would leave the icon mid-build. */ @media (prefers-reduced-motion: no-preference) { @media (hover: hover) and (pointer: fine) { .trust-grid--four .trust-icon svg > *, .home-service-overview__icon svg > * { transform-box: fill-box; transform-origin: 50% 50%; } .trust-grid--four .trust-card:hover .trust-icon svg > *, .home-service-overview__grid a:hover .home-service-overview__icon svg > * { animation: icon-build 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .trust-grid--four .trust-card:hover .trust-icon svg > *:nth-child(2), .home-service-overview__grid a:hover .home-service-overview__icon svg > *:nth-child(2) { animation-delay: 0.06s; } .trust-grid--four .trust-card:hover .trust-icon svg > *:nth-child(3), .home-service-overview__grid a:hover .home-service-overview__icon svg > *:nth-child(3) { animation-delay: 0.12s; } .trust-grid--four .trust-card:hover .trust-icon svg > *:nth-child(4), .home-service-overview__grid a:hover .home-service-overview__icon svg > *:nth-child(4) { animation-delay: 0.18s; } } } @keyframes icon-build { from { opacity: 0; transform: scale(0.35); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } } /* The mono uppercase label is the reference's defining move. It costs nothing here: IBM Plex Mono is already loaded on all four pages as --font-utility, and the site already uses it for eyebrows, badges and stat captions — so this reads as an existing convention at a larger size, not a new typeface. Kept as a real

with text-transform doing the casing, so the outline and screen-reader text stay sentence case. */ .trust-card h3 { font-family: var(--font-utility); font-size: 0.95rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 0; color: var(--ink); text-wrap: balance; } .trust-card p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; text-wrap: pretty; } /* ---------------------------------- feature sections ---------------------------------- */ .feature { padding-block: 3.2rem; border-top: 1px solid var(--line); } .feature:first-of-type { border-top: none; } .feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .feature.reverse .wrap { direction: rtl; } .feature.reverse .wrap > * { direction: ltr; } .feature-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); } .feature-media img { width: 100%; height: 360px; object-fit: cover; } .feature-copy h2 { font-size: var(--fs-h2); margin-block: 0.9rem 0.85rem; line-height: 1.18; } .feature-copy p { color: var(--ink-soft); font-size: 1rem; max-width: 48ch; } .feature-list { list-style: none; margin: 1.3rem 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; } .feature-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; font-size: 0.94rem; } .feature-list svg { color: var(--sun); flex-shrink: 0; margin-top: 0.15rem; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------------------------------- community photo banner ---------------------------------- */ .community-photo { padding-block: 1rem 4rem; } /* ---------------------------------- layered home photo gallery ---------------------------------- */ .moment-gallery { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 5vw, 5.5rem); overflow: hidden; background: radial-gradient(circle at 50% 46%, rgba(31, 107, 165, 0.16), transparent 30rem), linear-gradient(180deg, rgba(7, 30, 48, 0.7), rgba(10, 44, 67, 0.82)), url("assets/brisbane-story-bridge.jpg") center 52% / cover no-repeat; } .moment-gallery::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 21, 34, 0.32), transparent 24% 76%, rgba(4, 21, 34, 0.32)), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%, rgba(3, 18, 29, 0.24)); } .moment-gallery__inner { position: relative; z-index: 1; width: min(1480px, 100% - 2rem); } .moment-stage { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .moment-stage::-webkit-scrollbar { display: none; } .moment-rail { display: flex; gap: 0.9rem; width: max-content; } .moment-card { position: relative; flex: 0 0 min(78vw, 340px); aspect-ratio: 3 / 4; padding: 0; overflow: hidden; scroll-snap-align: center; border: 0; border-radius: clamp(1rem, 1.7vw, 1.4rem); background: #d9d3c8; color: #fff; box-shadow: 0 16px 38px rgba(48, 36, 22, 0.14); cursor: pointer; isolation: isolate; } .moment-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(25, 19, 13, 0.7), rgba(25, 19, 13, 0.08) 48%, transparent 68%); pointer-events: none; } .moment-card img { width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position, center); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .moment-card:nth-child(3) img { --photo-position: 66% center; } .moment-card__label { position: absolute; z-index: 2; left: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.4rem); color: #fff; font-size: clamp(0.92rem, 1.2vw, 1.05rem); font-weight: 600; line-height: 1.25; text-align: left; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); } .moment-gallery.is-enhanced .moment-stage { position: relative; height: clamp(31rem, 45vw, 40rem); overflow: visible; scroll-snap-type: none; } .moment-gallery.is-enhanced .moment-rail { position: relative; width: 100%; height: 100%; display: block; } .moment-gallery.is-enhanced .moment-card { position: absolute; top: 50%; left: 50%; width: clamp(17.5rem, 27vw, 24rem); height: clamp(23rem, 36vw, 32rem); aspect-ratio: auto; transform: translate(-50%, -50%) translateX(calc(var(--offset) * clamp(12.5rem, 20vw, 18rem))) translateY(calc((var(--distance) * 1.25rem) - 0.8rem)) scale(calc(1 - (var(--distance) * 0.11))); opacity: calc(1 - (var(--distance) * 0.1)); transition: transform 1.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease, filter 1s ease, box-shadow 1s ease; will-change: transform; } .moment-gallery.is-enhanced .moment-card:not(.is-active) { filter: saturate(0.88) brightness(0.93); } .moment-gallery.is-enhanced .moment-card.is-active { box-shadow: 0 32px 70px rgba(2, 15, 25, 0.48); } .moment-gallery.is-enhanced .moment-card.is-active img { transform: scale(1.015); } .moment-gallery.is-enhanced .moment-card.is-outside { opacity: 0; pointer-events: none; } .moment-gallery.is-enhanced .moment-card:not(.is-active) .moment-card__label { opacity: 0; } .moment-controls { width: min(49rem, 100%); min-height: 3.25rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .moment-caption, .moment-count { margin: 0; } .moment-caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .moment-controls__actions, .moment-nav, .moment-count { display: flex; align-items: center; } .moment-controls__actions { gap: 0; } .moment-count { display: none; } .moment-count__line { width: clamp(2.5rem, 5vw, 4rem); height: 1px; background: var(--line); } .moment-nav { gap: 0.55rem; } .moment-arrow { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--blue-ink); box-shadow: 0 7px 22px rgba(2, 15, 25, 0.28); cursor: pointer; backdrop-filter: blur(10px); transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .moment-arrow:active { transform: scale(0.93); } .moment-pause { min-height: 46px; padding: 0.65rem 0.95rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.9); color: var(--blue-ink); box-shadow: 0 7px 22px rgba(2, 15, 25, 0.22); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; backdrop-filter: blur(10px); } .moment-pause:hover, .moment-pause[aria-pressed="true"] { background: var(--blue-ink); color: #fff; } @media (hover: hover) and (pointer: fine) { .moment-arrow:hover { background: var(--blue-ink); color: #fff; } .moment-gallery.is-enhanced .moment-card:not(.is-active):hover { filter: saturate(0.96) brightness(0.95); } } @media (max-width: 700px) { .moment-gallery { padding-block: 2.25rem 3rem; } .moment-gallery__inner { width: min(100% - 1rem, 34rem); } .moment-gallery.is-enhanced .moment-stage { height: 29rem; } .moment-gallery.is-enhanced .moment-card { width: min(76vw, 18.5rem); height: min(101vw, 24.7rem); transform: translate(-50%, -50%) translateX(calc(var(--offset) * 66vw)) translateY(calc((var(--distance) * 0.8rem) - 0.45rem)) scale(calc(1 - (var(--distance) * 0.12))); } .moment-controls { padding-inline: 0.5rem; } .moment-arrow { width: 43px; height: 43px; } } @media (prefers-reduced-motion: reduce) { .moment-gallery.is-enhanced .moment-card, .moment-card img, .moment-arrow { transition: none; } } /* Copy and image share one card — the photo is anchored by large type rather than floating on its own, which is how kismet pairs the two. */ .photo-banner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; padding: 3.5rem; } /* Image-only variant. The services page uses .photo-banner with no copy alongside it, which left the two-column grid with an empty half and the photo stranded at a fraction of the card's width. Here the image is the whole thing: one track, no padding, so it fills the rounded card edge to edge (the parent already clips with overflow: hidden). */ .photo-banner--solo { grid-template-columns: 1fr; gap: 0; padding: 0; } .photo-banner--solo img { width: 100%; height: clamp(16rem, 32vw, 26rem); object-fit: cover; /* Focal point sits high: this is a wide band cropped from a much squarer source, and centring it decapitated the standing figure. Real people — keep the faces in frame. */ object-position: center 18%; } .photo-banner-copy h2 { font-size: var(--fs-h2); margin-bottom: 1.4rem; max-width: 14ch; } .photo-banner-copy p { color: var(--ink-soft); margin-bottom: 1.1rem; max-width: 46ch; } .photo-banner-copy .link-arrow { margin-top: 0.4rem; } .photo-banner-media { border-radius: var(--radius-sm); overflow: hidden; } .photo-banner-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 32%; display: block; } /* Mission, Vision and Values share one purpose-built static visual language. */ .concept-media { aspect-ratio: 4 / 3; background: #fff4e7; } .concept-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; display: block; } @media (max-width: 860px) { .photo-banner { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; } .photo-banner-copy h2 { max-width: none; } } /* ---------------------------------- signature / approach band ---------------------------------- */ .approach { position: relative; padding-block: 5rem; color: #f6ede0; overflow: hidden; isolation: isolate; } .approach::before { content: ""; position: absolute; inset: 0; /* Green overlay matching the page-bottom sections (globe band + footer, both built on --sky-deep #3a4a3f). This was a navy #091b2b/#0f2f4a, which made About's dark band the only blue-tinted dark surface on the site and read as a different palette from the homepage. */ background-image: linear-gradient(120deg, rgba(45, 58, 49, 0.94), rgba(58, 74, 63, 0.86)), url("fitness-session.webp"); background-size: cover; background-position: center 35%; z-index: -1; } .approach .wrap { max-width: 720px; } .approach h2 { font-size: var(--fs-h2); line-height: 1.15; margin-block: 1.1rem 1.2rem; } .approach p { font-size: 1.08rem; color: rgba(246, 237, 224, 0.86); max-width: 54ch; } .approach .btn { margin-top: 1.8rem; } /* ---------------------------------- testimonials ---------------------------------- */ .testimonials { padding-block: 4.5rem; border-top: 1px solid var(--line); } .testimonials h2 { font-size: var(--fs-h2); margin-block: 0.9rem 1.6rem; } .testimonial-track { overflow: hidden; padding-block: 0.5rem 1rem; margin-bottom: 0.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); } .testimonial-marquee { display: flex; gap: 1rem; width: max-content; animation: testimonial-scroll 58s linear infinite; will-change: transform; } .marquee-duplicate { display: contents; } .testimonial-marquee--legacy { display: none; } .testimonial-track:hover .testimonial-marquee, .testimonial-track:focus-within .testimonial-marquee, .testimonial-marquee.is-paused { animation-play-state: paused; } @keyframes testimonial-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.5rem)); } } .testimonial-card { flex: 0 0 min(23rem, calc(100vw - 3rem)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem; display: flex; flex-direction: column; box-shadow: var(--shadow-raised); } .testimonial-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff8f0; background: var(--sky); } .testimonial-card:nth-child(6n+2) .testimonial-avatar { background: var(--sun); } .testimonial-card:nth-child(6n+3) .testimonial-avatar { background: var(--sky-deep); } .testimonial-card:nth-child(6n+4) .testimonial-avatar { background: var(--sun-dark); } .testimonial-card:nth-child(6n+5) .testimonial-avatar { background: #4a7a9e; } .testimonial-card:nth-child(6n+6) .testimonial-avatar { background: #b8722f; } .testimonial-name { display: block; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.15rem; } .stars { color: #f5b400; letter-spacing: 2px; font-size: 0.95rem; margin-bottom: 0.7rem; } .testimonial-card p { font-size: 0.92rem; color: var(--ink); line-height: 1.5; margin-bottom: 0; flex-grow: 1; } .testimonial-meta { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); } .google-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-utility); font-weight: 700; font-size: 0.68rem; color: #4285f4; flex-shrink: 0; } /* ---------------------------------- referral strip ---------------------------------- */ /* Was a two-column white card holding a photo of two support workers. That photo came out at the user's request on 2026-08-26. The section then held THREE gradient cards for a day, which was an overreach — it is back to one, which is what was asked for, so the row/panel/list rules that served the three-card layout are gone rather than left dead in the stylesheet. */ .referral { padding-block: 4rem; } /* Single white-to-orange card, treatment ported from trymeridian.com's enterprise row (`.home_time_visual_col`). THE MECHANISM IS `mix-blend-mode: luminosity`. A first build painted a translucent white dome over the gradient and it was badly wrong — sampling both at the same nine points put the reference's bottom-centre at #ff711a against #fde6d8 here. A white overlay does not shade an orange, it erases it. Luminosity keeps the hue and saturation underneath and takes only lightness from above, so the sphere shades the orange rather than covering it. `isolation: isolate` is load-bearing: without a stacking context the blend reaches the page behind the card instead of the card's own gradient. Two departures from the reference, both because the context differs: - The gradient starts at --paper WHITE, not their #eff0f0. Theirs is a page-grey card on a white page; this site is the other way round — the page IS #eff0f0 — so their value would dissolve the card's top edge. - The corner is --radius, not their 10px. Theirs is a 335px-wide card in a row of four; this is one full-width panel, and --radius is what every other full-width card on this page already uses. */ .arc-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; /* Copy at the top, arc below it — the reference's own structure, and here it is also a contrast requirement. Centred vertically, the paragraph's last lines ran down into the warm half and measured 4.81:1: passing, but 0.31 above AA with a gradient underneath, which is no margin at all. Held to the top, it sits on white at 6.79:1. */ justify-content: flex-start; min-height: 22rem; padding: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius); /* The reference ramps to full orange exactly at the bottom edge, which works there because its sphere is near-black and throws the surrounding orange into relief. With the pale dome used here, that left the orange as a thin strip in the bottom corners — so the ramp finishes at 95%. It also starts at 55% rather than their 20%, to keep the copy block clear of it. */ background: linear-gradient(180deg, var(--paper) 55%, var(--glow) 95%); box-shadow: var(--shadow-card); } /* The reference's sphere is 469px across a 335px card and runs black-to-white, so each of its cards carries a near-black mass — sampled on all three, the darkest pixel is #040100. The screenshot this was chosen from shows a pale peach arc with no dark region, so the radial runs white-to-transparent instead: it lightens the orange into a dome and leaves it at full strength outside. Fading to `transparent` also replaces the reference's two 54px-blur/40px-spread white shadows — a blended pixel at alpha 0 contributes nothing, so the edge feathers on its own. Sized off the card's WIDTH so the arc stays a shallow horizon across a full-width panel rather than the tall dome the reference's narrow card gets. To restore the reference exactly, swap the radial back for `radial-gradient(circle at 30% 30%, #000, #fff)`. */ .arc-sphere { position: absolute; top: 42%; left: 50%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient( circle at 50% 38%, rgba(255, 255, 255, 0.82) 0 44%, rgba(255, 255, 255, 0.54) 68%, rgba(255, 255, 255, 0) 88% ); mix-blend-mode: luminosity; pointer-events: none; } /* Sits above the sphere. Named for the section rather than the card because `_page-dots-check.mjs` measures these two selectors by name. */ .referral-head { position: relative; z-index: 1; max-width: 52ch; } .referral-head h2 { font-size: var(--fs-h2-sm); margin-block: 0 0.8rem; } .referral-head p { color: var(--ink-soft); margin-bottom: 1.6rem; } /* ---------------------------------- enquiry form ---------------------------------- */ .enquiry { padding-block: 1rem 4rem; } .enquiry-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-card); } .enquiry-intro { max-width: 60ch; margin-bottom: 1.8rem; } .enquiry-intro h2 { font-size: var(--fs-h2-sm); margin-block: 0.9rem 0.6rem; } .enquiry-intro p { color: var(--ink-soft); } .enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field--full { grid-column: 1 / -1; } .field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: 0.95rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--ink); /* width: 100% + min-width: 0 were missing here. Every prior can take its longest