Updated version rollout

2026-05-17 13:55:41 +01:00
parent c4d199e20a
commit 7079e32a5f
14 changed files with 928 additions and 55 deletions
@@ -8,6 +8,31 @@
  updateHeader();
  window.addEventListener("scroll", updateHeader, { passive: true });

+  function currentTheme() {
+    try {
+      const saved = localStorage.getItem("archi-theme");
+      if (saved === "dark" || saved === "light") return saved;
+    } catch (_) {}
+    return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+  }
+
+  function setTheme(theme) {
+    const normalized = theme === "dark" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", normalized);
+    document.querySelectorAll("[data-theme-toggle]").forEach(function (input) {
+      input.checked = normalized === "dark";
+    });
+    try {
+      localStorage.setItem("archi-theme", normalized);
+    } catch (_) {}
+  }
+
+  function syncThemeControls() {
+    setTheme(currentTheme());
+  }
+
+  syncThemeControls();
+
  function closeOverlay() {
    const root = document.getElementById("overlay-root");
    if (root) root.innerHTML = "";
@@ -25,13 +50,25 @@
  });

  document.addEventListener("htmx:afterSettle", updateHeader);
+  document.addEventListener("htmx:afterSettle", syncThemeControls);

  document.addEventListener("click", function (event) {
+    if (event.target.closest("[data-drawer-link]")) {
+      const drawer = document.getElementById("site-drawer");
+      if (drawer) drawer.checked = false;
+    }
    if (event.target.matches("[data-overlay], [data-overlay-close]")) {
      closeOverlay();
    }
  });

+  document.addEventListener("change", function (event) {
+    const toggle = event.target.closest("[data-theme-toggle]");
+    if (toggle) {
+      setTheme(toggle.checked ? "dark" : "light");
+    }
+  });
+
  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
      const drawer = document.getElementById("site-drawer");
@@ -6,6 +6,61 @@ body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }

