/* ============================================================= NextLevel Landscaping — THEME "CARBON SOFT v2" Carbon soft's palette and type, turned into a ribbon. One design move carries the whole identity: a large single- corner "scoop" curve on every band, the corner ROTATING from section to section so each band sweeps up out of the one above it like a hand-drawn ribbon instead of a repeated stamp. The client already loved this on the Our Work band — a top sweep with a negative-margin pull (see the base file's section 42 rule). v2 generalises that one move to the whole page: hero (bottom) . . . bottom-LEFT on the media 0 0 0 V #intro (dark) . . . flat — meets the hero 0 0 0 0 #services(light) . . . top-RIGHT + bottom-LEFT 0 V 0 V #projects(dark) . . . flat — #services curves over it 0 0 0 0 #current (light) . . . top-RIGHT + bottom-LEFT 0 V 0 V #reviews (dark) . . . flat — #current curves over it 0 0 0 0 #process (light) . . . top-RIGHT 0 V 0 0 #store (dark) . . . flat 0 0 0 0 #contact (light) . . . flat — under the strip 0 0 0 0 .site-footer (dark) . . . top-LEFT + top-RIGHT V V 0 0 (V = var(--v2-scoop)) PALETTE (Carbon soft's) — two grounds: night #17190F . . . #intro #projects #reviews #store, .hero, .site-footer — off-white text ground #F2F2EC . . . #services #current #process #contact Lime is FILLS + MARKS only. Accent TEXT is olive #3E4A16 on light, lime #C2E807 on night. --accent-ink stays #17190F, so any lime fill prints near-black. EVERY selector in this file is scoped under html[data-theme="carbon-soft-v2"] so it beats the base sheet regardless of load order. The only unscoped things are @media/@supports wrappers and comments. The demo .theme-bar is left untouched. NOTE: the spec's --v2-muted suggestion #6E7265 only reaches 4.39:1 on #F2F2EC, so it has been darkened one step to #6B6F62 for a 4.59:1 AA pass. The base carbon-soft #6A6C60 was tuned for #FFFFFF; this is tuned for the warm ground. ============================================================= */ /* ============================================================= 1. PALETTE + TOKENS Re-point the base design system so inherited rules resolve to the correct ground automatically. Light values are the default context; night values are swapped in by section 2. ============================================================= */ html[data-theme="carbon-soft-v2"]{ /* --- the two grounds -------------------------------------- */ --v2-ground : #F2F2EC; /* warm light ground for the light bands */ --v2-night : #17190F; /* near-black for the dark bands */ --v2-ink : #17190F; /* text on light */ --v2-on-night : #F2F2EC; /* text on dark */ --v2-muted : #6B6F62; /* secondary on light (4.59:1 on ground)*/ --v2-muted-nt : rgba(242,242,236,.72); /* secondary on dark */ --v2-line : rgba(23,25,15,.14); /* hairline on light */ --v2-line-nt : rgba(242,242,236,.16); /* hairline on dark */ --v2-line-ui : rgba(23,25,15,.5); /* interactive border, >=3:1 */ /* --- accent: fills + marks --------------------------------- */ --v2-lime : #C2E807; /* FILLS + MARKS; never TEXT on light */ --v2-lime-ink : #3E4A16; /* olive — accent TEXT on light (~8.5:1) */ /* --- re-point the base system (light defaults) ------------- */ --bg:var(--v2-ground); --surface-dark:var(--v2-night); --surface-dark-2:var(--v2-night); --ink:var(--v2-ink); --muted:var(--v2-muted); --muted-dark:var(--v2-muted-nt); --line:var(--v2-line); --line-dark:var(--v2-line-nt); --scrim:rgba(23,25,15,.42); /* accent is context-aware: olive accent TEXT on light, lime on night. Ink printed ON an accent fill stays near-black. */ --accent:var(--v2-lime-ink); --accent-light:var(--v2-lime-ink); --accent-dark:var(--v2-lime); --accent-ink:#17190F; --accent-ink-light:#17190F; --accent-ink-dark:#17190F; /* carbon-soft's look: pill buttons, weight-400 all-caps heads */ --btn-radius:999px; --h-weight:400; /* --- THE SIGNATURE MOVE — one radius token ----------------- Bumped 2026-09-23: client compared us directly against lagunapools.com.au and asked for their boldness — Laguna runs a fixed 150-300px curve at EVERY width, including mobile, it never shrinks. Matched their 300px ceiling and raised the floor so the curve stays bold through tablet/laptop widths instead of tapering off (was clamp(56px,11vw,150px), mobile 44px — both read as barely-there next to Laguna's). */ --v2-scoop: clamp(110px, 21vw, 300px); --v2-scoop-card: clamp(28px, 5vw, 72px); /* card-level scoop for the store row */ } @media(max-width:640px){ html[data-theme="carbon-soft-v2"]{ --v2-scoop: 130px; } } /* ============================================================= 2. THE TWO GROUNDS Every band declares an explicit ground so the pinned sticky-hero video can never bleed through a transparent section. These selectors carry their own background AND class-doubled ids so they beat the base [data-hero="sticky"] opacity rules. ============================================================= */ html[data-theme="carbon-soft-v2"]{ background:var(--v2-ground); } html[data-theme="carbon-soft-v2"] body{ background:var(--v2-ground); color:var(--v2-ink); } html[data-theme="carbon-soft-v2"] main{ background:var(--v2-ground); } /* --- LIGHT bands -------------------------------------------- */ html[data-theme="carbon-soft-v2"] main > #services, html[data-theme="carbon-soft-v2"] main > #current, html[data-theme="carbon-soft-v2"] main > #process, html[data-theme="carbon-soft-v2"] main > #contact{ background:var(--v2-ground); background-color:var(--v2-ground); color:var(--v2-ink); } /* --- NIGHT bands: flip tokens + ink ------------------------- */ html[data-theme="carbon-soft-v2"] .hero, html[data-theme="carbon-soft-v2"] main > #intro, html[data-theme="carbon-soft-v2"] main > .band.band--dark, html[data-theme="carbon-soft-v2"] main > #projects, html[data-theme="carbon-soft-v2"] main > #reviews, html[data-theme="carbon-soft-v2"] main > #store, html[data-theme="carbon-soft-v2"] main > .strip-band, html[data-theme="carbon-soft-v2"] .site-footer, html[data-theme="carbon-soft-v2"] .drawer, html[data-theme="carbon-soft-v2"] .subhero{ background:var(--v2-night); background-color:var(--v2-night); color:var(--v2-on-night); --ink:var(--v2-on-night); --muted:var(--v2-muted-nt); --muted-dark:var(--v2-muted-nt); --line:var(--v2-line-nt); --line-dark:var(--v2-line-nt); --surface-dark:var(--v2-night); --accent:var(--v2-lime); --accent-light:var(--v2-lime); --accent-dark:var(--v2-lime); --accent-ink:#17190F; --accent-ink-light:#17190F; --accent-ink-dark:#17190F; } /* ============================================================= 3. THE SIGNATURE MOVE — rotating single-corner scoop Every main band is a positioned layer that pulls itself up over the band above with a negative margin, its OWN single corner rounding to reveal the band underneath through the curve. - #intro meets the hero flat (the hero owns the curve). - the light bands #services and #current each own a BOTTOM-LEFT seam curve; the dark band under each (#projects, #reviews) is flat and tucks up behind it (same idea as hero/#intro). - #current and #process still ride up out of their predecessor with a top corner cut. - #store and #contact sit flat; the footer owns the last curve. ============================================================= */ html[data-theme="carbon-soft-v2"] main > .band{ position:relative; z-index:1; } /* the riders — same geometry, corner rotates per section */ html[data-theme="carbon-soft-v2"] main > #services, html[data-theme="carbon-soft-v2"] main > #current, html[data-theme="carbon-soft-v2"] main > #process, html[data-theme="carbon-soft-v2"] main > #store{ margin-top:calc(-1 * var(--v2-scoop)); padding-top:calc(var(--pad-band) + var(--v2-scoop) * .45); } /* the corner map */ html[data-theme="carbon-soft-v2"] main > #intro{ border-radius:0 0 0 0; /* flat — hero owns the curve */ margin-top:0; /* the only two "flat" bands (#intro, #contact) don't get the scoop reservation's extra padding the way #services/#current/#projects/#reviews do, so they read as cramped next to those unless bumped to the larger statement-band figure on their own (2026-09-23, client feedback). */ padding-top:var(--pad-band-lg); } html[data-theme="carbon-soft-v2"] main > #services{ border-radius:0 var(--v2-scoop) 0 var(--v2-scoop); } /* TR + BL — owns the seam curve */ html[data-theme="carbon-soft-v2"] main > #projects{ border-radius:0 0 0 0; } /* flat — #services curves over it */ html[data-theme="carbon-soft-v2"] main > #projects{ margin-top:calc(-1 * var(--v2-scoop)); padding-top:calc(var(--pad-band) + var(--v2-scoop)); /* tucks up behind #services's bottom-left scoop */ } /* #services owns the seam curve at its BOTTOM-LEFT and sits ON TOP; #projects (flat) tucks up behind so the night ground shows through the notch — like the hero owns its curve and #intro stays flat. */ html[data-theme="carbon-soft-v2"] main > #services{ z-index:2; padding-bottom:calc(var(--pad-band) + var(--v2-scoop)); } html[data-theme="carbon-soft-v2"] main > #current{ border-radius:0 var(--v2-scoop) 0 var(--v2-scoop); } /* TR + BL — owns the #current/#reviews seam */ html[data-theme="carbon-soft-v2"] main > #reviews{ border-radius:0 0 0 0; } /* flat — #current curves over it */ html[data-theme="carbon-soft-v2"] main > #reviews{ margin-top:calc(-1 * var(--v2-scoop)); padding-top:calc(var(--pad-band) + var(--v2-scoop)); /* tucks up behind #current's bottom-left scoop */ } html[data-theme="carbon-soft-v2"] main > #current{ z-index:2; } /* sits on top so it clips over #reviews */ html[data-theme="carbon-soft-v2"] main > #process{ border-radius:0 var(--v2-scoop) 0 0; } /* top-RIGHT */ html[data-theme="carbon-soft-v2"] main > #store{ border-radius:0 0 0 0; /* flat — no scoop on the store band */ } html[data-theme="carbon-soft-v2"] main > #contact{ border-radius:0 0 0 0; /* flat — sits under the photo strip */ } html[data-theme="carbon-soft-v2"] main > #contact{ margin-top:0; padding-top:var(--pad-band-lg); } /* the band ABOVE each scoop needs room to be pulled into. #intro also gets it (services sweeps up over its bottom). #process no longer reserves this — the #store band it used to be pulled into by has been removed from the page. */ html[data-theme="carbon-soft-v2"] main > #intro, html[data-theme="carbon-soft-v2"] main > #current, html[data-theme="carbon-soft-v2"] main > #reviews{ padding-bottom:calc(var(--pad-band) + var(--v2-scoop)); } /* #process is now the last content band before the photo strip — give it the standard sub-page "last band" reservation instead so the footer/strip transition still has breathing room, not a gap. */ html[data-theme="carbon-soft-v2"] main > #process{ padding-bottom:var(--pad-band); } /* #projects is followed by its own folded strip, then #current sweeps over the section's night margin — so the projects band itself compensates (never the full-bleed strip) */ html[data-theme="carbon-soft-v2"] main > #projects{ padding-bottom:calc(var(--pad-band) + var(--v2-scoop)); } /* footer is flat for now (no scoop pull), so #contact only needs its own normal statement-band padding, not the extra reserve */ html[data-theme="carbon-soft-v2"] main > #contact{ padding-bottom:var(--pad-band-lg); } /* sub-pages: footer is flat for now (no scoop pull), so the last content band only needs its normal padding, not a reserve */ html[data-theme="carbon-soft-v2"] main > .band:last-of-type{ padding-bottom:var(--pad-band); } /* clip the contour texture to the curve so the sweep stays clean */ html[data-theme="carbon-soft-v2"] #intro.contour::before, html[data-theme="carbon-soft-v2"] #projects.contour::before, html[data-theme="carbon-soft-v2"] #reviews.contour::before, html[data-theme="carbon-soft-v2"] #store.contour::before{ border-radius:inherit; } /* sticky-hero variant: bands keep their own grounds and the hero keeps its pinned behaviour — square the hero media once covered */ html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > .band{position:relative;z-index:1} html[data-theme="carbon-soft-v2"][data-hero="sticky"] .hero__media{border-radius:0} /* client asked for the scoop back at the hero/#intro seam even in sticky mode — #intro's top-left corner is cut out, revealing the pinned hero underneath as it slides up to cover it */ html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #intro{border-radius:var(--v2-scoop) 0 0 0} html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #services, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #projects, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #current, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #reviews, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #process, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #store, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #contact{ background-color:var(--v2-ground); } html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #intro, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #projects, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #reviews, html[data-theme="carbon-soft-v2"][data-hero="sticky"] main > #store{ background-color:var(--v2-night); } /* the swiper carousels inside scooped bands never clip a shadow that breaks the curve; clip only that paint, never sticky. #services joined the both-corners scoop, so it clips too — its figure sits near the new top-right curve. */ html[data-theme="carbon-soft-v2"] main > #services, html[data-theme="carbon-soft-v2"] main > #projects, html[data-theme="carbon-soft-v2"] main > #current, html[data-theme="carbon-soft-v2"] main > #reviews{ overflow:clip; } /* ============================================================= 4. HERO — bottom-LEFT sweep, no pull The hero is the opening image; it does not ride up over anything. Its media owns the bottom-left curve (the scroll cue sits in it). ============================================================= */ html[data-theme="carbon-soft-v2"] .hero{ background:var(--v2-night); min-height:100svh; } html[data-theme="carbon-soft-v2"] .hero__media{ border-radius:0 0 0 var(--v2-scoop); /* bottom-left sweep */ background:var(--v2-night); } html[data-theme="carbon-soft-v2"] .hero__media::after{ background:linear-gradient(180deg,rgba(23,25,15,.6) 0%,rgba(23,25,15,.16) 34%,rgba(23,25,15,.22) 58%,rgba(23,25,15,.78) 100%); } html[data-theme="carbon-soft-v2"] .hero__overlay{background:rgba(23,25,15,.3)} html[data-theme="carbon-soft-v2"] .hero__tag h2{color:#fff;text-shadow:0 2px 26px rgba(23,25,15,.55)} html[data-theme="carbon-soft-v2"] .hero__tag span{color:rgba(242,242,236,.78)} html[data-theme="carbon-soft-v2"] .hero__cue{color:rgba(242,242,236,.8)} html[data-theme="carbon-soft-v2"] .hero__cue::after{background:rgba(242,242,236,.5)} html[data-theme="carbon-soft-v2"] .hero-scroll{color:rgba(242,242,236,.8)} html[data-theme="carbon-soft-v2"] .hero-car__nav{border-color:rgba(242,242,236,.4);color:#F2F2EC} html[data-theme="carbon-soft-v2"] .hero-car__nav:hover{background:rgba(242,242,236,.16);border-color:#F2F2EC} html[data-theme="carbon-soft-v2"] .hero-pause{ border-color:rgba(242,242,236,.55); background:rgba(23,25,15,.45); color:#F2F2EC; } html[data-theme="carbon-soft-v2"] .hero-pause:hover{background:rgba(23,25,15,.72);border-color:#F2F2EC} html[data-theme="carbon-soft-v2"] .hero-pause:focus-visible{outline-color:#C2E807} /* ============================================================= 5. THE IMAGE STRIP — quiet full-bleed photo band before #contact A silent row of site photos (no heading) sitting on the night ground between the store band and the contact form. It gets NO scoop of its own; #contact rides up over it with the closing curve. ============================================================= */ html[data-theme="carbon-soft-v2"] main > #project-strip, html[data-theme="carbon-soft-v2"] .strip-band{ background:var(--v2-night); color:var(--v2-on-night); } html[data-theme="carbon-soft-v2"] main > #project-strip{ padding:0; } html[data-theme="carbon-soft-v2"] .strip .swiper-slide img{ border-radius:0; } html[data-theme="carbon-soft-v2"] .strip__cap{ background:rgba(23,25,15,.66); color:#F2F2EC; } html[data-theme="carbon-soft-v2"] .strip__nav{ background:rgba(242,242,236,.92); color:#17190F; } html[data-theme="carbon-soft-v2"] .strip__nav:hover{ background:#C2E807; color:#17190F; border-color:#C2E807; } html[data-theme="carbon-soft-v2"] .strip__nav.swiper-button-disabled{opacity:.35;pointer-events:none} /* Closing CTA band with a photo backdrop — reads as its own moment, clearly separate from the flat-dark footer that follows it. (Selector matches main > .band.band--dark's specificity + the cta-photo class so its background shorthand can't reset our background-size/position back to their initial values.) */ html[data-theme="carbon-soft-v2"] main > .band.band--dark.cta-photo{ background-size:cover; background-position:center; background-repeat:no-repeat; padding-block:clamp(72px,12vw,140px); isolation:isolate; } html[data-theme="carbon-soft-v2"] .cta-photo::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(10,12,10,.55) 0%,rgba(10,12,10,.72) 55%,rgba(10,12,10,.94) 100%); } html[data-theme="carbon-soft-v2"] .cta-photo > .container{position:relative;z-index:1} /* ============================================================= 6. TYPOGRAPHY Carbon soft's voice: weight-400 all-caps headings (Poppins), off-white on night, near-black on light. The eyebrow and lead flip with the ground via the tokens set in section 2. ============================================================= */ html[data-theme="carbon-soft-v2"] h1, html[data-theme="carbon-soft-v2"] h2, html[data-theme="carbon-soft-v2"] h3, html[data-theme="carbon-soft-v2"] h4, html[data-theme="carbon-soft-v2"] h5, html[data-theme="carbon-soft-v2"] h6{font-weight:400} /* night headings off-white (base paints them #fff) */ html[data-theme="carbon-soft-v2"] .band--dark h1, html[data-theme="carbon-soft-v2"] .band--dark h2, html[data-theme="carbon-soft-v2"] .band--dark h3, html[data-theme="carbon-soft-v2"] .band--dark h4, html[data-theme="carbon-soft-v2"] .site-footer h4{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] .band--dark .eyebrow, html[data-theme="carbon-soft-v2"] main > #projects .eyebrow, html[data-theme="carbon-soft-v2"] main > #reviews .eyebrow, html[data-theme="carbon-soft-v2"] main > #store .eyebrow{color:var(--v2-lime)} html[data-theme="carbon-soft-v2"] .section-head{max-width:54ch} html[data-theme="carbon-soft-v2"] .lead{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .band--dark .lead, html[data-theme="carbon-soft-v2"] .subhero .lead, html[data-theme="carbon-soft-v2"] main > #intro .lead{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] .band--dark p{color:var(--v2-on-night)} /* ============================================================= 7. INTRO (#intro) — positioning + trust, on night Base rules give this section dark stat/cred colours; v2 keeps the split/stacked layouts and re-inks every literal to off-white. ============================================================= */ html[data-theme="carbon-soft-v2"] #intro .statline{margin-top:3.5rem} html[data-theme="carbon-soft-v2"] #intro .stat-n b{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] #intro .stat-n b i{color:var(--v2-lime)} html[data-theme="carbon-soft-v2"] #intro .stat-n > span{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] #intro .stat-n::before{background:var(--v2-line-nt)} html[data-theme="carbon-soft-v2"] #intro .credline{border-top-color:var(--v2-line-nt)} html[data-theme="carbon-soft-v2"] #intro .credline span{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] #intro .credline i{color:var(--v2-lime)} html[data-theme="carbon-soft-v2"] #intro .credline b{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] #intro .headline h1{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] #intro .eyebrow{color:var(--v2-lime)} html[data-theme="carbon-soft-v2"] #intro .btn-ghost--fill{ background:#C2E807;border-color:#C2E807;color:#17190F;--c:#C2E807; } html[data-theme="carbon-soft-v2"] #intro .btn-ghost--fill:hover{color:#C2E807} html[data-theme="carbon-soft-v2"] #intro .btn-ghost--fill::before{background:#17190F} html[data-theme="carbon-soft-v2"] #intro .btn-ghost:not(.btn-ghost--fill){border-color:rgba(242,242,236,.85);color:#F2F2EC;--c:#F2F2EC} html[data-theme="carbon-soft-v2"] #intro .btn-ghost:not(.btn-ghost--fill):hover{color:#17190F} /* the intro figures sit right of the copy in split layout */ html[data-theme="carbon-soft-v2"] #intro .intro-figures{align-self:center} /* ============================================================= 8. SERVICES (#services) — light ground, list + sticky image ============================================================= */ html[data-theme="carbon-soft-v2"] .svc-list{border-top-color:var(--v2-line)} html[data-theme="carbon-soft-v2"] .svc-item{border-bottom-color:var(--v2-line);color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .svc-item__no{color:var(--v2-muted);opacity:.7} html[data-theme="carbon-soft-v2"] .svc-item:hover, html[data-theme="carbon-soft-v2"] .svc-item.is-active{color:var(--v2-ink)} html[data-theme="carbon-soft-v2"] .svc-item:hover .svc-item__no, html[data-theme="carbon-soft-v2"] .svc-item.is-active .svc-item__no{color:var(--v2-lime-ink);opacity:1} html[data-theme="carbon-soft-v2"] .svc-item__go{color:var(--v2-lime-ink)} html[data-theme="carbon-soft-v2"] .svc-copy p{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .svc-accordion-media p{color:var(--v2-muted)} /* chips read their ground: olive-marked on light */ html[data-theme="carbon-soft-v2"] .chips li{color:var(--v2-muted);border-color:var(--v2-line)} html[data-theme="carbon-soft-v2"] .band--dark .chips li, html[data-theme="carbon-soft-v2"] #reviews .chips li{color:var(--v2-muted-nt);border-color:var(--v2-line-nt)} /* ============================================================= 9. PROJECTS (#projects) — dark ground, signature swiper The folded strip inside keeps the night ground (section 5). ============================================================= */ html[data-theme="carbon-soft-v2"] .proj-card h3{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] .proj-card__meta{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] .proj-card p{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] .proj-card .media{background:var(--v2-night)} html[data-theme="carbon-soft-v2"] .swiper-controls button{ border-color:rgba(242,242,236,.42);color:#F2F2EC;background:none; } html[data-theme="carbon-soft-v2"] .swiper-controls button:hover{background:#F2F2EC;color:#17190F} /* ============================================================= 10. CURRENT WORK (#current) — light ground, live stages ============================================================= */ html[data-theme="carbon-soft-v2"] .cw-card h3{color:var(--v2-ink)} html[data-theme="carbon-soft-v2"] .cw-card__meta{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .cw-card__note{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .cw-card__stage{color:var(--v2-ink)} html[data-theme="carbon-soft-v2"] .cw-card__stage small{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .cw-card .media{background:var(--v2-night)} html[data-theme="carbon-soft-v2"] .stepper li{background:var(--v2-line)} html[data-theme="carbon-soft-v2"] .stepper li.done, html[data-theme="carbon-soft-v2"] .stepper li.now{background:var(--v2-lime-ink)} html[data-theme="carbon-soft-v2"] .stepper li.now{box-shadow:0 0 0 3px color-mix(in srgb,var(--v2-lime) 30%,transparent)} html[data-theme="carbon-soft-v2"] .cw-card:hover h3{color:var(--v2-lime-ink)} /* ============================================================= 11. PROCESS (#process) — light ground, bare numerals ============================================================= */ html[data-theme="carbon-soft-v2"] .proc__num{ border-color:var(--v2-line-ui); color:var(--v2-lime-ink); } html[data-theme="carbon-soft-v2"] .proc__num span{ background:var(--v2-lime); color:#17190F; border:2px solid var(--v2-ground); } html[data-theme="carbon-soft-v2"] .proc h3{color:var(--v2-ink)} html[data-theme="carbon-soft-v2"] .proc p{color:var(--v2-muted)} /* .proc on a dark band (about.html values, services.html steps) — ink-on-night was invisible */ html[data-theme="carbon-soft-v2"] .band--dark .proc h3{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] .band--dark .proc p{color:var(--v2-muted-nt)} /* photo-led steps: same bookend sweep as the store row, so the two sections read as one family (client asked for the store look) */ html[data-theme="carbon-soft-v2"] .proc__media{background:var(--v2-night)} html[data-theme="carbon-soft-v2"] .proc--photo:first-child .proc__media{ border-radius:var(--v2-scoop-card) 0 0 0; } html[data-theme="carbon-soft-v2"] .proc--photo:last-child .proc__media{ border-radius:0 var(--v2-scoop-card) 0 0; } html[data-theme="carbon-soft-v2"] .proc__step{background:var(--v2-lime);color:#17190F} /* ============================================================= 12. STORE (#store) — dark ground, product grid ============================================================= */ html[data-theme="carbon-soft-v2"] .store-card h3{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] .store-card p, html[data-theme="carbon-soft-v2"] .band--dark .store-card p{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] .store-card .media{background:var(--v2-night)} /* store row bookends — outer cards sweep one corner each */ html[data-theme="carbon-soft-v2"] .store-card:first-child .media{ border-radius:var(--v2-scoop-card) 0 0 0; } html[data-theme="carbon-soft-v2"] .store-card:last-child .media{ border-radius:0 var(--v2-scoop-card) 0 0; } /* ============================================================= 13. REVIEWS (#reviews) — dark ground, quote swiper ============================================================= */ html[data-theme="carbon-soft-v2"] .rev-card{border-top-color:var(--v2-line-nt)} html[data-theme="carbon-soft-v2"] .rev-card p{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] .rev-card__who b{color:var(--v2-on-night)} html[data-theme="carbon-soft-v2"] .rev-card__who span span{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] .rev-avatar, html[data-theme="carbon-soft-v2"] .rev-card__who .rev-avatar{ background:var(--v2-lime); color:#17190F; border-radius:50% 50% 50% 0; } /* ============================================================= 14. CONTACT (#contact) — light ground, the closer Fields get a firmer resting border (>=3:1) and an olive focus. ============================================================= */ html[data-theme="carbon-soft-v2"] .contact-wrap{grid-template-columns:1.05fr .95fr} html[data-theme="carbon-soft-v2"] .field label{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .field input, html[data-theme="carbon-soft-v2"] .field textarea{ border-color:var(--v2-line-ui); background:#fff; color:var(--v2-ink); } html[data-theme="carbon-soft-v2"] .field input:hover, html[data-theme="carbon-soft-v2"] .field textarea:hover{border-color:var(--v2-ink)} html[data-theme="carbon-soft-v2"] .field input:focus, html[data-theme="carbon-soft-v2"] .field textarea:focus{ outline:none;border-color:var(--v2-lime-ink); } html[data-theme="carbon-soft-v2"] .field input:focus-visible, html[data-theme="carbon-soft-v2"] .field textarea:focus-visible{ outline:2px solid var(--v2-lime-ink); outline-offset:2px; } html[data-theme="carbon-soft-v2"] .field .msg{color:#9C2B1B} html[data-theme="carbon-soft-v2"] .form-note{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .form-ok{ background:color-mix(in srgb,var(--v2-lime) 14%,#fff); border-color:color-mix(in srgb,var(--v2-lime-ink) 45%,#fff); } html[data-theme="carbon-soft-v2"] .contact-info dt{color:var(--v2-lime-ink)} html[data-theme="carbon-soft-v2"] .contact-info dd{color:var(--v2-muted)} html[data-theme="carbon-soft-v2"] .contact-info dd a:hover{color:var(--v2-ink);text-decoration:underline} html[data-theme="carbon-soft-v2"] .contact-info .tbc{color:var(--v2-muted);opacity:.75} /* ============================================================= 15. FOOTER — dark close, FLAT for now (no scoop), full-width like lagunapools.com.au's own footer (client checked their footer live 2026-09-23: border-radius:0, runs near-full viewport width). Placeholder treatment — client wants to finalise the footer look later; this is the interim baseline. ============================================================= */ html[data-theme="carbon-soft-v2"] .site-footer--scoop{ position:relative; z-index:1; border-radius:0; margin-top:0; padding-top:72px; background:var(--v2-night); background-color:var(--v2-night); } @media(max-width:640px){ html[data-theme="carbon-soft-v2"] .site-footer--scoop{padding-top:56px} } html[data-theme="carbon-soft-v2"] .site-footer{ color:var(--v2-muted-nt); border-top:0; } /* footer content uses the site's NORMAL 1200px container (client asked 2026-09-23 to pull it back in — the earlier full-width Laguna-style treatment was a placeholder). The header stays full-width; the footer does not. Nothing to override here — `.container` already does the right thing. */ html[data-theme="carbon-soft-v2"] .site-footer a:hover{color:#fff} html[data-theme="carbon-soft-v2"] .site-footer .footer-brand p{color:var(--v2-muted-nt)} html[data-theme="carbon-soft-v2"] .footer-bar{border-top-color:var(--v2-line-nt);color:var(--v2-muted-nt)} /* ============================================================= 16. HEADERS (both variants) + DRAWER Over the night hero the headers stay transparent with off-white links; stuck they drop onto the night ground. The drawer is night too. Lime is reserved for marks + focus. ============================================================= */ html[data-theme="carbon-soft-v2"] .site-header{background-color:transparent} html[data-theme="carbon-soft-v2"] .site-header.is-stuck{ background-color:var(--v2-night); box-shadow:0 1px 0 rgba(242,242,236,.08); } html[data-theme="carbon-soft-v2"] .hdr2:not(.is-stuck){background-color:transparent} html[data-theme="carbon-soft-v2"][data-layout="centred"] .hdr2.is-stuck{ background-color:#17190F; background-color:var(--v2-night); box-shadow:0 1px 0 rgba(242,242,236,.08); } html[data-theme="carbon-soft-v2"] .hdr2__util{border-bottom-color:rgba(242,242,236,.16)} /* navigation links stay off-white in both header states; hover lime */ html[data-theme="carbon-soft-v2"] .site-header .main-nav a, html[data-theme="carbon-soft-v2"] .site-header .header-cta .phone, html[data-theme="carbon-soft-v2"] .hdr2__nav a, html[data-theme="carbon-soft-v2"] .hdr2__drop, html[data-theme="carbon-soft-v2"] .hdr2__util a, html[data-theme="carbon-soft-v2"] .hdr2__util-right a{ color:rgba(242,242,236,.88); text-shadow:none; } html[data-theme="carbon-soft-v2"] .site-header .main-nav a:hover, html[data-theme="carbon-soft-v2"] .hdr2__nav a:hover{color:#C2E807} html[data-theme="carbon-soft-v2"] .site-header .brand, html[data-theme="carbon-soft-v2"] .hdr2__brand{color:#F2F2EC} html[data-theme="carbon-soft-v2"] .site-header:not(.is-stuck) .brand span{color:rgba(242,242,236,.6)} html[data-theme="carbon-soft-v2"] .header-cta .btn-ghost--fill, html[data-theme="carbon-soft-v2"] .site-header .header-cta .btn-ghost--fill, html[data-theme="carbon-soft-v2"] .site-header.is-stuck .header-cta .btn-ghost--fill{ background:#C2E807;border-color:#C2E807;color:#17190F;--c:#C2E807; } html[data-theme="carbon-soft-v2"] .header-cta .btn-ghost--fill::before, html[data-theme="carbon-soft-v2"] .site-header .header-cta .btn-ghost--fill::before, html[data-theme="carbon-soft-v2"] .site-header.is-stuck .header-cta .btn-ghost--fill::before{background:#17190F} html[data-theme="carbon-soft-v2"] .header-cta .btn-ghost--fill:hover, html[data-theme="carbon-soft-v2"] .site-header .header-cta .btn-ghost--fill:hover, html[data-theme="carbon-soft-v2"] .site-header.is-stuck .header-cta .btn-ghost--fill:hover{color:#C2E807} html[data-theme="carbon-soft-v2"] .nav-toggle, html[data-theme="carbon-soft-v2"] .hdr2__toggle, html[data-theme="carbon-soft-v2"] .drawer__close{ border-color:rgba(242,242,236,.5); color:#F2F2EC; background:none; box-shadow:none; backdrop-filter:none; } html[data-theme="carbon-soft-v2"] .nav-toggle:hover, html[data-theme="carbon-soft-v2"] .hdr2__toggle:hover, html[data-theme="carbon-soft-v2"] .drawer__close:hover{background:rgba(242,242,236,.16)} html[data-theme="carbon-soft-v2"] .drawer{background:var(--v2-night)} html[data-theme="carbon-soft-v2"] .drawer nav a{border-bottom-color:var(--v2-line-nt);color:#F2F2EC} html[data-theme="carbon-soft-v2"] .drawer nav a:hover{color:#C2E807} html[data-theme="carbon-soft-v2"] .drawer__foot{color:var(--v2-muted-nt)} /* ============================================================= 17. BUTTONS + LINKS — pills, lime fills only The primary fill is LIME on both grounds (never olive: olive is reserved for accent TEXT on light) and prints near-black ink. Ghosts stay ink-on-light / off-white-on-night pills. ============================================================= */ html[data-theme="carbon-soft-v2"] .btn-ghost{border-radius:999px} html[data-theme="carbon-soft-v2"] .btn-ghost--fill, html[data-theme="carbon-soft-v2"] .band--dark .btn-ghost--fill, html[data-theme="carbon-soft-v2"] main > #services .btn-ghost--fill, html[data-theme="carbon-soft-v2"] main > #contact .btn-ghost--fill{ background:#C2E807; border-color:#C2E807; color:#17190F; --c:#C2E807; } html[data-theme="carbon-soft-v2"] .btn-ghost--fill::before, html[data-theme="carbon-soft-v2"] .band--dark .btn-ghost--fill::before{background:#17190F} html[data-theme="carbon-soft-v2"] .btn-ghost--fill:hover, html[data-theme="carbon-soft-v2"] .band--dark .btn-ghost--fill:hover{ color:#C2E807; border-color:#17190F; } /* ghost buttons read their ground — never the solid fill pill */ html[data-theme="carbon-soft-v2"] .band--dark .btn-ghost:not(.btn-ghost--fill){--c:rgba(242,242,236,.9);color:rgba(242,242,236,.9)} html[data-theme="carbon-soft-v2"] .band--dark .btn-ghost:not(.btn-ghost--fill):hover{color:#17190F} /* text links flip with the ground */ html[data-theme="carbon-soft-v2"] .tlink{color:inherit} html[data-theme="carbon-soft-v2"] .tlink i{color:var(--v2-lime-ink)} html[data-theme="carbon-soft-v2"] .band--dark .tlink i{color:var(--v2-lime)} /* skip link: lime fill with near-black text, always on the page */ html[data-theme="carbon-soft-v2"] .skip-link{ background:#C2E807; color:#17190F; border-radius:999px; } html[data-theme="carbon-soft-v2"] .skip-link:focus{ top:12px; outline:2px solid #17190F; outline-offset:3px; } /* ============================================================= 18. FOCUS — always visible, accent-coloured Lime on night (and over the night hero), olive on light. >=2px. ============================================================= */ html[data-theme="carbon-soft-v2"] a:focus-visible, html[data-theme="carbon-soft-v2"] button:focus-visible, html[data-theme="carbon-soft-v2"] input:focus-visible, html[data-theme="carbon-soft-v2"] textarea:focus-visible, html[data-theme="carbon-soft-v2"] select:focus-visible, html[data-theme="carbon-soft-v2"] [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } html[data-theme="carbon-soft-v2"] .hero a:focus-visible, html[data-theme="carbon-soft-v2"] .site-header a:focus-visible, html[data-theme="carbon-soft-v2"] .site-header button:focus-visible, html[data-theme="carbon-soft-v2"] .hdr2 a:focus-visible, html[data-theme="carbon-soft-v2"] .hdr2 button:focus-visible, html[data-theme="carbon-soft-v2"] .drawer a:focus-visible, html[data-theme="carbon-soft-v2"] .drawer button:focus-visible{outline-color:#C2E807} /* ============================================================= 19. MISC + RESPONSIVE + MOTION ============================================================= */ html[data-theme="carbon-soft-v2"] ::selection{background:var(--v2-lime);color:#17190F} /* media plates read the night ground while a figure loads */ html[data-theme="carbon-soft-v2"] .media, html[data-theme="carbon-soft-v2"] .svc-figure, html[data-theme="carbon-soft-v2"] .gallery-grid button, html[data-theme="carbon-soft-v2"] .about__media .media, html[data-theme="carbon-soft-v2"] .svc-accordion-media .media, html[data-theme="carbon-soft-v2"] .ba{border-radius:4px} /* the subhero (sub-pages) keeps the night ground + off-white ink */ html[data-theme="carbon-soft-v2"] .subhero h1, html[data-theme="carbon-soft-v2"] .subhero h2{color:var(--v2-on-night)} @media(max-width:992px){ html[data-theme="carbon-soft-v2"] .contact-wrap{grid-template-columns:1fr} } @media(max-width:640px){ html[data-theme="carbon-soft-v2"] .hero__tag h2{font-size:1.5rem} } @media(prefers-reduced-motion:reduce){ html[data-theme="carbon-soft-v2"] .hero__cue::after, html[data-theme="carbon-soft-v2"] .hero-scroll::after{animation:none} html[data-theme="carbon-soft-v2"] .reveal{transform:none} } /* ============================================================= 20. OUR WORK — editorial project mosaic Each tile is a view into one of four real projects. The grid creates rhythm through controlled spans, not a square card wall. ============================================================= */ html[data-theme="carbon-soft-v2"] #work-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(7rem,11vw,10.5rem); gap:clamp(.6rem,1.4vw,1.1rem); } html[data-theme="carbon-soft-v2"] .work-tile{ display:block; min-width:0; min-height:0; height:100%; color:var(--v2-ink); } html[data-theme="carbon-soft-v2"] .work-tile article{ display:block; height:100%; } /* Fixed 4-col / 5-row tiling — every cell is explicitly assigned so the mosaic always fills edge-to-edge with no leftover gaps (dense auto-placement left an unfillable hole after the last tile). */ html[data-theme="carbon-soft-v2"] .work-tile:nth-child(1){grid-column:1/3;grid-row:1/3} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(2){grid-column:3/4;grid-row:1/3} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(3){grid-column:4/5;grid-row:1/2} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(4){grid-column:4/5;grid-row:2/3} /* Lower block (tiles 5-12): varied sizes and shapes, laid out from the client's numbered 1-8 mock-up (Stage 02 V2, item 7). Still a fixed tiling of the 4-col grid, so every cell is filled — no holes. 1 tall (col 1, 2 rows) 2 wide (cols 2-3) 3 short (col 4) 4 medium 5 narrow 8 tall (col 4, 2 rows) 6 wide (cols 1-2) 7 small */ html[data-theme="carbon-soft-v2"] .work-tile:nth-child(5){grid-column:1/2;grid-row:3/5} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(6){grid-column:2/4;grid-row:3/4} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(7){grid-column:4/5;grid-row:3/4} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(8){grid-column:2/3;grid-row:4/5} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(9){grid-column:3/4;grid-row:4/5} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(10){grid-column:1/3;grid-row:5/6} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(11){grid-column:3/4;grid-row:5/6} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(12){grid-column:4/5;grid-row:4/6} html[data-theme="carbon-soft-v2"] .work-tile__media{ position:relative; overflow:hidden; background:var(--v2-night); width:100%; height:100%; border-radius:14px; } html[data-theme="carbon-soft-v2"] .work-tile__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } html[data-theme="carbon-soft-v2"] .work-tile:hover .work-tile__media img, html[data-theme="carbon-soft-v2"] .work-tile:focus-visible .work-tile__media img{transform:scale(1.035)} html[data-theme="carbon-soft-v2"] .work-tile__caption{ position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:.15rem; padding:1.6rem .95rem .8rem; background:linear-gradient(to top,rgba(10,12,10,.82) 0%,rgba(10,12,10,.42) 55%,transparent 100%); color:#fff; } html[data-theme="carbon-soft-v2"] .work-tile__project{ font-size:clamp(.82rem,1vw,.95rem); font-weight:600; line-height:1.2; letter-spacing:.03em; text-transform:uppercase; } html[data-theme="carbon-soft-v2"] .work-tile__place{ color:rgba(255,255,255,.78); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; } html[data-theme="carbon-soft-v2"] .work-tile__place b{color:var(--v2-lime-ink);font-weight:400} html[data-theme="carbon-soft-v2"] .work-tile[hidden]{display:none} @media(max-width:900px){ html[data-theme="carbon-soft-v2"] #work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(8rem,26vw,11rem)} html[data-theme="carbon-soft-v2"] .work-tile:nth-child(n){grid-column:span 1;grid-row:span 1} } @media(max-width:640px){ html[data-theme="carbon-soft-v2"] #work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:46vw;gap:.5rem} /* caption was 110px of a 128px tile at 375px — it swallowed the photo */ html[data-theme="carbon-soft-v2"] .work-tile__caption{padding:1.2rem .6rem .55rem;gap:.1rem} html[data-theme="carbon-soft-v2"] .work-tile__project{font-size:.75rem;letter-spacing:0} html[data-theme="carbon-soft-v2"] .work-tile__place{letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } @media(prefers-reduced-motion:reduce){ html[data-theme="carbon-soft-v2"] .work-tile__media img{transition:none} } /* ============================================================= HOMEPAGE BAND SPACING — exactly 120px visible above and below the content of every text band (client, 2026-09-26). Homepage only. The scoop bands overlap their neighbour by --v2-scoop, so a band that is COVERED by its neighbour (#intro bottom, #projects and #reviews top+bottom) reserves 120px + the scoop; a band sitting on top of its neighbours gets a plain 120px. The full-bleed photo strip has no padding by design. ============================================================= */ html[data-theme="carbon-soft-v2"]{ --pad-home:120px; } html[data-theme="carbon-soft-v2"] body.pg-home main > #services, html[data-theme="carbon-soft-v2"] body.pg-home main > #current, html[data-theme="carbon-soft-v2"] body.pg-home main > #process, html[data-theme="carbon-soft-v2"] body.pg-home main > #contact{ padding-top:var(--pad-home); /* sits on top of its neighbours */ padding-bottom:var(--pad-home); } html[data-theme="carbon-soft-v2"] body.pg-home main > #intro{ padding-top:var(--pad-home); padding-bottom:calc(var(--pad-home) + var(--v2-scoop)); /* #services covers its bottom */ } html[data-theme="carbon-soft-v2"] body.pg-home main > #projects, html[data-theme="carbon-soft-v2"] body.pg-home main > #reviews{ padding-top:calc(var(--pad-home) + var(--v2-scoop)); /* tucks behind the band above */ padding-bottom:calc(var(--pad-home) + var(--v2-scoop)); /* covered by the band below */ } /* ============================================================= 22. Sub-page photo hero (subhero--photo) — dark gradient over a real photo, replacing the flat dark subhero for these pages. ============================================================= */ html[data-theme="carbon-soft-v2"] .subhero--photo{ min-height:clamp(380px,56vh,600px); display:flex; align-items:flex-end; padding-bottom:64px; } html[data-theme="carbon-soft-v2"] .subhero--photo .subhero__media img{ opacity:1; height:100%; object-fit:cover; } html[data-theme="carbon-soft-v2"] .subhero--photo .subhero__media::after{ background:linear-gradient(to top, rgba(23,25,15,.85) 0%, rgba(23,25,15,.55) 45%, rgba(23,25,15,.35) 100%); } html[data-theme="carbon-soft-v2"] .subhero--photo .container{ position:relative; z-index:1; width:100%; } @media(max-width:640px){ html[data-theme="carbon-soft-v2"] .subhero--photo{ min-height:clamp(320px,46vh,420px); padding-bottom:48px; } }