/* ───────────────────────────────────────────────────────────────────────────── Neo kit: the section system modelled on neo.nz, in Kiwi Dynamics colours. Plain class names on purpose. The Astro components in src/components/neo/ are thin wrappers that emit this markup, so generate-pseo.mjs can write the same markup as HTML strings and ship this same file in its . No scoped styles live in the components. Every section is `.neo .neo--` and carries data-bg="" (cream excepted) so can fade the page ground to it. ───────────────────────────────────────────────────────────────────────────── */ :root { --neo-ink: #14110f; --neo-lime: #a1ff62; --neo-coral: #e8624f; --neo-orange: #f2954a; --neo-stone: #dcd8cb; --neo-cream: #f4f4f4; /* Type scale measured off neo.nz at 1440 wide: giant hero 160px, section heading 75px, sub heading 58px, caption 38px. Clamped down for phones. */ --neo-h1: clamp(3.6rem, 11.2vw, 10rem); --neo-h2: clamp(2.35rem, 5.25vw, 4.7rem); --neo-h3: clamp(2rem, 4.05vw, 3.625rem); --neo-h4: clamp(1.45rem, 2.65vw, 2.375rem); /* Band body copy is 27px on neo.nz at 1440, not a small paragraph size. */ --neo-body: clamp(1.1rem, 1.875vw, 1.6875rem); --neo-gutter: clamp(1.25rem, 4.4vw, 4rem); } /* ── Section shell ─────────────────────────────────────────────────────────── */ .neo { position: relative; isolation: isolate; overflow: hidden; color: var(--neo-ink); } .neo--lime { background: var(--neo-lime); } .neo--coral { background: var(--neo-coral); } .neo--orange { background: var(--neo-orange); } .neo--stone { background: var(--neo-stone); } .neo--ink { background: var(--neo-ink); color: var(--neo-cream); } .neo--cream { background: var(--neo-cream); } .neo-wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--neo-gutter); } .neo-narrow { max-width: 62rem; margin-inline: auto; } /* ── Type ──────────────────────────────────────────────────────────────────── */ .neo-h { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; color: inherit; margin: 0; text-wrap: balance; } .neo-h--1 { font-size: var(--neo-h1); line-height: 0.94; letter-spacing: -0.045em; } .neo-h--2 { font-size: var(--neo-h2); } .neo-h--3 { font-size: var(--neo-h3); line-height: 0.98; } .neo-h--4 { font-size: var(--neo-h4); line-height: 1.1; letter-spacing: -0.025em; } .neo-h--light { font-weight: 400; letter-spacing: -0.03em; } .neo-h--lime { color: var(--neo-lime); } /* Lime headlines on coral clash; Hunter asked for them gone on 16 Sep 2026. */ .neo--coral .neo-h--lime { color: var(--neo-ink); } .neo-p { font-family: var(--sans); font-size: var(--neo-body); line-height: 1.45; font-weight: 300; margin: 0; max-width: 34em; } .neo-p + .neo-p { margin-top: 0.8em; } .neo-lead { font-weight: 700; letter-spacing: -0.01em; } .neo-fine { font-family: var(--sans); font-size: 0.72rem; line-height: 1.5; font-weight: 400; opacity: 0.75; margin: 0; max-width: none; } .neo-fine a { color: inherit; } /* ── Button: squared, ink, the section's own colour for the label ─────────── */ .neo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; /* neo.nz's buttons measure 265 to 321px wide by 68px tall, radius 6.4px. */ min-height: 4.25rem; min-width: min(16.5rem, 100%); padding: 0.6rem 2.4rem; border: 0; border-radius: 6.4px; background: var(--neo-ink); color: var(--neo-btn-fg, var(--neo-cream)); font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; } .neo-btn:hover { background: #000; } .neo--lime { --neo-btn-fg: var(--neo-lime); } .neo--coral { --neo-btn-fg: var(--neo-coral); } .neo--orange { --neo-btn-fg: var(--neo-orange); } .neo--stone { --neo-btn-fg: var(--neo-stone); } .neo--ink .neo-btn { background: var(--neo-lime); color: var(--neo-ink); } .neo--ink .neo-btn:hover { background: #8ee650; } /* ── Photo layer with parallax ───────────────────────────────────────────────── The picture sits behind the section's content. neo-motion.js nudges it on scroll so it moves slower than the page. It is taller than the section by 16% so the nudge never shows an edge. */ .neo-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .neo-bg img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 50%; display: block; will-change: transform; } /* No picture yet: a soft disc in a darker shade of the band, so the empty side of the layout reads as a shape rather than a missing image. */ .neo-bg--empty::after { content: ''; position: absolute; top: 50%; right: 8%; width: min(42vw, 620px); aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--neo-ink) 7%, transparent); } /* ── Hero: photo ─────────────────────────────────────────────────────────── */ .neo-hero { display: flex; flex-direction: column; } /* Taller than the first screen on a laptop, as neo.nz's is: about 1,000px at 1440 wide including the strip. */ .neo-hero--photo { min-height: max(calc(100svh - var(--header-h, 72px)), clamp(36rem, 62vw, 58rem)); } .neo-hero__body { flex: 1; display: flex; align-items: center; padding-block: clamp(3rem, 7vw, 6rem); } .neo-hero--photo .neo-hero__copy { max-width: min(46rem, 46%); } /* The animal is its own picture, the way neo.nz places its dog: as tall as the hero, anchored bottom right, never wider than 58% of the screen, so the headline always has the left side to itself. It used to be a full-bleed cover, which blew the animal up to fill the whole hero on narrower windows. */ .neo-hero--photo .neo-bg img { left: auto; right: 0; top: auto; bottom: 0; width: auto; height: auto; max-width: 58%; max-height: 100%; object-fit: contain; object-position: 100% 100%; } .neo-hero__text { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); } .neo-hero__cta { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); } .neo-hero__cta .neo-btn { min-width: min(20rem, 100%); } /* Strip carried inside the hero, so the page colour does not flash while it crosses the middle of the screen. */ .neo-hero .neo-strip { flex: none; } /* ── Hero: split (two colour bands over one photo) ─────────────────────────── */ /* White under the photo: multiply over white gives the band its exact colour. Over the section's own colour (or the ScrollColour layer) lime turned olive. */ .neo-hero--split .neo-bg { background: #fff; } .neo-hero--split .neo-bg img { left: auto; right: -4%; width: 66%; object-position: 50% 50%; } .neo-hero__band { position: relative; } /* The band colour multiplies over the photo, the way neo.nz tints its egg: the white of the photo becomes the band colour, the subject keeps its shape. */ .neo-hero__band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--band); mix-blend-mode: multiply; } .neo-hero__band--top { padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(2rem, 4vw, 3.5rem); } .neo-hero__band--bottom { padding-block: clamp(3rem, 6.5vw, 6rem); } .neo-hero__band--bottom .neo-p { max-width: 26em; margin-top: 1rem; font-size: clamp(1rem, 1.25vw, 1.15rem); font-weight: 400; } .neo-hero--split .neo-hero__inner { padding-left: clamp(0rem, 16vw, 18rem); } .neo-hero--split .neo-hero__cta { margin-top: 1.8rem; } .neo-hero--split .neo-hero__cta .neo-btn { min-width: 10rem; } /* ── Hero: giant type ──────────────────────────────────────────────────────── */ .neo-hero--giant { padding-block: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 3vw, 2.5rem); } .neo-hero--giant .neo-h--1 { text-align: right; padding-right: clamp(0rem, 14vw, 16rem); } /* ── Strip ─────────────────────────────────────────────────────────────────── */ .neo-strip { background: var(--neo-ink); color: var(--neo-lime); overflow: hidden; padding-block: clamp(1.1rem, 2vw, 1.8rem); } .neo-strip__track { display: flex; width: max-content; animation: neo-marquee 60s linear infinite; } .neo-strip__set { display: flex; flex-shrink: 0; } .neo-strip__item { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; font-size: clamp(1.5rem, 3.2vw, 2.9rem); line-height: 1.1; padding-inline: clamp(1.2rem, 2.4vw, 2.4rem); } .neo-strip--line { text-align: center; } .neo-strip--line .neo-h { color: var(--neo-lime); font-size: var(--neo-h3); } @keyframes neo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Statement ─────────────────────────────────────────────────────────────── */ .neo-statement { padding-block: clamp(4rem, 9vw, 8rem); } .neo-statement__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: clamp(20rem, 40vw, 34rem); } .neo-statement__copy { grid-column: 2; } .neo-statement__text { font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.4; margin: 0; } .neo-statement__cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; justify-content: flex-end; } .neo-video { grid-column: 1; grid-row: 1; display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--neo-ink); cursor: pointer; } .neo-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; } /* ── Split ─────────────────────────────────────────────────────────────────── */ .neo-split { padding-block: clamp(4rem, 13vw, 12.5rem) clamp(2rem, 6vw, 5rem); } .neo-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-inline: clamp(0rem, 3.8vw, 3.5rem); } .neo-split--reverse .neo-split__copy { order: 2; } .neo-split__copy .neo-p { margin-top: clamp(1.2rem, 2vw, 1.6rem); max-width: 25em; } .neo-split__visual { display: flex; justify-content: center; } .neo-split__visual > * { width: 100%; max-width: 600px; } .neo-split .neo-fine { margin-top: clamp(3rem, 7vw, 6rem); } /* ── Icons ─────────────────────────────────────────────────────────────────── */ .neo-icons { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(2rem, 4vw, 3rem); text-align: center; } .neo-icons__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); max-width: 76rem; margin: clamp(3rem, 6vw, 5rem) auto 0; align-items: start; } .neo-icons--stack .neo-icons__grid { grid-template-columns: 1fr; max-width: 48rem; gap: clamp(3rem, 7vw, 6rem); } .neo-icons__item { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); } .neo-icons__icon { width: clamp(120px, 22vw, 321px); height: auto; aspect-ratio: 1; object-fit: contain; } /* Stacked, the icons are big: 431px each at 1440 on neo.nz's home page, with the caption at sub-heading size under each, so the band runs very tall. */ .neo-icons--stack .neo-icons__icon { width: clamp(150px, 21vw, 300px); } .neo-icons__cap { max-width: 14ch; } .neo-icons--stack .neo-icons__cap { font-size: var(--neo-h3); max-width: 16ch; } .neo-icons__cta { margin-top: clamp(3rem, 6vw, 5rem); } .neo-icons .neo-fine { margin-top: clamp(3rem, 6vw, 5rem); text-align: left; } /* ── Duo: two audiences side by side ───────────────────────────────────────── */ .neo-duo__grid { display: grid; grid-template-columns: 1fr 1fr; } .neo-duo__panel { position: relative; isolation: isolate; padding: clamp(3.5rem, 7vw, 6.5rem) var(--neo-gutter); display: flex; flex-direction: column; align-items: flex-start; min-height: clamp(26rem, 44vw, 40rem); } .neo-duo__panel .neo-p { margin-top: clamp(1.2rem, 2vw, 1.6rem); max-width: 24em; } .neo-duo__label { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; margin-bottom: clamp(1.2rem, 2.4vw, 2rem); } .neo-duo__cta { margin-top: auto; padding-top: clamp(2rem, 4vw, 3rem); } /* ── Cta ───────────────────────────────────────────────────────────────────── */ .neo-cta { padding-block: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 3vw, 2.5rem); text-align: center; } .neo-cta .neo-h { max-width: 18em; margin-inline: auto; } .neo-cta__stat { margin: clamp(1rem, 2vw, 1.4rem) auto 0; max-width: 40em; font-weight: 400; } .neo-cta__visual { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); } .neo-cta__button { margin-top: clamp(2rem, 4vw, 3rem); } .neo-cta .neo-fine { margin-top: clamp(3rem, 6vw, 5rem); text-align: left; } /* ── Photo band ────────────────────────────────────────────────────────────── */ .neo-photo { min-height: clamp(34rem, 70vw, 63rem); display: flex; flex-direction: column; } .neo-photo__body { flex: 1; display: flex; align-items: center; padding-block: clamp(4rem, 8vw, 7rem); } .neo-photo__copy { max-width: min(36rem, 46%); } .neo-photo--right .neo-photo__copy { margin-left: auto; margin-right: clamp(0rem, 3vw, 3rem); } .neo-photo--right .neo-bg img { object-position: 22% 50%; } .neo-photo--left .neo-bg img { object-position: 78% 50%; } .neo-photo--right .neo-bg--empty::after { right: auto; left: 8%; } .neo-photo--center .neo-photo__body { align-items: flex-start; text-align: center; padding-top: clamp(4rem, 11.9vw, 10.7rem); } /* On neo.nz the button under "How Neo works" sits well clear of the copy. */ .neo-photo--center .neo-photo__cta { margin-top: clamp(2.2rem, 7vw, 6.5rem); } .neo-photo--center .neo-photo__copy { max-width: 64rem; margin-inline: auto; } .neo-photo--center .neo-p { max-width: 34em; } .neo-photo--center .neo-p { margin-inline: auto; } .neo-photo--center .neo-bg img { object-position: 50% 100%; } .neo-photo--center .neo-bg--empty::after { top: auto; bottom: -18%; right: 50%; transform: translateX(50%); width: min(56vw, 760px); } .neo-photo__copy .neo-lead { margin-top: clamp(1rem, 2vw, 1.4rem); } .neo-photo__copy .neo-p:not(.neo-lead) { margin-top: 0.6rem; } .neo-photo__cta { margin-top: clamp(1.8rem, 3vw, 2.4rem); } .neo-photo--light { color: #fff; } .neo-photo .neo-fine { padding-bottom: 1.5rem; } /* ── Quote ─────────────────────────────────────────────────────────────────── */ .neo-quote { padding-block: clamp(5rem, 11vw, 9.5rem); text-align: center; } .neo-quote__text { font-family: var(--sans); font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.4; max-width: 32em; margin: 0 auto; } .neo-quote__cite { display: block; margin-top: 1.2rem; font-style: italic; font-size: 0.9rem; opacity: 0.75; } /* ── Circles ───────────────────────────────────────────────────────────────── */ .neo-circle { position: relative; margin: 0; width: clamp(14rem, 34vw, 30.5rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--circle, var(--neo-lime)); } .neo-circle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .neo-circles { padding-block: clamp(3rem, 7vw, 6rem); } .neo-circles__stagger { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; } .neo-circles__a { grid-column: 1; text-align: right; justify-self: end; max-width: 23rem; } .neo-circles__stagger .neo-circle { grid-column: 2; } .neo-circles__b { grid-column: 2; max-width: 23rem; margin-top: clamp(1.8rem, 3.5vw, 2.8rem); } .neo-circles .neo-p { font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.55; max-width: none; } .neo-circles .neo-lead { margin-bottom: 0.7rem; } .neo-circles--list .neo-h { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); } .neo-circles__list { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 64rem; margin-inline: auto; } .neo-circles__list ul { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.9rem; } .neo-circles__list li { font-family: var(--sans); font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 300; line-height: 1.35; max-width: 22em; } /* ── Features ──────────────────────────────────────────────────────────────── */ .neo-features { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 3vw, 2.5rem); } .neo-features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .neo-features__copy .neo-p { margin-top: clamp(2rem, 4vw, 3rem); font-size: clamp(0.98rem, 1.15vw, 1.08rem); max-width: 22em; } .neo-features__copy .neo-p + .neo-p { margin-top: 0.2rem; } .neo-features__list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(0.6rem, 1vw, 0.9rem); } .neo-features__list li { display: flex; align-items: center; gap: 0.8rem; font-family: var(--sans); font-weight: 700; font-size: clamp(1.05rem, 1.55vw, 1.4rem); letter-spacing: -0.01em; } .neo-mark { flex: none; width: 1.25em; height: 1.25em; } .neo-features .neo-fine { margin-top: clamp(3rem, 7vw, 6rem); } /* ── Close ─────────────────────────────────────────────────────────────────── */ .neo-close { padding-block: clamp(4.5rem, 9vw, 8rem); text-align: center; } .neo-close { min-height: clamp(0px, 30vw, 437px); display: flex; align-items: center; justify-content: center; } /* neo.nz's closing "Start" is a smaller button than the others: 103 by 58, 19px. */ .neo-close .neo-btn { margin-top: clamp(1.6rem, 3vw, 2.2rem); min-width: 0; min-height: 3.625rem; padding-inline: 1.9rem; font-size: 1.1875rem; border-radius: 6px; } /* ── Visuals ───────────────────────────────────────────────────────────────── */ .neo-chart { width: 100%; } .neo-chart svg { width: 100%; height: auto; display: block; } .neo-chart__legend { display: flex; justify-content: center; gap: 1.6rem; margin-top: 0.8rem; font-family: var(--sans); font-size: 0.9rem; } .neo-chart__legend span { display: inline-flex; align-items: center; gap: 0.45rem; } .neo-chart__legend i { width: 16px; height: 2.5px; display: inline-block; background: currentColor; } .neo-rings { display: flex; gap: clamp(1.2rem, 3vw, 2.2rem); justify-content: center; } .neo-ring { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .neo-ring__tag { font-family: var(--sans); font-weight: 700; font-size: 1rem; } .neo-ring__circle { position: relative; width: clamp(8rem, 12vw, 11rem); aspect-ratio: 1; } .neo-ring__circle svg { width: 100%; height: 100%; display: block; } .neo-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.3rem); } /* ── Video lightbox (neo-motion.js builds it on demand) ─────────────────────── */ .neo-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 4vw; background: rgba(0, 0, 0, 0.88); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } .neo-lightbox.is-open { opacity: 1; visibility: visible; } .neo-lightbox video { width: min(92vw, 1100px); aspect-ratio: 16 / 9; border-radius: 8px; background: #000; } .neo-lightbox__close { position: absolute; top: 1.4rem; right: 1.4rem; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background-color 0.25s; } .neo-lightbox__close:hover { background: rgba(255, 255, 255, 0.3); } /* ── Phones ────────────────────────────────────────────────────────────────── */ @media (max-width: 780px) { .neo-hero--photo { min-height: 0; max-height: none; } .neo-hero--photo .neo-hero__copy { max-width: none; } .neo-hero--photo .neo-hero__body { padding-bottom: clamp(16rem, 72vw, 22rem); align-items: flex-start; } .neo-hero--photo .neo-bg img { top: auto; bottom: 0; right: 0; width: auto; height: auto; max-height: 58%; max-width: 100%; } .neo-hero--photo .neo-bg--empty::after { top: auto; bottom: -12%; right: -18%; transform: none; width: 78vw; } .neo-hero--split .neo-bg img { width: 100%; right: 0; opacity: 0.9; } .neo-hero--split .neo-hero__inner { padding-left: 0; } .neo-hero--giant .neo-h--1 { text-align: left; padding-right: 0; } .neo-statement__grid, .neo-split__grid, .neo-features__grid, .neo-duo__grid { grid-template-columns: 1fr; } .neo-statement__copy, .neo-video { grid-column: 1; grid-row: auto; } .neo-statement__cta { justify-content: flex-start; } .neo-split__grid { padding-inline: 0; } .neo-split--reverse .neo-split__copy { order: 0; } .neo-icons__grid { grid-template-columns: 1fr; gap: 2.6rem; } .neo-photo__copy, .neo-photo--center .neo-photo__copy { max-width: none; margin: 0; } .neo-photo__body { align-items: flex-start; padding-bottom: clamp(14rem, 60vw, 20rem); } .neo-photo .neo-bg img { top: auto; bottom: 0; height: 55%; } .neo-photo--left .neo-bg--empty::after, .neo-photo--right .neo-bg--empty::after { top: auto; bottom: -14%; left: auto; right: -16%; transform: none; width: 72vw; } .neo-photo--light .neo-photo__copy { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); } .neo-circles__stagger { grid-template-columns: 1fr; row-gap: 1.8rem; } .neo-circles__a, .neo-circles__b { grid-column: 1; text-align: left; justify-self: start; margin-top: 0; max-width: none; } .neo-circles__stagger .neo-circle { grid-column: 1; justify-self: center; } .neo-circles__list { grid-template-columns: 1fr; justify-items: center; } } @media (prefers-reduced-motion: reduce) { .neo-strip__track { animation: none; } .neo-bg img { transform: none !important; } }