first template launch (#2)

Co-authored-by: Michael DiLeo <michael.dileo@oakstreethealth.com>
Reviewed-on: #2

public/site-styles/style.css

@@ -17,8 +17,9 @@
 
 .banner-title {
     position: absolute;
-    top: var(--pico-typography-spacing-vertical);
+    top: var(--pico-spacing);
     left: var(--pico-spacing);
+    right: var(--pico-spacing);
     color: white; /* Keep white for banner overlay readability */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
     margin: 0;
@@ -42,11 +43,47 @@
     z-index: 10;
 }
 
+/* Responsive positioning to match Pico container */
+@media (min-width: 576px) {
+    .banner-title {
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+        max-width: 510px;
+        width: 100%;
+    }
+}
+
+@media (min-width: 768px) {
+    .banner-title {
+        max-width: 700px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .banner-title {
+        max-width: 950px;
+    }
+}
+
+@media (min-width: 1280px) {
+    .banner-title {
+        max-width: 1200px;
+    }
+}
+
+@media (min-width: 1536px) {
+    .banner-title {
+        max-width: 1450px;
+    }
+}
+
 @media (max-width: 768px) {
     .banner-title {
         font-size: 1.8rem;
         top: calc(var(--pico-typography-spacing-vertical) * 0.5);
         left: var(--pico-spacing);
+        right: var(--pico-spacing);
     }
 }
 
@@ -151,8 +188,8 @@
     }
 }
 
-/* Make headers use primary green color */
-:root {
+/* Make headers use primary green color - only for light theme and default */
+:root:not([data-theme="dark"]) {
     --pico-h1-color: var(--pico-primary);
     --pico-h2-color: var(--pico-primary);
     --pico-h3-color: var(--pico-primary);
@@ -175,4 +212,26 @@
 /* Test: Force green color on ALL headings */
 /* h1, h2, h3, h4, h5, h6 {
     color: #2d5016 !important;
-}  */
+}  */
+
+/* Theme toggle button styling */
+#theme-toggle {
+    margin: 0;
+    padding: calc(var(--pico-spacing) * 0.5);
+    min-height: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--pico-border-radius);
+    font-size: 1.2rem;
+    transition: all 0.2s ease;
+}
+
+#theme-toggle:hover {
+    transform: scale(1.05);
+}
+
+#theme-toggle #theme-icon {
+    display: block;
+    line-height: 1;
+}