/* ========================================================================= TickTopBid — global stylesheet Mobile-first "arena/competition" theme: dark background, gold accents, bold typography for ranks and money values. No TikTok cyan/pink/notes. ========================================================================= */ :root { --bg: #0b0b0f; --bg-elevated: #151520; --bg-elevated-2: #1c1c2a; --border: #2a2a3a; --text: #f4f3ee; --text-dim: #b8b7c4; --text-faint: #7c7b8a; --gold: #e8b64a; --gold-bright: #ffd36e; --silver: #c7cbd1; --bronze: #c9793f; --success: #4ade80; --danger: #f66; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-gold: 0 0 0 1px rgba(232, 182, 74, 0.35), 0 8px 24px rgba(232, 182, 74, 0.12); --font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --header-h: 64px; --mobile-cta-h: 64px; } * { box-sizing: border-box; } /* Several elements toggle visibility via the `hidden` attribute from JS (tabs, the category chip bar, error/empty states). Because those same elements also have an author `display` rule (flex/grid/etc.), that rule would otherwise win over the browser's default [hidden] styling — so we force it explicitly here. */ [hidden] { display: none !important; } html { color-scheme: dark; } body { position: relative; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ---------- Background styles ---------- Controlled by SITE_CONFIG.backgroundStyle in config.js, applied as data-bg="..." on by js/background.js. Pure CSS gradients + one tiny inline SVG noise texture — no external images, no animation. The layer lives on body::before, positioned absolutely (so it scrolls with the page and fades out lower down, not fixed to the viewport) and sits at z-index: -1, fully behind every element — text contrast is never affected regardless of which style is active. Options: "spotlight" | "grid" | "grain" | "spotlight-grain" */ body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* spotlight: soft gold glow behind the hero/podium, fading to black */ html[data-bg="spotlight"] body::before { background-image: radial-gradient( ellipse 900px 620px at 50% -60px, rgba(232, 182, 74, 0.18) 0%, rgba(232, 182, 74, 0.07) 40%, transparent 72% ); background-repeat: no-repeat; } /* grid: faint line grid, fading out at the edges and further down */ html[data-bg="grid"] body::before { background-image: repeating-linear-gradient(to right, rgba(244, 243, 238, 0.06) 0 1px, transparent 1px 40px), repeating-linear-gradient(to bottom, rgba(244, 243, 238, 0.06) 0 1px, transparent 1px 40px); background-repeat: repeat; -webkit-mask-image: radial-gradient(ellipse 900px 720px at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 900px 720px at 50% 0%, #000 0%, transparent 75%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* grain: subtle noise texture (inline SVG feTurbulence, tiled) */ html[data-bg="grain"] body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* spotlight-grain: both layers together, one rule so they compose instead of one overriding the other */ html[data-bg="spotlight-grain"] body::before { background-image: radial-gradient( ellipse 900px 620px at 50% -60px, rgba(232, 182, 74, 0.18) 0%, rgba(232, 182, 74, 0.07) 40%, transparent 72% ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: no-repeat, repeat; } img { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; } .container { max-width: 1080px; margin: 0 auto; padding: 0 16px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: 8px; background: var(--gold); color: #000; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 1000; font-weight: 700; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } :focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 20px; border-radius: var(--radius-sm); border: none; font-weight: 700; font-size: 0.95rem; cursor: pointer; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; min-height: 44px; } .btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1300; box-shadow: var(--shadow-gold); } .btn-primary:hover { filter: brightness(1.07); } .btn-secondary { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--gold); } .btn-watch { background: var(--bg-elevated-2); color: var(--gold-bright); border: 1px solid var(--border); padding: 8px 14px; font-size: 0.85rem; border-radius: 999px; white-space: nowrap; } .btn-block { width: 100%; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: rgba(11, 11, 15, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .logo { display: inline-flex; align-items: center; gap: 0.08em; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; color: var(--text); } .logo span { color: var(--gold-bright); } /* The gold checkmark in the header logo — SVG only, sized off the logo's own font-size so it scales with it. This mark is only ever used here, never next to account names elsewhere on the site. */ .logo-check { width: 0.8em; height: 0.8em; flex: 0 0 auto; } .logo-check path { fill: none; stroke: var(--gold-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .header-links { display: flex; align-items: center; gap: 20px; } .header-how { display: inline-block; text-decoration: none; color: var(--text-dim); font-weight: 600; font-size: 0.85rem; } .header-cta { display: none; } @media (min-width: 720px) { .header-how { font-size: 0.9rem; } .header-cta { display: inline-flex; } } /* Mobile fixed bottom CTA */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 11, 15, 0.95); border-top: 1px solid var(--border); backdrop-filter: blur(8px); } @media (min-width: 720px) { .mobile-cta { display: none; } body { padding-bottom: 0 !important; } } body { padding-bottom: calc(var(--mobile-cta-h) + 8px); } /* ---------- Hero ---------- */ .hero { /* Longhand: see the note on .podium-section — this element also carries .container, whose side padding a shorthand `padding` here would erase. */ padding-top: 40px; padding-bottom: 24px; text-align: center; } .hero-tagline { font-size: 1.1rem; color: var(--text-dim); max-width: 32ch; margin: 0 auto 20px; } .hero-price-card { display: inline-flex; flex-direction: column; gap: 4px; padding: 18px 28px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-gold); text-decoration: none; color: inherit; cursor: pointer; } .hero-price-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700; } .hero-price-value-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; } .hero-price-value { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3rem); font-weight: 900; color: var(--gold-bright); line-height: 1; } .hero-price-value #take-first-price { color: var(--gold-bright); } .hero-price-arrow { display: none; font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--gold-bright); } /* ---------- Hero claim bar ---------- */ .hero-claim-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 420px; margin: 18px auto 0; padding: 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* Shared "boxed input with a fixed prefix" look — the hero @username and $ amount fields, plus the join/climb @username fields, all use this so the user never has to type the @ or $ themselves. The gold focus outline lands on the wrapper (:focus-within) since the real input itself is borderless. */ .at-input-wrap { display: flex; align-items: center; gap: 4px; padding: 0 14px; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); } .at-input-wrap:focus-within { border-color: var(--gold); } .at-input-wrap .at-prefix { color: var(--text-faint); font-weight: 700; font-size: 0.95rem; } .at-input-wrap input { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 0; color: var(--text); font-size: 0.95rem; } .at-input-wrap input:focus { outline: none; } /* Error text under a field: always rendered (never `hidden`), with its height reserved via min-height, so showing or hiding it never shifts the layout above or below it — only the text's own visibility toggles. */ .field-error { margin: 0; min-height: 14px; font-size: 0.75rem; font-weight: 700; line-height: 1.1; color: var(--danger); visibility: hidden; } .field-error.is-visible { visibility: visible; } /* Transparent by default (both current breakpoints): its two children stay direct flex items of .hero-claim-bar, exactly as if this wrapper didn't exist. Only the mobile-only block below turns it into a real row, so desktop's layout is completely unaffected. */ .hero-fields-row { display: contents; } .hero-username-field { display: flex; flex-direction: column; gap: 4px; } /* Amount field: a visible "Any amount" label + the boxed $ input. */ .hero-amount-field { display: flex; flex-direction: column; gap: 4px; } .hero-amount-label { font-size: 0.72rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; } .hero-claim-bar .hero-claim-preview { text-align: center; margin: 0; } .hero-claim-btn { width: 100%; } /* Quick-amount shortcuts: small, muted pills — a subtle convenience, not a row of casino chips. Only the active one (matching the amount field) gets a soft gold outline. */ .hero-quick-picks { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; } .hero-quick-picks-label { font-size: 0.72rem; font-weight: 600; color: var(--text-faint); white-space: nowrap; } .hero-amount-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .hero-amount-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text-dim); font-size: 0.78rem; font-weight: 700; cursor: pointer; } .hero-amount-chip:hover { border-color: var(--gold); color: var(--text); } .hero-amount-chip.is-active { border-color: var(--gold); color: var(--gold-bright); background: rgba(232, 182, 74, 0.12); } @media (min-width: 720px) { .hero { padding: 64px 0 36px; } .hero-claim-bar { flex-direction: row; flex-wrap: wrap; max-width: 620px; align-items: flex-end; } .hero-username-field { flex: 1 1 200px; } .hero-amount-field { flex: 0 1 150px; } .hero-claim-btn { width: auto; flex: 0 0 auto; /* The row bottom-aligns fields by their full box, which now includes the reserved (usually invisible) error line below each input. This margin gives the button the same trailing space so its own bottom still lines up with the actual input boxes, not the empty error line beneath them. */ margin-bottom: 18px; } .hero-quick-picks { flex: 1 1 100%; order: 2; justify-content: flex-start; } .hero-claim-preview { flex: 1 1 100%; order: 3; } } /* ---------- Podium ---------- */ .podium-section { /* Longhand on purpose: this element also has the .container class, whose `padding: 0 16px` supplies the left/right margin. A shorthand `padding` here (same specificity, later in the file) would zero that out and make the podium touch the screen edges — see the mobile override below too. */ padding-top: 8px; padding-bottom: 32px; } /* Empty board: the message card is much shorter than a real 3-card podium, so the section's own top/bottom padding (sized for that taller podium) would leave an oversized gap above and below it. */ .podium-section--empty { padding-top: 0; padding-bottom: 16px; } .podium { display: flex; flex-direction: column; gap: 16px; animation: podium-rise 0.6s ease both; } @keyframes podium-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .podium-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px 20px; background: var(--bg-elevated); border-radius: var(--radius-lg); border: 2px solid var(--border); cursor: pointer; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; width: 100%; } .podium-card:hover { transform: translateY(-4px); } .podium-gold { order: -1; border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232, 182, 74, 0.5), 0 12px 32px rgba(232, 182, 74, 0.18); } .podium-silver { border-color: var(--silver); } .podium-bronze { border-color: var(--bronze); } .podium-crown { position: absolute; top: -20px; font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } .podium-rank { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--text-faint); } .podium-gold .podium-rank { color: var(--gold-bright); font-size: 1.4rem; } .podium-username { font-weight: 700; font-size: 1rem; } .podium-total { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: var(--gold-bright); } /* Empty board: .podium's own layout rules (column on mobile, a named grid at narrower widths, a row on desktop — all built for 1-3 real cards) are overridden here so the lone message card just centers, regardless of breakpoint. Higher specificity than plain .podium wins over all of those, including the ones inside media queries below. */ .podium.podium--empty { display: flex; justify-content: center; } .empty-board-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 460px; padding: 30px 20px 22px; background: var(--bg-elevated); border-radius: var(--radius-lg); border: 2px solid var(--gold); box-shadow: 0 0 0 1px rgba(232, 182, 74, 0.5), 0 12px 32px rgba(232, 182, 74, 0.18); text-align: center; } .empty-board-title { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--gold-bright); margin: 6px 0 0; } .empty-board-subtitle { font-size: 0.85rem; color: var(--text-dim); margin: 0; max-width: 34ch; } @media (min-width: 720px) { .podium { flex-direction: row; align-items: flex-end; justify-content: center; gap: 20px; } .podium-card { width: 30%; } .podium-gold { order: 0; padding-top: 40px; padding-bottom: 32px; transform: scale(1.06); } .podium-silver { order: -1; } .podium-bronze { order: 1; } } /* ---------- Mobile-only adjustments (narrow screens) ---------- Everything in this block is scoped to max-width: 719px so the desktop layout above (min-width: 720px) is never touched. */ @media (max-width: 719px) { /* Hero: tighter vertical rhythm. The price card is no longer a tap target here — the claim bar right below it replaces that action. Trimmed further (padding, tagline, price card, claim bar) so the podium's #1 card is visible without scrolling on a typical phone (reference: iPhone 393x852). */ .hero { padding-top: 16px; padding-bottom: 8px; } .hero-tagline { margin-bottom: 10px; } .hero-price-card { padding: 10px 20px; gap: 2px; pointer-events: none; cursor: default; } .hero-price-value { font-size: clamp(1.6rem, 7vw, 2.2rem); } /* Claim bar: the @ and $ fields share one row (60/40) instead of stacking, and the quick-pick chips sit on a single scrollable row — together these are what actually save the vertical space, more than the padding/gap trims below. */ .hero-claim-bar { margin: 10px auto 0; padding: 10px; gap: 8px; } .hero-fields-row { display: flex; gap: 8px; align-items: flex-start; } .hero-username-field { flex: 3 1 0; min-width: 0; } .hero-amount-field { flex: 2 1 0; min-width: 0; } /* The label is replaced by the "Any amount" placeholder text set in main.js for narrow screens — kept in the DOM (not display:none) so the field still has an accessible name via its `for` attribute. */ .hero-amount-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hero-quick-picks-label { display: none; } .hero-quick-picks { justify-content: flex-start; } .hero-amount-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .hero-amount-chip { flex: 0 0 auto; padding: 4px 10px; font-size: 0.72rem; } .hero-claim-btn { padding: 10px 20px; } /* Podium: #1 stays full-width on top; #2 and #3 sit side by side below it, each at half width and more compact. */ .podium-section { padding-top: 4px; padding-bottom: 24px; } .podium-section--empty { padding-top: 0; padding-bottom: 12px; } .empty-board-card { padding: 24px 16px 18px; } .podium { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "gold gold" "silver bronze"; gap: 10px; } .podium-gold { grid-area: gold; padding: 16px 16px 14px; } .podium-silver { grid-area: silver; } .podium-bronze { grid-area: bronze; } .podium-silver, .podium-bronze { padding: 12px 8px 10px; gap: 6px; } .podium-silver .avatar-lg, .podium-bronze .avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; } .podium-silver .podium-rank, .podium-bronze .podium-rank { font-size: 0.9rem; } .podium-silver .podium-username, .podium-bronze .podium-username { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; } .podium-silver .podium-total, .podium-bronze .podium-total { font-size: 1rem; } .podium-silver .mini-badge-founding, .podium-bronze .mini-badge-founding { font-size: 0.62rem; } } /* ---------- Avatars ---------- */ .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; color: #fff; font-weight: 800; } .avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .avatar-fallback { position: relative; z-index: 1; } .avatar-sm { width: 36px; height: 36px; font-size: 0.9rem; } .avatar-md { width: 48px; height: 48px; font-size: 1.1rem; } .avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; } .avatar-xl { width: 96px; height: 96px; font-size: 2rem; } /* ---------- Content layout: activity sidebar + main list ---------- */ .content-layout { display: block; } @media (min-width: 860px) { .content-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } /* Empty board: the activity sidebar is hidden ([hidden] removes it from the grid entirely), so the list would otherwise be auto-placed into the now-vacant 280px column instead of spanning full width. */ .content-layout.content-layout--no-activity { grid-template-columns: 1fr; } } /* ---------- Activity ---------- */ .activity-section { padding: 8px 0 24px; } .section-heading { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; margin: 0 0 12px; } .activity-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .activity-item { scroll-snap-align: start; flex: 0 0 auto; min-width: 220px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: left; cursor: pointer; color: var(--text); } .activity-item:hover { border-color: var(--gold); } .activity-text { font-size: 0.88rem; font-weight: 600; } .activity-time { font-size: 0.75rem; color: var(--text-faint); } @media (min-width: 860px) { .activity-list { flex-direction: column; overflow-x: visible; } .activity-item { min-width: 0; } } /* ---------- Filters ---------- */ .filters { padding: 4px 0 16px; display: flex; flex-direction: column; gap: 14px; } .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .chip { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-dim); font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .chip-active { background: var(--gold); color: #1a1300; border-color: var(--gold); } /* "More" button + dropdown for category chips beyond visibleCategoryChips. The menu is a sibling of .chips (not nested inside it), positioned absolutely against .chips-row, so it isn't clipped by .chips' own horizontal scrollbar (overflow-x: auto would otherwise cut it off). */ .chips-row { position: relative; } .chip-more { display: inline-flex; align-items: center; gap: 4px; } .chip-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 170px; max-height: 260px; overflow-y: auto; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } .chip-more-item { padding: 8px 10px; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-dim); font-weight: 700; font-size: 0.85rem; text-align: left; cursor: pointer; } .chip-more-item:hover { background: var(--bg-elevated-2); color: var(--text); } .chip-more-item.chip-active { background: var(--gold); color: #1a1300; } .search-field { position: relative; } .search-field input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 0.95rem; min-height: 44px; } .search-field input:focus { border-color: var(--gold); } /* ---------- List ---------- */ .list-section { padding-bottom: 40px; } .account-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .list-row { display: grid; /* rank | avatar | main (username + meta) | total | watch icon */ grid-template-columns: 30px 36px 1fr auto auto; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; } .list-row:hover { border-color: var(--gold); transform: translateY(-1px); } .list-rank { font-family: var(--font-display); font-weight: 900; color: var(--text-faint); text-align: center; font-size: 0.85rem; } .list-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .list-username { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-meta { display: flex; align-items: center; gap: 6px; min-width: 0; } .list-meta-category { font-size: 0.72rem; color: var(--text-faint); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-badge-founding { flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; color: var(--gold-bright); white-space: nowrap; } /* Desktop-only: category pill(s) (+ mini founding badge) as their own column. Capped with max-width (wrap + per-chip ellipsis) so an account with two long category names can never grow this column enough to squeeze the username column into truncating — that column is capped, not the username. */ .list-category-wrap { display: none; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 220px; } .list-category { --chip-color: var(--gold); display: inline-flex; max-width: 110px; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--chip-color) 22%, transparent); color: var(--chip-color); white-space: nowrap; } .list-total { font-family: var(--font-display); font-weight: 900; color: var(--gold-bright); white-space: nowrap; } /* Full-text watch button: desktop only. */ .list-watch-full { display: none; } /* Round icon-only watch button: mobile only. */ .list-watch-icon { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--gold-bright); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; cursor: pointer; } .list-watch-icon:hover { border-color: var(--gold); } @media (min-width: 720px) { .list-row { grid-template-columns: 40px 48px 1fr auto auto auto; padding: 10px 12px; } .list-rank { font-size: 1rem; } .list-meta { display: none; } .list-category-wrap { display: inline-flex; } .list-watch-full { display: inline-flex; } .list-watch-icon { display: none; } } .list-row--placeholder { display: flex; align-items: center; justify-content: center; min-height: 36px; /* matches avatar-sm, so the row height matches a real account row */ border-style: dashed; background: transparent; cursor: default; } .placeholder-link { display: block; width: 100%; text-decoration: none; color: var(--text-faint); font-weight: 700; font-size: 0.85rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .placeholder-link:hover { color: var(--gold); } /* Mobile only: show the first 3 "your account here" slots, not all 4. */ @media (max-width: 719px) { .list-row--placeholder:last-child { display: none; } } .empty-state { color: var(--text-faint); text-align: center; padding: 24px 0; } #no-results { color: var(--text-faint); text-align: center; padding: 24px 0; } #app-error { text-align: center; color: var(--danger); padding: 40px 16px; } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; padding: 0; } .modal-overlay[hidden] { display: none; } .modal-panel { position: relative; width: 100%; height: 100%; max-width: 480px; max-height: 100%; background: var(--bg-elevated); overflow-y: auto; padding: 20px; animation: modal-in 0.2s ease both; } @media (min-width: 620px) { .modal-panel { height: auto; max-height: 90vh; border-radius: var(--radius-lg); border: 1px solid var(--border); } } @keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .modal-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 1.2rem; cursor: pointer; } .modal-header { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-top: 20px; } .modal-username { font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--gold-bright); } .modal-category { display: block; color: var(--text-faint); font-size: 0.85rem; font-weight: 600; margin-top: 4px; } .modal-rank-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; } .modal-rank { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--text-faint); } .modal-total { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--gold-bright); } .modal-next { text-align: center; color: var(--text-dim); margin: 0 0 18px; } .modal-tiktok-btn { width: 100%; margin-bottom: 10px; } .modal-climb-btn { width: 100%; margin-bottom: 18px; } /* The direct-embed iframe fills 100% of this box, so the box needs a *definite* height of its own for that percentage to resolve — aspect- ratio gives it one while staying responsive: TikTok's vertical videos are close to 9:16, and 325px is the width TikTok's own player uses, so this lands in their usual tall-portrait range on both mobile and desktop. */ .modal-video { width: 100%; max-width: 325px; aspect-ratio: 9 / 16; margin: 0 auto 18px; background: var(--bg); border-radius: var(--radius-md); overflow: hidden; } .modal-video iframe { display: block; width: 100%; height: 100%; border: none; } .modal-video--unavailable { max-width: none; aspect-ratio: auto; min-height: 120px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-weight: 700; padding: 40px 0; } .modal-share-btn { width: 100%; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0 40px; color: var(--text-faint); font-size: 0.85rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; list-style: none; padding: 0; margin: 0 0 16px; } .footer-links a { text-decoration: none; color: var(--text-dim); } .footer-links a:hover { color: var(--gold); } .footer-disclaimer { margin: 0; } /* ---------- Simple/legal pages ---------- */ .page-hero { /* Longhand: see the note on .podium-section — this element also carries .container, whose side padding a shorthand `padding` here would erase. */ padding-top: 32px; padding-bottom: 8px; } .page-title { font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; margin: 0 0 8px; } .page-content { padding-top: 8px; padding-bottom: 48px; max-width: 70ch; } .page-content h2 { font-size: 1.2rem; margin-top: 28px; } .page-content p, .page-content li { color: var(--text-dim); } .draft-banner { background: rgba(246, 102, 102, 0.12); border: 1px solid var(--danger); color: #ffb3b3; font-weight: 700; padding: 10px 14px; border-radius: var(--radius-sm); margin: 16px 0; } /* ---------- How it works ---------- */ .how-it-works { padding-top: 8px; padding-bottom: 24px; } .steps { display: grid; gap: 14px; margin-top: 16px; } @media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; } .step-number { font-family: var(--font-display); color: var(--gold-bright); font-size: 1.6rem; font-weight: 900; } .step-card h3 { margin: 8px 0 4px; font-size: 1rem; } .step-card p { color: var(--text-dim); font-size: 0.9rem; margin: 0; } /* Mobile only: compact "How it works" into a tight list (number + title on one line, short description below) instead of tall cards, so the tabs and the start of the form fit on the first screen. */ @media (max-width: 719px) { .how-it-works { padding-bottom: 12px; } .steps { gap: 10px; margin-top: 10px; } .step-card { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; padding: 0; background: transparent; border: none; border-radius: 0; } .step-number { font-size: 0.95rem; } .step-card h3 { flex: 0 0 auto; margin: 0; font-size: 0.92rem; } .step-card p { flex: 1 1 100%; font-size: 0.8rem; } } /* ---------- Join form ---------- */ .join-form-section { padding-top: 8px; padding-bottom: 48px; } .form-shell { max-width: 520px; margin: 0 auto; } .join-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 22px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; } .join-tab { flex: 1 1 0; padding: 10px 12px; border: none; border-radius: 999px; background: transparent; color: var(--text-dim); font-weight: 700; font-size: 0.82rem; cursor: pointer; min-height: 44px; transition: background 0.12s ease, color 0.12s ease; } .join-tab-active { background: var(--gold); color: #1a1300; } .join-form { display: flex; flex-direction: column; gap: 18px; } .rank-preview { min-height: 1.4em; margin: -6px 0 0; font-weight: 700; color: var(--gold-bright); font-size: 0.9rem; } .link-button { background: none; border: none; padding: 0; margin: 0; color: var(--gold-bright); font-weight: 800; font-size: inherit; font-family: inherit; text-decoration: underline; cursor: pointer; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-weight: 700; font-size: 0.9rem; } .form-hint { font-size: 0.8rem; color: var(--text-faint); } .form-field input[type="text"], .form-field input[type="url"], .form-field input[type="email"], .form-field input[type="number"], .form-field select { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 0.95rem; min-height: 44px; } /* Hide native number-input spin arrows everywhere on the site (hero claim bar + join.html amount fields) — typing or using the quick-amount chips is the intended way to change these, not tiny up/down arrows. */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .form-field input:focus, .form-field select:focus { border-color: var(--gold); } /* The @username fields (join + climb) use the shared boxed-prefix look instead of a plain bordered input — override the generic input styling above (same specificity, but declared later) so the box, not the input itself, carries the border/background. */ .form-field .at-input-wrap { background: var(--bg-elevated); } .form-field .at-input-wrap input[type="text"] { border: none; background: transparent; padding: 12px 0; min-height: auto; } .image-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .image-upload .form-hint { overflow-wrap: anywhere; } .image-rules { margin: 4px 0 0; padding-left: 18px; font-size: 0.8rem; color: var(--text-faint); } .image-preview { display: none; margin-top: 8px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .checkbox-field { flex-direction: row; align-items: flex-start; gap: 10px; } .checkbox-field input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; } .checkbox-field label { font-weight: 500; font-size: 0.88rem; color: var(--text-dim); } .payment-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } @media (min-width: 480px) { .payment-buttons { flex-direction: row; } } #payment-notice { background: rgba(232, 182, 74, 0.12); border: 1px solid var(--gold); color: var(--gold-bright); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }