Update styles and structure in globals.css, enhance homepage layout in page.tsx, add mobile close button in site-header.tsx, and expand .gitignore for new files.

.gitignore

@@ -48,3 +48,15 @@ next-env.d.ts
 .claude/**
 CLAUDE.md 
 
+.cursorindexingignore
+.specstory
+.specstory/**
+.specstory/ai_rules_backups
+.specstory/history
+.specstory/project.json
+.specstory/what-is-this.md
+.specstory/ai_rules_backups
+.specstory/history
+.specstory/project.json
+.specstory/what-is-this.md
+

app/globals.css

@@ -1,8 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
 :root {
   /* HPS Brand Colors - Refined */
   --primary-blue: #0066bf;
@@ -63,50 +61,6 @@
   --header-height: 80px;
 }
 
-.dark {
-  --background: #0f172a;
-  --foreground: #f8fafc;
-
-  --card: #1e293b;
-  --card-foreground: #f8fafc;
-
-  --popover: #0f172a;
-  --popover-foreground: #f8fafc;
-
-  --primary: #f8fafc;
-  --primary-foreground: #0f172a;
-
-  --secondary: #1e293b;
-  --secondary-foreground: #f8fafc;
-
-  --muted: #1e293b;
-  --muted-foreground: #94a3b8;
-
-  --accent: #1e293b;
-  --accent-foreground: #f8fafc;
-
-  --destructive: #7f1d1d;
-  --destructive-foreground: #f8fafc;
-
-  --border: #1e293b;
-  --input: #1e293b;
-  --ring: #cbd5e1;
-
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-
-  --sidebar: #1e293b;
-  --sidebar-foreground: #ffffff;
-  --sidebar-primary: #8cc63f;
-  --sidebar-primary-foreground: #0f172a;
-  --sidebar-accent: #1e293b;
-  --sidebar-accent-foreground: #ffffff;
-  --sidebar-border: #334155;
-  --sidebar-ring: #8cc63f;
-}
 
 @theme inline {
   --font-sans: "Inter", "sans-serif";

app/page.tsx

@@ -11,7 +11,7 @@ export default function HomePage() {
 
       <main className="flex-1">
         {/* Hero Section */}
-        <section className="relative h-[90vh] min-h-[600px] flex items-center justify-center overflow-hidden bg-deep-navy">
+        <section className="relative h-[90vh] min-h-[500px] sm:min-h-[600px] flex items-center justify-center overflow-hidden overflow-x-hidden bg-deep-navy">
           {/* Background Image with Overlay */}
           <div className="absolute inset-0 z-0">
             <img
@@ -22,19 +22,19 @@ export default function HomePage() {
             <div className="absolute inset-0 bg-gradient-to-t from-deep-navy via-deep-navy/80 to-transparent" />
           </div>
 
-          <div className="relative z-10 container mx-auto px-4 text-center">
+          <div className="relative z-10 container mx-auto px-4 text-center max-w-full">
-            <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-1000">
+            <h1 className="text-3xl sm:text-4xl md:text-7xl font-bold text-white mb-4 sm:mb-6 tracking-tight opacity-100 animate-in slide-in-from-bottom-4 duration-1000 break-words">
-              Building the <span className="text-accent">Future</span>
+              Building the <span className="text-cyan-accent">Future</span>
               <br />
               with Concrete Precision
             </h1>
-            <p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10 font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
+            <p className="text-base sm:text-lg md:text-2xl text-gray-300 max-w-3xl mx-auto mb-6 sm:mb-10 font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
               Specializing in Insulating Concrete Form (ICF) installations, structural flooring, and radiant heating
               systems.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300">
               <Link href="/contact">
-                <Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-lg px-8 h-14">
+                <Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-base sm:text-lg px-6 sm:px-8 h-12 sm:h-14">
                   Get a Quote
                 </Button>
               </Link>
@@ -42,7 +42,7 @@ export default function HomePage() {
                 <Button
                   size="lg"
                   variant="outline"
-                  className="border-white text-white hover:bg-white hover:text-deep-navy font-bold text-lg px-8 h-14 bg-transparent"
+                  className="border-white text-white hover:bg-white hover:text-deep-navy font-bold text-base sm:text-lg px-6 sm:px-8 h-12 sm:h-14 bg-transparent"
                 >
                   Our Services
                 </Button>

components/site-header.tsx

@@ -104,10 +104,22 @@ export function SiteHeader() {
       {/* Mobile Navigation Overlay */}
       <div
         className={cn(
-          "fixed inset-0 bg-white z-40 transition-all duration-500 ease-in-out md:hidden flex flex-col justify-center",
+          "fixed inset-0 bg-white z-[60] transition-all duration-500 ease-in-out md:hidden flex flex-col justify-center",
           mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none",
         )}
       >
+        {/* Close Button in Mobile Menu */}
+        <div className="absolute top-6 right-6 z-[70]">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setMobileMenuOpen(false)}
+            className="rounded-full w-12 h-12 text-deep-navy hover:bg-gray-100"
+          >
+            <X className="h-6 w-6" />
+          </Button>
+        </div>
+        
         <div className="container mx-auto px-6 py-12 flex flex-col gap-8">
           <nav className="flex flex-col gap-6">
             {navigation.map((item, index) => (