/* ============================================================ JustStreak — marketplace styles Built on IMAN tokens (navy / red / gold, Montserrat / Inter / Mono) pushed into a bold, high-contrast meme-coin direction. Theme + accent are driven by [data-theme] / [data-accent] on . ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap"); :root, [data-theme="dark"] { --bg: #06070e; --bg-elev: #0c0e1b; --bg-elev2: #141733; --bg-poster: #0a0c18; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --txt: #f5f6fc; --txt-2: #aab0c8; --txt-3: #6d7493; --gold: #f3c64d; --gold-soft: #f3c64d; --money: #f3c64d; --secondary: #9b5cff; --secondary-ink: #fff; --red: #ff2d2d; --navy: #2440ff; --good: #2ee27a; --warn: #f5a524; --scrim: rgba(4,5,12,.72); --card-grad: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); } [data-theme="light"] { --bg: #f4f4f1; --bg-elev: #ffffff; --bg-elev2: #ffffff; --bg-poster: #0a0c18; --line: rgba(11,16,32,.12); --line-2: rgba(11,16,32,.20); --txt: #0b1020; --txt-2: #3a3f55; --txt-3: #8a91a6; --gold: #a9801a; --gold-soft: #c9a24a; --money: #a9801a; --secondary: #7c3aed; --secondary-ink: #fff; --red: #f00000; --navy: #000080; --good: #167c3b; --warn: #b7791f; --scrim: rgba(8,10,22,.55); --card-grad: linear-gradient(180deg, rgba(11,16,32,.015), rgba(11,16,32,0)); } [data-accent="red"] { --accent: var(--red); --accent-ink:#fff; } [data-accent="gold"] { --accent: #f0b528; --accent-ink:#1a1505; } [data-accent="violet"] { --accent: #7c5cff; --accent-ink:#fff; } [data-accent="acid"] { --accent: #C6FF3A; --accent-ink:#16210a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--txt); font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } .dsp { font-family: "Montserrat", system-ui, sans-serif; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---------------- ticker marquee ---------------- */ .ticker { position: sticky; top: 0; z-index: 60; background: var(--accent); color: var(--accent-ink); border-bottom: 1px solid rgba(0,0,0,.25); overflow: hidden; white-space: nowrap; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; } .ticker__track { display: inline-flex; gap: 30px; padding: 8px 0; animation: marq 38s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__item { display: inline-flex; align-items: center; gap: 8px; } .ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); opacity: .55; } .ticker b { font-weight: 800; } @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------------- shell ---------------- */ .wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; } /* ---------------- header ---------------- */ .hdr { position: sticky; top: 33px; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .hdr__in { display: flex; align-items: center; gap: 16px; height: 70px; } .nav { display: flex; gap: 2px; margin-left: 2px; } .nav a { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--txt-2); text-decoration: none; white-space: nowrap; padding: 9px 11px; border-radius: 9px; transition: .18s; } .hdr__in .btn { padding: 10px 14px; } .hdr__in .btn, .hdr__in .nav, .hdr__in .wallet { flex: none; } .nav a:hover { color: var(--txt); background: var(--bg-elev2); } .nav a.on { color: var(--txt); } .nav a.on::after { content:""; display:block; height:2px; margin-top:6px; border-radius:2px; background: var(--accent); } .hdr__sp { flex: 1; } /* wordmark */ .mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .mark__glyph { width: 30px; height: 30px; border-radius: 8px; position: relative; flex: none; background: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; display: grid; place-items: center; overflow: hidden; } .mark__glyph::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(0,0,0,.16) 5px 7px); } .mark__bolt { position: relative; color: var(--accent-ink); font-size: 17px; font-weight: 900; line-height: 1; } .mark__txt { font-family:"Montserrat",sans-serif; font-weight: 900; font-size: 21px; letter-spacing: -.02em; color: var(--txt); } .mark__txt .fun { color: var(--accent); } /* wallet + buttons */ .btn { font-family:"Montserrat",sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; border: 0; cursor: pointer; padding: 11px 17px; border-radius: 11px; display: inline-flex; align-items: center; gap: 8px; transition: transform .14s var(--ease,ease), filter .18s, background .18s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--accent { background: var(--accent); color: var(--accent-ink); } .btn--accent:hover { filter: brightness(1.08); } .btn--buy { background: var(--secondary); color: var(--secondary-ink); } .btn--buy:hover { filter: brightness(1.08); } .btn--ghost { background: var(--bg-elev2); color: var(--txt); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--line-2); } .btn--lg { padding: 15px 24px; font-size: 14px; border-radius: 13px; } .btn--block { width: 100%; justify-content: center; } .wallet { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-elev); } .wallet__bal { display: flex; flex-direction: column; padding: 6px 13px; line-height: 1.1; } .wallet__bal + .wallet__bal { border-left: 1px solid var(--line); } .wallet__bal .k { font-size: 9.5px; letter-spacing:.08em; text-transform: uppercase; color: var(--txt-3); font-weight:700; } .wallet__bal .v { font-family:"JetBrains Mono",monospace; font-weight:700; font-size: 13px; color: var(--txt); } .wallet__who { display:flex; align-items:center; gap:8px; padding: 0 13px 0 14px; border-left:1px solid var(--line); align-self:stretch; } .wallet__av { width:20px;height:20px;border-radius:6px;background:conic-gradient(from 200deg,#ab9ff2,#6d4cff,#ab9ff2); } .wallet__who .addr { font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600; color: var(--txt-2); } .dot-live { width:7px;height:7px;border-radius:50%;background:var(--good); box-shadow:0 0 0 0 var(--good); animation:pulse 1.8s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } /* ---------------- hero ---------------- */ .hero { padding: 46px 0 30px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: stretch; } .hero__eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:"Montserrat",sans-serif; font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; } .hero__eyebrow .bar { width:26px;height:2px;background:var(--accent); } .hero h1 { font-family:"Montserrat",sans-serif; font-weight:900; letter-spacing:-.025em; line-height:.96; font-size: clamp(40px, 5.2vw, 72px); margin: 0; text-transform: uppercase; text-wrap: balance; } .hero h1 .hl { color: var(--accent); position: relative; } .hero h1 .strike { color: var(--txt-3); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 5px; } .hero p.lede { font-size: 17px; line-height: 1.55; color: var(--txt-2); max-width: 46ch; margin: 20px 0 26px; } .hero__cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .hero__note { font-size:12.5px; color:var(--txt-3); display:flex; align-items:center; gap:8px; } /* token panel */ .token { background: var(--bg-elev); border:1px solid var(--line); border-radius:20px; padding:20px; display:flex; flex-direction:column; position:relative; overflow:hidden; } .token::after{ content:""; position:absolute; inset:0; pointer-events:none; background: var(--card-grad); } .token__top { display:flex; justify-content:space-between; align-items:flex-start; } .token__tkr { display:flex; align-items:center; gap:9px; } .token__tkr .badge { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:18px; color:var(--txt); } .chip-chain { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); border:1px solid var(--line); border-radius:999px; padding:3px 8px; } .chip-pump { font-size:10px; font-weight:800; letter-spacing:.04em; color:#0a0c18; background:linear-gradient(90deg,#5be584,#2ee27a); border-radius:999px; padding:3px 9px; } .token__price { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:34px; letter-spacing:-.01em; margin:14px 0 2px; } .token__chg { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:14px; } .up { color: var(--good); } .down { color: var(--red); } .spark-wrap { position:relative; margin:14px -4px 8px; cursor:crosshair; } .token__spark { display:block; margin:0; } .spark-cross { position:absolute; top:0; bottom:0; width:1px; background:color-mix(in srgb, var(--txt) 28%, transparent); pointer-events:none; } .spark-pt { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--bg-elev); border:2px solid currentColor; transform:translate(-50%,-50%); box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); pointer-events:none; } .spark-tip { position:absolute; top:2px; transform:translateX(-50%); background:var(--txt); color:var(--bg); border-radius:7px; padding:3px 8px; font-family:"JetBrains Mono",monospace; white-space:nowrap; pointer-events:none; display:flex; flex-direction:column; align-items:center; line-height:1.2; box-shadow:0 6px 18px rgba(0,0,0,.4); } .spark-tip b { font-weight:700; font-size:12px; } .spark-tip span { font-size:9px; opacity:.6; font-weight:600; } .token__grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:8px 0 16px; } .token__cell { background:var(--bg-elev); padding:10px 12px; } .token__cell .k { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); font-weight:700; } .token__cell .v { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:15px; margin-top:3px; } /* stats strip */ .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding: 8px 0 40px; } .stat { background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:16px 18px; position:relative; overflow:hidden; } .stat::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; background:var(--accent); border-radius:3px; } .stat .v { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:24px; letter-spacing:-.01em; } .stat .k { font-family:"Montserrat",sans-serif; font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-2); margin-top:6px; } .stat .sub { font-size:11.5px; color:var(--txt-3); margin-top:3px; } /* ---------------- toolbar / filters ---------------- */ .board-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; } .board-head h2 { font-family:"Montserrat",sans-serif; font-weight:900; font-size:30px; letter-spacing:-.02em; text-transform:uppercase; margin:0; } .board-head .meta { font-size:13px; color:var(--txt-3); margin-top:6px; } .board-head .meta b { color:var(--accent); } .chips { display:flex; gap:9px; flex-wrap:wrap; } .chip { font-family:"Montserrat",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.01em; border:1px solid var(--line); background:var(--bg-elev); color:var(--txt-2); padding:9px 14px; border-radius:999px; cursor:pointer; transition:.16s; display:inline-flex; align-items:center; gap:7px; } .chip:hover { border-color:var(--line-2); color:var(--txt); } .chip.on { background:var(--txt); color:var(--bg); border-color:var(--txt); } .chip .g { opacity:.6; } .chip.on .g { opacity:.9; } .tools { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin: 18px 0 24px; } .tools__sp { flex:1; } .seg { display:inline-flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--bg-elev); } .seg button { font-family:"Montserrat",sans-serif; font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase; border:0; background:transparent; color:var(--txt-3); padding:8px 14px; border-radius:8px; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:7px; } .seg button:hover { color:var(--txt-2); } .seg button.on { background:color-mix(in srgb, var(--txt) 10%, transparent); color:var(--txt); box-shadow:0 1px 2px rgba(0,0,0,.22); } .seg__g { opacity:.55; transition:.15s; } .seg button.on .seg__g { opacity:1; color:var(--accent); } .select { font-family:"Inter",sans-serif; font-weight:600; font-size:13px; color:var(--txt); background:var(--bg-elev); border:1px solid var(--line); border-radius:11px; padding:9px 13px; cursor:pointer; } /* ---------------- bounty card (grid) ---------------- */ .grid { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); } .grid.cols2 { grid-template-columns:repeat(2,1fr); } .bcard { background:var(--bg-elev); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s var(--ease,ease), border-color .2s, box-shadow .2s; position:relative; } .bcard:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 18px 40px rgba(0,0,0,.35); } [data-theme="light"] .bcard:hover { box-shadow:0 18px 40px rgba(11,16,32,.12); } .poster { position:relative; height:148px; background:var(--bg-poster); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:14px; } .poster__bg { position:absolute; inset:0; opacity:.9; } .poster__bg::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(125deg, transparent 0 14px, rgba(255,255,255,.05) 14px 16px); } .poster__bg::before{ content:""; position:absolute; right:-30px; bottom:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); } .poster__row { position:relative; display:flex; justify-content:space-between; align-items:flex-start; } .poster__tag { font-family:"Montserrat",sans-serif; font-weight:900; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.28); padding:5px 9px; border-radius:7px; backdrop-filter:blur(3px); white-space:nowrap; } .poster__hot { font-family:"Montserrat",sans-serif; font-weight:900; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--red); padding:5px 9px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; } .poster__cat { position:relative; font-family:"Montserrat",sans-serif; font-weight:900; font-size:30px; line-height:.9; letter-spacing:-.02em; text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.4); opacity:.96; max-width:80%; } .poster__glyph { position:absolute; right:-6px; top:-14px; font-size:120px; line-height:1; color:rgba(255,255,255,.12); pointer-events:none; } .bcard__body { padding:16px 17px 17px; display:flex; flex-direction:column; gap:12px; flex:1; } .bcard__title { font-family:"Montserrat",sans-serif; font-weight:800; font-size:16.5px; line-height:1.22; letter-spacing:-.01em; color:var(--txt); margin:0; } .bcard__blurb { font-size:13px; line-height:1.5; color:var(--txt-2); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .bcard__meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; } .pill { font-size:11px; font-weight:600; color:var(--txt-2); background:var(--bg-elev2); border:1px solid var(--line); border-radius:999px; padding:4px 9px; display:inline-flex; align-items:center; gap:5px; } .pill .i { opacity:.6; font-weight:800; } .pill--escrow { color:var(--good); border-color:color-mix(in srgb,var(--good) 35%,transparent); background:color-mix(in srgb,var(--good) 12%,transparent); } .pill--review { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%,transparent); background:color-mix(in srgb,var(--warn) 12%,transparent); } .cause-line { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--txt-3); padding-top:11px; border-top:1px solid var(--line); } .cause-line .lbl { text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:10px; color:var(--txt-3); } .cause-line .nm { color:var(--txt-2); font-weight:600; } .cause-line .pct { margin-left:auto; font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--money); font-size:11.5px; } .bcard__foot { display:flex; align-items:center; gap:12px; padding:14px 17px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg-elev2) 50%, transparent); } .reward { display:flex; flex-direction:column; line-height:1.05; } .reward .amt { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:19px; color:var(--money); } .reward .usd { font-size:11.5px; color:var(--txt-3); font-weight:600; } .bcard__foot .btn { margin-left:auto; } /* progress of claims */ .claimbar { height:4px; background:var(--bg-elev2); border-radius:3px; overflow:hidden; } .claimbar > i { display:block; height:100%; background:var(--accent); border-radius:3px; } /* ---------------- list view ---------------- */ .list { display:flex; flex-direction:column; gap:10px; } .lrow { display:grid; grid-template-columns: 56px 1fr auto auto; gap:16px; align-items:center; background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:13px 16px; cursor:pointer; transition:.18s; } .lrow:hover { border-color:var(--line-2); transform:translateX(2px); } .lrow__poster { width:56px; height:56px; border-radius:11px; position:relative; overflow:hidden; display:grid; place-items:center; } .lrow__poster span { position:relative; font-family:"Montserrat",sans-serif; font-weight:900; color:#fff; font-size:11px; letter-spacing:.04em; } .lrow__main { min-width:0; } .lrow__title { font-family:"Montserrat",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.01em; margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lrow__sub { display:flex; gap:8px; flex-wrap:wrap; } .lrow__reward { text-align:right; } .lrow__reward .amt { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:17px; color:var(--money); } .lrow__reward .usd { font-size:11px; color:var(--txt-3); } /* ---------------- map view ---------------- */ .mapwrap { display:grid; grid-template-columns: 1fr 340px; gap:18px; } .map { position:relative; height:560px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background: radial-gradient(900px 500px at 30% 20%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 60%), var(--bg-elev); } .map__grid { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; -webkit-mask:radial-gradient(120% 120% at 50% 40%,#000 55%,transparent); } .map__usa { position:absolute; inset:0; display:grid; place-items:center; } .map__usa svg { width:78%; height:78%; opacity:.16; } .pin { position:absolute; transform:translate(-50%,-100%); cursor:pointer; } .pin__dot { width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%, transparent), 0 4px 10px rgba(0,0,0,.4); } .pin.hot .pin__dot { animation: pinpulse 1.6s infinite; } @keyframes pinpulse { 0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent),0 4px 10px rgba(0,0,0,.4);} 60%{box-shadow:0 0 0 13px transparent,0 4px 10px rgba(0,0,0,.4);} 100%{box-shadow:0 0 0 4px transparent;} } .pin.sel .pin__dot { background:var(--gold); } .pin__lbl { position:absolute; top:-26px; left:50%; transform:translateX(-50%); font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px; background:var(--txt); color:var(--bg); padding:2px 7px; border-radius:6px; white-space:nowrap; opacity:0; transition:.15s; } .pin:hover .pin__lbl, .pin.sel .pin__lbl { opacity:1; } .map__side { display:flex; flex-direction:column; gap:12px; overflow:auto; max-height:560px; padding-right:2px; } /* ---------------- modal ---------------- */ .modal-scrim { position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(6px); z-index:200; display:grid; place-items:center; padding:24px; } @keyframes fade { from{opacity:0;} to{opacity:1;} } @keyframes fade { from{opacity:.4;} to{opacity:1;} } .modal { width:min(440px,94vw); background:var(--bg-elev); border:1px solid var(--line-2); border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:pop .26s var(--ease,cubic-bezier(.2,.7,.2,1)); } @keyframes pop { from{transform:translateY(14px) scale(.97);} to{transform:none;} } .modal__head { padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .modal__head h3 { font-family:"Montserrat",sans-serif; font-weight:900; font-size:18px; text-transform:uppercase; letter-spacing:-.01em; margin:0; white-space:nowrap; } .modal__x { border:0; background:var(--bg-elev2); color:var(--txt-2); width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:16px; } .modal__body { padding:22px; display:flex; flex-direction:column; gap:16px; } .kv { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; } .kv .k { color:var(--txt-3); } .kv .v { font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--txt); } .ack { display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:var(--txt-2); line-height:1.5; background:var(--bg-elev2); border:1px solid var(--line); border-radius:12px; padding:13px; } .ack input { margin-top:2px; accent-color:var(--accent); width:16px; height:16px; } .buyfield { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:13px; padding:12px 14px; background:var(--bg-elev2); } .buyfield input { flex:1; background:transparent; border:0; outline:0; color:var(--txt); font-family:"JetBrains Mono",monospace; font-weight:700; font-size:22px; width:100%; } .buyfield .max { font-size:11px; font-weight:800; color:var(--accent); cursor:pointer; letter-spacing:.04em; } /* toast */ .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:300; background:var(--txt); color:var(--bg); font-family:"Montserrat",sans-serif; font-weight:800; font-size:13px; padding:13px 20px; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; animation:toastin .24s ease; } @keyframes toastin { from{transform:translate(-50%,12px);} to{transform:translate(-50%,0);} } .toast .ok { color:var(--good); font-size:16px; } footer.foot { border-top:1px solid var(--line); margin-top:36px; padding:30px 0 70px; color:var(--txt-3); font-size:12.5px; } .foot__in { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .foot__sp { flex:1; } .foot a { color:var(--txt-2); text-decoration:none; } .foot a:hover { color:var(--txt); } /* ============================================================ PAGES — detail, claim/proof flow, cause, wallet, profile, post wizard, admin. Reuses the tokens + primitives above. ============================================================ */ .page { padding: 30px 0 10px; } .page--narrow { max-width: 640px; margin: 0 auto; } .page-title { font-family:"Montserrat",sans-serif; font-weight:900; font-size:clamp(28px,4vw,42px); letter-spacing:-.02em; text-transform:uppercase; margin:14px 0 8px; } .page-lede { font-size:15px; color:var(--txt-2); max-width:60ch; margin:0 0 26px; line-height:1.55; } .sec-h { font-family:"Montserrat",sans-serif; font-weight:800; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-2); margin:30px 0 14px; } .back { display:inline-flex; align-items:center; gap:8px; background:transparent; border:0; cursor:pointer; font-family:"Montserrat",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--txt-3); padding:6px 0; transition:.15s; } .back:hover { color:var(--txt); } .back span { font-size:15px; } /* reusable panel card */ .panel { background:var(--bg-elev); border:1px solid var(--line); border-radius:18px; padding:20px; position:relative; } .panel__fine { font-size:11.5px; color:var(--txt-3); margin:12px 0 0; line-height:1.5; } /* ---- bounty detail ---- */ .detail { display:grid; grid-template-columns: 1fr 360px; gap:30px; align-items:start; } .detail__title { font-family:"Montserrat",sans-serif; font-weight:900; font-size:clamp(24px,3vw,34px); line-height:1.08; letter-spacing:-.02em; margin:20px 0 14px; } .detail__pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; } .detail__brief { font-size:15px; line-height:1.6; color:var(--txt-2); margin:0; max-width:62ch; } .reqs { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .reqs li { display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--txt-2); line-height:1.45; } .reqs__c { flex:none; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:900; background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); } .reqs__c.pend { background:var(--bg-elev2); color:var(--txt-3); } .splitbars { display:flex; flex-direction:column; gap:14px; max-width:520px; } .splitbar__top { display:flex; justify-content:space-between; font-size:13px; color:var(--txt-2); margin-bottom:6px; font-weight:600; } .splitbar__track { height:8px; background:var(--bg-elev2); border-radius:5px; overflow:hidden; } .splitbar__track > i { display:block; height:100%; border-radius:5px; } .detail__side { display:flex; flex-direction:column; gap:14px; position:sticky; top:120px; } .panel--reward { display:flex; flex-direction:column; gap:9px; } .panel__reward { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:30px; color:var(--money); } .panel__usd { font-size:12.5px; color:var(--txt-3); margin-top:-6px; } .escrow-strip { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--txt-2); background:var(--bg-elev2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:6px 0 4px; } .cause-mini { display:flex; align-items:center; gap:13px; cursor:pointer; transition:.16s; } .cause-mini:hover { border-color:var(--line-2); } .cause-mini__sw { width:42px; height:42px; border-radius:11px; flex:none; } .cause-mini__lbl { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); font-weight:700; } .cause-mini__nm { font-family:"Montserrat",sans-serif; font-weight:800; font-size:15px; margin:2px 0; } .cause-mini__go { font-size:12px; color:var(--accent); font-weight:700; } /* ---- step rail (claim flow + wizard) ---- */ .steprail { display:flex; gap:8px; margin:18px 0 22px; flex-wrap:wrap; } .steprail__s { display:flex; align-items:center; gap:8px; font-family:"Montserrat",sans-serif; font-weight:700; font-size:12px; letter-spacing:.02em; color:var(--txt-3); background:var(--bg-elev); border:1px solid var(--line); border-radius:999px; padding:7px 13px 7px 8px; } .steprail__s.on { color:var(--txt); border-color:color-mix(in srgb,var(--accent) 55%,transparent); } .steprail__s.done { color:var(--txt-2); } .steprail__dot { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900; background:var(--bg-elev2); color:var(--txt-3); } .steprail__s.on .steprail__dot { background:var(--accent); color:var(--accent-ink); } .steprail__s.done .steprail__dot { background:color-mix(in srgb,var(--good) 22%,transparent); color:var(--good); } /* ---- generic card pane (claim/proof/wizard) ---- */ .card-pane { background:var(--bg-elev); border:1px solid var(--line); border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:15px; } .pane-h { font-family:"Montserrat",sans-serif; font-weight:900; font-size:22px; letter-spacing:-.01em; margin:0; } .pane-sub { font-size:14px; color:var(--txt-2); margin:-8px 0 4px; } .pane-actions { display:flex; justify-content:space-between; gap:12px; margin-top:6px; } /* ---- proof submission ---- */ .reqbox { background:var(--bg-elev2); border:1px solid var(--line); border-radius:13px; padding:15px; } .reqbox__h { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); font-weight:700; margin-bottom:11px; } .reqbox__r { display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--txt-2); padding:4px 0; } .drop { border:1.5px dashed var(--line-2); border-radius:14px; padding:26px; text-align:center; cursor:pointer; transition:.16s; background:var(--bg-elev2); } .drop:hover { border-color:var(--accent); } .drop__ic { font-size:26px; color:var(--accent); } .drop__t { font-family:"Montserrat",sans-serif; font-weight:800; font-size:14px; margin-top:6px; } .drop__s { font-size:12px; color:var(--txt-3); margin-top:4px; } .upl { display:flex; align-items:center; gap:12px; } .upl__nm { font-size:12.5px; color:var(--txt-2); min-width:120px; } .upl__bar { flex:1; height:6px; background:var(--bg-elev2); border-radius:4px; overflow:hidden; } .upl__bar > i { display:block; height:100%; background:var(--accent); border-radius:4px; transition:width .18s; } .upl__pct { font-size:12px; color:var(--txt-3); width:42px; text-align:right; } .metagrid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .metagrid__c { background:var(--bg-elev); padding:11px 13px; } .metagrid__c .k { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); font-weight:700; } .metagrid__c .v { font-size:13px; font-weight:600; margin-top:3px; } /* ---- verifying ---- */ .verify { align-items:center; } .verify__spin { width:64px; height:64px; margin:6px auto 4px; } .verify__spin span { display:block; width:100%; height:100%; border-radius:50%; border:4px solid var(--bg-elev2); border-top-color:var(--accent); animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .checks { display:flex; flex-direction:column; gap:11px; width:100%; max-width:420px; margin:6px auto 0; } .checks__r { display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--txt-3); transition:.2s; } .checks__r.on { color:var(--txt); } .checks__r.done { color:var(--txt-2); } .checks__ic { width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900; background:var(--bg-elev2); color:var(--txt-3); } .checks__r.done .checks__ic { background:color-mix(in srgb,var(--good) 22%,transparent); color:var(--good); } .checks__r.on .checks__ic { background:var(--accent); } .checks__r.on .checks__ic::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent-ink); animation:pulse 1s infinite; } /* ---- verified & paid (white trust card) ---- */ .paidwrap { display:flex; flex-direction:column; align-items:center; gap:22px; padding:8px 0 20px; animation:fade .4s ease; } .paidcard { width:min(440px,96%); background:#fff; color:#0b1020; border-radius:22px; padding:30px 28px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.45); animation:pop .4s cubic-bezier(.2,.7,.2,1); } .paidcard__badge { display:inline-flex; align-items:center; gap:7px; font-family:"Montserrat",sans-serif; font-weight:900; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#0b6b34; background:#d8f7e3; border-radius:999px; padding:7px 14px; } .paidcard__lbl { font-size:12.5px; color:#6a7188; margin-top:18px; font-weight:600; } .paidcard__amt { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:46px; letter-spacing:-.02em; color:#0b1020; margin:4px 0 18px; } .paidcard__rows { border-top:1px solid #e7e9f0; padding-top:14px; display:flex; flex-direction:column; gap:10px; } .paidcard__row { display:flex; justify-content:space-between; font-size:14px; } .paidcard__row span { color:#3a3f55; } .paidcard__row b { color:#0b1020; } .paidcard__row--muted span, .paidcard__row--muted b { color:#8a91a6; } .paidcard__hash { font-size:11px; color:#9aa0b4; margin-top:16px; } .paid-cta { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; } /* ---- impact stats (cause + profile) ---- */ .impact { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:8px 0 4px; } .impact__c { background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:18px; position:relative; overflow:hidden; } .impact__c::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; background:var(--accent); border-radius:3px; } .impact__c .v { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:26px; letter-spacing:-.01em; } .impact__c .k { font-size:11.5px; color:var(--txt-3); margin-top:6px; font-weight:600; } /* ---- cause page ---- */ .cause-hero { display:flex; gap:22px; align-items:flex-start; margin:8px 0 26px; } .cause-hero__sw { width:96px; height:96px; border-radius:20px; flex:none; } .cause-hero__lbl { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); font-weight:700; } .cause-hero__nm { font-family:"Montserrat",sans-serif; font-weight:900; font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; margin:4px 0 10px; } .cause-hero__mission { font-size:15px; line-height:1.6; color:var(--txt-2); max-width:62ch; margin:0 0 10px; } .cause-hero__site { font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--accent); text-decoration:none; font-weight:600; } /* ---- wallet ---- */ .walgrid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; } .walbal__top { display:flex; align-items:center; gap:10px; } .walbal__top .addr { font-size:13px; color:var(--txt-2); } .walbal__big { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:40px; letter-spacing:-.02em; margin-top:16px; } .walbal__sub { font-size:12.5px; color:var(--txt-3); } .ledger { display:flex; flex-direction:column; gap:9px; } .ledger__r { display:grid; grid-template-columns:38px 1fr auto auto; gap:14px; align-items:center; background:var(--bg-elev); border:1px solid var(--line); border-radius:13px; padding:13px 16px; } .ledger__ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:900; font-size:15px; } .ledger__ic.in { background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); } .ledger__ic.out { background:var(--bg-elev2); color:var(--txt-3); } .ledger__t { font-family:"Montserrat",sans-serif; font-weight:800; font-size:14px; } .ledger__d { font-size:12.5px; color:var(--txt-3); margin-top:2px; } .ledger__when { font-size:12px; color:var(--txt-3); } .ledger__a { font-weight:700; font-size:15px; color:var(--txt-2); } .ledger__a.in { color:var(--good); } /* ---- profile ---- */ .prof-hero { display:flex; align-items:center; gap:18px; margin:8px 0 26px; } .prof-hero__av { width:72px; height:72px; border-radius:18px; flex:none; background:conic-gradient(from 200deg,#ab9ff2,#6d4cff,#ab9ff2); } .prof-hero__nm { font-family:"Montserrat",sans-serif; font-weight:900; font-size:28px; letter-spacing:-.02em; margin:0 0 9px; } .prof-hero__meta { display:flex; gap:8px; flex-wrap:wrap; } /* ---- post wizard ---- */ .tmpls { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tmpl { display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; transition:.15s; font-family:"Montserrat",sans-serif; font-weight:700; font-size:13.5px; color:var(--txt-2); background:var(--bg-elev2); border:1px solid var(--line); border-radius:13px; padding:14px; } .tmpl:hover { border-color:var(--line-2); color:var(--txt); } .tmpl.on { border-color:var(--accent); color:var(--txt); box-shadow:inset 0 0 0 1px var(--accent); } .tmpl__g { font-size:18px; opacity:.7; } .field { display:flex; flex-direction:column; gap:7px; } .field__l { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-3); font-weight:700; } .inp { font-family:"Inter",sans-serif; font-size:14px; color:var(--txt); background:var(--bg-elev2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; outline:0; transition:.15s; } .inp:focus { border-color:var(--accent); } .policy-ok { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--good); font-weight:600; background:color-mix(in srgb,var(--good) 9%,transparent); border:1px solid color-mix(in srgb,var(--good) 28%,transparent); border-radius:11px; padding:11px 13px; } /* ---- admin queue ---- */ .qtable { display:flex; flex-direction:column; gap:10px; } .qrow { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; background:var(--bg-elev); border:1px solid var(--line); border-radius:13px; padding:14px 16px; } .qrow__flag { font-family:"Montserrat",sans-serif; font-weight:800; font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:5px 9px; border-radius:7px; white-space:nowrap; } .qrow__flag.warn { color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); } .qrow__flag.ok { color:var(--good); background:color-mix(in srgb,var(--good) 14%,transparent); } .qrow__t { font-family:"Montserrat",sans-serif; font-weight:800; font-size:14px; } .qrow__d { font-size:12px; color:var(--txt-3); margin-top:3px; } .qrow__btns { display:flex; gap:8px; } .qrow__btns .btn { padding:9px 14px; } .verdict { font-family:"Montserrat",sans-serif; font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:7px 12px; border-radius:8px; } .verdict.approved, .verdict.verified { color:var(--good); background:color-mix(in srgb,var(--good) 15%,transparent); } .verdict.rejected { color:var(--red); background:color-mix(in srgb,var(--red) 15%,transparent); } /* ---- how it works ---- */ .how-hero { max-width:760px; margin-bottom:6px; } .how-hero h1 { font-family:"Montserrat",sans-serif; font-weight:900; font-size:clamp(34px,5vw,60px); line-height:.98; letter-spacing:-.025em; text-transform:uppercase; margin:8px 0 16px; } .how-hero h1 .hl { color:var(--accent); } .how-hero p { font-size:16.5px; line-height:1.6; color:var(--txt-2); max-width:56ch; margin:0; } .loopstrip { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; } .loopstep { background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:16px; } .loopstep__n { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:12px; color:var(--accent-ink); background:var(--accent); width:24px; height:24px; border-radius:7px; display:grid; place-items:center; } .loopstep__t { font-family:"Montserrat",sans-serif; font-weight:800; font-size:13.5px; margin:11px 0 6px; letter-spacing:-.01em; } .loopstep__d { font-size:12px; color:var(--txt-3); line-height:1.45; } .twocol { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .rolecard { background:var(--bg-elev); border:1px solid var(--line); border-radius:18px; padding:22px; } .rolecard__h { font-family:"Montserrat",sans-serif; font-weight:900; font-size:18px; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 14px; } .rolecard__h .tag { font-size:11px; color:var(--accent); margin-left:9px; letter-spacing:.02em; } .rolelist { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; } .rolelist li { display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--txt-2); line-height:1.45; } .rolecard__note { font-size:12.5px; color:var(--txt-3); margin:16px 0 0; font-style:italic; } .safety { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .safety .panel__ic { font-size:22px; line-height:1; } .safety h4 { font-family:"Montserrat",sans-serif; font-weight:800; font-size:15px; margin:11px 0 7px; } .safety p { font-size:13px; color:var(--txt-2); line-height:1.5; margin:0; } .faq { display:flex; flex-direction:column; gap:8px; max-width:760px; } .faq details { background:var(--bg-elev); border:1px solid var(--line); border-radius:13px; padding:0 16px; } .faq summary { cursor:pointer; list-style:none; padding:15px 0; font-family:"Montserrat",sans-serif; font-weight:700; font-size:14.5px; display:flex; justify-content:space-between; align-items:center; gap:14px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; color:var(--accent); font-weight:900; font-size:18px; } .faq details[open] summary::after { content:"\2013"; } .faq details > p { font-size:13.5px; color:var(--txt-2); line-height:1.6; margin:0 0 16px; max-width:64ch; } .how-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; padding:24px 26px; border-radius:18px; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 16%, var(--bg-elev)), var(--bg-elev)); border:1px solid var(--line); } .how-cta h3 { font-family:"Montserrat",sans-serif; font-weight:900; font-size:20px; text-transform:uppercase; letter-spacing:-.01em; margin:0; } /* ---- merch ---- */ .merch-bar { display:flex; align-items:center; gap:13px; margin:0 0 22px; padding:13px 18px; background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; font-size:14px; color:var(--txt-2); } .merch-bar__ic { font-size:18px; } .merch-bar b { color:var(--txt); } .merch-bar__total { font-weight:700; font-size:16px; color:var(--money); } .merch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .product { background:var(--bg-elev); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, border-color .2s, box-shadow .2s; } .product:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 18px 40px rgba(0,0,0,.35); } [data-theme="light"] .product:hover { box-shadow:0 18px 40px rgba(11,16,32,.12); } .product__art { height:210px; display:grid; place-items:center; background:var(--bg-poster); position:relative; overflow:hidden; background-image:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%); } .product__art svg { width:80%; height:80%; filter:drop-shadow(0 10px 24px rgba(0,0,0,.4)); } .product__body { padding:16px 17px 17px; display:flex; flex-direction:column; gap:5px; flex:1; } .product__name { font-family:"Montserrat",sans-serif; font-weight:800; font-size:15.5px; letter-spacing:-.01em; } .product__sub { font-size:12.5px; color:var(--txt-3); } .product__foot { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:13px; } .product__price { font-weight:700; font-size:19px; color:var(--money); } .product__foot .btn { margin-left:auto; } @media (max-width: 1000px) { .hero { grid-template-columns:1fr; } .stats { grid-template-columns:repeat(2,1fr); } .grid { grid-template-columns:repeat(2,1fr); } .mapwrap { grid-template-columns:1fr; } .nav { display:none; } .detail { grid-template-columns:1fr; } .detail__side { position:static; } .impact { grid-template-columns:repeat(2,1fr); } .walgrid { grid-template-columns:1fr; } .loopstrip { grid-template-columns:repeat(3,1fr); } .safety { grid-template-columns:1fr; } .merch-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px) { .grid, .grid.cols2 { grid-template-columns:1fr; } .stats { grid-template-columns:1fr 1fr; } .tmpls { grid-template-columns:1fr; } .metagrid { grid-template-columns:1fr; } .ledger__r { grid-template-columns:34px 1fr auto; } .ledger__when { display:none; } .loopstrip { grid-template-columns:1fr 1fr; } .twocol { grid-template-columns:1fr; } .merch-grid { grid-template-columns:1fr; } }