UI: unify H1 size, eyebrow style, card radius and hover transform

Visual consistency pass so every page feels familiar. H1 token (clamp(34px, 4vw, 56px) / line-height 1.05 / letter-spacing -0.04em): - typography.css: hero H1 was 50.2px fixed (with 40px/38px breakpoints). - BookingPage: was clamp(32px, 4vw, 52px). Service-, About-, Pricing-, Legal-page H1s already matched. Shared .eyebrow utility (typography.css): - 13px, green, uppercase, 700, 0.08em letter-spacing. - Replaces the bespoke .service-eyebrow (14px) and .instagram-kicker (11px green pill). - The yellow 28px .service-highlight-eyebrow now inherits the same utility — the eyebrow line is no longer competing with the H2 underneath. Local rule kept only for the bottom-margin override. Card border-radius unified to 28px: - sections.css .service-card: 20px → 28px - sections.css .value-card: 16px → 28px - sections.css .testimonial-card: 20px → 28px - TestimonialsSection .testimonial-stage: 24px → 28px - AboutPage .about-section-gradient + .about-contact-card: 36px → 28px - LegalPage .legal-card: 32px → 28px (mobile 24px → 28px) - InstagramSection .instagram-panel: 24px → 28px - PricingPage .meet-greet-prompt: 24px → 28px (mobile 20px → 28px) Modal dialogs left at 24px (different visual class — overlay, not inline content card). Card hover transform unified to translateY(-6px) scale(1.012): - sections.css .service-card: -6px / 1.01 → 1.012 - sections.css .value-card: -5px (no scale) → -6px / 1.012 - sections.css .testimonial-card: -4px (no scale) → -6px / 1.012 - ServiceLandingPage .service-plan-card / .service-benefit-card: -8px → -6px - PricingPage .pricing-plan-card: -8px → -6px - ServiceLandingPage .service-related-card already -6px / 1.012. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
4.2.0 — deploy hardening and visual consistency pass
2026-05-05 21:23:41 +12:00 · 2026-05-05 20:54:56 +12:00 · 2026-05-05 14:10:51 +12:00 · 2026-05-05 14:10:43 +12:00 · 2026-05-05 14:10:16 +12:00 · 2026-05-05 08:45:48 +12:00
25 changed files with 488 additions and 179 deletions
@@ -24,6 +24,12 @@ $NginxConfigSource = 'nginx/goodwalk.co.nz.svelte.conf.example'
 $NginxConfigTarget = '/docker/nginx/conf.d/goodwalk.co.nz.conf'
 $NginxComposeFile = '/docker/nginx/docker-compose.yml'
 $NginxProjectName = 'nginx'
+# Host paths used for the maintenance page. The directory must be bind-mounted
+# into the shared nginx container at /var/www/maintenance:ro (see DEPLOYMENT.md).
+# The flag file lives in the existing conf.d bind mount; nginx ignores non-.conf
+# files, so it does not pollute the include glob.
+$MaintenanceHostDir = '/docker/nginx/maintenance'
+$MaintenanceFlagPath = '/docker/nginx/conf.d/maintenance.flag'

 # Optional deployment settings.
 $VerifyUrl = 'https://www.goodwalk.co.nz/api/health'
@@ -169,6 +175,8 @@ Assert-NotBlank -Name 'NginxConfigSource' -Value $NginxConfigSource
 Assert-NotBlank -Name 'NginxConfigTarget' -Value $NginxConfigTarget
 Assert-NotBlank -Name 'NginxComposeFile' -Value $NginxComposeFile
 Assert-NotBlank -Name 'NginxProjectName' -Value $NginxProjectName
