admin/gw-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4

Browse Source
This commit is contained in:
ponzischeme89
2026-05-18 09:43:29 +12:00
parent b950229003
commit 6ff970015f
189 changed files with 18603 additions and 2727 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/ValuesSection.svelte
+102 -71
View File
@@ -33,34 +33,34 @@
];
const clientPhotos = [
{
imageUrl: '/images/dog.png',
imageUrl: '/images/goodwalk-client-dogs-mt-cecila-auckland.webp',
alt: 'Two happy Goodwalk client dogs out on a walk in Auckland',
name: 'Happy clients',
detail: 'out with Goodwalk'
name: 'Happy clients at Mt Cecila',
detail: ''
},
{
imageUrl: '/images/pack-walk-tiny-gang.png',
imageUrl: '/images/goodwalk-tiny-gang-pack-walk-auckland.webp',
alt: 'Goodwalk Tiny Gang dogs together on a walk in Auckland',
name: 'Tiny Gang',
detail: 'small group pack walks'
name: 'The Tiny Gang on a pack walk',
detail: ''
},
{
imageUrl: '/images/tiny-gang-mt-albert-park.png',
imageUrl: '/images/goodwalk-tiny-gang-mt-albert-park-auckland.webp',
alt: 'Goodwalk dogs together at Mt Albert Park in Auckland',
name: 'Mt Albert Park',
detail: 'Goodwalk regulars'
name: 'Distinguished crew at Mt Albert park',
detail: ''
},
{
imageUrl: '/images/otis-auckland-dog-walking-review.jpg',
imageUrl: '/images/goodwalk-dogs-group-outing-auckland.webp',
alt: 'Otis enjoying his Goodwalk routine in Auckland',
name: 'Otis',
detail: 'regular weekly walks'
},
{
imageUrl: '/images/wallace-auckland-dog-walking-review.jpg',
alt: 'Wallace during a Goodwalk puppy-to-pack journey',
name: 'Wallace',
detail: 'from puppy visits to pack walks'
imageUrl: '/images/goodwalk-tiny-gang-finishing-walk-suv-auckland.webp',
alt: 'Tiny Gang Pack finishing up after a walk',
name: 'Tiny Gang heading home',
detail: ''
}
];
@@ -114,9 +114,11 @@
decoding="async"
/>
{/if}
<figcaption class="values-photo-caption">
<figcaption class:values-photo-caption-solo={!photo.detail} class="values-photo-caption">
<span class="values-photo-name">{photo.name}</span>
<span class="values-photo-detail">{photo.detail}</span>
{#if photo.detail}
<span class="values-photo-detail">{photo.detail}</span>
{/if}
</figcaption>
</figure>
{/each}
@@ -184,20 +186,20 @@
.values-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 50px;
padding: 0 var(--space-container-x);
}
.values-inner .section-heading {
color: #000;
color: var(--text-heading);
text-align: center;
}
.values-eyebrow {
width: fit-content;
padding: 6px 12px;
border-radius: 999px;
background: rgba(33, 48, 33, 0.06);
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.07);
border-radius: var(--radius-pill);
background: var(--surface-brand-soft);
box-shadow: var(--shadow-inset-strong);
}
.values-intro {
@@ -220,11 +222,11 @@
position: relative;
overflow: hidden;
min-height: 0;
border-radius: 28px;
background: #ede4d2;
border-radius: var(--radius-xl);
background: var(--beige);
box-shadow:
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
0 18px 34px rgba(17, 20, 24, 0.08);
var(--shadow-inset-soft),
var(--shadow-card);
}
.values-photo-card-featured {
@@ -255,11 +257,16 @@
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: 18px;
border-radius: var(--radius-md);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.92));
box-shadow:
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
0 12px 24px rgba(17, 20, 24, 0.08);
var(--shadow-inset-soft),
var(--shadow-card);
}
.values-photo-caption-solo {
justify-content: center;
text-align: center;
}
.values-photo-name,
@@ -268,14 +275,14 @@
}
.values-photo-name {
color: #102010;
color: var(--text-heading);
font-family: var(--font-head);
font-size: 14px;
font-weight: 700;
}
.values-photo-detail {
color: #5a605f;
color: var(--text-muted);
font-size: 13px;
line-height: 1.3;
text-align: right;
@@ -288,11 +295,11 @@
margin-right: auto;
display: grid;
gap: 1px;
background: rgba(17, 20, 24, 0.1);
border: 1px solid rgba(17, 20, 24, 0.1);
border-radius: 18px;
background: rgba(var(--ink-rgb), 0.06);
border: 1px solid rgba(var(--ink-rgb), 0.06);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 14px 34px rgba(17, 20, 24, 0.06);
box-shadow: var(--shadow-panel-strong);
}
/* ── Before / after contrast ── */
@@ -304,8 +311,8 @@
.values-contrast-cell {
display: flex;
flex-direction: column;
padding: 38px 36px;
background: #fff;
padding: var(--space-8) var(--space-8);
background: var(--surface-panel);
}
.values-contrast-cell-good {
@@ -324,9 +331,9 @@
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: 999px;
background: rgba(17, 20, 24, 0.05);
color: var(--gray);
border-radius: var(--radius-pill);
background: rgba(var(--ink-rgb), 0.05);
color: var(--text-muted);
font-family: var(--font-head);
font-size: 11px;
font-weight: 700;
@@ -336,14 +343,14 @@
.values-contrast-label-good {
background: var(--yellow);
color: #000;
color: var(--gw-green);
}
.values-contrast-num {
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
color: rgba(17, 20, 24, 0.22);
color: rgba(var(--ink-rgb), 0.22);
letter-spacing: 0.04em;
}
@@ -354,12 +361,12 @@
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.02em;
color: #0d1a0d;
color: var(--text-heading);
}
.values-contrast-body {
margin: 0 0 20px;
color: #4c5056;
color: var(--text-muted);
font-size: 15px;
line-height: 1.65;
}
@@ -377,13 +384,13 @@
gap: 12px;
align-items: start;
padding: 13px 0;
color: #3f4348;
color: var(--text-muted);
font-size: 15px;
line-height: 1.5;
}
.values-contrast-list li + li {
border-top: 1px solid rgba(17, 20, 24, 0.08);
border-top: 1px solid var(--border-muted);
}
.values-contrast-bullet {
@@ -397,7 +404,7 @@
.values-contrast-list :global(.values-contrast-glyph) {
font-size: 10px;
color: var(--gray);
color: var(--text-muted);
}
.values-contrast-cell-good .values-contrast-bullet {
@@ -413,10 +420,10 @@
.values-contrast-footer {
margin: auto 0 0;
padding-top: 18px;
border-top: 1px solid rgba(17, 20, 24, 0.08);
border-top: 1px solid var(--border-muted);
color: var(--gw-green);
font-family: var(--font-head);
font-size: 13px;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
}
@@ -428,23 +435,23 @@
/* Light text for the gw-green "With Goodwalk" cell */
.values-contrast-cell-good h3 {
color: #fff;
color: var(--text-inverse);
}
.values-contrast-cell-good .values-contrast-num {
color: rgba(255, 255, 255, 0.4);
color: rgba(var(--white-rgb), 0.4);
}
.values-contrast-cell-good .values-contrast-body {
color: rgba(255, 255, 255, 0.82);
color: var(--text-inverse-muted);
}
.values-contrast-cell-good .values-contrast-list li {
color: rgba(255, 255, 255, 0.9);
color: rgba(var(--white-rgb), 0.9);
}
.values-contrast-cell-good .values-contrast-list li + li {
border-top-color: rgba(255, 255, 255, 0.14);
border-top-color: var(--border-inverse-strong);
}
/* ── Values points header ── */
@@ -461,13 +468,13 @@
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.03em;
color: #000;
color: var(--text-heading);
}
.values-points-intro {
max-width: 560px;
margin: 14px auto 0;
color: #4c5056;
color: var(--text-muted);
font-size: var(--body-copy-size);
line-height: 1.65;
}
@@ -482,14 +489,14 @@
.values-point {
display: flex;
flex-direction: column;
padding: 32px 30px;
background: #fff;
padding: var(--space-7) var(--space-7);
background: var(--surface-panel);
transition: background 0.18s ease;
}
@media (hover: hover) {
.values-point:hover {
background: #fcfbf6;
background: var(--surface-panel-warm);
}
}
@@ -500,9 +507,9 @@
width: 40px;
height: 40px;
margin-bottom: 18px;
border-radius: 11px;
border-radius: var(--radius-sm);
background: var(--gw-green);
box-shadow: 0 6px 16px rgba(33, 48, 33, 0.18);
box-shadow: var(--shadow-badge);
}
.values-point-icon :global(.values-point-glyph) {
@@ -516,12 +523,12 @@
font-size: 17px;
font-weight: 700;
line-height: 1.25;
color: #0d1a0d;
color: var(--text-heading);
}
.values-point p {
margin: 0;
color: #4c5056;
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
}
@@ -545,7 +552,8 @@
.values-eyebrow {
padding: 6px 10px;
font-size: 11px;
font-size: 12px;
letter-spacing: 0.06em;
}
.values-photo-grid {
@@ -555,31 +563,54 @@
margin-top: 22px;
}
.values-photo-card,
.values-photo-card-featured {
.values-photo-card {
grid-row: auto;
min-height: 178px;
border-radius: 22px;
border-radius: var(--radius-lg);
}
.values-photo-card-featured {
grid-column: 1 / -1;
grid-row: auto;
min-height: 240px;
border-radius: var(--radius-lg);
}
.values-photo-caption {
left: 10px;
right: 10px;
bottom: 10px;
display: grid;
justify-content: start;
align-items: start;
gap: 3px;
padding: 10px 11px;
border-radius: 16px;
border-radius: var(--radius-md);
}
.values-photo-caption-solo {
justify-content: center;
text-align: center;
}
.values-photo-name {
font-size: 12px;
line-height: 1.15;
}
.values-photo-detail {
font-size: 11px;
line-height: 1.25;
line-clamp: 2;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.values-bento {
border-radius: 16px;
border-radius: var(--radius-md);
}
.values-contrast {
@@ -629,10 +660,10 @@
/* ── Reveal ── */
:global(.reveal-ready.reveal-block) {
opacity: 0;
transform: translate3d(0, var(--reveal-distance, 24px), 0);
transform: translate3d(0, var(--reveal-distance, 16px), 0);
transition:
opacity 0.55s ease,
transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
opacity var(--motion-reveal-opacity, 0.3s ease),
transform var(--motion-reveal-transform, 0.45s cubic-bezier(0.2, 0.8, 0.2, 1));
transition-delay: var(--reveal-delay, 0ms);
}