Full dark commit: transparent nav, dark sections throughout, no light/dark sandwich

The page was a mess — white nav on dark hero, off-white sections sandwiched
between dark header and footer. Now: fully dark page, nav is transparent
(scrolls to dark), all sections use dark surface variations. The page
finally commits to its identity.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/components.css

@@ -13,7 +13,7 @@
   top: 0;
   inset-inline: 0;
   z-index: var(--z-sticky);
-  background-color: var(--bg-surface);
+  background-color: transparent;
   border-bottom: 1px solid transparent;
   padding-block: var(--space-sm);
   transition:
@@ -25,8 +25,9 @@
 
 /* Added by JS on scroll */
 .nav--scrolled {
-  border-bottom-color: var(--border-subtle);
-  box-shadow: var(--shadow-nav);
+  background-color: var(--bg-dark-deeper);
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
   padding-block: var(--space-xs);
 }
 
@@ -49,11 +50,15 @@
 .nav__logo-mark {
   width: 2.25rem;
   height: 2.25rem;
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
   border-radius: var(--radius-md);
   display: grid;
   place-items: center;
   flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: #fff;
+  letter-spacing: -0.02em;
 }
 
 .nav__logo-mark svg,
@@ -65,7 +70,7 @@
 .nav__logo-text {
   font-size: var(--text-lg);
   font-weight: 800;
-  color: var(--color-primary);
+  color: var(--ink-on-dark);
   letter-spacing: var(--tracking-snug);
   line-height: 1;
 }
@@ -95,7 +100,7 @@
   padding: var(--space-xs) var(--space-sm);
   font-size: var(--text-sm);
   font-weight: 500;
-  color: var(--ink-secondary);
+  color: var(--ink-on-dark-muted);
   border-radius: var(--radius-sm);
   text-decoration: none;
   transition:
@@ -105,12 +110,12 @@
 }
 
 .nav__link:hover {
-  color: var(--color-primary);
-  background-color: var(--bg-muted);
+  color: var(--ink-on-dark);
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
 .nav__link--active {
-  color: var(--color-primary);
+  color: var(--ink-on-dark);
   font-weight: 600;
 }
 
@@ -173,9 +178,9 @@
   height: 2.5rem;
   align-items: center;
   justify-content: center;
-  color: var(--color-primary);
+  color: var(--ink-on-dark);
   border-radius: var(--radius-sm);
-  border: 1px solid var(--border-subtle);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   background-color: transparent;
   transition:
     background-color var(--duration-fast) var(--ease-out),
@@ -184,8 +189,8 @@
 }
 
 .nav__toggle:hover {
-  background-color: var(--bg-muted);
-  border-color: var(--border-default);
+  background-color: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.25);
 }
 
 .nav__toggle svg {
@@ -367,11 +372,15 @@
 .footer__brand-mark {
   width: 2.5rem;
   height: 2.5rem;
-  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
   border-radius: var(--radius-md);
   display: grid;
   place-items: center;
   flex-shrink: 0;
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: #fff;
+  letter-spacing: -0.02em;
 }
 
 .footer__brand-name {
@@ -1322,41 +1331,7 @@
   }
 }
 
-/* ----------------------------------------------------------
-   Hero (marketing page hero section)
----------------------------------------------------------- */
-
-.hero {
-  min-height: calc(100svh - var(--nav-height));
-  display: flex;
-  align-items: center;
-  padding-block-start: calc(var(--nav-height) + var(--space-2xl));
-  padding-block-end: var(--space-2xl);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Subtle background gradient */
-.hero::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(ellipse at 65% 10%, rgba(8, 145, 178, 0.05) 0%, transparent 55%),
-    radial-gradient(ellipse at 10% 90%, rgba(27, 43, 75, 0.04) 0%, transparent 50%);
-  pointer-events: none;
-}
-
-.hero__content {
-  position: relative;
-  z-index: 1;
-  max-width: 58ch;
-}
-
-.hero__visual {
-  position: relative;
-  z-index: 1;
-}
+/* Hero base removed — page-specific CSS (home.css, pages.css) owns hero styles */
 
 /* ----------------------------------------------------------
    Responsive helpers — hide/show at breakpoints

public/css/home.css

 /* ============================================================
    El Captain — Homepage
-   Commanding. Exclusive. Operations center energy.
+   Commanding. Exclusive. Dark throughout. Operations center.
    ============================================================ */
 
 /* --- Hero -------------------------------------------------------- */
 
 .hero {
-  min-height: 80dvh;
+  min-height: 85dvh;
   display: flex;
   align-items: center;
   padding-block: calc(var(--nav-height) + var(--space-3xl)) var(--space-2xl);
@@ -19,7 +19,7 @@
   content: '';
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(8, 145, 178, 0.06), transparent);
+  background: radial-gradient(ellipse 70% 50% at 75% 40%, rgba(8, 145, 178, 0.07), transparent);
   pointer-events: none;
 }
 
