/* ========================================================================= NexusHub - Matched Betting pages Shared look for the hub, calculator, dutching, profit tracker and account. Every rule starts with ".mb" (the class on ) so it always wins over the Tailwind reset used by the site header. ========================================================================= */ :root { --mb-bg: #050505; --mb-panel: rgba(14, 14, 19, .82); --mb-panel-solid: #0e0e13; --mb-inset: #08080b; --mb-line: rgba(255, 255, 255, .07); --mb-line-2: rgba(255, 255, 255, .12); --mb-text: #f4f4f5; --mb-muted: #a1a1aa; --mb-dim: #6b6b76; --mb-cyan: #22d3ee; --mb-blue: #3b82f6; --mb-grad: linear-gradient(135deg, #06b6d4, #3b82f6); --mb-pos: #34d399; --mb-neg: #fb7185; --mb-warn: #fbbf24; --mb-ease: cubic-bezier(.16, 1, .3, 1); --mb-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --mb-display: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; } .mb [hidden] { display: none !important; } body.mb { background: radial-gradient(1100px 600px at 10% -10%, rgba(6, 182, 212, .10), transparent 60%), radial-gradient(900px 520px at 100% 0%, rgba(59, 130, 246, .08), transparent 60%), var(--mb-bg); background-attachment: fixed; color: var(--mb-text); } .mb .mb-main, .mb .mb-layer, .mb .mb-toasts { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } :where(.mb .mb-main, .mb .mb-layer, .mb .mb-toasts) *, :where(.mb .mb-main, .mb .mb-layer, .mb .mb-toasts) *::before, :where(.mb .mb-main, .mb .mb-layer, .mb .mb-toasts) *::after { box-sizing: border-box; } :where(.mb .mb-main, .mb .mb-layer, .mb .mb-toasts) :where(button, input, select, textarea) { font: inherit; color: inherit; } :where(.mb .mb-main, .mb .mb-layer, .mb .mb-toasts) :focus-visible { outline: 2px solid var(--mb-cyan); outline-offset: 2px; } .mb svg.ic { display: inline-block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .mb .mb-main { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding: 112px 0 72px; flex: 1 0 auto; } .mb .mb-main.narrow { width: min(980px, calc(100% - 32px)); } /* ---------- Entrance animation ---------- */ @keyframes mb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .mb .rise { animation: mb-rise .7s var(--mb-ease) both; animation-delay: calc(var(--d, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .mb .rise { animation: none; } } /* ---------- Section links under the header ---------- */ .mb .mb-subnav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 34px; } .mb .mb-subnav-links { display: flex; gap: 4px; padding: 5px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--mb-line); border-radius: 999px; background: rgba(255, 255, 255, .03); } .mb .mb-subnav-links::-webkit-scrollbar { display: none; } .mb .mb-subnav-links a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 14px; border-radius: 999px; color: var(--mb-muted); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; } .mb .mb-subnav-links a:hover { color: #fff; background: rgba(255, 255, 255, .06); } .mb .mb-subnav-links a[aria-current="page"] { color: #fff; background: rgba(34, 211, 238, .14); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .28); } .mb .mb-subnav-links a .ext { width: 13px; height: 13px; opacity: .6; } .mb .mb-subnav-links .sep { width: 1px; margin: 6px 4px; background: var(--mb-line-2); flex: none; } .mb .mb-userchip { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 5px 14px 5px 5px; border: 1px solid var(--mb-line); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--mb-text); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, background .2s ease; } .mb .mb-userchip:hover { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .06); } .mb .mb-userchip.signed-out { padding: 9px 16px; } .mb .mb-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--mb-grad); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; } .mb .mb-avatar.lg { width: 64px; height: 64px; font-size: 22px; } /* ---------- Page title ---------- */ .mb .mb-hero { max-width: 780px; margin: 0 auto 36px; text-align: center; } .mb .mb-hero.left { margin-left: 0; text-align: left; } .mb .mb-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border: 1px solid rgba(34, 211, 238, .28); border-radius: 999px; background: rgba(34, 211, 238, .08); color: #7ee8f7; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .mb .mb-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-cyan); box-shadow: 0 0 10px var(--mb-cyan); } .mb .mb-title { margin: 0 0 14px; font-family: var(--mb-display); font-weight: 900; font-size: clamp(2.4rem, 5.5vw, 3.9rem); line-height: 1.03; letter-spacing: -.02em; color: #fff; } .mb .mb-title span, .mb .grad { background: var(--mb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mb .mb-sub { margin: 0 auto; max-width: 620px; color: var(--mb-muted); font-size: 1.06rem; line-height: 1.65; } .mb .mb-hero.left .mb-sub { margin-left: 0; } .mb .mb-h2 { margin: 0; font-family: var(--mb-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; color: #fff; } .mb .mb-h3 { margin: 0; font-family: var(--mb-display); font-weight: 700; font-size: 1.08rem; color: #fff; } .mb .mb-label-sm { display: block; margin-bottom: 6px; color: var(--mb-dim); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .mb .muted { color: var(--mb-muted); } .mb .dim { color: var(--mb-dim); } .mb .pos { color: var(--mb-pos); } .mb .neg { color: var(--mb-neg); } .mb .num { font-family: var(--mb-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .mb p { line-height: 1.6; } /* ---------- Panels ---------- */ .mb .mb-panel { position: relative; padding: 24px; border: 1px solid var(--mb-line); border-radius: 24px; background: var(--mb-panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .mb .mb-panel.tight { padding: 18px; } .mb .mb-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .mb .mb-panel-head p { margin: 4px 0 0; color: var(--mb-muted); font-size: 14px; } .mb .mb-divider { height: 1px; margin: 20px 0; background: var(--mb-line); border: 0; } .mb .mb-grid-2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: start; } @media (max-width: 900px) { .mb .mb-grid-2 { grid-template-columns: minmax(0, 1fr); } } /* ---------- Form fields ---------- */ .mb .mb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .mb .mb-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mb .mb-fields .full { grid-column: 1 / -1; } @media (max-width: 560px) { .mb .mb-fields, .mb .mb-fields.three { grid-template-columns: 1fr; } } .mb .mb-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .mb .mb-field > span, .mb .mb-field > label, .mb .mb-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #d4d4d8; font-size: 13px; font-weight: 600; } .mb .mb-field small { color: var(--mb-dim); font-weight: 500; font-size: 12px; } .mb .mb-input, .mb .mb-select, .mb .mb-textarea { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--mb-line-2); border-radius: 13px; background: var(--mb-inset); color: #fff; font-size: 15.5px; font-weight: 500; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; -webkit-appearance: none; appearance: none; } .mb .mb-input::placeholder, .mb .mb-textarea::placeholder { color: #4b4b55; } .mb .mb-input:hover, .mb .mb-select:hover, .mb .mb-textarea:hover { border-color: rgba(255, 255, 255, .2); } .mb .mb-input:focus, .mb .mb-select:focus, .mb .mb-textarea:focus, .mb .mb-affix:focus-within { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 4px rgba(34, 211, 238, .12); } .mb .mb-input[aria-invalid="true"], .mb .mb-affix.invalid { border-color: rgba(251, 113, 133, .7); box-shadow: 0 0 0 4px rgba(251, 113, 133, .1); } .mb .mb-input.num-input { font-family: var(--mb-mono); font-variant-numeric: tabular-nums; } .mb .mb-select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } .mb .mb-select option { background: #111116; color: #fff; } .mb .mb-textarea { height: auto; min-height: 200px; padding: 14px; line-height: 1.6; resize: vertical; } .mb .mb-affix { display: flex; align-items: center; height: 48px; overflow: hidden; border: 1px solid var(--mb-line-2); border-radius: 13px; background: var(--mb-inset); transition: border-color .2s ease, box-shadow .2s ease; } .mb .mb-affix:hover { border-color: rgba(255, 255, 255, .2); } .mb .mb-affix b { display: grid; place-items: center; min-width: 40px; height: 100%; color: var(--mb-dim); font-weight: 700; font-size: 15px; } .mb .mb-affix b:first-child { border-right: 1px solid var(--mb-line); } .mb .mb-affix b:last-child { border-left: 1px solid var(--mb-line); } .mb .mb-affix input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; color: #fff; font-family: var(--mb-mono); font-size: 15.5px; outline: none; -moz-appearance: textfield; } .mb .mb-affix input::placeholder { color: #4b4b55; } .mb .mb-affix input::-webkit-outer-spin-button, .mb .mb-affix input::-webkit-inner-spin-button, .mb .mb-input::-webkit-outer-spin-button, .mb .mb-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mb .mb-input[type="number"] { -moz-appearance: textfield; } .mb .mb-help { margin: 0; color: var(--mb-dim); font-size: 12.5px; line-height: 1.5; } .mb .mb-error { margin: 0; color: var(--mb-neg); font-size: 13px; font-weight: 600; } .mb .mb-check { display: flex; align-items: flex-start; gap: 10px; color: var(--mb-muted); font-size: 13.5px; line-height: 1.45; cursor: pointer; } .mb .mb-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #22d3ee; flex: none; cursor: pointer; } .mb .mb-check a { color: #7ee8f7; } /* ---------- Segmented control ---------- */ .mb .mb-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--mb-line); border-radius: 15px; background: var(--mb-inset); } .mb .mb-seg button { padding: 9px 15px; border: 0; border-radius: 11px; background: transparent; color: var(--mb-muted); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; } .mb .mb-seg button:hover { color: #fff; } .mb .mb-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .mb .mb-seg.accent button[aria-pressed="true"] { background: rgba(34, 211, 238, .16); color: #cffafe; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .3); } .mb .mb-seg.full { display: flex; width: 100%; } .mb .mb-seg.full button { flex: 1; min-width: 0; } @media (max-width: 560px) { .mb .mb-seg.full { display: grid; grid-template-columns: 1fr 1fr; } .mb .mb-seg.full.three { grid-template-columns: 1fr 1fr 1fr; } } .mb .mb-seg.sm button { padding: 7px 12px; font-size: 13px; } /* ---------- Buttons ---------- */ .mb .mb-btn { --bevel: 5px; --bevel-colour: #0b4c79; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 14px; background: linear-gradient(145deg, #22d3ee, #0ea5e9 45%, #3b82f6); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .2px; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; text-shadow: 0 1px 1px rgba(3, 40, 70, .35); box-shadow: 0 var(--bevel) 0 var(--bevel-colour), 0 calc(var(--bevel) + 4px) 22px rgba(14, 165, 233, .35), inset 0 2px 0 rgba(255, 255, 255, .28); transition: transform .15s ease, box-shadow .15s ease, filter .2s ease, opacity .2s ease; margin-bottom: var(--bevel); } .mb .mb-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .15) 55%, transparent 100%); transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; } .mb .mb-btn:hover::before { left: 140%; } .mb .mb-btn:hover { filter: brightness(1.07); } .mb .mb-btn:active { transform: translateY(calc(var(--bevel) - 1px)); box-shadow: 0 1px 0 var(--bevel-colour), 0 2px 8px rgba(14, 165, 233, .35), inset 0 2px 0 rgba(255, 255, 255, .2); } .mb .mb-btn:disabled, .mb .mb-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); transform: none; } .mb .mb-btn > * { position: relative; z-index: 1; } .mb .mb-btn.full { width: 100%; } .mb .mb-btn.sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; --bevel: 4px; } .mb .mb-btn.green { background: linear-gradient(145deg, #34d399, #10b981 50%, #059669); --bevel-colour: #065f46; box-shadow: 0 var(--bevel) 0 var(--bevel-colour), 0 calc(var(--bevel) + 4px) 22px rgba(16, 185, 129, .3), inset 0 2px 0 rgba(255, 255, 255, .28); } .mb .mb-btn.danger { background: linear-gradient(145deg, #fb7185, #e11d48); --bevel-colour: #881337; box-shadow: 0 var(--bevel) 0 var(--bevel-colour), 0 calc(var(--bevel) + 4px) 22px rgba(225, 29, 72, .3), inset 0 2px 0 rgba(255, 255, 255, .25); } .mb .mb-btn .spinner { display: none; } .mb .mb-btn.is-busy .spinner { display: inline-block; } .mb .mb-btn.is-busy { pointer-events: none; } .mb .mb-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--mb-line-2); border-radius: 13px; background: rgba(255, 255, 255, .03); color: #e4e4e7; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; } .mb .mb-ghost:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); color: #fff; } .mb .mb-ghost:active { transform: scale(.98); } .mb .mb-ghost.sm { min-height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 11px; } .mb .mb-ghost.full { width: 100%; } .mb .mb-ghost.danger { color: #fda4af; border-color: rgba(251, 113, 133, .3); } .mb .mb-ghost.danger:hover { background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .5); } .mb .mb-ghost:disabled { opacity: .45; cursor: not-allowed; } .mb .mb-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--mb-muted); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s var(--mb-ease); } .mb .mb-icon-btn:hover { background: rgba(255, 255, 255, .07); color: #fff; } .mb .mb-icon-btn:active { transform: scale(.93); } .mb .mb-icon-btn.danger:hover { background: rgba(251, 113, 133, .14); color: #fda4af; } .mb .mb-icon-btn[aria-pressed="true"] { background: rgba(34, 211, 238, .16); color: #a5f3fc; } .mb .mb-link { padding: 0; border: 0; background: none; color: #7ee8f7; font-weight: 600; font-size: inherit; text-decoration: none; cursor: pointer; } .mb .mb-link:hover { color: #cffafe; text-decoration: underline; text-underline-offset: 3px; } .mb .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: mb-spin .8s linear infinite; flex: none; } @keyframes mb-spin { to { transform: rotate(360deg); } } /* ---------- Big results ---------- */ .mb .mb-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 20px 22px; border: 1px solid rgba(34, 211, 238, .25); border-radius: 20px; background: linear-gradient(135deg, rgba(6, 182, 212, .14), rgba(59, 130, 246, .08)); color: #fff; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s var(--mb-ease), background .2s ease; } .mb .mb-result:hover { border-color: rgba(34, 211, 238, .5); transform: translateY(-1px); } .mb .mb-result:disabled { cursor: default; transform: none; } .mb .mb-result .lbl { display: block; color: #a5f3fc; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .mb .mb-result strong { display: block; margin-top: 6px; font-family: var(--mb-mono); font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; } .mb .mb-result .copy { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #e0f2fe; font-size: 13px; font-weight: 700; flex: none; } .mb .mb-result.copied .copy { background: rgba(52, 211, 153, .18); color: #a7f3d0; } .mb .mb-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .mb .mb-pair { padding: 14px 16px; border: 1px solid var(--mb-line); border-radius: 16px; background: rgba(255, 255, 255, .025); } .mb .mb-pair span { display: block; color: var(--mb-dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .mb .mb-pair strong { display: block; margin-top: 6px; font-family: var(--mb-mono); font-size: 1.2rem; font-weight: 700; color: #fff; } .mb .mb-pair small { display: block; margin-top: 2px; color: var(--mb-dim); font-size: 12px; } .mb .mb-profit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--mb-line); background: rgba(255, 255, 255, .03); } .mb .mb-profit span { color: var(--mb-muted); font-weight: 600; font-size: 14px; } .mb .mb-profit strong { font-family: var(--mb-mono); font-size: 1.5rem; font-weight: 700; } .mb .mb-profit.is-pos { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .07); } .mb .mb-profit.is-neg { border-color: rgba(251, 113, 133, .28); background: rgba(251, 113, 133, .06); } .mb .mb-profit.is-pos strong { color: var(--mb-pos); } .mb .mb-profit.is-neg strong { color: var(--mb-neg); } .mb .mb-meter { display: flex; align-items: center; gap: 10px; } .mb .mb-meter-track { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; } .mb .mb-meter-fill { height: 100%; width: 0; border-radius: inherit; background: var(--mb-grad); transition: width .5s var(--mb-ease); } /* ---------- Tables ---------- */ .mb .mb-table-wrap { overflow-x: auto; border: 1px solid var(--mb-line); border-radius: 16px; } .mb .mb-table { width: 100%; border-collapse: collapse; font-size: 14px; } .mb .mb-table th { padding: 11px 14px; background: rgba(255, 255, 255, .03); color: var(--mb-dim); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; } .mb .mb-table td { padding: 12px 14px; border-top: 1px solid var(--mb-line); color: #e4e4e7; white-space: nowrap; } .mb .mb-table td.num, .mb .mb-table th.num { text-align: right; } .mb .mb-table tr.total td { background: rgba(255, 255, 255, .025); font-weight: 700; color: #fff; } /* ---------- Badges ---------- */ .mb .mb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; } .mb .mb-badge.open { background: rgba(251, 191, 36, .1); color: #fcd34d; border-color: rgba(251, 191, 36, .25); } .mb .mb-badge.won { background: rgba(52, 211, 153, .1); color: #6ee7b7; border-color: rgba(52, 211, 153, .25); } .mb .mb-badge.lost { background: rgba(59, 130, 246, .12); color: #93c5fd; border-color: rgba(59, 130, 246, .28); } .mb .mb-badge.void, .mb .mb-badge.plain { background: rgba(255, 255, 255, .06); color: #d4d4d8; border-color: var(--mb-line-2); } .mb .mb-badge.free { background: rgba(168, 85, 247, .12); color: #d8b4fe; border-color: rgba(168, 85, 247, .28); } .mb .mb-badge.expired { background: rgba(251, 113, 133, .1); color: #fda4af; border-color: rgba(251, 113, 133, .25); } /* ---------- Bookmaker logo tiles ---------- */ .mb .mb-bookie { position: relative; display: inline-grid; place-items: center; width: 58px; height: 30px; flex: none; overflow: hidden; border-radius: 8px; background: var(--bk, #1c1c22); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .mb .mb-bookie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mb .mb-bookie.lg { width: 76px; height: 38px; border-radius: 10px; font-size: 13px; } /* ---------- Stat tiles ---------- */ .mb .mb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .mb .mb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mb .mb-stat { padding: 18px 20px; border: 1px solid var(--mb-line); border-radius: 20px; background: var(--mb-panel); } .mb .mb-stat > span { display: block; color: var(--mb-muted); font-size: 13px; font-weight: 600; } .mb .mb-stat strong { display: block; margin-top: 8px; font-family: var(--mb-mono); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; color: #fff; } .mb .mb-stat small { display: block; margin-top: 4px; color: var(--mb-dim); font-size: 12.5px; } .mb .mb-stat.hero { background: linear-gradient(135deg, rgba(6, 182, 212, .14), rgba(59, 130, 246, .08)), var(--mb-panel); border-color: rgba(34, 211, 238, .22); } /* ---------- Tabs ---------- */ .mb .mb-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--mb-line); overflow-x: auto; scrollbar-width: none; } .mb .mb-tabs::-webkit-scrollbar { display: none; } .mb .mb-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 6px; margin-right: 18px; border: 0; background: none; color: var(--mb-muted); font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; } .mb .mb-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--mb-grad); transform: scaleX(0); transition: transform .3s var(--mb-ease); } .mb .mb-tabs button:hover { color: #fff; } .mb .mb-tabs button[aria-selected="true"] { color: #fff; } .mb .mb-tabs button[aria-selected="true"]::after { transform: scaleX(1); } .mb .mb-tabs .count { padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: #d4d4d8; font-size: 12px; } /* ---------- Empty states ---------- */ .mb .mb-empty { padding: 42px 20px; text-align: center; } .mb .mb-empty .ico { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 16px; background: rgba(34, 211, 238, .1); color: #67e8f9; } .mb .mb-empty .ico svg { width: 24px; height: 24px; } .mb .mb-empty h3 { margin: 0 0 6px; font-family: var(--mb-display); font-size: 1.2rem; color: #fff; } .mb .mb-empty p { margin: 0 auto 16px; max-width: 380px; color: var(--mb-muted); font-size: 14.5px; } /* ---------- Modals ---------- */ .mb dialog.mb-modal { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; overflow: visible; border: 1px solid var(--mb-line-2); border-radius: 24px; background: #0f0f14; color: var(--mb-text); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .mb dialog.mb-modal.wide { width: min(720px, calc(100% - 24px)); } .mb dialog.mb-modal.small { width: min(440px, calc(100% - 24px)); } .mb dialog.mb-modal::backdrop { background: rgba(0, 0, 0, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .mb dialog.mb-modal[open] { animation: mb-pop .35s var(--mb-ease); } @keyframes mb-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } .mb .mb-modal-body { padding: 24px; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; } .mb .mb-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .mb .mb-modal-head p { margin: 4px 0 0; color: var(--mb-muted); font-size: 14px; } .mb .mb-modal-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .mb .mb-modal-foot .left { margin-right: auto; } /* ---------- Toasts ---------- */ .mb .mb-toasts { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 2000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .mb .mb-toast { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 13px 16px; border: 1px solid var(--mb-line-2); border-radius: 14px; background: rgba(18, 18, 24, .96); color: #f4f4f5; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); pointer-events: auto; animation: mb-toast-in .4s var(--mb-ease); } .mb .mb-toast.good { border-color: rgba(52, 211, 153, .35); } .mb .mb-toast.good svg { color: var(--mb-pos); } .mb .mb-toast.bad { border-color: rgba(251, 113, 133, .4); } .mb .mb-toast.bad svg { color: var(--mb-neg); } .mb .mb-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; } @keyframes mb-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .mb .mb-toasts { left: 12px; right: 12px; } .mb .mb-toast { max-width: none; } } /* ---------- Sign in / sign up ---------- */ .mb .mb-auth { width: min(460px, 100%); margin: 0 auto; } .mb .mb-auth .mb-panel { padding: 28px; } .mb .mb-auth form { display: grid; gap: 16px; } .mb .mb-auth .mb-seg { margin-bottom: 22px; } .mb .mb-auth-foot { margin-top: 18px; text-align: center; color: var(--mb-dim); font-size: 13px; } .mb .mb-pw { position: relative; } .mb .mb-pw .mb-input { padding-right: 48px; } .mb .mb-pw .mb-icon-btn { position: absolute; right: 5px; top: 5px; } .mb .mb-strength { display: flex; gap: 4px; margin-top: 2px; } .mb .mb-strength i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); transition: background .3s ease; } .mb .mb-strength[data-s="1"] i:nth-child(-n+1) { background: #fb7185; } .mb .mb-strength[data-s="2"] i:nth-child(-n+2) { background: #fbbf24; } .mb .mb-strength[data-s="3"] i:nth-child(-n+3) { background: #34d399; } .mb .mb-strength[data-s="4"] i:nth-child(-n+4) { background: #22d3ee; } .mb .mb-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(34, 211, 238, .22); border-radius: 16px; background: rgba(34, 211, 238, .06); color: #cffafe; font-size: 14px; line-height: 1.5; } .mb .mb-notice.warn { border-color: rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .06); color: #fde68a; } .mb .mb-notice.bad { border-color: rgba(251, 113, 133, .3); background: rgba(251, 113, 133, .06); color: #fecdd3; } .mb .mb-notice svg { margin-top: 1px; } .mb .mb-notice a { color: inherit; font-weight: 700; } /* ---------- Locked page (signed out) ---------- */ .mb .mb-locked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: center; } @media (max-width: 900px) { .mb .mb-locked { grid-template-columns: 1fr; gap: 28px; } } .mb .mb-perks { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; } .mb .mb-perks li { display: flex; gap: 14px; align-items: flex-start; color: #d4d4d8; font-size: 15px; line-height: 1.5; } .mb .mb-perks li b { display: block; color: #fff; } .mb .mb-perks .ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: rgba(34, 211, 238, .1); color: #67e8f9; } /* ---------- Chart ---------- */ .mb .mb-chart { position: relative; height: 290px; margin-top: 6px; } .mb .mb-chart svg { display: block; width: 100%; height: 100%; overflow: visible; } .mb .mb-chart .grid line { stroke: rgba(255, 255, 255, .06); stroke-width: 1; } .mb .mb-chart .grid line.zero { stroke: rgba(255, 255, 255, .22); } .mb .mb-chart .axis text { fill: #71717a; font-size: 11.5px; font-family: Inter, sans-serif; } .mb .mb-chart .line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mb .mb-chart .end-label { font-size: 12px; font-weight: 700; font-family: Inter, sans-serif; fill: #e4e4e7; } .mb .mb-chart .cross { stroke: rgba(255, 255, 255, .35); stroke-width: 1; } .mb .mb-chart .dot { stroke: #0e0e13; stroke-width: 2; } .mb .mb-chart-tip { position: absolute; top: 8px; z-index: 3; min-width: 170px; padding: 10px 12px; pointer-events: none; border: 1px solid var(--mb-line-2); border-radius: 12px; background: rgba(12, 12, 16, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 12.5px; color: var(--mb-muted); } .mb .mb-chart-tip .when { margin-bottom: 6px; color: #d4d4d8; font-weight: 600; } .mb .mb-chart-tip .row { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .mb .mb-chart-tip .row i { width: 14px; height: 2px; border-radius: 2px; flex: none; } .mb .mb-chart-tip .row strong { margin-left: auto; padding-left: 12px; color: #fff; font-family: var(--mb-mono); } .mb .mb-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--mb-muted); font-size: 13px; font-weight: 600; } .mb .mb-legend span { display: inline-flex; align-items: center; gap: 8px; } .mb .mb-legend i { width: 18px; height: 2px; border-radius: 2px; } .mb .mb-legend i.dash { background: none !important; border-top: 2px dashed; height: 0; } .mb .mb-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mb-dim); font-size: 14px; text-align: center; padding: 20px; } .mb details.mb-table-toggle summary { cursor: pointer; color: var(--mb-dim); font-size: 13px; font-weight: 600; list-style: none; } .mb details.mb-table-toggle summary::-webkit-details-marker { display: none; } .mb details.mb-table-toggle summary:hover { color: #fff; } /* ---------- Hub cards ---------- */ .mb .mb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .mb .mb-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .mb .mb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mb .mb-grid-2 > *, .mb .mb-cards > * { min-width: 0; } @media (max-width: 760px) { .mb .mb-cards.three { grid-template-columns: 1fr; } } @media (max-width: 520px) { .mb .mb-cards { grid-template-columns: 1fr; } } .mb .mb-card { --c: 34, 211, 238; position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 210px; padding: 22px; border: 1px solid var(--mb-line); border-radius: 22px; background: var(--mb-panel); color: var(--mb-text); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .45s var(--mb-ease), border-color .3s ease, box-shadow .3s ease; } .mb .mb-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s ease; background: radial-gradient(360px 180px at 20% 0%, rgba(var(--c), .16), transparent 70%); } .mb .mb-card:hover { transform: translateY(-4px); border-color: rgba(var(--c), .45); box-shadow: 0 0 0 1px rgba(var(--c), .15), 0 18px 44px rgba(var(--c), .12); } .mb .mb-card:hover::before { opacity: 1; } .mb .mb-card .ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(var(--c), .12); color: rgb(var(--c)); box-shadow: inset 0 0 0 1px rgba(var(--c), .2); } .mb .mb-card .ico svg { width: 24px; height: 24px; } .mb .mb-card h3 { margin: 6px 0 0; font-family: var(--mb-display); font-size: 1.2rem; font-weight: 700; color: #fff; } .mb .mb-card p { margin: 0; color: var(--mb-muted); font-size: 14px; line-height: 1.55; } .mb .mb-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: rgb(var(--c)); font-size: 13.5px; font-weight: 700; } .mb .mb-card .go svg { width: 16px; height: 16px; transition: transform .3s var(--mb-ease); } .mb .mb-card:hover .go svg { transform: translateX(3px); } .mb .mb-card .tag { position: absolute; top: 18px; right: 18px; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--mb-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .mb .mb-section-title { display: flex; align-items: center; gap: 14px; margin: 48px 0 18px; } .mb .mb-section-title span { color: #a1a1aa; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; } .mb .mb-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--mb-line-2), transparent); } .mb .mb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; } @media (max-width: 860px) { .mb .mb-steps { grid-template-columns: 1fr; } } .mb .mb-step { position: relative; padding: 22px; border: 1px solid var(--mb-line); border-radius: 22px; background: var(--mb-panel); } .mb .mb-step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 11px; background: var(--mb-grad); color: #fff; font-family: var(--mb-display); font-weight: 900; } .mb .mb-step h3 { margin: 0 0 6px; font-family: var(--mb-display); font-size: 1.1rem; color: #fff; } .mb .mb-step p { margin: 0; color: var(--mb-muted); font-size: 14.5px; } .mb .mb-step .eg { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--mb-inset); border: 1px solid var(--mb-line); color: #d4d4d8; font-family: var(--mb-mono); font-size: 12.5px; } .mb .mb-safe { display: flex; align-items: center; gap: 12px; margin-top: 44px; padding: 16px 18px; border: 1px solid var(--mb-line); border-radius: 18px; background: rgba(255, 255, 255, .02); color: var(--mb-dim); font-size: 13px; line-height: 1.5; } /* The notice's icon. It used to be a small circle holding "18+", but the wording changed to "Matched betting", which never fit. */ .mb .mb-safe .mb-safe-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid rgba(251, 113, 133, .45); border-radius: 13px; background: rgba(251, 113, 133, .1); color: #fda4af; } .mb .mb-safe .mb-safe-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mb .mb-safe b { color: #e4e4e7; font-weight: 700; } .mb .mb-safe a { color: #d4d4d8; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Small screens ---------- */ @media (max-width: 700px) { .mb .mb-main { padding-top: 100px; } .mb .mb-subnav { margin-bottom: 26px; gap: 8px; } .mb .mb-subnav-links { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; } .mb .mb-userchip.signed-out { padding: 9px 13px; } .mb .mb-userchip > span:last-child { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mb .mb-panel { padding: 18px; border-radius: 20px; } } @media (max-width: 520px) { .mb .mb-card { min-height: 0; } } .mb .mb-step h3, .mb .mb-card h3, .mb .mb-empty h3 { font-weight: 700; } /* ---------- Bookmaker search box ---------- */ .mb .mb-combo { position: relative; } .mb .mb-combo .mb-bookie { position: absolute; left: 9px; top: 9px; width: 52px; height: 30px; pointer-events: none; } .mb .mb-combo .mb-input { padding-left: 72px; } .mb .mb-combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--mb-line-2); border-radius: 14px; background: #121218; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); } .mb .mb-combo-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: #e4e4e7; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .mb .mb-combo-list button:hover, .mb .mb-combo-list button[aria-selected="true"] { background: rgba(34, 211, 238, .1); color: #fff; } .mb .mb-combo-list .custom { color: var(--mb-muted); font-weight: 500; } .mb .mb-combo-list .custom b { color: #fff; } .mb .mb-lay-hint { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .mb .mb-lay-hint .mb-pair { background: rgba(34, 211, 238, .05); border-color: rgba(34, 211, 238, .16); } .mb .mb-lay-hint .mb-pair strong { font-size: 1.1rem; } .mb .mb-settle-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 520px) { .mb .mb-settle-choice { grid-template-columns: 1fr; } } .mb .mb-settle-choice button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 1px solid var(--mb-line-2); border-radius: 16px; background: rgba(255, 255, 255, .03); color: #fff; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s var(--mb-ease); } .mb .mb-settle-choice button:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .25); } .mb .mb-settle-choice button b { font-size: 15px; } .mb .mb-settle-choice button small { color: var(--mb-muted); font-size: 12.5px; } .mb .mb-settle-choice button .i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; } .mb .mb-settle-choice [data-outcome="won"] .i { background: rgba(52, 211, 153, .14); color: var(--mb-pos); } .mb .mb-settle-choice [data-outcome="lost"] .i { background: rgba(59, 130, 246, .16); color: #93c5fd; } .mb .mb-settle-choice [data-outcome="void"] .i { background: rgba(255, 255, 255, .08); color: #d4d4d8; } .mb .mb-settle-choice button[aria-pressed="true"] { border-color: rgba(34, 211, 238, .6); background: rgba(34, 211, 238, .08); box-shadow: 0 0 0 3px rgba(34, 211, 238, .12); } .mb .mb-settle-preview { margin-top: 16px; } .mb .mb-settle-preview .row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--mb-line); color: var(--mb-muted); font-size: 14px; } .mb .mb-settle-preview .row strong { font-family: var(--mb-mono); color: #fff; } .mb .mb-settle-preview .row.total { border-bottom: 0; color: #fff; font-weight: 700; } .mb .mb-settle-preview .row.total strong { font-size: 1.15rem; } .mb .mb-settle-preview .row strong.pos { color: var(--mb-pos); } .mb .mb-settle-preview .row strong.neg { color: var(--mb-neg); } @media (max-width: 560px) { .mb .mb-table { font-size: 13px; } .mb .mb-table th, .mb .mb-table td { padding: 10px 9px; } .mb .mb-table th { font-size: 10.5px; letter-spacing: .06em; } } .mb .mb-panel-head .mb-link { white-space: nowrap; }