+Assert-NotBlank -Name 'MaintenanceHostDir' -Value $MaintenanceHostDir
+Assert-NotBlank -Name 'MaintenanceFlagPath' -Value $MaintenanceFlagPath

 if (-not [string]::IsNullOrWhiteSpace($Service)) {
  $Service = $Service.Trim()
@@ -206,6 +214,8 @@ Write-Host "[deploy] Remote compose file: $ComposeFileName"
 Write-Host "[deploy] Docker project name: $DockerProjectName"
 Write-Host "[deploy] Shared nginx config: $NginxConfigTarget"
 Write-Host "[deploy] Shared nginx compose file: $NginxComposeFile"
+Write-Host "[deploy] Maintenance host dir:  $MaintenanceHostDir (must be bind-mounted at /var/www/maintenance:ro)"
+Write-Host "[deploy] Maintenance flag path: $MaintenanceFlagPath"
 Write-Host "[deploy] SSH target: $sshTarget"
 Write-Host "[deploy] SSH config: $SshConfigPath"
 if (-not [string]::IsNullOrWhiteSpace($Service)) {
@@ -272,7 +282,11 @@ try {
    '--nginx-compose-file',
    $NginxComposeFile,
    '--nginx-project-name',
-    $NginxProjectName
+    $NginxProjectName,
+    '--maintenance-host-dir',
+    $MaintenanceHostDir,
+    '--maintenance-flag',
+    $MaintenanceFlagPath
  ) + $(if (-not [string]::IsNullOrWhiteSpace($Service)) { @('--service', $Service) } else { @() }))

  Write-Host ''
@@ -53,6 +53,26 @@ server {
    # nginx does not keep stale upstream IPs in memory.
    resolver 127.0.0.11 ipv6=off valid=30s;

+    # Maintenance mode: when /etc/nginx/conf.d/maintenance.flag exists,
+    # serve the static "be right back" page with a 503 status. The flag is
+    # toggled by the deploy script (touch / rm) without reloading nginx.
+    error_page 503 /maintenance.html;
+
+    location = /maintenance.html {
+        root /var/www/maintenance;
+        internal;
+        add_header Cache-Control "no-store" always;
+    }
+
+    # Static assets used only by the maintenance page (logo, etc.). Served
+    # from a dedicated bind mount so they remain reachable while the
+    # SvelteKit app is down and do not collide with any other site's html dir.
+    location /m/ {
+        root /var/www/maintenance;
+        access_log off;
+        add_header Cache-Control "public, max-age=3600" always;
+    }
+
    location ~* /\.(git|env|htaccess) {
        deny all;
    }
@@ -66,6 +86,10 @@ server {
    }

    location /api/submit {
+        if (-f /etc/nginx/conf.d/maintenance.flag) {
+            return 503;
+        }
+
        set $goodwalk_mail_api goodwalk_svelte_mail_api:8000;
        limit_req zone=goodwalk_limit burst=10 nodelay;
        proxy_pass http://$goodwalk_mail_api/submit;
@@ -77,6 +101,10 @@ server {
    }

    location / {
+        if (-f /etc/nginx/conf.d/maintenance.flag) {
+            return 503;
+        }
+
        set $goodwalk_frontend goodwalk_svelte_app:3000;
        proxy_pass http://$goodwalk_frontend;
        proxy_http_version 1.1;
@@ -0,0 +1,189 @@
+<!doctype html>
+<html lang="en-NZ">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>Be right back | Goodwalk</title>
+    <style>
+      :root {
+        --green: #213021;
+        --green-soft: #2c3f2c;
+        --yellow: #ffd100;
+        --ink: #1a1a1a;
+        --muted: #4c5056;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+      }
+
+      body {
+        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        color: var(--ink);
+        background:
+          radial-gradient(circle at top left, rgba(255, 209, 0, 0.12), transparent 55%),
+          radial-gradient(circle at bottom right, rgba(255, 209, 0, 0.08), transparent 60%),
+          var(--green);
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        padding: 32px;
+        line-height: 1.5;
+      }
+
+      .stage {
+        width: 100%;
+        max-width: 560px;
+      }
+
+      .brand-bar {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 28px;
+      }
+
+      .brand-bar img {
+        display: block;
+        height: 44px;
+        width: auto;
+        max-width: 100%;
+        filter: brightness(0) invert(1);
+      }
+
+      .card {
+        position: relative;
+        background: #fff;
+        border-radius: 28px;
+        padding: 44px 40px 38px;
+        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
+        text-align: center;
+        overflow: hidden;
+      }
+
+      .card::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto 0;
+        height: 6px;
+        background: var(--yellow);
+      }
+
+      .paw {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 64px;
+        height: 64px;
+        margin: 4px auto 18px;
+        border-radius: 50%;
+        background: rgba(33, 48, 33, 0.08);
+        color: var(--green);
+      }
+
+      .paw svg {
+        width: 32px;
+        height: 32px;
+      }
+
+      .eyebrow {
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--green);
+        margin: 0 0 10px;
+      }
+
+      h1 {
+        margin: 0 0 14px;
+        font-size: clamp(28px, 4vw, 38px);
+        line-height: 1.1;
+        letter-spacing: -0.02em;
+        color: var(--ink);
+      }
+
+      p {
+        margin: 0 0 12px;
+        color: var(--muted);
+        font-size: 16px;
+      }
+
+      .meta {
+        margin-top: 24px;
+        padding-top: 22px;
+        border-top: 1px solid rgba(17, 20, 24, 0.08);
+        font-size: 14px;
+        color: var(--muted);
+      }
+
+      .meta a {
+        color: var(--green);
+        font-weight: 700;
+        text-decoration: none;
+      }
+
+      .meta a:hover {
+        text-decoration: underline;
+      }
+
+      .footnote {
+        margin-top: 22px;
+        text-align: center;
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      @media (max-width: 480px) {
+        .card {
+          padding: 36px 24px 28px;
+          border-radius: 22px;
+        }
+
+        .brand-bar img {
+          height: 36px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="brand-bar">
+        <img src="/m/logo.png" alt="Goodwalk" width="241" height="48" />
+      </div>
+
+      <main class="card" role="main">
+        <span class="paw" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7.5 10.5c1.1 0 2-1.3 2-3s-.9-3-2-3-2 1.3-2 3 .9 3 2 3Zm9 0c1.1 0 2-1.3 2-3s-.9-3-2-3-2 1.3-2 3 .9 3 2 3ZM4 13.5c1 0 1.8-1.1 1.8-2.5S5 8.5 4 8.5s-1.8 1.1-1.8 2.5S3 13.5 4 13.5Zm16 0c1 0 1.8-1.1 1.8-2.5S21 8.5 20 8.5s-1.8 1.1-1.8 2.5.8 2.5 1.8 2.5ZM12 13.5c-3.3 0-6 2.5-6 5.4 0 1.4 1.1 2.6 2.5 2.6 1 0 1.5-.4 2.2-.8.4-.2.8-.4 1.3-.4s.9.2 1.3.4c.7.4 1.2.8 2.2.8 1.4 0 2.5-1.2 2.5-2.6 0-2.9-2.7-5.4-6-5.4Z"/>
+          </svg>
+        </span>
+
+        <p class="eyebrow">Goodwalk</p>
+        <h1>Be right back!</h1>
+        <p>We're updating the site — should only take a minute. Thanks for your patience.</p>
+
+        <div class="meta">
+          Need us now? Email <a href="mailto:info@goodwalk.co.nz">info@goodwalk.co.nz</a>
+          or call <a href="tel:+64226421011">(022) 642 1011</a>.
+        </div>
+      </main>
+
+      <p class="footnote">Auckland Central dog walking · Tiny Gang pack walks · 1:1 walks · Puppy visits</p>
+    </div>
+
+    <script>
+      // Auto-recheck once a minute so visitors don't sit on this page forever.
+      setTimeout(function () {
+        window.location.reload();
+      }, 60000);
+    </script>
+  </body>
+</html>
@@ -1,6 +1,6 @@
 {
  "name": "goodwalk-svelte-port",
-  "version": "4.1.0",
+  "version": "4.2.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -10,6 +10,8 @@ NGINX_SOURCE=""
 NGINX_TARGET=""
 NGINX_COMPOSE_FILE=""
 NGINX_PROJECT_NAME=""
+MAINTENANCE_HOST_DIR=""
+MAINTENANCE_FLAG_PATH=""

 usage() {
  cat <<'EOF'
@@ -18,7 +20,8 @@ Usage:
  deploy-remote.sh --archive <path> --deploy-path <path> --compose-file <name> --project-name <name> [--service <name>]
  deploy-remote.sh --archive <path> --deploy-path <path> --compose-file <name> --project-name <name> \
    [--service <name>] [--nginx-source <path>] [--nginx-target <path>] \
-    [--nginx-compose-file <path>] [--nginx-project-name <name>]
+    [--nginx-compose-file <path>] [--nginx-project-name <name>] \
+    [--maintenance-host-dir <path>] [--maintenance-flag <path>]

 This script only updates the main Goodwalk compose project at the specified
 deployment path. It does not touch unrelated Docker projects or global Docker
@@ -69,6 +72,14 @@ while [[ $# -gt 0 ]]; do
      NGINX_PROJECT_NAME="${2:-}"
      shift 2
      ;;
+    --maintenance-host-dir)
+      MAINTENANCE_HOST_DIR="${2:-}"
+      shift 2
+      ;;
+    --maintenance-flag)
+      MAINTENANCE_FLAG_PATH="${2:-}"
+      shift 2
+      ;;
    -h|--help)
      usage
      exit 0
@@ -103,6 +114,8 @@ if (( nginx_args_present )); then
  [[ -n "$NGINX_TARGET" ]] || fail "--nginx-target is required when nginx deployment is enabled"
  [[ -n "$NGINX_COMPOSE_FILE" ]] || fail "--nginx-compose-file is required when nginx deployment is enabled"
  [[ -n "$NGINX_PROJECT_NAME" ]] || fail "--nginx-project-name is required when nginx deployment is enabled"
+  [[ -n "$MAINTENANCE_HOST_DIR" ]] || fail "--maintenance-host-dir is required when nginx deployment is enabled"
+  [[ -n "$MAINTENANCE_FLAG_PATH" ]] || fail "--maintenance-flag is required when nginx deployment is enabled"
 fi

 if docker compose version >/dev/null 2>&1; then
@@ -114,8 +127,18 @@ else
 fi

 STAGING_DIR="$(mktemp -d "${TMPDIR:-/tmp}/goodwalk-deploy.XXXXXX")"
+MAINTENANCE_ACTIVE=0
+
+clear_maintenance_flag() {
+  if (( MAINTENANCE_ACTIVE )) && (( nginx_args_present )); then
+    echo "[deploy-remote] Clearing maintenance flag at $MAINTENANCE_FLAG_PATH"
+    rm -f "$MAINTENANCE_FLAG_PATH" || true
+    MAINTENANCE_ACTIVE=0
+  fi
+}

 cleanup() {
+  clear_maintenance_flag
  rm -rf "$STAGING_DIR"
 }

@@ -133,6 +156,8 @@ if (( nginx_args_present )); then
  echo "[deploy-remote] Nginx config target: $NGINX_TARGET"
  echo "[deploy-remote] Nginx compose file: $NGINX_COMPOSE_FILE"
  echo "[deploy-remote] Nginx project: $NGINX_PROJECT_NAME"
+  echo "[deploy-remote] Maintenance host dir: $MAINTENANCE_HOST_DIR"
+  echo "[deploy-remote] Maintenance flag path: $MAINTENANCE_FLAG_PATH"
 fi
 echo "[deploy-remote] Staging archive in: $STAGING_DIR"

@@ -182,6 +207,70 @@ if [[ ! -f "$DEPLOY_PATH/.env" ]]; then
  fi
 fi

+merge_env_file() {
+  local template="$1"
+  local live="$2"
+
+  [[ -f "$template" ]] || { echo "[deploy-remote] No env template at $template, skipping merge"; return 0; }
+  [[ -f "$live" ]] || { echo "[deploy-remote] No live .env at $live, skipping merge"; return 0; }
+
+  local added diffs backup
+  added="$(mktemp)"
+  diffs="$(mktemp)"
+  backup="${live}.bak.$(date -u +%Y%m%dT%H%M%SZ)"
+
+  awk -v live="$live" -v added_log="$added" -v diff_log="$diffs" '
+    function trim(s) { sub(/^[ \t]+/,"",s); sub(/[ \t]+$/,"",s); return s }
+    BEGIN {
+      while ((getline line < live) > 0) {
+        if (line ~ /^[ \t]*#/ || line ~ /^[ \t]*$/) continue
+        eq = index(line, "=")
+        if (eq == 0) continue
+        k = trim(substr(line, 1, eq-1))
+        v = substr(line, eq+1)
+        live_keys[k] = v
+        live_seen[k] = 1
+      }
+      close(live)
+    }
+    /^[ \t]*#/ || /^[ \t]*$/ { next }
+    {
+      eq = index($0, "=")
+      if (eq == 0) next
+      k = trim(substr($0, 1, eq-1))
+      v = substr($0, eq+1)
+      if (!(k in live_seen)) {
+        print k "=" v >> added_log
+      } else if (live_keys[k] != v) {
+        print k "  (template=" v "  |  live=" live_keys[k] ")" >> diff_log
+      }
+    }
+  ' "$template"
+
+  if [[ -s "$added" ]]; then
+    cp "$live" "$backup"
+    echo "[deploy-remote] Adding env keys present in template but missing from $live:"
+    sed 's/^/    + /' "$added"
+    {
+      printf '\n# Appended by deploy-remote.sh on %s from deploy.env.template\n' "$(date -u +%Y-%m-%dT%H:%M:%SZ)"
+      cat "$added"
+    } >> "$live"
+    echo "[deploy-remote] Backup of previous .env written to $backup"
+  else
+    echo "[deploy-remote] .env is up to date with template (no missing keys)"
+  fi
+
+  if [[ -s "$diffs" ]]; then
+    echo "[deploy-remote] NOTE: these keys exist in both files but values differ. Live values are PRESERVED:"
+    sed 's/^/    ! /' "$diffs"
+    echo "[deploy-remote] If a live value is stale (e.g. an old OWNER_EMAIL), edit $live and re-deploy."
+  fi
+
+  rm -f "$added" "$diffs"
+}
+
+merge_env_file "$DEPLOY_PATH/deploy.env.template" "$DEPLOY_PATH/.env"
+
 cd "$DEPLOY_PATH"

 echo "[deploy-remote] Validating compose configuration"
@@ -194,6 +283,56 @@ if [[ -n "$SERVICE_NAME" ]]; then
  fi
 fi

+if (( nginx_args_present )); then
+  [[ -f "$DEPLOY_PATH/$NGINX_SOURCE" ]] || fail "Nginx config missing from deployment payload: $DEPLOY_PATH/$NGINX_SOURCE"
+  [[ -f "$NGINX_COMPOSE_FILE" ]] || fail "Nginx compose file was not found on the server: $NGINX_COMPOSE_FILE"
+
+  MAINTENANCE_HTML_SRC="$DEPLOY_PATH/nginx/maintenance.html"
+  MAINTENANCE_LOGO_SRC="$DEPLOY_PATH/nginx/logo.png"
+  [[ -f "$MAINTENANCE_HTML_SRC" ]] || fail "Maintenance page missing from deployment payload: $MAINTENANCE_HTML_SRC"
+  [[ -f "$MAINTENANCE_LOGO_SRC" ]] || fail "Maintenance logo missing from deployment payload: $MAINTENANCE_LOGO_SRC"
+
+  # Pre-flight: the nginx container must have a bind mount whose source is
+  # MAINTENANCE_HOST_DIR and whose destination is /var/www/maintenance. If the
+  # one-time droplet setup has not been done, fail fast with a clear message
+  # rather than silently serving stale content.
+  NGINX_CID="$(docker ps -qf name=^nginx$ | head -n1 || true)"
+  [[ -n "$NGINX_CID" ]] || fail "Shared nginx container is not running (expected name 'nginx'). Bring it up before deploying."
+
+  if ! docker inspect -f '{{range .Mounts}}{{.Source}}|{{.Destination}}{{println}}{{end}}' "$NGINX_CID" \
+        | grep -Fxq "${MAINTENANCE_HOST_DIR}|/var/www/maintenance"; then
+    fail "nginx container is missing the maintenance bind mount.
+       Expected: ${MAINTENANCE_HOST_DIR}:/var/www/maintenance:ro
+       One-time setup on the droplet:
+         mkdir -p ${MAINTENANCE_HOST_DIR}/m
+         # add this volume to ${NGINX_COMPOSE_FILE}:
+         #   - ${MAINTENANCE_HOST_DIR}:/var/www/maintenance:ro
+         ${COMPOSE_CMD[*]} -p ${NGINX_PROJECT_NAME} -f ${NGINX_COMPOSE_FILE} up -d"
+  fi
+
+  FLAG_DIR="$(dirname "$MAINTENANCE_FLAG_PATH")"
+  [[ -d "$FLAG_DIR" ]] || fail "Maintenance flag directory does not exist on host: $FLAG_DIR"
+
+  echo "[deploy-remote] Writing maintenance assets to host bind dir: $MAINTENANCE_HOST_DIR"
+  mkdir -p "$MAINTENANCE_HOST_DIR/m"
+  install -m 0644 "$MAINTENANCE_HTML_SRC" "$MAINTENANCE_HOST_DIR/maintenance.html"
+  install -m 0644 "$MAINTENANCE_LOGO_SRC" "$MAINTENANCE_HOST_DIR/m/logo.png"
+
+  echo "[deploy-remote] Updating shared nginx config (pre-rebuild) so maintenance routing is active"
+  mkdir -p "$(dirname "$NGINX_TARGET")"
+  cp "$DEPLOY_PATH/$NGINX_SOURCE" "$NGINX_TARGET"
+
+  echo "[deploy-remote] Validating nginx configuration"
+  "${COMPOSE_CMD[@]}" -p "$NGINX_PROJECT_NAME" -f "$NGINX_COMPOSE_FILE" exec -T nginx nginx -t
+
+  echo "[deploy-remote] Reloading shared nginx so the new config (incl. maintenance routing) is live"
+  "${COMPOSE_CMD[@]}" -p "$NGINX_PROJECT_NAME" -f "$NGINX_COMPOSE_FILE" exec -T nginx nginx -s reload
+
+  echo "[deploy-remote] Engaging maintenance page via host flag: $MAINTENANCE_FLAG_PATH"
+  : > "$MAINTENANCE_FLAG_PATH"
+  MAINTENANCE_ACTIVE=1
+fi
+
 if [[ -n "$SERVICE_NAME" ]]; then
  echo "[deploy-remote] Stopping only the Goodwalk service: $SERVICE_NAME"
  "${COMPOSE_CMD[@]}" -p "$PROJECT_NAME" -f "$COMPOSE_FILE" stop "$SERVICE_NAME" || true
@@ -216,19 +355,6 @@ if [[ -z "$SERVICE_NAME" || "$SERVICE_NAME" == "app" || "$SERVICE_NAME" == "db"
  "${COMPOSE_CMD[@]}" -p "$PROJECT_NAME" -f "$COMPOSE_FILE" exec -T app node scripts/sync-homepage-content.mjs
 fi

-if (( nginx_args_present )); then
-  [[ -f "$DEPLOY_PATH/$NGINX_SOURCE" ]] || fail "Nginx config missing from deployment payload: $DEPLOY_PATH/$NGINX_SOURCE"
-  [[ -f "$NGINX_COMPOSE_FILE" ]] || fail "Nginx compose file was not found on the server: $NGINX_COMPOSE_FILE"
-
-  echo "[deploy-remote] Updating shared nginx config to avoid stale container IPs"
-  mkdir -p "$(dirname "$NGINX_TARGET")"
-  cp "$DEPLOY_PATH/$NGINX_SOURCE" "$NGINX_TARGET"
-
-  echo "[deploy-remote] Validating nginx configuration"
-  "${COMPOSE_CMD[@]}" -p "$NGINX_PROJECT_NAME" -f "$NGINX_COMPOSE_FILE" exec -T nginx nginx -t
-
-  echo "[deploy-remote] Reloading shared nginx"
-  "${COMPOSE_CMD[@]}" -p "$NGINX_PROJECT_NAME" -f "$NGINX_COMPOSE_FILE" exec -T nginx nginx -s reload
-fi
+clear_maintenance_flag

 echo "[deploy-remote] Remote deployment finished"
@@ -25,6 +25,25 @@ export function reveal(node: HTMLElement, options: RevealOptions = {}) {
  node.style.setProperty('--reveal-distance', `${settings.distance}px`);
  node.classList.add('reveal-ready');

+  // If the element is already visible at all in the initial viewport,
+  // reveal it immediately so the first section below the hero doesn't
+  // appear blank on page load.
+  const initialCheck = () => {
+    const rect = node.getBoundingClientRect();
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    if (rect.top < viewportHeight && rect.bottom > 0) {
+      node.classList.add('reveal-visible');
+      return true;
+    }
+    return false;
+  };
+
+  if (initialCheck()) {
+    return {
+      destroy() {}
+    };
+  }
+
  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Icon from '$lib/components/Icon.svelte';
  import { reveal } from '$lib/actions/reveal';
+  import ServicesSection from '$lib/components/ServicesSection.svelte';
  import { getImageMetadata } from '$lib/image-metadata';
  import type { AboutPageContent, SiteSharedContent } from '$lib/types';

@@ -43,24 +43,7 @@
    </section>
  {/each}

-  <section use:reveal={{ delay: 40 }} class="about-services reveal-block">
-    <div class="about-inner">
-      <div class="about-section-heading">
-        <h2>{pageContent.servicesTitle}</h2>
-      </div>
-
-      <div class="about-service-grid">
-        {#each content.services as service}
-          <a class="about-service-card" href={service.href}>
-            <div class="about-service-icon" aria-hidden="true">
-              <Icon name={service.icon} />
-            </div>
-            <span>{service.title}</span>
-          </a>
-        {/each}
-      </div>
-    </div>
-  </section>
+  <ServicesSection services={content.services} heading={pageContent.servicesTitle} />

  <section use:reveal={{ delay: 70 }} class="about-contact reveal-block">
    <div class="about-inner">
@@ -98,7 +81,6 @@
  }

  .about-hero h1,
-  .about-section-heading h2,
  .about-copy h2,
  .about-contact-card h2 {
    margin: 0;
@@ -109,8 +91,7 @@
    color: #000;
  }

-  .about-hero h1,
-  .about-section-heading {
+  .about-hero h1 {
    text-align: center;
  }

@@ -121,19 +102,19 @@
  .about-section-gradient {
    margin: 0 24px 88px;
    padding: 40px 0;
-    border-radius: 36px;
+    border-radius: 28px;
    background: linear-gradient(180deg, #f5efe6 0%, #f9f6ef 100%);
  }

  .about-section-grid {
    display: grid;
-    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
  }

  .about-section-reverse {
-    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .about-section-reverse .about-copy {
@@ -159,6 +140,8 @@
    display: block;
    width: 100%;
    max-width: 460px;
+    aspect-ratio: 4 / 3;
+    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 28px;
@@ -180,71 +163,12 @@
    transform: translate3d(0, 0, 0);
  }

-  .about-services {
-    padding: 0 0 88px;
-  }
-
-  .about-section-heading {
-    margin-bottom: 34px;
-  }
-
-  .about-section-heading h2 {
-    font-size: clamp(28px, 3vw, 40px);
-  }
-
-  .about-service-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 22px;
-  }
-
-  .about-service-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    min-height: 200px;
-    padding: 28px 24px;
-    border-radius: 28px;
-    background: #fff;
-    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
-    color: #000;
-    text-align: center;
-    text-decoration: none;
-    transition:
-      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
-      box-shadow 0.22s ease;
-  }
-
-  @media (hover: hover) {
-    .about-service-card:hover {
-      transform: translateY(-6px) scale(1.012);
-      box-shadow: 0 20px 40px rgba(17, 20, 24, 0.09);
-    }
-  }
-
-  .about-service-card:active {
-    transform: translateY(-1px) scale(0.992);
-  }
-
-  .about-service-icon {
-    font-size: 42px;
-    color: #000;
-  }
-
-  .about-service-card span {
-    font-family: var(--font-head);
-    font-size: 24px;
-    line-height: 1.2;
-  }
-
  .about-contact {
    padding: 0 0 88px;
  }

  .about-contact-card {
-    border-radius: 36px;
+    border-radius: 28px;
    background: #fff;
    padding: 42px 48px;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
@@ -281,7 +205,6 @@
      order: initial;
    }

-    .about-service-grid,
    .about-contact-grid {
      grid-template-columns: 1fr;
    }
@@ -297,7 +220,6 @@
    }

    .about-section,
-    .about-services,
    .about-contact {
      padding-bottom: 64px;
    }
@@ -313,7 +235,6 @@
    }

    .about-copy h2,
-    .about-section-heading h2,
    .about-contact-card h2 {
      font-size: 30px;
    }
@@ -323,10 +244,6 @@
      line-height: 1.7;
    }

-    .about-service-card {
-      min-height: 168px;
-    }
-
    .about-contact-card {
      padding: 30px 24px;
    }
@@ -58,7 +58,7 @@
  .booking-page-hero h1 {
    margin: 0 0 14px;
    font-family: var(--font-head);
-    font-size: clamp(32px, 4vw, 52px);
+    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #fff;
@@ -372,7 +372,7 @@
                  id="location"
                  name="location"
                  required
-                  placeholder="Neighborhood, street..."
+                  placeholder="Suburb, street..."
                  class:input-invalid={errors.location}
                  on:input={() => clearError('location')}
                />
@@ -11,7 +11,7 @@
  <div class="instagram-stage">
    <div class="instagram-panel">
      <div class="instagram-copy">
-        <span class="instagram-kicker">Daily walks, happy dogs</span>
+        <span class="eyebrow instagram-kicker">Daily walks, happy dogs</span>
        <h2>{instagram.title}</h2>
        <p class="instagram-blurb">See our dogs in action — walks, play, and happy pups</p>
        <a href={instagram.href} target="_blank" rel="noopener" class="btn btn-green instagram-button">
@@ -43,7 +43,7 @@
    position: relative;
    min-height: 150px;
    padding: 24px 320px 24px 44px;
-    border-radius: 24px;
+    border-radius: 28px;
    background:
      radial-gradient(circle at top left, rgba(255, 255, 255, 0.52), transparent 42%),
      linear-gradient(135deg, rgba(255, 252, 242, 0.98), rgba(255, 243, 198, 0.96));
@@ -63,16 +63,9 @@
  }

  .instagram-kicker {
-    display: inline-flex;
-    margin-bottom: 10px;
-    padding: 6px 12px;
-    border-radius: 999px;
-    background: rgba(33, 48, 33, 0.08);
-    color: var(--green);
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    /* All visual styling comes from the shared .eyebrow utility. */
+    display: inline-block;
+    margin: 0 0 10px;
  }

  .instagram-copy :global(h2) {
@@ -83,7 +83,7 @@

  .legal-card {
    padding: 40px 44px;
-    border-radius: 32px;
+    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
  }
@@ -172,7 +172,7 @@

    .legal-card {
      padding: 28px 22px;
-      border-radius: 24px;
+      border-radius: 28px;
    }

    .legal-section + .legal-section {
@@ -349,7 +349,7 @@
    gap: 18px;
    width: min(420px, calc(100vw - 32px));
    padding: 18px 18px 18px 20px;
-    border-radius: 24px;
+    border-radius: 28px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 232, 0.98));
    box-shadow:
@@ -460,7 +460,7 @@

  @media (hover: hover) {
    .pricing-plan-card:hover {
-      transform: translateY(-8px) scale(1.012);
+      transform: translateY(-6px) scale(1.012);
      box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
    }
  }
@@ -547,7 +547,7 @@
      align-items: stretch;
      gap: 14px;
      padding: 18px 18px 16px;
-      border-radius: 20px;
+      border-radius: 28px;
    }

    .meet-greet-copy p {
@@ -38,7 +38,7 @@
  <section class="service-hero">
    <div class="service-inner service-hero-grid">
      <div class="service-hero-copy">
-        <p class="service-eyebrow">{pageContent.hero.eyebrow}</p>
+        <p class="eyebrow">{pageContent.hero.eyebrow}</p>
        <h1>{pageContent.hero.title}</h1>

        {#each pageContent.hero.paragraphs as paragraph}
@@ -63,7 +63,7 @@
  {#if pageContent.highlight}
    <section use:reveal class="service-highlight reveal-block">
      <div class="service-inner service-highlight-copy">
-        <p class="service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
+        <p class="eyebrow service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
        <h2>{pageContent.highlight.title}</h2>
      </div>

@@ -351,16 +351,6 @@
    align-items: center;
  }

-  .service-eyebrow {
-    margin: 0 0 18px;
-    color: var(--green);
-    font-family: var(--font-head);
-    font-size: 14px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
  .service-hero-copy h1,
  .service-section-heading h2,
  .service-highlight-copy h2 {
@@ -391,6 +381,11 @@
    box-shadow: 0 16px 40px rgba(17, 20, 24, 0.08);
  }

+  .service-hero-media img {
+    aspect-ratio: 4 / 3;
+    height: auto;
+  }
+
  .service-highlight {
    padding: 0 0 96px;
  }
@@ -400,12 +395,13 @@
    margin-bottom: 34px;
  }

+  /*
+   * Decorative dingbat eyebrow on the highlight section. Inherits sizing /
+   * colour from the shared .eyebrow utility; this rule only adjusts the
+   * downward spacing relative to the H2 underneath.
+   */
  .service-highlight-eyebrow {
    margin: 0 0 16px;
-    color: var(--yellow);
-    font-family: var(--font-head);
-    font-size: 28px;
-    line-height: 1;
  }

  .service-highlight-image img {
@@ -473,7 +469,7 @@
  @media (hover: hover) {
    .service-plan-card:hover,
    .service-benefit-card:hover {
-      transform: translateY(-8px) scale(1.012);
+      transform: translateY(-6px) scale(1.012);
      box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
    }
  }
@@ -683,10 +679,6 @@
      padding-bottom: 72px;
    }

-    .service-highlight-eyebrow {
-      font-size: 24px;
-    }
-
    .service-extra-row {
      flex-direction: column;
      align-items: flex-start;
@@ -4,12 +4,13 @@
  import type { IconCard } from '$lib/types';

  export let services: IconCard[];
+  export let heading = 'What we do';

 </script>

 <section id="services" use:reveal={{ delay: 20 }} class="reveal-block">
  <div class="services-inner">
-    <h2 class="section-heading">What we do</h2>
+    <h2 class="section-heading">{heading}</h2>

    <div class="services-grid">
      {#each services as service}
@@ -25,7 +26,9 @@
          {/if}

          {#if service.href}
-            <a href={service.href} class="btn btn-green">Learn more</a>
+            <a href={service.href} class="btn btn-green">
+              Learn more<span class="visually-hidden"> about {service.title}</span>
+            </a>
          {/if}
        </div>
      {/each}
@@ -326,7 +326,7 @@
  .testimonial-stage {
    position: relative;
    overflow: hidden;
-    border-radius: 24px;
+    border-radius: 28px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 24, 20, 0.06);
    min-height: 620px;
@@ -6,7 +6,7 @@ export const aboutPageContent: AboutPageContent = {
    {
      title: 'Who we are',
      body: [
-        "At GoodWalk, we're not your average dog walking service. We're a team of passionate dog lovers dedicated to providing top-notch care for your furry friends. Specializing in small dogs, we understand their unique needs firsthand, being small dog owners ourselves!",
+        "At GoodWalk, we're not your average dog walking service. We're a team of passionate dog lovers dedicated to providing top-notch care for your furry friends. Specialising in small dogs, we understand their unique needs firsthand, being small dog owners ourselves!",
        "Our commitment to excellence has quickly made us a leader in Auckland Central's dog-walking scene. From pack walks to one-on-one sessions, we ensure the happiness and well-being of every dog in our care."
      ],
      imageUrl: '/images/auckland-pack-walk-dog.jpg',
@@ -6,7 +6,7 @@ export const dogWalkingContent: ServicePageContent = {
    title: 'Walks for larger breeds, too!',
    paragraphs: [
      'Looking for personal attention for your big pup? Our professional dog walking service is perfect for larger dogs who walk well on leash and have good recall. Safety is paramount, so we only accommodate dogs with no reactivity issues. At Goodwalk, we pride ourselves on building relationships with both you and your furry family member.',
-      "Give your dog his best life while joining our growing community of happy pet parents! For those seeking extra care, we offer specialized one-on-one walks tailored to your dog's individual needs and personality"
+      "Give your dog his best life while joining our growing community of happy pet parents! For those seeking extra care, we offer specialised one-on-one walks tailored to your dog's individual needs and personality"
    ],
    imageUrl:
      '/images/auckland-large-dog-one-on-one-walk.jpg',
@@ -14,7 +14,7 @@ export const dogWalkingContent: ServicePageContent = {
  },
  highlight: {
    eyebrow: '▼・ᴥ・▼',
-    title: 'Personalized adventures for your dog!',
+    title: 'Personalised adventures for your dog!',
    imageUrl: '/images/auckland-dogs-outdoor-pack.jpg',
    imageAlt: 'Goodwalk dogs gathered together outdoors'
  },
@@ -46,16 +46,16 @@ export const dogWalkingContent: ServicePageContent = {
    title: 'Benefits of our 1:1 walks',
    items: [
      {
-        title: 'Individualized Attention',
-        body: 'Large breeds receive personalized care and undivided attention from the walker, addressing their unique needs and preferences without competition from other dogs.'
+        title: 'Individualised Attention',
+        body: 'Large breeds receive personalised care and undivided attention from the walker, addressing their unique needs and preferences without competition from other dogs.'
      },
      {
        title: 'Tailored Exercise',
-        body: 'Walkers can customize the pace, duration, and route of the walk to accommodate the energy levels and physical abilities of large breeds, providing an appropriate level of exercise tailored to their specific needs.'
+        body: 'Walkers can customise the pace, duration, and route of the walk to accommodate the energy levels and physical abilities of large breeds, providing an appropriate level of exercise tailored to their specific needs.'
      },
      {
-        title: 'Bonding and Socialization',
-        body: 'During one-on-one walks, large breeds bond closely with their walker and socialize with people and animals encountered, promoting confidence and social skills'
+        title: 'Bonding and Socialisation',
+        body: 'During one-on-one walks, large breeds bond closely with their walker and socialise with people and animals encountered, promoting confidence and social skills'
      },
      {
        title: 'Enhanced safety',
@@ -63,7 +63,7 @@ export const dogWalkingContent: ServicePageContent = {
      },
      {
        title: 'Training Opportunities',
-        body: 'One-on-one walks offer dedicated time for training and reinforcement of good behaviors, such as loose leash walking or obedience commands, helping large breeds develop and maintain positive habits.'
+        body: 'One-on-one walks offer dedicated time for training and reinforcement of good behaviours, such as loose leash walking or obedience commands, helping large breeds develop and maintain positive habits.'
      },
      {
        title: 'Stress Reduction',
@@ -88,7 +88,7 @@ export const homepageContent: HomePageContent = {
      icon: 'fas fa-heart',
      title: 'Kindness',
      body:
-        'With gentle care and genuine affection, we make every walk a calm, happy experience. We use positive reinforcement to encourage good behavior because kindness is at the heart of everything we do.'
+        'With gentle care and genuine affection, we make every walk a calm, happy experience. We use positive reinforcement to encourage good behaviour because kindness is at the heart of everything we do.'
    },
    {
      icon: 'fas fa-camera',
@@ -176,7 +176,7 @@ export const homepageContent: HomePageContent = {
    nearbyCta: { label: 'Book a Meet & Greet', href: '#newlead' },
    hoursLabel: 'Opening Hours',
    hours: 'Monday to Friday, 8am - 4pm.',
-    faqTitle: "FAQ's",
+    faqTitle: 'FAQs',
    faqs: [
      {
        question: 'Can any dog use your service?',
@@ -219,6 +219,7 @@ export const homepageContent: HomePageContent = {
      { label: '1:1 Walks', href: '/dog-walking' },
      { label: 'Puppy Visits', href: '/puppy-visits' },
      { label: 'Our Pricing', href: '/our-pricing' },
+      { label: 'About Us', href: '/about' },
      { label: 'Contact Us', href: '/contact-us' }
    ],
    contactLinks: [
@@ -59,11 +59,11 @@ export const packWalksContent: ServicePageContent = {
    title: 'Tiny Gang membership benefits',
    items: [
      {
-        title: 'Socialization with other dogs',
-        body: 'Tiny Gang pack walks help small and medium-sized dogs mingle and learn social skills from each other, boosting their confidence and positive behavior.'
+        title: 'Socialisation with other dogs',
+        body: 'Tiny Gang pack walks help small and medium-sized dogs mingle and learn social skills from each other, boosting their confidence and positive behaviour.'
      },
      {
-        title: 'Taliored peace',
+        title: 'Tailored pace',
        body: 'Our handlers can adjust the pace and intensity of the walk to suit the energy levels and abilities of small and medium-sized dogs, ensuring a pleasant and enjoyable experience for all participants.'
      },
      {
@@ -75,8 +75,8 @@ export const packWalksContent: ServicePageContent = {
        body: 'Tiny Gang pack walks foster stronger bonds between dogs and their walker, as well as between the dogs themselves, enhancing trust and companionship among the group.'
      },
      {
-        title: 'Individualized attention',
-        body: 'Small pack sizes allow for more personalized care and attention from the walker, addressing the unique needs and preferences of small and medium-sized breeds.'
+        title: 'Individualised attention',
+        body: 'Small pack sizes allow for more personalised care and attention from the walker, addressing the unique needs and preferences of small and medium-sized breeds.'
      },
      {
        title: 'Safety',
@@ -46,10 +46,10 @@ export const puppyVisitsContent: ServicePageContent = {
      },
      {
        title: 'Reduce anxiety',
-        body: "With time your pup will know when to expect a visit, reducing the chances of accidents while you're away. With regular visits, your pup will feel loved and secure, minimizing any time spent at home alone."
+        body: "With time your pup will know when to expect a visit, reducing the chances of accidents while you're away. With regular visits, your pup will feel loved and secure, minimising any time spent at home alone."
      },
      {
-        title: 'Expert advise',
+        title: 'Expert advice',
        body: "As experienced dog pawrents, we've been through it all with many adorable puppies. Consider us your go-to for any questions or concerns as your furry friend grows up."
      }
    ]
@@ -86,7 +86,7 @@ export const termsAndConditionsContent: LegalPageContent = {
        {
          type: 'list',
          content: [
-            '5.1 Following the assessment walks, you must select your preferred permanent days of the week for walks, with a minimum commitment of one walk per week. Dogs must attend on these chosen days regularly for a minimum period of at least 6 months. Walks for dogs that show aggressive behavior may be cancelled with immediate effect.',
+            '5.1 Following the assessment walks, you must select your preferred permanent days of the week for walks, with a minimum commitment of one walk per week. Dogs must attend on these chosen days regularly for a minimum period of at least 6 months. Walks for dogs that show aggressive behaviour may be cancelled with immediate effect.',
            '5.2 Walks will not take place during severe weather conditions such as high winds, heavy snow, heavy rain, thunder, and lightning. In these cases, your dog will be returned to your residence, or the walk may be shortened, cancelled or rescheduled.',
            '5.3 If you decide to cancel a walk due to bad weather or heat, you agree to pay for the cancelled walk in full. However, we will endeavour to walk dogs in heavy rain or hot weather as long as we consider that it is safe for the dogs and our dog walkers.',
            '5.4 As part of our service, we will work with you to reinforce recall training, leash training, and car behaviour for your dog, using positive reinforcement methods. However, we do not provide individual training sessions and are not responsible for training your dog or for its behaviour.',
@@ -34,3 +34,15 @@ input,
 textarea {
  font: inherit;
 }
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
@@ -249,7 +249,7 @@ section {

 .service-card {
  background: var(--off-white);
-  border-radius: 20px;
+  border-radius: 28px;
  padding: 40px 32px;
  text-align: center;
  transition:
@@ -280,7 +280,7 @@ section {

@media (hover: hover) {
  .service-card:hover {
-    transform: translateY(-6px) scale(1.01);
+    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
  }
 }
@@ -355,7 +355,7 @@ footer {

 .value-card {
  background: rgba(255, 255, 255, 0.07);
-  border-radius: 16px;
+  border-radius: 28px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
@@ -366,7 +366,7 @@ footer {

@media (hover: hover) {
  .value-card:hover {
-    transform: translateY(-5px);
+    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
  }
@@ -390,7 +390,7 @@ footer {

 .testimonial-card {
  background: #fff;
-  border-radius: 20px;
+  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition:
@@ -400,7 +400,7 @@ footer {

@media (hover: hover) {
  .testimonial-card:hover {
-    transform: translateY(-4px);
+    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.09);
  }
 }
@@ -35,13 +35,28 @@

 .hero-text h1 {
  font-family: var(--font-head);
-  font-size: 50.2px;
+  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
-  line-height: 1.1;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
  margin-bottom: 28px;
  color: #fff;
 }

+/*
+ * Shared eyebrow utility for the small uppercase label that introduces a
+ * heading. Use this instead of bespoke per-section kickers.
+ */
+.eyebrow {
+  font-family: var(--font-head);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--green);
+  margin: 0 0 14px;
+}
+
 .hero-text h1 .hero-heading-mobile {
  display: none;
 }
Author	SHA1	Message	Date
admin	a665368d02	UI: unify H1 size, eyebrow style, card radius and hover transform Visual consistency pass so every page feels familiar. H1 token (clamp(34px, 4vw, 56px) / line-height 1.05 / letter-spacing -0.04em): - typography.css: hero H1 was 50.2px fixed (with 40px/38px breakpoints). - BookingPage: was clamp(32px, 4vw, 52px). Service-, About-, Pricing-, Legal-page H1s already matched. Shared .eyebrow utility (typography.css): - 13px, green, uppercase, 700, 0.08em letter-spacing. - Replaces the bespoke .service-eyebrow (14px) and .instagram-kicker (11px green pill). - The yellow 28px .service-highlight-eyebrow now inherits the same utility — the eyebrow line is no longer competing with the H2 underneath. Local rule kept only for the bottom-margin override. Card border-radius unified to 28px: - sections.css .service-card: 20px → 28px - sections.css .value-card: 16px → 28px - sections.css .testimonial-card: 20px → 28px - TestimonialsSection .testimonial-stage: 24px → 28px - AboutPage .about-section-gradient + .about-contact-card: 36px → 28px - LegalPage .legal-card: 32px → 28px (mobile 24px → 28px) - InstagramSection .instagram-panel: 24px → 28px - PricingPage .meet-greet-prompt: 24px → 28px (mobile 20px → 28px) Modal dialogs left at 24px (different visual class — overlay, not inline content card). Card hover transform unified to translateY(-6px) scale(1.012): - sections.css .service-card: -6px / 1.01 → 1.012 - sections.css .value-card: -5px (no scale) → -6px / 1.012 - sections.css .testimonial-card: -4px (no scale) → -6px / 1.012 - ServiceLandingPage .service-plan-card / .service-benefit-card: -8px → -6px - PricingPage .pricing-plan-card: -8px → -6px - ServiceLandingPage .service-related-card already -6px / 1.012. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-05 21:23:41 +12:00
admin	0eed557f95	4.2.0 — deploy hardening and visual consistency pass Make the production deploy foolproof against the shared nginx container's read-only bind mounts on the Digital Ocean droplet. The previous maintenance flow tried to docker-cp/docker-exec into /var/www/html and /etc/nginx/conf.d, both of which are mounted :ro on prod, and /var/www/html happens to point at the WordPress html dir — so writes either failed silently or risked scribbling into another site's tree. Maintenance assets and the engagement flag are now written directly to host paths (/docker/nginx/maintenance and /docker/nginx/conf.d/maintenance.flag) that nginx already sees through its existing bind mounts, so the script no longer depends on a writable container layer, survives container rebuilds, and works regardless of read_only settings. A pre-flight check verifies the maintenance bind mount is actually present on the nginx container and fails fast with a clear "run the one-time setup" message if it isn't, instead of silently serving stale content. The nginx config now serves maintenance.html and /m/ from a dedicated /var/www/maintenance root rather than sharing the WordPress html dir. On the front end, hero images on Pack Walks, 1:1 Walks and Puppy Visits were rendering at whatever aspect ratio their source files happened to have, so one page felt tall, another wide, another oversized. They are now locked to a 4:3 frame with object-fit: cover, matching the About Us section images, which were given the same treatment. The About Us body grid was also alternating between 0.7fr/1.3fr and 1.3fr/0.7fr columns depending on whether a section was reversed, which made the copy width jump between sections; both layouts are now an even 50/50 split, with the existing order swap still handling the image-left vs image-right alternation. The reveal-on-scroll action used to require 18% of an element to intersect before fading it in, with an additional -8% bottom margin, which meant the section directly below a service-page hero stayed invisible on initial load until the user scrolled — making the page look blank below the hero on navigation. The action now does a synchronous bounding-rect check on mount and reveals anything already in the viewport immediately, falling back to the IntersectionObserver for everything below the fold. The "Explore our services" block on About Us was a bespoke icon-tile grid that did not match the homepage's "What we do" cards; it now reuses the shared ServicesSection component (with the heading exposed as a prop), so both pages produce identical card layout, descriptions, "from $" prices, and Learn more CTAs. The footer Explore column was missing the About Us link — added between Our Pricing and Contact Us so it propagates through the homepage content sync into PostgreSQL on the next deploy. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-05 20:54:56 +12:00
admin	e2c5f38d55	Merge branch 'maintenance-page' Adds dynamic maintenance page served by nginx during deploys, toggled via a flag file by scripts/deploy-remote.sh. Includes brand-styled maintenance.html with Goodwalk logo and contact fallback, plus an env-template merger and a11y polish.	2026-05-05 14:10:51 +12:00
admin	8df0e2dfe9	Merge branch 'seo-fixes' SEO improvements: AggregateOffer on Service schema, AggregateRating + Review on home, tighter Puppy Visits meta, removed dead /about-us duplicate.	2026-05-05 14:10:43 +12:00
admin	c2e6282efa	Wire maintenance page into deploy script as a dynamic toggle Replaces the earlier auto-fallback-on-upstream-error approach with an explicit flag-file toggle controlled by the deploy script. The flag is touched before stopping the app and removed on successful finish (or via trap if the deploy aborts), so a failed deploy doesn't strand the site in maintenance. - nginx/goodwalk.co.nz.svelte.conf.example: error_page 503 routes to /maintenance.html (internal); /m/ serves static maintenance assets; the / and /api/submit blocks return 503 when /etc/nginx/conf.d/ maintenance.flag exists. - nginx/maintenance.html: brand-styled "Be right back" page — full Goodwalk green background, white card with yellow accent, real Goodwalk logo, contact details fallback, auto-reload after 60s. - nginx/logo.png: maintenance-time logo (served from /m/logo.png). - nginx/nginx.conf: reverted the earlier auto-fallback edits; this file is not deployed (the prod conf is goodwalk.co.nz.svelte.conf .example). - scripts/deploy-remote.sh: copies maintenance.html + logo into the nginx container, reloads nginx so the new conf is live, touches the flag, then runs the rebuild, then clears the flag. Adds a trap-based clear_maintenance_flag fallback. Also adds a defensive env-file merger that appends new keys from deploy.env.template without clobbering live values, with a timestamped .env backup. Plus a small a11y polish unrelated to maintenance: - ServicesSection: "Learn more" links now include screen-reader-only "about <Service>" context. - base.css: adds .visually-hidden utility class. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-05 14:10:16 +12:00
admin	9d87d08547	Add maintenance page served by nginx during deploys When the SvelteKit upstream is unreachable (container restart, deploy) nginx now serves a static, brand-styled "Be right back" page instead of the default 502/503. Auto-reloads after 60s so visitors don't sit on it once the app is back. - nginx/maintenance.html: self-contained, no external assets, inline paw SVG, brand colours, contact details fallback - nginx/nginx.conf: proxy_intercept_errors + error_page 502/503/504 on both location blocks; 2s proxy_connect_timeout so nginx fails over fast instead of holding the connection for 60s Deploy note: the html file needs to live at /var/www/html/maintenance.html inside the nginx container (already mounted from /docker/wordpress/goodwalk.co.nz/html). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-05 08:45:48 +12:00