+html[data-theme="dark"] body,
+html[data-theme="dark"] .drawer-content {
+  background: #0f0f0e;
+  color: #f5f5f4;
+}
+
+html[data-theme="dark"] .bg-neutral-50 {
+  background-color: #0f0f0e !important;
+}
+
+html[data-theme="dark"] .bg-white {
+  background-color: #171716 !important;
+}
+
+html[data-theme="dark"] .bg-neutral-950 {
+  background-color: #050505 !important;
+}
+
+html[data-theme="dark"] .bg-neutral-200 {
+  background-color: #2a2926 !important;
+}
+
+html[data-theme="dark"] .text-neutral-950,
+html[data-theme="dark"] .text-neutral-800 {
+  color: #f5f5f4 !important;
+}
+
+html[data-theme="dark"] .text-neutral-700,
+html[data-theme="dark"] .text-neutral-600,
+html[data-theme="dark"] .text-neutral-500 {
+  color: #c7c2b8 !important;
+}
+
+html[data-theme="dark"] .text-neutral-400 {
+  color: #a8a29a !important;
+}
+
+html[data-theme="dark"] .border-neutral-300,
+html[data-theme="dark"] .border-neutral-200 {
+  border-color: rgba(245, 245, 244, 0.16) !important;
+}
+
+html[data-theme="dark"] input,
+html[data-theme="dark"] textarea,
+html[data-theme="dark"] select {
+  background-color: #111110;
+  border-color: rgba(245, 245, 244, 0.22);
+  color: #f5f5f4;
+}
+
+html[data-theme="dark"] input::placeholder,
+html[data-theme="dark"] textarea::placeholder {
+  color: #78716c;
+}
+
 .form-select {
  appearance: none;
  border-radius: 0;
@@ -30,6 +85,32 @@ body {
  font-size: 1.25rem;
 }

+html[data-theme="dark"] [data-site-header] {
+  background: rgba(15, 15, 14, 0.95) !important;
+  color: #f5f5f4 !important;
+  box-shadow: 0 1px 0 rgba(245, 245, 244, 0.12);
+  backdrop-filter: blur(18px);
+}
+
+html[data-theme="dark"] [data-site-header].is-compact {
+  background: rgba(15, 15, 14, 0.95) !important;
+  color: #f5f5f4 !important;
+  box-shadow: 0 1px 0 rgba(245, 245, 244, 0.12);
+}
+
+#main-content {
+  view-transition-name: main-content;
+}
+
+.drawer-side > aside {
+  transition-duration: 260ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.drawer-overlay {
+  transition-duration: 200ms;
+}
+
@keyframes page-fade-out {
  from {
    opacity: 1;
@@ -90,6 +171,14 @@ body {
  animation: 180ms ease both panel-fade-in;
 }

+::view-transition-old(main-content) {
+  animation: 150ms ease both panel-fade-out;
+}
+
+::view-transition-new(main-content) {
+  animation: 210ms ease both panel-fade-in;
+}
+
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
@@ -99,6 +188,8 @@ body {

  ::view-transition-old(root),
  ::view-transition-new(root),
+  ::view-transition-old(main-content),
+  ::view-transition-new(main-content),
  ::view-transition-old(admin-panel),
  ::view-transition-new(admin-panel) {
    animation-duration: 1ms;
@@ -1,5 +1,16 @@
-{{template "site_start" .}}
-<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
+{{define "about.html"}}
+{{template "public_shell_start" .}}
+{{template "about_content" .}}
+{{template "public_shell_end" .}}
+{{end}}
+
+{{define "about_partial.html"}}
+{{template "public_nav_oob" .}}
+{{template "about_content" .}}
+{{end}}
+
+{{define "about_content"}}
+<main id="main-content" class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <section class="grid gap-10 md:grid-cols-[0.9fr_1.1fr] md:items-start">
    <div class="aspect-[4/5] overflow-hidden bg-neutral-200">
      <img src="{{.Content.AboutImage}}" alt="{{.Content.AboutName}}" class="h-full w-full object-cover">
@@ -60,9 +71,9 @@
      <h2 class="text-3xl font-semibold">Discuss a project</h2>
      <div class="max-w-2xl">
        <p class="text-lg leading-relaxed text-neutral-600">Share the project type, location, budget range, and timeline so the studio can assess whether the work is a good fit.</p>
-        <a href="/contact" class="mt-6 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Start an enquiry</a>
+        <a href="/contact" class="mt-6 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Start an enquiry</a>
      </div>
    </div>
  </section>
 </main>
-{{template "site_end" .}}
+{{end}}
@@ -5,6 +5,16 @@
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{if .Title}}{{.Title}} | {{end}}Archi Folio</title>
+  <script>
+    (function () {
+      try {
+        var theme = localStorage.getItem("archi-theme");
+        if (theme === "dark" || theme === "light") {
+          document.documentElement.setAttribute("data-theme", theme);
+        }
+      } catch (_) {}
+    })();
+  </script>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
@@ -14,7 +24,7 @@
 <body class="bg-neutral-50 text-neutral-950 antialiased">
 {{end}}

-{{define "site_start"}}
+{{define "public_shell_start"}}
 {{template "head" .}}
 <div class="drawer drawer-end">
  <input id="site-drawer" type="checkbox" class="drawer-toggle">
@@ -23,15 +33,24 @@
 {{end}}

 {{define "site_header"}}
-<header data-site-header class="fixed inset-x-0 top-0 z-40 transition-all duration-300 {{if eq .Active "home"}}py-7 text-white{{else}}bg-neutral-50/95 py-4 shadow-sm backdrop-blur text-neutral-950{{end}}">
+<header id="site-header" data-site-header class="fixed inset-x-0 top-0 z-40 transition-all duration-300 {{if eq .Active "home"}}py-7 text-white{{else}}bg-neutral-50/95 py-4 shadow-sm backdrop-blur text-neutral-950{{end}}">
+  {{template "site_header_inner" .}}
+</header>
+{{end}}
+
+{{define "site_header_oob"}}
+<header id="site-header" data-site-header class="fixed inset-x-0 top-0 z-40 transition-all duration-300 {{if eq .Active "home"}}py-7 text-white{{else}}bg-neutral-50/95 py-4 shadow-sm backdrop-blur text-neutral-950{{end}}" hx-swap-oob="true">
+  {{template "site_header_inner" .}}
+</header>
+{{end}}
+
+{{define "site_header_inner"}}
  <div class="mx-auto flex max-w-7xl items-center justify-between px-5 md:px-8">
-    <a href="/" class="text-xl font-semibold tracking-normal md:text-3xl" data-header-brand hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Archi Folio</a>
-    <nav class="hidden items-center gap-4 text-sm uppercase tracking-[0.18em] md:flex md:gap-8" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
-      <a class="hover:opacity-60 {{if eq .Active "projects"}}font-semibold{{end}}" href="/projects">Projects</a>
-      <a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">Studio</a>
-      <a class="hover:opacity-60 {{if eq .Active "services"}}font-semibold{{end}}" href="/services">Services</a>
-      <a class="hover:opacity-60 {{if eq .Active "contact"}}font-semibold{{end}}" href="/contact">Contact</a>
-    </nav>
+    <a href="/" class="text-xl font-semibold tracking-normal md:text-3xl" data-header-brand hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Archi Folio</a>
+    <div class="hidden items-center gap-6 md:flex">
+      {{template "site_desktop_nav" .}}
+      {{template "theme_toggle" .}}
+    </div>
    <label for="site-drawer" class="grid h-11 w-11 cursor-pointer place-items-center border border-current/30 md:hidden" aria-label="Open menu">
      <span class="grid gap-1.5">
        <span class="block h-px w-5 bg-current"></span>
@@ -40,7 +59,24 @@
      </span>
    </label>
  </div>
-</header>
+{{end}}
+
+{{define "site_desktop_nav"}}
+<nav id="site-desktop-nav" class="hidden items-center gap-4 text-sm uppercase tracking-[0.18em] md:flex md:gap-8" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
+  <a class="hover:opacity-60 {{if eq .Active "projects"}}font-semibold{{end}}" href="/projects">Projects</a>
+  <a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">Studio</a>
+  <a class="hover:opacity-60 {{if eq .Active "services"}}font-semibold{{end}}" href="/services">Services</a>
+  <a class="hover:opacity-60 {{if eq .Active "contact"}}font-semibold{{end}}" href="/contact">Contact</a>
+</nav>
+{{end}}
+
+{{define "site_desktop_nav_oob"}}
+<nav id="site-desktop-nav" class="hidden items-center gap-4 text-sm uppercase tracking-[0.18em] md:flex md:gap-8" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true" hx-swap-oob="true">
+  <a class="hover:opacity-60 {{if eq .Active "projects"}}font-semibold{{end}}" href="/projects">Projects</a>
+  <a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">Studio</a>
+  <a class="hover:opacity-60 {{if eq .Active "services"}}font-semibold{{end}}" href="/services">Services</a>
+  <a class="hover:opacity-60 {{if eq .Active "contact"}}font-semibold{{end}}" href="/contact">Contact</a>
+</nav>
 {{end}}

 {{define "footer"}}
@@ -52,7 +88,24 @@
 </footer>
 {{end}}

-{{define "site_end"}}
+{{define "theme_toggle"}}
+<label class="swap swap-rotate grid h-10 w-10 cursor-pointer place-items-center text-current" aria-label="Toggle dark theme">
+  <input type="checkbox" value="dark" class="theme-controller" data-theme-toggle>
+  <svg class="swap-off h-6 w-6 fill-current" aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"></path>
+  </svg>
+  <svg class="swap-on h-6 w-6 fill-current" aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"></path>
+  </svg>
+</label>
+{{end}}
+
+{{define "public_nav_oob"}}
+{{template "site_header_oob" .}}
+{{template "site_drawer_nav_oob" .}}
+{{end}}
+
+{{define "public_shell_end"}}
    {{template "footer" .}}
    <div id="overlay-root"></div>
  </div>
@@ -60,20 +113,18 @@
    <label for="site-drawer" aria-label="Close menu" class="drawer-overlay bg-neutral-950/45"></label>
    <aside class="flex min-h-full w-[min(22rem,86vw)] flex-col bg-neutral-950/45 text-white shadow-2xl backdrop-blur-xl">
      <div class="flex items-center justify-between border-b border-white/15 px-5 py-4">
-        <a href="/" class="text-xl font-semibold text-white" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Archi Folio</a>
-        <label for="site-drawer" class="grid h-10 w-10 cursor-pointer place-items-center border border-white/25 text-white" aria-label="Close menu">
-          <span class="relative block h-5 w-5">
-            <span class="absolute left-0 top-1/2 block h-px w-5 rotate-45 bg-current"></span>
-            <span class="absolute left-0 top-1/2 block h-px w-5 -rotate-45 bg-current"></span>
-          </span>
-        </label>
+        <a href="/" class="text-xl font-semibold text-white" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true" data-drawer-link>Archi Folio</a>
+        <div class="flex items-center gap-3">
+          {{template "theme_toggle" .}}
+          <label for="site-drawer" class="grid h-10 w-10 cursor-pointer place-items-center border border-white/25 text-white" aria-label="Close menu">
+            <span class="relative block h-5 w-5">
+              <span class="absolute left-0 top-1/2 block h-px w-5 rotate-45 bg-current"></span>
+              <span class="absolute left-0 top-1/2 block h-px w-5 -rotate-45 bg-current"></span>
+            </span>
+          </label>
+        </div>
      </div>
-      <nav class="grid px-5 py-6 text-2xl font-medium text-white" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
-        <a class="border-b border-white/15 py-4 text-white {{if eq .Active "projects"}}underline underline-offset-8{{end}}" href="/projects">Projects</a>
-        <a class="border-b border-white/15 py-4 text-white {{if eq .Active "about"}}underline underline-offset-8{{end}}" href="/about">Studio</a>
-        <a class="border-b border-white/15 py-4 text-white {{if eq .Active "services"}}underline underline-offset-8{{end}}" href="/services">Services</a>
-        <a class="border-b border-white/15 py-4 text-white {{if eq .Active "contact"}}underline underline-offset-8{{end}}" href="/contact">Contact</a>
-      </nav>
+      {{template "site_drawer_nav" .}}
      <div class="mt-auto px-5 pb-6 text-sm leading-relaxed text-white">
        <p>{{.Content.Email}}</p>
        <p>{{.Content.Location}}</p>
@@ -84,3 +135,21 @@
 </body>
 </html>
 {{end}}
+
+{{define "site_drawer_nav"}}
+<nav id="site-drawer-nav" class="grid px-5 py-6 text-2xl font-medium text-white" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "projects"}}underline underline-offset-8{{end}}" href="/projects" data-drawer-link>Projects</a>
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "about"}}underline underline-offset-8{{end}}" href="/about" data-drawer-link>Studio</a>
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "services"}}underline underline-offset-8{{end}}" href="/services" data-drawer-link>Services</a>
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "contact"}}underline underline-offset-8{{end}}" href="/contact" data-drawer-link>Contact</a>
+</nav>
+{{end}}
+
+{{define "site_drawer_nav_oob"}}
+<nav id="site-drawer-nav" class="grid px-5 py-6 text-2xl font-medium text-white" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true" hx-swap-oob="true">
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "projects"}}underline underline-offset-8{{end}}" href="/projects" data-drawer-link>Projects</a>
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "about"}}underline underline-offset-8{{end}}" href="/about" data-drawer-link>Studio</a>
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "services"}}underline underline-offset-8{{end}}" href="/services" data-drawer-link>Services</a>
+  <a class="border-b border-white/15 py-4 text-white {{if eq .Active "contact"}}underline underline-offset-8{{end}}" href="/contact" data-drawer-link>Contact</a>
+</nav>
+{{end}}
@@ -1,5 +1,16 @@
-{{template "site_start" .}}
-<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
+{{define "contact.html"}}
+{{template "public_shell_start" .}}
+{{template "contact_content" .}}
+{{template "public_shell_end" .}}
+{{end}}
+
+{{define "contact_partial.html"}}
+{{template "public_nav_oob" .}}
+{{template "contact_content" .}}
+{{end}}
+
+{{define "contact_content"}}
+<main id="main-content" class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <section class="grid gap-10 border-b border-neutral-200 pb-14 md:grid-cols-[0.85fr_1.15fr] md:items-end">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Project enquiry</p>
@@ -87,4 +98,4 @@
    </form>
  </section>
 </main>
-{{template "site_end" .}}
+{{end}}
@@ -1,5 +1,16 @@
-{{template "site_start" .}}
-<main>
+{{define "home.html"}}
+{{template "public_shell_start" .}}
+{{template "home_content" .}}
+{{template "public_shell_end" .}}
+{{end}}
+
+{{define "home_partial.html"}}
+{{template "public_nav_oob" .}}
+{{template "home_content" .}}
+{{end}}
+
+{{define "home_content"}}
+<main id="main-content">
  <section class="relative min-h-[88vh] overflow-hidden bg-neutral-950">
    <img src="{{.Content.HeroImage}}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-90">
    <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/10 to-black/65"></div>
@@ -7,7 +18,7 @@
      <p class="mb-4 max-w-xl text-sm uppercase tracking-[0.22em] text-white/75">{{.Content.Positioning}}</p>
      <h1 class="max-w-5xl text-5xl font-semibold leading-[0.95] md:text-8xl">{{.Content.HeroTitle}}</h1>
      <p class="mt-6 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">{{.Content.HeroSubtitle}}</p>
-      <div class="mt-8 flex flex-wrap gap-3" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
+      <div class="mt-8 flex flex-wrap gap-3" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
        <a href="{{.Content.HeroCTAURL}}" class="bg-white px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-neutral-950 hover:bg-neutral-200">{{.Content.HeroCTALabel}}</a>
        <a href="{{.Content.SecondaryCTAURL}}" class="border border-white/60 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-white hover:text-neutral-950">{{.Content.SecondaryCTALabel}}</a>
      </div>
@@ -18,7 +29,7 @@
    <h2 class="text-3xl font-semibold md:text-5xl">{{.Content.IntroTitle}}</h2>
    <div class="max-w-2xl">
      <p class="text-xl leading-relaxed text-neutral-600">{{.Content.IntroText}}</p>
-      <a href="/about" class="mt-6 inline-flex text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Meet the studio</a>
+      <a href="/about" class="mt-6 inline-flex text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Meet the studio</a>
    </div>
  </section>

@@ -45,7 +56,7 @@
    </div>
  </section>

-  <section class="px-5 py-20 md:px-8 md:py-28" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
+  <section class="px-5 py-20 md:px-8 md:py-28" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
    <div class="mx-auto mb-8 flex max-w-7xl items-end justify-between">
      <h2 class="text-2xl font-semibold md:text-4xl">Featured Projects</h2>
      <a href="/projects" class="text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950">All work</a>
@@ -103,8 +114,8 @@
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.AboutRole}}</p>
      <h2 class="text-4xl font-semibold md:text-6xl">{{.Content.AboutName}}</h2>
      <p class="mt-6 max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.AboutBio}}</p>
-      <a href="/about" class="mt-8 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Studio profile</a>
+      <a href="/about" class="mt-8 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Studio profile</a>
    </div>
  </section>
 </main>
