Modernize docs site UI and styling; update static HTML/CSS/JS and remove duplicate site copies

CODEX_INSTRUCTIONS.md

@@ -31,7 +31,7 @@ Tone: crisp, enterprise, practical. Avoid buzzword soup. Prefer clear boundaries
 - Use Mermaid (`.mmd` or embedded in MD) for flows.
 - Use YAML for templates/workflows.
 - Use JSON for Azure Policy stubs.
-- Use HTML/CSS for `/site` static docs with a simple nav and search (JS optional).
+- Use HTML/CSS for `/docs` static docs with a simple nav and search (JS optional).
 - Provide consistent naming, cross-links, and an index.
 - Avoid inline newline escapes like `\n` in Markdown lists.
 
@@ -170,24 +170,6 @@ Tagline: “A pragmatic, enterprise Cloud Security service operating model (Azur
       kpi-cadence.md
 
   docs/
-    site/
-      README.md
-      index.html
-      assets/
-        style.css
-        app.js
-      pages/
-        overview.html
-        service-definition.html
-        operating-model.html
-        architecture.html
-        kpis.html
-        roadmap.html
-        runbooks.html
-        templates.html
-        hybrid.html
-  site/
-    README.md
     index.html
     assets/
       style.css
@@ -374,8 +356,8 @@ Create real usable templates:
 - sprint ceremonies md
 - kpi dashboard md
 
-## 9) HTML site (site/*)
-Create a minimal docs site:
+## 9) HTML site (docs/*)
+Create a minimal docs site with modern, enterprise styling:
 - left nav
 - mobile friendly
 - search (simple JS search over page titles or a small index array)
@@ -414,6 +396,7 @@ Keep it stable and not overcomplicated.
 - Prefer explicit tables (RACI, KPIs, cadences, responsibilities).
 - Include “anti-patterns” sections to show maturity (e.g., security as blocker, PDF policies, hero culture).
 - Ensure Markdown content is lint-friendly and free of formatting artifacts.
+- Continuously refine the docs site UX to reflect modern enterprise styling and usability.
 
 ## 13) Execution steps (what you should do now)
 1) Create all files and folders above.

README.md

@@ -47,8 +47,7 @@ interfaces, measurable outcomes, and lifecycle management across Azure and hybri
 - Runbooks: [`docs/20-runbooks/README.md`](docs/20-runbooks/README.md)
 - Templates: [`docs/21-templates/README.md`](docs/21-templates/README.md)
 - Diagrams: [`docs/22-diagrams/README.md`](docs/22-diagrams/README.md)
