martbost
4cfe851e81
Marty offered 5 POL to the first hunter who gets a referral all the way through. It now pays itself: the bonus is written alongside the very first bounty anyone earns, from the same faucet, and can never be written twice. It sits outside the daily referral ceiling on purpose, because it is one payment rather than a rate, and it announces itself to Telegram so the room knows the race is over. While it is unclaimed the board card says so, and the moment it is won the card stops advertising it. Set refFirstBonusPol to 0 to retire it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
140 lines
16 KiB
CSS
140 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)}
|