branded header, nav, footer for OTB
https://outsidethebox.top
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
393 lines
6.6 KiB
393 lines
6.6 KiB
/* ===== 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: 1100px){ |
|
.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: 1100px){ |
|
.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; |
|
} |
|
} |
|
|
|
|
|
|
|
/* ===== stronger mobile nav override ===== */ |
|
@media (max-width: 1100px){ |
|
.otb-menu-toggle{ |
|
display:flex !important; |
|
} |
|
|
|
.site-nav{ |
|
display:flex !important; |
|
align-items:center !important; |
|
justify-content:space-between !important; |
|
gap:14px !important; |
|
flex-wrap:wrap !important; |
|
} |
|
|
|
.site-nav-right{ |
|
display:none !important; |
|
width:100% !important; |
|
flex-direction:column !important; |
|
align-items:flex-start !important; |
|
gap:14px !important; |
|
padding-top:10px !important; |
|
} |
|
|
|
.site-nav-right.otb-nav-open{ |
|
display:flex !important; |
|
} |
|
|
|
.site-navlinks{ |
|
width:100% !important; |
|
display:flex !important; |
|
flex-direction:column !important; |
|
align-items:flex-start !important; |
|
gap:10px !important; |
|
} |
|
|
|
.site-navlinks > a, |
|
.dropdown{ |
|
width:100% !important; |
|
} |
|
|
|
.dropdown-toggle{ |
|
width:100% !important; |
|
justify-content:flex-start !important; |
|
} |
|
|
|
.dropdown-menu{ |
|
position:static !important; |
|
min-width:0 !important; |
|
width:100% !important; |
|
margin-top:8px !important; |
|
} |
|
}
|
|
|