/* Banner container */ #omxBanner { position: fixed; left: 50%; bottom: -120px; /* hidden initially */ transform: translateX(-50%); width: min(980px, calc(100% - 20px)); max-width: 980px; background: linear-gradient(90deg,#0f172a,#0b84ff); color: #fff; border-radius: 12px 12px 8px 8px; padding: 11px 14px; /* reduced (80%) */ box-shadow: 0 12px 30px rgba(3,10,30,0.45); display: flex; gap: 10px; align-items: center; z-index: 2000; transition: bottom 450ms cubic-bezier(.2,.9,.3,1), transform 250ms; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Show class slides banner up */ #omxBanner.show { bottom: 20px; } /* Left: icon / logo */ #omxBanner .left { flex: 0 0 51px; /* 80% of 64px */ height: 51px; border-radius: 6px; background: linear-gradient(135deg,#00d4ff,#0077ff); display:flex; align-items:center; justify-content:center; font-weight:700; color:#002; font-size:16px; /* reduced */ } /* Middle: text */ #omxBanner .center { flex: 1 1 auto; min-width: 0; } #omxBanner .center h4 { margin: 0 0 3px 0; font-size: 13px; /* reduced */ line-height: 1.1; letter-spacing: 0.2px; } #omxBanner .center p { margin: 0; font-size: 11px; /* reduced */ opacity: 0.95; } /* Right: CTA & close */ #omxBanner .right { display:flex; gap:6px; align-items:center; } #omxBanner .cta { background: linear-gradient(90deg,#ffb703,#fb8500); color: #07122a; border: none; padding: 8px 11px; /* reduced */ border-radius: 6px; font-weight: 700; cursor: pointer; text-decoration: none; font-size: 12px; /* reduced */ box-shadow: 0 6px 14px rgba(251,133,0,0.22); } #omxBanner .cta:active { transform: translateY(1px); } #omxBanner .closeBtn { background: transparent; border: none; color: rgba(255,255,255,0.9); font-size: 16px; /* reduced */ cursor: pointer; padding: 4px; line-height:1; } /* Mobile tweaks */ @media (max-width:600px) { #omxBanner { flex-direction: column; gap:6px; align-items:flex-start; padding:9px; bottom: 10px; width: calc(100% - 18px); left: 50%; transform: translateX(-50%); } #omxBanner .left { display:none; } #omxBanner .right { width:100%; justify-content: space-between; } #omxBanner .cta { width:48%; text-align:center; padding:8px 6px; font-size:11px; } }