/* bagspend — built on the conversion. The product turns an absurd volatile number into a clean fixed one, so that transformation is the hero and colour encodes certainty: muted for what you give up, gold for what you receive or save. No offset shadows, no highlighted hero word, no rubber stamp — those are devices, not ideas. */ :root{ --stone:#EAE7E0; /* warm stone, not cream */ --card:#FCFBF8; --ink:#17150F; --mute:#7D786C; --hair:#D2CEC4; --gold:#B8801B; /* value received or saved — the only accent */ --good:#3E6B45; --bad:#9A3B2C; --display:"Archivo",-apple-system,BlinkMacSystemFont,sans-serif; /* wordmark */ --figure:"Archivo",-apple-system,BlinkMacSystemFont,sans-serif; --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace; --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* Every card image the CDN serves measures 1.577–1.579. Matching the frame to the artwork means cover crops nothing at all, rather than shaving 3% off the top and bottom of every card on the page. */ --card-ratio:1.578; /* Memecoin art, embedded so the hero cannot break on someone else's CDN. */ --coin-pepe:url(data:image/jpeg;base64,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); --coin-bonk:url(data:image/jpeg;base64,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); --coin-wif:url(data:image/jpeg;base64,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); --coin-doge:url(data:image/png;base64,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); --coin-shib:url(data:image/png;base64,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); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --stone:#131210; --card:#1B1A17; --ink:#EDEAE2; --mute:#918B7E; --hair:#2E2C27; --gold:#D6A039; --good:#6FA878; --bad:#D9705C; } } *{box-sizing:border-box} body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased; padding:max(1.25rem,env(safe-area-inset-top)) 1rem 4rem} .wrap{max-width:31rem;margin:0 auto} /* masthead ------------------------------------------------------------- */ header{position:relative;z-index:0;display:flex;flex-direction:column; align-items:center;text-align:center;padding:.4rem 0 1.5rem} .mark{width:30px;height:30px;flex:none;color:var(--ink)} .home{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none; color:inherit;border-radius:2px;transition:opacity .18s ease} .home:hover{opacity:.7} .home:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* Archivo rather than Syne: Syne draws its g with a stubby flat hook that reads as a clipped glyph however much room the line box is given, and a wordmark is the one place nobody forgives an odd letterform. Archivo was already loaded for figures, so this also costs one font request less. line-height stays above 1 so the descender has somewhere to sit. */ .brandmark{font-family:var(--display);font-weight:800;font-size:1.52rem; letter-spacing:-.022em;line-height:1.25} .brandmark .sp{color:var(--gold)} /* slogan + orbiting coins ----------------------------------------------- */ .slogan{margin:1.7rem 0 0;font-size:1rem;color:var(--mute);letter-spacing:-.01em} /* Reads as a translation of the line above it, so it sits further down and lighter — a gloss on the slogan rather than a second slogan. */ .tagline{margin:1.3rem 0 0;font-size:.78rem;color:var(--mute);opacity:.6; letter-spacing:.01em;max-width:30rem} .slogan em{font-style:normal;font-weight:600;color:var(--gold);position:relative;z-index:1} .bagword{display:inline-block} /* BESIDE the headline, not behind it. They used to be absolutely positioned around the word "bag" at a negative z-index — the idea being that they define the word they circle. On screen they landed on top of the letters and read as a rendering fault, which is a worse first impression than the association was worth. Now they sit in normal flow ahead of the sentence, overlapping each other like a handful of tokens rather than overlapping the text. */ .coins{display:inline-flex;align-items:center;vertical-align:-3px; margin-right:.55rem;pointer-events:none} .coin{width:19px;height:19px;border-radius:50%;flex:none; background-image:var(--coin);background-size:cover;background-position:center; box-shadow:0 0 0 2px var(--stone),0 2px 6px rgba(0,0,0,.3); animation:bob 5.5s ease-in-out infinite} /* Each tucks under the one before it, so five coins read as a stack rather than a row. The ring is the page background, which is what separates them where they overlap. */ .coin + .coin{margin-left:-7px} .coin.pepe{--coin:var(--coin-pepe);animation-delay:-.2s} .coin.bonk{--coin:var(--coin-bonk);animation-delay:-1.9s} .coin.wif {--coin:var(--coin-wif); animation-delay:-3.4s} .coin.doge{--coin:var(--coin-doge);animation-delay:-2.6s} .coin.shib{--coin:var(--coin-shib);animation-delay:-4.5s} @keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}} .acct{position:absolute;top:.2rem;right:0;display:flex;align-items:center;gap:1.15rem} /* Pages left, the account right, with a wider gap between the two groups than within them — so the split reads as two kinds of thing rather than one long list. */ .navtabs,.navacct{display:flex;align-items:center;gap:.7rem} .acctlink{background:none;border:0;padding:.3rem 0;cursor:pointer;font-family:var(--mono); font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .acctlink:hover{color:var(--gold)} /* Points sit opposite the nav: top left, same baseline, gold for value. */ .ptschip{position:absolute;top:.2rem;left:0;display:inline-flex;align-items:baseline;gap:.4rem; padding:.3rem 0;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em; text-transform:uppercase;color:var(--mute);text-decoration:none} .ptschip b{color:var(--gold);font-size:.74rem;font-weight:600;letter-spacing:.03em; font-variant-numeric:tabular-nums} .ptschip:hover{color:var(--gold)} .ptschip:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .optional{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em; text-transform:uppercase;color:var(--good);border:1px solid var(--good); padding:.1rem .34rem;margin-left:.4rem} /* search --------------------------------------------------------------- */ form{display:flex;gap:.45rem;margin:0 auto 1.6rem;max-width:34rem} input[type=text],input[type=email]{ flex:1;min-width:0;background:var(--card);border:1px solid var(--hair); color:var(--ink);border-radius:0;padding:.85rem .9rem;font-size:1rem; font-family:var(--sans)} input::placeholder{color:var(--mute);opacity:.75} input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{ outline:2px solid var(--gold);outline-offset:2px} button{transition:opacity .18s ease,border-color .18s ease,color .18s ease; background:var(--ink);color:var(--stone);border:0;border-radius:0; padding:.85rem 1.1rem;font-size:.92rem;font-weight:600;cursor:pointer; font-family:var(--sans)} button:disabled{opacity:.4;cursor:default} button:hover{opacity:.86} button.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair); font-weight:500} button.ghost:hover{border-color:var(--gold);color:var(--gold);opacity:1} /* the stub — a real tear, not a decorated box --------------------------- */ .card{background:var(--card);border:1px solid var(--hair);padding:1.1rem; margin:0 0 1rem;position:relative} .tear{position:relative;height:0;border-top:1px dashed var(--hair); margin:1rem -1.1rem} .tear::before,.tear::after{content:"";position:absolute;top:-9px;width:18px;height:18px; border-radius:50%;background:var(--stone);border:1px solid var(--hair)} .tear::before{left:-10px;clip-path:inset(0 0 0 50%)} .tear::after{right:-10px;clip-path:inset(0 50% 0 0)} .row{display:flex;align-items:center;gap:.7rem} .grow{flex:1;min-width:0} .logo{width:34px;height:34px;flex:none;display:grid;place-items:center; border:1px solid var(--hair);background:var(--stone);overflow:hidden; font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:-.06em; text-transform:uppercase;color:var(--ink)} .logo img{width:100%;height:100%;object-fit:contain;display:block;padding:3px} .name{font-weight:600;letter-spacing:-.01em} .sub{font-size:.78rem;color:var(--mute)} .big{font-family:var(--figure);font-weight:700;font-size:1.18rem;letter-spacing:-.025em; font-variant-numeric:tabular-nums} /* the conversion ------------------------------------------------------- */ .conv{margin:.2rem 0 1.2rem} .conv .eyebrow{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em; text-transform:uppercase;color:var(--mute)} .conv .give{font-family:var(--mono);font-weight:300;font-size:clamp(1.05rem,4.4vw,1.4rem); letter-spacing:-.05em;color:var(--mute);margin-top:.3rem; font-variant-numeric:tabular-nums} .conv .give b{font-weight:600;color:var(--ink)} .conv .becomes{display:flex;align-items:center;gap:.55rem;margin:.5rem 0 .35rem} .conv .becomes i{flex:1;height:1px;background:var(--hair)} .conv .becomes span{font-family:var(--mono);font-size:.54rem;letter-spacing:.2em; text-transform:uppercase;color:var(--mute)} .conv .get{font-family:var(--figure);font-weight:700; font-size:clamp(2rem,8.5vw,2.8rem);line-height:1.08;letter-spacing:-.028em; font-variant-numeric:tabular-nums} .conv .get em{font-style:normal;color:var(--gold)} .conv .get .brandline{display:block;margin-top:.1em;font-size:.72em;letter-spacing:-.035em} /* ledger --------------------------------------------------------------- */ .ledger{margin:.9rem 0 .2rem;font-family:var(--mono);font-size:.68rem;font-weight:300} .li{display:flex;align-items:baseline;gap:.45rem;padding:.26rem 0;color:var(--mute)} .li .lead{flex:1;height:1px;align-self:flex-end;margin-bottom:.34em;opacity:.6; background-image:radial-gradient(circle,var(--mute) .7px,transparent .8px); background-size:4px 1px;background-repeat:repeat-x} .li .amt{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .li.spread .amt{color:var(--gold)} .li.total{font-family:var(--figure);font-weight:700;font-size:1.18rem;color:var(--ink); letter-spacing:-.025em;border-top:1px solid var(--ink);margin-top:.4rem; padding-top:.5rem} .li.total .lead{display:none} .li.total .label{font-family:var(--mono);font-size:.55rem;font-weight:400; letter-spacing:.18em;text-transform:uppercase;color:var(--mute);flex:1} .indicative{font-family:var(--mono);font-size:.55rem;color:var(--mute); letter-spacing:.14em;text-transform:uppercase;margin-top:.7rem} /* controls ------------------------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem} .railgroup{font-family:"Martian Mono",monospace;font-size:.54rem;letter-spacing:.18em; text-transform:uppercase;color:var(--mute);margin-top:.9rem} .morenets{margin-top:.5rem} .morenets>summary{font-family:"Martian Mono",monospace;font-size:.6rem;color:var(--mute); cursor:pointer;list-style:none;padding:.2rem 0} .morenets>summary::-webkit-details-marker{display:none} .morenets>summary::before{content:"+ ";color:var(--gold)} .morenets[open]>summary::before{content:"\2212 "} .morenets>summary:hover{color:var(--gold)} .chip{background:var(--card);border:1px solid var(--hair);color:var(--ink); border-radius:0;padding:.36rem .64rem;font-size:.66rem;cursor:pointer; font-family:var(--mono);letter-spacing:-.03em} /* The same gesture as the denomination tiles — lift, gold wash, gold type — scaled down, because a chip is a fraction of the size and the tile's 3px would read as a jump. The wash is weighted to the bottom edge so it sits under the padding rather than across the label. */ .chip{position:relative;overflow:hidden; transition:border-color .18s ease,color .18s ease, transform .18s ease,box-shadow .18s ease} .chip::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,var(--gold) 0%,transparent 82%); opacity:0;transition:opacity .2s ease} .chip>*{position:relative;z-index:1} .chip:hover,.chip:focus-visible{border-color:var(--gold);color:var(--gold); transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.28);outline:none} .chip:hover::after,.chip:focus-visible::after{opacity:.13} .chip:hover .sub,.chip:focus-visible .sub{color:var(--gold);opacity:.7} .chip:active{transform:translateY(0)} /* Payment chips only — the brand suggestions keep the small square form. A coin is round, so these are: a pill led by the token's own artwork, at a size you can actually aim at on a phone. */ .chip.pay{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px; padding:.5rem .95rem .5rem .55rem;font-size:.78rem;letter-spacing:-.01em} .chip.pay .tok{width:1.35rem;height:1.35rem;border-radius:50%;flex:none; background:var(--tok,var(--hair)) center/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .18s ease} .chip.pay:hover .tok,.chip.pay:focus-visible .tok{transform:scale(1.08)} /* real coin artwork where we have it, the brand's own colour where we do not */ .chip.pay.c-bonk .tok{--tok:var(--coin-bonk)} .chip.pay.c-sol .tok{--tok:linear-gradient(135deg,#9945FF 0%,#14F195 100%)} .chip.pay.c-usdc .tok{--tok:#2775CA} .chip.pay.c-usdt .tok{--tok:#26A17B} .chip.pay.c-btc .tok{--tok:#F7931A} .chip.pay.c-eth .tok{--tok:#627EEA} .chip.pay.ours .tok{--tok:var(--gold)} /* not a coin yet — an outline, because the buyer names it */ .chip.pay.c-any .tok{background:none;box-shadow:inset 0 0 0 1.5px var(--hair)} .chip.pay.c-any:hover .tok{box-shadow:inset 0 0 0 1.5px var(--gold)} /* the coin catalogue --------------------------------------------------- A scrolling list rather than a grid: the columns are what make it useful — symbol to recognise, name to confirm, market cap to tell the real coin from the three impostors sharing its name. */ /* The search field is the way in, so it reads as one control with the list sitting under it rather than two stacked boxes. */ .coinsearch{width:100%;margin-top:.35rem;background:var(--card);color:var(--ink); border:1px solid var(--hair);border-bottom:0;padding:.62rem .7rem; font-family:var(--sans);font-size:.82rem;border-radius:0} .coinsearch:focus{outline:none;border-color:var(--gold)} .coinsearch::placeholder{color:var(--mute)} .coinlist{max-height:17rem;overflow-y:auto;overscroll-behavior:contain; border:1px solid var(--hair);background:var(--stone); animation:rise .34s cubic-bezier(.2,.7,.3,1) both} .coinsearch:focus + .coinlist{border-color:var(--gold)} /* each row arrives, so a search reads as a result rather than a repaint */ .coinlist .hint{padding:.7rem} .coinrow{display:grid;grid-template-columns:1.5rem minmax(4.2rem,auto) 1fr auto; animation:rise .3s cubic-bezier(.2,.7,.3,1) both; align-items:center;gap:.5rem;width:100%;text-align:left;cursor:pointer; padding:.45rem .6rem;background:none;border:0;border-bottom:1px solid var(--hair); color:var(--ink);font-family:var(--sans);font-size:.76rem; transition:background .14s ease,color .14s ease} .coinrow:last-child{border-bottom:0} .coinrow:hover,.coinrow:focus-visible{background:var(--card);color:var(--gold);outline:none} .ci{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;flex:none;display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)} .ci-l{background:var(--hair);display:grid;place-items:center;font-family:var(--mono); font-size:.6rem;font-weight:600;text-transform:uppercase;color:var(--ink)} .coinrow .cs{font-weight:600;letter-spacing:-.01em;white-space:nowrap} .cv{font-style:normal;color:var(--good);margin-left:.18rem;font-size:.7em} .coinrow:hover .cv{color:var(--gold)} .coinrow .cn{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .coinrow .cm{font-family:var(--mono);font-size:.68rem;color:var(--mute); font-variant-numeric:tabular-nums;white-space:nowrap} .coinrow:hover .cn,.coinrow:hover .cm{color:var(--gold);opacity:.8} /* the pasted coin, once we know what it is */ .chip.pay.c-any.resolved .tok{background:var(--tok) center/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)} /* the icon host was down or throttled — show the coin's initial, not a hole */ .chip.pay.c-any.lettered .tok{background:var(--hair);color:var(--ink); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);display:grid;place-items:center; font-family:var(--mono);font-size:.62rem;font-weight:600;text-transform:uppercase} .chip .sub{color:var(--mute);transition:color .18s ease,opacity .18s ease} label{display:block;font-family:var(--mono);font-size:.55rem;color:var(--mute); letter-spacing:.16em;text-transform:uppercase;margin:1rem 0 .4rem} .hint{font-size:.76rem;color:var(--mute);margin-top:.45rem} .hint a{color:var(--gold)} .qr{display:block;width:100%;max-width:290px;margin:1rem auto .5rem;background:#fff; padding:12px;border:1px solid var(--hair);image-rendering:pixelated} .paybtn{transition:opacity .18s ease;display:block;text-align:center;text-decoration:none;background:var(--ink); color:var(--stone);border-radius:0;padding:1rem;font-weight:700; margin:.9rem 0 .4rem;font-size:.94rem;font-family:var(--sans)} .paybtn.ghostbtn{background:transparent;color:var(--ink);border:1px solid var(--hair); font-weight:500} .paybtn:hover{opacity:.88} .walletpick{display:flex;flex-direction:column;gap:.45rem;margin:.9rem 0 .4rem} .walletpick .paybtn{margin:0} details{margin-top:.9rem;border-top:1px dashed var(--hair);padding-top:.7rem} summary{cursor:pointer;font-size:.78rem;color:var(--mute);font-family:var(--mono); letter-spacing:-.03em} .kv{margin-top:.7rem} .kv .k{font-family:var(--mono);font-size:.55rem;color:var(--mute);letter-spacing:.16em; text-transform:uppercase} .kv .v{font-family:var(--mono);font-size:.74rem;word-break:break-all;margin:.2rem 0 .5rem; user-select:all;-webkit-user-select:all;cursor:text;letter-spacing:-.04em} .netwarn{color:var(--bad);font-size:.76rem;margin:.5rem 0} /* The wait after a payment, while the supplier cuts the card. Measured at about fifteen seconds, fourteen of them theirs. Styled as progress rather than as a warning -- nothing has gone wrong, it is simply not instant. */ .issuing{border:1px solid var(--hair);padding:.8rem;margin:.9rem 0} .issuing-head{font-size:.82rem;color:var(--ink);font-family:var(--sans);margin-bottom:.55rem} .issuing-bar{height:3px;background:var(--hair);overflow:hidden} .issuing-bar>i{display:block;height:100%;background:var(--gold); transition:width .9s linear} .issuing-sub{font-size:.72rem;color:var(--mute);margin-top:.5rem;line-height:1.45; font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ .issuing-bar>i{transition:none} } /* The wallet-warning heads-up. Deliberately NOT var(--bad): a red box over a payment screen adds alarm to a moment that already has enough, and the thing it describes is a domain's age rather than a danger. Muted, closed by default, with the one sentence that matters readable without opening it. */ .domnote{border:1px solid var(--hair);padding:.6rem .7rem;margin:.9rem 0 .2rem} .domnote summary{font-size:.76rem;color:var(--mute);cursor:pointer; font-family:var(--sans);list-style:none} .domnote summary::-webkit-details-marker{display:none} .domnote summary::before{content:'\2139';margin-right:.45rem;color:var(--gold)} .domnote[open] summary{color:var(--ink);margin-bottom:.5rem} .domnote-body{font-size:.74rem;color:var(--mute);line-height:1.5} .domnote-body p{margin:.45rem 0} .domnote-body ol{margin:.45rem 0;padding-left:1.15rem} .domnote-body li{margin-bottom:.22rem} .domnote-body strong{color:var(--ink)} .copy{font-size:.68rem;padding:.38rem .66rem} ol.steps{margin:.7rem 0 .2rem;padding-left:1.15rem;font-size:.82rem;color:var(--mute)} ol.steps li{margin-bottom:.4rem} ol.steps a{color:var(--gold)} .status{font-family:var(--mono);font-size:.62rem;color:var(--mute);margin-top:.9rem; letter-spacing:.08em;text-transform:uppercase} .codelabel{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mute);margin-top:.9rem} .codelabel+.code{margin-top:.3rem} .code{background:var(--stone);border:1px dashed var(--good);padding:.95rem; font-family:var(--mono);font-size:.92rem;word-break:break-all;margin-top:.8rem; letter-spacing:-.04em} .err{color:var(--bad);font-size:.84rem;margin-top:.6rem} .supplier{font-size:.74rem;color:var(--mute);margin-top:.9rem; border-top:1px dashed var(--hair);padding-top:.7rem} .delivered{background:var(--stone);border:1px dashed var(--good);padding:1.1rem; margin-top:.8rem;text-align:center} .delivered .k{font-family:var(--mono);font-size:.56rem;color:var(--good); letter-spacing:.18em;text-transform:uppercase;margin-bottom:.8rem} .delivered button{width:100%} .back{background:none;border:0;color:var(--mute);font-size:.7rem;padding:.35rem 0; margin-bottom:.5rem;cursor:pointer;font-family:var(--mono);letter-spacing:.06em; text-transform:uppercase} .back{transition:color .18s ease} .back:hover{color:var(--gold)} /* terms ----------------------------------------------------------------- */ .terms .teff{margin-top:.55rem;font-family:var(--mono);font-size:.6rem; letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .terms .tsec{margin-top:1.3rem} .terms h2{margin:0 0 .45rem;font-family:var(--mono);font-size:.57rem; letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:400} .terms p{margin:0 0 .6rem;font-size:.85rem;color:var(--mute);max-width:42rem} .terms p strong{color:var(--ink);font-weight:600} .terms .tfoot{margin-top:1.6rem;padding-top:.9rem;border-top:1px solid var(--hair); font-family:var(--mono);font-size:.62rem;color:var(--mute)} .terms .tfoot a{color:var(--gold)} /* powered by ------------------------------------------------------------ */ .poweredby{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.5rem .8rem;margin:-.6rem 0 1.9rem;opacity:.42; transition:opacity .25s ease} .poweredby:hover{opacity:.8} .pb{display:inline-flex;align-items:center;gap:.36rem;font-family:var(--mono); font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)} .pb b{color:var(--ink);font-weight:400} .pb .jup{width:13px;height:13px;border-radius:50%;background-size:cover; background-image:url(data:image/png;base64,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)} .poweredby .sep{width:1px;height:9px;background:var(--hair)} .poweredby.hidden{display:none} .modal{position:fixed;inset:0;background:rgba(10,9,7,.66);display:flex; align-items:center;justify-content:center;padding:1.25rem;z-index:50} .sheet{background:var(--card);border:1px solid var(--hair);padding:1.25rem; max-width:23rem;width:100%} .sheet h2{margin:0 0 .6rem;font-size:1.02rem;font-family:var(--figure); font-weight:700;letter-spacing:-.02em} .sheet p{margin:0 0 .7rem;font-size:.84rem;color:var(--mute)} .sheet p.warn{color:var(--bad)} .sheet .actions{display:flex;gap:.5rem;margin-top:1rem} .sheet .actions button{flex:1} /* browse --------------------------------------------------------------- A tile is a gift card, not a list row: a card face carrying the brand's own colour and logo, with the name and price set below it on the paper. Bordered rectangles with a small icon are the generic pattern this replaces. */ .browse{margin-top:1.6rem} .shelfhead{display:flex;align-items:baseline;gap:.6rem;margin:1.8rem 0 .7rem} .shelfhead h2{margin:0;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em; text-transform:uppercase;color:var(--mute);font-weight:400} .shelfhead .more{margin-left:auto;background:none;border:0;padding:0;cursor:pointer; font-family:var(--mono);font-size:.56rem;color:var(--gold); letter-spacing:.1em;text-transform:uppercase; transition:opacity .18s ease} .shelfhead .more:hover{opacity:.62} .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.4rem,1fr)); gap:.85rem .6rem} .tile{background:none;border:0;padding:0;cursor:pointer;text-align:left; font-family:var(--sans);color:var(--ink);min-width:0;display:block} .tile .face{ position:relative;aspect-ratio:var(--card-ratio); /* the artwork's own */ background:#fff;border:1px solid var(--hair); display:grid;place-items:center;overflow:hidden; transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease; } /* Full bleed. These are gift card images, not logos on a page — inset with a white surround they read as clip art; edge to edge they read as cards. cover rather than contain because the artwork is 700x444 against a 1.62 tile, so filling costs about 3% off the top and bottom and nothing else. */ /* scale(1.05) crops the artwork's own rounded corners. The cards are drawn with rounded corners on a white ground, and that white is IN the image — so however the container is coloured, four white wedges show at the corners of every dark card. A few percent of zoom puts them outside the frame; the art is a photograph of a card, so nobody can tell it is 5% larger, and everybody could see the white. */ .tile .face img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.05); transition:transform .3s cubic-bezier(.2,.7,.3,1)} .tile .face .mg{font-family:var(--mono);font-weight:600;font-size:1.05rem; letter-spacing:-.06em;text-transform:uppercase;color:#8A8578; transition:color .22s ease} /* a gold wash rising from the base of the card on hover */ .tile .face::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,var(--gold) 0%,transparent 72%); opacity:0;transition:opacity .26s ease} .tile .tn{display:block;font-size:.79rem;font-weight:600;letter-spacing:-.012em; margin-top:.44rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .18s ease} .tile .tp{display:block;font-family:var(--mono);font-size:.57rem;color:var(--mute); letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile:hover .face,.tile:focus-visible .face{ border-color:var(--gold);transform:translateY(-3px); box-shadow:0 7px 20px -11px rgba(184,128,27,.6)} .tile:hover .face::after,.tile:focus-visible .face::after{opacity:.14} .tile:hover .face img{transform:scale(1.11)} .tile:hover .face .mg{color:var(--gold)} .tile:hover .tn{color:var(--gold)} .tile:active .face{transform:translateY(-1px)} /* shelves arrive rather than appear */ @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .browse .tiles > .tile{animation:rise .38s cubic-bezier(.2,.7,.3,1) both} .browse .empty{font-size:.82rem;color:var(--mute);padding:.6rem 0} /* history -------------------------------------------------------------- */ .hist{margin-top:.5rem} .hrow{display:flex;align-items:center;gap:.7rem;padding:.7rem 0; border-bottom:1px dashed var(--hair)} .hrow:last-child{border-bottom:0} .hrow .hb{flex:1;min-width:0} .hrow .hn{font-weight:600;font-size:.88rem} .hrow .hd{font-family:var(--mono);font-size:.58rem;color:var(--mute);letter-spacing:-.02em} .hidden{display:none} /* desktop --------------------------------------------------------------- The column that reads well on a phone leaves two thirds of a laptop screen empty and turns every page into a long scroll. Past 60rem the wrap opens up: the catalogue gains columns, and a ticket splits either side of its tear instead of stacking. The tear itself stays a child of the card, so its punched notches still meet the card's edges. */ @media (min-width:60rem){ body{padding-left:2rem;padding-right:2rem} .wrap{max-width:74rem} /* The ticket and the control above it share one centred column, so the back link sits over the card's left edge rather than out at the margin. */ .card,.back{max-width:56rem;margin-left:auto;margin-right:auto} .card{padding:1.5rem} .back{display:block;width:100%;text-align:left} .tear{margin:1.2rem -1.5rem} /* Two panels below the tear: what you are buying, and how you pay. */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem;align-items:start} .split .ledger{margin-top:0} form{max-width:38rem} .slogan{font-size:1.15rem} .tagline{font-size:.86rem} .qr{margin-top:0} } /* Wider still: the catalogue keeps filling, the ticket stops growing. */ @media (min-width:100rem){ .wrap{max-width:92rem} } /* Narrow screens: the account links sit ON the wordmark once the centred logo grows into the space they were absolutely positioned over. Give them their own row above it instead — order:-1 lifts them to the top of the column, align-self pins them right. */ @media (max-width:34rem){ header{padding-top:0} .acct{position:static;order:-1;align-self:flex-end;margin-bottom:.85rem} .ptschip{top:0;gap:.3rem;letter-spacing:.08em} .acct.haspts{gap:.75rem} .acct.haspts .navtabs,.acct.haspts .navacct{gap:.5rem} .acct.haspts .acctlink{letter-spacing:.08em} .acct.haspts #goAcct{display:none} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* Shown only when something has already gone wrong, so it must not depend on anything the failure might have taken with it. */ .breakage{position:fixed;left:0;right:0;bottom:0;z-index:100; background:var(--card);border-top:1px solid var(--bad); color:var(--ink);font-family:var(--sans);font-size:.82rem; padding:.8rem 1rem;display:flex;align-items:center;gap:.8rem; justify-content:center;flex-wrap:wrap} .breakage button{background:var(--ink);color:var(--card);border:0; padding:.4rem .8rem;font-size:.78rem;cursor:pointer; font-family:var(--mono)} /* the "?" beside the QR / wallet buttons ---------------------------------- */ .explain{position:relative;display:inline-block;vertical-align:middle} .qmark{width:15px;height:15px;border-radius:50%;padding:0;cursor:pointer; background:none;border:1px solid var(--mute);color:var(--mute); font-family:var(--mono);font-size:.56rem;line-height:1; display:inline-grid;place-items:center; transition:border-color .18s ease,color .18s ease} .qmark:hover,.qmark:focus-visible{border-color:var(--gold);color:var(--gold)} .explainer{display:none;position:absolute;top:calc(100% + .5rem);left:50%; transform:translateX(-50%);width:min(19rem,78vw);z-index:20; background:var(--card);border:1px solid var(--hair); padding:.75rem .85rem;text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.4)} /* Opens downward on purpose: the mark sits under the QR, and opening upward hid the very thing the reader is about to scan. */ /* hover for a pointer, focus for a keyboard, aria-expanded for a touchscreen */ .explain:hover .explainer, .explain:focus-within .explainer, .qmark[aria-expanded="true"] + .explainer{display:block} .exhead{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);margin-bottom:.45rem} .exsteps{margin:0;padding-left:1.1rem;font-size:.76rem;color:var(--ink);line-height:1.5} .exsteps li{margin-bottom:.3rem} .exsteps b{font-weight:600} .exfoot{display:block;margin-top:.5rem;padding-top:.5rem; border-top:1px solid var(--hair);font-size:.7rem;color:var(--mute);line-height:1.45} /* The fee leg's ordering instruction — the one line in a key/value list that is an instruction rather than a label, so it is allowed to shout. */ .kv .k b{color:var(--gold);font-weight:600;letter-spacing:.04em} /* operator sign-in ------------------------------------------------------- */ .devrow{display:flex;justify-content:flex-end;margin-top:1rem} .devkey{background:none;border:0;padding:.3rem;cursor:pointer;color:var(--hair); display:grid;place-items:center;transition:color .2s ease} .devkey:hover,.devkey:focus-visible{color:var(--gold)} .acctlink.gold{color:var(--gold)} /* The X tab. An anchor, so it needs the button's reset back: no underline, and the glyph centred on the same baseline the word tabs sit on. */ a.acctlink{text-decoration:none;display:inline-flex;align-items:center} .acctlink.icononly{padding:.3rem .1rem} .acctlink.icononly svg{display:block;transition:transform .18s ease} .acctlink.icononly:hover svg{transform:translateY(-1px)} /* choosing an amount ------------------------------------------------------ The one decision on the screen, so it gets the room. Denominations borrow the catalogue tile's proportions and hover, which is already the language the site uses for "a card you can pick". */ .brandface{width:74px;flex:none;aspect-ratio:var(--card-ratio);background:#fff; border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden} .brandface img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.05)} .brandface .mg{font-family:var(--mono);font-weight:600;font-size:.8rem; letter-spacing:-.06em;text-transform:uppercase;color:#8A8578} .pickhead{font-family:var(--mono);font-size:.54rem;letter-spacing:.2em; text-transform:uppercase;color:var(--mute);margin:.2rem 0 .8rem} /* Every denomination the supplier sells is offered, and a few brands sell a lot of them — Boost Mobile has 196 under the per-order cap. Scrolling keeps all of them reachable without the card growing to ten screens; truncating was the old behaviour and it hid $100 Amazon cards from everyone. */ .denoms{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:.5rem; max-height:26rem;overflow-y:auto;overscroll-behavior:contain} .denoms::-webkit-scrollbar{width:8px} .denoms::-webkit-scrollbar-thumb{background:var(--hair)} .denom{position:relative;overflow:hidden;cursor:pointer; background:var(--stone);border:1px solid var(--hair);color:var(--ink); aspect-ratio:var(--card-ratio);display:grid;place-items:center;padding:0; animation:rise .34s cubic-bezier(.2,.7,.3,1) both; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .denom .dv{font-family:var(--figure);font-weight:700;font-size:1.06rem; letter-spacing:-.03em;font-variant-numeric:tabular-nums; position:relative;z-index:1;transition:color .2s ease} /* the same gold wash the catalogue tiles use, so the gesture is familiar */ .denom::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,var(--gold) 0%,transparent 78%); opacity:0;transition:opacity .24s ease} .denom:hover,.denom:focus-visible{border-color:var(--gold);transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.32);outline:none} .denom:hover::after,.denom:focus-visible::after{opacity:.16} .denom:hover .dv,.denom:focus-visible .dv{color:var(--gold)} .denom:active{transform:translateY(-1px)} /* issuing a receipt ------------------------------------------------------ The invoice used to replace the picker instantly, which read as a page swap. This site's whole metaphor is a printed receipt — the tear line, the punched notches — so the document arrives the way one does: fed out from the top, then the ledger lines landing one after another as though they were being printed. clip-path rather than height, so nothing reflows and the layout underneath never jumps. */ /* The outgoing card lifts away rather than being deleted. Shorter than the arrival, because leaving should not be something you wait through. */ @keyframes retire{ to{opacity:0;transform:translateY(-7px) scale(.99)} } .card.retiring{animation:retire .17s ease both;pointer-events:none} @keyframes feed{ from{clip-path:inset(0 0 100% 0);transform:translateY(-8px)} to {clip-path:inset(0 0 0 0); transform:none} } @keyframes printline{ from{opacity:0;transform:translateY(-4px)} to {opacity:1;transform:none} } .card.issuing{animation:feed .42s cubic-bezier(.22,.68,.28,1) both} /* The tear widens as the paper clears it, so the perforation reads as the point the receipt was torn off rather than a line that was always there. */ .card.issuing .tear{animation:printline .3s ease .22s both} /* Ledger lines print in sequence. Short, and staggered by a frame or two — long enough to read as printing, not so long that it delays the decision. */ .card.issuing .ledger .li{animation:printline .26s ease both} .card.issuing .ledger .li:nth-child(1){animation-delay:.26s} .card.issuing .ledger .li:nth-child(2){animation-delay:.32s} .card.issuing .ledger .li:nth-child(3){animation-delay:.38s} .card.issuing .ledger .li:nth-child(4){animation-delay:.44s} .card.issuing .ledger .li:nth-child(5){animation-delay:.50s} /* The conversion is the headline on the payment screen, so it lands last and with a little more travel than the lines above it. */ .card.issuing .conv{animation:printline .34s cubic-bezier(.2,.7,.3,1) .12s both} .card.issuing .qr, .card.issuing .walletpick, .card.issuing .denoms{animation:printline .3s ease .42s both} /* our own token, and what it saves -------------------------------------- */ .chip.ours{border-color:var(--gold);color:var(--gold)} .chip.ours .sub{color:var(--gold);opacity:.75} .chip.ours:hover{background:var(--gold);color:var(--card)} .chip.ours:hover .sub{color:var(--card);opacity:1} /* it fills solid, so the wash would only muddy it */ .chip.ours:hover::after,.chip.ours:focus-visible::after{opacity:0} .chip.ours:hover .tok{--tok:var(--card)} .li.waive .amt,.li.waive .label{color:var(--good)} /* operator: the two live numbers ------------------------------------------ Big enough to read from across the room, because the whole point is glancing at them during a launch rather than studying them. */ .bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.9rem;margin:.2rem 0 .9rem} .bignum{background:var(--card);border:1px solid var(--hair);padding:1rem 1.1rem} .bn{font-family:var(--mono);font-weight:600;font-size:2.4rem;line-height:1; color:var(--ink);font-variant-numeric:tabular-nums} .bl{margin-top:.45rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em; text-transform:uppercase;color:var(--mute)} .bs{margin-top:.5rem;font-size:.78rem;color:var(--mute);min-height:1.2em} /* A quiet tick on each refresh: proof the number is live, rather than a figure that might have died three minutes ago and looks identical. */ .pulse{display:inline-block;width:.45rem;height:.45rem;border-radius:50%; background:var(--hair);vertical-align:middle;margin-left:.5rem} .pulse.beat{animation:pulseBeat 1.1s ease-out} @keyframes pulseBeat{0%{background:var(--good);box-shadow:0 0 0 0 rgba(111,168,120,.5)} 100%{background:var(--hair);box-shadow:0 0 0 7px rgba(111,168,120,0)}} @media (prefers-reduced-motion:reduce){.pulse.beat{animation:none;background:var(--good)}} /* paying from a wallet in this browser ------------------------------------- */ .paybtn.wallet .wicon{width:18px;height:18px;border-radius:50%;vertical-align:-4px; margin-right:.5rem} .walleterr{min-height:1.2em;margin-top:.55rem;text-align:center;font-size:.82rem; color:var(--mute)} .walleterr.bad{color:var(--bad)} /* The QR is the fallback here, so its toggle is a quiet line rather than a second button competing with the thing that actually works on a desktop. */ .qrtoggle{display:block;margin:.9rem auto 0} .qrwrap{margin-top:.6rem} /* operator: who signed up -------------------------------------------------- A list to scan, not a table to study: address on the left where the eye starts, state on the right, date holding the middle. */ .tally{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;color:var(--mute); border:1px solid var(--hair);padding:.1rem .36rem;margin-left:.45rem; vertical-align:middle} .maillist{border-top:1px solid var(--hair)} .mailrow{display:flex;align-items:baseline;gap:.7rem;padding:.42rem 0; border-bottom:1px solid var(--hair)} .mailaddr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-family:var(--mono);font-size:.78rem;color:var(--ink)} /* A wallet address is not an address we can write to, and it should not read like one sitting in a column of emails. */ .mailaddr.wallet{color:var(--mute)} .maildate{font-family:var(--mono);font-size:.6rem;color:var(--mute); font-variant-numeric:tabular-nums;flex:none} .mailtag{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em; text-transform:uppercase;color:var(--mute);flex:none;min-width:7.5rem; text-align:right} /* the amounts, as a sheet over the grid on a phone ------------------------- Rises from the bottom where the thumb already is; the page behind it never moves, so closing it leaves the buyer exactly where they were. Its own class names: .sheet belongs to the confirm dialog. */ .picksheetwrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end} .picksheetwrap .scrim{position:absolute;inset:0;background:rgba(10,9,7,.6); opacity:0;transition:opacity .2s ease} .picksheet{position:relative;width:100%;max-height:82vh;overflow-y:auto; overscroll-behavior:contain;background:var(--card);border-top:1px solid var(--hair); border-radius:14px 14px 0 0;padding:.4rem .9rem calc(1rem + env(safe-area-inset-bottom)); transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1)} .picksheetwrap.open .scrim{opacity:1} .picksheetwrap.open .picksheet{transform:none} .picksheet .grab{width:2.4rem;height:4px;border-radius:2px;background:var(--hair);margin:.3rem auto .7rem} .picksheet .card{border:0;padding:0;background:none;margin:0} .picksheet .sheetx{flex:none;align-self:flex-start;background:none;border:0;color:var(--mute); font-size:1.5rem;line-height:1;padding:.1rem .35rem;cursor:pointer} .picksheet .sheetx:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .denom.busy{opacity:.55;pointer-events:none} @media (prefers-reduced-motion:reduce){ .picksheetwrap .scrim,.picksheet{transition:none} } /* Points: gold is "value received", which is what these are. */ .points .plabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)} .points .ptotal{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1.05; margin:.25rem 0 .35rem;color:var(--gold);font-variant-numeric:tabular-nums} .earned{margin-top:.8rem;font-family:var(--mono);font-size:.8rem;color:var(--gold)} .earned a{color:inherit}