otb-shared-brand/brand.css

/* ===== 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-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);
}

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;
}

a{ color:var(--otb-link); }

.site-header{ background:transparent; }

.site-brand strong,
.site-navlinks > a,
.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-menu{
  background:var(--otb-panel) !important;
  border:1px solid var(--otb-border) !important;
  box-shadow:var(--otb-shadow);
}

.dropdown-menu a{
  color:var(--otb-text) !important;
}

input,
select,
textarea{
  background:rgba(255,255,255,0.06) !important;
  color:var(--otb-text) !important;
  border:1px solid var(--otb-border) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#f6f8fc !important;
}

::placeholder{
  color:var(--otb-muted);
  opacity:0.85;
}

.btn,
.portal-btn{
  border:1px solid var(--otb-border) !important;
}

.otb-statusbar{
  background:#0b1326 !important;
  border-top:1px solid rgba(255,255,255,0.06);
}

.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-statusbar strong{ color:#f8fbff; }

.otb-statusbar a{
  color:#62f0cf !important;
  text-decoration:none;
}

.otb-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  display:inline-block;
}

html[data-theme="light"] .otb-statusbar{
  background:#edf2fb !important;
  border-top:1px solid rgba(18,32,60,0.08);
}

html[data-theme="light"] .otb-statusbar-inner{
  color:#23314a;
}

html[data-theme="light"] .otb-statusbar strong{
  color:#16233a;
}

html[data-theme="light"] .otb-dot{
  background:rgba(23,32,51,0.22);
}

.portal-shell,
.portal-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:32px 20px 72px;
}

.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{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .site-nav-right{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .site-navlinks{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    align-items:center;
  }

  .dropdown-menu{
    min-width:220px;
  }

  .portal-shell,
  .portal-wrap{
    padding:24px 16px 64px;
  }
}

@media (max-width: 640px){
  .site-brand img{
    width:48px;
    height:48px;
  }

  .site-title strong{
    font-size:20px;
  }

  .site-title span{
    font-size:13px;
  }

  .site-navlinks{
    gap:8px 14px;
  }

  .otb-statusbar-inner{
    font-size:12px;
    gap:8px;
    padding:10px 12px;
  }

  .portal-card{
    max-width:100%;
  }
}



/* ===== OTB hamburger nav ===== */
.otb-menu-toggle{
  display:none;
  margin-left:auto;
  width:46px;
  height:42px;
  border:1px solid var(--otb-border);
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.otb-menu-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:var(--otb-text);
  border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}

.site-nav-right{
  display:flex;
  align-items:center;
  gap:16px;
}

@media (max-width: 900px){
  .otb-menu-toggle{
    display:flex;
  }

  .site-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
  }

  .site-brand{
    min-width:0;
    flex:1 1 auto;
  }

  .site-nav-right{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-top:10px;
  }

  .site-nav-right.otb-nav-open{
    display:flex;
  }

  .site-navlinks{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .site-navlinks > a,
  .dropdown{
    width:100%;
  }

  .dropdown-toggle{
    display:inline-flex;
    width:100%;
    justify-content:flex-start;
  }

  .dropdown-menu{
    position:static !important;
    display:none;
    min-width:0;
    width:100%;
    margin-top:8px;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{
    display:block;
  }
}