-{{template "site_end" .}}
+{{end}}
@@ -1,5 +1,16 @@
-{{template "site_start" .}}
-<main class="pt-28 md:pt-36">
+{{define "project.html"}}
+{{template "public_shell_start" .}}
+{{template "project_content" .}}
+{{template "public_shell_end" .}}
+{{end}}
+
+{{define "project_partial.html"}}
+{{template "public_nav_oob" .}}
+{{template "project_content" .}}
+{{end}}
+
+{{define "project_content"}}
+<main id="main-content" class="pt-28 md:pt-36">
  <section class="mx-auto max-w-7xl px-5 md:px-8">
    <p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Project.Category}} · {{.Project.Status}}</p>
    <div class="grid gap-8 md:grid-cols-[1.2fr_0.8fr] md:items-end">
@@ -34,4 +45,4 @@
    </div>
  </section>
 </main>
-{{template "site_end" .}}
+{{end}}
@@ -1,5 +1,16 @@
-{{template "site_start" .}}
-<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
+{{define "projects.html"}}
+{{template "public_shell_start" .}}
+{{template "projects_content" .}}
+{{template "public_shell_end" .}}
+{{end}}
+
+{{define "projects_partial.html"}}
+{{template "public_nav_oob" .}}
+{{template "projects_content" .}}
+{{end}}
+
+{{define "projects_content"}}
+<main id="main-content" class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <div class="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Selected work</p>
@@ -7,7 +18,7 @@
    </div>
    <p class="max-w-md text-neutral-600">A visual index of architectural and interior design work.</p>
  </div>
-  <div class="grid gap-x-5 gap-y-10 sm:grid-cols-2 lg:grid-cols-3" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
+  <div class="grid gap-x-5 gap-y-10 sm:grid-cols-2 lg:grid-cols-3" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
    {{range .Projects}}
    <a href="/projects/{{.Slug}}" class="group block">
      <div class="aspect-[4/3] overflow-hidden bg-neutral-200">
@@ -25,4 +36,4 @@
    {{end}}
  </div>
 </main>
-{{template "site_end" .}}
+{{end}}
@@ -1,5 +1,16 @@
-{{template "site_start" .}}
-<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
+{{define "services.html"}}
+{{template "public_shell_start" .}}
+{{template "services_content" .}}
+{{template "public_shell_end" .}}
+{{end}}
+
+{{define "services_partial.html"}}
+{{template "public_nav_oob" .}}
+{{template "services_content" .}}
+{{end}}
+
+{{define "services_content"}}
+<main id="main-content" class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <section class="grid gap-10 border-b border-neutral-200 pb-14 md:grid-cols-[0.82fr_1.18fr] md:items-end">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.ServiceArea}}</p>
@@ -64,8 +75,8 @@
    <h2 class="text-3xl font-semibold">Ready to discuss a project?</h2>
    <div>
      <p class="max-w-2xl text-lg leading-relaxed text-neutral-600">Use the enquiry form to share the project type, site location, budget range, and timeline.</p>
-      <a href="/contact" class="mt-6 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Start an enquiry</a>
+      <a href="/contact" class="mt-6 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Start an enquiry</a>
    </div>
  </section>
 </main>
-{{template "site_end" .}}
+{{end}}