@@ -33,18 +33,18 @@
   font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
   font-weight: 900;
   color: var(--ink-on-dark);
-  line-height: 1.1;
-  letter-spacing: -0.02em;
+  line-height: 1.08;
+  letter-spacing: -0.025em;
   margin-block-end: var(--space-md);
   text-wrap: balance;
 }
 
 .hero__sub {
-  font-size: var(--text-lg);
+  font-size: var(--text-xl);
   color: var(--ink-on-dark-muted);
   line-height: var(--leading-relaxed);
   margin-block-end: var(--space-xl);
-  max-width: 48ch;
+  max-width: 44ch;
 }
 
 .hero__actions {
@@ -57,31 +57,35 @@
 .hero__btn-primary {
   display: inline-flex;
   align-items: center;
-  padding: var(--space-sm) var(--space-lg);
+  padding: 0.875rem 2rem;
   background: var(--color-accent);
   color: #fff;
   font-weight: 700;
   font-size: var(--text-base);
   border-radius: var(--btn-radius);
   text-decoration: none;
+  box-shadow: 0 4px 18px rgba(8, 145, 178, 0.3);
   transition: background var(--duration-normal) var(--ease-out),
-              transform var(--duration-fast) var(--ease-out);
+              transform var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-normal) var(--ease-out);
 }
 
 .hero__btn-primary:hover {
   background: var(--color-accent-light);
-  transform: translateY(-1px);
+  color: #fff;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(8, 145, 178, 0.35);
 }
 
 .hero__btn-ghost {
   display: inline-flex;
   align-items: center;
-  padding: var(--space-sm) var(--space-lg);
+  padding: 0.875rem 2rem;
   background: transparent;
   color: var(--ink-on-dark-muted);
   font-weight: 600;
   font-size: var(--text-base);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: var(--btn-radius);
   text-decoration: none;
   transition: border-color var(--duration-normal) var(--ease-out),
@@ -89,7 +93,7 @@
 }
 
 .hero__btn-ghost:hover {
-  border-color: rgba(255, 255, 255, 0.5);
+  border-color: rgba(255, 255, 255, 0.45);
   color: var(--ink-on-dark);
 }
 
@@ -99,16 +103,16 @@
     padding-block: calc(var(--nav-height) + var(--space-xl)) var(--space-xl);
   }
   .hero__title {
-    font-size: clamp(2rem, 6vw, 3rem);
+    font-size: clamp(2rem, 7vw, 3rem);
   }
 }
 
 
