Design language
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { accordion } from '$lib/actions/accordion';
|
||||
import { reveal } from '$lib/actions/reveal';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import { getEnhancedImage } from '$lib/enhanced-images';
|
||||
import type { AboutPageContent } from '$lib/types';
|
||||
|
||||
@@ -16,26 +17,26 @@
|
||||
<main class="about-page">
|
||||
|
||||
<!-- ── Hero ── -->
|
||||
<section class="about-hero">
|
||||
<div class="about-inner">
|
||||
<span class="about-hero-eyebrow">About Goodwalk</span>
|
||||
<h1>{pageContent.title}</h1>
|
||||
<p class="about-hero-desc">Small dog specialists serving Auckland Central. A team your dog knows by name.</p>
|
||||
<div class="about-hero-chips">
|
||||
<a
|
||||
href="https://g.page/r/CUsvrWPhkYrAEB0/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="about-hero-chip about-hero-chip-link"
|
||||
>
|
||||
<span class="about-chip-stars" aria-hidden="true">★★★★★</span>
|
||||
30+ five-star Google reviews
|
||||
</a>
|
||||
<span class="about-hero-chip">Auckland Central</span>
|
||||
<span class="about-hero-chip">Small dog specialists</span>
|
||||
</div>
|
||||
<PageHeader
|
||||
variant="green"
|
||||
eyebrow="About Goodwalk"
|
||||
title={pageContent.title}
|
||||
subtitle="Small dog specialists serving Auckland Central. A team your dog knows by name."
|
||||
>
|
||||
<div class="ph-chips">
|
||||
<a
|
||||
href="https://g.page/r/CUsvrWPhkYrAEB0/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="ph-chip ph-chip--link"
|
||||
>
|
||||
<span class="about-chip-stars" aria-hidden="true">★★★★★</span>
|
||||
30+ five-star Google reviews
|
||||
</a>
|
||||
<span class="ph-chip">Auckland Central</span>
|
||||
<span class="ph-chip">Small dog specialists</span>
|
||||
</div>
|
||||
</section>
|
||||
</PageHeader>
|
||||
|
||||
<!-- ── Standard sections (Who we are, Our impact) ── -->
|
||||
{#each standardSections as section}
|
||||
@@ -174,7 +175,6 @@
|
||||
|
||||
/* ── Shared eyebrow ── */
|
||||
.about-eyebrow,
|
||||
.about-hero-eyebrow,
|
||||
.about-contact-eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
@@ -192,70 +192,11 @@
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
|
||||
}
|
||||
|
||||
.about-hero-eyebrow,
|
||||
.about-contact-eyebrow {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Hero ── */
|
||||
.about-hero {
|
||||
background: var(--gw-green);
|
||||
color: #fff;
|
||||
padding: 80px 0 72px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-hero h1 {
|
||||
margin: 0 0 16px;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
font-weight: 800;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.04em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.about-hero-desc {
|
||||
max-width: 480px;
|
||||
margin: 0 auto 28px;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.about-hero-chips {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-hero-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 9px 18px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
font-family: var(--font-head);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.about-hero-chip-link {
|
||||
text-decoration: none;
|
||||
transition: background 0.18s ease;
|
||||
}
|
||||
|
||||
.about-hero-chip-link:hover {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.about-chip-stars {
|
||||
color: var(--yellow);
|
||||
letter-spacing: 1px;
|
||||
@@ -546,23 +487,6 @@
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
padding: 56px 0 48px;
|
||||
}
|
||||
|
||||
.about-hero h1 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.about-hero-desc {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.about-hero-chip {
|
||||
font-size: 13px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import BookingSection from '$lib/components/BookingSection.svelte';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import InfoSection from '$lib/components/InfoSection.svelte';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import type { BookingContent, InfoContent } from '$lib/types';
|
||||
|
||||
export let booking: BookingContent;
|
||||
@@ -10,31 +11,28 @@
|
||||
|
||||
const email = 'info@goodwalk.co.nz';
|
||||
const phone = '(022) 642 1011';
|
||||
const phoneHref = `tel:${phone.replace(/[^0-9+]/g, '')}`;
|
||||
</script>
|
||||
|
||||
<main class="booking-page">
|
||||
<section class="booking-page-hero">
|
||||
<div class="booking-page-inner">
|
||||
<h1>Contact Us</h1>
|
||||
<p class="booking-page-sub">
|
||||
{#if allowGeneralEnquiry}
|
||||
Book a Meet & Greet or send a general enquiry. We’ll come back within 24 hours.
|
||||
{:else}
|
||||
Tell us a little about your dog and we’ll be in touch within 24 hours to arrange a free Meet & Greet.
|
||||
{/if}
|
||||
</p>
|
||||
<div class="booking-page-contact">
|
||||
<a href="mailto:{email}" class="booking-contact-link">
|
||||
<Icon name="fas fa-envelope" />
|
||||
{email}
|
||||
</a>
|
||||
<a href="tel:{phone.replace(/[^0-9+]/g, '')}" class="booking-contact-link">
|
||||
<Icon name="fas fa-phone" />
|
||||
{phone}
|
||||
</a>
|
||||
</div>
|
||||
<PageHeader
|
||||
variant="green"
|
||||
title="Contact Us"
|
||||
subtitle={allowGeneralEnquiry
|
||||
? "Book a Meet & Greet or send a general enquiry. We'll come back within 24 hours."
|
||||
: "Tell us a little about your dog and we'll be in touch within 24 hours to arrange a free Meet & Greet."}
|
||||
>
|
||||
<div class="booking-page-contact">
|
||||
<a href="mailto:{email}" class="booking-contact-link">
|
||||
<Icon name="fas fa-envelope" />
|
||||
{email}
|
||||
</a>
|
||||
<a href={phoneHref} class="booking-contact-link">
|
||||
<Icon name="fas fa-phone" />
|
||||
{phone}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</PageHeader>
|
||||
|
||||
<BookingSection {booking} {allowGeneralEnquiry} />
|
||||
<InfoSection {info} />
|
||||
@@ -45,42 +43,13 @@
|
||||
background: var(--off-white);
|
||||
}
|
||||
|
||||
.booking-page-hero {
|
||||
background: var(--gw-green);
|
||||
color: #fff;
|
||||
padding: 64px 0 72px;
|
||||
}
|
||||
|
||||
.booking-page-inner {
|
||||
max-width: var(--max-w);
|
||||
margin: 0 auto;
|
||||
padding: 0 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.booking-page-hero h1 {
|
||||
margin: 0 0 14px;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(34px, 4vw, 56px);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.booking-page-sub {
|
||||
margin: 0 auto 32px;
|
||||
max-width: 480px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.booking-page-contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.booking-contact-link {
|
||||
@@ -105,14 +74,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.booking-page-hero {
|
||||
padding: 48px 0 56px;
|
||||
}
|
||||
|
||||
.booking-page-inner {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.booking-page-contact {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -131,5 +131,6 @@
|
||||
<a href="/terms-and-conditions">Terms & Conditions</a>
|
||||
<a href="/privacy-policy">Privacy Policy</a>
|
||||
</nav>
|
||||
<a href="#" class="footer-back-top" aria-label="Back to top">↑ Back to top</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -32,6 +32,23 @@
|
||||
mobileMenuOpen = !mobileMenuOpen;
|
||||
}
|
||||
|
||||
function mobileLinkIcon(href: string) {
|
||||
if (href === '/') return 'fas fa-house';
|
||||
if (href === '/pack-walks') return 'fas fa-paw';
|
||||
if (href === '/dog-walking') return 'fas fa-person-walking';
|
||||
if (href === '/puppy-visits') return 'fas fa-dog';
|
||||
if (href === '/our-pricing') return 'fas fa-tags';
|
||||
if (href === '/about') return 'fas fa-heart';
|
||||
if (href === '/contact-us') return 'fas fa-envelope';
|
||||
return 'fas fa-arrow-right';
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && mobileMenuOpen) {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
function normalizePath(path: string) {
|
||||
if (!path || path === '/') {
|
||||
return '/';
|
||||
@@ -79,11 +96,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
$: if (typeof document !== 'undefined') {
|
||||
document.body.classList.toggle('mobile-menu-open', mobileMenuOpen);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
handleViewportChange();
|
||||
window.addEventListener('resize', handleViewportChange);
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
|
||||
return () => window.removeEventListener('resize', handleViewportChange);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleViewportChange);
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
document.body.classList.remove('mobile-menu-open');
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -148,17 +174,13 @@
|
||||
<a href="/" class="logo" aria-label="Goodwalk – Auckland Dog Walking, home">
|
||||
<picture>
|
||||
{#if mobile.sources?.webp}
|
||||
<source media="(max-width: 768px)" type="image/webp" srcset={mobile.sources.webp} />
|
||||
{/if}
|
||||
<source media="(max-width: 768px)" srcset={mobile.img.src} />
|
||||
{#if desktop.sources?.webp}
|
||||
<source type="image/webp" srcset={desktop.sources.webp} />
|
||||
<source type="image/webp" srcset={mobile.sources.webp} />
|
||||
{/if}
|
||||
<img
|
||||
src={desktop.img.src}
|
||||
src={mobile.img.src}
|
||||
alt="Goodwalk – Auckland dog walking service logo"
|
||||
width={desktop.img.w}
|
||||
height={desktop.img.h}
|
||||
width={mobile.img.w}
|
||||
height={mobile.img.h}
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
@@ -199,18 +221,36 @@
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class:open={mobileMenuOpen} class="mobile-menu" id="mobile-menu">
|
||||
{#each navigation.mobileLinks as link}
|
||||
<a
|
||||
href={link.href}
|
||||
target={linkTarget(link.external)}
|
||||
rel={linkRel(link.external)}
|
||||
aria-current={ariaCurrent(link.href)}
|
||||
class:mobile-link-active={isActiveLink(link.href)}
|
||||
on:click={closeMenu}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
{/each}
|
||||
{#if $page.url.pathname === '/'}
|
||||
<div class="nav-ribbon">
|
||||
<span class="nav-ribbon-item"><Icon name="fas fa-paw" />Small & Medium Dog Specialists</span>
|
||||
<span class="nav-ribbon-divider"></span>
|
||||
<span class="nav-ribbon-item"><Icon name="fas fa-handshake" />Free Meet & Greet</span>
|
||||
<span class="nav-ribbon-divider"></span>
|
||||
<span class="nav-ribbon-item"><Icon name="fas fa-van-shuttle" />Free Pickup & Drop-off</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class:open={mobileMenuOpen} class="mobile-menu-shell">
|
||||
<div class="mobile-menu" id="mobile-menu">
|
||||
<div class="mobile-menu-links">
|
||||
{#each navigation.mobileLinks as link}
|
||||
<a
|
||||
href={link.href}
|
||||
target={linkTarget(link.external)}
|
||||
rel={linkRel(link.external)}
|
||||
aria-current={ariaCurrent(link.href)}
|
||||
class:mobile-link-active={isActiveLink(link.href)}
|
||||
on:click={closeMenu}
|
||||
>
|
||||
<span class="mobile-menu-link-icon">
|
||||
<Icon name={mobileLinkIcon(link.href)} />
|
||||
</span>
|
||||
<span class="mobile-menu-link-label">{link.label}</span>
|
||||
<Icon name="fas fa-arrow-right" className="mobile-menu-link-arrow" />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
|
||||
$: titleParts = splitTitle(hero.title);
|
||||
$: mobileTitle = hero.mobileTitle?.trim() || `${hero.title} ${hero.highlight}`.trim();
|
||||
$: mobileLead = mobileTitle.includes(hero.highlight)
|
||||
? mobileTitle.slice(0, mobileTitle.lastIndexOf(hero.highlight))
|
||||
: mobileTitle;
|
||||
$: heroEnhanced = getEnhancedImage(hero.imageUrl);
|
||||
|
||||
function splitTitle(title: string) {
|
||||
@@ -36,8 +39,33 @@
|
||||
</script>
|
||||
|
||||
<section id="hero">
|
||||
<!-- hero-img is a direct child of #hero so it can be absolutely
|
||||
positioned relative to the section on mobile without being
|
||||
constrained by hero-inner's stacking context -->
|
||||
<div class="hero-img">
|
||||
<picture>
|
||||
{#if hero.desktopImageUrl}
|
||||
<source media="(min-width: 769px)" srcset={hero.desktopImageUrl} />
|
||||
{/if}
|
||||
<img
|
||||
src={hero.imageUrl}
|
||||
alt={hero.imageAlt}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
|
||||
{#if hero.floatingPill}
|
||||
<div class="hero-floating-pill">{hero.floatingPill}</div>
|
||||
{/if}
|
||||
|
||||
<div class="hero-inner">
|
||||
<div class="hero-text">
|
||||
{#if hero.kicker}
|
||||
<p class="hero-kicker">{hero.kicker}</p>
|
||||
{/if}
|
||||
|
||||
<h1 class="hero-heading">
|
||||
<span class="hero-heading-desktop">
|
||||
<span class="hero-title-main">{titleParts.lead}</span>
|
||||
@@ -47,11 +75,24 @@
|
||||
<br />
|
||||
<span class="hero-title-highlight">{hero.highlight}</span>
|
||||
</span>
|
||||
<span class="hero-heading-mobile">{mobileTitle}</span>
|
||||
<span class="hero-heading-mobile">
|
||||
{mobileLead}<span class="hero-title-highlight">{hero.highlight}</span>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{#if hero.subtitle}
|
||||
<p class="hero-subtitle">{hero.subtitle}</p>
|
||||
<p class="hero-subtitle hero-subtitle-desktop">{hero.subtitle}</p>
|
||||
{/if}
|
||||
|
||||
{#if hero.subtitleChips && hero.subtitleChips.length}
|
||||
<div class="hero-chips">
|
||||
{#each hero.subtitleChips as chip}
|
||||
<span class="hero-chip">
|
||||
<Icon name={chip.icon} />
|
||||
{chip.label}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if reviewCta}
|
||||
@@ -94,28 +135,9 @@
|
||||
class="btn btn-outline"
|
||||
>
|
||||
{hero.secondaryCta.label}
|
||||
<Icon name="fas fa-arrow-down" className="hero-cta-arrow" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-img">
|
||||
{#if heroEnhanced}
|
||||
<enhanced:img
|
||||
src={heroEnhanced}
|
||||
alt={hero.imageAlt}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
src={hero.imageUrl}
|
||||
alt={hero.imageAlt}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
export let variant: 'green' | 'white' = 'green';
|
||||
export let eyebrow: string | undefined = undefined;
|
||||
export let title: string;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<section class="page-header page-header--{variant}" class:page-header--has-media={$$slots.media}>
|
||||
<div class="ph-inner" class:ph-inner--grid={$$slots.media}>
|
||||
{#if $$slots.media}
|
||||
<div class="ph-copy">
|
||||
{#if eyebrow}<p class="eyebrow">{eyebrow}</p>{/if}
|
||||
<h1 class="ph-title">{title}</h1>
|
||||
{#if subtitle}<p class="ph-subtitle">{subtitle}</p>{/if}
|
||||
<slot />
|
||||
</div>
|
||||
<div class="ph-media">
|
||||
<slot name="media" />
|
||||
</div>
|
||||
{:else}
|
||||
{#if eyebrow}<p class="eyebrow">{eyebrow}</p>{/if}
|
||||
<h1 class="ph-title">{title}</h1>
|
||||
{#if subtitle}<p class="ph-subtitle">{subtitle}</p>{/if}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -3,6 +3,7 @@
|
||||
import { reveal } from '$lib/actions/reveal';
|
||||
import BookingSection from '$lib/components/BookingSection.svelte';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
|
||||
import type { PricingPageContent, SiteSharedContent } from '$lib/types';
|
||||
|
||||
@@ -110,37 +111,30 @@
|
||||
</script>
|
||||
|
||||
<main class="pricing-page">
|
||||
<section class="pricing-page-hero">
|
||||
<div class="pricing-inner">
|
||||
<h1>{pageContent.title}</h1>
|
||||
{#if pageContent.subtitle}
|
||||
<p class="pricing-page-sub">{pageContent.subtitle}</p>
|
||||
{/if}
|
||||
|
||||
<a
|
||||
class="pricing-trust"
|
||||
href="https://g.page/r/CUsvrWPhkYrAEB0/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
aria-label="Read our 5-star Google reviews"
|
||||
>
|
||||
<img
|
||||
class="pricing-trust-logo"
|
||||
src="/images/google-g-logo.svg"
|
||||
alt=""
|
||||
width="18"
|
||||
height="19"
|
||||
/>
|
||||
<span class="pricing-trust-stars" aria-hidden="true">
|
||||
{#each Array(5) as _}
|
||||
<Icon name="fas fa-star" />
|
||||
{/each}
|
||||
</span>
|
||||
<span class="pricing-trust-label">30+ 5-star Google reviews, trusted by Auckland dog owners</span>
|
||||
<Icon name="fas fa-arrow-right" className="pricing-trust-arrow" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<PageHeader variant="green" title={pageContent.title} subtitle={pageContent.subtitle}>
|
||||
<a
|
||||
class="pricing-trust"
|
||||
href="https://g.page/r/CUsvrWPhkYrAEB0/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
aria-label="Read our 5-star Google reviews"
|
||||
>
|
||||
<img
|
||||
class="pricing-trust-logo"
|
||||
src="/images/google-g-logo.svg"
|
||||
alt=""
|
||||
width="18"
|
||||
height="19"
|
||||
/>
|
||||
<span class="pricing-trust-stars" aria-hidden="true">
|
||||
{#each Array(5) as _}
|
||||
<Icon name="fas fa-star" />
|
||||
{/each}
|
||||
</span>
|
||||
<span class="pricing-trust-label">30+ 5-star Google reviews, trusted by Auckland dog owners</span>
|
||||
<Icon name="fas fa-arrow-right" className="pricing-trust-arrow" />
|
||||
</a>
|
||||
</PageHeader>
|
||||
|
||||
{#each pageContent.sections as section, index}
|
||||
<section use:reveal class="pricing-section reveal-block">
|
||||
@@ -253,28 +247,6 @@
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.pricing-page-hero {
|
||||
background: var(--gw-green);
|
||||
padding: 56px 0 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pricing-page-hero h1 {
|
||||
margin: 0 0 12px;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(34px, 4vw, 56px);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pricing-page-sub {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.pricing-trust {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -9,7 +9,8 @@
|
||||
export let type = 'website';
|
||||
export let structuredData: Record<string, unknown>[] = [];
|
||||
export let noindex = false;
|
||||
export let preloadImage = false; // kept for API compatibility — preload is handled by fetchpriority="high" on the image element
|
||||
export let preloadImage = false;
|
||||
export let preloadImageUrl = ''; // explicit URL to preload (defaults to the og:image)
|
||||
|
||||
const siteName = 'Goodwalk';
|
||||
const siteUrl = 'https://www.goodwalk.co.nz';
|
||||
@@ -34,6 +35,7 @@
|
||||
$: canonicalUrl = absoluteUrl(canonicalPath);
|
||||
$: imageUrl = absoluteUrl(image);
|
||||
$: imageMeta = getImageMetadata(image);
|
||||
$: resolvedPreloadUrl = preloadImageUrl || image;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -49,6 +51,9 @@
|
||||
<meta name="publisher" content="Goodwalk" />
|
||||
<meta name="geo.region" content="NZ-AUK" />
|
||||
<meta name="geo.placename" content="Auckland Central" />
|
||||
{#if preloadImage && resolvedPreloadUrl}
|
||||
<link rel="preload" as="image" href={resolvedPreloadUrl} fetchpriority="high" />
|
||||
{/if}
|
||||
<link rel="canonical" href={canonicalUrl} />
|
||||
<link rel="alternate" hreflang="en-NZ" href={canonicalUrl} />
|
||||
<link rel="alternate" hreflang="x-default" href={canonicalUrl} />
|
||||
|
||||
@@ -0,0 +1,293 @@
|
||||
<script lang="ts">
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import { getEnhancedImage } from '$lib/enhanced-images';
|
||||
import type { CallToAction, HeroChip } from '$lib/types';
|
||||
|
||||
export let eyebrow: string;
|
||||
export let title: string;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
export let imageUrl: string;
|
||||
export let imageAlt: string;
|
||||
export let chips: HeroChip[] = [];
|
||||
export let cta: CallToAction | undefined = undefined;
|
||||
|
||||
const reviewHref = 'https://g.page/r/CUsvrWPhkYrAEB0/';
|
||||
|
||||
$: enhanced = getEnhancedImage(imageUrl);
|
||||
</script>
|
||||
|
||||
<section class="sh">
|
||||
|
||||
<!-- Left: brand green copy column -->
|
||||
<div class="sh-copy">
|
||||
<p class="sh-eyebrow">{eyebrow}</p>
|
||||
<h1 class="sh-title">{title}</h1>
|
||||
{#if subtitle}
|
||||
<p class="sh-subtitle">{subtitle}</p>
|
||||
{/if}
|
||||
|
||||
{#if chips.length}
|
||||
<div class="sh-chips">
|
||||
{#each chips as chip}
|
||||
<span class="sh-chip">
|
||||
<Icon name={chip.icon} />
|
||||
{chip.label}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="sh-actions">
|
||||
{#if cta}
|
||||
<a href={cta.href} class="btn btn-yellow sh-cta">{cta.label}</a>
|
||||
{/if}
|
||||
<a
|
||||
href={reviewHref}
|
||||
class="sh-trust"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
aria-label="Read our Google reviews"
|
||||
>
|
||||
<span class="sh-stars" aria-hidden="true">★★★★★</span>
|
||||
30+ five-star Google reviews
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: full-height photo, no card, no shadow, bleeds to viewport edge -->
|
||||
<div class="sh-media">
|
||||
{#if enhanced}
|
||||
<enhanced:img
|
||||
src={enhanced}
|
||||
alt={imageAlt}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* ── Full-bleed split — green bleeds left, photo bleeds right, content stays centred ── */
|
||||
.sh {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Copy column ──
|
||||
Left padding uses --sh-copy-left-pad so ultrawide overrides can live
|
||||
entirely in responsive.css without touching this component. ── */
|
||||
.sh-copy {
|
||||
background: var(--gw-green);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 80px 56px 80px var(--sh-copy-left-pad, max(40px, calc(50vw - 596px)));
|
||||
}
|
||||
|
||||
/* Subtle yellow warmth on the copy side */
|
||||
.sh-copy::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse 90% 80% at 5% 65%, rgba(255, 209, 0, 0.09) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Service name in Goodwalk Yellow */
|
||||
.sh-eyebrow {
|
||||
margin: 0 0 16px;
|
||||
font-family: var(--font-head);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.sh-title {
|
||||
margin: 0 0 14px;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(30px, 3.2vw, 50px);
|
||||
font-weight: 800;
|
||||
line-height: 1.04;
|
||||
letter-spacing: -0.04em;
|
||||
color: #fff;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.sh-subtitle {
|
||||
margin: 0 0 26px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
max-width: 38ch;
|
||||
}
|
||||
|
||||
/* ── Chips ── */
|
||||
.sh-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.sh-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
font-family: var(--font-head);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* ── CTA row ── */
|
||||
.sh-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sh-cta {
|
||||
font-size: 15px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.sh-trust {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
|
||||
.sh-trust:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.sh-stars {
|
||||
color: var(--yellow);
|
||||
letter-spacing: 2px;
|
||||
font-size: 12px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* ── Photo column — fills full height, bleeds to right viewport edge ── */
|
||||
.sh-media {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Minimum height so the section never collapses on short copy */
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
.sh-media::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: clamp(28px, 4.5vw, 76px);
|
||||
background:
|
||||
radial-gradient(circle at left center, rgba(255, 209, 0, 0.1) 0%, rgba(255, 209, 0, 0.04) 26%, transparent 62%),
|
||||
linear-gradient(90deg, rgba(33, 48, 33, 0.76) 0%, rgba(33, 48, 33, 0.34) 46%, rgba(33, 48, 33, 0.08) 78%, transparent 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sh-media :global(picture) {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sh-media :global(img) {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 25%;
|
||||
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.sh-media:hover :global(img) {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
/* ── Tablet — formula already floors at 40px here, just reduce vertical padding ── */
|
||||
@media (max-width: 1024px) {
|
||||
.sh-copy {
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Mobile — stack vertically, photo above copy ── */
|
||||
@media (max-width: 768px) {
|
||||
.sh {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Photo goes first on mobile — visual hook before the pitch */
|
||||
.sh-media {
|
||||
order: 1;
|
||||
min-height: 0;
|
||||
aspect-ratio: 3 / 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sh-media::before {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sh-copy {
|
||||
order: 2;
|
||||
padding: 44px 24px 48px;
|
||||
}
|
||||
|
||||
.sh-title {
|
||||
font-size: clamp(28px, 7.5vw, 38px);
|
||||
}
|
||||
|
||||
.sh-subtitle {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sh-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sh-cta {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import { reveal } from '$lib/actions/reveal';
|
||||
import BookingSection from '$lib/components/BookingSection.svelte';
|
||||
import ServiceHero from '$lib/components/ServiceHero.svelte';
|
||||
import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
|
||||
import { getEnhancedImage } from '$lib/enhanced-images';
|
||||
import type { ServicePageContent, SiteSharedContent } from '$lib/types';
|
||||
@@ -9,6 +10,7 @@
|
||||
export let content: SiteSharedContent;
|
||||
export let pageContent: ServicePageContent;
|
||||
export let currentPath = '';
|
||||
let benefitScroller: HTMLDivElement | null = null;
|
||||
|
||||
function numericPrice(price: string) {
|
||||
const value = Number(price.replace(/[^0-9.]/g, ''));
|
||||
@@ -30,7 +32,6 @@
|
||||
}));
|
||||
}
|
||||
|
||||
$: heroEnhanced = getEnhancedImage(pageContent.hero.imageUrl);
|
||||
$: highlightEnhanced = pageContent.highlight ? getEnhancedImage(pageContent.highlight.imageUrl) : null;
|
||||
$: highlightCollageImages =
|
||||
pageContent.highlight?.collageImages?.map((image) => ({
|
||||
@@ -39,6 +40,12 @@
|
||||
})) ?? [];
|
||||
$: relatedServices = content.services.filter((s) => s.href && s.href !== currentPath);
|
||||
$: pricingPlans = decoratePlans(pageContent.pricing.plans);
|
||||
$: benefitCards = pageContent.benefits.items.map((benefit, index) => ({
|
||||
...benefit,
|
||||
tintClass: `service-benefit-tint-${(index % 3) + 1}`,
|
||||
featured: index === 0
|
||||
}));
|
||||
$: showRelatedServices = relatedServices.length > 0 && currentPath !== '/pack-walks';
|
||||
|
||||
$: relatedCards = [
|
||||
...relatedServices.map((s) => ({
|
||||
@@ -58,85 +65,123 @@
|
||||
pill: 'All services'
|
||||
}
|
||||
];
|
||||
|
||||
function scrollBenefits(direction: -1 | 1) {
|
||||
if (!benefitScroller) return;
|
||||
|
||||
benefitScroller.scrollBy({
|
||||
left: direction * Math.round(benefitScroller.clientWidth * 0.86),
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="service-page">
|
||||
<section class="service-hero">
|
||||
<div class="service-inner service-hero-grid">
|
||||
<div class="service-hero-copy">
|
||||
<p class="eyebrow">{pageContent.hero.eyebrow}</p>
|
||||
<h1>{pageContent.hero.title}</h1>
|
||||
|
||||
{#each pageContent.hero.paragraphs as paragraph}
|
||||
<p>{paragraph}</p>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="service-hero-media">
|
||||
{#if heroEnhanced}
|
||||
<enhanced:img
|
||||
src={heroEnhanced}
|
||||
alt={pageContent.hero.imageAlt}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
src={pageContent.hero.imageUrl}
|
||||
alt={pageContent.hero.imageAlt}
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ServiceHero
|
||||
eyebrow={pageContent.hero.eyebrow}
|
||||
title={pageContent.hero.title}
|
||||
subtitle={pageContent.hero.subtitle}
|
||||
imageUrl={pageContent.hero.imageUrl}
|
||||
imageAlt={pageContent.hero.imageAlt}
|
||||
chips={pageContent.hero.chips ?? []}
|
||||
cta={pageContent.hero.cta}
|
||||
/>
|
||||
|
||||
{#if pageContent.highlight}
|
||||
<section use:reveal class="service-highlight reveal-block">
|
||||
<div class="service-inner service-highlight-copy">
|
||||
<p class="eyebrow service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
|
||||
<h2>{pageContent.highlight.title}</h2>
|
||||
</div>
|
||||
|
||||
<div class="service-inner">
|
||||
{#if highlightCollageImages.length}
|
||||
<div class="service-highlight-collage" aria-label={pageContent.highlight.title}>
|
||||
{#each highlightCollageImages as image, index}
|
||||
<figure class={`service-collage-card service-collage-card-${index + 1}`}>
|
||||
{#if image.enhanced}
|
||||
<enhanced:img src={image.enhanced} alt={image.imageAlt} loading="lazy" decoding="async" />
|
||||
{:else}
|
||||
<img src={image.imageUrl} alt={image.imageAlt} loading="lazy" decoding="async" />
|
||||
{/if}
|
||||
</figure>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="service-highlight-image">
|
||||
{#if highlightEnhanced}
|
||||
<enhanced:img
|
||||
src={highlightEnhanced}
|
||||
alt={pageContent.highlight.imageAlt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
src={pageContent.highlight.imageUrl}
|
||||
alt={pageContent.highlight.imageAlt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<div class:service-highlight-layout-points={pageContent.highlight.points?.length} class="service-highlight-layout">
|
||||
<div class="service-highlight-copy">
|
||||
<p class="eyebrow service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
|
||||
<h2>{pageContent.highlight.title}</h2>
|
||||
|
||||
{#if pageContent.highlight.points?.length}
|
||||
<div class="service-highlight-points">
|
||||
{#each pageContent.highlight.points as point}
|
||||
<article class="service-highlight-point">
|
||||
<h3>{point.title}</h3>
|
||||
<p>{point.body}</p>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if highlightCollageImages.length}
|
||||
<div class="service-highlight-collage" aria-label={pageContent.highlight.title}>
|
||||
{#each highlightCollageImages as image, index}
|
||||
<figure class={`service-collage-card service-collage-card-${index + 1}`}>
|
||||
{#if image.enhanced}
|
||||
<enhanced:img src={image.enhanced} alt={image.imageAlt} loading="lazy" decoding="async" />
|
||||
{:else}
|
||||
<img src={image.imageUrl} alt={image.imageAlt} loading="lazy" decoding="async" />
|
||||
{/if}
|
||||
</figure>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="service-highlight-image">
|
||||
{#if highlightEnhanced}
|
||||
<enhanced:img
|
||||
src={highlightEnhanced}
|
||||
alt={pageContent.highlight.imageAlt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
src={pageContent.highlight.imageUrl}
|
||||
alt={pageContent.highlight.imageAlt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<section use:reveal class="service-benefits reveal-block">
|
||||
<div class="service-inner">
|
||||
<div class="service-section-heading">
|
||||
<h2>{pageContent.benefits.title}</h2>
|
||||
{#if pageContent.benefits.intro}
|
||||
<p>{pageContent.benefits.intro}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p class="service-benefit-mobile-hint">Swipe through the reasons Tiny Gang works so well.</p>
|
||||
|
||||
<div class="service-benefit-shell">
|
||||
<div bind:this={benefitScroller} class="service-benefit-grid">
|
||||
{#each benefitCards as benefit}
|
||||
<article class:service-benefit-card-featured={benefit.featured} class={`service-benefit-card ${benefit.tintClass}`}>
|
||||
<div class="service-benefit-icon" aria-hidden="true">
|
||||
<Icon name={benefit.icon ?? 'fas fa-paw'} />
|
||||
</div>
|
||||
{#if benefit.badge}
|
||||
<p class="service-benefit-kicker">{benefit.badge}</p>
|
||||
{/if}
|
||||
<h3>{benefit.title}</h3>
|
||||
<p>{benefit.body}</p>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="service-benefit-mobile-controls" aria-label="Benefit cards navigation">
|
||||
<button type="button" class="service-benefit-mobile-button" aria-label="Previous benefit" on:click={() => scrollBenefits(-1)}>
|
||||
<Icon name="fas fa-chevron-left" />
|
||||
</button>
|
||||
<button type="button" class="service-benefit-mobile-button" aria-label="Next benefit" on:click={() => scrollBenefits(1)}>
|
||||
<Icon name="fas fa-chevron-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section use:reveal class="service-pricing reveal-block">
|
||||
<div class="service-inner">
|
||||
<div class="service-section-heading">
|
||||
@@ -205,27 +250,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section use:reveal class="service-benefits reveal-block">
|
||||
<div class="service-inner">
|
||||
<div class="service-section-heading">
|
||||
<h2>{pageContent.benefits.title}</h2>
|
||||
</div>
|
||||
|
||||
<div class="service-benefit-grid">
|
||||
{#each pageContent.benefits.items as benefit}
|
||||
<article class="service-benefit-card">
|
||||
<div class="service-benefit-icon" aria-hidden="true">
|
||||
<Icon name="fas fa-paw" />
|
||||
</div>
|
||||
<h3>{benefit.title}</h3>
|
||||
<p>{benefit.body}</p>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{#if relatedServices.length}
|
||||
{#if showRelatedServices}
|
||||
<section use:reveal class="service-related reveal-block" aria-label="Other services">
|
||||
<div class="service-inner">
|
||||
<div class="service-section-heading">
|
||||
@@ -277,10 +302,6 @@
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.service-hero {
|
||||
padding: 72px 0 96px;
|
||||
}
|
||||
|
||||
.service-related {
|
||||
padding: 0 0 96px;
|
||||
}
|
||||
@@ -390,14 +411,6 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.service-hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
|
||||
gap: 52px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-hero-copy h1,
|
||||
.service-section-heading h2,
|
||||
.service-highlight-copy h2 {
|
||||
margin: 0;
|
||||
@@ -406,11 +419,6 @@
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.service-hero-copy h1 {
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.service-section-heading h2,
|
||||
.service-highlight-copy h2 {
|
||||
font-weight: 700;
|
||||
@@ -419,7 +427,7 @@
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.service-hero-copy p,
|
||||
|
||||
.service-section-heading p,
|
||||
.service-benefit-card p {
|
||||
margin: 20px 0 0;
|
||||
@@ -429,7 +437,6 @@
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.service-hero-media,
|
||||
.service-highlight-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -438,10 +445,6 @@
|
||||
box-shadow: 0 16px 40px rgba(17, 20, 24, 0.08);
|
||||
}
|
||||
|
||||
.service-hero-media {
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.service-highlight-image {
|
||||
aspect-ratio: 4 / 3;
|
||||
max-width: 900px;
|
||||
@@ -486,7 +489,6 @@
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.service-hero-media img,
|
||||
.service-highlight-image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -495,12 +497,23 @@
|
||||
}
|
||||
|
||||
.service-highlight {
|
||||
padding: 0 0 96px;
|
||||
padding: 80px 0 96px;
|
||||
}
|
||||
|
||||
.service-highlight-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-highlight-layout-points {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.service-highlight-copy {
|
||||
text-align: center;
|
||||
margin-bottom: 34px;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -512,11 +525,55 @@
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.service-highlight-points {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.service-highlight-point {
|
||||
padding: 0 0 16px;
|
||||
border-bottom: 1px solid rgba(33, 48, 33, 0.1);
|
||||
}
|
||||
|
||||
.service-highlight-point:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.service-highlight-point h3 {
|
||||
margin: 0 0 8px;
|
||||
font-family: var(--font-head);
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.service-highlight-point p {
|
||||
margin: 0;
|
||||
color: #34363a;
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.service-pricing,
|
||||
.service-benefits {
|
||||
padding: 0 0 96px;
|
||||
}
|
||||
|
||||
.service-benefit-shell {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.service-benefit-mobile-hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.service-benefit-mobile-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.service-section-heading {
|
||||
text-align: center;
|
||||
margin-bottom: 38px;
|
||||
@@ -540,10 +597,12 @@
|
||||
.service-plan-card,
|
||||
.service-benefit-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 246, 0.98) 100%);
|
||||
border-radius: 28px;
|
||||
padding: 30px 26px;
|
||||
box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.045),
|
||||
0 8px 40px rgba(0, 0, 0, 0.06);
|
||||
transition:
|
||||
transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
box-shadow 0.22s ease,
|
||||
@@ -578,10 +637,12 @@
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.service-plan-card:hover,
|
||||
.service-benefit-card:hover {
|
||||
transform: translateY(-6px) scale(1.012);
|
||||
box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
|
||||
.service-plan-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.055),
|
||||
0 10px 40px rgba(0, 0, 0, 0.08);
|
||||
filter: brightness(1.015);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -767,38 +828,200 @@
|
||||
.service-benefit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.service-benefit-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 28px;
|
||||
padding: 28px 26px 26px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 248, 246, 0.98) 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.045),
|
||||
0 8px 28px rgba(17, 20, 24, 0.05);
|
||||
}
|
||||
|
||||
.service-benefit-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.service-benefit-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 26px;
|
||||
width: 42px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 209, 0, 0.42);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.service-benefit-tint-1::before {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 209, 0, 0.08) 0%, rgba(255, 209, 0, 0.03) 24%, transparent 48%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.service-benefit-tint-2::before {
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(229, 214, 194, 0.12) 0%, rgba(229, 214, 194, 0.04) 28%, transparent 54%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.service-benefit-tint-3::before {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(33, 48, 33, 0.04) 0%, rgba(33, 48, 33, 0.015) 28%, transparent 54%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.service-benefit-card-featured {
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(255, 209, 0, 0.14) 0%, rgba(255, 209, 0, 0.04) 28%, transparent 52%),
|
||||
linear-gradient(180deg, var(--green-mid) 0%, var(--gw-green) 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
|
||||
0 14px 32px rgba(17, 20, 24, 0.12);
|
||||
}
|
||||
|
||||
.service-benefit-card-featured::before {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.service-benefit-card-featured::after {
|
||||
background: linear-gradient(90deg, #ffd54a 0%, rgba(242, 191, 47, 0.72) 100%);
|
||||
}
|
||||
|
||||
.service-benefit-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #efe4d1;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, rgba(255, 250, 236, 0.96) 0%, rgba(242, 191, 47, 0.18) 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.04),
|
||||
0 8px 20px rgba(17, 20, 24, 0.08);
|
||||
color: var(--gw-green);
|
||||
font-size: 18px;
|
||||
margin-bottom: 18px;
|
||||
font-size: 17px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 14px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.service-benefit-tint-1 .service-benefit-icon {
|
||||
background: linear-gradient(180deg, rgba(255, 250, 236, 0.96) 0%, rgba(242, 191, 47, 0.16) 100%);
|
||||
}
|
||||
|
||||
.service-benefit-tint-2 .service-benefit-icon {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(229, 214, 194, 0.42) 100%);
|
||||
}
|
||||
|
||||
.service-benefit-tint-3 .service-benefit-icon {
|
||||
background: linear-gradient(180deg, rgba(250, 252, 248, 0.96) 0%, rgba(33, 48, 33, 0.08) 100%);
|
||||
}
|
||||
|
||||
.service-benefit-card-featured .service-benefit-icon {
|
||||
background: linear-gradient(180deg, rgba(255, 248, 214, 0.96) 0%, rgba(255, 209, 0, 0.34) 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 10px 24px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.service-benefit-card h3,
|
||||
.service-benefit-card p,
|
||||
.service-benefit-kicker {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.service-benefit-kicker {
|
||||
margin: 0 0 12px;
|
||||
color: var(--gw-green);
|
||||
font-family: var(--font-head);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.service-benefit-card h3 {
|
||||
max-width: 16ch;
|
||||
text-wrap: balance;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.service-benefit-card p {
|
||||
margin-top: 14px;
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
color: #5b6067;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.service-benefit-card-featured .service-benefit-kicker {
|
||||
color: rgba(255, 245, 204, 0.92);
|
||||
}
|
||||
|
||||
.service-benefit-card-featured h3 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.service-benefit-card-featured p {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.service-benefit-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
|
||||
0 12px 30px rgba(17, 20, 24, 0.08);
|
||||
filter: brightness(1.01);
|
||||
}
|
||||
|
||||
.service-benefit-card-featured:hover {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 16px 36px rgba(17, 20, 24, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.service-hero-grid,
|
||||
.service-plan-grid,
|
||||
.service-plan-grid-three,
|
||||
.service-benefit-grid,
|
||||
.service-related-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.service-hero-grid {
|
||||
align-items: start;
|
||||
.service-benefit-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.service-highlight-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.service-section-heading-split {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.service-section-heading-split p {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.service-highlight-collage {
|
||||
@@ -817,30 +1040,155 @@
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.service-hero {
|
||||
padding: 48px 0 72px;
|
||||
}
|
||||
|
||||
.service-hero-grid,
|
||||
.service-plan-grid,
|
||||
.service-plan-grid-three,
|
||||
.service-benefit-grid,
|
||||
.service-related-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.service-benefit-grid {
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(272px, 84vw);
|
||||
grid-template-columns: none;
|
||||
gap: 14px;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
scroll-snap-type: x proximity;
|
||||
scroll-padding-left: 24px;
|
||||
padding: 0 24px 8px 0;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.service-benefit-grid::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.service-benefit-card {
|
||||
padding: 24px 22px 22px;
|
||||
border-radius: 24px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.service-plan-card {
|
||||
order: var(--mobile-order, 0);
|
||||
}
|
||||
|
||||
.service-highlight,
|
||||
.service-highlight {
|
||||
padding-top: 56px;
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
.service-highlight-layout {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.service-highlight-copy {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.service-highlight-points {
|
||||
gap: 14px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.service-highlight-point {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.service-highlight-point h3 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.service-highlight-point p {
|
||||
font-size: 15px;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.service-pricing,
|
||||
.service-benefits,
|
||||
.service-related {
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
.service-section-heading h2 {
|
||||
font-size: clamp(30px, 7vw, 38px);
|
||||
}
|
||||
|
||||
.service-benefit-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.service-benefit-card h3 {
|
||||
max-width: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.service-benefit-card p {
|
||||
margin-top: 12px;
|
||||
font-size: 15px;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.service-benefit-mobile-hint {
|
||||
display: block;
|
||||
margin: -10px 0 16px;
|
||||
color: var(--gray);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-benefit-mobile-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.service-benefit-mobile-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(33, 48, 33, 0.08);
|
||||
color: var(--gw-green);
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
|
||||
transition:
|
||||
background 0.18s ease,
|
||||
transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.service-benefit-mobile-button:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.service-benefit-mobile-button :global(.icon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.service-benefit-meta {
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.service-benefit-badge {
|
||||
min-height: 34px;
|
||||
font-size: 11px;
|
||||
padding: 7px 12px;
|
||||
letter-spacing: 0.015em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.service-benefit-meta::before {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
|
||||
}
|
||||
|
||||
.service-extra-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user