chore: update files

Author: SWHL

src/layouts/MainLayout.astro

@@ -60,7 +60,16 @@ const resolvedImage = /^(https?:)?\/\//.test(image) ? image : new URL(withBase(i
     <script is:inline>
       (() => {
         const storageKey = "rapidai-theme";
+        const themeDefaultVersionKey = "rapidai-theme-default-version";
+        const themeDefaultVersion = "2026-04-23-system";
         const root = document.documentElement;
+        const currentThemeDefaultVersion = window.localStorage.getItem(themeDefaultVersionKey);
+
+        if (currentThemeDefaultVersion !== themeDefaultVersion) {
+          window.localStorage.removeItem(storageKey);
+          window.localStorage.setItem(themeDefaultVersionKey, themeDefaultVersion);
+        }
+
         const stored = window.localStorage.getItem(storageKey);
         const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
         const mode = stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
@@ -243,6 +252,8 @@ const resolvedImage = /^(https?:)?\/\//.test(image) ? image : new URL(withBase(i
         const button = document.querySelector(".theme-toggle");
         const label = document.querySelector(".theme-toggle-label");
         const storageKey = "rapidai-theme";
+        const themeDefaultVersionKey = "rapidai-theme-default-version";
+        const themeDefaultVersion = "2026-04-23-system";
         const media = window.matchMedia("(prefers-color-scheme: dark)");
         const modes = ["system", "dark", "light"];
         const modeLabels = {
@@ -255,6 +266,12 @@ const resolvedImage = /^(https?:)?\/\//.test(image) ? image : new URL(withBase(i
           return;
         }
 
+        if (window.localStorage.getItem(themeDefaultVersionKey) !== themeDefaultVersion) {
+          window.localStorage.removeItem(storageKey);
+          window.localStorage.setItem(themeDefaultVersionKey, themeDefaultVersion);
+          root.dataset.themeMode = "system";
+        }
+
         const resolveTheme = (mode) => mode === "system" ? (media.matches ? "dark" : "light") : mode;
 
         const getMode = () => {

src/styles/foundation.css

@@ -1,4 +1,5 @@
 :root {
+  --site-header-offset: 84px;
   --bg: #06111f;
   --bg-deep: #030711;
   --panel: rgba(10, 21, 40, 0.84);
@@ -28,6 +29,7 @@ html {
     linear-gradient(180deg, #091325 0%, #050b16 48%, #04070f 100%);
   color: var(--text);
   scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--site-header-offset) + 18px);
 }
 
 body {
@@ -51,6 +53,7 @@ img {
 
 main {
   display: block;
+  padding-top: var(--site-header-offset);
 }
 
 .site-shell {
@@ -119,14 +122,19 @@ main {
 }
 
 .site-header,
-.site-footer,
 .hero,
 .content-section,
 .page-hero {
   width: min(1280px, calc(100vw - 32px));
   margin: 0 auto;
 }
 
+.site-footer {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+}
+
 .hero > *,
 .page-hero > *,
 .home-signal > *,
@@ -143,8 +151,10 @@ main {
 }
 
 .site-header {
-  position: sticky;
+  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
   z-index: 20;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -154,10 +164,10 @@ main {
   max-width: none;
   margin-top: 0;
   padding: 16px max(18px, calc((100vw - 1280px) / 2 + 20px));
-  background: linear-gradient(90deg, rgba(25, 13, 56, 0.96), rgba(57, 24, 111, 0.92));
+  background: linear-gradient(90deg, rgba(6, 12, 24, 0.98), rgba(18, 28, 52, 0.96));
   border: 0;
-  border-bottom: 1px solid rgba(193, 166, 255, 0.1);
-  backdrop-filter: blur(18px);
+  border-bottom: 1px solid rgba(138, 170, 226, 0.16);
+  backdrop-filter: blur(20px);
 }
 
 .site-header-actions {

src/styles/pages.css

@@ -388,8 +388,9 @@
   display: flex;
   justify-content: space-between;
   gap: 2rem;
-  padding: 2.5rem 0 3rem;
+  padding: 2.7rem max(18px, calc((100vw - 1280px) / 2 + 20px)) 3rem;
   border-top: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(8, 14, 27, 0.7), rgba(3, 7, 15, 0.96));
 }
 
 .footer-brand {

src/styles/responsive.css

@@ -1,6 +1,9 @@
 @media (max-width: 960px) {
+  :root {
+    --site-header-offset: 116px;
+  }
+
   .site-header,
-  .site-footer,
   .hero,
   .content-section,
   .page-hero {
@@ -96,6 +99,10 @@
 }
 
 @media (max-width: 820px) {
+  :root {
+    --site-header-offset: 82px;
+  }
+
   .site-header {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto auto;
@@ -385,8 +392,11 @@
 }
 
 @media (max-width: 560px) {
+  :root {
+    --site-header-offset: 74px;
+  }
+
   .site-header,
-  .site-footer,
   .hero,
   .content-section,
   .page-hero {
@@ -397,6 +407,10 @@
     padding: 12px 14px;
   }
 
+  .site-footer {
+    padding: 2.15rem 14px 2.5rem;
+  }
+
   .brand {
     gap: 0.6rem;
   }
@@ -556,8 +570,11 @@
 }
 
 @media (max-width: 430px) {
+  :root {
+    --site-header-offset: 68px;
+  }
+
   .site-header,
-  .site-footer,
   .hero,
   .content-section,
   .page-hero {
@@ -569,6 +586,10 @@
     padding: 11px 13px;
   }
 
+  .site-footer {
+    padding: 2rem 13px 2.35rem;
+  }
+
   .brand {
     font-size: 0.98rem;
   }
@@ -668,8 +689,11 @@
 }
 
 @media (max-width: 390px) {
+  :root {
+    --site-header-offset: 64px;
+  }
+
   .site-header,
-  .site-footer,
   .hero,
   .content-section,
   .page-hero {
@@ -680,6 +704,10 @@
     padding: 10px 12px;
   }
 
+  .site-footer {
+    padding: 1.9rem 12px 2.2rem;
+  }
+
   .brand span {
     font-size: 0.94rem;
   }