/* ══════════════════════════════════════════════════════════════ Norpo Mini App — the site's design system, not Telegram's. Earlier this file resolved every colour from --tg-theme-* so the app would blend into whatever theme the user runs. That made it look like a Telegram control panel: blue buttons, host background, host greys. The palette below is norpo.io's own, verbatim, so the app reads as Norpo in any client. Only light/dark still follows the host, via the data-theme attribute app.js stamps on . ══════════════════════════════════════════════════════════════ */ :root{ --bg: oklch(0.951 0 0); /* #efefef neutral, not cream */ --surface: oklch(0.985 0 0); /* raised panels */ --surface-2: oklch(0.925 0 0); --ink: oklch(0.185 0 0); /* #131313 */ --ink-2: oklch(0.44 0 0); --ink-3: oklch(0.60 0 0); --line: oklch(0.185 0 0 / .12); --line-soft: oklch(0.185 0 0 / .06); --accent: oklch(0.655 0.215 38); /* vivid orange ≈ #FA4D0A */ --accent-2: oklch(0.585 0.205 36); /* darker orange for text on light */ --accent-ink:oklch(0.99 0 0); --ok: oklch(0.62 0.15 152); --btn: var(--ink); --btn-ink: var(--bg); --r: 11px; --ease-out: cubic-bezier(.16,1,.3,1); } /* Dark is the site's own dark field (the video hero), not Telegram's grey. */ :root[data-theme="dark"]{ --bg: oklch(0.145 0 0); --surface: oklch(0.195 0 0); --surface-2: oklch(0.235 0 0); --ink: oklch(0.97 0 0); --ink-2: oklch(1 0 0 / .62); --ink-3: oklch(1 0 0 / .45); --line: oklch(1 0 0 / .16); --line-soft: oklch(1 0 0 / .07); --accent-2: var(--accent); --btn: var(--accent); /* ink on a dark field reads as disabled */ --btn-ink: oklch(0.145 0 0); } *{box-sizing:border-box;margin:0;padding:0} /* `hidden` is only display:none in the UA sheet, so any author `display` rule below (.redeem, .pay__qr) would outrank it and show the element anyway. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{ background:var(--bg);color:var(--ink); font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px;line-height:1.5;letter-spacing:-.011em; -webkit-font-smoothing:antialiased; min-height:100svh;display:flex;flex-direction:column; padding:0 18px env(safe-area-inset-bottom); overflow-x:hidden; } a{color:var(--accent-2);text-decoration:none} button,input,select,output{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none} ::selection{background:var(--accent);color:var(--accent-ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem; letter-spacing:.08em;text-transform:uppercase} /* ── the site's column rules, carried over ── */ .rules{position:fixed;inset:0;pointer-events:none;z-index:0} .rules i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft)} .rules i:nth-child(1){left:18px} .rules i:nth-child(2){left:50%} .rules i:nth-child(3){right:18px} /* ══ launch splash ══════════════════════════════════════════ */ .splash{ position:fixed;inset:0;z-index:50;background:var(--bg); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; transition:opacity .45s var(--ease-out),visibility .45s; } .splash.is-out{opacity:0;visibility:hidden;pointer-events:none} .splash__mark{position:relative;width:96px;height:96px;display:grid;place-items:center} .splash__logo{width:46px;height:auto;display:block; animation:markIn .7s var(--ease-out) both, breathe 2.6s ease-in-out .7s infinite} .splash__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .splash__ring circle{fill:none;stroke-width:3;stroke-linecap:round} .splash__track{stroke:var(--line)} /* r=44 → circumference ≈ 276.5; dash 70 leaves a sweeping arc */ .splash__sweep{stroke:var(--accent);stroke-dasharray:70 207;transform-origin:50% 50%; animation:sweep 1.15s cubic-bezier(.62,.03,.35,.98) infinite} .splash__word{color:var(--ink-3);letter-spacing:.42em;text-indent:.42em; animation:wordIn .6s var(--ease-out) .22s both} @keyframes markIn{from{opacity:0;transform:scale(.72) translateY(6px)}to{opacity:1;transform:none}} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes wordIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes sweep{to{transform:rotate(360deg)}} body.is-in .top{animation:riseIn .5s var(--ease-out) .04s both} body.is-in #app{animation:riseIn .55s var(--ease-out) .13s both} body.is-in .foot{animation:riseIn .5s var(--ease-out) .26s both} @keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ── header ── */ .top{display:flex;align-items:center;gap:12px;padding:16px 0 12px;position:sticky;top:0; background:var(--bg);z-index:5;position:sticky} .top__logo{height:26px;width:auto;flex:none} /* Segmented, hairline — the site never uses filled pills for navigation. */ .tabs{display:flex;flex:1;gap:6px} .tab{flex:1;padding:9px 6px;border:1px solid var(--line);border-radius:9px; background:transparent;color:var(--ink-2);font-size:.86rem;font-weight:500; transition:background .25s var(--ease-out),color .25s var(--ease-out),border-color .25s} .tab:hover{border-color:var(--accent)} .tab.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)} :root[data-theme="dark"] .tab.is-on{background:var(--accent);color:oklch(0.145 0 0);border-color:var(--accent)} /* ── views ── */ #app{flex:1;padding-bottom:22px;position:relative;z-index:2} .view{display:none;animation:in .28s var(--ease-out)} .view.is-on{display:block} @keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .field{margin-bottom:18px} .lbl{display:block;margin-bottom:8px;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .row{display:flex;gap:8px} .inp{ width:100%;padding:13px 14px;background:var(--surface);color:var(--ink); border:1px solid var(--line);border-radius:var(--r);font-size:1rem; transition:border-color .25s var(--ease-out);appearance:none; } .inp:focus{border-color:var(--accent);outline:none} .inp--amt{flex:1 1 45%;min-width:0;font-weight:500;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .inp--coin{flex:1 1 55%;min-width:0} .inp--ro{display:flex;align-items:center;color:var(--ink-2);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .hint{margin-top:8px;font-size:.8rem;color:var(--ink-2);line-height:1.5} .err{display:none;margin:0 0 12px;padding:11px 13px;border-radius:10px;font-size:.85rem; background:oklch(0.58 0.19 26 / .1);color:oklch(0.55 0.19 26)} :root[data-theme="dark"] .err{color:oklch(0.72 0.17 26)} .err.is-on{display:block} .swapper{display:flex;align-items:center;justify-content:center;width:34px;height:34px; margin:-8px auto 2px;border-radius:50%;background:var(--surface);border:1px solid var(--line); transition:border-color .25s} .swapper:hover{border-color:var(--accent)} .swapper svg{width:16px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round} /* ── card picker ── */ .picks{display:flex;flex-direction:column;gap:8px} .pick{display:flex;align-items:center;gap:12px;padding:13px 14px;text-align:left; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); transition:border-color .25s var(--ease-out)} .pick:hover{border-color:var(--accent)} .pick.is-on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)} .pick[disabled]{opacity:.42;cursor:not-allowed} .pick[disabled]:hover{border-color:var(--line)} .pick__n{flex:1;font-size:.95rem;font-weight:500} .pick__m{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} /* ── restricted-countries warning ── */ .warn{margin:4px 0 18px;border-radius:var(--r); background:oklch(0.655 0.215 38 / .06); border:1px solid oklch(0.655 0.215 38 / .28); box-shadow:inset 3px 0 0 var(--accent)} .warn__sum{display:flex;align-items:center;gap:9px;padding:13px 14px;cursor:pointer; font-size:.86rem;font-weight:600;color:var(--accent-2);list-style:none} .warn__sum::-webkit-details-marker{display:none} .warn__ico{width:17px;height:17px;flex:none;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .warn__body{padding:0 14px 12px;font-size:.82rem;color:var(--ink-2);line-height:1.55} .warn__body strong{color:var(--accent-2)} .chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px} .chip{padding:5px 10px;border-radius:999px;font-size:.76rem;font-weight:500;color:var(--ink); background:var(--surface);border:1px solid oklch(0.655 0.215 38 / .3)} /* ── history ── */ .hist{display:flex;flex-direction:column;gap:8px} .hrow{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;text-align:left; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); transition:border-color .25s} .hrow:hover{border-color:var(--accent)} .hrow__main{flex:1;min-width:0} .hrow__t{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hrow__s{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:3px} .hrow__b{flex:none;padding:4px 10px;border-radius:999px;font-size:.68rem;font-weight:600; font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase; background:oklch(0.655 0.215 38 / .14);color:var(--accent-2)} .hrow__b[data-s="done"]{background:oklch(0.62 0.15 152 / .16);color:var(--ok)} .hrow__b[data-s="bad"]{background:oklch(0.58 0.19 26 / .14);color:oklch(0.55 0.19 26)} .hist__empty{padding:40px 16px;text-align:center;color:var(--ink-2);font-size:.9rem} .hist__note{margin-top:14px;text-align:center} /* ── primary button: the site's pill with its arrow dot ── */ .cta{width:100%;margin-top:6px;padding:13px 10px 13px 22px;border-radius:999px; background:var(--btn);color:var(--btn-ink);font-size:.98rem;font-weight:500; display:inline-flex;align-items:center;justify-content:center;gap:10px; transition:background .3s var(--ease-out),transform .5s var(--ease-out)} .cta:active{transform:translateY(1px)} .cta[disabled]{opacity:.5} .cta__dot{width:26px;height:26px;border-radius:50%;background:var(--btn-ink);flex:none; display:grid;place-items:center} .cta__dot svg{width:12px;height:12px;fill:none;stroke:var(--btn);stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .cta--ghost{margin-top:20px;background:transparent;color:var(--ink-2); border:1px solid var(--line);padding:13px 22px} .cta--ghost:hover{border-color:var(--accent);color:var(--ink)} /* ── order screen ── */ .pay{text-align:center;padding:10px 0 4px} .pay__kicker{color:var(--ink-3)} .pay__amt{font-size:clamp(1.7rem,7vw,2.1rem);font-weight:500;letter-spacing:-.035em; margin:8px 0 3px;font-variant-numeric:tabular-nums;word-break:break-all} .pay__net{color:var(--ink-3);margin-bottom:18px} /* QR always on white: a scanner needs the quiet zone and the contrast, and this screen also renders on the dark palette. */ .pay__qr{width:180px;height:180px;image-rendering:pixelated;border-radius:12px; background:#fff;padding:9px;margin:0 auto 16px;display:block} .addr{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-align:left; transition:border-color .25s} .addr:hover{border-color:var(--accent)} .addr__val{flex:1;min-width:0;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.78rem;word-break:break-all;line-height:1.4;letter-spacing:.01em} .addr__copy{flex:none;color:var(--accent-2);font-weight:600} .status{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:9px 15px; border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.85rem} .status__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none; animation:pulse 1.6s ease-in-out infinite} .status.is-done .status__dot{background:var(--ok);animation:none} .status.is-bad .status__dot{background:oklch(0.58 0.19 26);animation:none} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .redeem{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px; padding:14px;border-radius:999px;background:var(--ok);color:#fff;font-weight:500} .foot{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2; padding:16px 0 20px;border-top:1px solid var(--line);color:var(--ink-3)} .foot .mono{color:var(--ink-3)} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* The redeem link is green, so its dot needs its own stroke colour. */ .redeem .cta__dot{background:#fff} .redeem .cta__dot svg{stroke:var(--ok)} /* ── card payment window ── */ /* Not flex: the inside is part of a sentence, and making it a flex item broke the line into columns ("You have | 10 minutes | to pay…"). */ .c-window{margin:0 0 16px;padding:12px 14px;border-radius:var(--r); background:var(--surface);border:1px solid var(--line);color:var(--ink-2)} .c-window strong{color:var(--ink);font-weight:600} /* The countdown sits above the QR: it is the reason to hurry, so it reads before the address rather than after it. */ .pay__timer{margin:-6px 0 14px;color:var(--ink-2)} .pay__timer[data-low="true"]{color:var(--accent-2);font-weight:500} /* ── issued cards, surfaced above the order list ── */ .hist__head{color:var(--ink-3);margin:2px 0 2px} .hist__head + .card-row,.hist__head + .hrow{margin-top:0} .card-row{display:flex;align-items:center;gap:12px;padding:13px 14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:inset 3px 0 0 var(--ok)} .card-row__go{flex:none;padding:8px 16px;border-radius:999px; background:var(--ok);color:#fff;font-size:.82rem;font-weight:600; transition:opacity .25s var(--ease-out)} .card-row__go:active{opacity:.85} .card-row__go--ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)}