fix: add x-cloak to prevent menu flash on page load

- Add [x-cloak] { display: none } CSS rule
- Add x-cloak attribute to menu overlay div
- This hides the menu until Alpine.js initializes
- Prevents the menu from appearing briefly on page refresh/load
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

3 files changed, 12 insertions, 0 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index f7d42a9..9e5c86a 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -530,6 +530,11 @@ html.theme-light .prose-invert blockquote {
   }
 }
 
+/* Alpine.js x-cloak - hide content until Alpine initializes */
+[x-cloak] {
+  display: none !important;
+}
+
 /* Respect user's motion preferences */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index ab1f4bb..8c58a4f 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -2344,6 +2344,12 @@ html.theme-light .prose-invert blockquote {
   }
 }
 
+/* Alpine.js x-cloak - hide content until Alpine initializes */
+
+[x-cloak] {
+  display: none !important;
+}
+
 /* Respect user's motion preferences */
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index caa6c6d..41f4e0b 100644
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -1,5 +1,6 @@
 <!-- Mobile menu overlay (Alpine.js controlled) -->
 <div
+  x-cloak
   x-data="{ menuOpen: false }"
   @toggle-menu.window="menuOpen = !menuOpen"
   @keydown.escape.window="menuOpen = false"