From 947d392a16eb790dd2f468f64c8df19f93c5f8da Mon Sep 17 00:00:00 2001
From: def <def@dkc-hvac.com>
Date: Mon, 6 Apr 2026 21:23:12 +0000
Subject: [PATCH] v0.3.4 add real light mode and shared responsive theme

---
 brand.css | 396 +++++++++++++++++++++++-------------------------------
 1 file changed, 168 insertions(+), 228 deletions(-)

diff --git a/brand.css b/brand.css
index b80d516..cbc3ec5 100644
--- a/brand.css
+++ b/brand.css
@@ -1,300 +1,240 @@
-/* ===== OTB shared branding ===== */
-html[data-theme="dark"]{
-  --otb-bg:#081225;
-  --otb-bg2:#09172d;
-  --otb-text:#e8eefc;
-  --otb-muted:#aab6d6;
-  --otb-panel:rgba(18,24,37,.98);
-  --otb-panel-soft:rgba(18,24,37,.78);
-  --otb-line:rgba(255,255,255,.08);
+/* ===== OTB shared theme system ===== */
+
+:root{
+  --otb-bg-main:#050b19;
+  --otb-bg-grad-1:#1f2a57;
+  --otb-bg-grad-2:#08111f;
+  --otb-bg-grad-3:#143c2d;
+  --otb-panel:#0b1330;
+  --otb-text:#f1f5ff;
+  --otb-muted:#c5cde4;
+  --otb-link:#9fd2ff;
+  --otb-accent:#62f0cf;
+  --otb-border:rgba(255,255,255,0.08);
+  --otb-shadow:0 16px 40px rgba(0,0,0,0.28);
 }
 
 html[data-theme="light"]{
-  --otb-bg:#f4f7fb;
-  --otb-bg2:#eef3f9;
-  --otb-text:#0f172a;
-  --otb-muted:#475569;
-  --otb-panel:rgba(255,255,255,.98);
-  --otb-panel-soft:rgba(255,255,255,.88);
-  --otb-line:rgba(15,23,42,.10);
+  --otb-bg-main:#eef3fb;
+  --otb-bg-grad-1:#f7f9fd;
+  --otb-bg-grad-2:#edf3fb;
+  --otb-bg-grad-3:#e7f2ec;
+  --otb-panel:#ffffff;
+  --otb-text:#172033;
+  --otb-muted:#55627c;
+  --otb-link:#0b63ce;
+  --otb-accent:#0e8f73;
+  --otb-border:rgba(18,32,60,0.10);
+  --otb-shadow:0 10px 28px rgba(16,24,40,0.08);
 }
 
-body{
-  padding-bottom:56px;
+html, body{
+  background:
+    linear-gradient(90deg, var(--otb-bg-grad-1) 0%, var(--otb-bg-grad-2) 48%, var(--otb-bg-grad-3) 100%),
+    var(--otb-bg-main) !important;
+  color:var(--otb-text) !important;
 }
 
-.site-container{
-  max-width:1100px;
-  margin:0 auto;
-  padding:20px 18px 0 18px;
-}
-
-.site-header{
-  width:100%;
-}
-
-.site-nav{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  gap:18px;
-  padding:12px 0 22px 0;
-}
-
-.site-brand{
-  display:flex;
-  align-items:center;
-  gap:14px;
-  text-decoration:none;
-  color:inherit;
-}
-
-.site-brand img{
-  height:60px;
-  width:auto;
-  display:block;
-  object-fit:contain;
-  background:rgba(255,255,255,0.92);
-  padding:6px 12px;
-  border-radius:999px;
-  box-shadow:0 8px 24px rgba(0,0,0,0.35);
-}
-
-.site-title{
-  display:flex;
-  flex-direction:column;
-  line-height:1.1;
-}
-
-.site-title strong{
-  letter-spacing:.2px;
-  color:var(--otb-text);
-}
-
-.site-title span{
-  color:var(--otb-muted);
-  font-size:13px;
-  margin-top:2px;
-}
+a{ color:var(--otb-link); }
 
-.site-nav-right{
-  display:flex;
-  align-items:center;
-  gap:14px;
-  flex-wrap:wrap;
-  justify-content:flex-end;
-}
-
-.site-navlinks{
-  display:flex;
-  gap:12px;
-  flex-wrap:wrap;
-  justify-content:flex-end;
-  align-items:center;
-}
+.site-header{ background:transparent; }
 
+.site-brand strong,
 .site-navlinks > a,
-.dropdown-toggle{
-  text-decoration:none;
-  padding:8px 10px;
-  border-radius:12px;
-  color:var(--otb-muted);
-  border:1px solid transparent;
-}
-
-.site-navlinks > a:hover,
-.dropdown-toggle:hover{
-  color:var(--otb-text);
-  border-color:var(--otb-line);
-  background:rgba(255,255,255,.03);
+.dropdown-toggle,
+.site-title strong,
+.site-title span{
+  color:var(--otb-text) !important;
+}
+
+.site-title span,
+.small,
+.lead,
+.sub,
+.portal-sub,
+.portal-note,
+.muted{
+  color:var(--otb-muted) !important;
+}
+
+.card,
+.heroCard,
+.sideCard,
+.feature,
+.portal-card,
+.detail-card,
+.pay-card,
+.snapshot-wrap,
+.note,
+.tableWrap{
+  background:var(--otb-panel) !important;
+  border:1px solid var(--otb-border) !important;
+  color:var(--otb-text) !important;
+  box-shadow:var(--otb-shadow);
 }
 
-.dropdown{
-  position:relative;
-  display:inline-block;
+.dropdown-menu{
+  background:var(--otb-panel) !important;
+  border:1px solid var(--otb-border) !important;
+  box-shadow:var(--otb-shadow);
 }
 
-.dropdown-toggle{
-  display:inline-block;
-  cursor:pointer;
+.dropdown-menu a{
+  color:var(--otb-text) !important;
 }
 
-.dropdown-menu{
-  position:absolute;
-  top:calc(100% + 8px);
-  right:0;
-  min-width:220px;
-  display:none;
-  padding:10px;
-  border-radius:14px;
-  background:var(--otb-panel);
-  border:1px solid var(--otb-line);
-  box-shadow:0 16px 40px rgba(0,0,0,.35);
-  z-index:9999;
+input,
+select,
+textarea{
+  background:rgba(255,255,255,0.06) !important;
+  color:var(--otb-text) !important;
+  border:1px solid var(--otb-border) !important;
 }
 
-.dropdown:hover .dropdown-menu,
-.dropdown:focus-within .dropdown-menu{
-  display:block;
+html[data-theme="light"] input,
+html[data-theme="light"] select,
+html[data-theme="light"] textarea{
+  background:#f6f8fc !important;
 }
 
-.dropdown-menu a{
-  display:block;
-  padding:9px 10px;
-  border-radius:10px;
+::placeholder{
   color:var(--otb-muted);
-  text-decoration:none;
-  white-space:nowrap;
-  margin:0;
+  opacity:0.85;
 }
 
-.dropdown-menu a + a{
-  margin-top:4px;
+.btn,
+.portal-btn{
+  border:1px solid var(--otb-border) !important;
 }
 
-.dropdown-menu a:hover{
-  color:var(--otb-text);
-  background:rgba(255,255,255,.04);
+.otb-statusbar{
+  background:#0b1326 !important;
+  border-top:1px solid rgba(255,255,255,0.06);
 }
 
-.otb-theme-switch{
-  position:relative;
-  display:inline-block;
-  width:54px;
-  height:30px;
-  flex:0 0 auto;
+.otb-statusbar-inner{
+  max-width:1200px;
+  margin:0 auto;
+  padding:10px 18px;
+  color:#f3f7ff;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  gap:10px;
+  flex-wrap:wrap;
+  font-size:13px;
+  line-height:1.4;
 }
 
-.otb-theme-switch input{
-  opacity:0;
-  width:0;
-  height:0;
-}
+.otb-statusbar strong{ color:#f8fbff; }
 
-.otb-theme-slider{
-  position:absolute;
-  inset:0;
-  cursor:pointer;
-  background:rgba(255,255,255,.10);
-  border:1px solid var(--otb-line);
-  transition:.2s;
-  border-radius:999px;
+.otb-statusbar a{
+  color:#62f0cf !important;
+  text-decoration:none;
 }
 
-.otb-theme-slider:before{
-  content:"";
-  position:absolute;
-  height:22px;
-  width:22px;
-  left:3px;
-  top:3px;
-  background:var(--otb-text);
-  transition:.2s;
+.otb-dot{
+  width:4px;
+  height:4px;
   border-radius:50%;
+  background:rgba(255,255,255,0.25);
+  display:inline-block;
 }
 
-.otb-theme-switch input:checked + .otb-theme-slider:before{
-  transform:translateX(24px);
+html[data-theme="light"] .otb-statusbar{
+  background:#edf2fb !important;
+  border-top:1px solid rgba(18,32,60,0.08);
 }
 
-.otb-statusbar{
-  position:fixed;
-  left:0;
-  right:0;
-  bottom:0;
-  z-index:9999;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  min-height:42px;
-  padding:8px 14px;
-  background:var(--otb-panel);
-  border-top:1px solid var(--otb-line);
-  backdrop-filter:blur(8px);
-  box-shadow:0 -8px 24px rgba(0,0,0,.28);
-}
-
-.otb-statusbar-inner{
-  width:100%;
-  max-width:1100px;
-  display:flex;
-  gap:10px;
-  align-items:center;
-  justify-content:center;
-  flex-wrap:wrap;
-  text-align:center;
-  color:var(--otb-muted);
-  font-size:12px;
-  line-height:1.35;
+html[data-theme="light"] .otb-statusbar-inner{
+  color:#23314a;
 }
 
-.otb-statusbar strong{
-  color:var(--otb-text);
-  font-weight:700;
+html[data-theme="light"] .otb-statusbar strong{
+  color:#16233a;
 }
 
-.otb-statusbar a{
-  color:#62e6b7;
-  text-decoration:none;
-  font-weight:600;
+html[data-theme="light"] .otb-dot{
+  background:rgba(23,32,51,0.22);
 }
 
-.otb-statusbar a:hover{
-  text-decoration:underline;
+.portal-shell,
+.portal-wrap{
+  max-width:1200px;
+  margin:0 auto;
+  padding:32px 20px 72px;
 }
 
-.otb-dot{
-  width:6px;
-  height:6px;
-  border-radius:999px;
-  display:inline-block;
-  background:rgba(255,255,255,.25);
-  flex:0 0 auto;
+.portal-card{
+  max-width:760px;
+  margin:0 auto;
 }
 
 @media (max-width: 900px){
+  .site-container,
+  .container{
+    padding-left:16px !important;
+    padding-right:16px !important;
+  }
+
   .site-nav{
-    align-items:flex-start;
+    display:flex;
     flex-direction:column;
+    align-items:flex-start;
+    gap:14px;
   }
 
   .site-nav-right{
     width:100%;
-    justify-content:space-between;
+    display:flex;
+    flex-direction:column;
+    align-items:flex-start;
+    gap:12px;
   }
 
   .site-navlinks{
-    justify-content:flex-start;
-  }
-
-  .dropdown{
     width:100%;
+    display:flex;
+    flex-wrap:wrap;
+    gap:10px 16px;
+    align-items:center;
   }
 
-  .dropdown-toggle{
-    width:100%;
+  .dropdown-menu{
+    min-width:220px;
   }
 
-  .dropdown-menu{
-    position:static;
-    right:auto;
-    top:auto;
-    min-width:100%;
-    margin-top:6px;
+  .portal-shell,
+  .portal-wrap{
+    padding:24px 16px 64px;
   }
+}
 
+@media (max-width: 640px){
   .site-brand img{
-    height:54px;
+    width:48px;
+    height:48px;
+  }
+
+  .site-title strong{
+    font-size:20px;
+  }
+
+  .site-title span{
+    font-size:13px;
   }
-}
 
-@media (max-width: 700px){
-  body{
-    padding-bottom:72px;
+  .site-navlinks{
+    gap:8px 14px;
   }
 
   .otb-statusbar-inner{
-    font-size:11px;
-    line-height:1.25;
+    font-size:12px;
+    gap:8px;
+    padding:10px 12px;
+  }
+
+  .portal-card{
+    max-width:100%;
   }
 }