/* ═══════════════════════════════════════════════════════════════════════ link.tattoo — the claim door The dibs page's own .ggo / .e-reveal / .go, re-pointed at the current token names. Pairs with js/claim-door.js. ═══════════════════════════════════════════════════════════════════════ */ /* ── the status glyph ───────────────────────────────────────────────────── Three paths in one 28×14 box. The cosine runs while the lookup is out; when the answer lands it collapses to a flat line and the tick or cross draws itself out of that line. One shape resolving into another, rather than two icons swapping places. */ .hs{display:flex;align-items:center;justify-content:center; min-width:38px;padding:0 12px 0 4px;flex:none;align-self:stretch} .hs svg{width:28px;height:14px;display:block;overflow:visible} .hs path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .hs .w{stroke:var(--dim);stroke-dasharray:24 40;opacity:0; transform-origin:50% 50%; transition:opacity .16s ease,transform .3s cubic-bezier(.65,.05,0,1)} .hs.is-wave .w{opacity:1;animation:hs-run .7s linear infinite} @keyframes hs-run{to{stroke-dashoffset:-64}} .hs .g{stroke-dasharray:1;stroke-dashoffset:1;opacity:0; transition:stroke-dashoffset .32s cubic-bezier(.65,.05,0,1) .09s, opacity .1s ease .09s} .hs.is-ok .w,.hs.is-no .w{opacity:0;transform:scaleY(.04)} .hs.is-ok .tick,.hs.is-no .cross{opacity:1;stroke-dashoffset:0} .hs.is-ok .tick{stroke:var(--live)} .hs.is-no .cross{stroke:var(--accent)} @media(prefers-reduced-motion:reduce){ .hs .w{animation:none;stroke-dasharray:none;transition:none} .hs .g{transition:none} .hs.is-ok .w,.hs.is-no .w{transform:none} } /* ── the doors ──────────────────────────────────────────────────────────── wireClaim's own button is hidden rather than removed: app.js still holds a reference to it and still flips its disabled state, and the module captures its click so go() never navigates. The bar becomes what it was on the dibs page — a handle field with a verdict — and the decision moves to the button that says where it goes. */ /* Scoped to .door-on, which claim-door.js sets on only once it has actually built the doors. If that script fails for any reason, the original Claim button stays visible and the page still works — hiding it unconditionally meant one module error left the page with no way to sign up at all, and nothing on screen to say so. */ body.door-on .claim-bar button{display:none} body.door-on .claim-bar{padding-right:4px} .door{margin-top:14px;max-width:520px} .ggo{width:100%;border:0;border-radius:var(--radius-pill); background:var(--paper);color:var(--ink); font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;padding:15px;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:10px; transition:filter .2s,transform .1s} .ggo:hover{filter:brightness(1.25)} .ggo:active{transform:scale(.985)} .ggo:disabled{opacity:.5;cursor:wait} /* the mark keeps its white field: the four colours are not legible on the paper-dark button, and Google's own guidance wants them on white */ .gicon{width:17px;height:17px;flex:none;background:#fff;border-radius:50%;padding:2px} .e-reveal{display:block;margin:12px auto 0;background:none;border:0; color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;cursor:pointer;text-decoration:underline; text-underline-offset:3px} .e-reveal:hover{color:var(--paper)} .e-form{margin-top:14px} .f-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);margin-bottom:8px} .e-form input{width:100%;margin-top:8px;border:1px solid var(--line); border-radius:var(--radius);background:var(--ink2);outline:none; color:var(--paper);font-family:var(--mono);font-size:14px;padding:13px 14px} .e-form input:focus{border-color:var(--accent)} .ego{width:100%;margin-top:12px;border:0;border-radius:var(--radius-pill); background:var(--accent);color:var(--ink);font-family:var(--mono);font-size:12px; font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:16px; cursor:pointer;transition:filter .2s,transform .1s} .ego:hover{filter:brightness(1.08)} .ego:active{transform:scale(.985)} .ego:disabled{opacity:.5;cursor:wait} .door-err{margin-top:10px;font-family:var(--mono);font-size:10px;line-height:1.6; color:var(--accent);display:none} .door-err.show{display:block} /* ── the email door's done panel ──────────────────────────────────────── */ .door-done{border:1px solid var(--accent);border-radius:var(--radius); padding:26px 22px;text-align:center; background:color-mix(in srgb, var(--accent) 5%, transparent)} .dd-tick{display:block;font-size:26px;color:var(--live);line-height:1} .door-done > b{display:block;margin-top:10px;font-family:var(--disp); font-weight:400;font-size:1.6rem;text-transform:uppercase;letter-spacing:.01em} .dd-handle{margin-top:8px;font-family:var(--disp);font-weight:400;font-size:1.15rem; color:var(--accent)} .door-done p{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--dim); margin-top:6px} .door-done p b{color:var(--paper);font-weight:400} .door-done .dd-go{margin-top:20px} .dd-fine{font-size:9.5px !important;margin-top:12px} @media(max-width:620px){ .ggo,.ego{font-size:11px;letter-spacing:.12em;padding:14px} }