/* ========================================================================= Agenté — Polish Layer (/frontend-design pass) Additive craft refinements layered on top of colors_and_type.css + site.css. Loaded LAST in on every content page, so it wins any override. Design rules followed here: • Purely additive — no existing font-size, colour, or layout value is changed. • Nothing that hides content depends on JS that isn't already guaranteed: - staggered child-reveals only engage where a parent already carries `.reveal` (homepage grids), and site.js / the page's own observer is what adds `.in`. On pages without those grids the selectors no-op. • Heavy hero motion is scoped to `body.home` so inner-page heroes are untouched (some inner hero images aren't in overflow:hidden wrappers). • Honours prefers-reduced-motion. ========================================================================= */ /* 1 — Filmic grain for depth (barely-there, sits above paint, ignores clicks) */ body::after{ content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 2 — Editorial magenta lead-in rule before every section eyebrow */ .eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:var(--accent);vertical-align:middle;margin-right:13px;transform:translateY(-3px)} /* 3 — Arrow micro-interaction: slide right on hover (CTAs & text links) */ .btn .arrow,.svc-link .arrow,.approach-link .arrow,.listings-link .arrow, .diff-link .arrow,.header-cta .arrow,.appraisal-form .arrow,.qcta-actions .arrow{transition:transform .3s cubic-bezier(.22,1,.36,1)} .btn:hover .arrow,.svc-link:hover .arrow,.approach-link:hover .arrow,.listings-link:hover .arrow, .diff-link:hover .arrow,.header-cta:hover .arrow,.appraisal-form button:hover .arrow,.qcta-actions a:hover .arrow{transform:translateX(5px)} /* 4 — Staggered child reveals. Engage ONLY when the parent grid already has `.reveal` (homepage). The observer that adds `.in` is guaranteed by site.js (global) or the homepage's inline script, so children can never strand hidden. */ .values.reveal .value,.for-grid.reveal .for-card,.listing-grid.reveal .listing, .loc-grid.reveal .lcell,.quote-grid.reveal .tcard{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .values.in .value,.for-grid.in .for-card,.listing-grid.in .listing, .loc-grid.in .lcell,.quote-grid.in .tcard{opacity:1;transform:none} .values.in .value:nth-child(2),.for-grid.in .for-card:nth-child(2),.listing-grid.in .listing:nth-child(2),.loc-grid.in .lcell:nth-child(2),.quote-grid.in .tcard:nth-child(2){transition-delay:.07s} .values.in .value:nth-child(3),.for-grid.in .for-card:nth-child(3),.listing-grid.in .listing:nth-child(3),.loc-grid.in .lcell:nth-child(3),.quote-grid.in .tcard:nth-child(3){transition-delay:.14s} .values.in .value:nth-child(4),.listing-grid.in .listing:nth-child(4),.loc-grid.in .lcell:nth-child(4),.quote-grid.in .tcard:nth-child(4){transition-delay:.21s} .values.in .value:nth-child(5),.quote-grid.in .tcard:nth-child(5){transition-delay:.28s} /* 5 — Difference-band stats: gentle staggered rise (homepage only owns .diff-inner) */ .diff-inner.reveal .diff-stats > div{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .diff-inner.in .diff-stats > div{opacity:1;transform:none} .diff-inner.in .diff-stats > div:nth-child(2){transition-delay:.1s} .diff-inner.in .diff-stats > div:nth-child(3){transition-delay:.2s} /* 6 — Refined hover lift on service cards (smoother, deeper) */ .svc{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)} .svc:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(26,35,38,.12)} /* 7 — Accessible focus ring on brand colour */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)} /* ============================ HOMEPAGE HERO ONLY ========================== */ /* Scoped to body.home so inner-page heroes (which reuse .hero-img) are untouched. */ /* 8 — Hero load choreography: staggered blur-settle */ body.home .hero-eyebrow{animation:heroIn .9s cubic-bezier(.22,1,.36,1) both .15s} body.home .hero-title{animation:heroIn 1s cubic-bezier(.22,1,.36,1) both .32s} body.home .hero-sub{animation:heroIn 1s cubic-bezier(.22,1,.36,1) both .56s} body.home .hero-actions{animation:heroIn 1s cubic-bezier(.22,1,.36,1) both .74s} body.home .hero-meta,body.home .hero-meta-r{animation:fadeIn 1.4s ease both 1s} @keyframes heroIn{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* 9 — Signature: magenta underline draws under the hero emphasis word */ body.home .hero-title em{position:relative;display:inline-block} body.home .hero-title em::after{content:"";position:absolute;left:0;right:100%;bottom:.04em;height:3px;border-radius:2px;background:var(--accent);animation:drawLine .9s cubic-bezier(.22,1,.36,1) 1.15s both} @keyframes drawLine{to{right:0}} /* 10 — Slow cinematic settle on the hero image (hero has overflow:hidden) */ body.home .hero-img{animation:heroZoom 16s ease-out both} @keyframes heroZoom{from{transform:scale(1.07)}to{transform:scale(1)}} /* 11 — Scroll cue at the base of the hero (element only exists on homepage) */ .scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:11px;color:rgba(255,255,255,.55);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;animation:fadeIn 1.4s ease both 1.35s} .scroll-cue .line{width:1px;height:48px;background:rgba(255,255,255,.22);position:relative;overflow:hidden} .scroll-cue .line::after{content:"";position:absolute;top:-60%;left:0;width:100%;height:60%;background:var(--accent);animation:cueDrop 1.9s cubic-bezier(.6,0,.2,1) infinite} @keyframes cueDrop{0%{top:-60%}55%,100%{top:100%}} /* ============================ LEAD FORM STATES ============================ */ /* Success / error UI for the wired lead forms (site.js). Colours inherit so the block reads correctly on both the dark contact card and light cards. */ .lead-ok{padding:14px 0 6px;animation:leadOkIn .5s cubic-bezier(.22,1,.36,1) both} .lead-ok-h{font-family:var(--font-serif);font-size:28px;line-height:1.15;letter-spacing:-.015em;font-weight:400;margin:0 0 10px} .lead-ok-p{font-size:15px;line-height:1.65;opacity:.85;margin:0;color:inherit} .lead-ok-p a{color:var(--accent);font-weight:600} @keyframes leadOkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .lead-err{margin:0 0 16px;padding:12px 15px;border:1px solid rgba(226,54,148,.55);border-radius:8px;font-size:14px;line-height:1.5;color:var(--accent);background:rgba(226,54,148,.08)} .lead-err a{color:inherit;text-decoration:underline} /* ============================ RESPONSIVE HEADER FIXES ===================== */ /* (design-polish pass — July 2026) */ /* 13 — Anchor jumps (#stories etc.) shouldn't hide under the fixed header */ html{scroll-padding-top:96px} /* 14 — Unify the header CTA across every page. Agent profile pages ship their own inline .header-cta (13px, lowercase) that drifts from the site-wide tracked-caps pill; this wins because polish.css loads last. */ .header-cta{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap} /* 15 — Tablet (761–1000px): the full desktop nav can't fit, so the CTA pill was pushed off the right edge and the page scrolled sideways. Hide the nav and let the burger menu (mobile-nav.js, breakpoint raised to match) take over. The header also swaps from the 3-col grid to flex so the logo column can't collapse. */ @media (max-width:1000px){ .nav{display:none} header.header{display:flex;align-items:center;justify-content:space-between;gap:16px} header.header .logo-mark{flex:none} } /* 16 — Phones: keep the CTA pill on one line and compact, so the header (including its fixed .scrolled state) stays a single row instead of a three-line pill towering over the page. */ @media (max-width:760px){ .header{padding-top:20px;padding-bottom:20px} .header.scrolled{padding-top:14px;padding-bottom:14px} .header-right{gap:14px} .header-cta{font-size:10px;letter-spacing:.08em;padding:9px 13px;gap:7px} .header-cta .arrow{display:none} } /* 17 — Phones: the hero's decorative corner labels (SOUTH ISLAND, NZ / CANTERBURY · HOKITIKA…) are absolutely positioned and collide with each other and the hero buttons once the column narrows. They're desktop garnish — remove them on small screens. */ @media (max-width:760px){ .hero-meta,.hero-meta-r{display:none} } /* 12 — Respect reduced-motion preferences */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} body.home .hero-title em::after{right:0} body.home .hero-img{animation:none;transform:none} } /* ---- Accessibility: WCAG AA contrast fixes (pre-launch audit 16 Jul 2026) ---- Small accent text moves to --accent-hover (#c52a82, AA on light backgrounds). Hero/slim-hero eyebrows keep the brighter accent via their higher-specificity rules (they sit on dark imagery). Footer headings unify on white (index already did this); footer legal links get an underline + lighter tint for the dark bg. */ .eyebrow{color:var(--accent-hover)} .eyebrow::before{background:currentColor} .footer-col .footer-h{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin:6px 0 22px;display:inline-flex;align-items:center;gap:10px} .footer-col .footer-h::before{content:'';width:18px;height:1px;background:var(--accent)} .footer-bottom a{color:#ec66a9;text-decoration:underline;text-underline-offset:2px} .footer-bottom a:hover{color:#fff}