1 changed files with 168 additions and 228 deletions
@ -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; |
||||
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); |
||||
} |
||||
|
||||
.site-header{ |
||||
width:100%; |
||||
.dropdown-menu{ |
||||
background:var(--otb-panel) !important; |
||||
border:1px solid var(--otb-border) !important; |
||||
box-shadow:var(--otb-shadow); |
||||
} |
||||
|
||||
.site-nav{ |
||||
display:flex; |
||||
align-items:center; |
||||
justify-content:space-between; |
||||
gap:18px; |
||||
padding:12px 0 22px 0; |
||||
.dropdown-menu a{ |
||||
color:var(--otb-text) !important; |
||||
} |
||||
|
||||
.site-brand{ |
||||
display:flex; |
||||
align-items:center; |
||||
gap:14px; |
||||
text-decoration:none; |
||||
color:inherit; |
||||
input, |
||||
select, |
||||
textarea{ |
||||
background:rgba(255,255,255,0.06) !important; |
||||
color:var(--otb-text) !important; |
||||
border:1px solid var(--otb-border) !important; |
||||
} |
||||
|
||||
.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); |
||||
html[data-theme="light"] input, |
||||
html[data-theme="light"] select, |
||||
html[data-theme="light"] textarea{ |
||||
background:#f6f8fc !important; |
||||
} |
||||
|
||||
.site-title{ |
||||
display:flex; |
||||
flex-direction:column; |
||||
line-height:1.1; |
||||
::placeholder{ |
||||
color:var(--otb-muted); |
||||
opacity:0.85; |
||||
} |
||||
|
||||
.site-title strong{ |
||||
letter-spacing:.2px; |
||||
color:var(--otb-text); |
||||
.btn, |
||||
.portal-btn{ |
||||
border:1px solid var(--otb-border) !important; |
||||
} |
||||
|
||||
.site-title span{ |
||||
color:var(--otb-muted); |
||||
font-size:13px; |
||||
margin-top:2px; |
||||
.otb-statusbar{ |
||||
background:#0b1326 !important; |
||||
border-top:1px solid rgba(255,255,255,0.06); |
||||
} |
||||
|
||||
.site-nav-right{ |
||||
.otb-statusbar-inner{ |
||||
max-width:1200px; |
||||
margin:0 auto; |
||||
padding:10px 18px; |
||||
color:#f3f7ff; |
||||
display:flex; |
||||
justify-content:center; |
||||
align-items:center; |
||||
gap:14px; |
||||
gap:10px; |
||||
flex-wrap:wrap; |
||||
justify-content:flex-end; |
||||
font-size:13px; |
||||
line-height:1.4; |
||||
} |
||||
|
||||
.site-navlinks{ |
||||
display:flex; |
||||
gap:12px; |
||||
flex-wrap:wrap; |
||||
justify-content:flex-end; |
||||
align-items:center; |
||||
} |
||||
.otb-statusbar strong{ color:#f8fbff; } |
||||
|
||||
.site-navlinks > a, |
||||
.dropdown-toggle{ |
||||
.otb-statusbar a{ |
||||
color:#62f0cf !important; |
||||
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{ |
||||
position:relative; |
||||
.otb-dot{ |
||||
width:4px; |
||||
height:4px; |
||||
border-radius:50%; |
||||
background:rgba(255,255,255,0.25); |
||||
display:inline-block; |
||||
} |
||||
|
||||
.dropdown-toggle{ |
||||
display:inline-block; |
||||
cursor:pointer; |
||||
html[data-theme="light"] .otb-statusbar{ |
||||
background:#edf2fb !important; |
||||
border-top:1px solid rgba(18,32,60,0.08); |
||||
} |
||||
|
||||
.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; |
||||
html[data-theme="light"] .otb-statusbar-inner{ |
||||
color:#23314a; |
||||
} |
||||
|
||||
.dropdown:hover .dropdown-menu, |
||||
.dropdown:focus-within .dropdown-menu{ |
||||
display:block; |
||||
html[data-theme="light"] .otb-statusbar strong{ |
||||
color:#16233a; |
||||
} |
||||
|
||||
.dropdown-menu a{ |
||||
display:block; |
||||
padding:9px 10px; |
||||
border-radius:10px; |
||||
color:var(--otb-muted); |
||||
text-decoration:none; |
||||
white-space:nowrap; |
||||
margin:0; |
||||
html[data-theme="light"] .otb-dot{ |
||||
background:rgba(23,32,51,0.22); |
||||
} |
||||
|
||||
.dropdown-menu a + a{ |
||||
margin-top:4px; |
||||
.portal-shell, |
||||
.portal-wrap{ |
||||
max-width:1200px; |
||||
margin:0 auto; |
||||
padding:32px 20px 72px; |
||||
} |
||||
|
||||
.dropdown-menu a:hover{ |
||||
color:var(--otb-text); |
||||
background:rgba(255,255,255,.04); |
||||
.portal-card{ |
||||
max-width:760px; |
||||
margin:0 auto; |
||||
} |
||||
|
||||
.otb-theme-switch{ |
||||
position:relative; |
||||
display:inline-block; |
||||
width:54px; |
||||
height:30px; |
||||
flex:0 0 auto; |
||||
} |
||||
|
||||
.otb-theme-switch input{ |
||||
opacity:0; |
||||
width:0; |
||||
height:0; |
||||
} |
||||
|
||||
.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-theme-slider:before{ |
||||
content:""; |
||||
position:absolute; |
||||
height:22px; |
||||
width:22px; |
||||
left:3px; |
||||
top:3px; |
||||
background:var(--otb-text); |
||||
transition:.2s; |
||||
border-radius:50%; |
||||
@media (max-width: 900px){ |
||||
.site-container, |
||||
.container{ |
||||
padding-left:16px !important; |
||||
padding-right:16px !important; |
||||
} |
||||
|
||||
.otb-theme-switch input:checked + .otb-theme-slider:before{ |
||||
transform:translateX(24px); |
||||
.site-nav{ |
||||
display:flex; |
||||
flex-direction:column; |
||||
align-items:flex-start; |
||||
gap:14px; |
||||
} |
||||
|
||||
.otb-statusbar{ |
||||
position:fixed; |
||||
left:0; |
||||
right:0; |
||||
bottom:0; |
||||
z-index:9999; |
||||
.site-nav-right{ |
||||
width:100%; |
||||
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); |
||||
flex-direction:column; |
||||
align-items:flex-start; |
||||
gap:12px; |
||||
} |
||||
|
||||
.otb-statusbar-inner{ |
||||
.site-navlinks{ |
||||
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; |
||||
gap:10px 16px; |
||||
align-items:center; |
||||
} |
||||
|
||||
.otb-statusbar strong{ |
||||
color:var(--otb-text); |
||||
font-weight:700; |
||||
.dropdown-menu{ |
||||
min-width:220px; |
||||
} |
||||
|
||||
.otb-statusbar a{ |
||||
color:#62e6b7; |
||||
text-decoration:none; |
||||
font-weight:600; |
||||
.portal-shell, |
||||
.portal-wrap{ |
||||
padding:24px 16px 64px; |
||||
} |
||||
|
||||
.otb-statusbar a:hover{ |
||||
text-decoration:underline; |
||||
} |
||||
|
||||
.otb-dot{ |
||||
width:6px; |
||||
height:6px; |
||||
border-radius:999px; |
||||
display:inline-block; |
||||
background:rgba(255,255,255,.25); |
||||
flex:0 0 auto; |
||||
@media (max-width: 640px){ |
||||
.site-brand img{ |
||||
width:48px; |
||||
height:48px; |
||||
} |
||||
|
||||
@media (max-width: 900px){ |
||||
.site-nav{ |
||||
align-items:flex-start; |
||||
flex-direction:column; |
||||
.site-title strong{ |
||||
font-size:20px; |
||||
} |
||||
|
||||
.site-nav-right{ |
||||
width:100%; |
||||
justify-content:space-between; |
||||
.site-title span{ |
||||
font-size:13px; |
||||
} |
||||
|
||||
.site-navlinks{ |
||||
justify-content:flex-start; |
||||
} |
||||
|
||||
.dropdown{ |
||||
width:100%; |
||||
gap:8px 14px; |
||||
} |
||||
|
||||
.dropdown-toggle{ |
||||
width:100%; |
||||
} |
||||
|
||||
.dropdown-menu{ |
||||
position:static; |
||||
right:auto; |
||||
top:auto; |
||||
min-width:100%; |
||||
margin-top:6px; |
||||
} |
||||
|
||||
.site-brand img{ |
||||
height:54px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 700px){ |
||||
body{ |
||||
padding-bottom:72px; |
||||
.otb-statusbar-inner{ |
||||
font-size:12px; |
||||
gap:8px; |
||||
padding:10px 12px; |
||||
} |
||||
|
||||
.otb-statusbar-inner{ |
||||
font-size:11px; |
||||
line-height:1.25; |
||||
.portal-card{ |
||||
max-width:100%; |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue