gbowne1 · gbowne1 · Feb 20, 2026 · Feb 16, 2026 · Feb 16, 2026 · Feb 16, 2026
diff --git a/index.html b/index.html
@@ -40,7 +40,8 @@
 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
   <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="/src/css/style.css" />
+
+  <link rel="stylesheet" href="/src/css/app.css" />
 </head>
 
 <body class="bg-light">

diff --git a/src/css/app.css b/src/css/app.css
@@ -0,0 +1,29 @@
+/* Base */
+@import './base/reset.css';
+@import './base/variables.css';
+@import './base/typography.css';
+
+/* Layout */
+@import './layout/header.css';
+@import './layout/footer.css';
+@import './layout/grid.css';
+@import './layout/drawer.css';
+
+/* Components */
+@import './components/cards.css';
+@import './components/badges.css';
+@import './components/modal.css';
+@import './components/forms.css';
+
+/* Pages */
+@import './pages/index.css';
+@import './pages/login.css';
+@import './pages/register.css';
+@import './pages/offline.css';
+
+/* Themes */
+@import './themes/light.css';
+@import './themes/dark.css';
+
+/* Bootstrap overrides */
+@import './bootstrap-overrides.css';
diff --git a/src/css/base/reset.css b/src/css/base/reset.css
@@ -0,0 +1,7 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
diff --git a/src/css/base/typography.css b/src/css/base/typography.css
@@ -0,0 +1,37 @@
+/* =========================================
+   Typography Base
+   ========================================= */
+
+body {
+  font-family: var(--font-base);
+  background-color: var(--color-background);
+  color: var(--color-text);
+  line-height: 1.6;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+/* =========================================
+   Headings
+   ========================================= */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #000 !important;
+  transition: color 0.3s ease;
+}
+
+/* Dark mode heading overrides */
+body.dark h1,
+body.dark h2,
+body.dark h3,
+body.dark h4,
+body.dark h5,
+body.dark h6 {
+  color: #eee !important;
+}
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
@@ -0,0 +1,50 @@
+/* =========================================
+   Base Variables
+   ========================================= */
+
+:root {
+  /* Typography */
+  --font-base:
+    'Roboto', 'OpenSans', 'Lato', 'Montserrat', 'Noto Sans', 'Oswald',
+    'Poppins', 'Raleway', system-ui, -apple-system, sans-serif;
+
+  /* Brand Colors */
+  --primary: #4fc3f7;
+
+  /* Light Theme Defaults */
+  --color-background: #fff;
+  --color-text: #000;
+
+  --color-card-bg: #fff;
+  --color-card-text: #000;
+
+  --color-header-bg: #fff;
+  --color-header-text: #000;
+
+  --color-footer-bg: #f8f9fa;
+  --color-footer-text: #000;
+
+  /* Shared UI */
+  --radius: 0.5rem;
+}
+
+/* =========================================
+   System Dark Mode Defaults
+   (prefers-color-scheme: dark)
+   ========================================= */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: #111;
+    --color-text: #eee;
+
+    --color-card-bg: #222;
+    --color-card-text: #eee;
+
+    --color-header-bg: #222;
+    --color-header-text: #eee;
+
+    --color-footer-bg: #222;
+    --color-footer-text: #eee;
+  }
+}
diff --git a/src/css/bootstrap-overrides.css b/src/css/bootstrap-overrides.css
@@ -0,0 +1,50 @@
+/* =========================================
+   Bootstrap Overrides
+   ========================================= */
+
+/* Fix Bootstrap's bg-light in dark mode */
+body.dark.bg-light {
+  background-color: var(--color-background) !important;
+}
+
+/* Fix Bootstrap's bg-white header in dark mode */
+body.dark header.bg-white {
+  background-color: var(--color-header-bg) !important;
+}
+
+/* Override Bootstrap nav-link colors */
+header .nav-link {
+  color: #000 !important;
+}
+
+header .nav-link:hover,
+header .nav-link:focus {
+  color: #000 !important;
+  opacity: 0.7;
+}
+
+body.dark header .nav-link {
+  color: #eee !important;
+}
+
+body.dark header .nav-link:hover,
+body.dark header .nav-link:focus {
+  color: #eee !important;
+}
+
+/* Override Bootstrap anchor colors inside header */
+header a {
+  color: #000 !important;
+}
+
+header a:hover {
+  color: #000 !important;
+}
+
+body.dark header a {
+  color: #eee !important;
+}
+
+body.dark header a:hover {
+  color: #eee !important;
+}
diff --git a/src/css/components/badges.css b/src/css/components/badges.css
@@ -0,0 +1,50 @@
+/* =========================================
+   Badge Overrides
+   ========================================= */
+
+/* Primary badge in dark mode */
+body.dark .badge.bg-primary {
+  background-color: #4fc3f7;
+  color: #222;
+}
+
+/* General badge border in dark mode */
+body.dark .badge {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* =========================================
+   Tag Badges
+   ========================================= */
+
+.tag-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tag-badge:hover {
+  opacity: 0.8;
+  transform: translateY(-1px);
+}
+
+/* =========================================
+   Tag Filters
+   ========================================= */
+
+.tag-filter {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tag-filter:hover {
+  opacity: 0.8;
+  transform: scale(1.05);
+}
+
+.tag-filter:active {
+  transform: scale(0.98);
+}
diff --git a/src/css/components/cards.css b/src/css/components/cards.css
@@ -0,0 +1,46 @@
+/* =========================================
+   Card Component
+   ========================================= */
+
+.card {
+  background-color: var(--color-card-bg);
+  color: var(--color-card-text);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.card-text {
+  color: var(--color-card-text);
+}
+
+.card-title {
+  color: var(--color-card-text);
+}
+
+/* Viewer count + shared text overrides */
+.viewer-count,
+.card-text,
+.card-title {
+  color: var(--color-card-text);
+}
+
+/* =========================================
+   Viewer Count Pulse Animation
+   ========================================= */
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.viewer-number.pulse {
+  animation: pulse 0.3s ease-in-out;
+}
diff --git a/src/css/components/forms.css b/src/css/components/forms.css
@@ -0,0 +1,48 @@
+/* =========================================
+   Form Controls
+   ========================================= */
+
+.form-control:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25);
+}
+
+.btn-auth {
+  padding: 12px;
+  font-weight: 600;
+}
+
+/* =========================================
+   Auth Page Form Layout
+   (Login / Register)
+   ========================================= */
+
+.auth-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background-color: var(--color-background);
+}
+
+.auth-card {
+  max-width: 450px;
+  width: 100%;
+}
+
+.auth-card .card {
+  border: none;
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.auth-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/css/components/modal.css b/src/css/components/modal.css
@@ -0,0 +1,60 @@
+/* =========================================
+   Stream Detail Modal
+   ========================================= */
+
+.stream-detail-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stream-detail-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.stream-detail-content {
+  position: relative;
+  background-color: var(--color-card-bg);
+  color: var(--color-card-text);
+  max-width: 520px;
+  width: 90%;
+  padding: 1.25rem;
+  border-radius: var(--radius);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+.stream-detail-content img {
+  width: 100%;
+  border-radius: var(--radius);
+}
+
+.stream-detail-content h2 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.stream-detail-content .badge {
+  margin-right: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.close-modal {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--color-card-text);
+  cursor: pointer;
+}
+
+.close-modal:hover {
+  opacity: 0.8;
+}