/* ===== OTB shared branding ===== */ body{ padding-bottom: 56px; } .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(--text, #e8eefc); } .site-title span{ color: var(--muted, #aab6d6); font-size:13px; margin-top:2px; } .site-navlinks{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; align-items:center; } .site-navlinks > a, .dropdown-toggle{ text-decoration:none; padding:8px 10px; border-radius:12px; color: var(--muted, #aab6d6); border:1px solid transparent; } .site-navlinks > a:hover, .dropdown-toggle:hover{ color: var(--text, #e8eefc); border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .dropdown{ position:relative; display:inline-block; } .dropdown-toggle{ display:inline-block; cursor:pointer; } .dropdown-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:220px; display:none; padding:10px; border-radius:14px; background:rgba(18,24,37,.98); border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 40px rgba(0,0,0,.35); z-index:9999; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{ display:block; } .dropdown-menu a{ display:block; padding:9px 10px; border-radius:10px; color:var(--muted, #aab6d6); text-decoration:none; white-space:nowrap; margin:0; } .dropdown-menu a + a{ margin-top:4px; } .dropdown-menu a:hover{ color:var(--text, #e8eefc); background:rgba(255,255,255,.04); } .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: rgba(8, 16, 32, 0.94); border-top: 1px solid rgba(255,255,255,.10); 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(--muted, #aab6d6); font-size: 12px; line-height: 1.35; } .otb-statusbar strong{ color: var(--text, #e8eefc); font-weight: 700; } .otb-statusbar a{ color: #62e6b7; text-decoration: none; font-weight: 600; } .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: 900px){ .site-nav{ align-items:flex-start; flex-direction:column; } .site-navlinks{ justify-content:flex-start; } .dropdown{ width:100%; } .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: 11px; line-height: 1.25; } }