Add Worlds page and nav link; first world: Delph Woods

- worlds.html: new page matching videos.html style, grid of world cards with illustrated preview thumbnails and Explore links - World card CSS added to style.css (.world-card, .world-card-preview, .world-enter) - Delph Woods card links to worlds/delphwoods.html with a woodland SVG preview, description, and location/3DGS chips - Worlds added to nav and footer Product column on all 5 existing pages - CTA band on worlds page promotes consultancy for commissioning Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-13 20:17:46 +01:00
parent abfd2cfae7
commit e175430156
7 changed files with 263 additions and 0 deletions
--- a/consultancy.html
+++ b/consultancy.html
@@ -32,6 +32,7 @@
          <a href="opensource.html">Open Source</a>
          <a href="consultancy.html" class="active">Consultancy</a>
          <a href="videos.html">Videos</a>
+          <a href="worlds.html">Worlds</a>
        </nav>
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
@@ -281,6 +282,7 @@
            <a href="devkits.html">Devkits</a>
            <a href="opensource.html">Open Source</a>
            <a href="videos.html">Videos</a>
+            <a href="worlds.html">Worlds</a>
            <a href="consultancy.html">Consultancy</a>
          </div>
        </div>
--- a/devkits.html
+++ b/devkits.html
@@ -32,6 +32,7 @@
          <a href="opensource.html">Open Source</a>
          <a href="consultancy.html">Consultancy</a>
          <a href="videos.html">Videos</a>
+          <a href="worlds.html">Worlds</a>
        </nav>
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
@@ -299,6 +300,7 @@
            <a href="devkits.html">Devkits</a>
            <a href="opensource.html">Open Source</a>
            <a href="videos.html">Videos</a>
+            <a href="worlds.html">Worlds</a>
            <a href="consultancy.html">Consultancy</a>
          </div>
        </div>
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
          <a href="opensource.html">Open Source</a>
          <a href="consultancy.html">Consultancy</a>
          <a href="videos.html">Videos</a>
+          <a href="worlds.html">Worlds</a>
        </nav>
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
@@ -318,6 +319,7 @@
            <a href="devkits.html">Devkits</a>
            <a href="opensource.html">Open Source</a>
            <a href="videos.html">Videos</a>
+            <a href="worlds.html">Worlds</a>
            <a href="consultancy.html">Consultancy</a>
          </div>
        </div>
--- a/opensource.html
+++ b/opensource.html
@@ -32,6 +32,7 @@
          <a href="opensource.html" class="active">Open Source</a>
          <a href="consultancy.html">Consultancy</a>
          <a href="videos.html">Videos</a>
+          <a href="worlds.html">Worlds</a>
        </nav>
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
@@ -348,6 +349,7 @@
            <a href="devkits.html">Devkits</a>
            <a href="opensource.html">Open Source</a>
            <a href="videos.html">Videos</a>
+            <a href="worlds.html">Worlds</a>
            <a href="consultancy.html">Consultancy</a>
          </div>
        </div>
--- a/style.css
+++ b/style.css
@@ -857,6 +857,52 @@ img { display: block; max-width: 100%; }
  margin-top: 8px;
 }