-/* --- Showcase (single cinematic screenshot) ---------------------- */
+/* --- Showcase (cinematic screenshot on darker bg) ---------------- */
 
 .showcase {
-  padding-block: var(--space-2xl);
-  background: var(--bg-dark-deeper);
+  padding-block: var(--space-xl) var(--space-section);
+  background: var(--bg-dark);
 }
 
 .showcase__frame {
@@ -116,9 +120,9 @@
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow:
-    0 24px 80px rgba(0, 0, 0, 0.4),
-    0 8px 24px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+    0 32px 80px rgba(0, 0, 0, 0.5),
+    0 12px 32px rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .showcase__frame img {
@@ -128,16 +132,16 @@
 }
 
 
-/* --- Modules (two-column, text + nav list) ----------------------- */
+/* --- Modules (dark surface variation) ---------------------------- */
 
 .modules {
   padding-block: var(--space-section);
-  background: var(--bg-body);
+  background: var(--bg-dark-deeper);
 }
 
 .modules__layout {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1.2fr;
   gap: var(--space-2xl);
   align-items: start;
 }
@@ -145,7 +149,7 @@
 .modules__title {
   font-size: var(--text-4xl);
   font-weight: 900;
-  color: var(--ink-primary);
+  color: var(--ink-on-dark);
   line-height: var(--leading-tight);
   letter-spacing: -0.02em;
   margin-block-end: var(--space-sm);
@@ -153,7 +157,7 @@
 
 .modules__desc {
   font-size: var(--text-lg);
-  color: var(--ink-secondary);
+  color: var(--ink-on-dark-muted);
   line-height: var(--leading-relaxed);
   max-width: 36ch;
 }
@@ -168,19 +172,19 @@
   padding: var(--space-md) 0;
   font-size: var(--text-lg);
   font-weight: 600;
-  color: var(--ink-primary);
+  color: rgba(255, 255, 255, 0.75);
   text-decoration: none;
-  border-bottom: 1px solid var(--border-subtle);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   transition: color var(--duration-fast) var(--ease-out),
               padding-inline-start var(--duration-normal) var(--ease-out-quart);
 }
 
 .modules__nav a:first-child {
-  border-top: 1px solid var(--border-subtle);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .modules__nav a:hover {
-  color: var(--color-accent);
+  color: var(--color-accent-light);
   padding-inline-start: var(--space-sm);
 }
 
@@ -192,16 +196,16 @@
 }
 
 
-/* --- Screens (staggered masonry-like grid) ----------------------- */
+/* --- Screens (staggered grid on slightly lighter dark) ----------- */
 
 .screens {
   padding-block: var(--space-section);
-  background: var(--bg-muted);
+  background: var(--bg-dark);
 }
 
 .screens__grid {
   display: grid;
-  grid-template-columns: 1.2fr 0.8fr;
+  grid-template-columns: 1.3fr 0.7fr;
   grid-template-rows: auto auto;
   gap: var(--space-lg);
 }
@@ -210,16 +214,16 @@
   margin: 0;
   border-radius: var(--radius-lg);
   overflow: hidden;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  box-shadow: var(--shadow-md);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   transition: transform var(--duration-normal) var(--ease-out-quart),
               box-shadow var(--duration-normal) var(--ease-out);
 }
 
 .screens__item:hover {
   transform: translateY(-4px);
-  box-shadow: var(--shadow-xl);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
 }
 
 .screens__item img {
@@ -232,7 +236,7 @@
   padding: var(--space-sm) var(--space-md);
   font-size: var(--text-sm);
   font-weight: 600;
-  color: var(--ink-secondary);
+  color: var(--ink-on-dark-muted);
 }
 
 .screens__item--large {
@@ -258,13 +262,13 @@
 
 .diff {
   padding-block: var(--space-section);
-  background: var(--bg-body);
+  background: var(--bg-dark-deeper);
 }
 
 .diff__statement {
   font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
   font-weight: 800;
-  color: var(--ink-primary);
+  color: var(--ink-on-dark);
   line-height: 1.3;
   max-width: 680px;
   text-wrap: balance;
@@ -276,6 +280,7 @@
 .cta {
   padding-block: var(--space-section);
   background: var(--bg-dark);
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .cta__inner {
@@ -301,18 +306,21 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
-  padding: var(--space-sm) var(--space-lg);
+  padding: 0.875rem 2rem;
   background: var(--color-whatsapp);
   color: #fff;
   font-weight: 600;
   font-size: var(--text-base);
   border-radius: var(--btn-radius);
   text-decoration: none;
-  transition: background var(--duration-normal) var(--ease-out);
+  transition: background var(--duration-normal) var(--ease-out),
+              transform var(--duration-fast) var(--ease-out);
 }
 
 .cta__wa:hover {
   background: var(--color-whatsapp-dark);
+  color: #fff;
+  transform: translateY(-2px);
 }
 
 .cta__wa svg {
@@ -320,30 +328,30 @@
 }
 
 
-/* --- Page-load animation (subtle, not a reveal gate) ------------- */
+/* --- Page-load choreography -------------------------------------- */
 
 @media (prefers-reduced-motion: no-preference) {
   .hero__title {
-    animation: rise 0.7s var(--ease-out-expo) both;
+    animation: rise 0.8s var(--ease-out-expo) both;
   }
 
   .hero__sub {
-    animation: rise 0.7s 0.1s var(--ease-out-expo) both;
+    animation: rise 0.8s 0.12s var(--ease-out-expo) both;
   }
 
   .hero__actions {
-    animation: rise 0.7s 0.2s var(--ease-out-expo) both;
+    animation: rise 0.8s 0.24s var(--ease-out-expo) both;
   }
 
   .showcase__frame {
-    animation: rise 0.8s 0.3s var(--ease-out-expo) both;
+    animation: rise 0.9s 0.35s var(--ease-out-expo) both;
   }
 }
 
 @keyframes rise {
   from {
     opacity: 0;
-    transform: translateY(24px);
+    transform: translateY(28px);
   }
   to {
     opacity: 1;

public/index.html

@@ -11,7 +11,7 @@
   <link rel="stylesheet" href="css/components.css">
   <link rel="stylesheet" href="css/home.css">
 </head>
-<body>
+<body style="background-color: #1B2B4B;">
 
   <nav class="nav" aria-label="التنقل الرئيسي">
     <div class="container nav__inner">