martbost
2503b1e1a2
The card read "when someone new opens PolHunter" and listed everyone a hunter had brought as hunting or earning, including members who joined InstantAdPay before the mission existed and can never pay a bounty. So the board promised an earning the payout code would refuse. It now says what actually qualifies: someone who has never had an InstantAdPay account. People who were already members are listed as exactly that, the match window is not claimed for them, and the counts show how many of the brought are genuinely new. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
144 lines
16 KiB
CSS
144 lines
16 KiB
CSS
/* PolHunter: its own look. Night expedition: deep indigo, violet POL glow, gold finds, glass. */
|
|
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&family=JetBrains+Mono:wght@500&display=swap');
|
|
:root{
|
|
--bg:#080614;--bg2:#100b26;--ink:#f3f0ff;--muted:#a79fc4;--dim:#6e678a;
|
|
--pol:#8247e5;--pol-hi:#b48cff;--pol-deep:#3d2178;--gold:#f3be43;--gold-hi:#ffd97a;--ok:#4be3a5;--bad:#ff7a7a;
|
|
--glass:rgba(255,255,255,.05);--edge:rgba(255,255,255,.1);--edge-hi:rgba(180,140,255,.45);
|
|
--font:'Sora',system-ui,-apple-system,"Segoe UI",sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{scroll-behavior:smooth}
|
|
body{min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);overflow-x:hidden}
|
|
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
|
|
radial-gradient(900px 500px at 15% -10%,rgba(130,71,229,.35),transparent 60%),
|
|
radial-gradient(700px 400px at 95% 20%,rgba(243,190,67,.14),transparent 60%),
|
|
radial-gradient(800px 600px at 50% 120%,rgba(130,71,229,.2),transparent 60%),var(--bg)}
|
|
a{color:var(--pol-hi);text-decoration:none} a:hover{color:var(--gold-hi)}
|
|
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
|
|
/* header */
|
|
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
|
|
.mark{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.3px;color:var(--ink)}
|
|
.coin{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d7bdff,var(--pol) 55%,var(--pol-deep));box-shadow:0 0 28px rgba(130,71,229,.8),inset 0 0 0 1px rgba(255,255,255,.25);position:relative;flex:none}
|
|
.coin::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid rgba(255,255,255,.7);border-right-color:transparent;transform:rotate(-30deg)}
|
|
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;border:0;cursor:pointer;font:600 15px var(--font);color:#160a33;background:linear-gradient(135deg,var(--gold-hi),var(--gold));box-shadow:0 8px 24px rgba(243,190,67,.3);transition:transform .15s,box-shadow .15s}
|
|
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(243,190,67,.4)} .btn:disabled{opacity:.5;cursor:default;transform:none}
|
|
.btn.ghost{background:var(--glass);color:var(--ink);box-shadow:none;border:1px solid var(--edge)} .btn.ghost:hover{border-color:var(--edge-hi)}
|
|
.btn.pol{background:linear-gradient(135deg,var(--pol-hi),var(--pol));color:#fff;box-shadow:0 8px 24px rgba(130,71,229,.4)}
|
|
.btn.sm{padding:8px 14px;font-size:13px}
|
|
/* hero */
|
|
.hero{position:relative;margin:6px calc(50% - 50vw) 12px;padding:0;min-height:600px;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
|
|
.hero-art{position:absolute;inset:0;z-index:0} .hero-art img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block}
|
|
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,6,20,.96) 0%,rgba(8,6,20,.86) 30%,rgba(8,6,20,.42) 56%,rgba(8,6,20,.04) 100%),linear-gradient(180deg,rgba(8,6,20,.5) 0%,transparent 24%,transparent 74%,var(--bg) 100%)}
|
|
.hero-copy{position:relative;z-index:2;max-width:1080px;width:100%;margin:0 auto;padding:78px 20px 88px}
|
|
.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;font-weight:800;letter-spacing:-1.5px}
|
|
.hero h1 b{background:linear-gradient(90deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
|
|
.hero p{font-size:19px;color:var(--muted);max-width:520px;margin:20px 0 26px}
|
|
.hero h1,.hero p{text-shadow:0 2px 24px rgba(8,6,20,.9)}
|
|
/* the teaser */
|
|
.play{position:absolute;right:6%;bottom:44px;z-index:3;display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(8,6,20,.55);backdrop-filter:blur(10px);color:#fff;font:600 14px var(--font);cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .15s,border-color .15s}
|
|
.play:hover{transform:translateY(-1px);border-color:var(--gold)}
|
|
.play .tri{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold-hi),var(--gold));position:relative;flex:none;box-shadow:0 0 22px rgba(243,190,67,.6)}
|
|
.play .tri::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #160a33}
|
|
.hero.playing{min-height:0;display:block;background:#000}.hero.playing::before,.hero.playing .hero-copy,.hero.playing .play{display:none}
|
|
.hero-video{display:block;width:100%;aspect-ratio:16/9;max-height:80vh;background:#000;object-fit:contain}
|
|
.notice{padding:14px 18px;border-radius:14px;background:rgba(243,190,67,.1);border:1px solid rgba(243,190,67,.4);color:var(--gold-hi);font-size:15px}
|
|
.notice b{color:var(--ink)}
|
|
/* social */
|
|
.standing{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:4px 0 14px;font-size:13.5px;color:var(--muted)}
|
|
.standing .rankline b{color:var(--gold-hi)} .badges{display:inline-flex;flex-wrap:wrap;gap:6px}
|
|
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:rgba(130,71,229,.16);border:1px solid rgba(130,71,229,.35);color:var(--ink);font-size:12.5px;font-weight:600}
|
|
.tabs{display:flex;gap:8px;margin:14px 0} .tab{padding:8px 14px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);color:var(--muted);font:600 13px var(--font);cursor:pointer} .tab.on{color:#160a33;background:linear-gradient(135deg,var(--gold-hi),var(--gold));border-color:transparent}
|
|
.row.lb{grid-template-columns:1.6fr auto auto} .row.lb.me{border-color:var(--edge-hi);box-shadow:0 0 0 1px rgba(180,140,255,.25)} .row.lb .badges{font-size:14px;margin-left:6px}
|
|
.copybox{display:flex;gap:8px;flex-wrap:wrap} .copybox input{flex:1 1 220px;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--edge);background:rgba(0,0,0,.35);color:var(--ink);font:500 14px var(--mono)}
|
|
textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--edge);background:rgba(0,0,0,.35);color:var(--ink);font:400 14px/1.5 var(--font);resize:vertical} textarea:focus{outline:none;border-color:var(--edge-hi)}
|
|
.sharebtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .share .card textarea{margin-top:10px}
|
|
.banners{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .banner{background:var(--glass);border:1px solid var(--edge);border-radius:18px;padding:16px} .banner .bhead{margin-bottom:10px} .banner .bimg{padding:6px 0} .banner .bimg img{max-width:100%;height:auto;display:block;border-radius:6px} .banner textarea{margin-top:10px;font:500 12px var(--mono)}
|
|
.small{font-size:13px;color:var(--dim)}
|
|
/* toasts */
|
|
#toasts{position:fixed;right:16px;bottom:16px;z-index:1200;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px));pointer-events:none}
|
|
.toast{pointer-events:auto;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#1a0f3d,#2b1a63);border:1px solid rgba(180,140,255,.45);color:var(--ink);font-size:14px;box-shadow:0 12px 40px rgba(130,71,229,.35);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
|
|
.toast.in{opacity:1;transform:none} .toast.ok{border-color:rgba(75,227,165,.5)} .toast.bad{border-color:rgba(255,122,122,.55)} .toast.big{font-size:16px;border-color:var(--gold);box-shadow:0 12px 40px rgba(243,190,67,.35)} .toast a{color:var(--gold-hi)}
|
|
@media (max-width:600px){#toasts{left:16px;right:16px;bottom:12px;max-width:none}}
|
|
/* badge cards */
|
|
.badge-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
|
|
.badge-a{background:var(--glass);border:1px solid var(--edge);border-radius:18px;padding:12px;text-align:center;transition:border-color .2s,transform .2s}
|
|
.badge-a:hover{border-color:var(--edge-hi);transform:translateY(-2px)} .badge-a img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
|
|
.badge-a .bl{font-weight:800;margin-top:10px;font-size:14px} .badge-a .bs{font-size:12px;color:var(--muted);margin:4px 0 8px}
|
|
.badge-a.locked img{filter:grayscale(1) brightness(.4)} .badge-a.locked .bl{color:var(--dim)}
|
|
.modal[hidden]{display:none}
|
|
.modal{position:fixed;inset:0;z-index:1000;background:rgba(8,6,20,.82);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
|
|
.modal-card{position:relative;width:100%;max-width:520px;background:linear-gradient(180deg,#171036,#0e0a22);border:1px solid var(--edge-hi);border-radius:22px;padding:22px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
|
|
.modal-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);color:var(--ink);font-size:22px;cursor:pointer}
|
|
.share-hd{text-align:center;margin-bottom:12px} .share-hd h3{font-size:22px;font-weight:800;margin-top:8px} .share-img{width:100%;border-radius:14px;display:block;margin:0 auto 14px;box-shadow:0 16px 50px rgba(130,71,229,.35)}
|
|
.bp{max-width:560px;margin:0 auto;text-align:center;padding:30px 0 50px} .bp img{width:100%;max-width:520px;border-radius:18px;border:1px solid var(--edge);box-shadow:0 20px 60px rgba(0,0,0,.5)} .bp h1{font-size:clamp(24px,5vw,34px);margin:22px 0 8px;font-weight:800;letter-spacing:-.6px} .bp h1 em{font-style:normal;background:linear-gradient(90deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent} .bp p{color:var(--muted);margin:0 auto 20px;max-width:46ch}
|
|
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
|
|
.pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
|
|
/* cards */
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
|
|
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--edge);border-radius:22px;padding:22px;backdrop-filter:blur(8px);position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
|
|
.card:hover{border-color:var(--edge-hi);transform:translateY(-2px)}
|
|
.card h3{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:10px 0 6px}
|
|
.card p{color:var(--muted);font-size:14.5px}
|
|
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;background:rgba(130,71,229,.18);color:var(--pol-hi);border:1px solid rgba(130,71,229,.35)}
|
|
.tag.gold{background:rgba(243,190,67,.14);color:var(--gold-hi);border-color:rgba(243,190,67,.35)}
|
|
.tag.done{background:rgba(75,227,165,.12);color:var(--ok);border-color:rgba(75,227,165,.35)}
|
|
.range{font-family:var(--mono);font-size:13px;color:var(--gold-hi)}
|
|
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
|
|
.section{padding:34px 0} .section h2{font-size:28px;font-weight:800;letter-spacing:-.6px;margin-bottom:6px} .section .sub{color:var(--muted);margin-bottom:18px}
|
|
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:s}
|
|
.step{padding:18px 18px 18px 58px;position:relative;background:var(--glass);border:1px solid var(--edge);border-radius:18px;color:var(--muted);font-size:15px}
|
|
.step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 14px var(--font);color:#160a33;background:linear-gradient(135deg,var(--gold-hi),var(--gold))}
|
|
.step b{color:var(--ink)}
|
|
/* ledger */
|
|
.ledger{display:flex;flex-direction:column;gap:8px}
|
|
.row{display:grid;grid-template-columns:1.2fr 1fr auto auto;gap:12px;align-items:center;padding:12px 16px;background:var(--glass);border:1px solid var(--edge);border-radius:14px;font-size:14px}
|
|
.row .pol{color:var(--gold-hi);font-family:var(--mono);font-weight:500}
|
|
.row .site{color:var(--muted)} .row .when{color:var(--dim);font-size:12px}
|
|
.stats{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 22px}
|
|
.stat{flex:1;min-width:140px;padding:16px 18px;background:var(--glass);border:1px solid var(--edge);border-radius:18px}
|
|
.stat .v{font:800 26px var(--font);letter-spacing:-.6px} .stat .l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
|
|
/* mission flow */
|
|
.mission-open{border-color:var(--edge-hi);box-shadow:0 0 0 1px rgba(180,140,255,.25),0 20px 60px rgba(130,71,229,.25)}
|
|
.timer{font:500 13px var(--mono);color:var(--muted)} .timer b{color:var(--gold-hi)}
|
|
.codebox{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
|
|
.codebox input{flex:1 1 140px;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--edge);background:rgba(0,0,0,.35);color:var(--ink);font:600 18px var(--mono);letter-spacing:.2em;text-transform:uppercase;outline:none}
|
|
.codebox input:focus{border-color:var(--edge-hi)}
|
|
.codebox .btn{flex:0 0 auto}
|
|
.msg{margin-top:10px;font-size:14px} .msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}
|
|
.foot{padding:40px 0 30px;color:var(--dim);font-size:12.5px;line-height:1.7;border-top:1px solid var(--edge);margin-top:30px}
|
|
.adslot{min-height:90px;display:flex;align-items:center;justify-content:center;margin:26px 0;color:var(--dim);font-size:12px}
|
|
@media (max-width:820px){.hero{min-height:0;margin:0 -20px 6px;border-top:0;display:block}.hero-art{position:relative;inset:auto;display:block;height:270px}.hero-art img{object-position:60% 50%}.hero::before{inset:auto 0 auto 0;top:150px;height:121px;background:linear-gradient(180deg,transparent,var(--bg))}.hero-copy{padding:6px 20px 32px}.hero p{font-size:16.5px}.play{right:auto;left:14px;bottom:auto;top:214px;padding:9px 16px 9px 10px;font-size:13px;white-space:nowrap}.play .tri{width:28px;height:28px}.play .tri::after{left:10px;top:7px}.play .lbl-long{display:none}.nav a:nth-child(2),.nav a:nth-child(3){display:none}.adslot{overflow-x:auto;justify-content:flex-start}.row{grid-template-columns:1fr auto;row-gap:6px}.row .when{grid-column:1/-1;font-size:13px;color:var(--pol-hi)}.adslot{margin:18px -4px}}
|
|
/* every drip row carries its blockchain verify link; on phones it sits on its own line (Marty, 2026-09-19) */
|
|
.row a.when{color:var(--pol-hi)} .row a.when:hover{color:var(--gold-hi)}
|
|
|
|
/* Bring a hunter: the referral card sits first in the mission grid (Marty, 2026-09-23) */
|
|
.ref-card{border-color:rgba(243,190,67,.34);background:linear-gradient(170deg,rgba(243,190,67,.07),rgba(0,0,0,0) 60%)}
|
|
.ref-card .codebox input{font:500 13px var(--mono);letter-spacing:0;text-transform:none}
|
|
.ref-list{margin-top:12px;border-top:1px solid var(--edge);padding-top:8px}
|
|
.ref-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0}
|
|
.ref-row .ref-state{color:var(--dim);font-size:12px;text-align:right}
|
|
|
|
/* mission cards: the action sits at the foot of every card, so a row of them lines up whatever
|
|
the brief is long or short (Marty, 2026-09-23) */
|
|
#missions .card{display:flex;flex-direction:column}
|
|
#missions .cardact{margin-top:auto;padding-top:14px}
|
|
#missions .card .timer{margin-top:auto}
|
|
/* the referral card is taller than any mission, so it sits above the grid rather than stretching
|
|
a whole row of them; on a wide screen it splits so the text does not run the full width */
|
|
#refSlot{margin-bottom:16px}
|
|
#refSlot .ref-card{margin:0}
|
|
@media (min-width:900px){
|
|
#refSlot .ref-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:30px;align-items:start}
|
|
#refSlot .ref-card .tag,#refSlot .ref-card h3{grid-column:1}
|
|
#refSlot .ref-card p,#refSlot .ref-card .codebox{grid-column:1}
|
|
#refSlot .ref-card .ref-list,#refSlot .ref-card>p:last-child{grid-column:2;grid-row:2/span 5;align-self:stretch;margin-top:0;border-top:0;border-left:1px solid var(--edge);padding-left:22px}
|
|
}
|
|
.ref-watch{margin-top:14px}
|
|
.ref-video{width:100%;max-width:560px;border-radius:14px;display:block;background:#000}
|
|
.ref-bonus{margin-top:10px;padding:9px 12px;border:1px solid rgba(243,190,67,.38);border-radius:12px;background:rgba(243,190,67,.07);font-size:13.5px;color:var(--ink)}
|
|
|
|
/* the one condition that decides whether a referral ever pays, said plainly on the card itself
|
|
rather than discovered when the bounty does not arrive (Marty, 2026-09-23) */
|
|
.ref-note{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--dim)}
|