+/* ── World cards ─────────────────────────────── */
+.world-card {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.world-card-preview {
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+  height: 220px;
+  background: #0E1A12;
+  transition: opacity 0.18s;
+}
+
+.world-card:hover .world-card-preview { opacity: 0.88; }
+
+.world-enter {
+  position: absolute;
+  bottom: 14px;
+  right: 14px;
+  background: rgba(255,255,255,0.92);
+  color: #0A0A0A;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  padding: 7px 13px;
+  border-radius: 999px;
+}
+
+.world-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin-top: 14px;
+  margin-bottom: 4px;
+}
+
+.world-card-desc {
+  font-size: 14px;
+  color: var(--ink-3);
+  line-height: 1.5;
+}
+
 /* ── Section sub-header ──────────────────────── */
 .section-sub-header {
  display: flex;
--- a/videos.html
+++ b/videos.html
@@ -32,6 +32,7 @@
          <a href="opensource.html">Open Source</a>
          <a href="consultancy.html">Consultancy</a>
          <a href="videos.html" class="active">Videos</a>
+          <a href="worlds.html">Worlds</a>
        </nav>
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
@@ -375,6 +376,7 @@
            <a href="devkits.html">Devkits</a>
            <a href="opensource.html">Open Source</a>
            <a href="videos.html">Videos</a>
+            <a href="worlds.html">Worlds</a>
            <a href="consultancy.html">Consultancy</a>
          </div>
        </div>
--- a/worlds.html
+++ b/worlds.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Worlds — Bournemouth Technology</title>
+  <meta name="description" content="Explorative environments captured by drone and built as open, interactive web experiences.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <script>
+    (function(){var t=localStorage.getItem('theme'),d=window.matchMedia('(prefers-color-scheme: dark)').matches;if(t==='dark'||(t===null&&d))document.documentElement.classList.add('dark');})();
+  </script>
+</head>
+<body>
+
+  <!-- NAV -->
+  <nav class="nav">
+    <div class="nav-inner">
+      <a href="index.html" class="nav-logo">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+          <rect x="6" y="6" width="12" height="12" rx="1.5"/>
+          <rect x="9.5" y="9.5" width="5" height="5" fill="currentColor" stroke="none"/>
+          <path d="M9 6V2.5M15 6V2.5M9 21.5V18M15 21.5V18M6 9H2.5M6 15H2.5M21.5 9H18M21.5 15H18"/>
+        </svg>
+        <span>Bournemouth Technology</span>
+      </a>
+      <div class="nav-right">
+        <nav class="nav-links" aria-label="Main">
+          <a href="devkits.html">Devkits</a>
+          <a href="opensource.html">Open Source</a>
+          <a href="consultancy.html">Consultancy</a>
+          <a href="videos.html">Videos</a>
+          <a href="worlds.html" class="active">Worlds</a>
+        </nav>
+        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
+          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
+          <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        </button>
+        <a href="devkits.html" class="btn btn-dark btn-sm">Buy a devkit</a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- PAGE HERO -->
+  <section class="page-hero">
+    <div class="hero-bg" aria-hidden="true">
+      <div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.055;transform:rotate(14deg);">
+        <svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
+          <line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
+          <line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
+          <rect x="41" y="41" width="18" height="18" rx="4"/>
+          <circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
+          <circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
+          <ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
+          <ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
+          <ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
+          <ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
+        </svg>
+      </div>
+      <div style="position:absolute;top:30px;right:-40px;width:320px;opacity:0.045;transform:rotate(-9deg);">
+        <svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
+          <line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
+          <line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
+          <rect x="41" y="41" width="18" height="18" rx="4"/>
+          <circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
+          <circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
+          <ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
+          <ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
+          <ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
+          <ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
+        </svg>
+      </div>
+      <div style="position:absolute;top:30px;left:46%;width:120px;opacity:0.05;transform:rotate(26deg);">
+        <svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
+          <line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
+          <line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
+          <rect x="41" y="41" width="18" height="18" rx="4"/>
+          <circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
+          <circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
+          <ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
+          <ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
+          <ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
+          <ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
+        </svg>
+      </div>
+    </div>
+    <div class="container">
+      <div class="eyebrow">Interactive · 3D Environments</div>
+      <h1>Worlds.</h1>
+      <p>Explorative environments captured by drone and built as open, interactive web experiences. Step inside.</p>
+    </div>
+  </section>
+
+  <!-- WORLDS GRID -->
+  <section class="section">
+    <div class="container">
+      <div class="section-sub-header">
+        <div>
+          <div class="eyebrow" style="margin-bottom:8px;">Environments</div>
+          <div class="section-sub-title">Available worlds</div>
+        </div>
+      </div>
+      <div class="grid-3-tight">
+
+        <a href="worlds/delphwoods.html" class="world-card">
+          <div class="world-card-preview">
+            <svg viewBox="0 0 400 240" fill="none" style="position:absolute;inset:0;width:100%;height:100%;" aria-hidden="true">
+              <rect width="400" height="240" fill="#0E1A12"/>
+              <path d="M0 180 Q50 140 100 160 Q150 120 200 150 Q250 110 300 140 Q350 100 400 130 L400 240 L0 240Z" fill="#1A2E1E" opacity="0.8"/>
+              <path d="M0 200 Q80 170 160 185 Q240 155 320 175 Q360 162 400 170 L400 240 L0 240Z" fill="#223322" opacity="0.9"/>
+              <line x1="20" y1="0" x2="380" y2="240" stroke="#2A4030" stroke-width="0.5" opacity="0.4"/>
+              <line x1="0" y1="60" x2="400" y2="120" stroke="#2A4030" stroke-width="0.5" opacity="0.4"/>
+              <line x1="0" y1="30" x2="400" y2="90" stroke="#2A4030" stroke-width="0.5" opacity="0.3"/>
+              <ellipse cx="80" cy="120" rx="18" ry="40" fill="#1E3324" opacity="0.7"/>
+              <ellipse cx="80" cy="105" rx="14" ry="22" fill="#243D2A" opacity="0.8"/>
+              <ellipse cx="160" cy="100" rx="22" ry="48" fill="#1E3324" opacity="0.7"/>
+              <ellipse cx="160" cy="82" rx="16" ry="26" fill="#2A4730" opacity="0.8"/>
+              <ellipse cx="260" cy="110" rx="20" ry="44" fill="#1E3324" opacity="0.7"/>
+              <ellipse cx="260" cy="94" rx="15" ry="24" fill="#243D2A" opacity="0.8"/>
+              <ellipse cx="340" cy="105" rx="16" ry="36" fill="#1E3324" opacity="0.6"/>
+            </svg>
+            <div class="world-enter">Explore ↗</div>
+          </div>
+          <div class="world-card-title">Delph Woods</div>
+          <div class="world-card-desc">A woodland on the south coast of England. Ancient trees, dappled light, and forest paths — captured and reconstructed as an interactive environment.</div>
+          <div class="chip-row">
+            <span class="chip">Woodland</span>
+            <span class="chip">South Coast, England</span>
+            <span class="chip">3DGS</span>
+          </div>
+        </a>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="cta-band">
+    <div class="container">
+      <h2>Capture your world.</h2>
+      <p>We use drone-captured data and 3D Gaussian Splatting to build photorealistic interactive environments. Get in touch to commission yours.</p>
+      <div class="cta-band-btns">
+        <a href="consultancy.html" class="btn btn-dark btn-lg">Talk to our team</a>
+        <a href="videos.html" class="btn btn-outline btn-lg">Watch our videos</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer>
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-brand">
+          <div class="footer-logo">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+              <rect x="6" y="6" width="12" height="12" rx="1.5"/>
+              <rect x="9.5" y="9.5" width="5" height="5" fill="currentColor" stroke="none"/>
+              <path d="M9 6V2.5M15 6V2.5M9 21.5V18M15 21.5V18M6 9H2.5M6 15H2.5M21.5 9H18M21.5 15H18"/>
+            </svg>
+            <span>Bournemouth Technology</span>
+          </div>
+          <p class="footer-tagline">Hardware, software, and consultancy for drone innovators.<br>Open source. Modular. Built by developers, for developers.</p>
+        </div>
+        <div>
+          <div class="footer-col-label">Product</div>
+          <div class="footer-col-links">
+            <a href="devkits.html">Devkits</a>
+            <a href="opensource.html">Open Source</a>
+            <a href="videos.html">Videos</a>
+            <a href="worlds.html">Worlds</a>
+            <a href="consultancy.html">Consultancy</a>
+          </div>
+        </div>
+        <div>
+          <div class="footer-col-label">Resources</div>
+          <div class="footer-col-links">
+            <a href="opensource.html">Documentation</a>
+            <a href="opensource.html">GitHub</a>
+            <a href="devkits.html">Bill of materials</a>
+            <a href="opensource.html">Community forum</a>
+          </div>
+        </div>
+        <div>
+          <div class="footer-col-label">Connect</div>
+          <div class="footer-col-links">
+            <a href="consultancy.html">Contact</a>
+            <a href="https://www.youtube.com/@JonStarkeyfilms">YouTube</a>
+          </div>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <span>© 2025 Bournemouth Technology</span>
+        <span>MIT licensed software · Made in Bournemouth, UK</span>
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    document.getElementById('theme-toggle').addEventListener('click', function() {
+      var dark = document.documentElement.classList.toggle('dark');
+      localStorage.setItem('theme', dark ? 'dark' : 'light');
+    });
+  </script>
+</body>
+</html>