martbost
97dbd66a5c
Every mission brief is a different length, so the Start mission buttons sat at a different height in each card. The action now sits at the foot of the card, so a row of them lines up whatever the brief above it says. The referral card was in the same grid and is taller than any mission, so it stretched the two cards beside it and left them with a hole under the button. It moves above the grid into its own slot, where it splits into two columns on a wide screen so the text does not run the full width. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
137 lines
16 KiB
CSS
137 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}
|
|
}
|