Merge pull request #2 from ingr-io/copilot/move-light-dark-toggle

Move light/dark toggle above intro, just under the header

Author: trakhimenok

index.html

@@ -122,6 +122,16 @@
     </nav>
 </header>
 
+<!-- Theme toggle -->
+<div class="theme-toggle-bar">
+    <div class="theme-toggle" id="theme-toggle" role="group" aria-label="Color theme">
+        <span class="theme-toggle__label" id="theme-label-dark">🌑 Dark</span>
+        <button class="theme-toggle__track" id="theme-toggle-btn" aria-label="Toggle theme" title="Toggle theme"></button>
+        <span class="theme-toggle__label" id="theme-label-light">☀️ Light</span>
+        <span class="theme-toggle__hint" id="theme-hint">Go dark, friend 😈</span>
+    </div>
+</div>
+
 <!-- ── HERO ────────────────────────────────────────────────────────────────── -->
 <section class="section-wrap" style="padding-bottom:0;">
     <div class="animate-fade-up" style="margin-bottom:16px;">
@@ -140,18 +150,8 @@
            class="link-accent">Full specification ↗</a>
     </p>
 
-    <!-- Theme toggle -->
-    <div class="animate-fade-up delay-3" style="display:flex;align-items:center;justify-content:flex-end;margin-bottom:12px;">
-        <div class="theme-toggle" id="theme-toggle" role="group" aria-label="Color theme">
-            <span class="theme-toggle__label" id="theme-label-dark">🌑 Dark</span>
-            <button class="theme-toggle__track" id="theme-toggle-btn" aria-label="Toggle theme" title="Toggle theme"></button>
-            <span class="theme-toggle__label" id="theme-label-light">☀️ Light</span>
-            <span class="theme-toggle__hint" id="theme-hint">Go dark, friend 😈</span>
-        </div>
-    </div>
-
     <!-- Mini converter -->
-    <div class="animate-fade-up delay-4 ingr-right" id="hero-grid"
+    <div class="animate-fade-up delay-3 ingr-right" id="hero-grid"
          style="display:grid;gap:0;border:1px solid var(--border);">
 
         <!-- Input -->

src/style.css

@@ -85,6 +85,14 @@ body { position: relative; z-index: 1; }
   backdrop-filter: blur(12px);
   z-index: 50;
 }
+.theme-toggle-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 32px 0;
+  max-width: 1164px;
+  margin: 0 auto;
+}
 .site-logo {
   font-family: var(--font-mono);
   font-size: 18px;