-- Static site: [`docs/site/index.html`](docs/site/index.html)
-- Static site: [`site/index.html`](site/index.html)
+- Static site: [`docs/index.html`](docs/index.html)
 
 ## Service lifecycle (preview)
 ```mermaid
@@ -76,7 +75,6 @@ The repository includes:
 - `/docs` — service model documentation and diagrams
 - `/impl` — Azure and hybrid implementation stubs
 - `/agile` — backlog, ceremonies, and metrics
-- `/site` — lightweight static documentation site
 
 ## License
 See [`LICENSE`](LICENSE).

docs/assets/app.js

@@ -30,13 +30,18 @@ function resolveHref(targetPath) {
   return `${trimmedBase}/${targetPath}`;
 }
 
+function createNavLink(page) {
+  const link = document.createElement("a");
+  link.href = resolveHref(page.path);
+  link.textContent = page.title;
+  link.classList.add("nav-link");
+  return link;
+}
+
 function buildNav() {
   const nav = document.getElementById("nav-links");
   pageDefinitions.forEach((page) => {
-    const link = document.createElement("a");
-    link.href = resolveHref(page.path);
-    link.textContent = page.title;
-    nav.appendChild(link);
+    nav.appendChild(createNavLink(page));
   });
 }
 
@@ -51,10 +56,7 @@ function setupSearch() {
     const nav = document.getElementById("nav-links");
     nav.innerHTML = "";
     results.forEach((page) => {
-      const link = document.createElement("a");
-      link.href = resolveHref(page.path);
-      link.textContent = page.title;
-      nav.appendChild(link);
+      nav.appendChild(createNavLink(page));
     });
   });
 }

docs/assets/style.css

@@ -1,8 +1,15 @@
 :root {
-  --bg: #f7f9fb;
-  --text: #1f2933;
-  --nav: #ffffff;
-  --accent: #0b5cab;
+  color-scheme: light;
+  --bg: #f4f7fb;
+  --surface: #ffffff;
+  --surface-muted: #f0f4fa;
+  --text: #0f172a;
+  --text-muted: #475569;
+  --border: #e2e8f0;
+  --accent: #2563eb;
+  --accent-strong: #1d4ed8;
+  --accent-soft: rgba(37, 99, 235, 0.12);
+  --shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
 }
 
 * {
@@ -11,70 +18,199 @@
 
 body {
   margin: 0;
-  font-family: Arial, sans-serif;
+  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
   color: var(--text);
   background: var(--bg);
+  line-height: 1.6;
 }
 
-header {
-  background: var(--nav);
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid #e0e6ed;
+.topbar {
+  background: linear-gradient(120deg, #0f172a, #1e293b 45%, #1e40af 100%);
+  color: #f8fafc;
+  padding: 2.5rem 3rem 2rem;
 }
 
-.container {
+.topbar-content {
   display: flex;
-  min-height: calc(100vh - 60px);
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 2rem;
+  flex-wrap: wrap;
 }
 
-nav {
-  width: 260px;
-  background: var(--nav);
-  border-right: 1px solid #e0e6ed;
-  padding: 1rem;
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+  color: rgba(248, 250, 252, 0.7);
+  margin: 0 0 0.5rem;
 }
 
-main {
-  flex: 1;
-  padding: 2rem;
+.topbar h1 {
+  margin: 0 0 0.75rem;
+  font-size: clamp(2rem, 3vw, 2.75rem);
+}
+
+.subhead {
+  margin: 0;
+  max-width: 640px;
+  color: rgba(248, 250, 252, 0.78);
+}
+
+.topbar-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1rem;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  text-decoration: none;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.button.primary {
+  background: #f8fafc;
+  color: #0f172a;
 }
 
-nav a {
+.button.secondary {
+  background: transparent;
+  color: #f8fafc;
+  border-color: rgba(248, 250, 252, 0.4);
+}
+
+.layout {
+  display: flex;
+  min-height: calc(100vh - 140px);
+}
+
+.sidebar {
+  width: 270px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  padding: 1.5rem;
+  position: sticky;
+  top: 0;
+  height: calc(100vh - 140px);
+  overflow-y: auto;
+}
+
+.nav-title {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.nav-link {
   display: block;
   color: var(--text);
   text-decoration: none;
-  padding: 0.4rem 0;
+  padding: 0.5rem 0.5rem;
+  border-radius: 10px;
+  margin-bottom: 0.2rem;
 }
 
-nav a:hover {
-  color: var(--accent);
+.nav-link:hover {
+  background: var(--accent-soft);
+  color: var(--accent-strong);
 }
 
 .search {
-  margin-bottom: 1rem;
+  margin-bottom: 1.25rem;
 }
 
 .search input {
   width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ccd6e0;
-  border-radius: 4px;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface-muted);
+}
+
+.content {
+  flex: 1;
+  padding: 2.5rem 3rem 3rem;
 }
 
 .card {
-  background: white;
-  padding: 1rem;
-  border-radius: 6px;
-  border: 1px solid #e0e6ed;
-  margin-bottom: 1rem;
+  background: var(--surface);
+  padding: 1.5rem;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  margin-bottom: 1.5rem;
+}
+
+.card h2,
+.card h3 {
+  margin-top: 0;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.card-grid .card {
+  margin: 0;
+  box-shadow: none;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.pill {
+  padding: 0.25rem 0.7rem;
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.link-list {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.link-list a {
+  color: var(--accent-strong);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.link-list a:hover {
+  text-decoration: underline;
 }
 
-@media (max-width: 900px) {
-  .container {
+@media (max-width: 1000px) {
+  .layout {
     flex-direction: column;
   }
 
-  nav {
+  .sidebar {
     width: 100%;
+    height: auto;
+    position: relative;
+  }
+
+  .content {
+    padding: 2rem 1.5rem 3rem;
   }
 }