Add base styles and layout for sidebar and content

Author: vishwaparekh

assets/style.css

@@ -182,6 +182,282 @@ table {
       padding: 10px;
     }
 
+* Base */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #222;
+  background: #ffffff;
+  line-height: 1.6;
+}
+
+/* Layout wrapper */
+.site-wrapper {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 250px;
+  background: #f7f9fc;
+  border-right: 1px solid #e2e6f0;
+  padding: 20px 18px;
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.sidebar-header .brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+}
+
+.sidebar-header img {
+  height: 40px;
+}
+
+.sidebar-header span {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: #003d99;
+}
+
+.sidebar-tagline {
+  margin-top: 12px;
+  font-size: 0.85rem;
+  color: #555;
+}
+
+/* Sidebar nav */
+.sidebar-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 20px 0 0;
+}
+
+.sidebar-nav li {
+  margin-bottom: 4px;
+}
+
+.sidebar-nav a {
+  text-decoration: none;
+  color: #222;
+  font-size: 0.95rem;
+  display: block;
+  padding: 5px 4px;
+  border-radius: 4px;
+  transition: background 0.2s, color 0.2s;
+}
+
+.sidebar-nav a:hover {
+  background: #e4ecff;
+  color: #003d99;
+}
+
+.nav-section-title {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #888;
+  margin: 14px 0 6px;
+}
+
+.nav-parent > span {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #003d99;
+  display: block;
+  margin: 8px 0 4px;
+}
+
+.nav-parent ul {
+  margin-left: 10px;
+  margin-bottom: 6px;
+}
+
+/* Main content */
+.main-content {
+  flex: 1;
+  padding: 40px 40px 30px;
+}
+
+/* Hero / index sections */
+.hero {
+  max-width: 820px;
+  margin: 0 auto 50px;
+  background: #f7f9fc;
+  text-align: center;
+  border-bottom: 1px solid #e5e9f2;
+}
+
+.hero h1 {
+  font-size: 2.6rem;
+  margin-bottom: 10px;
+}
+
+.hero p.subtitle {
+  font-size: 1.15rem;
+  color: #555;
+  margin-top: 0;
+}
+
+.hero p.lead {
+  font-size: 1rem;
+  color: #555;
+  margin-top: 18px;
+  max-width: 680px;
+}
+
+.btn-primary {
+  display: inline-block;
+  margin-top: 24px;
+  padding: 10px 20px;
+  background: #003d99;
+  color: #fff;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.btn-primary:hover {
+  background: #002f73;
+}
+.btn-container {
+      margin-top: 25px;
+    }
+.btn {
+  display: inline-block;
+  background: #0055cc;
+  color: white;
+  text-decoration: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  margin: 6px;
+  font-weight: 500;
+  transition: background 0.3s;
+}
+.btn:hover { background: #003f99; }
+section {
+  width: 85%;
+  max-width: 950px;
+  margin: auto;
+  padding: 40px 0;
+}
+
+table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 20px;
+    }
+    table th, table td {
+      border-bottom: 1px solid #eee;
+      text-align: left;
+      padding: 10px;
+    }
+
+/* Pillars / cards */
+.section-title {
+  font-size: 1.6rem;
+  margin: 40px 0 18px;
+}
+
+.pillar-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.pillar-card {
+  flex: 1 1 260px;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 18px 20px;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
+}
+
+.pillar-card h3 {
+  margin-top: 0;
+  font-size: 1.1rem;
+  color: #003d99;
+}
+
+.pillar-card p {
+  font-size: 0.95rem;
+  color: #444;
+  margin-bottom: 8px;
+}
+
+.pillar-card a {
+  font-size: 0.9rem;
+  text-decoration: none;
+  color: #003d99;
+}
+
+/* Footer */
+.footer {
+  margin-top: 60px;
+  border-top: 1px solid #eee;
+  padding-top: 18px;
+  font-size: 0.85rem;
+  color: #777;
+}
+
+/* Mobile toggle */
+.sidebar-toggle {
+  display: none;
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 1100;
+  border: none;
+  background: #003d99;
+  color: white;
+  border-radius: 4px;
+  padding: 6px 10px;
+  font-size: 1.1rem;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  .site-wrapper {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease-out;
+    z-index: 1000;
+  }
+
+  .site-wrapper.sidebar-open .sidebar {
+    transform: translateX(0);
+  }
+
+  .main-content {
+    padding: 60px 16px 24px;
+  }
+
+  .sidebar-toggle {
+    display: inline-block;
+  }
+}
+
 /* Pillars / cards */
 .section-title {
   font-size: 1.6rem;