/* BidBio design system Light is the default. Dark is opt-in via the toggle, which sets data-theme="dark" on and remembers the choice. We deliberately do not auto-switch on prefers-color-scheme: a creator sends this link to their audience and needs to know which version they'll see. */ :root { --bg: #fbf9f7; --surface: #ffffff; --surface-2: #f6f2ef; --border: #ece3dd; --border-2: #dccfc7; --text: #0c0a09; --muted: #6d615c; --accent: #e03131; --accent-2: #c22525; --accent-bg: #fdecec; --info: #6d43e0; --info-bg: #f1ebff; --success: #b8860b; --success-bg:#fdf5e0; --warn: #b8860b; --warn-bg: #fdf5e0; --danger: #c22525; --shadow: 0 1px 2px rgba(40,20,16,.05), 0 8px 24px -12px rgba(40,20,16,.16); --shadow-lg: 0 2px 4px rgba(40,20,16,.05), 0 24px 48px -20px rgba(40,20,16,.24); /* Elevation is built from three layers: a hairline that reads as a lit top edge, a tight contact shadow, and a wide ambient one. Using a single blur is what makes a button look flat and printed-on. */ --lift: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(60,28,18,.10), 0 6px 14px -6px rgba(60,28,18,.20); --lift-hi: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(60,28,18,.10), 0 14px 28px -10px rgba(60,28,18,.26); --lift-accent: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(150,26,26,.30), 0 10px 22px -8px rgba(224,49,49,.50); --lift-accent-hi: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 5px rgba(150,26,26,.32), 0 18px 34px -10px rgba(224,49,49,.58); --sunken: inset 0 1px 2px rgba(60,28,18,.07); --glow: radial-gradient(60% 70% at 50% 0%, rgba(224,49,49,.16), transparent 72%); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; } [data-theme="dark"] { --bg: #0b0908; --surface: #16110f; --surface-2: #1f1815; --border: #2e2320; --border-2: #40312c; --text: #f5ece8; --muted: #a3948e; --accent: #ff5a5a; --accent-2: #ff7a7a; --accent-bg: #2c1212; --info: #9b7bff; --info-bg: #1e1636; --success: #f0b429; --success-bg:#2a2010; --warn: #f0b429; --warn-bg: #2a2010; --danger: #ff6b5c; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7); --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8); /* On dark the top edge is a faint light, not a white line. */ --lift: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5), 0 6px 14px -6px rgba(0,0,0,.6); --lift-hi: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.5), 0 14px 28px -10px rgba(0,0,0,.7); --lift-accent: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -8px rgba(255,90,90,.42); --lift-accent-hi: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 5px rgba(0,0,0,.5), 0 18px 36px -10px rgba(255,90,90,.55); --sunken: inset 0 1px 3px rgba(0,0,0,.5); --glow: radial-gradient(60% 70% at 50% 0%, rgba(255,90,90,.20), transparent 72%); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; transition: background .18s ease, color .18s ease; } a { color: inherit; text-decoration: none; } main { max-width: 1080px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-9); } /* Wide content scrolls inside its own box; the page body never scrolls sideways. */ body { overflow-x: hidden; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } h1, h2, h3 { letter-spacing: -.028em; margin: 0; } h1 { font-size: 30px; font-weight: 700; } h3 { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: var(--s-6) 0 var(--s-3); } small { color: var(--muted); } .muted { color: var(--muted); } .fine { color: var(--muted); font-size: 12.5px; line-height: 1.55; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* Typographic rule for the whole site: monospace = labels, numbers, meta, buttons — anything functional sans = headlines and prose — anything you read as a sentence Mixing them is the house style; using mono for prose would wreck it. */ --mono-stack: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; .mono, .metaline, .btn, button, .benefits span, .crow-price b, .crow-price small, .facet-val, .facet-head, .eyebrow, .rate, .price, .stats b, .half b, .rule .num { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; } .btn, button { letter-spacing: -.01em; font-weight: 600; } /* ---------------------------------------------------------------- nav */ .nav { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: var(--s-4); } .logo { font-weight: 800; font-size: 19px; letter-spacing: -.04em; } .logo span { color: var(--accent); } .nav nav { display: flex; align-items: center; gap: var(--s-5); } /* Scoped away from .btn: this rule is more specific than .btn, so without the :not() it repaints a nav CTA's label muted grey on the accent fill. */ .nav nav a:not(.btn) { color: var(--muted); font-size: 14px; font-weight: 500; } .nav nav a:not(.btn):hover { color: var(--text); } .theme-toggle { background: var(--surface); border: 1px solid var(--border); color: var(--muted); box-shadow: var(--lift); width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center; font-size: 14px; padding: 0; } .theme-toggle:hover { color: var(--text); border-color: var(--border-2); } footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 0 var(--s-4) var(--s-7); } /* ---------------------------------------------------------------- hero */ .hero { position: relative; text-align: center; padding: var(--s-5) 0 var(--s-5); } .hero .eyebrow { margin-bottom: var(--s-3); } /* Segments never break mid-phrase — "creators keep / 90%" reads as an error. */ .metaline { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; } .metaline span { white-space: nowrap; } .metaline b { color: var(--text); font-weight: 600; } .metaline .up { color: var(--success); } .hero::before { content: ''; position: absolute; inset: -140px 0 auto; height: 460px; background: var(--glow); pointer-events: none; z-index: -1; } .hero h1 { /* 700 not 800: against body text at 400, extra-bold reads as a different typeface rather than the same one emphasised. And -.038em tracking at 44px pushes letters into each other — -.022em is tight without cramping. */ font-size: clamp(28px, 4.1vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; max-width: 34ch; margin: 0 auto var(--s-3); /* Distribute lines evenly instead of leaving a runt on the last one. */ text-wrap: balance; hyphens: none; } /* Never break a hyphenated compound across lines — "social-/media" reads badly. */ .nowrap { white-space: nowrap; } .hero > p:not(.eyebrow):not(.metaline) { color: var(--muted); font-size: 15.5px; max-width: 58ch; margin: 0 auto var(--s-3); } .trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); } .trust span { font-size: 13px; color: var(--muted); font-weight: 500; } .trust span::before { content: '✓'; color: var(--success); margin-right: 6px; font-weight: 700; } .cta-row { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; } /* ---------------------------------------------------------------- buttons */ .btn, button { font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-md); padding: 11px 20px; color: #fff; background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); box-shadow: var(--lift-accent); transition: box-shadow .16s ease, transform .12s ease, background .16s ease; } .btn:hover, button:hover { transform: translateY(-1px); box-shadow: var(--lift-accent-hi); } /* Pressed: drop to the surface and lose the ambient layer, so it reads as physically pushed rather than just recoloured. */ .btn:active, button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(110,18,18,.45), 0 1px 1px rgba(60,28,18,.18); } .btn.ghost, button.ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); box-shadow: var(--lift); } .btn.ghost:hover, button.ghost:hover { border-color: var(--muted); box-shadow: var(--lift-hi); } .btn.ghost:active, button.ghost:active { box-shadow: var(--sunken); } .btn.lg { padding: 14px 26px; font-size: 15.5px; } .btn.sm { padding: 8px 15px; font-size: 13.5px; } button:disabled { opacity: .55; cursor: not-allowed; } /* ---------------------------------------------------------------- cards */ .grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-5); display: block; box-shadow: var(--shadow); transition: border-color .16s, transform .16s, box-shadow .16s; } .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .card-top { display: flex; gap: var(--s-3); align-items: center; } .card-top strong { display: block; font-weight: 650; font-size: 15.5px; } .ava { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 21px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); } .ava.big { width: 84px; height: 84px; font-size: 38px; border-radius: var(--r-2xl); margin: 0 auto var(--s-4); } .tag { color: var(--muted); margin: var(--s-3) 0; font-size: 14px; } .nets { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: 13px; color: var(--muted); } .nets.center { justify-content: center; margin-bottom: var(--s-5); } .nets a:hover { color: var(--text); } .tick { color: var(--success); font-style: normal; font-size: 11px; margin-left: 2px; } /* Stacked rather than side-by-side: in a narrow card these two phrases wrap into each other and read as one broken sentence. */ .card-foot { display: grid; gap: 3px; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); } .price { color: var(--success); font-weight: 600; } /* ---------------------------------------------------------------- bio page */ .bio { width: 100%; max-width: 470px; margin: 0 auto; text-align: center; } .bio h1 { font-size: 24px; font-weight: 700; } .flash { background: var(--success-bg); border: 1px solid var(--success); color: var(--success); border-radius: var(--r-md); padding: 11px 14px; font-size: 13.5px; margin-bottom: var(--s-5); text-align: left; font-weight: 500; } .slots { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-3); background: var(--surface); box-shadow: var(--shadow); } .slots-head { display: flex; justify-content: space-between; padding: 9px 14px; background: var(--surface-2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); } .slots-head span:last-child { text-transform: none; letter-spacing: 0; } .slot { display: flex; align-items: center; gap: var(--s-3); padding: 14px; text-align: left; transition: background .14s; } .slot + .slot, .slot.empty { border-top: 1px solid var(--border); } .slot:hover { background: var(--surface-2); } .slot .rank { color: var(--accent); font-weight: 700; font-size: 13px; width: 26px; flex: none; } .slot-body { flex: 1; min-width: 0; } .slot-body strong { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .slot-body small { font-size: 12.5px; } .rate { font-size: 13.5px; color: var(--success); white-space: nowrap; font-weight: 650; } .rate small { color: var(--muted); font-size: 11px; font-weight: 400; } .slot.empty { background: transparent; } .slot.empty .rank { color: var(--muted); } .slot.empty .rate { color: var(--accent); } .links { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); } .link { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; font-size: 14.5px; font-weight: 500; text-align: left; transition: border-color .14s, transform .14s; box-shadow: var(--shadow); } .link:hover { border-color: var(--border-2); transform: translateY(-1px); } .link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .aff { flex: none; font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 6px; margin-top: 2px; font-weight: 600; } .actions { display: flex; gap: var(--s-2); justify-content: center; } .queue { margin-top: var(--s-6); text-align: left; } .qrow { display: flex; gap: var(--s-3); align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; } .qrow span:first-child { color: var(--muted); width: 26px; } /* ---------------------------------------------------------------- panels */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--shadow); } .back { color: var(--muted); font-size: 13px; display: inline-block; margin-bottom: var(--s-3); } .back:hover { color: var(--text); } .prose p { color: var(--muted); max-width: 64ch; } .prose h3 { margin-top: var(--s-5); } /* ---------------------------------------------------------------- tables */ .ladder { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: var(--s-4) 0; } .ladder th { text-align: left; color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); } .ladder td { padding: 12px var(--s-3); border-bottom: 1px solid var(--border); } .ladder tr.live td:first-child { color: var(--accent); font-weight: 700; } .ladder tr.queued { opacity: .55; } /* ---------------------------------------------------------------- forms */ form { display: grid; gap: var(--s-3); margin-top: var(--s-2); } label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; } input, select { background: var(--bg); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--r-md); padding: 12px; font: inherit; font-size: 14.5px; box-shadow: var(--sunken); transition: border-color .16s, box-shadow .16s; } input:focus, select:focus { outline: 0; border-color: var(--accent); box-shadow: var(--sunken), 0 0 0 3px var(--accent-bg); } .err { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn); border-radius: var(--r-md); padding: 11px 14px; font-size: 13.5px; } /* ---------------------------------------------------------------- stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin: var(--s-4) 0; } .stats > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); } .stats b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; } .stats small { font-size: 11.5px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-3) 0; } .half { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); display: grid; gap: 5px; } .half-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .half b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; } .half b small { font-size: 13px; color: var(--muted); font-weight: 400; } .aff-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 7px; } .pend { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); margin-bottom: var(--s-2); font-size: 13.5px; } .pend small { display: inline-block; margin-top: 4px; word-break: break-all; } .pend-act { display: flex; gap: var(--s-2); flex: none; } .pend-act form { margin: 0; } .pend-act button { padding: 9px 14px; font-size: 13px; } .settle { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--s-3); } .settle button { flex: none; } /* ---------------------------------------------------------------- sections */ .section { padding: var(--s-7) 0; border-top: 1px solid var(--border); } .section > h2 { font-size: clamp(25px, 3.5vw, 37px); font-weight: 700; max-width: 22ch; margin-bottom: var(--s-3); text-wrap: balance; } .section > p.lede { color: var(--muted); font-size: 16.5px; max-width: 58ch; margin: 0 0 var(--s-5); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-5); box-shadow: var(--shadow); } .step .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: 13.5px; margin-bottom: var(--s-3); } .step h4 { margin: 0 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -.02em; } .step p { margin: 0; color: var(--muted); font-size: 14px; } .compare { width: 100%; border-collapse: collapse; font-size: 14px; } .compare th, .compare td { padding: 13px var(--s-3); border-bottom: 1px solid var(--border); text-align: left; } .compare th { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .compare td:not(:first-child) { text-align: center; width: 132px; } .compare .yes { color: var(--success); font-weight: 700; } .compare .no { color: var(--muted); } .faq { border-top: 1px solid var(--border); } .faq details { border-bottom: 1px solid var(--border); padding: var(--s-4) 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; float: right; color: var(--muted); font-weight: 400; } .faq details[open] summary::after { content: '\2212'; } .faq p { color: var(--muted); margin: var(--s-3) 0 0; max-width: 62ch; font-size: 14.5px; } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } .split, .steps { grid-template-columns: 1fr; } .pend { flex-direction: column; align-items: stretch; } .panel { padding: var(--s-4); } .compare td:not(:first-child) { width: 76px; } } /* Row-level outbid action: the price is precomputed so nobody has to do arithmetic to find out what one more place costs. */ .ladder .outbid { padding: 6px 11px; font-size: 12.5px; white-space: nowrap; } .ladder tr.queued .outbid { opacity: 1; } .pulse { display: flex; flex-wrap: wrap; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--s-4); } .pulse div { display: grid; gap: 2px; } .pulse b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; } .pulse span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } /* ---------------------------------------------------------------- editorial Two-column explainer: label + two-tone headline on the left, numbered rule cards on the right, inside a softly tinted container. */ .eyebrow { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin: 0 0 var(--s-4); } .display { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; font-feature-settings: "cv11"; line-height: 1.08; letter-spacing: -.038em; margin: 0 0 var(--s-4); text-wrap: balance; } .display em { font-style: normal; color: var(--accent); display: block; } .explainer { display: grid; grid-template-columns: minmax(270px, 1fr) 1.9fr; gap: var(--s-6); align-items: start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: clamp(24px, 4vw, 56px); position: relative; overflow: hidden; } .explainer::after { content: ''; position: absolute; top: -30%; right: -10%; width: 60%; height: 120%; background: radial-gradient(circle, var(--accent-bg), transparent 68%); pointer-events: none; opacity: .85; } .explainer > * { position: relative; z-index: 1; } .explainer .lede { color: var(--muted); font-size: 16px; max-width: 34ch; margin: 0; } .explainer .meta { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-6); } .rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .rule { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-5); display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-content: start; box-shadow: var(--shadow); } .rule .num { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-bg); border-radius: var(--r-sm); width: 30px; height: 30px; display: grid; place-items: center; } .rule h4 { margin: 4px 0 6px; font-size: 15px; text-wrap: balance; font-weight: 650; letter-spacing: -.02em; } .rule p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .rule > div { min-width: 0; } @media (max-width: 900px) { .explainer { grid-template-columns: 1fr; gap: var(--s-5); } .rules { grid-template-columns: 1fr; } } textarea { background: var(--bg); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--r-md); padding: 12px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 84px; } textarea { box-shadow: var(--sunken); } textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--sunken), 0 0 0 3px var(--accent-bg); } label .fine { font-weight: 400; margin-top: 2px; } /* Demo labelling. Invented followers and bids must never read as real proof. */ .demo-tag { margin-left: auto; align-self: flex-start; flex: none; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 5px; padding: 2px 7px; } .demo-banner { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn); border-radius: var(--r-md); padding: 11px 14px; font-size: 13px; text-align: left; margin-bottom: var(--s-4); line-height: 1.5; } .demo-banner b { font-weight: 700; } /* The single sentence the brand side rests on. */ .pull { font-size: clamp(20px, 2.6vw, 28px); font-weight: 650; letter-spacing: -.03em; line-height: 1.3; margin: var(--s-6) 0; padding-left: var(--s-4); border-left: 3px solid var(--accent); max-width: 26ch; } .step .n { font-size: 15px; } /* Category + platform filters */ .filterbar { display: flex; gap: var(--s-2); padding-bottom: var(--s-3); margin-bottom: var(--s-2); } .filter { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: border-color .14s, color .14s; } .filter:hover { color: var(--text); border-color: var(--border-2); } .filter.on { background: var(--accent); border-color: var(--accent); color: #fff; } .filter b { font-weight: 700; opacity: .55; font-size: 11.5px; } .filter.on b { opacity: .8; } /* Category picker: a dropdown that produces removable tags. */ .picker { display: grid; gap: 6px; } .picker > label { font-size: 13px; color: var(--muted); font-weight: 500; } select { background: var(--bg); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--r-md); padding: 12px; font: inherit; font-size: 14.5px; width: 100%; cursor: pointer; } select:disabled { opacity: .6; cursor: not-allowed; } .native-multi { margin-top: 6px; height: auto; } .chosen { display: flex; flex-wrap: wrap; gap: 6px; } .chosen:empty { display: none; } .chosen-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-bg); border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; } .chosen-tag button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; width: 18px; height: 18px; border-radius: 50%; font-size: 15px; line-height: 1; display: grid; place-items: center; opacity: .65; } .chosen-tag button:hover { opacity: 1; background: var(--accent); color: #fff; } /* Hero benefits: three distinct items, not one run-on line. */ /* Compact enough that the listings below stay above the fold at 100% zoom. */ .benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: 0 auto var(--s-4); } .benefits > div { display: flex; align-items: baseline; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; box-shadow: var(--lift); } .benefits span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .benefits b { font-size: 13px; font-weight: 500; color: var(--muted); } .deflist { font-size: 13.5px; color: var(--muted); margin: -8px 0 var(--s-4); } .deflist b { color: var(--text); font-weight: 650; } @media (max-width: 560px) { .benefits { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- discover Sidebar facets beside the results. Each row carries the cheapest entry price in that facet, which is the number a brand browsing inventory acts on. */ .discover { display: grid; grid-template-columns: 236px 1fr; gap: var(--s-6); align-items: start; } .discover-main { min-width: 0; } .facets { position: sticky; top: var(--s-4); display: grid; gap: 1px; } .facet-head { display: flex; justify-content: space-between; align-items: baseline; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); padding: 0 var(--s-3); } .facet-head a { color: var(--muted); letter-spacing: .08em; } .facet-head a:hover { color: var(--text); } .facet { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 8px var(--s-3); border-radius: var(--r-sm); font-size: 13.5px; color: var(--muted); transition: background .14s, color .14s; } .facet:hover { background: var(--surface-2); color: var(--text); } .facet.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .facet-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .facet-val { flex: none; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 11.5px; opacity: .8; } .discover .grid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); } @media (max-width: 860px) { .discover { grid-template-columns: 1fr; gap: var(--s-4); } .facets { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; padding-bottom: var(--s-2); } .facets .facet-head { display: none; } .facet { border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } } /* ---------------------------------------------------------------- listings Full-width rows rather than a card grid: one creator per line scans far faster, and the price lands in the same place on every row. */ .rows { display: grid; gap: var(--s-2); } .crow { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; } .crow:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--lift-hi); } .crow-body { min-width: 0; } .crow-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .crow-title strong { font-size: 16px; font-weight: 650; letter-spacing: -.02em; } .crow-title small { font-size: 13px; } .crow-title .demo-tag { margin-left: 0; } .crow-body > p { margin: 3px 0 6px; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crow-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: 12.5px; color: var(--muted); } .crow-price { text-align: right; flex: none; } .crow-price b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.03em; color: var(--success); } .crow-price small { display: block; letter-spacing: .03em; } .crow-price small { font-size: 11px; } @media (max-width: 640px) { .crow { grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); } .crow-price { grid-column: 1 / -1; text-align: left; padding-top: var(--s-2); border-top: 1px solid var(--border); } .crow-price b { display: inline; } .crow-price small { margin-left: 4px; } } /* Two-tone headings, matching .display on /how. */ .hero h1 em, .section > h2 em { font-style: normal; color: var(--accent); } .hero h1 em { display: inline; } /* ---------------------------------------------------------------- claim bar The whole signup, inline in the hero: handle, category, email, submit. */ .claimbar { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .95fr) minmax(0, 1.05fr) auto; gap: var(--s-2); max-width: 820px; margin: 0 auto; text-align: left; } .claimbar input, .claimbar select { font-size: 14px; padding: 12px 14px; } .claimbar button { white-space: nowrap; padding: 12px 22px; } .claim-hint { margin: var(--s-2) auto 0; max-width: 820px; text-align: center; } .claim-hint b { color: var(--text); } @media (max-width: 720px) { .claimbar { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- mono glow A faint halo on accent-coloured monospace labels only. Kept to the labels because glow on body text destroys legibility, and glow everywhere is how a page starts looking like a crypto exchange. */ .eyebrow, .facet-head, .benefits span { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 32%, transparent); } [data-theme="dark"] .eyebrow, [data-theme="dark"] .facet-head, [data-theme="dark"] .benefits span { text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); } .metaline .up { text-shadow: 0 0 12px color-mix(in srgb, var(--success) 30%, transparent); } /* The claim bar reads as one instrument, not four loose controls. */ .claimbar { padding: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: calc(var(--r-md) + 6px); box-shadow: var(--lift); } .claimbar input, .claimbar select { background: var(--surface); } .crow-price b { text-shadow: 0 0 14px color-mix(in srgb, var(--success) 22%, transparent); } /* Inside the bar the button sits on a surface, not above the page — the wide ambient layer would spill past the bar's edge and read as misalignment. */ .claimbar button { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(150,26,26,.35); } .claimbar button:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 6px rgba(150,26,26,.45); } .claimbar button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(110,18,18,.45); } .claimbar input, .claimbar select { box-shadow: none; border-color: var(--border); } .claimbar input:focus, .claimbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } /* ------------------------------------------------------- colour roles RED price to pay, primary action BLACK text, and the dark ground PURPLE the system layer — monospace labels, categories, meta GOLD money earned, and anything flagged for attention Each colour means one thing. A colour used decoratively stops carrying information, and then none of them do. */ .eyebrow, .facet-head, .benefits span, .rule .num, .metaline b { color: var(--info); } .rule .num { background: var(--info-bg); } .facet.on { background: var(--info-bg); color: var(--info); } .filter.on { background: var(--info); border-color: var(--info); } .chosen-tag { background: var(--info-bg); border-color: var(--info); color: var(--info); } .chosen-tag button:hover { background: var(--info); } .eyebrow, .facet-head, .benefits span { text-shadow: 0 0 12px color-mix(in srgb, var(--info) 30%, transparent); } [data-theme="dark"] .eyebrow, [data-theme="dark"] .facet-head, [data-theme="dark"] .benefits span { text-shadow: 0 0 14px color-mix(in srgb, var(--info) 50%, transparent); } /* Prices a brand pays are red; money a creator keeps is gold. */ .crow-price b, .rate, .price { color: var(--accent); } .crow-price b { text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent); } .metaline .up { color: var(--success); text-shadow: none; } .trust span::before { color: var(--success); } .half:last-child b { color: var(--success); } .compare .yes { color: var(--accent); } .tick { color: var(--info); } /* Link detection feedback under the claim bar. */ .detect { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; } .detect.good { color: var(--success); background: var(--success-bg); border-color: var(--success); } .detect.plain { color: var(--muted); background: var(--surface-2); border-color: var(--border-2); } .detect.bad { color: var(--danger); background: var(--accent-bg); border-color: var(--danger); } /* Platform icon inside the field, so what we detected sits on the value itself. */ .field { position: relative; display: block; } .field input { padding-left: 40px; width: 100%; } .field-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; line-height: 1; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-2); transition: color .16s, background .16s, border-color .16s; } .field-icon.good { color: var(--success); background: var(--success-bg); border-color: var(--success); } .field-icon.plain { color: var(--muted); } .field-icon.bad { color: var(--danger); background: var(--accent-bg); border-color: var(--danger); } .claimbar .field input { background: var(--surface); } /* Spinner while the link is being checked. */ .field-icon.busy { border-color: var(--border-2); border-top-color: var(--accent); animation: spin .7s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } .detect.busy { color: var(--muted); background: var(--surface-2); border-color: var(--border-2); } @media (prefers-reduced-motion: reduce) { .field-icon.busy { animation: none; } } /* Owner-only prompt on a page with no links yet. */ .link.empty-link { border-style: dashed; background: transparent; box-shadow: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .link.empty-link small { font-weight: 400; line-height: 1.45; display: block; margin-top: 3px; } /* Count of brands waiting on the owner's approval. */ .pill { display: inline-block; background: rgba(255,255,255,.25); border-radius: 999px; padding: 0 7px; margin-left: 4px; font-size: 12px; font-weight: 700; }