/* ========================================================================== NapBet — design system Monochrome brand (from the logo). Color is reserved for market data: green = YES, red = NO. Nothing else competes for attention. ========================================================================== */ /* --- Tokens ------------------------------------------------------------- */ :root { /* Surfaces, dark-first */ --bg: #050506; --bg-elev: #0b0c0e; --surface: #121316; --surface-2: #1a1c20; --surface-3: #22252a; --border: #24262b; --border-strong: #35383f; /* Type */ --text: #f2f3f5; --text-dim: #9ca1aa; --text-faint: #6b7079; /* Brand — white "NAP" / silver "BET" */ --brand: #ffffff; --brand-dim: #9aa0a6; /* Market data */ --yes: #2ecc77; --yes-soft: rgba(46, 204, 119, 0.12); --yes-line: rgba(46, 204, 119, 0.35); --no: #ff5265; --no-soft: rgba(255, 82, 101, 0.12); --no-line: rgba(255, 82, 101, 0.35); /* Status */ --warn: #f0b429; --warn-soft: rgba(240, 180, 41, 0.12); --info: #4d9fff; --info-soft: rgba(77, 159, 255, 0.12); /* Shape + motion */ --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --header-h: 60px; /* Page side padding. Named so the safe-area rule below can widen it on a notched phone without guessing at the value. */ --gutter: 20px; --maxw: 1240px; --maxw-narrow: 720px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; color-scheme: dark; } /* Light theme. Opt-in via ; the header toggle sets it. */ :root[data-theme="light"] { --bg: #ffffff; --bg-elev: #f7f8f9; --surface: #ffffff; --surface-2: #f2f3f5; --surface-3: #e7e9ec; --border: #e2e4e8; --border-strong: #c9ccd2; --text: #0b0c0e; --text-dim: #5d6269; --text-faint: #878c94; --brand: #000000; --brand-dim: #6b7079; --yes: #17a45c; --yes-soft: rgba(23, 164, 92, 0.10); --yes-line: rgba(23, 164, 92, 0.30); --no: #dc2b40; --no-soft: rgba(220, 43, 64, 0.10); --no-line: rgba(220, 43, 64, 0.30); --shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.06); --shadow: 0 4px 16px rgba(16, 20, 28, 0.08); --shadow-lg: 0 16px 48px rgba(16, 20, 28, 0.12); color-scheme: light; } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { min-height: 100vh; /* Column flex so .site-footer{margin-top:auto} pins short pages to the bottom */ display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: rgba(255, 255, 255, 0.16); } :root[data-theme="light"] ::selection { background: rgba(0, 0, 0, 0.10); } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* --- Typography --------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; } h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); } h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); } h3 { font-size: 1.125rem; } h4 { font-size: 0.95rem; } p { color: var(--text-dim); } b, strong { font-weight: 600; color: var(--text); } small { font-size: 0.8125rem; } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .lede { font-size: 1.0625rem; color: var(--text-dim); max-width: 60ch; } .link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color 0.15s var(--ease); } .link:hover { text-decoration-color: var(--text); } .text-dim { color: var(--text-dim); } .text-faint { color: var(--text-faint); } .text-yes { color: var(--yes); } .text-no { color: var(--no); } .prose { max-width: 68ch; } .prose h2 { margin-top: 36px; margin-bottom: 10px; } .prose h3 { margin-top: 26px; margin-bottom: 8px; } .prose p { margin-bottom: 14px; } .prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; color: var(--text-dim); } .prose li { margin-bottom: 7px; } .prose li::marker { color: var(--text-faint); } /* --- Layout primitives -------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--maxw-narrow); } .page { padding-block: 32px 72px; } .page-head { margin-bottom: 24px; } .page-head h1 { margin-bottom: 6px; } .stack > * + * { margin-top: var(--gap, 16px); } .row { display: flex; align-items: center; gap: var(--gap, 12px); } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .spacer { flex: 1; } .grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .divider { height: 1px; background: var(--border); border: 0; } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); } .site-header__inner { height: 100%; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { height: 19px; width: auto; } :root[data-theme="light"] .brand img { filter: invert(1); } .nav { display: flex; align-items: center; gap: 2px; } .nav a { padding: 7px 12px; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 500; color: var(--text-dim); transition: color 0.15s var(--ease), background 0.15s var(--ease); } .nav a:hover { color: var(--text); background: var(--surface-2); } .nav a[aria-current="page"] { color: var(--text); font-weight: 600; } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .balance-chip { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .balance-chip small { color: var(--text-faint); font-size: 0.6875rem; } .avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 650; overflow: hidden; padding: 0; flex-shrink: 0; transition: border-color 0.15s var(--ease); } .avatar:hover { border-color: var(--border-strong); } /* Photo avatars fill the circle; the initials badge is the fallback. Positioned absolutely rather than sized at 100%: the button centres its content with place-items, which sizes a grid child to its content instead of stretching it, and the image ends up squashed to its intrinsic ratio. */ .avatar { position: relative; } .avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .menu__head--row { display: flex; align-items: center; gap: 10px; } .menu__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } .icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-dim); transition: color 0.15s var(--ease), background 0.15s var(--ease); } .icon-btn:hover { color: var(--text); background: var(--surface-2); } /* Account dropdown */ .menu { position: relative; } .menu__panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 204px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s; } .menu[data-open="true"] .menu__panel { opacity: 1; visibility: visible; transform: none; } .menu__panel a, .menu__panel button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); font-size: 0.875rem; color: var(--text-dim); } .menu__panel a:hover, .menu__panel button:hover { background: var(--surface-2); color: var(--text); } .menu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .menu__head strong { display: block; font-size: 0.875rem; } .menu__head span { font-size: 0.75rem; color: var(--text-faint); } .nav-toggle { display: none; } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), opacity 0.15s var(--ease); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn--primary { background: var(--brand); color: var(--bg); } .btn--primary:hover:not(:disabled) { background: var(--brand-dim); } .btn--ghost { border-color: var(--border-strong); color: var(--text); } .btn--ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-faint); } .btn--quiet { color: var(--text-dim); } .btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } .btn--yes { background: var(--yes-soft); color: var(--yes); border-color: var(--yes-line); } .btn--yes:hover:not(:disabled) { background: var(--yes); color: #05130b; } .btn--no { background: var(--no-soft); color: var(--no); border-color: var(--no-line); } .btn--no:hover:not(:disabled) { background: var(--no); color: #1a0409; } .btn--danger { background: var(--no-soft); color: var(--no); border-color: var(--no-line); } .btn--danger:hover:not(:disabled) { background: var(--no); color: #1a0409; } .btn--lg { padding: 12px 22px; font-size: 0.9375rem; } .btn--sm { padding: 6px 11px; font-size: 0.8125rem; } .btn--block { display: flex; width: 100%; } /* --- Forms -------------------------------------------------------------- */ .field { display: block; } .field + .field { margin-top: 16px; } .field > label, .label { display: block; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 550; color: var(--text-dim); } .input, .select, .textarea { width: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 0.9375rem; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--text-faint); background: var(--bg-elev); } .textarea { resize: vertical; min-height: 92px; line-height: 1.5; } .select { appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; } .input-group { position: relative; display: flex; align-items: center; } .input-group .input { padding-left: 28px; } .input-group__prefix { position: absolute; left: 12px; color: var(--text-faint); font-size: 0.9375rem; pointer-events: none; } .field__hint { margin-top: 6px; font-size: 0.75rem; color: var(--text-faint); } .field__error { margin-top: 6px; font-size: 0.75rem; color: var(--no); } .field[data-invalid="true"] .input, .field[data-invalid="true"] .select, .field[data-invalid="true"] .textarea { border-color: var(--no); } .check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--text-dim); cursor: pointer; } .check input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); cursor: pointer; } :root[data-theme="light"] .check input[type="checkbox"] { accent-color: #000; } /* Segmented control */ .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .segmented button { padding: 5px 12px; border-radius: 5px; font-size: 0.8125rem; font-weight: 550; color: var(--text-dim); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .segmented button:hover { color: var(--text); } .segmented button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); } /* --- Cards -------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; } .card--pad-lg { padding: 24px; } .card--flush { padding: 0; overflow: hidden; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card__head h3 { font-size: 0.9375rem; font-weight: 600; } /* --- Badges ------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); font-size: 0.6875rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .badge--yes { background: var(--yes-soft); color: var(--yes); border-color: var(--yes-line); } .badge--no { background: var(--no-soft); color: var(--no); border-color: var(--no-line); } .badge--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dot--pulse { animation: pulse 2s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* --- Market card -------------------------------------------------------- */ .market-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease); } .market-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); } .market-card__top { display: flex; align-items: center; gap: 8px; } .market-card__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; /* Keep every card's headline block the same height so the grid stays even */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.15em; } .market-card a.market-card__title:hover { color: var(--brand-dim); } .market-card__odds { display: flex; align-items: baseline; gap: 8px; } .market-card__pct { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; } .market-card__move { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; } .market-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .market-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Probability bar */ .prob-bar { position: relative; height: 5px; border-radius: 99px; background: var(--no-soft); overflow: hidden; } .prob-bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--yes); border-radius: 99px; transition: width 0.4s var(--ease); } /* --- Tables ------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; } table.data th { padding: 10px 14px; text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); white-space: nowrap; } table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background 0.12s var(--ease); } table.data tbody tr:hover { background: var(--surface-2); } table.data .align-right { text-align: right; } /* --- Empty / loading states --------------------------------------------- */ .empty { padding: 56px 24px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r); color: var(--text-dim); } .empty h3 { margin-bottom: 6px; color: var(--text); } .empty p { margin-bottom: 18px; font-size: 0.875rem; } .skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* --- Toast -------------------------------------------------------------- */ .toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 10px; min-width: 260px; max-width: 380px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-lg); font-size: 0.875rem; pointer-events: auto; animation: toast-in 0.22s var(--ease); } .toast[data-leaving="true"] { animation: toast-out 0.18s var(--ease) forwards; } .toast__bar { width: 3px; align-self: stretch; border-radius: 99px; background: var(--text-faint); } .toast--success .toast__bar { background: var(--yes); } .toast--error .toast__bar { background: var(--no); } .toast--info .toast__bar { background: var(--info); } .toast strong { display: block; margin-bottom: 2px; } .toast span { color: var(--text-dim); font-size: 0.8125rem; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } } /* --- Footer ------------------------------------------------------------- */ .site-footer { margin-top: auto; padding: 48px 0 32px; border-top: 1px solid var(--border); background: var(--bg-elev); } .site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; margin-bottom: 32px; } .site-footer h4 { margin-bottom: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } .site-footer ul { list-style: none; padding: 0; display: grid; gap: 9px; } .site-footer ul a { font-size: 0.875rem; color: var(--text-dim); } .site-footer ul a:hover { color: var(--text); } .site-footer__brand img { height: 17px; margin-bottom: 12px; } :root[data-theme="light"] .site-footer__brand img { filter: invert(1); } .site-footer__brand p { font-size: 0.8125rem; max-width: 34ch; } .site-footer__legal { padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-faint); line-height: 1.7; } .site-footer__legal p + p { margin-top: 10px; } /* Age / jurisdiction notice */ .notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); font-size: 0.8125rem; color: var(--text-dim); } .notice__mark { flex-shrink: 0; color: var(--warn); } .notice--warn { background: var(--warn-soft); border-color: transparent; } .notice strong { color: var(--text); } /* --- Page layout: sidebar + main ---------------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .split__aside { position: sticky; top: calc(var(--header-h) + 24px); } /* Grid and flex children default to min-width:auto, which refuses to shrink below their content. Everything here is allowed to shrink and wrap. */ .split > *, .grid > * { min-width: 0; } /* --- Auth pages --------------------------------------------------------- */ .auth { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 1fr 1fr; } .auth__form-col { display: grid; place-items: center; padding: 48px 24px; } .auth__form { width: 100%; max-width: 380px; } .auth__form h1 { font-size: 1.75rem; margin-bottom: 6px; } .auth__form > p { font-size: 0.875rem; margin-bottom: 28px; } .auth__aside { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 48px; background: var(--bg-elev); border-left: 1px solid var(--border); } .auth__aside blockquote { font-size: 1.25rem; font-weight: 550; line-height: 1.45; letter-spacing: -0.02em; max-width: 24ch; } .auth__stat-row { display: grid; gap: 18px; } .auth__stat strong { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .auth__stat span { font-size: 0.8125rem; color: var(--text-faint); } .auth__divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 0.75rem; color: var(--text-faint); } .auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .strength { display: flex; gap: 4px; margin-top: 8px; } .strength__seg { flex: 1; height: 3px; border-radius: 99px; background: var(--surface-3); transition: background 0.2s var(--ease); } .strength__seg[data-on="1"] { background: var(--no); } .strength__seg[data-on="2"] { background: var(--warn); } .strength__seg[data-on="3"] { background: var(--yes); } /* --- Utilities ---------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -60px; left: 20px; z-index: 100; padding: 10px 16px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 0.875rem; transition: top 0.15s var(--ease); } .skip-link:focus { top: 12px; } .hide { display: none !important; } .mt-0 { margin-top: 0 !important; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 1000px) { /* minmax(0, 1fr), not 1fr. A bare 1fr is minmax(auto, 1fr), and `auto` as a minimum means min-content — so one wide child, an unbreakable wallet address in this case, pushes the track wider than the grid itself and the whole page scrolls sideways. The wallet was 70px over at 393px. */ .split { grid-template-columns: minmax(0, 1fr); } .split__aside { position: static; } .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } .auth { grid-template-columns: 1fr; } .auth__aside { display: none; } } @media (max-width: 820px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Header collapses into a slide-down panel */ .nav-toggle { display: grid; } .site-header__inner { gap: 12px; } .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); display: none; } .nav[data-open="true"] { display: flex; } .nav a { padding: 11px 12px; font-size: 0.9375rem; } .balance-chip { display: none; } } @media (max-width: 560px) { /* Same reason as .split above: a bare 1fr can be pushed past its container. */ .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .site-footer__grid { grid-template-columns: 1fr; } .page { padding-block: 24px 48px; } .container { padding-inline: 16px; } .toast-host { left: 16px; right: 16px; bottom: 16px; } .toast { min-width: 0; max-width: none; } } /* --- Print -------------------------------------------------------------- */ @media print { .site-header, .site-footer, .toast-host, .btn { display: none !important; } body { background: #fff; color: #000; } } /* --- Settlement receipt ------------------------------------------------- */ .receipt { /* A modal centres itself with the UA's margin:auto — which the `* { margin: 0 }` in the reset above wipes out, leaving it in the top-left corner. Put it back explicitly. */ margin: auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: visible; } .receipt::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); } .receipt__body { padding: 22px; max-height: calc(100vh - 48px); overflow-y: auto; } .receipt__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-faint); background: var(--surface); transition: color 0.15s var(--ease), background 0.15s var(--ease); } .receipt__close:hover { color: var(--text); background: var(--surface-2); } .receipt__card + .receipt__card { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .receipt__head { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 10px; } .receipt__question { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 14px; } .receipt__question:hover { color: var(--brand-dim); } .receipt__lines { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 0.8125rem; } .receipt__line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; } .receipt__line span { color: var(--text-dim); } .receipt__line--total { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.9375rem; } .receipt__when { margin-top: 10px; font-size: 0.6875rem; color: var(--text-faint); } /* A notice about something good, rather than something to watch out for. */ .notice--yes { background: var(--yes-soft); border-color: transparent; } .notice--yes .notice__mark { color: var(--yes); } /* ========================================================================== iOS / iPhone -------------------------------------------------------------------------- Almost everyone who uses this will be on an iPhone, in Safari, one-handed. These are the things iOS does differently rather than a general pass at "mobile" — the layout was already fluid and had no horizontal overflow at 393px before any of this. ========================================================================== */ /* --- 1. Stop Safari zooming when a field is focused ---------------------- iOS Safari zooms the page in whenever you tap an input whose font is under 16px, and it does not zoom back out. Every field here was 15px, so tapping any of them — signing up, entering an amount, pasting a transaction hash — left the page magnified and scrolled sideways. Applied on coarse pointers only: 15px is the right size with a mouse, and this is not a visual preference, it is working around a specific behaviour of touch Safari. */ @media (pointer: coarse) { .input, .select, .textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="datetime-local"], select, textarea { font-size: 16px; } .input-group__prefix { font-size: 16px; } } /* --- 2. Touch targets --------------------------------------------------- Apple's guidance is 44pt square, and the buttons here were 30-36px tall. The Yes/No pair on a market card is the main thing anyone taps, and it was among the smallest. Height only, and only on touch: widening buttons would wreck rows that are laid out to fit, and on a mouse 36px is comfortable. */ @media (pointer: coarse) { .btn, .icon-btn, .segmented button, .method-switch__btn, .tabs button, .chip, /* The amount presets on the trade ticket and the wallet. Unstyled buttons at 33px, and they are how a bet size actually gets picked — the most tapped control on the page after Yes/No. */ .ticket__presets button { min-height: 44px; } /* A range input gets its height from the thumb and its padding, so the min-height above does nothing for it. The cash-out slider is dragged with a thumb on a phone and was 30px. */ input[type="range"] { min-height: 44px; padding-block: 18px; } .btn--sm { min-height: 40px; } /* secondary, and never the only way through */ .input, .select, .textarea { min-height: 44px; } /* Small icon-only controls get their target from padding rather than size, so the icon stays the size it was. */ .invite-bar__close, .receipt__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* --- 3. Tapping should feel immediate ------------------------------------ `touch-action: manipulation` drops the 300ms wait Safari keeps in case a tap turns into a double-tap zoom. The grey flash that iOS paints over anything tappable goes with it, replaced by a real pressed state — without a replacement the button would give no feedback at all. */ a, button, .btn, .icon-btn, [role="button"], label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } @media (pointer: coarse) { .btn:active, .icon-btn:active, .chip:active { transform: scale(0.97); opacity: 0.9; } /* Hover states never un-stick on touch, so they are not applied there. */ .btn:hover:not(:active) { transform: none; } } /* --- 4. The notch, the corners and the home indicator -------------------- With viewport-fit=cover the page fills the whole screen, which is what makes the top blend into the status bar — but it also means content can sit under the rounded corners in landscape and under the home indicator at the bottom. env() insets are 0 on every device that does not have them. */ .container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .site-header { padding-top: env(safe-area-inset-top); } .site-header { height: calc(var(--header-h) + env(safe-area-inset-top)); } .site-footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); } .toast-host { padding-bottom: env(safe-area-inset-bottom); } /* Anchored links land under the sticky header otherwise — /wallet#invite would put the card's heading behind it. */ [id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top) + 12px); } /* --- 5. Viewport height -------------------------------------------------- 100vh on iOS Safari means the height with the address bar hidden, which is taller than what you can actually see. Anything sized to it overflows by the height of the bar. dvh is the real, current height; the 100vh line stays first as the fallback for anything that does not support it. */ body { min-height: 100vh; min-height: 100dvh; } /* --- 6. Scrolling -------------------------------------------------------- Keeps a scroll that reaches the end of a panel from turning into a pull-to-refresh or a bounce of the whole page behind it. */ body { overscroll-behavior-y: contain; } .receipt, .menu__panel { overscroll-behavior: contain; } /* --- 7. Safari autofill -------------------------------------------------- Safari paints its own background on an autofilled field, which on a dark theme comes out white-on-white. There is no property to turn it off; the long inset shadow is the way it is done. */ .input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); } /* --- 8. Selection -------------------------------------------------------- Long-pressing a button on iOS starts a text selection and pops the magnifier. Content stays selectable; controls do not. */ .btn, .icon-btn, .chip, .badge, .segmented button, .nav a, .invite-bar__close { -webkit-user-select: none; user-select: none; } /* Except the things people genuinely need to copy off a phone. */ .address-box span, .mono, code { -webkit-user-select: all; user-select: all; }