/* ---------- Tokens ---------- */ :root { --bg: #000; /* Surfaces step up clearly: a fill (s2/s3) has to read on a card (s1), and on the glass cards the animated background brings */ --s1: #0c0c0d; --s2: #1b1b1e; --s3: #28282c; --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.15); --text: #fafafa; --text-2: #a1a1a6; --text-3: #6e6e73; --cta: #ffffff; /* mono: white buttons on black */ --cta-hover: #e4e4e7; --cta-ink: #141414; --accent: #ffffff; --tint: rgba(255, 255, 255, 0.12); --tint-2: rgba(255, 255, 255, 0.2); --tint-ink: #ffffff; --focus: rgba(255, 255, 255, 0.5); --danger: #ff6b66; --paper: #f4f4f5; /* product photo panel: retailer images ship on white */ --font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.3, 1.3, .5, 1); /* small overshoot, like a stiff spring */ color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } button:disabled { cursor: default; } input { font: inherit; color: inherit; } ::selection { background: var(--text); color: var(--bg); } :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 8px; } .num { font-feature-settings: "tnum"; } .icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .icon .ai [data-m] { transform-box: fill-box; transform-origin: center; } .icon[data-ai="truck"], .icon[data-ai="plane"] { overflow: visible; } /* Chevrons on menu buttons flip with the menu instead of animating on hover */ [aria-haspopup] > svg[data-ai="chev"] { transition: rotate .32s cubic-bezier(.3,1.25,.5,1); } [aria-haspopup][aria-expanded="true"] > svg[data-ai="chev"] { rotate: 180deg; } /* ---------- Shell ---------- */ .app { height: 100dvh; display: grid; grid-template-rows: 68px 1fr 56px; grid-template-columns: minmax(0, 1fr); } .top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; } .brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; } .brand .mark { width: 22px; } .brand .word { height: 13px; width: auto; } .nav { position: relative; display: flex; } .nav a { padding: 7px 15px; border-radius: 99px; font-size: 15px; font-weight: 500; color: var(--text-3); transition: color .15s; } .nav a:hover { color: var(--text-2); } .nav a.active { color: var(--text); } .top-right { justify-self: end; display: flex; align-items: center; gap: 6px; } .hbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: background-color .15s, color .15s; } .hbtn:hover, .open > .hbtn { background: var(--s2); color: var(--text); } .hbtn .icon { width: 15px; height: 15px; } .hbtn .diamond { color: var(--accent); width: 13px; height: 13px; } /* Header panels (wallet, search, the nav's active pill): a raised dark surface with a hairline ring and a faint top edge */ .hbtn.wallet-btn, .hbtn.search, .nav > .glide, .m-nav > .glide { background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06); } .hbtn.wallet-btn { color: var(--text); padding: 0 12px 0 5px; } .hbtn.wallet-btn:hover, .open > .hbtn.wallet-btn, .hbtn.search:hover { background: var(--s3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .08); } html[data-bgfx-on] :is(.hbtn.wallet-btn, .hbtn.search, .nav > .glide, .m-nav > .glide) { background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } html[data-bgfx-on] :is(.hbtn.wallet-btn:hover, .open > .hbtn.wallet-btn, .hbtn.search:hover) { background: rgba(255, 255, 255, .1); } .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--cta-ink); font-size: 12px; font-weight: 700; } /* Wallet logos (Phantom, Solflare, Backpack): the image fills whatever tile or chip holds it, in that holder's shape */ .wlt { overflow: hidden; background: none !important; box-shadow: 0 0 0 1px var(--line); } .wlt img { display: block; width: 100%; height: 100%; } .hbtn .chev { width: 13px; height: 13px; color: var(--text-3); } .cart-btn { width: 36px; padding: 0; justify-content: center; } /* Count badges sit on the button's corner, cut out of it by a ring in the page colour. Amber means it needs you */ .badge { position: absolute; top: -5px; right: -5px; z-index: 1; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--text); color: var(--bg); font: 650 11px/18px var(--font); font-feature-settings: "tnum"; text-align: center; letter-spacing: 0; box-shadow: 0 0 0 2.5px var(--bg); animation: badge-in .45s var(--spring) both; pointer-events: none; } .badge:empty { display: none; } .badge.warn { background: var(--warn-solid); color: #141414; } .badge.bump { animation: bump .35s ease; } @keyframes bump { 40% { transform: scale(1.3); } } @keyframes badge-in { from { transform: scale(.3); opacity: 0; } } /* ---------- Menus ---------- */ .dd { position: relative; } .menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8); opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(4px); transform-origin: top right; pointer-events: none; transition: opacity .16s, transform .32s var(--spring), filter .2s; } .open > .menu { opacity: 1; transform: none; filter: none; pointer-events: auto; } .menu.up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; } .menu.left { right: auto; left: 0; transform-origin: top left; } .mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--text-2); text-align: left; } .mi-meta { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-3); font-feature-settings: "tnum"; } .mi:hover, .mi[aria-selected="true"] { background: var(--s2); color: var(--text); } .mi .r { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-2); } .mi .r small { display: block; font-size: 11px; color: var(--text-3); } .mi.dim { opacity: .4; } .mi .t b { display: block; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.25; } .mi .t small { font-size: 12px; color: var(--text-3); } .msep { display: block; height: 1px; background: var(--line); margin: 6px 4px; } .menu .m-only { display: none; } /* phones only, where the footer's links move to the Support page */ .pg-bar, .pg-back, #setBack { display: none; } /* phones only: back for pages off the tab bar, and from Settings to the profile sheet */ /* Support: grouped rows split by hairlines, like the account pages */ .sp { width: min(560px, 100%); margin: 0 auto; padding: 8px 0 24px; } .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 24px; } .sp-head .dv-h2 { margin: 0; } .sp-head .status { font-size: 12.5px; color: var(--text-3); } .sp-grp { margin-bottom: 26px; } .sp-grp h3 { margin: 0 0 4px; font-size: 12.5px; font-weight: 500; color: var(--text-3); } .sp-grp a { display: flex; align-items: center; gap: 14px; padding: 12px 0; transition: opacity .15s; } .sp-grp a + a { border-top: 1px solid var(--line); } .sp-grp a:active { opacity: .6; } .sp-grp .ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--s2); color: var(--text); } .sp-grp .ic .icon { width: 18px; height: 18px; } .sp-grp .ic svg:not(.icon) { width: 15px; height: 15px; fill: currentColor; } .sp-grp a > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sp-grp b { font-size: 15px; font-weight: 500; color: var(--text); } .sp-grp small { font-size: 13px; color: var(--text-3); } .sp-grp .chev, .sp-grp .ext { width: 16px; height: 16px; flex: none; color: var(--text-3); } .sp-grp .chev { transform: rotate(-90deg); } .mhead { padding: 10px 10px 12px; } .mhead .who { display: flex; align-items: center; gap: 10px; } .mhead .avatar { width: 36px; height: 36px; font-size: 14px; } .mhead strong { display: block; font-size: 14px; } .mhead small { font-family: var(--mono); font-size: 12px; color: var(--text-3); } .mhead .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; } .mhead .stats div { padding: 10px; border-radius: 10px; background: var(--s2); } .mhead .stats small { display: block; font-family: var(--font); font-size: 11px; color: var(--text-3); } .mhead .stats b { font-size: 14px; font-weight: 600; } /* ---------- Stage ---------- */ .stage { min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 12px 24px 4vh; margin: 0 12px; border-radius: 32px; background: rgba(255, 255, 255, .015); box-shadow: 0 0 0 1px var(--line); } html[data-bgfx-on] .stage { background: rgba(0, 0, 0, .18); } /* Centre vertically, but never push content under the header when it's taller than the stage */ .stage::before, .stage::after { content: ""; flex: 1 1 0; } /* Hero */ .hero { text-align: center; margin-bottom: 40px; } h1 { margin: 0; font-size: clamp(40px, 5.2vw, 68px); font-weight: 550; letter-spacing: -0.035em; line-height: 1.1; } h1 .line { display: block; white-space: nowrap; } h1 .line + .line { margin-top: .26em; } /* room between the two rows of badges */ .hchip { /* Baseline-aligned: the word inside the chip sits on the same line as the surrounding headline text */ /* Same gap on all four sides: --g is the measured distance from the edge to the cap height (top) and baseline (bottom); the icon is cap-height tall on the baseline, and --rb (set in JS) removes the last letter's empty side-bearing */ --g: .275em; --cap: .728em; /* the outline is an inset shadow, so it adds nothing to these gaps */ display: inline-flex; align-items: baseline; vertical-align: baseline; gap: .2em; margin: 0 .04em; padding: .152em calc(var(--g) - var(--rb, 0em)) .128em var(--g); line-height: 1; border-radius: .26em; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: width .35s cubic-bezier(.2, .8, .2, 1); } .hchip .ico { align-self: baseline; width: var(--cap); height: var(--cap); border-radius: .2em; display: grid; place-items: center; flex: none; transition: opacity .25s, transform .45s var(--spring), filter .25s; } /* Out of flow so the icon has no baseline of its own: its bottom edge then sits on the text baseline */ .hchip .ico { position: relative; } .hchip .ico svg { position: absolute; inset: 0; margin: auto; width: 62%; height: 62%; } .hchip.swap .ico { opacity: 0; transform: scale(.5) rotate(-20deg); filter: blur(3px); } /* No kerning/ligatures: split letters and plain text measure identically, so nothing shifts when a swap settles */ .hchip .word { display: inline-block; white-space: nowrap; font-kerning: none; font-variant-ligatures: none; } /* Rolling text: letters leave upwards and arrive from below, one after another */ .hchip .ch { display: inline-block; transition: transform .5s var(--spring), opacity .3s, filter .3s; transition-delay: calc(var(--i) * 24ms); } .hchip .ch.out { transform: translateY(-.4em); opacity: 0; filter: blur(4px); } .hchip .ch.in { transform: translateY(.45em); opacity: 0; filter: blur(4px); transition: none; } /* Load-in: blur, fade and rise, staggered */ .rise { animation: rise .8s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms + 60ms); } @keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } } .sub { margin: 18px auto 0; max-width: 520px; font-size: 17px; color: var(--text-2); line-height: 1.55; text-wrap: balance; } /* Brand + token marks */ .m-amazon { background: #ff9900; color: #111; } .m-ebay { background: #fff; color: #111; } .m-ebay svg { width: 86% !important; } .m-usdc { background: #2775ca; color: #fff; border-radius: 50% !important; } .m-usdt { background: #26a17b; color: #fff; border-radius: 50% !important; } .m-sol { background: #fff; color: #000 !important; border-radius: 50% !important; } /* the mark is always black on white, even in holders that set white icons */ .m-sol svg { width: 52% !important; } .m-gen { background: var(--s3); color: var(--text); border-radius: 50% !important; font-weight: 600; } /* Link input */ .linkbar { position: relative; width: min(640px, 100%); display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 8px 0 22px; flex: none; background: var(--s1); border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .15s, background-color .15s; } .linkbar:hover { border-color: rgba(255, 255, 255, 0.18); } .linkbar:focus-within { border-color: rgba(255, 255, 255, 0.28); background: var(--s2); } .linkbar.error { border-color: rgba(255, 107, 102, 0.6); } .linkbar .lead { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-3); flex: none; } .linkbar .lead .icon { width: 19px; height: 19px; } .linkbar .lead .mk { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; } .linkbar .lead .mk svg { width: 64%; height: 64%; } .lb-field { position: relative; flex: 1; min-width: 0; height: 100%; } .linkbar input { width: 100%; height: 100%; background: transparent; border: 0; outline: none; font-size: 17px; color: var(--text); text-overflow: ellipsis; transition: opacity .2s, filter .2s; } .linkbar input::placeholder { color: var(--text-3); } .lb-status { position: absolute; inset: 0; display: flex; align-items: center; font-size: 17px; white-space: nowrap; overflow: hidden; opacity: 0; filter: blur(4px); transform: translateY(6px); pointer-events: none; transition: opacity .2s, filter .2s, transform .3s var(--spring); } .linkbar.busy input { opacity: 0; filter: blur(4px); } .linkbar.busy .lb-status { opacity: 1; filter: none; transform: none; } /* Shimmering text: a light band sweeps across while the product is fetched (loading state only) */ .shimmer { color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 250% 100%; background-image: linear-gradient(90deg, var(--text-3) 35%, var(--text) 50%, var(--text-3) 65%); animation: shimmer 1.4s linear infinite; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } .lb-paste { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2); } .lb-paste:hover { color: var(--text); background: var(--s3); } .lb-go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--cta); color: var(--cta-ink); transition: background-color .15s; } .lb-go:hover { background: var(--cta-hover); } .lb-go .icon { width: 19px; height: 19px; stroke-width: 2; } /* Stateful content: idle / busy / done layers stacked in one cell, cross-faded with blur */ .states { display: grid; place-items: center; } .states > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; transition: opacity .2s, filter .2s, transform .4s var(--spring); } .states > :not(.on) { opacity: 0; filter: blur(4px); transform: translateY(6px) scale(.9); pointer-events: none; } .spinner { width: 18px; height: 18px; animation: spin .7s linear infinite; } .spinner circle { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 38 100; } @keyframes spin { to { transform: rotate(360deg); } } .draw path { stroke-dasharray: 24; stroke-dashoffset: 24; } .on > .draw path, .draw.on path { animation: draw .45s .1s var(--ease) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .lb-clear { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); } .lb-clear:hover { color: var(--text); background: var(--s3); } .lb-msg { position: relative; top: 12px; height: 0; overflow: visible; font-size: 14px; line-height: 18px; color: var(--danger); text-align: center; } /* It takes no room of its own: the chips under it slide down, so the hero above never re-centres */ .quick { transition: transform .25s var(--ease); } .lb-msg:not([hidden]) + .quick { transform: translateY(26px); } .quick { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .qchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 12px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--text-2); transition: all .15s; } .qchip:hover { border-color: var(--line-2); color: var(--text); background: var(--s2); } .qchip .icon { width: 15px; height: 15px; } /* ---------- Cart summary parts ---------- */ .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex: none; } .lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); } .lock b { font-weight: 500; color: var(--text-2); } /* Progress ring that drains as the price lock runs out */ .ring { width: 15px; height: 15px; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 2; } .ring .track { stroke: var(--line-2); } .ring .bar { stroke: var(--text-2); stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1s linear; } .stepper { display: inline-flex; align-items: center; height: 34px; border-radius: 999px; background: var(--s2); } .stepper button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); } .stepper button:hover { color: var(--text); background: var(--s3); } .stepper .icon { width: 14px; height: 14px; } .stepper > span { min-width: 20px; text-align: center; font-size: 14px; font-weight: 500; } .co-lines { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); } .co-lines li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 14px; color: var(--text-2); } .co-lines li > span:last-child { color: var(--text); } .co-lines .fee { display: inline-flex; align-items: center; gap: 8px; } .co-lines s { color: var(--text-3); font-size: 13px; } .co-lines .tag { color: var(--text-3); margin-left: 4px; } .ship-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); border-radius: 6px; } .ship-btn b { font-weight: 500; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } .ship-btn:hover b { text-decoration-color: var(--text-2); } .ship-btn .icon { width: 13px; height: 13px; color: var(--text-3); } .co-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); } .co-total small { display: block; font-size: 13px; color: var(--text-3); } .co-total strong { display: block; font-size: 34px; font-weight: 550; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; } .co-total strong em { font-style: normal; font-size: 16px; color: var(--text-3); margin-left: 6px; letter-spacing: -0.01em; font-weight: 500; } .co-total .usd { font-size: 13px; color: var(--text-3); } .tok-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--s2); font-size: 15px; font-weight: 600; transition: background-color .15s; } .tok-btn:hover, .open > .tok-btn { background: var(--s3); } .tok-btn .chev { width: 14px; height: 14px; color: var(--text-3); } .tk { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; flex: none; font-size: 12px; } .tk svg { width: 55%; height: 55%; } .bal { font-size: 12px; color: var(--text-3); text-align: right; margin-top: 6px; } .bal.low { color: var(--danger); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 20px; border-radius: 99px; font-size: 16px; font-weight: 550; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; } .btn-cta { background: var(--cta); color: var(--cta-ink); } .btn-cta:hover { background: var(--cta-hover); } .btn-cta:disabled { background: var(--s2); color: var(--text-3); } .btn-ghost { border: 1px solid var(--line-2); color: var(--text); } .btn-ghost:hover { background: var(--s2); } .btn .icon { width: 18px; height: 18px; } /* ---------- Bottom bar ---------- */ .foot { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 0 28px; font-size: 13px; color: var(--text-3); } .foot nav { justify-self: end; display: flex; align-items: center; gap: 18px; } .foot nav a:hover { color: var(--text); } .foot nav svg { width: 14px; height: 14px; display: block; fill: currentColor; } .status { display: inline-flex; align-items: center; gap: 8px; } /* ---------- Drawer ---------- */ .scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity .2s; } .scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; z-index: 55; top: 8px; right: 8px; bottom: 8px; width: 420px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; background: var(--s1); border: 1px solid var(--line-2); border-radius: 24px; transform: translateX(calc(100% + 16px)); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s; } .drawer.open { transform: none; visibility: visible; } .dr-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 14px 22px; } .dr-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .dr-head h2 > span { color: var(--text-3); font-weight: 500; margin-left: 8px; } .icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); } .icon-btn:hover { background: var(--s2); color: var(--text); } .dr-items { flex: 1; overflow: auto; padding: 0 14px; display: flex; flex-direction: column; } /* Rows open and collapse their height when added or removed */ .dr-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .dr-wrap.shown { grid-template-rows: 1fr; } .dr-clip { min-height: 0; overflow: hidden; } .dr-clip > .dr-item { opacity: 0; filter: blur(6px); transform: scale(.97); transition: opacity .3s, filter .3s, transform .45s var(--spring), background-color .15s; } .dr-wrap.shown .dr-item { opacity: 1; filter: none; transform: none; } .dr-item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 10px 8px; border-radius: 16px; } .dr-item:hover { background: var(--s2); } .dr-img { width: 64px; height: 64px; border-radius: 14px; background: var(--paper); display: grid; place-items: center; flex: none; } .dr-img img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; } .dr-name { margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 1.35; } .dr-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .dr-row .price { font-size: 14px; font-weight: 500; } .dr-row .stepper { height: 30px; } .dr-row .stepper button { width: 30px; height: 30px; } .dr-empty { margin: auto; padding: 60px 24px; text-align: center; color: var(--text-3); font-size: 14px; } .dr-empty .icon { width: 26px; height: 26px; display: block; margin: 0 auto 12px; } .dr-sum { padding: 16px 22px 22px; border-top: 1px solid var(--line); } .dr-sum .co-lines { margin: 0; padding: 0; border: 0; } .dr-sum .co-total { margin-top: 10px; } .dr-sum .btn { width: 100%; margin-top: 16px; } .dr-sum .co-total strong { font-size: 30px; } .dr-head-right { display: flex; align-items: center; gap: 10px; } .dr-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--text-3); } .dr-note .icon { width: 13px; height: 13px; } /* ---------- Extension: second row of the link panel ---------- */ /* Other stores' logos on identical white tiles, stacked like an avatar group (logo kept small so the overlap only covers padding) */ .marks { display: inline-flex; flex: none; } .marks i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2px var(--ring-bg, var(--s1)), inset 0 0 0 1px rgba(0, 0, 0, .08); } .marks i + i { margin-left: -5px; } .marks svg { width: 12px; height: 12px; } /* Last tile is a count, like an app badge: there are far more stores than logos */ .marks i.more { width: auto; padding: 0 6px; background: rgba(28, 28, 30, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); box-shadow: 0 0 0 2px var(--ring-bg, var(--s1)), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06); font: 600 10px/1 var(--font); font-style: normal; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .ext-chrome { width: 15px; height: 15px; stroke: none; fill: currentColor; } /* The link input sits in a panel whose second row is "every other store" */ .dock { display: block; width: min(652px, 100%); flex: none; padding: 5px; border-radius: 38px; background: var(--s1); border: 1px solid var(--line); animation: rise .8s var(--ease) both; animation-delay: 270ms; } .dock > .rise { animation: none; } .dock .linkbar { width: 100%; background: var(--bg); } .dock .linkbar:focus-within { background: var(--s2); } .ext-tray { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 6px 0 16px; } .ext-tray .tray-t { flex: 1; min-width: 0; font-size: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ext-tray .tray-t b { font-weight: 500; color: var(--text-2); } .tray-cta { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 99px; flex: none; font-size: 14px; font-weight: 500; color: var(--text); background: var(--s3); transition: background-color .15s, transform .3s var(--spring); } .tray-cta:hover { background: var(--cta); color: var(--cta-ink); } .tray-cta:active { transform: scale(.96); } /* ---------- Settings + colour wheel ---------- */ .sheet { max-width: 480px; padding: 16px 20px 20px; overflow: visible; } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-right: -8px; } .sheet-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .set-row, .set-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .set-row { padding: 14px 0 16px; border-bottom: 1px solid var(--line); } .set-row b, .set-title b { display: block; font-size: 14px; font-weight: 600; } .set-row small, .set-title small { display: block; font-size: 12px; color: var(--text-3); } .set-block { padding-top: 16px; } .set-reset { flex: none; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--s2); } .set-reset:hover { color: var(--text); background: var(--s3); } .picker { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 22px; margin-top: 18px; align-items: start; } /* Hue around the circle, saturation from the centre out; brightness is a dark overlay */ .wheel { position: relative; width: 176px; aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: crosshair; background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } .wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none; } .wheel-dim { position: absolute; inset: 0; border-radius: 50%; background: #000; pointer-events: none; } .wheel-thumb { position: absolute; z-index: 1; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--cta); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .35); cursor: grab; } .wheel-thumb:focus-visible { outline-offset: 3px; border-radius: 50%; } .pick-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hex { display: flex; align-items: center; height: 42px; padding: 0 12px 0 6px; border-radius: 12px; background: var(--s2); } .hex:focus-within { box-shadow: 0 0 0 2px var(--focus); } .hex-sw { width: 30px; height: 30px; border-radius: 8px; margin-right: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; } .hex-hash { color: var(--text-3); font-family: var(--mono); font-size: 14px; } .hex input { flex: 1; min-width: 0; height: 100%; padding: 0 0 0 2px; background: transparent; border: 0; outline: none; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; } .bright small { display: block; margin-bottom: 8px; font-size: 12px; color: var(--text-3); } .bright input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; margin: 0; border-radius: 99px; background: linear-gradient(90deg, #000, var(--pure, #fff)); box-shadow: inset 0 0 0 1px var(--line-2); } .bright input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .3); cursor: grab; } .bright input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .3); } .presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .presets button { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transition: transform .3s var(--spring); } .presets button:hover { transform: scale(1.12); } .presets button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--s1), 0 0 0 4px var(--text); } .preview { display: flex; flex-wrap: wrap; gap: 8px; } .pv-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--cta); color: var(--cta-ink); font-size: 13px; font-weight: 600; } .ink-row { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 0; } .ink-row small.warn { color: #e5a00d; } html[data-theme="light"] .ink-row small.warn { color: #a86a00; } .pv-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--tint); color: var(--tint-ink); font-size: 13px; font-weight: 500; } /* ---------- Animated background (shaders, WebGPU) ---------- */ /* Fixed behind the app; opaque panels stay solid, so it only shows in the open space around them */ .bgfx { position: fixed; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); } .bgfx.on { opacity: var(--bg-amt, .55); } .app { position: relative; z-index: 1; } #settings { padding-top: 8vh; transition: background-color .3s, backdrop-filter .3s; } #settings .sheet { max-height: calc(100dvh - 8vh - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* While a background control is in use the dim lifts, so the change is visible */ #settings.peek { background: transparent; backdrop-filter: none; } .fx-block { margin-top: 18px; border-top: 1px solid var(--line); } .fx-seg { margin-top: 14px; } .fx-seg button { flex: 1; } .fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; padding-top: 16px; transition: opacity .2s; } .fx-block.is-off .fx-grid { opacity: .4; pointer-events: none; } .fx-grid small { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--text-3); } .fx-grid small span { color: var(--text-2); } .fx-grid input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 6px 0; border-radius: 99px; background: var(--s3); } .fx-grid input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .3); cursor: grab; } .fx-grid input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .3); } .fx-grid .seg { width: max-content; } /* ---------- Search palette ---------- */ .overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.6); display: none; align-items: flex-start; justify-content: center; padding: 16vh 16px 16px; } .overlay.open { display: flex; } .palette { width: 100%; max-width: 560px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: 0 32px 80px -16px rgba(0, 0, 0, .9); } .palette-in { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); } .palette-in .icon { color: var(--text-3); } .palette-in input { flex: 1; height: 58px; background: transparent; border: 0; outline: none; font-size: 16px; } .palette-in input::placeholder { color: var(--text-3); } .palette-list { position: relative; max-height: 340px; overflow: auto; padding: 6px; } .overlay.open { animation: fade .2s both; } .overlay.open .palette { animation: pop .35s var(--spring) both; } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.97); filter: blur(6px); } } .pgroup { padding: 10px 12px 6px; font-size: 12px; color: var(--text-3); } .pitem { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--text-2); text-align: left; } .pitem.active { color: var(--text); } .pitem .icon { transition: transform .3s var(--spring); } .pitem.active .icon { transform: scale(1.12); } kbd { font-family: var(--font); font-size: 12px; color: var(--text-3); padding: 2px 7px; border-radius: 6px; background: var(--s2); } /* ---------- Toast ---------- */ /* Stacked toasts: newest in front, older ones tucked behind; hover fans them out */ .toasts { position: fixed; left: 50%; bottom: 72px; z-index: 70; width: min(400px, calc(100vw - 32px)); transform: translateX(-50%); } .toast { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 8px; background: var(--s2); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); transform-origin: 50% 0; transform: translateY(var(--y, 0)) scale(var(--s, 1)); opacity: var(--o, 1); transition: transform .45s var(--ease), opacity .3s, filter .3s; } .toast.enter { transform: translateY(110%) scale(.9); opacity: 0; filter: blur(6px); } .toast.leave { transform: translateY(var(--y, 0)) scale(.9); opacity: 0; filter: blur(6px); pointer-events: none; } .toast > * { transition: opacity .25s; } .toasts:not(.expanded) .toast:not(:first-child) > * { opacity: 0; } .toast .dr-img { width: 40px; height: 40px; border-radius: 10px; } .toast .tx { flex: 1; min-width: 0; } .toast b { display: block; font-size: 14px; font-weight: 600; } .toast .t { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toast .btn { height: 38px; font-size: 14px; border-radius: 12px; padding: 0 14px; } .toast .ok { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--s3); color: var(--text); flex: none; } .toast .ok .icon { width: 18px; height: 18px; stroke-width: 2; } .toast.nudge { animation: nudge .4s var(--spring); } @keyframes nudge { 40% { scale: 1.035; } } .toasts.expanded .toast::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* bridge the gaps so the stack stays open */ /* ---------- Gliding highlight (nav, menus, palette, segmented control) ---------- */ .glide { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 10px; background: var(--s2); pointer-events: none; opacity: 0; transition: transform .34s var(--spring), width .34s var(--spring), height .34s var(--spring), opacity .18s; } .glide.on { opacity: 1; } .glides > :not(.glide) { position: relative; z-index: 1; } .nav > .glide, .m-nav > .glide { border-radius: 99px; } .seg > .glide { border-radius: 99px; background: var(--s3); } .palette-list > .glide { border-radius: 12px; } .glides .mi:hover, .glides .mi[aria-selected="true"] { background: transparent; } .mi[aria-selected="true"]:not(:has(.r))::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--text); flex: none; } /* ---------- Rolling digits ---------- */ .roll { display: inline-block; white-space: nowrap; } /* clip: the hidden digits mustn't stretch a scroll area. Top-aligned, not on the baseline: Safari puts a clipped inline-block's baseline at its bottom edge, which lifted the digits above the "$", "," and "." beside them on iPhones */ .dg { position: relative; display: inline-block; vertical-align: top; clip-path: inset(0 -.1em); overflow-y: clip; } .dg > i { visibility: hidden; font-style: normal; } .dg > b { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; align-items: center; font-weight: inherit; transform: translateY(calc(var(--d) * -10%)); transition: transform .7s var(--spring); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lock .dg > b { transition: transform .4s var(--ease); } /* ticks every second: no overshoot */ #cPay [data-s="idle"] { gap: .3em; } /* ---------- Tooltips ---------- */ /* One bubble for the whole page, fixed to the viewport so no card or scroller ever clips it (see the tooltip script) */ .tip { position: fixed; z-index: 200; top: 0; left: 0; max-width: min(280px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 8px; background: var(--text); color: var(--bg); font: 500 12px/1.35 var(--font); letter-spacing: 0; text-align: center; pointer-events: none; opacity: 0; transform: translateY(-3px) scale(.94); transition: opacity .14s, transform .2s var(--spring); } .tip[data-side="top"] { transform: translateY(3px) scale(.94); } .tip.on { opacity: 1; transform: none; } /* ---------- Press feedback (spring) ---------- */ .btn, .lb-go, .qchip, .hbtn, .tok-btn, .icon-btn, .stepper button, .lb-paste, .lb-clear, .copy { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: .15s, .15s, .15s, .15s, .35s; transition-timing-function: ease, ease, ease, ease, var(--spring); } :is(.btn, .lb-go, .qchip, .hbtn, .tok-btn, .icon-btn, .stepper button, .lb-paste, .lb-clear, .copy):active:not(:disabled) { transform: scale(.95); transition-duration: .1s; } /* ---------- Search field (header) ---------- */ .hbtn.search { width: 196px; justify-content: flex-start; gap: 9px; padding: 0 6px 0 12px; border-radius: 99px; color: var(--text-2); } .hbtn.search:hover { color: var(--text); } .hbtn.search kbd { background: rgba(255, 255, 255, .06); } .hbtn.search kbd { margin-left: auto; } /* ---------- Points hover card ---------- */ .hc { position: relative; } .hcard { position: absolute; z-index: 45; right: 50%; top: calc(100% + 8px); width: 260px; padding: 16px; translate: 50% 0; background: var(--s1); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(4px); pointer-events: none; transform-origin: top center; transition: opacity .16s, transform .32s var(--spring), filter .2s; transition-delay: .1s; } .hc:hover .hcard, .hc:focus-within .hcard { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .3s; } .hcard small { display: block; font-size: 12px; color: var(--text-3); } .hcard .big { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; } .hcard .big span { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-2); } .meter { height: 6px; margin: 14px 0 8px; border-radius: 99px; background: var(--s3); overflow: hidden; } .meter i { display: block; height: 100%; width: 82%; border-radius: inherit; background: var(--text); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease) .1s; } .hc:hover .meter i, .hc:focus-within .meter i { transform: scaleX(1); transition-delay: .4s; } .hcard .row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); } .hcard .row b { font-weight: 500; color: var(--text-2); } /* ---------- Copy button ---------- */ .copy { width: 24px; height: 24px; margin-left: 2px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--text-3); vertical-align: middle; } .copy:hover { color: var(--text); background: var(--s2); } .copy .icon { width: 13px; height: 13px; } .addr { display: inline-flex; align-items: center; } /* ---------- Theme switch: circular reveal from the button ---------- */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* ---------- Responsive ---------- */ .m-nav { display: none; } @media (max-width: 1240px) { .hbtn.search, html[data-bgfx-on] .hbtn.search { width: 36px; padding: 0; justify-content: center; background: none; box-shadow: none; backdrop-filter: none; } .hbtn.search:hover { background: var(--s2); } .hbtn.search > :not(.icon) { display: none; } } @media (max-width: 1080px) { .foot { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { body { overflow: auto; overflow-x: clip; } .app { height: auto; min-height: 100dvh; grid-template-rows: auto 1fr auto; } .top { grid-template-columns: auto 1fr; padding: 14px 16px; } .top .nav, .hbtn.points, .hcard, .wallet-btn .handle, .wallet-btn .chev, .hbtn.search { display: none; } .m-nav { position: relative; display: flex; justify-content: center; padding: 0 0 8px; } .m-nav a { padding: 6px 14px; border-radius: 99px; font-size: 15px; font-weight: 500; color: var(--text-3); } .m-nav a.active { color: var(--text); } .stage { padding: 8px 16px 24px; overflow: visible; margin: 0 8px; border-radius: 24px; } .stage::before, .stage::after { display: none; } .hero { margin: 28px 0 28px; } h1 { font-size: 34px; line-height: 1.3; } h1 .line { white-space: normal; } .sub { font-size: 16px; } .linkbar { height: 58px; padding-left: 18px; } .lb-paste { display: none; } .picker { grid-template-columns: minmax(0, 1fr); justify-items: center; } .pick-side { width: 100%; } .set-title { align-items: flex-start; } .dock { border-radius: 32px; } .ext-tray { flex-wrap: wrap; height: auto; padding: 12px 8px 8px 12px; row-gap: 12px; } .ext-tray .tray-t { flex-basis: calc(100% - 90px); white-space: normal; line-height: 1.35; } .tray-cta { width: 100%; justify-content: center; height: 44px; } .lb-go { width: 44px; height: 44px; } .foot { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 20px 16px; } .foot nav { justify-self: center; flex-wrap: wrap; justify-content: center; } } @media (max-height: 780px) and (min-width: 761px) { .hero { margin-bottom: 30px; } .sub { margin-top: 12px; } .linkbar { height: 58px; } .lb-go { width: 44px; height: 44px; } .btn { height: 50px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- Theme controls ---------- */ .appearance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 10px; font-size: 14px; color: var(--text-2); } .seg { position: relative; display: flex; padding: 3px; border-radius: 99px; background: var(--s2); } .seg button { height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 500; color: var(--text-3); transition: color .2s; } .seg button:hover { color: var(--text); } .seg button[aria-checked="true"] { color: var(--text); } html[data-theme="light"] .seg > .glide { background: #fff; box-shadow: var(--ring), 0 1px 3px rgba(20, 22, 22, .08); } /* Smooth colour change when switching themes (not on first paint) */ html.theme-anim, html.theme-anim * { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important; } /* ================= Light theme (Aave-style) ================= */ html[data-theme="light"] { --bg: #ffffff; --s1: #ffffff; --s2: #eef1f1; --s3: #e1e6e6; --line: rgba(20, 22, 22, 0.08); --line-2: rgba(20, 22, 22, 0.14); --text: #141414; --text-2: rgba(20, 22, 22, 0.65); --text-3: rgba(20, 22, 22, 0.45); --cta: #141414; /* mono: near-black buttons on white */ --cta-hover: #2c2c2e; --cta-ink: #ffffff; --accent: #141414; --tint: rgba(20, 22, 22, 0.06); --tint-ink: #141414; --tint-2: rgba(20, 22, 22, 0.1); --focus: rgba(20, 22, 22, 0.3); --green: #01d062; --danger: #e5484d; --paper: #f4f5f5; /* product photo panel: retailer images ship on white */ --ring: 0 0 0 1px rgba(20, 22, 22, 0.07); --lift: 0 1px 2px rgba(20, 22, 22, 0.04), 0 12px 32px -10px rgba(20, 22, 22, 0.12); color-scheme: light; } html[data-theme="light"] body { background: #fff; } html[data-theme="light"] .brand img { filter: brightness(0); opacity: .9; } /* Header: quiet links, dark "Use Aave"-style wallet pill */ html[data-theme="light"] .nav a { color: var(--text-3); } html[data-theme="light"] .nav a.active { color: var(--text); } /* white panel like the link input, not a solid black pill */ html[data-theme="light"] .hbtn.wallet-btn { background: #fff; color: var(--text); padding: 0 12px 0 5px; border-radius: 99px; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05); transition: background-color .15s, box-shadow .15s; } html[data-theme="light"] .hbtn.wallet-btn:hover, html[data-theme="light"] .open > .hbtn.wallet-btn { background: #fff; color: var(--text); box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), 0 2px 8px -2px rgba(20, 22, 22, .1); } html[data-theme="light"] .hbtn.wallet-btn .chev { color: var(--text-3); } html[data-theme="light"][data-bgfx-on] .hbtn.wallet-btn { background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); } html[data-theme="light"][data-bgfx-on] .hbtn.wallet-btn:hover, html[data-theme="light"][data-bgfx-on] .open > .hbtn.wallet-btn { background: rgba(255, 255, 255, .9); } html[data-theme="light"] .avatar { background: var(--cta); color: var(--cta-ink); border-radius: 50%; } html[data-theme="light"] .badge:not(.warn) { background: var(--cta); color: var(--cta-ink); } /* The stage is one big rounded panel, inset from the edges, with Aave's soft lavender wash */ html[data-theme="light"] .stage { box-shadow: var(--ring); background: linear-gradient(180deg, #ffffff 0%, #ffffff 35%, color-mix(in srgb, var(--cta) 9%, #fff) 100%); } /* With a background effect running, the panel turns to frosted white so the shader shows behind the hero */ html[data-theme="light"][data-bgfx-on] .stage { background: rgba(255, 255, 255, .35); } html[data-theme="light"] h1 { color: rgba(20, 22, 22, 0.92); } html[data-theme="light"] .hchip { background: #fff; box-shadow: var(--ring), 0 2px 6px -2px rgba(20, 22, 22, .08); } html[data-theme="light"] .m-ebay, html[data-theme="light"] .m-sol { box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .1); } html[data-theme="light"] .m-gen { background: var(--s2); } html[data-theme="light"] .sub { color: var(--text-2); } /* Link bar */ html[data-theme="light"] .linkbar { background: #fff; border-color: transparent; box-shadow: var(--ring), var(--lift); } html[data-theme="light"] .linkbar:hover { box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), var(--lift); } html[data-theme="light"] .linkbar:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--focus), var(--lift); } html[data-theme="light"] .linkbar.error { box-shadow: 0 0 0 2px rgba(229, 72, 77, .5), var(--lift); } html[data-theme="light"] .lb-paste:hover, html[data-theme="light"] .lb-clear:hover { background: var(--s2); } /* Quick actions: Aave's tinted secondary pills */ html[data-theme="light"] .qchip { background: var(--tint); border-color: transparent; color: var(--tint-ink); } html[data-theme="light"] .qchip:hover { background: var(--tint-2); color: var(--tint-ink); } /* Checkout card */ html[data-theme="light"] .dot { background: var(--green); } html[data-theme="light"] .stepper { background: var(--s2); } html[data-theme="light"] .stepper button:hover { background: var(--s3); } html[data-theme="light"] .tok-btn { background: var(--s2); } html[data-theme="light"] .co-total strong { color: var(--text); } html[data-theme="light"] .btn-cta:disabled { background: var(--s2); color: var(--text-3); } html[data-theme="light"] .btn-ghost { border-color: transparent; background: var(--tint); color: var(--tint-ink); } html[data-theme="light"] .btn-ghost:hover { background: var(--tint-2); } /* Menus, drawer, palette, toast */ html[data-theme="light"] .menu, html[data-theme="light"] .palette, html[data-theme="light"] .toast, html[data-theme="light"] .hcard { background: #fff; border-color: transparent; box-shadow: var(--ring), 0 24px 60px -16px rgba(20, 22, 22, .25); } /* Search field and the nav's active pill: white panels like the wallet button, so they read on the grey wash */ html[data-theme="light"] .hbtn.search { background: #fff; border-color: transparent; color: var(--text-2); box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05); } html[data-theme="light"] .hbtn.search:hover { background: #fff; color: var(--text); box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), 0 2px 8px -2px rgba(20, 22, 22, .1); } html[data-theme="light"] .hbtn.search kbd { background: var(--s2); color: var(--text-2); box-shadow: none; } html[data-theme="light"] :is(.nav, .m-nav) > .glide { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05), 0 4px 12px -6px rgba(20, 22, 22, .12); } html[data-theme="light"][data-bgfx-on] .hbtn.search, html[data-theme="light"][data-bgfx-on] :is(.nav, .m-nav) > .glide { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } html[data-theme="light"][data-bgfx-on] .hbtn.search:hover { background: rgba(255, 255, 255, .9); } html[data-theme="light"] .meter i { background: var(--cta); } html[data-theme="light"] .drawer { background: #fff; border-color: transparent; box-shadow: var(--ring), 0 24px 80px -20px rgba(20, 22, 22, .3); } html[data-theme="light"] .scrim, html[data-theme="light"] .overlay { background: rgba(20, 22, 22, 0.28); backdrop-filter: blur(2px); } html[data-theme="light"] .mhead .stats div { background: var(--s2); } html[data-theme="light"] .dr-item:hover { background: var(--s2); } html[data-theme="light"] .foot { color: var(--text-3); } html[data-theme="light"] .dock { background: rgba(255, 255, 255, .7); border-color: transparent; box-shadow: var(--ring), var(--lift); } html[data-theme="light"] .dock .linkbar { background: #fff; } html[data-theme="light"] .ext-tray { --ring-bg: #fff; } html[data-theme="light"] .marks i.more { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 2px var(--ring-bg), inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06); } html[data-theme="light"] .tray-cta { background: var(--s2); } /* Glass: while a background effect runs, surfaces over it turn frosted so they sit in it rather than on it. Translucent fill + backdrop blur + a hairline top highlight; no glow. The input inside the dock skips its own blur (the dock already frosts it) and stays a little more opaque so typing reads clearly. */ html[data-bgfx-on] .hchip, html[data-bgfx-on] .dock { -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } html[data-bgfx-on] .hchip { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .08); } html[data-bgfx-on] .dock { background: rgba(18, 18, 20, .5); border-color: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } html[data-bgfx-on] .dock .linkbar { background: rgba(0, 0, 0, .4); border-color: rgba(255, 255, 255, .1); } html[data-bgfx-on] .dock .linkbar:focus-within { background: rgba(0, 0, 0, .55); } html[data-bgfx-on] .tray-cta:not(:hover) { background: rgba(255, 255, 255, .07); } html[data-theme="light"][data-bgfx-on] .hchip { background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(20, 22, 22, .06), 0 4px 14px -6px rgba(20, 22, 22, .12); } html[data-theme="light"][data-bgfx-on] .dock { background: rgba(255, 255, 255, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(20, 22, 22, .06), var(--lift); } html[data-theme="light"][data-bgfx-on] .dock .linkbar { background: rgba(255, 255, 255, .72); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(20, 22, 22, .05), 0 2px 8px -4px rgba(20, 22, 22, .1); } html[data-theme="light"][data-bgfx-on] .dock .linkbar:focus-within { background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px var(--focus), var(--lift); } html[data-theme="light"][data-bgfx-on] .tray-cta:not(:hover) { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .05); } html[data-theme="light"] .tray-cta:hover { background: var(--cta); } @media (max-width: 1240px) { html[data-theme="light"] .hbtn.search, html[data-theme="light"][data-bgfx-on] .hbtn.search { background: none; box-shadow: none; backdrop-filter: none; } html[data-theme="light"] .hbtn.search:hover, html[data-theme="light"][data-bgfx-on] .hbtn.search:hover { background: #fff; box-shadow: var(--ring); } } @media (max-width: 760px) { } /* ================= Checkout ================= */ /* A view that takes over the stage: review & pay, then the order-placed state, in one panel that fits the viewport */ .app[data-view="checkout"] :is(.hero, .dock, .quick, .lb-msg) { display: none; } .checkout { width: min(1120px, 100%); height: min(740px, 100%); flex: none; display: flex; flex-direction: column; overflow: hidden; background: var(--s1); border: 1px solid var(--line); border-radius: 28px; animation: rise .7s var(--ease) both; } .checkout:not(.is-done) { overflow: visible; } /* menus may overhang; the scrolling column clips itself */ .ck-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 60px; padding: 0 20px 0 12px; border-bottom: 1px solid var(--line); flex: none; } .ck-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: background-color .15s, color .15s, transform .35s var(--spring); } .ck-back:hover { background: var(--s2); color: var(--text); } .ck-back:active { transform: scale(.95); } .ck-back .icon { width: 15px; height: 15px; transform: rotate(180deg); } .ck-crumbs { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-3); } .ck-crumbs li { display: inline-flex; align-items: center; gap: 6px; transition: color .3s; } .ck-crumbs li + li::before { content: ""; width: 18px; height: 1px; margin-right: 2px; background: var(--line-2); } .ck-crumbs li.done { color: var(--text-2); } .ck-crumbs li[aria-current] { color: var(--text); font-weight: 500; } .ck-crumbs .icon { width: 13px; height: 13px; stroke-width: 2.2; } .ck-crumbs li:not(.done) .icon { display: none; } .ck-lock { justify-self: end; } .is-done .ck-back, .is-done .ck-lock { visibility: hidden; } .ck-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; } .ck-main { min-height: 0; overflow: auto; padding: 0 28px 8px; scrollbar-width: thin; } .ck-sec { padding: 22px 0 24px; } .ck-sec + .ck-sec { border-top: 1px solid var(--line); } .ck-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .ck-sec-h h3, .ck-side h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .ck-sec-h h3 span { margin-left: 6px; color: var(--text-3); font-weight: 500; } .ck-aside { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); } .ck-aside b { font-weight: 500; color: var(--text); } .ck-aside .icon { width: 14px; height: 14px; } .ck-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); border-radius: 6px; transition: color .15s; } .ck-link:hover { color: var(--text); } .ck-link .icon { width: 14px; height: 14px; } /* Items */ .ck-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 6px 0; } .ck-item .dr-img { width: 52px; height: 52px; border-radius: 12px; } .ck-item .nm { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ck-item small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); } .ck-item small .mk { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; } .ck-item small .mk svg { width: 70%; height: 70%; } .ck-item .price { font-size: 14px; font-weight: 500; } /* Selectable cards (addresses, cashback) */ .ck-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .ck-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 13px 14px 14px; border-radius: 16px; text-align: left; border: 1px solid var(--line-2); transition: border-color .15s, background-color .15s, box-shadow .2s, transform .35s var(--spring); } .ck-card:hover { border-color: rgba(255, 255, 255, .22); } .ck-card:active { transform: scale(.97); transition-duration: .1s; } .ck-card[aria-checked="true"] { border-color: var(--text); background: var(--s2); box-shadow: inset 0 0 0 .5px var(--text); } .ck-card .top { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; margin-bottom: 10px; color: var(--text-2); } .ck-card .top .icon { width: 17px; height: 17px; } .ck-card b { font-size: 14px; font-weight: 600; } .ck-card small { display: block; width: 100%; font-size: 12.5px; color: var(--text-3); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ck-card.wrap small { white-space: normal; } /* Radio mark: a ring that closes into a solid dot with a hole */ .rd { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .3s var(--spring); } [aria-checked="true"] > .top .rd { box-shadow: inset 0 0 0 5px var(--text); } .ck-new { justify-content: center; align-items: center; gap: 6px; min-height: 92px; border-style: dashed; color: var(--text-2); } .ck-new .icon { width: 18px; height: 18px; } .ck-new:hover { color: var(--text); } #ckCbOpts { grid-template-columns: 1fr 1fr; } .ck-tag { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 99px; background: var(--tint); color: var(--tint-ink); font-size: 11px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; } .ck-tag.mono { font-family: var(--mono); font-size: 10.5px; } /* New address: folds open under the cards */ .ck-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .ck-fold.open { grid-template-rows: 1fr; } /* Padded out by the focus ring's width (and pulled back by as much), so the clip never cuts the ring on a field's sides */ .ck-fold > div { min-height: 0; overflow: hidden; margin: 0 -4px; padding: 0 4px; } .ck-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0 2px; opacity: 0; filter: blur(4px); transition: opacity .25s, filter .25s; } .ck-fold.open .ck-form { opacity: 1; filter: none; transition-delay: .12s; } .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fld.full { grid-column: 1 / -1; } .fld > span { font-size: 12px; color: var(--text-3); } .fld input, .fld select, .fld .sel-btn { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); font: inherit; font-size: 14px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; } .fld select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px; } .fld .sel { position: relative; } .fld .sel > .icon { position: absolute; right: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--text-3); pointer-events: none; transition: transform .3s var(--spring); } /* Desktop: the select hands its list to one of our menus (see fancySelect); phones keep the system picker */ .fld .sel.fancy select { display: none; } .fld .sel-btn { display: flex; align-items: center; padding-right: 36px; text-align: left; white-space: nowrap; cursor: pointer; } .fld .sel.open > .icon { transform: rotate(180deg); } .fld .sel .menu { left: 0; right: 0; min-width: 0; transform-origin: bottom center; } .fld input::placeholder { color: var(--text-3); } /* The focus ring is drawn inside the field: these forms sit in boxes that clip (the fold that slides open), and a ring outside the border lost its sides there */ .fld input:focus, .fld select:focus, .fld .sel-btn:focus-visible, .fld .sel.open .sel-btn { border-color: transparent; box-shadow: inset 0 0 0 2px var(--focus); } .fld.bad input { border-color: rgba(255, 107, 102, .6); animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .ck-form-a { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; } .ck-form-a .btn { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; } /* Summary column */ /* Not a scroll box (it fits the panel), so the token menu can open over the header instead of being cut off */ .ck-side { position: relative; z-index: 2; min-height: 0; display: flex; flex-direction: column; padding: 22px 24px 20px; border-left: 1px solid var(--line); border-radius: 0 0 27px 0; background: rgba(0, 0, 0, .28); } .ck-side .menu { max-height: min(444px, calc(100dvh - 160px)); overflow-y: auto; scrollbar-width: thin; } .ck-lines { list-style: none; margin: 14px 0 0; padding: 0; } .ck-lines li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; font-size: 14px; color: var(--text-2); } .ck-lines li > span:last-child { display: inline-flex; align-items: center; gap: 8px; color: var(--text); } .ck-lines li > span:first-child { display: inline-flex; align-items: center; gap: 7px; } .ck-lines s { color: var(--text-3); font-size: 13px; } .ck-lines .dim { color: var(--text-3) !important; } .ck-lines .neg { color: var(--text); } /* Optional lines (promo, credit) open and close their height */ .ck-lines li.opt { min-height: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .25s, min-height .4s var(--ease); } .ck-lines li.opt.show { min-height: 30px; max-height: 30px; opacity: 1; } .ck-x { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); } .ck-x:hover { color: var(--text); background: var(--s3); } .ck-x .icon { width: 11px; height: 11px; stroke-width: 2.2; } .ck-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .ck-row b { display: block; font-size: 14px; font-weight: 500; } .ck-row small { display: block; font-size: 12px; color: var(--text-3); } /* Switch */ .sw { position: relative; width: 40px; height: 24px; border-radius: 99px; flex: none; background: var(--s3); transition: background-color .2s; } .sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .4s var(--spring), background-color .2s; } .sw[aria-checked="true"] { background: var(--cta); } .sw[aria-checked="true"] i { transform: translateX(16px); background: var(--cta-ink); } .sw:active i { width: 22px; } .sw[aria-checked="true"]:active i { transform: translateX(12px); } .ck-promo { margin-top: 12px; min-height: 40px; display: flex; align-items: center; } .ck-promo-f { display: flex; gap: 8px; width: 100%; animation: pop .35s var(--spring) both; } .ck-promo-f input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); font-size: 14px; outline: none; text-transform: uppercase; letter-spacing: .04em; transition: border-color .15s, box-shadow .15s; } .ck-promo-f input::placeholder { text-transform: none; letter-spacing: 0; color: var(--text-3); } .ck-promo-f input:focus { border-color: transparent; box-shadow: inset 0 0 0 2px var(--focus); } .ck-promo-f.bad input { border-color: rgba(255, 107, 102, .6); animation: shake .4s; } .ck-promo-f .btn { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; } .ck-side .co-total { margin-top: auto; padding-top: 18px; } .ck-side .co-total strong { font-size: 34px; } .ck-pay { position: relative; width: 100%; margin-top: 16px; overflow: hidden; isolation: isolate; } /* Progress fill while the wallet signs and the order is placed */ .ck-pay .bar { position: absolute; inset: 0; z-index: -1; background: var(--cta-ink); opacity: .1; transform-origin: left; transform: scaleX(0); } .ck-pay[data-state="idle"] .bar { transition: none !important; } .ck-pay:is([data-state="sign"], [data-state="place"], [data-state="done"]) { pointer-events: none; } .ck-pay [data-s="idle"] { gap: .3em; } .ck-side .dr-note { margin-top: 12px; } .ck-paybar { display: contents; } /* a box of its own only on phones, where it pins to the bottom */ /* ---------- Order placed ---------- */ .ck-done { flex: 1; min-height: 0; overflow: auto; display: flex; padding: 28px 24px; } .ck-done-in { width: min(560px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; } .ck-done-in > * { animation: rise .8s var(--ease) both; animation-delay: calc(var(--n, 0) * 80ms + 150ms); } .ck-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--cta-ink); animation: popin .7s var(--spring) both !important; } .ck-check .icon { width: 28px; height: 28px; stroke-width: 2.4; } .ck-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s .45s var(--ease) forwards; } @keyframes popin { from { transform: scale(.4); opacity: 0; } } .ck-done h2 { margin: 18px 0 0; font-size: 30px; font-weight: 550; letter-spacing: -0.035em; line-height: 1.15; } .ck-lede { margin: 8px 0 0; max-width: 420px; font-size: 15px; color: var(--text-2); text-wrap: balance; } .ck-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-size: 13px; color: var(--text-3); } .ck-meta b { font-weight: 500; color: var(--text); } .ck-meta > i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); } .ck-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .ck-meta a:hover { color: var(--text); } .ck-meta .icon { width: 13px; height: 13px; } .ck-track { list-style: none; margin: 30px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); } .ck-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 13px; } .ck-track li b { font-weight: 500; color: var(--text-2); } .ck-track li small { font-size: 12px; color: var(--text-3); } .ck-track li:is(.done, .now) b { color: var(--text); } .ck-track i { position: relative; z-index: 1; width: 12px; height: 12px; margin-bottom: 10px; border-radius: 50%; background: var(--s1); box-shadow: inset 0 0 0 2px var(--line-2); } .ck-track li + li::before, .ck-track li + li::after { content: ""; position: absolute; top: 5px; left: calc(-50% + 12px); right: calc(50% + 12px); height: 2px; border-radius: 2px; background: var(--line-2); } .ck-track li + li::after { background: var(--text); transform-origin: left; transform: scaleX(0); } .ck-track li:is(.done, .now)::after { animation: fillx .7s 1s var(--ease) forwards; } @keyframes fillx { to { transform: scaleX(1); } } /* Passed: a filled dot in the line colour with a check, popping in as the line reaches it */ :root:root .ck-track li.done i { width: 18px; height: 18px; margin: -3px 0 7px; background: var(--text); box-shadow: none; animation: ckdone .45s .35s var(--spring) both; } .ck-track li.done i::before { content: ""; position: absolute; inset: 0; background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; } @keyframes ckdone { from { scale: .4; opacity: 0; } } .ck-track li.now i { box-shadow: inset 0 0 0 2px var(--text); } /* In progress: a small arc circling the current step */ .ck-track li.now i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--text-2); animation: spin 1.1s linear infinite; } .ck-earn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 28px; } .ck-earn > div { padding: 14px 16px; border-radius: 16px; background: var(--s2); text-align: left; } .ck-earn small { display: block; font-size: 12px; color: var(--text-3); } .ck-earn > div > b { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; } .ck-share { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; border: 1px solid var(--line); text-align: left; } .ck-share > .icon { width: 18px; height: 18px; color: var(--text-2); } .ck-share .tx { flex: 1; min-width: 0; } .ck-share .tx b { display: block; font-size: 14px; font-weight: 500; } .ck-share .tx small { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ck-share .btn { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 11px; } .ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 24px; } /* Light */ html[data-theme="light"] .checkout { background: #fff; border-color: transparent; box-shadow: var(--ring), var(--lift); } html[data-theme="light"] .ck-side { background: #fafbfb; } html[data-theme="light"] .ck-card { border-color: rgba(20, 22, 22, .1); background: #fff; } html[data-theme="light"] .ck-card:hover { border-color: rgba(20, 22, 22, .2); } html[data-theme="light"] .ck-card[aria-checked="true"] { border-color: var(--text); background: #fff; box-shadow: inset 0 0 0 .5px var(--text), 0 6px 16px -10px rgba(20, 22, 22, .3); } html[data-theme="light"] .ck-new { background: transparent; } html[data-theme="light"] :is(.fld input, .fld select, .fld .sel-btn, .ck-promo-f input) { background: #fff; border-color: rgba(20, 22, 22, .1); } html[data-theme="light"] .ck-earn > div { background: var(--s2); } html[data-theme="light"] .ck-track i { background: #fff; } /* Glass while a background effect runs */ html[data-bgfx-on] .checkout { background: rgba(12, 12, 13, .62); border-color: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); } html[data-bgfx-on] .ck-side { background: rgba(0, 0, 0, .22); } html[data-bgfx-on] .ck-track i { background: #141415; } html[data-theme="light"][data-bgfx-on] .checkout { background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(20, 22, 22, .06), var(--lift); } html[data-theme="light"][data-bgfx-on] .ck-side { background: rgba(250, 251, 251, .55); } html[data-theme="light"][data-bgfx-on] .ck-track i { background: #fff; } @media (max-width: 980px) { .ck-body { grid-template-columns: minmax(0, 1fr) 340px; } .ck-main { padding: 0 20px 8px; } .ck-side { padding: 20px; } } @media (max-width: 760px) { .checkout { height: auto; border-radius: 24px; margin-top: 8px; overflow: visible; } .ck-head { grid-template-columns: auto 1fr; padding: 0 14px 0 6px; } .ck-crumbs { display: none; } .ck-body { display: block; } .ck-main { overflow: visible; padding: 0 16px; } .ck-side { overflow: visible; border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 24px 24px; padding: 20px 16px 16px; } .ck-side .co-total { margin-top: 18px; } .ck-form { grid-template-columns: 1fr; } .ck-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .ck-card { padding: 12px; } .ck-new { min-height: 84px; } .ck-done { padding: 28px 16px; } .ck-done h2 { font-size: 26px; } .ck-track li small { display: none; } .ck-earn > div > b { font-size: 19px; } .ck-actions { grid-template-columns: 1fr; } } /* ================= Account ================= */ /* Profile, orders, referrals, addresses, saved: a page that fills the stage. A plain sticky nav on the left, the content on the right, and the stage itself scrolls. Borders only on things you can click */ :root { --warn: #f5b041; --warn-bg: rgba(245, 176, 65, .1); --warn-line: rgba(245, 176, 65, .24); --warn-solid: #f5b041; } html[data-theme="light"] { --warn: #9a5800; --warn-bg: rgba(245, 158, 11, .1); --warn-line: rgba(245, 158, 11, .3); } .app[data-view="account"] :is(.hero, .dock, .quick, .lb-msg) { display: none; } .app[data-view="account"] .stage { padding-top: 0; scrollbar-gutter: stable; } .app[data-view="account"] .stage::before, .app[data-view="account"] .stage::after { display: none; } .acct { width: min(1480px, 100%); flex: none; display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 64px; padding: 40px 24px 72px; animation: rise .7s var(--ease) both; } .ac-rail { position: sticky; top: 40px; align-self: start; display: flex; flex-direction: column; gap: 22px; } .ac-me { display: flex; align-items: center; gap: 11px; padding: 2px 6px; } .ac-me .avatar { width: 40px; height: 40px; font-size: 15px; } .ac-me strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .ac-me small { font-family: var(--mono); font-size: 12px; color: var(--text-3); } .ac-nav { position: relative; display: flex; flex-direction: column; gap: 2px; } .ac-nav button { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px 0 12px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-2); text-align: left; transition: color .15s; } .ac-nav button:hover, .ac-nav button[aria-current] { color: var(--text); } .ac-nav .icon { width: 17px; height: 17px; } /* Orders checklist: on hover the board nudges and each tick redraws, row by row */ .ic-orders { overflow: visible; } .ic-orders :is(.bd, .ln) { transform-box: view-box; transform-origin: 12px 21px; } .ic-orders .ln { transform-origin: 14px 0; } .ic-orders .ck { stroke-dasharray: 1; } .ac-nav button:is(:hover, [aria-current]) .ic-orders .bd { animation: ord-nudge .45s var(--ease); } .ac-nav button:is(:hover, [aria-current]) .ic-orders .ck { animation: ord-tick .4s var(--ease) both; } .ac-nav button:is(:hover, [aria-current]) .ic-orders .ln { animation: ord-line .35s var(--ease) both; } .ac-nav button:is(:hover, [aria-current]) .ic-orders .ln { animation-delay: .12s; } .ac-nav button:is(:hover, [aria-current]) .ic-orders .ck + .ck { animation-delay: .2s; } .ac-nav button:is(:hover, [aria-current]) .ic-orders .ln + .ln { animation-delay: .32s; } @keyframes ord-nudge { 40% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } } @keyframes ord-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes ord-line { from { transform: scaleX(0); } } .ac-nav > .glide { border-radius: 12px; } .ac-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; background: var(--warn-solid); color: #141414; font-size: 11px; font-weight: 650; font-feature-settings: "tnum"; animation: badge-in .45s var(--spring) both; } .ac-count:empty { display: none; } @keyframes growx { from { transform: scaleX(0); } } .ac-main { position: relative; min-width: 0; } .ac-pane { padding: 0; } /* Switching tabs or filters only crossfades: nothing slides, so the page never jumps */ .ac-pane:not([hidden]), #acList:not([hidden]), #acDetail:not([hidden]) { animation: fade .25s var(--ease) both; } .ac-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .ac-h h2 { margin: 0; font-size: 36px; font-weight: 550; letter-spacing: -0.04em; line-height: 1.1; } .ac-h p { margin: 8px 0 0; font-size: 15px; color: var(--text-3); text-wrap: balance; } .btn.sm { height: 38px; padding: 0 14px; gap: 7px; font-size: 13px; border-radius: 12px; } .btn.sm .icon { width: 15px; height: 15px; } .btn .brand-i { width: 15px; height: 15px; fill: currentColor; } .ac-sec { margin-top: 48px; } .ac-sec .ck-sec-h { margin-bottom: 10px; } /* Two columns of sections side by side */ .ac-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; } .ac-cols .ac-go { display: none; } .ac-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-3); } .ac-note .icon { width: 14px; height: 14px; margin-top: 1px; } .mono { font-family: var(--mono); } /* Links people read and share: sans, with the fixed part stepped back so theirs stands out */ .url { font-family: var(--font); font-weight: 550; letter-spacing: -0.01em; } .url i { font-style: normal; font-weight: 450; opacity: .55; } /* Headline figures: open type, split by one hairline, no boxes */ .ac-grid2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .ac-grid2 > .ac-card + .ac-card:not(.ac-box) { padding-left: 48px; margin-left: 48px; border-left: 1px solid var(--line); } .ac-card { position: relative; min-width: 0; } .ac-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ac-k { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); } .ac-k .icon { width: 15px; height: 15px; } .ac-k .diamond { width: 13px; height: 13px; color: var(--accent); } .ac-big { display: block; margin-top: 14px; font-size: 64px; font-weight: 550; letter-spacing: -0.05em; line-height: 1; } .ac-sub { display: block; margin-top: 10px; font-size: 14px; color: var(--text-3); } .ac-split { display: flex; gap: 40px; margin-top: 28px; } .ac-split small { display: block; font-size: 12px; color: var(--text-3); } .ac-split b { display: block; margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; } .ac-split em, .ac-o-total em, .ac-paid em { font-style: normal; font-weight: 500; color: var(--text-3); margin-left: 4px; } /* Rank ladder: the bar runs Member → Legend, a notch at each rank */ .ac-ladder { position: relative; margin: 28px 0 52px; } .ac-ladder .track { display: block; height: 6px; border-radius: 99px; background: var(--s3); overflow: hidden; } .ac-ladder .track i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--text); transform-origin: left; animation: growx 1.1s .3s var(--ease) both; } .ac-ladder ol { list-style: none; margin: 0; padding: 0; } .ac-ladder li { position: absolute; top: 14px; left: calc(var(--at) * 100%); translate: -50% 0; display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 1.3; color: var(--text-3); white-space: nowrap; } .ac-ladder li:first-child { translate: 0 0; align-items: flex-start; } .ac-ladder li:last-child { translate: -100% 0; align-items: flex-end; } .ac-ladder li::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 6px; margin-left: -1px; background: var(--s1); } .ac-ladder li:is(:first-child, :last-child)::before { display: none; } .ac-ladder li b { font-weight: 500; } .ac-ladder li small { font-size: 11px; } .ac-ladder li.done { color: var(--text-2); } .ac-ladder li.now b { color: var(--text); font-weight: 600; } .ac-perks { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: 13.5px; color: var(--text-2); } .ac-perks li { display: flex; align-items: center; gap: 9px; } .ac-perks .icon { width: 14px; height: 14px; color: var(--text); stroke-width: 2.2; } .ac-perks li.next, .ac-perks li.next .icon { color: var(--text-3); } /* Stat strip: a ruled row, hairlines between the figures */ .ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-block: 1px solid var(--line); } .ac-pane .ac-stats.ac-box { margin-top: 16px; border-block: 0; } .ac-stats.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; } .ac-stats > div { position: relative; min-width: 0; padding: 20px 24px; } .ac-stats:not(.ac-box) > div:first-child { padding-left: 0; } .ac-stats > div + div { border-left: 1px solid var(--line); } .ac-stats small { display: block; font-size: 12px; color: var(--text-3); } .ac-stats b { display: block; margin-top: 4px; font-size: 28px; font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; } /* Stats size off the column they sit in: four across needs ~760px before "$10,789.40" runs into its neighbour */ .ac-main, .lb { container: panel / inline-size; } @container panel (max-width: 760px) { .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-stats.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ac-stats > div { padding: 16px; } .ac-stats > div:nth-child(3) { border-left: 0; padding-left: 0; } .ac-stats:not(.c3) > div:nth-child(n+3) { border-top: 1px solid var(--line); } .ac-stats.c3 > div:nth-child(3) { border-left: 1px solid var(--line); padding-left: 16px; } .ac-stats b { font-size: 22px; } } @container panel (max-width: 480px) { .ac-stats.c3 b { font-size: 18px; } } /* Each figure gets a context line under it */ .ac-sub { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-sub em { font-style: normal; color: var(--text-2); } .ac-eye { position: absolute; top: 14px; right: 12px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: background-color .15s, color .15s; } .ac-eye:hover { background: var(--s2); color: var(--text); } .ac-eye .icon { width: 15px; height: 15px; } /* Unpaid order: one amber card that says what to do */ /* Unpaid order: a plain card like the rest, led by the product, with the hold time as a quiet label above it */ .ac-due { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; padding: 12px 14px 12px 12px; } #acOrders .ac-due { margin: 0 0 12px; } .ac-due .dr-img { width: 56px; height: 56px; border-radius: 14px; } .ac-due .tx { flex: 1; min-width: 0; } .ac-due .tx b { display: block; margin: 2px 0 1px; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-due .tx small { display: block; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-due .tx small.k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-2); } .ac-due .tx small.k .icon { width: 13px; height: 13px; flex: none; } /* Account details */ .ac-dl { margin: 0; } .ac-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-size: 14px; border-top: 1px solid var(--line); } .ac-dl dt { display: flex; align-items: center; gap: 10px; color: var(--text-3); } .ac-dl dt .icon { width: 15px; height: 15px; } .ac-dl dt .sol { width: 14px; height: 14px; fill: currentColor; } .ac-dl dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); } .ac-ok { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); } /* Orders: toolbar */ .ac-search { display: flex; align-items: center; gap: 9px; width: 320px; height: 38px; padding: 0 7px 0 13px; border-radius: 99px; background: var(--s2); color: var(--text-3); cursor: text; transition: box-shadow .15s, color .15s; } .ac-search:focus-within { box-shadow: 0 0 0 2px var(--focus); color: var(--text-2); } .ac-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 14px; color: var(--text); } .ac-search input::placeholder { color: var(--text-3); } .ac-search .icon { width: 15px; height: 15px; } .ac-search:focus-within kbd { opacity: 0; } .ac-search kbd { background: var(--s3); transition: opacity .15s; } .ac-filter { width: max-content; margin-bottom: 6px; } .ac-filter button { flex: none; height: 30px; padding: 0 13px; font-size: 13px; white-space: nowrap; } .ac-filter .n { margin-left: 6px; color: var(--text-3); font-feature-settings: "tnum"; } .ac-filter .n:empty { display: none; } .ac-filter .n.zero { opacity: .5; } /* Orders: rows */ /* Rows size off their list, not the window: the same list sits full width in Orders and in a narrow column on Overview */ .ac-orders, #acOrders { position: relative; container: orders / inline-size; } .ac-orders > .glide, #acOrders > .glide { border-radius: 16px; } .ac-month { padding: 20px 12px 6px; font-size: 12px; font-weight: 500; color: var(--text-3); } .ac-order { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(150px, 240px) 130px 32px; align-items: center; gap: 20px; width: 100%; padding: 12px 16px 12px 12px; border-radius: 16px; text-align: left; } .ac-thumbs { position: relative; height: 52px; } .ac-thumbs .dr-img { position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 2px var(--s1); transition: translate .4s var(--spring), rotate .4s var(--spring); } .ac-thumbs .dr-img:first-child { z-index: 1; } .ac-thumbs .dr-img + .dr-img { scale: .86; translate: 12px 0; } .ac-order:hover .ac-thumbs .dr-img + .dr-img { translate: 16px 0; rotate: 6deg; } .ac-o-main b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-o-main b span { color: var(--text-3); font-weight: 400; } .ac-o-main small, .ac-store { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--text-3); white-space: nowrap; } .ac-o-main small { overflow: hidden; } :is(.ac-o-main, .ac-store, .ac-prod) .mk { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; flex: none; } :is(.ac-o-main, .ac-store, .ac-prod) .mk svg { width: 70%; height: 70%; } .ac-o-st { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-3); white-space: nowrap; } .ac-o-st > span:first-child { overflow: hidden; text-overflow: ellipsis; } .ac-o-st b { font-weight: 500; color: var(--text); } [data-st="unpaid"] .ac-o-st b { color: var(--warn); } [data-st="refunded"] .ac-o-st b { color: var(--text-2); } /* Four-step progress: done, current (breathing), to come */ .ac-bar4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 100%; max-width: 156px; } .ac-bar4 i { height: 3px; border-radius: 2px; background: var(--line-2); } .ac-bar4 i.on { background: var(--text); } .ac-bar4 i.now { background: var(--text-2); animation: breathe 1.8s ease-in-out infinite; } [data-st="unpaid"] .ac-bar4 i.now { background: var(--warn); } @keyframes breathe { 50% { opacity: .35; } } .ac-o-total { text-align: right; font-size: 14px; font-weight: 500; white-space: nowrap; } [data-st="refunded"] .ac-o-total { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-2); } @container orders (max-width: 760px) { .ac-order { grid-template-columns: 62px minmax(0, 1fr) 150px auto 32px; gap: 16px; } } /* Narrow list: name and store across the top, status and total share the line under it */ @container orders (max-width: 620px) { .ac-order { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 14px; } .ac-thumbs { grid-row: span 2; align-self: start; } .ac-thumbs .dr-img { width: 46px; height: 46px; } .ac-o-main { grid-column: 2 / -1; } .ac-o-st { grid-column: 2; grid-row: 2; } .ac-o-total { grid-column: 3; grid-row: 2; align-self: start; } .ac-order[data-st="unpaid"] .ac-o-main { grid-column: 2; } .ac-del { grid-column: 3; grid-row: 1; justify-self: end; margin: -6px -4px 0 0; } } .ac-go { width: 16px; height: 16px; color: var(--text-3); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--spring), color .2s; } .ac-order:hover .ac-go, .ac-order:focus-visible .ac-go { opacity: 1; transform: none; color: var(--text); } .ac-go { justify-self: center; } /* Unpaid rows trade the arrow for a delete button, so an abandoned order goes in one click (with undo) */ .ac-del { justify-self: center; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--text-3); transition: background-color .15s, color .15s, transform .35s var(--spring); } .ac-del .icon { width: 16px; height: 16px; } .ac-order:hover .ac-del { color: var(--text-2); } .ac-order .ac-del:is(:hover, :focus-visible) { background: rgba(255, 107, 102, .12); color: var(--danger); } .ac-del:active { transform: scale(.9); transition-duration: .1s; } .ac-more { display: flex; margin: 18px auto 0; } .ac-more .spinner { width: 15px; height: 15px; } .ac-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 64px 16px; text-align: center; font-size: 14px; color: var(--text-3); } .ac-empty > .icon { width: 26px; height: 26px; margin-bottom: 10px; color: var(--text-2); } .ac-empty b { font-size: 15px; font-weight: 500; color: var(--text); } .ac-empty .btn { margin-top: 14px; } /* Status pill */ /* Each status gets its own soft tint (full-colour text on a ~15% pill), so it reads on any card in either theme: amber waits on you, blue is on its way, green is done, refunded is a plain outline */ .ac-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; --c: #6ea8ff; background: rgba(77, 148, 255, .15); color: var(--c); } .ac-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ac-pill[data-st="unpaid"] { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); } .ac-pill[data-st="delivered"] { background: rgba(61, 220, 132, .14); color: #3ddc84; } .ac-pill[data-st="refunded"] { background: none; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); } html[data-theme="light"] .ac-pill { background: rgba(37, 99, 235, .1); color: #1d5fd1; } html[data-theme="light"] .ac-pill[data-st="unpaid"] { background: var(--warn-bg); color: var(--warn); } html[data-theme="light"] .ac-pill[data-st="delivered"] { background: rgba(22, 163, 74, .12); color: #15803d; } html[data-theme="light"] .ac-pill[data-st="refunded"] { background: none; color: var(--text-2); } .ac-pill:is([data-st="paid"], [data-st="ordered"], [data-st="shipped"])::before { animation: breathe 1.8s ease-in-out infinite; } /* Order detail */ .ac-d-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 20px -12px; } .ac-d-act { display: flex; gap: 8px; } .ac-d-hero .ac-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--text-3); } .ac-d-hero .ac-meta b { font-weight: 500; color: var(--text-2); } .ac-d-hero h2 { margin: 14px 0 0; font-size: 40px; font-weight: 550; letter-spacing: -0.04em; line-height: 1.1; } .ac-d-hero p { margin: 6px 0 0; font-size: 14px; color: var(--text-2); } .ac-d-hero p a, .ac-help a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } .ac-d-hero p a:hover, .ac-help a:hover { text-decoration-color: var(--text-2); } .acct .ck-track { margin: 40px 0 8px; } .ac-d-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; } .ac-d-side { display: flex; flex-direction: column; gap: 32px; padding-top: 48px; } .ac-item-r { display: inline-flex; align-items: center; gap: 4px; } .ac-ext { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: background-color .15s, color .15s; } .ac-ext:hover { background: var(--s2); color: var(--text); } .ac-ext .icon { width: 14px; height: 14px; } /* Activity: newest on top, a thread joining the dots */ .ac-tl { list-style: none; margin: 4px 0 0; padding: 0; } .ac-tl li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; padding-bottom: 18px; font-size: 14px; } .ac-tl li::before { content: ""; position: absolute; left: 9.5px; top: 17px; bottom: 1px; width: 1px; background: var(--line-2); } .ac-tl li:last-child { padding-bottom: 0; } .ac-tl li:last-child::before { display: none; } .ac-tl i { width: 9px; height: 9px; margin: 6px 0 0 5.5px; border-radius: 50%; background: var(--text-3); } .ac-tl li:first-child i { background: var(--text); box-shadow: 0 0 0 4px var(--s2); } .ac-tl b { display: block; font-weight: 500; } .ac-tl small { display: block; font-size: 13px; color: var(--text-3); } .ac-tl time { padding-top: 1px; font-size: 12px; color: var(--text-3); white-space: nowrap; } /* Side cards */ .ac-d-side .ac-card { padding-top: 14px; border-top: 1px solid var(--line); } .ac-d-side .ck-lines { margin-top: 10px; } .ac-d-side .ck-lines li { min-height: 28px; font-size: 13px; } .ac-paid { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); } .ac-paid b { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); } .ac-paid em { font-size: 13px; } .ac-tx { display: flex; align-items: center; gap: 2px; margin-top: 8px; font-size: 12px; color: var(--text-3); } .ac-tx span { flex: 1; font-family: var(--mono); } .ac-tx .ac-ext { width: 24px; height: 24px; border-radius: 6px; } .ac-tx .ac-ext .icon { width: 13px; height: 13px; } .ac-earned { display: flex; gap: 32px; margin-top: 16px; } .ac-earned span { font-size: 12px; color: var(--text-3); } .ac-earned b { display: block; font-size: 14px; font-weight: 600; color: var(--text); } .ac-addr-c b { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; } .ac-addr-c small { display: block; font-size: 13px; color: var(--text-3); } .ac-help { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13px; color: var(--text-3); } .ac-help .icon { width: 15px; height: 15px; } .ac-refund { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 16px; border-radius: 16px; background: var(--s2); font-size: 14px; color: var(--text-2); } .ac-refund .icon { width: 18px; height: 18px; color: var(--text); } /* Referrals */ .ac-invite { display: flex; align-items: center; gap: 8px; max-width: 720px; padding: 10px 10px 10px 18px; border-radius: 20px; background: var(--s2); } .ac-invite .t { flex: 1; min-width: 0; } .ac-invite small { display: block; font-size: 12px; color: var(--text-3); } .ac-invite .t b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-invite .icon-btn { width: 38px; height: 38px; border-radius: 12px; background: var(--s3); color: var(--text-2); transition: background-color .15s, color .15s, transform .35s var(--spring); } .ac-invite .icon-btn:hover { color: var(--text); } .ac-invite .icon-btn svg { width: 15px; height: 15px; fill: currentColor; } .ac-invite .btn { min-width: 118px; } .ac-steps { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 40px 0 0; padding: 0; } .ac-steps li { counter-increment: st; } .ac-steps li::before { content: counter(st); width: 22px; height: 22px; margin-bottom: 12px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); font-size: 12px; font-weight: 600; color: var(--text-2); } .ac-steps b { display: block; font-size: 14px; font-weight: 600; } .ac-steps small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-3); } .ac-ref { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 90px; align-items: center; gap: 16px; padding: 14px 0; font-size: 14px; border-top: 1px solid var(--line); } .ac-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); font-size: 13px; font-weight: 600; color: var(--text-2); } .ac-ref .nm b { display: block; font-weight: 500; } .ac-ref .nm small { display: block; font-size: 12px; color: var(--text-3); } .ac-ref .pts { text-align: right; font-weight: 500; } /* Addresses */ .ac-addrs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .ac-addr { cursor: default; } .ac-addr:active { transform: none; } .ac-addr.just { animation: settle .5s var(--spring); } .ac-addr.just .ck-tag { animation: popin .35s .1s var(--spring) backwards; } @keyframes settle { from { scale: .97; opacity: .5; } } .ac-addr small + small { margin-top: 2px; } .ac-addr-a { display: flex; gap: 14px; margin-top: 14px; padding-top: 12px; width: 100%; border-top: 1px solid var(--line); } .ac-addr-a .ck-link:disabled { color: var(--text-3); opacity: .5; } .ac-addr-a .ck-link.rm:hover:not(:disabled), .ac-addr-a .ck-link.rm:focus-visible { color: var(--danger); } .ac-addr-a.ask { align-items: center; animation: fade .2s var(--ease); } .ac-addr-a.ask > span { margin-right: auto; font-size: 13px; font-weight: 500; color: var(--text); } .ac-addr-a.ask .rm { color: var(--danger); } .acct .ck-new { min-height: 150px; } /* Saved */ .ac-saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .ac-prod { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 20px; } /* Every photo box is the same size whatever the image's shape: the image sits on top, it never sizes the box */ .ac-prod .ph { position: relative; aspect-ratio: 4 / 3; border-radius: 19px 19px 0 0; background: var(--paper); } .ac-prod .ph img { position: absolute; inset: 0; margin: auto; width: 60%; height: 64%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--spring); } .ac-prod:hover .ph img { transform: scale(1.06); } /* Price change since saving: green when it dropped, red when it went up. The tag sits on the light photo panel in both themes */ .ac-prod .ph .ck-tag { position: absolute; left: 10px; top: 10px; gap: 3px; height: 22px; padding: 0 8px 0 6px; font-size: 12px; font-weight: 600; font-feature-settings: "tnum"; } .ac-prod .ph .ck-tag .icon { width: 12px; height: 12px; stroke-width: 2.4; } .ac-prod .ph .ck-tag.down { background: rgba(22, 163, 74, .14); color: #15803d; } .ac-prod .ph .ck-tag.down .icon { rotate: 90deg; } .ac-prod .ph .ck-tag.up { background: rgba(229, 72, 77, .14); color: #c9262c; } .ac-prod .ph .ck-tag.up .icon { rotate: -90deg; } .ac-heart { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; color: #e5484d; transition: background-color .15s, transform .35s var(--spring); } .ac-heart:hover { background: rgba(229, 72, 77, .12); color: #e5484d; } .ac-heart[aria-pressed="true"] svg { fill: currentColor; } .ac-heart:hover svg { scale: 1.1; transition: scale .3s var(--spring); } .ac-prod .bd { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px 14px; } .ac-prod .bd > small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .ac-prod .bd > b { min-height: 2.7em; font-size: 14px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ac-prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } .ac-prow b { font-size: 15px; font-weight: 600; } .ac-prow s { margin-left: 6px; font-size: 12px; color: var(--text-3); } .ac-add { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; width: auto; height: 34px; padding: 0 13px 0 11px; border-radius: 99px; font-size: 13px; font-weight: 600; background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s, box-shadow .15s, transform .35s var(--spring); } .ac-add .icon { width: 15px; height: 15px; } .ac-add:hover { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1px var(--text-3); } :is(.ac-add, .ac-heart, .ac-invite .icon-btn):active { transform: scale(.9); transition-duration: .1s; } /* Panels: every group of facts sits in its own card, so a page reads as a few blocks instead of one long sheet */ .ac-box { position: relative; min-width: 0; padding: 22px 24px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); } html[data-bgfx-on] .ac-box { background: rgba(255, 255, 255, .035); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } html[data-theme="light"] .ac-box { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .04); } html[data-theme="light"][data-bgfx-on] .ac-box { background: rgba(255, 255, 255, .78); } .ac-box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-bottom: 14px; } .ac-box-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .ac-box-h h3 .num { font-weight: 500; color: var(--text-3); } .ac-stack { display: grid; gap: 16px; align-content: start; min-width: 0; } .ac-pane :is(.ac-box, .ac-stack, .ac-invite) + :is(.ac-box, .ac-stack) { margin-top: 16px; } .ac-pane :is(.ac-d-grid, .ac-cols, .ac-grid2, .ac-stack) > :is(.ac-box, .ac-stack) + :is(.ac-box, .ac-stack) { margin-top: 0; } /* Overview */ .ac-grid2 { gap: 16px; } .ac-box .ac-big { font-size: 52px; } .ac-box .ac-ladder { margin-bottom: 48px; } .ac-box .ac-ladder li::before { background: var(--s1); } .ac-stats.ac-box { padding: 0; border: 0; } .ac-stats.ac-box > div { padding: 20px 24px; } .ac-cols { gap: 16px; margin-top: 16px; } .ac-box .ac-dl > div:first-child { border-top: 0; } .ac-box .ac-dl > div { min-height: 50px; } .ac-box .ac-orders { margin: 0 -12px -10px; } /* Order detail: a status card on top, then items and activity beside payment and delivery */ .ac-d-status .ac-d-hero h2 { margin-top: 12px; font-size: 30px; } .ac-d-status .ck-track { margin: 30px 0 4px; } /* Edge to edge: the first step hugs the left side, the last the right, and the lines stretch dot to dot. Columns 1:2:2:1 put the middle dots at a third and two thirds, so the four are evenly spaced. Ends sit 9px (done, 18px dot) or 6px (12px dot) in from the edge; lines stop 12px short of a dot's centre */ .ac-d-status .ck-track { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); } .ac-d-status .ck-track li:first-child { align-items: flex-start; } .ac-d-status .ck-track li:last-child { align-items: flex-end; } .ac-d-status .ck-track li:nth-child(2)::before, .ac-d-status .ck-track li:nth-child(2)::after { left: calc(-50% + 21px); } .ac-d-status .ck-track li:first-child:not(.done) + li::before, .ac-d-status .ck-track li:first-child:not(.done) + li::after { left: calc(-50% + 18px); } .ac-d-status .ck-track li:last-child::before, .ac-d-status .ck-track li:last-child::after { left: calc(-100% + 12px); right: 18px; } .ac-d-status .ck-track li.done:last-child::before, .ac-d-status .ck-track li.done:last-child::after { right: 21px; } .ac-d-status .ac-refund { margin-top: 20px; } .ac-d-grid { gap: 16px; margin-top: 16px; } .ac-box .ck-item + .ck-item { border-top: 1px solid var(--line); } .ac-box .ac-tl li:nth-child(n+3) { display: none; } .ac-box.all .ac-tl li:nth-child(n+3) { display: grid; animation: fade .25s var(--ease) both; } .ac-box:not(.all) .ac-tl li:nth-child(2) { padding-bottom: 0; } .ac-box:not(.all) .ac-tl li:nth-child(2)::before { display: none; } .ac-box .ck-lines { margin-top: 0; } .ac-box .ck-lines li { min-height: 28px; font-size: 13px; } .ac-addr-c.ac-box b { margin-top: 0; } .ac-ship { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); } .ac-ship .icon { width: 15px; height: 15px; color: var(--text-3); } /* Referrals */ .ac-steps.ac-box { margin-top: 16px; gap: 24px; } .ac-pane .ac-invite { max-width: none; } .ac-note + .ac-box { margin-top: 16px; } /* Light */ html[data-theme="light"] .ac-nav > .glide { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05); } html[data-theme="light"] :is(.ac-grid2 > .ac-card + .ac-card, .ac-stats, .ac-stats > div + div, .ac-dl > div, .ac-ref, .ac-d-side .ac-card, .ac-prod) { border-color: rgba(20, 22, 22, .08); } html[data-theme="light"] .ac-thumbs .dr-img { box-shadow: 0 0 0 2px #fff; } html[data-theme="light"] :is(.ac-ladder, .ac-box .ac-ladder) li::before { background: #fff; } html[data-theme="light"] .ac-addr-a { border-color: rgba(20, 22, 22, .07); } /* Fields that sit straight on the stage get the link bar's treatment: a solid surface and a hairline ring */ :is(.ac-search, .ac-filter, .ac-invite) { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2); } .ac-steps li::before { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); } html[data-theme="light"] .ac-steps li::before { background: #fff; box-shadow: var(--ring); } .ac-search:focus-within { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 2px var(--focus); } html[data-bgfx-on] :is(.ac-search, .ac-filter, .ac-invite) { background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } html[data-theme="light"] :is(.ac-search, .ac-filter, .ac-invite) { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05); } html[data-theme="light"] .ac-search:focus-within { box-shadow: var(--ring), 0 0 0 2px var(--focus); } html[data-theme="light"][data-bgfx-on] :is(.ac-search, .ac-filter, .ac-invite) { background: rgba(255, 255, 255, .72); } html[data-theme="light"] .ac-filter > .glide { background: var(--s2); box-shadow: none; } /* The notch between ladder segments and the ring around stacked thumbs take the page colour */ .ac-ladder li::before { background: var(--bg); } .ac-thumbs .dr-img { box-shadow: 0 0 0 2px var(--bg); } @media (max-width: 1180px) { .acct { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; padding-inline: 8px; } .ac-cols { grid-template-columns: minmax(0, 1fr); } .ac-d-grid { grid-template-columns: minmax(0, 1fr) 300px; } } @media (max-width: 980px) { .ac-go { display: none; } .ac-d-grid { grid-template-columns: minmax(0, 1fr); } .ac-grid2 { grid-template-columns: minmax(0, 1fr); } .ac-grid2 > .ac-card + .ac-card:not(.ac-box) { margin: 40px 0 0; padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line); } .ac-big { font-size: 52px; } } @media (max-width: 760px) { .acct { display: block; padding: 0 0 24px; } /* Phone: the nav becomes a sticky tab bar running edge to edge */ .ac-rail { position: sticky; top: 0; z-index: 3; flex-direction: row; gap: 0; margin: 0 -16px 20px; padding: 8px 12px; border-bottom: 1px solid var(--line); border-radius: 24px 24px 0 0; background: var(--bg); } html[data-bgfx-on] .ac-rail { background: rgba(14, 14, 15, .86); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } html[data-theme="light"][data-bgfx-on] .ac-rail { background: rgba(255, 255, 255, .86); } html[data-theme="light"] .ac-rail { border-color: rgba(20, 22, 22, .08); } .ac-me { display: none; } .ac-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .ac-nav button { flex: none; height: 36px; padding: 0 12px; gap: 8px; } .ac-nav .icon { width: 15px; height: 15px; } .ac-h { flex-wrap: wrap; align-items: flex-start; margin-bottom: 24px; } .ac-h h2 { font-size: 28px; } .ac-sec { margin-top: 36px; } .ac-split { gap: 28px; } .ac-search { width: 100%; } .ac-search kbd { display: none; } .ac-filter { width: 100%; overflow-x: auto; scrollbar-width: none; } .ac-order { gap: 8px 12px; padding: 10px 8px; } .ac-due { flex-wrap: wrap; } .ac-due .tx { flex-basis: calc(100% - 70px); } .ac-due .btn { flex: 1; } .ac-big { font-size: 34px; } .ac-steps { grid-template-columns: minmax(0, 1fr); } .ac-invite { flex-wrap: wrap; padding: 14px; } .ac-invite .t { flex-basis: 100%; margin-bottom: 4px; } .ac-invite .btn { flex: 1; } .ac-d-top { margin: -6px 0 12px -8px; } .ac-d-hero h2 { font-size: 26px; } /* Phone: cards run tighter, so more of each fits on screen */ .ac-box { padding: 18px; border-radius: 20px; } .ac-pane :is(.ac-box, .ac-stack, .ac-invite) + :is(.ac-box, .ac-stack), .ac-pane .ac-stats.ac-box, .ac-cols, .ac-d-grid, .ac-steps.ac-box, .ac-note + .ac-box { margin-top: 12px; } .ac-grid2, .ac-cols, .ac-d-grid, .ac-stack { gap: 12px; } .ac-box .ac-big { font-size: 40px; margin-top: 12px; } .ac-box .ac-ladder { margin: 22px 0 46px; } .ac-box .ac-split { margin-top: 20px; } .ac-stats.ac-box > div { padding: 16px 18px; } .ac-stats.ac-box b { font-size: 22px; } .ac-box-h { margin-bottom: 10px; } .ac-box .ac-orders { margin: 0 -8px -8px; } .ac-d-status .ac-d-hero h2 { margin-top: 10px; font-size: 24px; } .ac-d-status .ck-track { margin-top: 22px; } .ac-d-status .ck-track li b { font-size: 12.5px; } .ac-steps.ac-box { gap: 14px; } /* Steps: the number sits beside its text instead of on a line of its own */ .ac-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; } .ac-steps li::before { grid-row: span 2; margin: 0; } .ac-invite { padding: 16px 18px; border-radius: 20px; } .ac-filter { margin-bottom: 12px; } .ck-cards.ac-addrs { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ac-addr { padding: 16px 18px; border-radius: 20px; } .acct .ck-new { min-height: 72px; border-radius: 20px; } .ac-saved { grid-template-columns: 1fr 1fr; gap: 10px; } /* Half-width cards: Add becomes a round cart button and the old price drops under the new one, so the row never overflows */ .ac-prod .bd { padding: 10px 10px 12px 12px; } .ac-prow { align-items: flex-end; } .ac-prow .num { min-width: 0; } .ac-prow s { display: block; margin: 2px 0 0; } .ac-add { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; } .ac-add .icon { width: 16px; height: 16px; } .ac-ref { grid-template-columns: 36px minmax(0, 1fr) auto; } .ac-ref .ac-ok { display: none; } } /* ================= Leaderboard ================= */ /* Points only: nobody's purchases or spend. A podium for the top three, then a ruled table with your row pinned in view */ :root { --up: #3ddc84; --gold: #f4c542; --silver: #c3c8ce; --bronze: #c98a5c; } html[data-theme="light"] { --up: #0a9a4a; --gold: #e6a817; --silver: #8a929a; --bronze: #a8662f; } .app[data-view="board"] :is(.hero, .dock, .quick, .lb-msg) { display: none; } .app[data-view="board"] .stage { padding-top: 0; scrollbar-gutter: stable; } .app[data-view="board"] .stage::before, .app[data-view="board"] .stage::after { display: none; } .lb { width: min(1180px, 100%); flex: none; padding: 40px 24px 72px; animation: rise .7s var(--ease) backwards; } .lb-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .lb-h h2 { margin: 0; font-size: 44px; font-weight: 550; letter-spacing: -0.045em; line-height: 1.05; } .lb-h p { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 15px; color: var(--text-3); } /* Entrances fill backwards only: an animation still holding opacity or filter would stop the pinned row's backdrop blur */ .lb-body { animation: fade .3s var(--ease) backwards; } .lb-body.still, .lb-body.still * { animation: none; } .lb .ac-stats { margin-top: 36px; } .lb-up, .lb-down { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; vertical-align: middle; } .lb-up { color: var(--up); } .lb-down { color: var(--text-3); } .lb-up::before, .lb-down::before { content: ""; border: 4px solid transparent; } .lb-up::before { border-bottom: 5px solid currentColor; border-top: 0; } .lb-down::before { border-top: 5px solid currentColor; border-bottom: 0; } /* Podium: second, first, third. Pedestals rise from the baseline, then the people land on them */ .lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; max-width: 880px; margin: 72px auto 0; } .lb-p { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; } .lb-p[data-r="2"] { order: -1; --medal: var(--silver); --h: 150px; --d: 0ms; } .lb-p[data-r="1"] { --medal: var(--gold); --h: 196px; --d: 160ms; } .lb-p[data-r="3"] { --medal: var(--bronze); --h: 120px; --d: 80ms; } .lb-p > :not(.lb-ped) { animation: rise .6s calc(var(--d) + 380ms) var(--ease) both; } /* Avatar with its medal: a coin in the medal colour overlapping the ring; first place wears the crown */ .lb-avw { position: relative; display: block; } .lb-medal { position: absolute; left: 50%; bottom: -11px; translate: -50% 0; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 3px; background: var(--medal); color: #141414; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 3px var(--bg); } .lb-p[data-r="1"] .lb-medal { height: 26px; bottom: -13px; padding: 0 9px 0 8px; font-size: 13px; } .lb-crown { width: 13px; height: 13px; fill: currentColor; } .lb-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--s3); font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; } .lb-p .lb-av { width: 60px; height: 60px; font-size: 20px; color: var(--text); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--medal); } .lb-p[data-r="1"] .lb-av { width: 76px; height: 76px; font-size: 26px; } .lb-p .nm { max-width: 100%; margin-top: 24px; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-p .pts { margin-top: 4px; font-size: 26px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; } .lb-p[data-r="1"] .pts { font-size: 34px; } .lb-p small { font-size: 12px; color: var(--text-3); } .lb-ped { position: relative; width: 100%; height: var(--h); margin-top: 22px; padding-top: 16px; border-radius: 22px 22px 0 0; background: var(--s1); box-shadow: inset 1px 1px 0 var(--line-2), inset -1px 0 0 var(--line-2); transform-origin: bottom; animation: ped .8s var(--d) var(--ease) both; /* The pedestals sink into the page instead of stopping on a hard edge */ -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); } /* A plate in the medal colour along the top edge, the place written small underneath */ .lb-ped::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--medal); pointer-events: none; /* Strongest in the middle, fading towards the sides, and only a short way down past the corners */ -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 38%, #000 62%, rgba(0, 0, 0, .15)), linear-gradient(#000, transparent 30px); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 38%, #000 62%, rgba(0, 0, 0, .15)), linear-gradient(#000, transparent 30px); mask-composite: intersect; } .lb-ped span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--medal); } @keyframes ped { from { transform: scaleY(0); } } /* Light: white-on-white vanished, so the pedestals take a soft grey with a firmer edge */ html[data-theme="light"] .lb-ped { background: #e9ecee; box-shadow: inset 1px 1px 0 rgba(20, 22, 22, .12), inset -1px 0 0 rgba(20, 22, 22, .12); } html[data-theme="light"] .lb-podium { border-color: rgba(20, 22, 22, .1); } html[data-bgfx-on] .lb-ped { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } html[data-theme="light"][data-bgfx-on] .lb-ped { background: rgba(222, 226, 229, .82); } /* Table */ .lb-table { margin-top: 48px; } .lb-row { display: grid; grid-template-columns: 72px minmax(0, 1.4fr) 110px minmax(0, 1fr) 120px; align-items: center; gap: 20px; min-height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; } .lb-row.head { min-height: 36px; font-size: 12px; color: var(--text-3); } .lb-row.head > :last-child { text-align: right; } .lb-rk { display: flex; align-items: center; font-weight: 500; color: var(--text-2); font-feature-settings: "tnum"; } .lb-rk .lb-up, .lb-rk .lb-down { margin-left: 8px; font-size: 11px; } .lb-who { display: flex; align-items: center; gap: 12px; min-width: 0; } .lb-who b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-who b.mono { font-size: 13px; } .lb-tier { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 13px; } .lb-tier .diamond { width: 11px; height: 11px; color: var(--accent); } .lb-tier[data-t="Member"] .diamond { color: var(--text-3); } .lb-tier[data-t="Legend"] .diamond { color: var(--gold); } .lb-av.id svg { width: 62%; height: 62%; fill: var(--text-2); shape-rendering: crispEdges; } .lb-p .lb-av.id svg { fill: var(--text); } .lb-bar { height: 4px; border-radius: 99px; background: var(--s3); overflow: hidden; } .lb-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--text-2); transform-origin: left; animation: growx .9s .2s var(--ease) both; } .lb-pts { text-align: right; font-weight: 600; font-feature-settings: "tnum"; } .lb-pts em { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--text-3); } /* Your row stays in view: it sticks to the top or bottom edge until you scroll to where it really is */ .lb-row.me { position: sticky; top: 12px; bottom: 12px; z-index: 2; margin: -1px -1px 0; border-bottom-color: transparent; border-radius: 18px; background: rgba(16, 16, 17, .72); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px -12px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); } .lb-row.me .lb-bar i { background: var(--text); } html[data-theme="light"] .lb-row.me { background: rgba(255, 255, 255, .72); box-shadow: var(--ring), var(--lift); } .lb-gap { display: grid; place-items: center; height: 44px; color: var(--text-3); letter-spacing: .4em; border-bottom: 1px solid var(--line); } html[data-theme="light"] :is(.lb-row, .lb-gap) { border-color: rgba(20, 22, 22, .07); } .lb-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 28px; font-size: 12.5px; color: var(--text-3); } .lb-note .icon { width: 14px; height: 14px; } @media (max-width: 980px) { .lb-row { grid-template-columns: 64px minmax(0, 1fr) 100px 120px; } .lb-row > :nth-child(4) { display: none; } } @media (max-width: 760px) { .lb { padding: 20px 0 24px; } .lb-h { flex-wrap: wrap; align-items: flex-start; } .lb-h h2 { font-size: 32px; } .lb .ac-stats { margin-top: 24px; } .lb-podium { gap: 6px; margin-top: 28px; } .lb-table { margin-top: 28px; } .lb-p[data-r="2"] { --h: 84px; } .lb-p[data-r="1"] { --h: 112px; } .lb-p[data-r="3"] { --h: 64px; } .lb-p .lb-av { width: 44px; height: 44px; font-size: 16px; } .lb-p[data-r="1"] .lb-av { width: 56px; height: 56px; font-size: 20px; } .lb-p .nm { margin-top: 20px; font-size: 13px; } .lb-p .pts { font-size: 18px; } .lb-p[data-r="1"] .pts { font-size: 22px; } .lb-ped { border-radius: 16px 16px 0 0; } .lb-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 0 12px; } .lb-row > :nth-child(3) { display: none; } .lb-rk .lb-up, .lb-rk .lb-down { display: none; } } /* ================= Extension ================= */ /* Download page in Phantom's shape: a big headline with the browser rolling in a chip, a bento of browsers beside a live demo of the popup on a store page, then three steps and the stores it works on. About one and a half screens tall */ .app[data-view="ext"] :is(.hero, .dock, .quick, .lb-msg) { display: none; } .app[data-view="ext"] .stage { padding-top: 0; scrollbar-gutter: stable; } .app[data-view="ext"] .stage::before, .app[data-view="ext"] .stage::after { display: none; } .ex { width: min(1180px, 100%); flex: none; padding: 52px 24px 40px; } .ex-hero { text-align: center; } .m-chrome { background: #fff; } .m-chrome svg { width: 74% !important; height: 74% !important; } .m-brave { background: #fb542b; color: #fff; } .m-edge { background: #0c7bd6; color: #fff; } .m-opera { background: #ff1b2d; color: #fff; } html[data-theme="light"] .m-chrome { box-shadow: inset 0 0 0 1px var(--line-2); } .ex-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .ex-cta .btn { padding: 0 26px 0 20px; } .ex-cta .btn-ghost { padding: 0 22px; } .ex-cta .ex-logo { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; } .ex-meta { margin: 16px 0 0; font-size: 13px; color: var(--text-3); } .ex-only-phone { display: none; } /* Bento: browsers on the left, the demo spans the rest */ .ex-bento { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, 216px); gap: 12px; margin-top: 48px; } .ex-br { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; border-radius: 28px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, transform .45s var(--spring); } .ex-br:hover { background: var(--s2); } .ex-br:active { transform: scale(.98); } .ex-br > svg { width: 68px; height: 68px; transition: transform .5s var(--spring); } .ex-br:hover > svg { transform: scale(1.08) rotate(-6deg); } .ex-br[data-b="brave"] > svg { color: #fb542b; } .ex-br[data-b="edge"] > svg { color: #0c7bd6; } .ex-br[data-b="opera"] > svg { color: #ff1b2d; } .ex-br .pill { height: 28px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; background: var(--s3); color: var(--text-2); transition: background-color .15s, color .15s; } .ex-br .pill .icon { width: 13px; height: 13px; stroke-width: 2; margin-right: -3px; } .ex-br:hover .pill { background: var(--cta); color: var(--cta-ink); } .ex-br .yours { position: absolute; top: 16px; left: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .ex-br .yours::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--up); } /* Demo: a browser window bleeding off the bottom, sized in px and scaled to the tile (--k, from JS) */ .ex-show { grid-column: 3 / -1; grid-row: 1 / span 2; position: relative; overflow: hidden; border-radius: 28px; background: var(--s2); } .ex-win { position: absolute; top: 40px; left: max(36px, calc(50% - 320px * var(--k, 1))); width: 640px; height: 560px; transform-origin: 0 0; scale: var(--k, 1); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--s1); box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(0, 0, 0, .5); } .ex-strip { display: flex; align-items: flex-end; gap: 14px; height: 40px; padding: 0 14px; } .ex-dots { display: flex; gap: 7px; align-self: center; } .ex-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line); } .ex-tab { display: flex; align-items: center; gap: 8px; width: 230px; height: 32px; padding: 0 12px; border-radius: 10px 10px 0 0; background: var(--s3); font-size: 12px; color: var(--text-2); } .ex-tab > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ex-tab .x { width: 11px; height: 11px; color: var(--text-3); } .ex-fav { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; flex: none; } .ex-fav svg { width: 74%; height: 74%; } .ex-tool { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 14px; background: var(--s3); color: var(--text-3); } .ex-tool > .icon { width: 15px; height: 15px; } .ex-url { flex: 1; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--s1); font: 12px/1 var(--mono); color: var(--text-2); } .ex-url .icon { width: 12px; height: 12px; color: var(--text-3); } .ex-url b { font-weight: 400; color: var(--text); } .ex-me { position: relative; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tint); } .ex-me img { width: 15px; } html[data-theme="light"] .ex-me img, html[data-theme="light"] .ex-pop-h img { filter: brightness(0); } .ex-bdg { position: absolute; top: -4px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; font: 650 10px/1 var(--font); background: var(--cta); color: var(--cta-ink); box-shadow: 0 0 0 2px var(--s3); } .ex-bdg:empty { display: none; } .ex-bdg.pop { animation: badge-in .45s var(--spring); } /* The store page stays white in both themes, like the real thing */ .ex-page { flex: 1; display: grid; grid-template-columns: 236px 1fr; gap: 26px; padding: 26px; background: #fff; color: #141414; } .ex-photo { aspect-ratio: 1; display: grid; place-items: center; } .ex-photo img { max-height: 100%; object-fit: contain; } .ex-copy { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .ex-copy .t { font-size: 17px; font-weight: 550; line-height: 1.3; letter-spacing: -0.01em; } .ex-copy .p { margin-top: 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } .ex-sk { height: 9px; border-radius: 99px; background: #eef0f1; } .ex-sk.btn-sk { height: 34px; margin-top: 6px; border-radius: 99px; } .ex-swap { transition: opacity .3s, filter .3s, transform .45s var(--spring); } .ex-show.out .ex-swap { opacity: 0; filter: blur(6px); transform: translateY(6px); } /* The popup, dropped from the SP3ND button in the toolbar */ .ex-pop { position: absolute; top: 90px; right: 12px; width: 292px; padding: 14px; border-radius: 18px; background: var(--s1); box-shadow: 0 0 0 1px var(--line-2), 0 24px 48px -12px rgba(0, 0, 0, .55); } html[data-theme="light"] .ex-win { box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -24px rgba(20, 22, 22, .25); } html[data-theme="light"] .ex-pop { box-shadow: 0 0 0 1px var(--line-2), 0 24px 48px -16px rgba(20, 22, 22, .28); } .ex-pop-h { display: flex; align-items: center; gap: 8px; } .ex-pop-h img { height: 15px; width: auto; } .ex-pop-h img + img { height: 9px; } .ex-wal { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 3px; border-radius: 99px; background: var(--s2); font: 11px/1 var(--mono); color: var(--text-2); } .ex-wal .avatar { width: 20px; height: 20px; font-size: 10px; } .ex-prod { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px; border-radius: 14px; background: var(--s2); } .ex-th { width: 46px; height: 46px; flex: none; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 4px; } .ex-th img { max-height: 100%; object-fit: contain; } .ex-prod b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 550; line-height: 1.3; } .ex-prod small { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; color: var(--text-3); } .ex-prod small .ex-fav { width: 12px; height: 12px; border-radius: 3px; } .ex-price { margin-top: 16px; } .ex-price small { display: block; font-size: 12px; color: var(--text-3); } .ex-amt { display: flex; align-items: center; gap: 10px; margin: 2px 0 2px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; } .ex-tok { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border-radius: 99px; background: var(--s2); font-size: 12px; font-weight: 600; letter-spacing: 0; } .ex-tok .ico { width: 18px; height: 18px; display: grid; place-items: center; } .ex-tok .ico svg { width: 60%; height: 60%; } .ex-add { width: 100%; height: 44px; margin-top: 14px; font-size: 14px; border-radius: 13px; pointer-events: none; } .ex-add .icon { width: 16px; height: 16px; } .ex-add[data-state="done"] { background: var(--up); color: #062b16; } .ex-pop-f { display: flex; justify-content: space-between; margin-top: 12px; padding: 0 2px; font-size: 12px; color: var(--text-3); } .ex-pop-f b { font-weight: 550; color: var(--text-2); } /* How it works: open columns on hairlines, each with a small picture */ .ex-how { margin-top: 72px; } .ex-how > h2, .ex-stores h2 { margin: 0; font-size: 32px; font-weight: 550; letter-spacing: -0.035em; line-height: 1.1; text-align: center; } .ex-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 40px 0 0; padding: 0; list-style: none; } .ex-steps li { padding-top: 24px; border-top: 1px solid var(--line-2); } .ex-n { font: 500 12px/1 var(--mono); color: var(--text-3); } .ex-steps h3 { margin: 24px 0 6px; font-size: 18px; font-weight: 550; letter-spacing: -0.015em; } .ex-steps p { margin: 0; font-size: 15px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; } .ex-vis { height: 56px; margin-top: 22px; display: flex; align-items: center; } .ex-stack { display: flex; } .ex-stack > span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); } .ex-stack > span + span { margin-left: -10px; } .ex-stack svg { width: 58%; height: 58%; } .ex-stack.round > span { border-radius: 50%; } .ex-stack .ex-w { background: #fff; color: #111; } .ex-stack .ex-wm { background: #0071dc; } .ex-stack .ex-sx { background: #006340; color: #fff; } .ex-mini { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 16px; border-radius: 13px; background: var(--cta); color: var(--cta-ink); font-size: 14px; font-weight: 550; } .ex-mini .icon { width: 16px; height: 16px; } .ex-mini .cur { position: absolute; right: -14px; bottom: -14px; width: 22px; height: 22px; fill: var(--text); stroke: var(--bg); stroke-width: 1.5; } /* Stores: a slow belt of marks, faded at both ends */ .ex-stores { margin-top: 72px; text-align: center; } .ex-stores > p { margin: 10px 0 0; font-size: 15px; color: var(--text-3); } .ex-belt { margin-top: 28px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .ex-track { display: flex; gap: 10px; width: max-content; animation: belt 40s linear infinite; } .ex-belt:hover .ex-track { animation-play-state: paused; } @keyframes belt { to { transform: translateX(calc(-50% - 5px)); } } .ex-store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 10px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 550; white-space: nowrap; } .ex-store > span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; } .ex-store svg { width: 62%; height: 62%; } .ex-store small { font-weight: 400; color: var(--text-3); } .ex-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0; font-size: 13px; color: var(--text-3); } .ex-note .icon { width: 14px; height: 14px; } /* Entrances fill backwards only, as elsewhere */ .ex > * { animation: rise .8s var(--ease) backwards; } .ex > :nth-child(2) { animation-delay: .12s; } .ex > :nth-child(n+3) { animation-delay: .2s; } /* Light panels sit on top of the page like the link input: white, a darker hairline and the soft lift shadow */ html[data-theme="light"] :is(.ex-br, .ex-show, .ex-store) { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), var(--lift); } html[data-theme="light"] .ex-br { transition: box-shadow .2s, transform .45s var(--spring); } html[data-theme="light"] .ex-br:hover { box-shadow: 0 0 0 1px rgba(20, 22, 22, .2), 0 1px 2px rgba(20, 22, 22, .05), 0 18px 40px -12px rgba(20, 22, 22, .2); } html[data-theme="light"] .ex-br .pill { background: var(--s2); } html[data-theme="light"] .ex-br:hover .pill { background: var(--cta); } html[data-theme="light"] .ex-win { background: #fff; } html[data-theme="light"] :is(.ex-tab, .ex-tool) { background: #f1f3f4; } html[data-theme="light"] .ex-url { background: #fff; box-shadow: inset 0 0 0 1px var(--line); } html[data-theme="light"] .ex-bdg { box-shadow: 0 0 0 2px #f1f3f4; } html[data-theme="light"] .ex-page { box-shadow: inset 0 1px 0 var(--line); } html[data-theme="light"] .ex-pop { background: #fff; } html[data-theme="light"] .ex-add[data-state="done"] { color: #fff; } html[data-bgfx-on] :is(.ex-br, .ex-show, .ex-store) { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } html[data-bgfx-on] .ex-br:hover { background: rgba(255, 255, 255, .09); } html[data-theme="light"][data-bgfx-on] :is(.ex-br, .ex-show, .ex-store) { background: rgba(255, 255, 255, .9); } @media (max-width: 1180px) { .ex-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 470px auto; } .ex-show { grid-column: 1 / -1; grid-row: 1; } /* Four across under the demo: the browser tiles are as tall as they are wide */ .ex-br { aspect-ratio: 1; } } @media (max-width: 760px) { .ex { padding: 36px 16px 40px; } .ex-only-desk { display: none; } .ex-only-phone { display: flex; } .ex-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: calc(24px + 470px * var(--k, .6)); grid-auto-rows: auto; gap: 8px; margin-top: 36px; } .ex-show { border-radius: 22px; } /* Cropped on the left so the popup stays readable */ .ex-win { top: 24px; left: auto; right: 14px; transform-origin: 100% 0; } .ex-br { gap: 5px; border-radius: 18px; } .ex-br > svg { width: 34px; height: 34px; } .ex-br .pill, .ex-br:hover .pill, html[data-theme="light"] :is(.ex-br, .ex-br:hover) .pill { height: auto; padding: 0; background: none; color: var(--text-2); font-size: 12px; } .ex-br .pill .icon { display: none; } .ex-br .yours { top: 10px; left: auto; right: 10px; font-size: 0; } .ex-how, .ex-stores { margin-top: 64px; } .ex-how > h2, .ex-stores h2 { font-size: 26px; } .ex-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; } .ex-steps h3 { margin-top: 18px; } .ex-vis { margin-top: 18px; } .ex-note { display: block; text-wrap: balance; } .ex-note .icon { vertical-align: -2px; margin-right: 6px; } } @media (prefers-reduced-motion: reduce) { .ex-track { animation: none; } } /* ================= Company & help: About, FAQ, Guides, Terms, Privacy ================= */ .app[data-view="info"] :is(.hero, .dock, .quick, .lb-msg) { display: none; } .app[data-view="info"] .stage { padding-top: 0; scrollbar-gutter: stable; } .app[data-view="info"] .stage::before, .app[data-view="info"] .stage::after { display: none; } .inf { width: min(1180px, 100%); flex: none; padding: 52px 24px 72px; } .inf > [data-page] > * { animation: rise .8s var(--ease) backwards; } .inf > [data-page] > :nth-child(2) { animation-delay: .12s; } .inf > [data-page] > :nth-child(n+3) { animation-delay: .2s; } .inf code { padding: 1px 6px; border-radius: 6px; background: var(--s2); font: 12.5px/1.5 var(--mono); color: var(--text); } html[data-theme="light"] .inf code { background: #f1f3f4; } .inf-sec { margin-top: 104px; } .inf h1 .line + .line { margin-top: 0; } .fq-h { margin-top: 14px; font-size: 44px; letter-spacing: -0.04em; } .inf-c { text-align: center; } .inf-c .dv-p { max-width: 560px; margin-inline: auto; } .inf .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--s2); color: var(--text); } .inf .ic .icon { width: 19px; height: 19px; } html[data-theme="light"] .inf .ic { background: #f1f3f4; } .yes, .no { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; } .yes { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); } .no { background: var(--s2); color: var(--text-3); } html[data-theme="light"] .no { background: #eceeef; } .yes .icon, .no .icon { width: 12px; height: 12px; stroke-width: 2.6; } /* ---------- About ---------- */ .ab-hero { text-align: center; } .ab-hero .eyb { margin-bottom: 26px; } .ab-hero .btn { margin-top: 32px; } /* Numbers that answer the first questions people ask */ .ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 64px; } .ab-stats > div { padding: 22px 22px 20px; } .ab-stats b { display: block; font-size: 38px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-feature-settings: "tnum"; } .ab-stats small { display: block; margin-top: 10px; font-size: 13.5px; color: var(--text-3); line-height: 1.4; } .ab-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } /* Where SP3ND runs */ .ab-where { display: grid; gap: 10px; } .ab-where > div { display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 20px; border-radius: 20px; } .ab-where b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .ab-where small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); } .ab-where > div > div { flex: 1; min-width: 0; } .ab-where .btn { flex: none; } /* Card checkout vs SP3ND: the SP3ND column sits on its own raised strip */ .ab-cmp { position: relative; margin-top: 36px; padding: 8px; } .ab-cmp table { position: relative; width: 100%; border-collapse: collapse; font-size: 14.5px; text-align: left; } .ab-cmp th { height: 52px; padding: 0 18px; font-size: 13px; font-weight: 500; color: var(--text-3); text-align: left; } .ab-cmp th:last-child { color: var(--text); font-weight: 600; } .ab-cmp td { height: 56px; padding: 0 18px; border-top: 1px solid var(--line); color: var(--text-2); } html[data-theme="light"] .ab-cmp td { border-color: rgba(20, 22, 22, .08); } .ab-cmp td:first-child { color: var(--text); font-weight: 500; } .ab-cmp td:last-child { color: var(--text); font-weight: 550; } .ab-cmp td > span { display: inline-flex; align-items: center; gap: 10px; } .ab-cmp col.us { background: var(--s2); } html[data-theme="light"] .ab-cmp col.us { background: #f6f7f7; } .ab-cmp th:last-child, .ab-cmp tr:last-child td:last-child { position: relative; } .ab-cmp colgroup col:first-child { width: 34%; } /* Is / isn't */ .ab-is { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; text-align: left; } .ab-is > div { padding: 24px; } .ab-is h3 { margin: 0 0 16px; font-size: 13px; font-weight: 500; color: var(--text-3); } .ab-is ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .ab-is li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } .ab-is .no + span { color: var(--text-2); font-weight: 450; } .ab-is p { margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 13.5px; color: var(--text-3); line-height: 1.55; } /* Fees: the three tiers */ .ab-fee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } .ab-calc { padding: 26px; } .ab-cap { display: block; font-size: 13px; color: var(--text-3); } .ab-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .ab-tiers > div { padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); } .ab-tiers b { display: block; font-size: 15px; font-weight: 600; } .ab-tiers small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; } html[data-theme="light"] .ab-tiers > div { box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .1); } /* Who it's for */ .ab-for { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; text-align: left; } .ab-for > div { padding: 22px; } .ab-for h3 { margin: 20px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .ab-for p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; } .inf-end { margin-top: 104px; padding: 44px 24px; text-align: center; } .inf-end .dv-h2 { margin-top: 0; } .inf-end .acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .inf-end .btn { height: 48px; padding: 0 22px; font-size: 15px; } .inf-end .btn svg:not(.icon) { width: 17px; height: 17px; fill: currentColor; } /* ---------- FAQ ---------- */ .fq { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; } .fq-head { grid-column: 1 / -1; text-align: center; } .fq-head .dc-find { width: min(620px, 100%); margin: 32px auto 0; } .fq-head .dc-find input { height: 56px; border-radius: 999px; padding: 0 116px 0 48px; font-size: 15.5px; } .fq-head .dc-find > .icon { left: 20px; } .fq-head .dc-find small { right: 22px; } .fq-cats { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 18px; } .fq-cats button { position: relative; z-index: 1; height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13.5px; font-weight: 500; color: var(--text-3); transition: color .15s; } .fq-cats button:hover, .fq-cats button[aria-pressed="true"] { color: var(--text); } .fq-cats > .glide { border-radius: 99px; } html[data-theme="light"] .fq-cats > .glide { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05); } .fq-list { min-width: 0; } .fq-grp + .fq-grp { margin-top: 48px; } .fq-grp > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--text-3); } .fq-grp > h3 .icon { width: 15px; height: 15px; } .fq-grp .qa:first-of-type { border-top: 1px solid var(--line); } html[data-theme="light"] .fq-grp .qa:first-of-type { border-color: rgba(20, 22, 22, .1); } .fq-list mark { padding: 0 2px; border-radius: 4px; background: var(--warn-bg); color: var(--warn); } .qa p a, .lg .dc-p a, .lg-ul a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .15s; } .qa p a:hover, .lg .dc-p a:hover, .lg-ul a:hover { text-decoration-color: currentColor; } .fq-none { padding: 56px 0; text-align: center; } .fq-none b { display: block; font-size: 16px; font-weight: 600; } .fq-none p { margin: 6px 0 18px; font-size: 14px; color: var(--text-3); } .fq-side { position: sticky; top: 40px; display: grid; gap: 10px; } .fq-side > div { padding: 22px; } .fq-side h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .fq-side p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; } .fq-side .btn { width: 100%; margin-top: 18px; } .fq-side .btn svg:not(.icon) { width: 16px; height: 16px; fill: currentColor; } .fq-mail { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 4px 4px 4px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); font: 13px/1 var(--mono); color: var(--text-2); } html[data-theme="light"] .fq-mail { box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .12); } .fq-mail .copy { width: 30px; height: 30px; border-radius: 9px; } .fq-mail .copy .icon { width: 14px; height: 14px; } .fq-side .dv-link { margin-top: 16px; } /* ---------- Guides ---------- */ .gd-head { text-align: center; } .gd-head .eyb { margin-bottom: 26px; } .gd-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-3); } .gd-meta li { display: inline-flex; align-items: center; gap: 7px; } .gd-meta .icon { width: 14px; height: 14px; } /* Walkthrough: steps on the left, the current one on the right */ .gd-walk { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; margin-top: 56px; } .gd-steps { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px; } .gd-steps > .glide { border-radius: 16px; } html[data-theme="light"] .gd-steps > .glide { background: #f6f7f7; } .gd-steps button { position: relative; z-index: 1; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 16px; text-align: left; } .gd-steps button > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 11.5px/1 var(--mono); font-style: normal; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s, color .25s, box-shadow .25s; } .gd-steps button > i svg { display: none; width: 14px; height: 14px; stroke-width: 2.6; } .gd-steps button.done > i { background: var(--up); color: #0b0b0c; box-shadow: none; } .gd-steps button.done > i span { display: none; } .gd-steps button.done > i svg { display: block; } .gd-steps button[aria-current]:not(.done) > i { background: var(--cta); color: var(--cta-ink); box-shadow: none; } .gd-steps b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text-3); transition: color .2s; } .gd-steps small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-steps button[aria-current] b, .gd-steps button:hover b, .gd-steps button.done b { color: var(--text); } .gd-steps .dc-prog { margin: auto 12px 6px; padding-top: 18px; } .gd-pane { display: flex; flex-direction: column; min-height: 440px; padding: 32px; } .gd-pane > [data-step] { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; animation: rise .5s var(--ease) both; } .gd-pane > [data-step][hidden] { display: none; } .gd-pane h3 { margin: 10px 0 0; font-size: 28px; font-weight: 550; letter-spacing: -0.035em; line-height: 1.15; } .gd-pane p { margin: 12px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.6; text-wrap: pretty; } .gd-pane .dc-call { margin-top: 20px; font-size: 13.5px; } .gd-nav { display: flex; align-items: center; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } html[data-theme="light"] .gd-nav { border-color: rgba(20, 22, 22, .08); } .gd-nav .btn { height: 42px; } .gd-nav :is(#gdNext, #gdShop) { margin-left: auto; } .gd-nav .btn[hidden] { display: none; } /* Small, quiet pictures of each step */ .gd-art { display: grid; gap: 8px; padding: 18px; border-radius: 22px; background: var(--s2); } html[data-theme="light"] .gd-art { background: #f6f7f7; } .gd-w { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--s1); font-size: 14px; font-weight: 550; } html[data-theme="light"] .gd-w { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .08), 0 1px 2px rgba(20, 22, 22, .04); } .gd-w > i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 600; font-style: normal; color: #fff; } .gd-w > i svg { width: 60%; height: 60%; } .gd-w small { margin-left: auto; font-size: 12px; font-weight: 450; color: var(--text-3); } .gd-w .bal { margin-left: auto; text-align: right; font-feature-settings: "tnum"; } .gd-w .bal small { display: block; margin: 1px 0 0; } .gd-mock { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 16px; border-radius: 99px; background: var(--s1); font-size: 13.5px; color: var(--text-3); } html[data-theme="light"] .gd-mock { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .1); } .gd-mock > span:not(.btn) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); } .gd-mock .btn { height: 40px; padding: 0 16px; font-size: 13.5px; pointer-events: none; } .gd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--s1); } html[data-theme="light"] .gd-top { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .08); } .gd-top img { height: 18px; } html[data-theme="light"] .gd-top img { filter: brightness(0); } .gd-top .btn { height: 36px; padding: 0 14px; font-size: 13px; pointer-events: none; } .gd-art small.cap { display: block; padding: 4px 4px 0; font-size: 12px; color: var(--text-3); text-align: center; } /* Why USDC */ .gd-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; text-align: left; } .gd-why > div { padding: 24px; } .gd-why .big { display: block; margin-top: 22px; font-size: 32px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-feature-settings: "tnum"; } .gd-why h3 { margin: 10px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .gd-why p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; } .gd-sup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; text-align: left; } .gd-sup > div { padding: 22px; } .gd-sup h3 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--text-3); } .gd-chips { display: flex; flex-wrap: wrap; gap: 6px; } .gd-chips span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 99px; background: var(--s2); font-size: 14px; font-weight: 500; } html[data-theme="light"] .gd-chips span { background: #f1f3f4; } .gd-chips span > i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; font-style: normal; color: #fff; } .gd-chips span > i svg { width: 62%; height: 62%; } .gd-chips span.any { padding-left: 14px; color: var(--text-3); background: none; box-shadow: inset 0 0 0 1px var(--line-2); } /* ---------- Terms & Privacy: the docs layout, read top to bottom ---------- */ /* The rail has to fit between its sticky top and the end of the page (stage = 100vh - 124px, less 52px top, 72px .inf and 4vh stage padding), or near the last sections the page end pushes the whole rail up. Links that don't fit scroll inside it */ .lg .dc-rail { max-height: calc(96vh - 252px); } .lg .dc-rail .seg { align-self: flex-start; } .lg .dc-nav { overflow-y: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; } .lg .dc-nav a { min-height: 30px; padding-block: 5px; font-size: 13.5px; gap: 10px; } .lg .dc-nav a span { width: 18px; flex: none; font: 11px/1 var(--mono); color: var(--text-3); } .lg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-3); } .lg-meta li { display: inline-flex; align-items: center; gap: 7px; } .lg-meta .icon { width: 14px; height: 14px; } /* The short version */ .lg-tldr { margin-top: 32px; padding: 24px; } .lg-tldr h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--text-3); } .lg-tldr h3 .icon { width: 15px; height: 15px; } .lg-tldr ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 18px 0 0; padding: 0; list-style: none; } .lg-tldr li { display: flex; gap: 12px; font-size: 14.5px; color: var(--text-2); line-height: 1.5; } .lg-tldr li .yes { margin-top: 1px; } .lg-tldr li b { font-weight: 550; color: var(--text); } .lg-tldr p { margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--text-3); } .lg .dc-sec { padding-top: 56px; } .lg .dc-sec > h3 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; } .lg .dc-sec > h3 > span { font: 500 13px/1 var(--mono); color: var(--text-3); letter-spacing: 0; } .lg .dc-sec > h3 .copy { align-self: center; width: 28px; height: 28px; border-radius: 8px; opacity: 0; transition: opacity .15s; } .lg .dc-sec > h3 .copy .icon { width: 14px; height: 14px; } .lg .dc-sec:hover > h3 .copy, .lg .dc-sec > h3 .copy:focus-visible { opacity: 1; } .lg .dc-p { margin-top: 12px; font-size: 15px; } .lg .dc-defs { margin-top: 16px; } .lg .dc-defs dt { font-family: inherit; font-size: 14px; font-weight: 550; } .lg .dc-ol { margin-top: 16px; } .lg-ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .lg-ul li { position: relative; padding-left: 20px; font-size: 15px; color: var(--text-2); line-height: 1.6; } .lg-ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); } .lg-ul.x li { padding-left: 32px; } .lg-ul.x li::before { display: none; } .lg-ul.x li > .no, .lg-ul.x li > .yes { position: absolute; left: 0; top: 2px; } /* Who receives what */ .lg-tbl { margin-top: 18px; padding: 6px; border-radius: 20px; } .lg-tbl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--text-2); line-height: 1.5; } .lg-tbl > div:first-child { padding-block: 8px; font-size: 12.5px; color: var(--text-3); } .lg-tbl > div + div { border-top: 1px solid var(--line); border-radius: 0; } html[data-theme="light"] .lg-tbl > div + div { border-color: rgba(20, 22, 22, .07); } .lg-tbl b { font-weight: 550; color: var(--text); } .lg-rights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .lg-rights > div { padding: 20px; border-radius: 20px; } .lg-rights h4 { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 15px; font-weight: 600; } .lg-rights h4 small { font-size: 12px; font-weight: 500; color: var(--text-3); } .lg-rights .gd-chips { margin-top: 14px; } .lg-rights .gd-chips span { height: 28px; padding: 0 10px; font-size: 12.5px; } .lg-addr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .lg-addr > a, .lg-addr > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; font-size: 14px; font-weight: 550; transition: transform .35s var(--spring); } .lg-addr > a:hover { transform: translateY(-2px); } .lg-addr small { font-size: 12px; font-weight: 450; color: var(--text-3); } @media (max-width: 1180px) { .ab-for { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-walk { grid-template-columns: 240px minmax(0, 1fr); } .gd-pane > [data-step] { grid-template-columns: minmax(0, 1fr); gap: 28px; } .fq { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; } } @media (max-width: 980px) { .ab-two, .ab-fee { grid-template-columns: minmax(0, 1fr); gap: 36px; } .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fq { grid-template-columns: minmax(0, 1fr); gap: 48px; } .fq-side { position: static; grid-template-columns: 1fr 1fr; } .gd-why { grid-template-columns: minmax(0, 1fr); } .gd-why > div { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 16px; align-items: center; } .gd-why .big { grid-column: 3; grid-row: 1 / 3; margin: 0; font-size: 26px; } .gd-why h3 { margin: 0 0 2px; } .gd-why p { grid-column: 2; } .gd-why .ic { grid-row: 1 / 3; } } @media (max-width: 760px) { .inf { padding: 36px 16px 40px; } .inf-sec, .inf-end { margin-top: 72px; } .ab-hero .eyb, .gd-head .eyb { margin-bottom: 18px; } .ab-stats { margin-top: 44px; gap: 8px; } .ab-stats > div { padding: 18px; } .ab-stats b { font-size: 30px; } .ab-where > div { flex-wrap: wrap; } .ab-where .btn { width: 100%; } .ab-cmp { padding: 4px; overflow-x: auto; } .ab-cmp th, .ab-cmp td { padding: 0 12px; } .ab-cmp table { font-size: 13.5px; } .ab-cmp td > span .yes, .ab-cmp td > span .no { display: none; } .ab-is, .ab-for { grid-template-columns: minmax(0, 1fr); } .ab-for > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 18px; } .ab-for h3 { margin: 0 0 4px; align-self: center; } .ab-for p { grid-column: 2; } .ab-calc { padding: 20px; } .ab-tiers small { white-space: normal; } .inf-end { padding: 32px 18px; } .inf-end .btn { flex: 1 1 100%; } .fq-head .dc-find input { height: 52px; } .fq-h { font-size: 34px; } .fq-cats { flex-wrap: nowrap; justify-content: flex-start; max-width: calc(100% + 32px); margin: 14px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; } .fq-cats button { flex: none; } .fq-side { grid-template-columns: minmax(0, 1fr); } .gd-walk { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .gd-steps { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; } .gd-steps button { flex: none; grid-template-columns: 26px auto; gap: 8px; padding: 8px 12px 8px 8px; } .gd-steps button > i { width: 26px; height: 26px; } .gd-steps small, .gd-steps .dc-prog { display: none; } .gd-pane { min-height: 0; padding: 22px 18px; } .gd-pane h3 { font-size: 24px; } .gd-why > div { grid-template-columns: 40px minmax(0, 1fr); padding: 18px; } .gd-why .big { grid-column: 2; grid-row: auto; margin: 10px 0 0; font-size: 24px; order: 3; } .gd-sup { grid-template-columns: minmax(0, 1fr); } .lg .dc-rail { max-height: none; } .lg .dc-rail .seg { display: none; } .lg .dc-nav a span { display: none; } .lg-tldr { padding: 20px; } .lg-tldr ul { grid-template-columns: minmax(0, 1fr); } .lg .dc-sec > h3 { font-size: 20px; } .lg .dc-sec > h3 .copy { display: none; } .lg-tbl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .lg-tbl > div:first-child { display: none; } .lg-tbl > div + div:nth-child(2) { border-top: 0; } .lg-rights, .lg-addr { grid-template-columns: minmax(0, 1fr); } } /* Footer: legal links sit beside the status */ .foot-l { display: flex; align-items: center; gap: 18px; } .foot-l a:hover { color: var(--text); } @media (max-width: 900px) { .foot nav, .foot-l { gap: 14px; } } @media (max-width: 760px) { .foot { grid-template-columns: 1fr; } .foot-l { flex-wrap: wrap; justify-content: center; } } /* ================= Developers: MCP, Partner API docs and apply ================= */ .app:is([data-view="mcp"], [data-view="api"]) :is(.hero, .dock, .quick, .lb-msg) { display: none; } .app:is([data-view="mcp"], [data-view="api"]) .stage { padding-top: 0; scrollbar-gutter: stable; } .app:is([data-view="mcp"], [data-view="api"]) .stage::before, .app:is([data-view="mcp"], [data-view="api"]) .stage::after { display: none; } /* Panels: raised surfaces, white with a darker hairline and the lift shadow in light mode (same as the extension page) */ .pn { border-radius: 24px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); } html[data-theme="light"] .pn { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), var(--lift); } html[data-bgfx-on] .pn { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } html[data-theme="light"][data-bgfx-on] .pn { background: rgba(255, 255, 255, .9); } /* Small caps label above headings; the dot means live */ .eyb { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .eyb .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); } .dv-h2 { margin: 12px 0 0; font-size: 32px; font-weight: 550; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; } .dv-p { margin: 12px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.6; text-wrap: pretty; } .dv code, .mc code { padding: 1px 6px; border-radius: 6px; background: var(--s2); font: 12.5px/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; } html[data-theme="light"] :is(.dv, .mc) code { background: #f1f3f4; } .m-cc { background: var(--gold); color: #141414; } .dv-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); border-radius: 6px; } .dv-link .icon { width: 15px; height: 15px; transition: transform .35s var(--spring); } .dv-link:hover .icon { transform: translateX(3px); } .dv-link.back .icon { rotate: 180deg; } .dv-link.back:hover .icon { transform: translateX(-3px); } /* Copy buttons that say what they did */ .btn .states, .btn.states { min-width: 0; } /* ---------- MCP ---------- */ .mc { width: min(1180px, 100%); flex: none; padding: 52px 24px 56px; } .mc > * { animation: rise .8s var(--ease) backwards; } .mc > :nth-child(2) { animation-delay: .12s; } .mc > :nth-child(n+3) { animation-delay: .2s; } .mc-hero { text-align: center; } .mc-hero .eyb { margin-bottom: 26px; } /* The one thing to copy, shaped like the link input */ .mc-url { width: min(640px, 100%); display: flex; align-items: center; gap: 14px; height: 68px; margin: 36px auto 0; padding: 0 8px 0 24px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line-2); text-align: left; } .mc-url > div { flex: 1; min-width: 0; } .mc-url small { display: block; font-size: 11.5px; color: var(--text-3); } .mc-url b { display: block; font-size: 16px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-url .btn { height: 52px; padding: 0 22px; font-size: 15px; } html[data-theme="light"] .mc-url { background: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), var(--lift); } html[data-bgfx-on] .mc-url { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } html[data-theme="light"][data-bgfx-on] .mc-url { background: rgba(255, 255, 255, .9); } .mc-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-3); } .mc-facts li { display: inline-flex; align-items: center; gap: 7px; } .mc-facts .icon { width: 14px; height: 14px; color: var(--up); stroke-width: 2.2; } /* Setup steps beside a chat that uses SP3ND */ .mc-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; margin-top: 104px; } .mc-steps { position: relative; display: grid; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: st; } .mc-steps li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; counter-increment: st; } .mc-steps li::before { content: counter(st, decimal-leading-zero); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 500 11.5px/1 var(--mono); color: var(--text-2); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); } /* Thread between the numbers */ .mc-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16.5px; top: 40px; bottom: -18px; width: 1px; background: var(--line-2); } .mc-steps h3 { margin: 6px 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .mc-steps p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; } html[data-theme="light"] .mc-steps li::before { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .12); } .mc-hint { display: flex; gap: 10px; margin-top: 28px; padding: 14px 16px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .mc-hint .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--text-3); } .mc-hint b { font-weight: 550; color: var(--text); } html[data-theme="light"] .mc-hint { background: #f6f7f7; box-shadow: none; } /* The chat demo */ .mc-chat { position: relative; height: 560px; display: flex; flex-direction: column; overflow: hidden; } .mc-chat-h { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); flex: none; } .mc-chat-h > b { font-size: 14px; font-weight: 600; } .mc-conn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--s2); font: 12px/1 var(--mono); color: var(--text-2); } .mc-conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); } html[data-theme="light"] .mc-chat-h { border-color: rgba(20, 22, 22, .08); } html[data-theme="light"] .mc-conn { background: #f1f3f4; } .mc-log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 20px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 64px); mask: linear-gradient(transparent, #000 64px); transition: opacity .35s, filter .35s; } .mc-log.out { opacity: 0; filter: blur(6px); } .mc-log > * { flex: none; animation: rise .5s var(--ease) both; } .mc-u { align-self: flex-end; max-width: 84%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--s3); font-size: 14px; line-height: 1.45; } html[data-theme="light"] .mc-u { background: #f1f3f4; } .mc-lk { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 6px; padding: 4px 9px 4px 5px; border-radius: 8px; background: var(--s1); font: 12px/1.3 var(--mono); color: var(--text-2); vertical-align: middle; } html[data-theme="light"] .mc-lk { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .08); } .mc-lk span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-lk .mk, .mc-q .mk { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; flex: none; } .mc-lk .mk svg, .mc-q .mk svg { width: 72%; height: 72%; } .mc-tool { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-3); } .mc-tool .ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--s2); flex: none; } .mc-tool .ic img { width: 12px; } html[data-theme="light"] .mc-tool .ic { background: #f1f3f4; } html[data-theme="light"] .mc-tool .ic img { filter: brightness(0); } .mc-tool .states { margin-left: 2px; } .mc-tool .spinner { width: 13px; height: 13px; } .mc-tool .draw { width: 14px; height: 14px; color: var(--up); stroke-width: 2.4; } .mc-tool b { font-weight: 500; color: var(--text-2); } .mc-a { max-width: 92%; font-size: 14px; line-height: 1.5; color: var(--text); } .mc-a p { margin: 0 0 10px; } .mc-q { padding: 12px; border-radius: 16px; background: var(--s2); } html[data-theme="light"] .mc-q { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .1); } .mc-q-p { display: flex; gap: 11px; align-items: center; } .mc-q-p .th { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .mc-q-p .th img { max-height: 100%; object-fit: contain; } .mc-q-p b { display: block; font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-q-p small { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: var(--text-3); } .mc-q dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 12.5px; } .mc-q dt { color: var(--text-3); } .mc-q dd { margin: 0; text-align: right; color: var(--text-2); font-feature-settings: "tnum"; } .mc-q dt.t, .mc-q dd.t { padding-top: 4px; font-size: 14px; font-weight: 600; color: var(--text); } .mc-q-o { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mc-q-o b { font-size: 13px; font-weight: 600; } .mc-q-o small { display: block; font-size: 12px; color: var(--text-3); } .mc-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 550; background: var(--warn-bg); color: var(--warn); } .mc-pill.ok { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); } .mc-q .btn { width: 100%; height: 40px; margin-top: 12px; font-size: 13.5px; border-radius: 12px; pointer-events: none; transition: transform .2s var(--spring), background-color .15s; } .mc-q .btn.press { transform: scale(.96); } .mc-q .btn .icon { width: 15px; height: 15px; } /* Composer: the user's message types out here before it's sent */ .mc-comp { display: flex; align-items: center; gap: 10px; height: 50px; margin: 0 14px 14px; padding: 0 6px 0 16px; border-radius: 16px; background: var(--s2); flex: none; font-size: 14px; color: var(--text-3); } .mc-comp span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-comp span.typing { color: var(--text); } .mc-comp span.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--text); animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .mc-comp i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--s3); color: var(--text-3); transition: background-color .2s, color .2s; } .mc-comp i.on { background: var(--cta); color: var(--cta-ink); } .mc-comp i .icon { width: 16px; height: 16px; rotate: -90deg; stroke-width: 2; } html[data-theme="light"] .mc-comp { background: #f6f7f7; box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .06); } html[data-theme="light"] .mc-comp i:not(.on) { background: #e9ebec; } /* Wallet approval: a sheet that rises over the composer */ .mc-sheet { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; padding: 18px; border-radius: 20px; background: var(--s1); box-shadow: 0 0 0 1px var(--line-2), 0 -20px 50px -10px rgba(0, 0, 0, .6); transform: translateY(calc(100% + 20px)); transition: transform .5s var(--spring); } .mc-sheet.on { transform: none; } html[data-theme="light"] .mc-sheet { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), 0 -16px 40px -12px rgba(20, 22, 22, .25); } .mc-sheet-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); } .mc-sheet-h .avatar { width: 22px; height: 22px; font-size: 10px; } .mc-sheet-h span:last-child { margin-left: auto; font-family: var(--mono); } .mc-sheet .amt { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; } .mc-sheet .amt .ico { width: 26px; height: 26px; display: grid; place-items: center; } .mc-sheet .amt .ico svg { width: 60%; height: 60%; } .mc-sheet p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); } .mc-sheet-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } .mc-sheet-a .btn { height: 42px; font-size: 14px; border-radius: 12px; pointer-events: none; } .mc-sheet-a .spinner { width: 16px; height: 16px; } /* Guarantees */ .mc-safe { margin-top: 104px; text-align: center; } .mc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; text-align: left; } .mc-cards > div { padding: 22px; } .mc-cards .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--s2); color: var(--text); } html[data-theme="light"] .mc-cards .ic { background: #f1f3f4; } .mc-cards .ic .icon { width: 19px; height: 19px; } .mc-cards h3 { margin: 20px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .mc-cards p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; } /* Example prompt */ .mc-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: center; margin-top: 104px; } .mc-prompt { padding: 8px 8px 22px; } .mc-prompt-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 14px; } .mc-prompt-h small { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); } .mc-prompt-h small .icon { width: 15px; height: 15px; } .mc-prompt p { margin: 8px 14px 0; font-size: 15.5px; line-height: 1.7; color: var(--text); text-wrap: pretty; } .mc-prompt mark { padding: 1px 7px; border-radius: 7px; background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); color: var(--warn); font-weight: 500; } .btn.sm .states > * { gap: 7px; } /* FAQ */ .mc-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; margin-top: 104px; } .mc-faq-l .dv-link { margin-top: 20px; } .qa { border-bottom: 1px solid var(--line); } .qa:first-child { border-top: 1px solid var(--line); } html[data-theme="light"] .qa { border-color: rgba(20, 22, 22, .1); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; font-size: 16px; font-weight: 550; letter-spacing: -0.01em; cursor: pointer; list-style: none; border-radius: 8px; } .qa summary::-webkit-details-marker { display: none; } .qa summary .icon { width: 18px; height: 18px; color: var(--text-3); transition: rotate .35s var(--spring), color .15s; } .qa summary:hover .icon { color: var(--text); } .qa[open]:not(.shut) summary .icon { rotate: 45deg; } .qa p { margin: -6px 0 0; padding: 0 40px 22px 2px; font-size: 15px; color: var(--text-2); line-height: 1.6; text-wrap: pretty; } .qa[open] p { animation: rise .45s var(--ease) both; } .mc-end { margin-top: 104px; padding: 44px 24px; text-align: center; } .mc-end .dv-h2 { margin-top: 0; } .mc-end .btn { margin-top: 24px; height: 50px; padding: 0 24px 0 20px; font-size: 15px; } .mc-end .btn b { font: 500 13px/1 var(--font); opacity: .55; } /* ---------- Partner API docs ---------- */ .dv { width: min(1180px, 100%); flex: none; padding: 40px 24px 72px; } .dc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; animation: rise .7s var(--ease) both; } .dc-rail { position: sticky; top: 52px; align-self: start; display: flex; flex-direction: column; gap: 18px; } .dc-rail-h { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .dc-v { height: 20px; padding: 0 7px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--s2); font: 500 11px/1 var(--mono); color: var(--text-2); } html[data-theme="light"] .dc-v { background: #f1f3f4; } .dc-nav { position: relative; display: flex; flex-direction: column; gap: 1px; } .dc-nav a { flex: none; display: flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--text-3); transition: color .15s; } .dc-nav a:hover, .dc-nav a[aria-current] { color: var(--text); } .dc-nav > .glide { border-radius: 10px; } html[data-theme="light"] .dc-nav > .glide { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05); } .dc-rail .btn { margin: 4px 0 0 4px; align-self: flex-start; } .dc-main { min-width: 0; max-width: 820px; } .dc-head h2 { margin: 14px 0 0; font-size: 44px; font-weight: 550; letter-spacing: -0.04em; line-height: 1.05; } .dc-head > p { margin: 14px 0 0; max-width: 620px; font-size: 16.5px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; } .dc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .dc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; } .dc-facts > div { padding: 16px 18px; border-radius: 18px; } .dc-facts small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .dc-facts b { display: block; margin-top: 10px; font-size: 15px; font-weight: 550; letter-spacing: -0.01em; } .dc-sec { padding-top: 64px; scroll-margin-top: 16px; } .dc-sec > h3 { margin: 0; font-size: 26px; font-weight: 550; letter-spacing: -0.03em; line-height: 1.2; } .dc-sec > h3 + p { margin: 8px 0 22px; font-size: 16px; color: var(--text-2); line-height: 1.55; } .dc-sec > h4 { margin: 32px 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .dc-p { margin: 18px 0 0; font-size: 14.5px; color: var(--text-2); line-height: 1.7; text-wrap: pretty; } .dc-p b { font-weight: 550; color: var(--text); } /* Definitions: name on the left, meaning on the right, on hairlines */ .dc-defs { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); margin: 22px 0 0; } .dc-defs dt, .dc-defs dd { padding: 13px 0; border-top: 1px solid var(--line); } .dc-defs dt { padding-right: 20px; font: 500 13px/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; } .dc-defs dd { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.6; } html[data-theme="light"] .dc-defs :is(dt, dd) { border-color: rgba(20, 22, 22, .08); } /* Callouts */ .dc-call { display: flex; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--text-2); line-height: 1.6; } .dc-call > .icon { width: 17px; height: 17px; margin-top: 2px; color: var(--text-3); } .dc-call b { font-weight: 600; color: var(--text); } .dc-call.warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); } .dc-call.warn > .icon { color: var(--warn); } html[data-theme="light"] .dc-call:not(.warn) { background: #f6f7f7; box-shadow: none; } /* Code: a titled panel with copy; several variants switch with a segmented control */ .code { margin-top: 20px; overflow: hidden; border-radius: 18px; } .code-h { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); } html[data-theme="light"] .code-h { border-color: rgba(20, 22, 22, .08); } .code-h > small { font: 12px/1 var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .code-h .seg { margin-left: -10px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .code-h .seg button { flex: none; white-space: nowrap; } .code-h .copy { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; } .code-h .copy .icon { width: 14px; height: 14px; } .code pre { margin: 0; padding: 16px 18px 18px; overflow: auto; font: 12.5px/1.7 var(--mono); color: var(--text-2); tab-size: 2; scrollbar-width: thin; } .code.fold pre { max-height: 300px; overflow: hidden; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); } .code-more { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 42px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--text-2); transition: color .15s, background-color .15s; } .code-more:hover { color: var(--text); background: var(--s2); } .code-more .icon { width: 14px; height: 14px; transition: rotate .3s var(--spring); } .code:not(.fold) .code-more .icon { rotate: 180deg; } html[data-theme="light"] .code-more { border-color: rgba(20, 22, 22, .08); } html[data-theme="light"] .code-more:hover { background: #f6f7f7; } :root { --code-s: #9ecbff; --code-n: #f5b041; } html[data-theme="light"] { --code-s: #0b5cad; --code-n: #a15c00; } .t-s { color: var(--code-s); } .t-n { color: var(--code-n); } .t-k { color: var(--text); } .t-p { color: var(--text); } .t-c { color: var(--text-3); font-style: italic; } /* Lifecycle: the order's path, with review as the optional detour */ .dc-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .dc-flow li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 99px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 500; } .dc-flow li.opt { background: none; box-shadow: inset 0 0 0 1px var(--line-2); border: 0; outline: 1px dashed var(--line-2); outline-offset: -1px; box-shadow: none; color: var(--text-2); } .dc-flow li.gate { background: var(--cta); color: var(--cta-ink); box-shadow: none; font-family: var(--mono); font-size: 12px; } .dc-flow li + li::before { content: ""; width: 14px; height: 1px; margin-left: -22px; margin-right: 8px; background: var(--line-2); } .dc-flow .icon { width: 14px; height: 14px; } html[data-theme="light"] .dc-flow li:not(.opt, .gate) { background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), 0 1px 2px rgba(20, 22, 22, .05); } /* Storefronts */ .dc-mkts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; } .dc-mkts > div { min-width: 0; padding: 18px; border-radius: 20px; } .dc-mkts h5 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; } .dc-mkts h5 > span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; } .dc-mkts h5 svg { width: 62%; height: 62%; } html[data-theme="light"] .dc-mkts .m-ebay { box-shadow: inset 0 0 0 1px var(--line-2); } .dc-mkts small { display: block; margin-top: 14px; font-size: 12px; color: var(--text-3); } .dc-doms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .dc-doms span { min-width: 0; overflow-wrap: anywhere; padding: 2px 7px; border-radius: 6px; background: var(--s2); font: 11.5px/1.6 var(--mono); color: var(--text-2); } html[data-theme="light"] .dc-doms span { background: #f1f3f4; } /* Ordered how-to */ .dc-ol { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: dc; } .dc-ol li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; counter-increment: dc; font-size: 14.5px; color: var(--text-2); line-height: 1.6; } .dc-ol li::before { content: counter(dc); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); font: 500 12px/1 var(--mono); color: var(--text); } html[data-theme="light"] .dc-ol li::before { background: #f1f3f4; } .dc-tabs { margin-top: 26px; } .dc-tabs > .seg { display: inline-flex; } .dc-fold { margin-top: 26px; border-radius: 18px; } .dc-fold summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 14.5px; font-weight: 550; cursor: pointer; list-style: none; border-radius: 18px; } .dc-fold summary::-webkit-details-marker { display: none; } .dc-fold summary .icon:last-child { margin-left: auto; color: var(--text-3); transition: rotate .3s var(--spring); } .dc-fold[open]:not(.shut) summary .icon:last-child { rotate: 180deg; } .dc-fold > div { padding: 0 18px 18px; } .dc-fold > div > .dc-p:first-child { margin-top: 0; } /* Endpoints */ .dc-eps { margin-top: 4px; padding: 6px; border-radius: 20px; } .dc-ep { display: grid; grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 14px; padding: 9px 12px; border-radius: 12px; } .dc-ep:hover { background: var(--s2); } html[data-theme="light"] .dc-ep:hover { background: #f6f7f7; } .dc-ep code { padding: 0; background: none !important; font-size: 13px; } .dc-ep span:last-child { font-size: 13.5px; color: var(--text-3); } .mth { justify-self: start; height: 22px; padding: 0 7px; border-radius: 6px; display: inline-grid; place-items: center; font: 600 11px/1 var(--mono); letter-spacing: .02em; } .mth.get { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); } .mth.post { background: color-mix(in srgb, var(--code-s) 16%, transparent); color: var(--code-s); } .mth.patch { background: var(--warn-bg); color: var(--warn); } .mth.del { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .dc-ep.legacy { opacity: .6; } /* Errors: filterable */ .dc-find { position: relative; display: flex; align-items: center; margin-top: 4px; } .dc-find > .icon { position: absolute; left: 16px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; } .dc-find input { width: 100%; text-overflow: ellipsis; height: 48px; padding: 0 70px 0 44px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--s1); font-size: 14.5px; color: var(--text); outline: none; transition: box-shadow .15s, border-color .15s; } .dc-find input::placeholder { color: var(--text-3); } .dc-find input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--focus); } .dc-find small { position: absolute; right: 16px; font-size: 12.5px; color: var(--text-3); font-feature-settings: "tnum"; } html[data-theme="light"] .dc-find input { background: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), 0 1px 2px rgba(20, 22, 22, .04); } html[data-theme="light"] .dc-find input:focus { box-shadow: 0 0 0 2px var(--focus); } .dc-errs { margin: 10px 0 0; } .dc-err { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; padding: 13px 2px; border-top: 1px solid var(--line); } html[data-theme="light"] .dc-err { border-color: rgba(20, 22, 22, .08); } .dc-err code { justify-self: start; background: none !important; padding: 0; font-size: 12.5px; line-height: 1.6; } .dc-err span { font-size: 14px; color: var(--text-2); line-height: 1.55; } .dc-none { padding: 28px 0; text-align: center; font-size: 14px; color: var(--text-3); } /* Migration checklist */ .dc-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; } .dc-chk { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 14px; font-size: 14px; color: var(--text-2); cursor: pointer; transition: color .2s, background-color .15s; } .dc-chk:hover { background: var(--s2); } html[data-theme="light"] .dc-chk:hover { background: #f6f7f7; } .dc-chk input { position: absolute; opacity: 0; pointer-events: none; } .dc-chk i { position: relative; width: 20px; height: 20px; flex: none; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; transition: background-color .2s, box-shadow .2s; } .dc-chk i svg { width: 13px; height: 13px; stroke: var(--cta-ink); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .dc-chk i path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s .05s var(--ease); } .dc-chk input:checked + i { background: var(--cta); box-shadow: none; } .dc-chk input:checked + i path { stroke-dashoffset: 0; } .dc-chk input:checked ~ span { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-2); } .dc-chk input:focus-visible + i { outline: 2px solid var(--text); outline-offset: 2px; } .dc-prog { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13px; color: var(--text-3); font-feature-settings: "tnum"; } .dc-prog > span { flex: 1; height: 4px; border-radius: 99px; background: var(--s3); overflow: hidden; } .dc-prog > span i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--up); transition: width .5s var(--ease); } html[data-theme="light"] .dc-prog > span { background: #eceeef; } .dc-help { display: flex; align-items: center; gap: 16px; margin-top: 64px; padding: 20px 22px; } .dc-help .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--s2); } html[data-theme="light"] .dc-help .ic { background: #f1f3f4; } .dc-help .ic .icon { width: 19px; height: 19px; } .dc-help p { flex: 1; margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; } .dc-help b { display: block; font-size: 15px; font-weight: 600; color: var(--text); } /* ---------- Partner API apply ---------- */ .ap { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 72px; align-items: start; } .ap > * { animation: rise .8s var(--ease) backwards; } .ap > :nth-child(2) { animation-delay: .12s; } .ap-pitch { padding-top: 8px; } .ap-pitch .eyb { margin-top: 36px; } .ap-pitch h2 { margin: 14px 0 0; font-size: 48px; font-weight: 550; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; } .ap-pitch > p { margin: 16px 0 0; max-width: 480px; font-size: 16.5px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; } /* Revenue share: a bar from 25% to 75% that fills as volume grows */ .ap-share { margin-top: 36px; padding: 22px; } .ap-share-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .ap-share-t b { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-feature-settings: "tnum"; } .ap-share-t small { font-size: 13px; color: var(--text-3); text-align: right; } .ap-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 18px; } .ap-bar i { height: 8px; border-radius: 99px; background: var(--s3); transform-origin: left; animation: growx .9s var(--ease) backwards; } .ap-bar i:nth-child(1) { background: color-mix(in srgb, var(--text) 30%, transparent); animation-delay: .3s; } .ap-bar i:nth-child(2) { background: color-mix(in srgb, var(--text) 60%, transparent); animation-delay: .45s; } .ap-bar i:nth-child(3) { background: var(--text); animation-delay: .6s; } .ap-bar-l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; font-size: 12px; color: var(--text-3); } .ap-bar-l span:nth-child(2) { text-align: center; } .ap-bar-l span:last-child { text-align: right; } .ap-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .ap-stats > div { display: flex; gap: 12px; padding: 18px; border-radius: 20px; } .ap-stats .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--text-3); } .ap-stats b { display: block; font-size: 14.5px; font-weight: 600; } .ap-stats small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); line-height: 1.45; } .ap-build { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; } .ap-build h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; } .ap-build ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .ap-build li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-2); } .ap-build li .icon { width: 15px; height: 15px; color: var(--up); stroke-width: 2.2; } .ap-pitch > .dv-link { margin-top: 32px; } .ap-form { position: sticky; top: 40px; padding: 28px; border-radius: 28px; } .ap-form h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; } .ap-form > p, .ap-form form > p { margin: 6px 0 0; font-size: 14px; color: var(--text-3); } .ap-form form { display: grid; gap: 16px; margin-top: 24px; } .ap-form .fld > span b { color: var(--text-2); font-weight: 500; } .ap-form .fld > span em { font-style: normal; float: right; } .fld textarea { width: 100%; min-height: 116px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; } .fld textarea::placeholder { color: var(--text-3); } .fld textarea:focus { border-color: transparent; box-shadow: inset 0 0 0 2px var(--focus); } .fld.bad textarea { border-color: rgba(255, 107, 102, .6); animation: shake .4s; } html[data-theme="light"] .fld textarea { background: #fff; border-color: rgba(20, 22, 22, .1); } html[data-theme="light"] .fld.bad :is(input, textarea) { border-color: rgba(229, 72, 77, .6); } .fld .err { font-size: 12px; color: var(--danger); } .fld:not(.bad) .err { display: none; } .ap-vol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ap-vol button { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line-2); text-align: left; transition: border-color .15s, background-color .15s, transform .35s var(--spring); } .ap-vol button:hover { border-color: rgba(255, 255, 255, .22); } .ap-vol button:active { transform: scale(.97); transition-duration: .1s; } .ap-vol button[aria-checked="true"] { border-color: var(--text); background: var(--s2); box-shadow: inset 0 0 0 .5px var(--text); } .ap-vol b { display: block; font-size: 14px; font-weight: 600; } .ap-vol small { display: block; margin-top: 1px; font-size: 12px; color: var(--text-3); white-space: nowrap; } html[data-theme="light"] .ap-vol button { border-color: rgba(20, 22, 22, .1); } html[data-theme="light"] .ap-vol button:hover { border-color: rgba(20, 22, 22, .25); } html[data-theme="light"] .ap-vol button[aria-checked="true"] { border-color: var(--text); background: #fff; } .ap-form .btn-cta { width: 100%; margin-top: 4px; } .ap-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 !important; font-size: 12.5px !important; text-align: center; } .ap-note .icon { width: 13px; height: 13px; } .ap-done { display: flex; flex-direction: column; align-items: center; padding: 36px 8px 12px; text-align: center; animation: rise .6s var(--ease) both; } .ap-done .ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); } .ap-done .ok svg { width: 26px; height: 26px; stroke-width: 2.4; } .ap-done h3 { margin-top: 20px; } .ap-done p { max-width: 320px; margin: 8px 0 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; } .ap-done p b { font-weight: 550; color: var(--text); } .ap-done .btn { margin-top: 24px; } .ap-done .ck-link { margin-top: 14px; } @media (max-width: 1180px) { .mc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dc { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; } .ap { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; } } @media (max-width: 980px) { .mc-setup, .mc-try, .mc-faq { grid-template-columns: minmax(0, 1fr); gap: 36px; } .mc-setup { margin-top: 80px; } .ap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .ap-form { position: static; } .dc-mkts { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .mc { padding: 36px 16px 40px; } .mc-hero .eyb { margin-bottom: 18px; } .mc-url { height: auto; flex-wrap: wrap; gap: 12px; padding: 16px; border-radius: 22px; } .mc-url .btn { width: 100%; height: 48px; } .mc-url b { font-size: 15px; } .mc-facts { gap: 6px 14px; } .mc-setup, .mc-safe, .mc-try, .mc-faq, .mc-end { margin-top: 72px; } .dv-h2 { font-size: 26px; } .mc-chat { height: 520px; } .mc-cards { grid-template-columns: minmax(0, 1fr); } .mc-cards > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 18px; } .mc-cards h3 { margin: 0 0 4px; align-self: center; } .mc-cards p { grid-column: 2; } .qa p { padding-right: 8px; } .mc-end { padding: 32px 18px; } .mc-end .btn b { display: none; } .dc-flow { gap: 6px; } .dc-flow li + li::before { display: none; } .dv { padding: 0 0 40px; } .dc { display: block; } /* Phone: the section nav becomes a sticky bar running edge to edge, like the account tabs */ .dc-rail { position: sticky; top: 0; z-index: 3; flex-direction: row; gap: 0; margin: 0 -16px 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); border-radius: 24px 24px 0 0; background: var(--bg); } html[data-bgfx-on] .dc-rail { background: rgba(14, 14, 15, .86); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } html[data-theme="light"][data-bgfx-on] .dc-rail { background: rgba(255, 255, 255, .86); } html[data-theme="light"] .dc-rail { border-color: rgba(20, 22, 22, .08); } .dc-rail-h, .dc-rail .btn { display: none; } .dc-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .dc-nav a { flex: none; min-height: 34px; white-space: nowrap; } .dc-head { padding-top: 28px; } .dc-head h2 { font-size: 36px; } .dc-facts { grid-template-columns: minmax(0, 1fr); } .dc-sec { padding-top: 52px; scroll-margin-top: 64px; } .dc-sec > h3 { font-size: 23px; } .dc-defs { grid-template-columns: minmax(0, 1fr); } .dc-defs dt { padding-bottom: 0; } .dc-defs dd { padding-top: 4px; border-top: 0; } .dc-ep { grid-template-columns: 58px minmax(0, 1fr); gap: 4px 10px; } .dc-ep span:last-child { grid-column: 2; } .dc-err { grid-template-columns: minmax(0, 1fr); gap: 4px; } .dc-checks { grid-template-columns: minmax(0, 1fr); } .dc-help { flex-wrap: wrap; } .code pre { font-size: 12px; } .ap { padding-top: 24px; } .ap-pitch .eyb { margin-top: 28px; } .ap-pitch h2 { font-size: 36px; } .ap-share-t { flex-direction: column; gap: 6px; } .ap-share-t small { text-align: left; } .ap-share-t small br { display: none; } .ap-stats, .ap-build { grid-template-columns: minmax(0, 1fr); } .ap-form { padding: 22px 18px; border-radius: 24px; } .ap-vol { grid-template-columns: minmax(0, 1fr); } .ap-vol button { display: flex; justify-content: space-between; align-items: center; } } /* ================= Collect ================= */ /* One search over every card market. A title and search row, one sticky bar (games, sort, a single filter panel), every ask measured against the card's market price, and a detail sheet per listing. Cards render as the object you'd hold: a raw card, or a slab with its label */ :root { --up-tint: rgba(61, 220, 132, .13); } html[data-theme="light"] { --up-tint: rgba(10, 154, 74, .1); } .app[data-view="collect"] :is(.hero, .dock, .quick, .lb-msg) { display: none; } .app[data-view="collect"] .stage { padding-top: 0; scrollbar-gutter: stable; } .app[data-view="collect"] .stage::before, .app[data-view="collect"] .stage::after { display: none; } .cl { width: min(1280px, 100%); flex: none; padding: 28px 24px 64px; } /* Title and search share one row */ .cl-h { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; animation: rise .7s var(--ease) backwards; } .cl-h h2 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; } /* Search: one pill, with where it ships to on the right */ .cl-search { display: flex; align-items: center; gap: 10px; flex: 0 1 520px; min-width: 0; height: 46px; padding: 0 5px 0 16px; border-radius: 99px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; } .cl-search:focus-within { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 3px var(--tint); } .cl-search > .icon { width: 17px; height: 17px; color: var(--text-3); } .cl-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 15px; } .cl-search input::placeholder { color: var(--text-3); } .cl-search input::-webkit-search-cancel-button { display: none; } .cl-search kbd { flex: none; background: var(--s3); } .cl-sep { width: 1px; height: 20px; flex: none; background: var(--line-2); } .cl-ship > button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 9px; border-radius: 99px; font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background-color .15s, color .15s; } .cl-ship > button:hover, .cl-ship.open > button { background: var(--s3); color: var(--text); } .cl-ship > button .icon { width: 15px; height: 15px; } .cl-ship > button .chev { width: 12px; height: 12px; color: var(--text-3); } .cl-ship .menu { width: 250px; max-height: min(420px, 60vh); overflow-y: auto; scrollbar-width: thin; } .cl-mh { display: block; padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } /* The bar is a plain row in the page. Once it sticks it lifts into a floating pill and the grid scrolls under it. The pill is padded out by as much as it's pulled outwards, so nothing inside moves when it appears */ .cl-bar { position: sticky; top: 10px; z-index: 6; margin-top: 18px; animation: rise .7s 80ms var(--ease) backwards; } .cl-bar-in { display: flex; align-items: center; gap: 16px; margin: 0 -6px; padding: 6px; border-radius: 22px; background: transparent; box-shadow: inset 0 0 0 1px transparent, 0 16px 40px -18px transparent; transition: background-color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--spring); } .cl-bar.stuck .cl-bar-in { background: rgba(18, 18, 18, .82); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 16px 40px -18px rgba(0, 0, 0, .9); animation: cl-lift .5s var(--spring); } @keyframes cl-lift { from { transform: scale(.985); } } /* Games: plain tabs, each with its own logo; the highlight glides between them */ .cl-games { position: relative; flex: 1; min-width: 0; display: flex; gap: 2px; margin: -4px 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; } .cl-games::-webkit-scrollbar { display: none; } /* Same pill as the top nav's current page */ .cl-games > .glide { border-radius: 99px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06); } .cl-g { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 11px; border-radius: 99px; flex: none; font-size: 14px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color .15s; } .cl-g:hover, .cl-g[aria-pressed="true"] { color: var(--text); } .cl-g img { width: 20px; height: 20px; flex: none; object-fit: contain; transition: transform .45s var(--spring); } .cl-g img.wide { width: 34px; } .cl-g:hover img { transform: rotate(-10deg) scale(1.1); } .cl-g:hover img.wide { transform: scale(1.08); } .cl-tools { flex: none; display: flex; align-items: center; gap: 8px; } .cl-count { margin-right: 4px; font-size: 13px; color: var(--text-3); white-space: nowrap; font-feature-settings: "tnum"; } .cl-count b { font-weight: 600; color: var(--text-2); } .cl-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 99px; flex: none; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s, color .15s, box-shadow .15s; } .cl-chip:hover, .open > .cl-chip { background: var(--s2); color: var(--text); } .cl-chip .icon { width: 15px; height: 15px; } .cl-chip .chev { width: 12px; height: 12px; opacity: .6; } .cl-fn { min-width: 18px; height: 18px; padding: 0 5px; margin-right: -4px; border-radius: 99px; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; font-feature-settings: "tnum"; } .cl-sort .menu { min-width: 210px; } /* Filters: one panel, every option visible, applied as you tap */ .menu.cl-fp { width: 396px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: min(640px, calc(100dvh - 160px)); } .cl-fp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px 4px; scrollbar-width: thin; } .cl-fp section { padding: 12px 0 14px; } .cl-fp section[hidden] { display: none; } .cl-fp section + section, .cl-fp-deal { border-top: 1px solid var(--line); } .cl-fp h5 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-3); } .cl-fp-sort { display: none; } .cl-opts { display: flex; flex-wrap: wrap; gap: 6px; } .cl-opt { height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s, color .15s, box-shadow .15s; } .cl-opt:hover { color: var(--text); background: var(--s2); } .cl-opt[aria-checked="true"] { background: var(--text); color: var(--bg); box-shadow: none; } .cl-mkts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 -6px; } .cl-mkt { display: flex; align-items: center; gap: 9px; min-width: 0; height: 40px; padding: 0 8px 0 6px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--text-2); text-align: left; transition: background-color .15s, color .15s, opacity .2s; } .cl-mkt:hover { background: var(--s2); color: var(--text); } .cl-mkt .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-mkt .n { flex: none; font-size: 12px; color: var(--text-3); font-feature-settings: "tnum"; } .cl-mkt .ck { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--bg); transition: background-color .15s, box-shadow .15s; } .cl-mkt .ck .icon { width: 11px; height: 11px; stroke-width: 3; opacity: 0; } .cl-mkt[aria-pressed="true"] { color: var(--text); } .cl-mkt[aria-pressed="true"] .ck { background: var(--text); box-shadow: none; } .cl-mkt[aria-pressed="true"] .ck .icon { opacity: 1; } .cl-mkt.zero { opacity: .4; } .cl-fp-deal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; } .cl-fp-deal[hidden] { display: none; } .cl-fp-deal b { display: block; font-size: 14px; font-weight: 600; } .cl-fp-deal small { font-size: 12.5px; color: var(--text-3); } .cl-fp-foot { display: flex; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--line); } .cl-fp-foot .btn { height: 42px; font-size: 14px; } .cl-fp-foot .btn-cta { flex: 1; } .mkm { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: #0e0e0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .mkm img { width: 100%; height: 100%; object-fit: contain; } /* What's applied, as chips you can drop one by one. Also where the market scan reports while searching */ .cl-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; padding: 14px 0 4px; font-size: 13px; color: var(--text-3); } .cl-active:empty { min-height: 0; padding: 8px 0 0; } .cl-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 99px; background: var(--s2); font-size: 13px; font-weight: 500; color: var(--text); transition: background-color .15s; } .cl-tag:hover { background: var(--s3); } .cl-tag .icon { width: 13px; height: 13px; color: var(--text-3); } .cl-tag .mkm { width: 16px; height: 16px; border-radius: 4px; margin-left: -4px; } .cl-clear { height: 30px; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--text-3); } .cl-clear:hover { color: var(--text); } .cl-scan { display: inline-flex; align-items: center; gap: 8px; height: 30px; } .cl-scan .spinner { width: 14px; height: 14px; } .cl-scan .mkm { width: 18px; height: 18px; border-radius: 5px; opacity: .25; transition: opacity .2s; } .cl-scan .mkm.got { opacity: 1; animation: cl-got .45s var(--spring); } @keyframes cl-got { 40% { transform: scale(1.18); } } /* Grid: every listing gets the same frame, so raw cards and slabs line up */ .cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 26px 16px; padding-top: 10px; } .cl-card { position: relative; display: flex; flex-direction: column; min-width: 0; cursor: pointer; border-radius: 16px; animation: rise .55s var(--ease) both; animation-delay: calc(min(var(--n, 0), 14) * 28ms); } .cl-card:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; } .cl-art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 16px; border-radius: 16px; perspective: 900px; } .cl-card .cl-art { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, box-shadow .2s; } .cl-card:hover .cl-art { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); } /* The card itself: raw, or slabbed with a grading label. Sized in container units so the label scales with the slab */ .cl-obj { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--ar); container-type: inline-size; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--spring); } .cl-art.tilt .cl-obj { transition: transform .1s linear; } .cl-obj img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; } /* Light catching the surface as it tilts */ .cl-obj::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; mix-blend-mode: overlay; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), transparent 55%); } .cl-art.tilt .cl-obj::after { opacity: 1; } /* Container units only resolve inside the container, so the radius and padding live on the image and an inner wrapper. A raw card stands a little shorter than a slab, so both come out the same width */ .cl-raw { --ar: 63 / 88; height: 85%; } .cl-raw img { border-radius: 4.6cqi; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 24px -14px rgba(0, 0, 0, .9); } .cl-raw::after { border-radius: 4.6cqi; } .slab { --ar: 66 / 108; --lc: #d0202f; } .slab::after { border-radius: 5cqi; } .slab-in { display: flex; flex-direction: column; gap: 3cqi; height: 100%; padding: 5cqi 5cqi 6.5cqi; border-radius: 5cqi; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 0 0 3.5cqi rgba(255, 255, 255, .025), 0 18px 30px -16px rgba(0, 0, 0, .9); } .slab-lbl { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 3cqi; height: 19cqi; padding: 0 4cqi; border-radius: 1.6cqi; background: #fff; color: #141414; box-shadow: inset 0 0 0 1cqi var(--lc); font: 700 4.3cqi/1.25 var(--font); text-transform: uppercase; letter-spacing: .02em; } .slab-lbl > span { min-width: 0; display: flex; flex-direction: column; } .slab-lbl > span i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slab-lbl > span i + i { font-weight: 800; } .slab-lbl b { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 3.6cqi; line-height: 1.1; } .slab-lbl b em { font-style: normal; font-size: 9cqi; line-height: .95; } .slab-lbl b .co { font-style: normal; color: var(--lc); font-weight: 800; } .slab[data-co="BGS"] { --lc: #8a8f98; } .slab[data-co="BGS"] .slab-lbl { background: #d9dce1; } .slab[data-co="CGC"] { --lc: #2457b8; } .slab-card { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 3cqi; border-radius: 2cqi; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 .6cqi rgba(255, 255, 255, .07); } .slab-card img { width: auto; max-width: 100%; height: 100%; object-fit: contain; border-radius: 3cqi; } /* On the art, on hover: save and quick add */ .cl-fav, .cl-add { position: absolute; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .4s var(--spring), background-color .15s, color .15s; } .cl-fav { top: 8px; left: 8px; color: var(--text-2); background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cl-fav:hover { color: var(--text); } .cl-fav .icon, .cl-add .icon { width: 15px; height: 15px; } .cl-fav[aria-pressed="true"], .cl-d-fav[aria-pressed="true"] { color: #ff5a6a; } :is(.cl-fav, .cl-d-fav)[aria-pressed="true"] svg { fill: currentColor; } .cl-add { right: 8px; bottom: 8px; background: var(--cta); color: var(--cta-ink); } .cl-add:hover { background: var(--cta-hover); } .cl-add.in { background: var(--s3); color: var(--text); } .cl-card:is(:hover, :focus-within) :is(.cl-fav, .cl-add), .cl-fav[aria-pressed="true"], .cl-add.in { opacity: 1; transform: none; } /* Under the art: name, grade and set, then price, how far under market, and where it's listed */ .cl-info { display: flex; flex-direction: column; min-width: 0; padding: 11px 2px 0; } .cl-name { margin: 0; font-size: 14px; font-weight: 550; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-price { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-feature-settings: "tnum"; } .cl-price b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; } .cl-price b small { margin-right: 4px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--text-3); } .cl-dn { font-size: 12px; font-weight: 600; color: var(--up); } /* Markets stack like avatars and fan out a little on hover, where a card lists each one with its lowest ask */ .cl-mks { position: relative; display: flex; margin-left: auto; padding-left: 4px; } .cl-mks > .mkm { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 2px var(--bg); transition: translate .35s var(--spring); } .cl-mks > .mkm + .mkm { margin-left: -8px; } /* The fan opens leftwards only: each logo slides by how many sit to its right, so the right edge never moves */ .cl-mks:hover > .mkm { translate: calc(var(--k) * -6px) 0; } .cl-mks > .more { background: var(--s3); color: var(--text-2); font-size: 10px; font-weight: 650; font-feature-settings: "tnum"; } .cl-card:hover { z-index: 3; } .cl-mkc { position: absolute; z-index: 5; right: -6px; bottom: calc(100% + 10px); width: 216px; display: flex; flex-direction: column; padding: 10px 4px 4px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(4px) scale(.97); transform-origin: bottom right; filter: blur(4px); pointer-events: none; transition: opacity .16s, transform .3s var(--spring), filter .2s; } .cl-mks:hover .cl-mkc { opacity: 1; transform: none; filter: none; transition-delay: .12s; } .cl-mkc small { padding: 0 10px 6px; font-size: 12px; color: var(--text-3); } .cl-mkc .r { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px 0 8px; border-radius: 10px; font-size: 13px; font-weight: 500; } .cl-mkc .r + .r { box-shadow: 0 -1px 0 var(--line); } .cl-mkc .mkm { width: 20px; height: 20px; } .cl-mkc b { margin-left: auto; font-size: 13px; font-weight: 600; font-feature-settings: "tnum"; } /* Sealed product: the catalog shot is cut out of its backdrop, so it stands on the tile like the cards do */ .cl-obj.cl-prod { position: absolute; inset: 14px; height: auto; } .cl-prod img { object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); } /* The light-catch is a rectangle, so on a cut-out it would light up the empty space around the box */ .cl-prod::after { display: none; } /* A seller's own photo fills the frame, tagged so it's never mistaken for a catalog shot */ .cl-art.photo { padding: 0; overflow: hidden; } .cl-art > .cl-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .cl-card:hover .cl-ph { transform: scale(1.04); } .cl-art.photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; } .cl-badge { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 11.5px; font-weight: 550; white-space: nowrap; } .cl-badge .icon { width: 12px; height: 12px; } .cl-badge.ph { left: 8px; bottom: 8px; } .cl-badge.n { top: 8px; right: 8px; } .cl-sk { position: relative; overflow: hidden; } .cl-sk::before { content: ""; display: block; aspect-ratio: 4 / 5; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); } .cl-sk i { display: block; height: 11px; width: 78%; margin-top: 14px; border-radius: 6px; background: var(--s1); } .cl-sk i + i { width: 52%; margin-top: 8px; } .cl-sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .045) 50%, transparent 70%); background-size: 250% 100%; animation: cl-shim 1.1s linear infinite; } @keyframes cl-shim { from { background-position: 120% 0; } to { background-position: -120% 0; } } .cl-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 72px 16px; text-align: center; font-size: 14px; color: var(--text-3); } .cl-empty b { font-size: 18px; font-weight: 600; color: var(--text); } .cl-empty .btn { height: 40px; margin-top: 10px; font-size: 14px; } /* Detail sheet: the card on a dark stage, everything you need to decide on the right */ .overlay.cl-ov { align-items: center; padding: 24px; } .cl-dlg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); width: min(1100px, 100%); height: min(740px, calc(100dvh - 48px)); background: var(--s1); border: 1px solid var(--line-2); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); } .cl-ov.open .cl-dlg { animation: pop .45s var(--spring) both; } .cl-d-art { position: relative; display: grid; place-items: center; min-height: 0; padding: 64px 56px; background: var(--bg); border-right: 1px solid var(--line); perspective: 1200px; } .cl-d-art .cl-obj { height: min(100%, 540px); } .cl-d-art .cl-raw { height: min(85%, 460px); } .cl-d-art .cl-obj.cl-prod { inset: 64px 56px 72px; height: auto; } .cl-d-art.photo { padding: 24px 24px 72px; } .cl-d-art > .cl-ph { width: 100%; height: 100%; object-fit: contain; } /* Catalog shot or the seller's photo of this listing */ .cl-d-pics { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .cl-d-pics button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 4px; border-radius: 99px; color: rgba(255, 255, 255, .7); font-size: 12.5px; font-weight: 550; white-space: nowrap; transition: background-color .2s, color .2s; } .cl-d-pics button:hover { color: #fff; } .cl-d-pics button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; } .cl-d-pics img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .12); } .cl-d-art.next .cl-obj { animation: cl-in .5s var(--spring) both; } .cl-d-art.prev .cl-obj { animation: cl-in-r .5s var(--spring) both; } @keyframes cl-in { from { opacity: 0; translate: 40px 0; filter: blur(6px); } } @keyframes cl-in-r { from { opacity: 0; translate: -40px 0; filter: blur(6px); } } .cl-d-cap { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); } .cl-d-cap .icon { width: 13px; height: 13px; } .cl-d-cap a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } .cl-d-cap a:hover { color: var(--text); } .cl-d-body { display: flex; flex-direction: column; min-height: 0; } .cl-d-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0 28px; } .cl-d-src { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); } .cl-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--s2); font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; } .cl-pill svg { width: 12px; height: 12px; } .cl-pill svg:not(.icon) { fill: currentColor; } .cl-d-nav { display: flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--text-3); font-feature-settings: "tnum"; } .cl-d-nav span { padding: 0 4px; } .cl-d-nav .icon-btn:hover { background: var(--s2); color: var(--text); } .cl-d-nav [data-step="-1"] .icon { transform: scaleX(-1); } .cl-d-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 28px 22px; scrollbar-width: thin; } .cl-d-scroll.swap > * { animation: fade .35s var(--ease) both; } .cl-d-scroll h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; } .cl-d-sub { margin: 6px 0 0; font-size: 14px; color: var(--text-3); } .cl-d-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .cl-d-price .big { font-size: 42px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-feature-settings: "tnum"; } .cl-d-price .big small { margin-left: 7px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text-3); } .cl-d-deal { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--up-tint); color: var(--up); font-size: 13px; font-weight: 600; } .cl-d-deal::before { content: ""; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; } .cl-d-deal.fair { background: var(--s2); color: var(--text-2); } .cl-d-deal.fair::before { display: none; } .cl-d-mkt { margin: 8px 0 0; font-size: 13px; color: var(--text-3); font-feature-settings: "tnum"; } .cl-d-mkt b { font-weight: 500; color: var(--text-2); } .cl-d-scroll h4 { display: flex; justify-content: space-between; margin: 24px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); } .cl-d-scroll h4 small { font-size: 12.5px; font-weight: 400; color: var(--text-3); } .cl-cmp-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 58px; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; } .cl-cmp-r + .cl-cmp-r { box-shadow: 0 -1px 0 var(--line); } .cl-cmp-r.best { background: var(--s2); box-shadow: none; } .cl-cmp-r.best + .cl-cmp-r { box-shadow: none; } .cl-cmp-r .mkm { width: 22px; height: 22px; } .cl-cmp-r span small { margin-left: 6px; font-size: 12px; color: var(--text-3); } .cl-cmp-r b { font-weight: 600; font-feature-settings: "tnum"; text-align: right; } .cl-cmp-r em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-3); text-align: right; font-feature-settings: "tnum"; } .cl-cmp-r.best em { color: var(--up); font-weight: 600; } /* A product's listings: pick one and the photo, price and checkout follow it */ .cl-ls { display: flex; flex-direction: column; gap: 2px; } .cl-l { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 6px 12px 6px 6px; border-radius: 14px; text-align: left; transition: background-color .15s, box-shadow .15s; } .cl-l:hover { background: var(--s1); } .cl-l[aria-checked="true"] { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06); } .cl-l .th { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--s2); } .cl-l .th img { display: block; width: 100%; height: 100%; object-fit: cover; } .cl-l .th.cat img { padding: 4px; object-fit: contain; } .cl-l .th.card img { padding: 3px; object-fit: contain; } .cl-l .t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cl-l .t span { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 550; } .cl-l .t .mkm { width: 16px; height: 16px; border-radius: 4px; } .cl-l small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-l b { font-size: 14px; font-weight: 600; font-feature-settings: "tnum"; } .cl-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 0; } .cl-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .cl-dl dt { color: var(--text-3); white-space: nowrap; } .cl-dl dd { min-width: 0; margin: 0; font-weight: 500; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-d-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.5; color: var(--text-3); } .cl-d-note > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--text-2); } .cl-d-note > svg:not(.icon) { fill: currentColor; } .cl-d-note b { display: block; font-size: 14px; font-weight: 600; color: var(--text); } .cl-d-act { display: flex; gap: 8px; padding: 14px 28px 22px; border-top: 1px solid var(--line); } .cl-d-act .btn { height: 52px; } .cl-d-act .btn-cta { flex: 1; } .cl-d-act .sq { width: 52px; padding: 0; flex: none; } #clDView > i { display: contents; } #clDView .mkm { margin-left: -4px; } @media (max-width: 960px) { .cl-count { display: none; } } @media (max-width: 760px) { .cl { padding: 18px 0 24px; } .cl-h { flex-direction: column; align-items: stretch; gap: 14px; } .cl-h h2 { font-size: 28px; } .cl-search { flex: none; } .cl-search kbd { display: none; } .cl-bar { margin-top: 12px; } .cl-bar-in { gap: 8px; } .cl-sort, .cl-fl { display: none; } #clFilters > .cl-chip { position: relative; width: 36px; padding: 0; justify-content: center; } #clFilters .cl-fn { position: absolute; top: -3px; right: -3px; margin: 0; box-shadow: 0 0 0 2px var(--bg); } .cl-fp-sort { display: block; } /* Its menus are bottom sheets (see Phone). A backdrop filter would trap them inside the bar, so the bar goes solid */ .cl-bar.stuck .cl-bar-in { background: var(--s1) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .cl-mkts { grid-template-columns: minmax(0, 1fr); } .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; } /* Half a phone is too narrow for "from", the deal and three market logos: the "N listings" badge already says "from" */ .cl-price { gap: 6px; } .cl-price b small { display: none; } .cl-mks > .mkm { width: 18px; height: 18px; border-radius: 5px; } .cl-mkc { display: none; } /* The listing count moves to the bottom corner, off the slab's grading label */ .cl-badge.n { top: auto; bottom: 8px; } .cl-d-act .btn-cta { min-width: 0; overflow: hidden; } .cl-art { padding: 12px; } .overlay.cl-ov { align-items: flex-end; padding: 0; } .cl-dlg { grid-template-columns: minmax(0, 1fr); grid-template-rows: 34dvh minmax(0, 1fr); height: 94dvh; border-radius: 24px 24px 0 0; border-bottom: 0; } .cl-d-art { padding: 20px 20px 40px; border-right: 0; border-bottom: 1px solid var(--line); } .cl-d-cap { bottom: 10px; } .cl-d-top { padding-left: 20px; } .cl-d-scroll { padding: 12px 20px 18px; } .cl-d-scroll h2 { font-size: 22px; } .cl-d-price .big { font-size: 34px; } .cl-dl { grid-template-columns: minmax(0, 1fr); } .cl-d-act { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); } #clDView { width: 52px; padding: 0; flex: none; } #clDView span, #clDView > i { display: none; } .cl-d-src > span:not(.cl-pill) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* On touch, a tap opens the listing (save and add live there); a saved card keeps its heart, clear of the slab label */ @media (hover: none) { .cl-add, .cl-fav[aria-pressed="false"] { display: none; } .cl-fav { top: auto; bottom: 8px; } .cl-badge.ph { bottom: auto; top: 8px; } } html[data-theme="light"] .cl-search { background: #fff; box-shadow: var(--ring), var(--lift); } html[data-theme="light"] .cl-search:focus-within { box-shadow: 0 0 0 2px var(--focus), var(--lift); } /* A phone's page is tinted right up to the field, with no panel around it: the outline needs more weight there */ @media (max-width: 760px) { html[data-theme="light"] .cl-search:not(:focus-within) { box-shadow: 0 0 0 1px rgba(20, 22, 22, .14), var(--lift); } } html[data-theme="light"] .cl-games > .glide { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05), 0 4px 12px -6px rgba(20, 22, 22, .12); } html[data-theme="light"] .cl-bar.stuck .cl-bar-in { background: rgba(255, 255, 255, .86); box-shadow: var(--ring), 0 16px 40px -18px rgba(20, 22, 22, .35); } html[data-theme="light"] .cl-g img[src*="starwars"] { filter: brightness(0) opacity(.8); } html[data-theme="light"] .cl-card .cl-art { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .04); } html[data-theme="light"] .cl-card:hover .cl-art { box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), var(--lift); } html[data-theme="light"] .cl-tag { background: #fff; box-shadow: var(--ring); } html[data-theme="light"] .slab-in { background: rgba(20, 22, 22, .04); box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .14), inset 0 0 0 3.5cqi rgba(255, 255, 255, .5), 0 18px 30px -18px rgba(20, 22, 22, .45); } html[data-theme="light"] .slab-card { background: rgba(20, 22, 22, .06); } html[data-theme="light"] .cl-raw img { box-shadow: 0 0 0 1px rgba(20, 22, 22, .08), 0 18px 30px -18px rgba(20, 22, 22, .5); } html[data-theme="light"] .cl-fav { background: rgba(255, 255, 255, .85); } html[data-theme="light"] .cl-dlg { background: #fff; border-color: transparent; box-shadow: var(--ring), 0 40px 120px -30px rgba(20, 22, 22, .35); } html[data-theme="light"] .cl-d-art { background: var(--s2); } html[data-theme="light"] .cl-mkc { background: #fff; border-color: transparent; box-shadow: var(--ring), 0 24px 50px -16px rgba(20, 22, 22, .3); } html[data-theme="light"] .cl-prod img { filter: drop-shadow(0 12px 14px rgba(20, 22, 22, .22)); } html[data-theme="light"] .cl-l[aria-checked="true"] { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05), 0 4px 12px -6px rgba(20, 22, 22, .12); } html[data-theme="light"] .cl-sk::after { background-image: linear-gradient(100deg, transparent 30%, rgba(20, 22, 22, .05) 50%, transparent 70%); } /* ================= Travel ================= */ /* Stays and flights as one booking flow: a single search pill (where, when, who), photo-led results, and a sheet that goes from picking a room or fare to a confirmed booking paid from the wallet */ .app[data-view="travel"] :is(.hero, .dock, .quick, .lb-msg) { display: none; } .app[data-view="travel"] .stage { padding-top: 0; scrollbar-gutter: stable; } .app[data-view="travel"] .stage::before, .app[data-view="travel"] .stage::after { display: none; } .tr { width: min(1280px, 100%); flex: none; padding: 28px 24px 64px; } .tr-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; animation: rise .7s var(--ease) backwards; } .tr-h h2 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; } .seg.tr-mode { padding: 4px; } .seg.tr-mode button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px 0 13px; font-size: 14px; } .seg.tr-mode .icon { width: 16px; height: 16px; } .seg.tr-mode > .glide { border-radius: 99px; background: var(--s3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } /* The search pill: each part opens its own popover right under it. Sticky, and it floats once stuck */ .tr-bar { position: sticky; top: 10px; z-index: 7; margin-top: 18px; animation: rise .7s 80ms var(--ease) backwards; } .tr-search { display: flex; align-items: center; height: 70px; padding: 6px; border-radius: 99px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); } .tr-bar.stuck .tr-search { background: rgba(18, 18, 18, .82); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 16px 40px -18px rgba(0, 0, 0, .9); animation: cl-lift .5s var(--spring); } .tr-search.swap > * { animation: fade .3s var(--ease) both; } .tr-f { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 22px; border-radius: 99px; text-align: left; cursor: pointer; transition: background-color .15s, box-shadow .15s; } .tr-f.wide { flex-grow: 1.35; } .tr-f + .tr-f::before, .tr-swap + .tr-f::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 28px; translate: 0 -50%; background: var(--line-2); transition: opacity .15s; } .tr-f:hover, .tr-f.on { background: var(--s2); } .tr-f.on { box-shadow: inset 0 0 0 1px var(--line-2); } .tr-f:is(:hover, .on)::before, .tr-f:is(:hover, .on) + .tr-f::before, .tr-swap + .tr-f::before { opacity: 0; } .tr-f > small { font-size: 12px; font-weight: 600; color: var(--text-2); } .tr-f > b, .tr-f > input { width: 100%; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-f > b.ph { color: var(--text-3); font-weight: 400; } .tr-f > input { height: 22px; padding: 0; border: 0; outline: 0; background: none; cursor: text; } .tr-f > input::placeholder { color: var(--text-3); font-weight: 400; } .tr-f.shake { animation: tr-shake .4s; } @keyframes tr-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } } /* From and To swap places with a spin */ .tr-swap { position: relative; z-index: 1; flex: none; width: 34px; height: 34px; margin: 0 -17px; display: grid; place-items: center; border-radius: 50%; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: color .15s, background-color .15s, transform .5s var(--spring); } .tr-swap:hover { color: var(--text); background: var(--s3); } .tr-swap.spin { transform: rotate(180deg); } .tr-swap .icon { width: 15px; height: 15px; } .tr-go { flex: none; height: 56px; padding: 0 26px 0 22px; margin-left: 6px; border-radius: 99px; font-size: 15px; } .tr-go .icon { width: 18px; height: 18px; } /* Popovers: one panel that re-opens under whichever part of the pill is active */ .tr-pop { position: absolute; z-index: 41; top: calc(100% + 10px); left: 0; width: 400px; max-width: 100%; padding: 8px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 26px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top left; filter: blur(4px); pointer-events: none; transition: opacity .16s, transform .32s var(--spring), filter .2s; } .tr-pop.open { opacity: 1; transform: none; filter: none; pointer-events: auto; } .tr-pop.swap > * { animation: fade .25s var(--ease) both; } .tr-pop.hop { animation: pop .26s var(--ease) both; } .tr-mh { display: block; padding: 10px 12px 6px; font-size: 12px; font-weight: 600; color: var(--text-3); } .tr-place { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 12px 6px 6px; border-radius: 16px; text-align: left; transition: background-color .15s; } .tr-place:hover, .tr-place.kb { background: var(--s2); } .tr-place img, .tr-place .tr-ap { width: 46px; height: 46px; flex: none; border-radius: 12px; object-fit: cover; background: var(--s2); } .tr-place .tr-ap { display: grid; place-items: center; color: var(--text-2); } .tr-place .tr-ap .icon { width: 19px; height: 19px; } .tr-place .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .tr-place .t b { font-size: 14.5px; font-weight: 600; } .tr-place .t small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-place .m { flex: none; font-size: 12.5px; color: var(--text-3); font-feature-settings: "tnum"; } .tr-none { padding: 22px 12px; font-size: 13.5px; color: var(--text-3); text-align: center; } /* Calendar: two months, a range that previews as you hover */ .tr-cal { padding: 8px 10px 4px; } .tr-cal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .tr-cal-h > span { display: flex; gap: 2px; } .tr-cal-h .icon-btn:hover:not(:disabled) { background: var(--s2); color: var(--text); } .tr-cal-h .icon-btn:disabled { opacity: .3; } .tr-cal-h [data-cal="-1"] .icon { transform: scaleX(-1); } .tr-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .tr-month h5 { margin: 6px 0 10px; font-size: 14.5px; font-weight: 600; text-align: center; } .tr-wk, .tr-days-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .tr-wk span { padding-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-align: center; } .tr-d { position: relative; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; font-feature-settings: "tnum"; color: var(--text); } .tr-d::before { content: ""; position: absolute; inset: 2px 0; z-index: -1; transition: background-color .12s; } .tr-d > span { position: relative; width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .12s, color .12s, box-shadow .12s; } .tr-d small { font-size: 9.5px; font-weight: 500; color: var(--text-3); line-height: 1.1; } .tr-d small.lo { color: var(--up); font-weight: 650; } .tr-d:hover:not(:disabled) > span { box-shadow: inset 0 0 0 1.5px var(--text); } .tr-d:disabled { color: var(--text-3); opacity: .4; cursor: default; } .tr-d.today > span::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .tr-d:is(.in, .hov)::before { background: var(--s3); } .tr-d.start:not(.end)::before { left: 50%; background: var(--s3); } .tr-d.end:not(.start)::before { right: 50%; background: var(--s3); } .tr-d.start.solo::before { display: none; } .tr-d:is(.start, .end) > span { background: var(--text); color: var(--bg); } .tr-d:is(.start, .end) small { color: var(--bg); opacity: .7; } .tr-days-g { isolation: isolate; } .tr-cal-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 10px 6px; margin-top: 6px; border-top: 1px solid var(--line); } .tr-cal-f .n { margin-right: auto; font-size: 13.5px; color: var(--text-2); font-feature-settings: "tnum"; } .tr-cal-f .n b { font-weight: 600; color: var(--text); } .tr-cal-f .cl-opt { height: 30px; padding: 0 11px; font-size: 12.5px; } .tr-cal-f .btn { height: 36px; padding: 0 16px; font-size: 13.5px; } /* Who's coming */ .tr-step { display: flex; align-items: center; gap: 12px; padding: 12px 10px; } .tr-step + .tr-step { border-top: 1px solid var(--line); } .tr-step .t { flex: 1; display: flex; flex-direction: column; } .tr-step .t b { font-size: 14.5px; font-weight: 600; } .tr-step .t small { font-size: 12.5px; color: var(--text-3); } .tr-step button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: color .15s, box-shadow .15s, transform .3s var(--spring); } .tr-step button:hover:not(:disabled) { color: var(--text); box-shadow: inset 0 0 0 1px var(--text-2); } .tr-step button:active:not(:disabled) { transform: scale(.88); } .tr-step button:disabled { opacity: .3; } .tr-step button .icon { width: 15px; height: 15px; } .tr-step .v { width: 22px; text-align: center; font-size: 15px; font-weight: 600; font-feature-settings: "tnum"; } .tr-cabin { padding: 12px 10px 8px; border-top: 1px solid var(--line); } .tr-cabin h5 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-3); } .tr-perks { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 16px 6px 0; font-size: 13px; color: var(--text-3); animation: rise .7s 140ms var(--ease) backwards; } .tr-perks span { display: inline-flex; align-items: center; gap: 7px; } .tr-perks .icon { width: 15px; height: 15px; color: var(--text-2); } .tr-perks svg:not(.icon) { width: 15px; height: 15px; fill: currentColor; color: var(--text-2); } /* Browse: where people are heading, filtered by mood */ .tr-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 40px 0 16px; } .tr-sh h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; } .tr-sh h3 small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--text-3); } .tr-moods { display: flex; gap: 6px; flex-wrap: wrap; } .tr-moods .cl-opt { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13.5px; } .tr-dests { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 16px; } .tr-dest { display: flex; flex-direction: column; min-width: 0; text-align: left; border-radius: 20px; animation: rise .55s var(--ease) both; animation-delay: calc(min(var(--n, 0), 12) * 35ms); } .tr-dest:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; } .tr-sorts[hidden], #trFav[hidden] { display: none; } .tr-al.sm { width: 22px; height: 22px; border-radius: 7px; font-size: 8.5px; } .tr-dest .ph { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--s2); } .tr-dest .ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; } .tr-dest img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .tr-dest:hover img { transform: scale(1.06); } .tr-dest .cl-badge { top: 10px; left: 10px; } .tr-dest .go { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--cta); color: var(--cta-ink); opacity: 0; transform: scale(.7) rotate(-45deg); transition: opacity .2s, transform .45s var(--spring); } .tr-dest .go .icon { width: 17px; height: 17px; } .tr-dest:is(:hover, :focus-visible) .go { opacity: 1; transform: none; } .tr-dest .tx { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px 0; } .tr-dest b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .tr-dest small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); } .tr-dest small .icon { width: 13px; height: 13px; } .tr-dest .pr { margin-top: 4px; font-size: 13.5px; color: var(--text-2); font-feature-settings: "tnum"; } .tr-dest .pr b { font-size: 14px; color: var(--text); } /* Results */ .tr-rh { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 30px 0 18px; } .tr-rt { display: flex; align-items: center; gap: 12px; min-width: 0; } .tr-rt > div { min-width: 0; } .tr-rt h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-rt p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-3); font-feature-settings: "tnum"; } .tr-back { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: background-color .15s, color .15s; } .tr-back:hover { background: var(--s2); color: var(--text); } .tr-back .icon { width: 17px; height: 17px; transform: scaleX(-1); } .tr-scan { display: inline-flex; align-items: center; gap: 8px; } .tr-scan .spinner { width: 13px; height: 13px; } .tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 30px 18px; } .tr-grid.fls { grid-template-columns: minmax(0, 1fr); gap: 10px; } /* Stay card: swipe through the photos, everything that matters in three lines below */ .tr-card { position: relative; display: flex; flex-direction: column; min-width: 0; cursor: pointer; border-radius: 20px; animation: rise .55s var(--ease) both; animation-delay: calc(min(var(--n, 0), 12) * 35ms); } .tr-card:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; } .tr-ph { position: relative; aspect-ratio: 20 / 19; border-radius: 20px; overflow: hidden; background: var(--s2); } .tr-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; } .tr-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .tr-track::-webkit-scrollbar { display: none; } .tr-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; -webkit-user-drag: none; user-select: none; } .tr-arr { position: absolute; z-index: 2; top: 50%; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .35s var(--spring); } .tr-arr .icon { width: 15px; height: 15px; } .tr-arr.prev { left: 10px; } .tr-arr.prev .icon { transform: scaleX(-1); } .tr-arr.next { right: 10px; } .tr-gal .tr-arr:not(:disabled) { opacity: 1; transform: none; } @media (hover: hover) { .tr-card:hover .tr-arr:not(:disabled) { opacity: 1; transform: none; } } /* Touch: the photos swipe, and the hidden arrows would otherwise catch taps at the photo's edges (and on iOS turn the first tap into a hover), so a tap anywhere on a card opens the stay */ @media (hover: none) { .tr-card .tr-arr { display: none; } } .tr-arr:hover { transform: scale(1.08) !important; } .tr-arr:disabled { pointer-events: none; } .tr-dots { position: absolute; z-index: 1; left: 50%; bottom: 12px; translate: -50% 0; display: flex; gap: 5px; pointer-events: none; } .tr-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .55); transition: width .35s var(--spring), background-color .2s; } .tr-dots i.on { width: 16px; background: #fff; } .tr-card .cl-badge { top: 12px; left: 12px; } .cl-badge.deal { background: var(--up); color: #06210f; } .tr-fav { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .35s var(--spring), color .15s; } .tr-fav:hover { transform: scale(1.1); } .tr-fav:active { transform: scale(.85); } .tr-fav .icon { width: 17px; height: 17px; } .tr-fav[aria-pressed="true"], #trFav[aria-pressed="true"] { color: #ff5a6a; } :is(.tr-fav, #trFav)[aria-pressed="true"] svg { fill: currentColor; } .tr-fav.pop { animation: tr-heart .45s var(--spring); } @keyframes tr-heart { 40% { transform: scale(1.35); } } .tr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 4px 0; } .tr-t { display: flex; align-items: flex-start; gap: 10px; } .tr-t h4 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-score { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; font-feature-settings: "tnum"; } .tr-score .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; } .tr-score small { font-weight: 400; color: var(--text-3); } .tr-meta { margin: 0; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-ok { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 550; color: var(--up); white-space: nowrap; overflow: hidden; } .tr-ok .icon { width: 13px; height: 13px; stroke-width: 2.6; } .tr-ok.dim { color: var(--text-3); font-weight: 400; } .tr-price { margin: 5px 0 0; font-size: 13.5px; color: var(--text-3); font-feature-settings: "tnum"; } .tr-price b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .tr-price s { margin-right: 5px; color: var(--text-3); } .tr-price u { margin-left: 6px; text-decoration: none; color: var(--text-2); } .tr-sk { position: relative; overflow: hidden; } .tr-sk::before { content: ""; display: block; aspect-ratio: 20 / 19; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); } .tr-sk i { display: block; height: 12px; width: 72%; margin-top: 15px; border-radius: 6px; background: var(--s1); } .tr-sk i + i { width: 46%; margin-top: 9px; } .tr-sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .045) 50%, transparent 70%); background-size: 250% 100%; animation: cl-shim 1.1s linear infinite; } .tr-grid.fls .tr-sk::before { aspect-ratio: auto; height: 112px; } .tr-grid.fls .tr-sk i { display: none; } /* Flights: best, cheapest and fastest up front, then one row per itinerary */ .tr-sorts { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); } .tr-sorts > .glide { border-radius: 16px; background: var(--s3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .tr-sorts button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 16px; border-radius: 16px; text-align: left; transition: color .15s; } .tr-sorts button b { font-size: 14.5px; font-weight: 600; color: var(--text-2); } .tr-sorts button small { font-size: 12.5px; color: var(--text-3); font-feature-settings: "tnum"; } .tr-sorts button[aria-checked="true"] b { color: var(--text); } .tr-fl { display: flex; align-items: center; gap: 24px; padding: 16px 16px 16px 22px; border-radius: 22px; cursor: pointer; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, box-shadow .15s; animation: rise .5s var(--ease) both; animation-delay: calc(min(var(--n, 0), 10) * 40ms); } .tr-fl:hover { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); } .tr-fl:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } .tr-fl-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .tr-leg { display: grid; grid-template-columns: 36px 64px minmax(80px, 1fr) 64px; align-items: center; gap: 16px; } .tr-al { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--a); color: var(--b); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .tr-tm { display: flex; flex-direction: column; font-feature-settings: "tnum"; } .tr-tm b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .tr-tm b sup { margin-left: 2px; font-size: 10px; font-weight: 600; color: var(--text-3); } .tr-tm small { font-size: 12.5px; color: var(--text-3); } .tr-tm:last-child { align-items: flex-end; } .tr-line { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--text-3); font-feature-settings: "tnum"; white-space: nowrap; } .tr-line i { position: relative; display: flex; justify-content: space-evenly; align-items: center; width: 100%; height: 2px; border-radius: 2px; background: var(--line-2); } .tr-line i::after { content: ""; position: absolute; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); } .tr-line i em { width: 8px; height: 8px; border-radius: 50%; background: var(--s1); box-shadow: inset 0 0 0 2px var(--text-3); } .tr-line .dr { color: var(--up); font-weight: 600; } .tr-fl-al { margin: -2px 0 0 52px; font-size: 12.5px; color: var(--text-3); } .tr-fl-p { flex: none; width: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 22px; border-left: 1px solid var(--line); text-align: right; font-feature-settings: "tnum"; } .tr-fl-p > b { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; } .tr-fl-p > small { font-size: 12.5px; color: var(--text-3); } .tr-fl-p .btn { margin-top: 8px; } .tr-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-bottom: 4px; border-radius: 99px; background: var(--s3); font-size: 11.5px; font-weight: 600; color: var(--text-2); } .tr-tag.lo { background: var(--up-tint); color: var(--up); } .cl-empty.tr-empty { padding: 64px 16px; } /* The sheet: the photos on the left, the decision on the right */ .tr-gal { position: relative; min-height: 0; overflow: hidden; background: var(--bg); border-right: 1px solid var(--line); } .tr-gal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tr-gal > img.in { animation: tr-in .55s var(--ease) both; } @keyframes tr-in { from { opacity: 0; transform: scale(1.04); } } .tr-thumbs { position: absolute; z-index: 2; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 5px; max-width: calc(100% - 32px); padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 16px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tr-thumbs button { flex: none; width: 54px; height: 40px; border-radius: 11px; overflow: hidden; opacity: .5; transition: opacity .2s, box-shadow .2s; } .tr-thumbs button:hover { opacity: .85; } .tr-thumbs button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; } .tr-thumbs img { width: 100%; height: 100%; object-fit: cover; } .tr-gal .cl-badge { top: 16px; left: 16px; } /* Flights: the destination, with the route laid over it */ .tr-route { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 22px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; } .tr-route > span { display: flex; flex-direction: column; } .tr-route > span:last-child { align-items: flex-end; } .tr-route b { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; line-height: 1; } .tr-route small { margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .7); } .tr-route i { flex: 1; position: relative; height: 0; border-top: 1.5px dashed rgba(255, 255, 255, .45); } .tr-route i .icon { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; translate: -50% -50%; color: #fff; animation: tr-fly 2.4s var(--ease) infinite; } @keyframes tr-fly { 0% { left: 8%; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: 92%; opacity: 0; } } .tr-d-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tr-stars { display: inline-flex; gap: 1px; color: var(--gold); } .tr-stars .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; } .tr-rate { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .tr-rate .sc { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px 14px 14px 4px; background: var(--text); color: var(--bg); font-size: 17px; font-weight: 700; font-feature-settings: "tnum"; } .tr-rate b { display: block; font-size: 15px; font-weight: 600; } .tr-rate small { font-size: 13px; color: var(--text-3); } /* The trip at a glance; tap a part to change it */ .tr-trip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; } .tr-trip button { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; text-align: left; transition: background-color .15s; } .tr-trip button + button { box-shadow: -1px 0 0 var(--line-2); } .tr-trip button:hover { background: var(--s2); } .tr-trip small { font-size: 12px; font-weight: 600; color: var(--text-3); } .tr-trip b { font-size: 14px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-ams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } .tr-ams span { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); } .tr-ams .icon { width: 18px; height: 18px; color: var(--text); } .tr-opts { display: flex; flex-direction: column; gap: 8px; } .tr-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; text-align: left; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s, box-shadow .2s; } .tr-opt:hover { background: var(--s2); } .tr-opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--text); } .tr-opt .rd { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .25s var(--spring); } .tr-opt[aria-checked="true"] .rd { box-shadow: inset 0 0 0 6px var(--text); } .tr-opt .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tr-opt .t b { font-size: 14.5px; font-weight: 600; } .tr-opt .t small { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--text-3); } .tr-opt .t small span { display: inline-flex; align-items: center; gap: 4px; } .tr-opt .t small .icon { width: 12px; height: 12px; stroke-width: 2.4; } .tr-opt .t small .ok { color: var(--up); } .tr-opt .p { display: flex; flex-direction: column; align-items: flex-end; font-feature-settings: "tnum"; } .tr-opt .p b { font-size: 15px; font-weight: 600; } .tr-opt .p small { font-size: 12px; color: var(--text-3); } .tr-sum { margin: 0; } .tr-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--text-2); font-feature-settings: "tnum"; } .tr-sum dd { margin: 0; color: var(--text); } .tr-sum .tot { margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; color: var(--text); } .tr-sum .pts dd { color: var(--up); font-weight: 600; } /* Flight legs in the sheet: a small timeline per leg */ .tr-lg { margin-top: 14px; padding: 16px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-2); } .tr-lg h5 { display: flex; justify-content: space-between; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-2); } .tr-lg h5 small { font-weight: 400; color: var(--text-3); font-feature-settings: "tnum"; } .tr-tl { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 22px; } .tr-tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); } .tr-tl > div { position: relative; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-feature-settings: "tnum"; } .tr-tl > div::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--s1); box-shadow: inset 0 0 0 2.5px var(--text); } .tr-tl b { font-weight: 600; } .tr-tl small { color: var(--text-3); } .tr-tl .lay { padding: 7px 12px; border-radius: 10px; background: var(--s2); font-size: 12.5px; color: var(--text-2); } .tr-tl .lay::before { display: none; } .tr-tl .seg-i { font-size: 12.5px; color: var(--text-3); } .tr-tl .seg-i::before { display: none; } .tr-fares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tr-fare { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; text-align: left; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s, box-shadow .2s; } .tr-fare:hover { background: var(--s2); } .tr-fare[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--text); } .tr-fare > b { font-size: 14.5px; font-weight: 600; } .tr-fare > strong { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum"; } .tr-fare ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); } .tr-fare li { display: flex; align-items: flex-start; gap: 6px; } .tr-fare li .icon { width: 13px; height: 13px; margin-top: 1px; flex: none; stroke-width: 2.4; color: var(--up); } .tr-fare li.off { color: var(--text-3); } .tr-fare li.off .icon { color: var(--text-3); } /* Paying: which token, right beside the button */ .tr-pay { flex: none; } .tr-pay > button { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 10px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; transition: background-color .15s; } .tr-pay > button:hover, .tr-pay.open > button { background: var(--s2); } .tr-pay .tk { width: 28px; height: 28px; } .tr-pay .t { display: flex; flex-direction: column; font-feature-settings: "tnum"; } .tr-pay .t small { font-size: 11.5px; color: var(--text-3); } .tr-pay .t b { font-size: 13.5px; font-weight: 600; white-space: nowrap; } .tr-pay .chev { width: 13px; height: 13px; color: var(--text-3); } .tr-act .btn-cta:disabled { opacity: .45; cursor: not-allowed; } .cl-d-act[hidden] { display: none; } /* Booked */ .tr-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 0 6px; } .tr-done .ck { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--up-tint); color: var(--up); animation: popin .5s var(--spring) both; } .tr-done .ck svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .tr-done .ck path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s .3s var(--ease) forwards; } .tr-done h2 { margin-top: 18px; } .tr-done p { margin: 8px 0 0; max-width: 380px; font-size: 14px; line-height: 1.5; color: var(--text-3); } .tr-ref { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; height: 34px; padding: 0 6px 0 14px; border-radius: 99px; background: var(--s2); font: 500 13px var(--mono); } .tr-ref .copy { width: 26px; height: 26px; } .tr-done .cl-dl { width: 100%; margin-top: 22px; text-align: left; } .tr-done .pts { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--up-tint); color: var(--up); font-size: 13px; font-weight: 600; font-feature-settings: "tnum"; } .tr-done .pts .icon { width: 14px; height: 14px; } @media (max-width: 960px) { .tr-fl { flex-direction: column; align-items: stretch; gap: 14px; } .tr-fl-p { width: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); text-align: left; } .tr-fl-p > b { margin-right: auto; order: 1; } .tr-fl-p .tr-tag { margin: 0; order: 0; } .tr-fl-p > small { order: 2; } .tr-fl-p .btn { margin: 0; order: 3; } } @media (max-width: 760px) { .tr { padding: 18px 0 24px; } .tr-h h2 { font-size: 28px; } /* The pill stacks into a card; it stays in the page instead of sticking, and its popovers become bottom sheets */ .tr-bar { position: relative; top: auto; margin-top: 14px; } /* Corners run concentric: the round Search button's 26px plus the card's 6px padding makes the card's 32px */ .tr-search { flex-direction: column; align-items: stretch; height: auto; padding: 6px; border-radius: 32px; } .tr-f { flex: none; height: 58px; padding: 0 16px; border-radius: 26px; } .tr-f + .tr-f::before, .tr-swap + .tr-f::before { left: 16px; right: 16px; top: 0; width: auto; height: 1px; translate: none; } .tr-swap { position: absolute; right: 22px; top: 50px; margin: 0; } .tr-go { height: 52px; margin: 6px 0 0; justify-content: center; } .tr-months { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* The popover is a bottom sheet (see Phone); its footer stays pinned to the bottom while the months scroll */ .tr-pop .tr-cal-f { position: sticky; bottom: calc(-10px - env(safe-area-inset-bottom)); margin: 6px -10px calc(-10px - env(safe-area-inset-bottom)); padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--s1); } html[data-theme="light"] .tr-pop .tr-cal-f { background: #fff; } .tr-perks { gap: 8px 16px; font-size: 12.5px; } .tr-sh { margin-top: 30px; } .tr-moods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .tr-moods .cl-opt { flex: none; } .tr-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; } .tr-dest .ph { aspect-ratio: 4 / 5; border-radius: 18px; } .tr-rh { margin: 22px 0 14px; } .tr-rt h3 { font-size: 19px; } .tr-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } #trFilters > .cl-chip { position: relative; width: 36px; padding: 0; justify-content: center; } #trFilters .cl-fn { position: absolute; top: -3px; right: -3px; margin: 0; box-shadow: 0 0 0 2px var(--bg); } .tr-sorts button { padding: 9px 10px; } .tr-sorts button small { font-size: 11.5px; } .tr-leg { grid-template-columns: 30px 54px minmax(60px, 1fr) 54px; gap: 10px; } .tr-al { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; } .tr-tm b { font-size: 15.5px; } .tr-fl { padding: 14px; } .tr-fl-al { margin-left: 40px; } .tr-dlg { grid-template-rows: 30dvh minmax(0, 1fr); } .tr-gal { border-right: 0; border-bottom: 1px solid var(--line); } .tr-thumbs button { width: 44px; height: 32px; } .tr-route { left: 12px; right: 12px; bottom: 12px; padding: 12px 16px; } .tr-route b { font-size: 24px; } .tr-trip { grid-template-columns: minmax(0, 1fr); } .tr-trip button + button { box-shadow: 0 -1px 0 var(--line-2); } .tr-fares { grid-template-columns: minmax(0, 1fr); } .tr-ams { grid-template-columns: minmax(0, 1fr); } .tr-pay .t { display: none; } .tr-pay > button { padding: 0 10px; } } html[data-theme="light"] .tr-search { background: #fff; box-shadow: var(--ring), var(--lift); } html[data-theme="light"] .tr-bar.stuck .tr-search { background: rgba(255, 255, 255, .88); box-shadow: var(--ring), 0 16px 40px -18px rgba(20, 22, 22, .35); } html[data-theme="light"] .tr-f.on { background: #fff; box-shadow: var(--ring), 0 6px 18px -8px rgba(20, 22, 22, .25); } html[data-theme="light"] .tr-swap { background: #fff; box-shadow: var(--ring); } html[data-theme="light"] .tr-pop { background: #fff; border-color: transparent; box-shadow: var(--ring), 0 24px 60px -16px rgba(20, 22, 22, .3); } html[data-theme="light"] .seg.tr-mode > .glide, html[data-theme="light"] .tr-sorts > .glide { background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20, 22, 22, .05), 0 4px 12px -6px rgba(20, 22, 22, .12); } html[data-theme="light"] .tr-fl, html[data-theme="light"] .tr-sorts { background: #fff; box-shadow: var(--ring); } html[data-theme="light"] .tr-fl:hover { box-shadow: 0 0 0 1px rgba(20, 22, 22, .12), var(--lift); } html[data-theme="light"] .tr-line i em { background: #fff; } html[data-theme="light"] .tr-sk::after { background-image: linear-gradient(100deg, transparent 30%, rgba(20, 22, 22, .05) 50%, transparent 70%); } html[data-theme="light"] .tr-tl > div::before { background: #fff; } /* ================= Phone ================= */ /* On a phone SP3ND is its own app: a full-bleed page under a floating glass tab bar, and every menu, picker, cart and detail view is a sheet that rises from the bottom and drags back down. Sheets share one curve and one grabber */ .tabbar, .m-br { display: none; } @media (max-width: 760px) { :root { --tb-h: 64px; --tb-gap: calc(10px + env(safe-area-inset-bottom)); --tb-room: calc(var(--tb-h) + var(--tb-gap) + 14px); --sheet: cubic-bezier(.32, .72, 0, 1); } /* The page scrolls on some screens and not others. Where scrollbars take up room (a narrow desktop window), keep that room reserved, so switching tabs never shifts the page or the tab bar sideways. Phones overlay theirs: no cost */ html { -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; } .app { grid-template-rows: auto 1fr auto auto; } .m-nav { display: none !important; } /* Header: brand, points and search. The nav, cart and profile live in the tab bar */ .top { padding: max(12px, env(safe-area-inset-top)) 16px 6px; } .top-right { gap: 8px; } .cart-btn, #wallet > .hbtn { display: none; } .top .hbtn.points, .top .hbtn.search { display: inline-flex; height: 38px; background: var(--s2) !important; box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .05) !important; } .top .hbtn.points { gap: 7px; padding: 0 14px 0 12px; color: var(--text); font-size: 14px; font-weight: 600; } .top .hbtn.search { width: 38px; padding: 0; justify-content: center; color: var(--text); } .top .hbtn.search .icon { width: 17px; height: 17px; } html[data-theme="light"] .top :is(.hbtn.points, .hbtn.search) { background: #fff !important; box-shadow: var(--ring) !important; } /* The stage is the screen itself, not a card inside it */ .stage { margin: 0; padding: 4px 16px 24px; border-radius: 0; background: none !important; box-shadow: none !important; } .ac-rail, .dc-rail { border-radius: 0; } /* Shop: the store always starts its own line, so swapping Amazon for eBay never re-wraps the headline */ .m-br { display: inline; } /* The shop screen centres in the space between header and tab bar, like on desktop */ .stage::before, .stage::after { display: block; } /* The link field itself sits mid-screen: the headline above it is far taller than the chips below, so the space under the chips gets that difference first (--hero-lift, measured by the phone script, never more than there's room for). Not --lift: that's the light theme's shadow token, and a length set here would void every shadow on the stage */ .app:not([data-view]) .stage::after { flex: 1 1 var(--hero-lift, 0px); } .hero { margin: 24px 0 30px; } h1 { font-size: clamp(32px, 10.4vw, 46px); line-height: 1.2; } h1 .line { white-space: nowrap; } .sub { margin-top: 16px; font-size: 16px; } /* No extension on a phone: the dock is just the link field */ .ext-tray { display: none; } .dock, html[data-theme="light"] .dock, html[data-theme="light"][data-bgfx-on] .dock { padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .dock .linkbar { background: var(--s1); } .linkbar { height: 60px; padding: 0 6px 0 18px; } .lb-go { width: 48px; height: 48px; } .quick { flex-wrap: nowrap; justify-content: safe center; width: calc(100% + 32px); margin: 18px -16px 0; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; } .quick::-webkit-scrollbar { display: none; } .qchip { flex: none; height: 40px; } /* ---------- Tab bar ---------- */ /* Sticky at the end of the app rather than fixed to the window: it then takes the page's width, which the reserved scrollbar room keeps steady, so it never shifts between screens that scroll and screens that don't */ .tabbar { position: sticky; z-index: 5; bottom: var(--tb-gap); justify-self: center; width: min(440px, calc(100% - 24px)); height: var(--tb-h); margin-bottom: var(--tb-gap); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px; border-radius: 26px; background: rgba(24, 24, 26, .8); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 36px -14px rgba(0, 0, 0, .85); transition: transform .45s var(--sheet), opacity .3s; } .tabbar > :not(.glide) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; border-radius: 20px; color: var(--text-3); font-size: 10.5px; font-weight: 550; letter-spacing: .01em; line-height: 1.2; transition: color .2s, transform .4s var(--spring); } .tabbar > :not(.glide):active { transform: scale(.88); transition-duration: .2s, .12s; } .tabbar .active { color: var(--text); } .tabbar .icon { width: 22px; height: 22px; stroke-width: 1.75; } .tabbar > .glide { border-radius: 20px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .05); } .tb-ic { position: relative; display: grid; } .tb-ic .badge { top: -6px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px; line-height: 17px; box-shadow: none; } html[data-theme="light"] .tabbar { background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .08), inset 0 1px 0 #fff, 0 16px 36px -16px rgba(20, 22, 22, .35); } html[data-theme="light"] .tabbar > .glide { background: rgba(20, 22, 22, .06); box-shadow: none; } /* It steps aside for sheets, the keyboard and checkout */ html:has(.dd.open, .tr-pop.open, .drawer.open, .overlay.open, :is(input:not([type="range"], [type="checkbox"], [type="radio"]), textarea):focus) .tabbar, .app[data-view="checkout"] .tabbar { transform: translateY(calc(100% + var(--tb-gap) + 16px)); } .app[data-view="checkout"] .tabbar { visibility: hidden; transition: transform .45s var(--sheet), visibility 0s .45s; } /* Things that float at the bottom sit above it */ .toasts { bottom: var(--tb-room); } .lb-row.me { bottom: var(--tb-room); } /* ---------- Sheets ---------- */ /* An entrance animation that holds its end state keeps a transform, and a transform would trap a sheet inside the panel it was opened from. Fill backwards only: same entrance, nothing left behind */ .rise, .dock, .checkout, .cl-card, .tr-dest, .tr-card, .tr-fl { animation-fill-mode: backwards; } /* Checkout is the screen, not a card on it */ .checkout, html[data-theme="light"] .checkout { margin-top: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Back and the price lock pin to the top while checkout scrolls: plain in the page, glass pills once stuck. The pills keep one size in both states and only their glass fades in, so pinning never re-lays out mid-scroll */ .ck-head { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 5; height: 52px; padding: 0; transition: border-color .35s var(--ease); } .ck-head.stuck { border-bottom-color: transparent; pointer-events: none; } .ck-head.stuck > * { pointer-events: auto; } .ck-head :is(.ck-back, .ck-lock) { position: relative; height: 44px; border-radius: 99px; } .ck-head .ck-back { width: 44px; margin-left: -6px; padding: 0; gap: 0; justify-content: center; font-size: 0; color: var(--text); } .ck-head .ck-back .icon { width: 18px; height: 18px; } .ck-head .ck-lock { margin-right: -6px; padding: 0 14px; } .ck-head :is(.ck-back, .ck-lock)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .3s var(--ease); background: rgba(24, 24, 26, .66); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 28px -14px rgba(0, 0, 0, .8); } .ck-head.stuck :is(.ck-back, .ck-lock)::before { opacity: 1; } html[data-theme="light"] .ck-head :is(.ck-back, .ck-lock)::before { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .08), 0 12px 28px -14px rgba(20, 22, 22, .35); } .ck-main { padding: 0; } .ck-side, html[data-theme="light"] .ck-side { margin: 8px -16px 0; padding: 20px 16px 16px; border-radius: 0; background: none; } /* Total and Pay take the tab bar's place: pinned to the bottom for the whole checkout. The panel's ancestors can't slide in with a transform or filter here, since that would pin it inside them mid-entrance. The glass is a layer behind the bar, since a backdrop-filter on the bar itself would trap the token sheet inside it, and the app drops its own layer here because the blur can't see through it */ :root { --pb-h: calc(158px + env(safe-area-inset-bottom)); } /* No fade on the bar's ancestors either: while their opacity animates, the blur can't see the page and the bar shows it sharp. The fade moves down onto what sits beside the bar */ .checkout, .ck-side.rise { animation: none; } .ck-head { animation: fade .7s var(--ease) backwards; } /* backwards: a held fade would blind the pills' blur too */ .ck-side > :not(.ck-paybar) { animation: fade .8s var(--ease) .2s both; } .app[data-view="checkout"] { z-index: auto; } .ck-paybar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: block; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .08); animation: pb-in .55s var(--sheet) .1s backwards; transition: transform .45s var(--sheet); } .ck-paybar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 11, .8); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); } html[data-theme="light"] .ck-paybar { border-top-color: rgba(20, 22, 22, .08); } html[data-theme="light"] .ck-paybar::before { background: rgba(255, 255, 255, .78); } @keyframes pb-in { from { transform: translateY(100%); } } .ck-paybar .co-total, .ck-side .ck-paybar .co-total { margin: 0; padding: 0; border: 0; } .ck-side .ck-paybar .co-total strong { font-size: 30px; } .ck-paybar .ck-pay { margin-top: 12px; height: 52px; } .ck-side > .dr-note { margin-top: 18px; } html:has(:is(input:not([type="range"], [type="checkbox"], [type="radio"]), textarea):focus) .ck-paybar { transform: translateY(100%); } .app[data-view="checkout"] .toasts { bottom: calc(var(--pb-h) + 12px); } /* The hidden tab bar still holds its room at the foot of the page; top that up to the bar's height */ .app[data-view="checkout"] { padding-bottom: calc(var(--pb-h) - var(--tb-h) - var(--tb-gap) + 8px); } .app[data-view="checkout"] .stage { padding-bottom: 8px; } /* Menus: fixed to the bottom edge, over a dimmed page that closes them when tapped */ .dd > .menu, .dd > .menu.up, .dd > .menu.left { position: fixed; z-index: 40; top: auto; right: 0; bottom: 0; left: 0; width: auto !important; min-width: 0; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; padding: 26px 10px calc(12px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, .7); opacity: 1; filter: none; transform: translateY(100%); visibility: hidden; transition: transform .36s var(--sheet), visibility 0s .36s; } .dd.open > .menu { transform: none; visibility: visible; transition: transform .5s var(--sheet), visibility 0s; } .dd > .menu.cl-fp { padding: 22px 0 0; overflow: hidden; } .cl-fp-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .dd::after, .tr-bar::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .36s; } .dd.open::after, .tr-bar:has(.tr-pop.open)::after { opacity: 1; visibility: visible; transition: opacity .35s; } html[data-theme="light"] :is(.dd, .tr-bar)::after { background: rgba(20, 22, 22, .28); } .menu .mi { min-height: 50px; padding: 12px 14px; gap: 12px; border-radius: 14px; font-size: 15px; } .menu .mi .icon { width: 18px; height: 18px; } .menu > .glide { border-radius: 14px; } .menu .mhead { padding: 4px 10px 14px; } .menu .appearance { padding: 8px 8px 8px 14px; font-size: 15px; } .menu .appearance .seg button { height: 32px; padding: 0 14px; font-size: 13px; } /* No footer under every page: its links live on the Support page, one row in the profile sheet */ .foot { display: none; } .menu .m-only { display: flex; } /* Rows that open a page end in a chevron, after any count or rank */ #wallet .menu .mi { color: var(--text); } #wallet .menu .mi > .icon:first-child { box-sizing: content-box; padding: 7px; border-radius: 10px; background: var(--s2); color: var(--text); } #wallet .menu .mi:is([href], [id="openSettings"])::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 6px 0 auto; border: solid var(--text-3); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); } #wallet .menu .mi:has(> .ac-count:not(:empty), > .mi-meta)::after { margin-left: 12px; } /* ---------- Pages off the tab bar ---------- */ /* Support and what it links to, the leaderboard: back sits top left and pins like checkout's, plain in the page and a glass pill once stuck, with the page's title fading in beside it. Pages with a section bar of their own (the account, the legal and API documents) carry back at that bar's start, and the bar pins the same way: plain tabs in the page, then back and the tabs float as two glass pills */ .pg-bar { order: -1; position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 6; align-self: stretch; display: flex; align-items: center; justify-content: center; height: 52px; margin-bottom: -20px; pointer-events: none; } .pg-bar[hidden] { display: none; } :is(.pg-bar, .ac-rail, .dc-rail) > * { pointer-events: auto; } .pg-back { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 99px; color: var(--text); transition: transform .35s var(--spring); } .pg-back:active { transform: scale(.9); transition-duration: .12s; } .pg-back .icon { width: 18px; height: 18px; transform: rotate(180deg); } .pg-bar .pg-back { position: absolute; top: 4px; left: -6px; } .pg-t { position: relative; display: flex; align-items: center; max-width: calc(100% - 112px); height: 40px; padding: 0 18px; border-radius: 99px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: transparent; white-space: nowrap; transition: color .3s var(--ease); } .pg-t span { overflow: hidden; text-overflow: ellipsis; } .pg-bar.stuck .pg-t { color: var(--text); } /* The section bar: no strip, no hairline. The tabs scroll beside back; the glass behind them is the bar's own layer, since the tab row itself scrolls */ :is(.ac-rail, .dc-rail), html[data-bgfx-on] :is(.ac-rail, .dc-rail) { top: max(8px, env(safe-area-inset-top)); z-index: 6; align-items: center; gap: 8px; height: 52px; margin: 0 -6px 16px; padding: 0 0 0 0; border: 0; border-radius: 0; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; } .dc-rail, html[data-bgfx-on] .dc-rail { margin-bottom: 4px; } /* A held entrance keeps its filter, and a filter on an ancestor blinds the pills' blur: fill backwards only */ .acct, .lg { animation-fill-mode: backwards; } /* As in checkout, the app drops its own layer on these pages so the pills' blur can see the page */ .app:is([data-view="account"], [data-view="board"], [data-view="info"], [data-view="ext"], [data-view="api"], [data-view="mcp"]) { z-index: auto; } :is(.ac-nav, .dc-nav) { flex: 1; min-width: 0; align-items: center; height: 44px; padding: 0 4px; border-radius: 99px; scroll-padding-inline: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 28px)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 28px)), transparent); } /* tabs past either edge fade out */ :is(.ac-nav, .dc-nav).off-l { --fade-l: 28px; } :is(.ac-nav, .dc-nav).at-end { --fade-r: 0px; } .lg .dc-nav { margin: 0; } .ac-nav button, .dc-nav a, .lg .dc-nav a { height: 36px; min-height: 36px; padding: 0 14px; border-radius: 99px; font-size: 14px; } .ac-nav button .icon { display: none; } .ac-nav button .ac-count { margin-left: 6px; } :is(.ac-nav, .dc-nav) > .glide, html[data-theme="light"] :is(.ac-nav, .dc-nav) > .glide { border-radius: 99px; background: rgba(255, 255, 255, .09); box-shadow: none; } html[data-theme="light"] :is(.ac-nav, .dc-nav) > .glide { background: rgba(20, 22, 22, .07); } /* Only the glass layers fade: the bar never re-lays out mid-scroll, and the blur is never under a fading parent */ :is(.pg-back, .pg-t, .ac-rail, .dc-rail)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: opacity .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); background: rgba(24, 24, 26, .66); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 28px -14px rgba(0, 0, 0, .8); } :is(.ac-rail, .dc-rail)::before { inset: 4px 0 4px 52px; border-radius: 99px; } /* behind the tabs, beside back */ :is(.pg-t, .ac-rail, .dc-rail)::before { opacity: 0; } :is(.pg-bar, .ac-rail, .dc-rail).stuck::before, .pg-bar.stuck .pg-t::before { opacity: 1; } :is(.pg-bar, .ac-rail, .dc-rail):not(.stuck) .pg-back::before { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); } html[data-theme="light"] :is(.pg-back, .pg-t, .ac-rail, .dc-rail)::before { background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .08), 0 12px 28px -14px rgba(20, 22, 22, .35); } html[data-theme="light"] :is(.pg-bar, .ac-rail, .dc-rail):not(.stuck) .pg-back::before { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 22, 22, .1); } .ac-d-top > .ck-back { display: none; } /* an order's own "Orders" link: the bar's back does that here */ .ac-d-top { justify-content: flex-end; } /* A page slides in from the right and, going back, from the left. Fill backwards only, so no transform stays behind */ .stage[data-pg] > :not(.pg-bar) { animation: pg-fwd .42s var(--sheet) backwards; } .stage[data-pg="back"] > :not(.pg-bar) { animation-name: pg-back; } .stage[data-pg="done"] > :not(.pg-bar) { animation: none; } @keyframes pg-fwd { from { opacity: 0; transform: translateX(32px); } } @keyframes pg-back { from { opacity: 0; transform: translateX(-32px); } } /* ---------- Segmented controls and sliders ---------- */ /* The pill dips while pressed and follows a finger dragged across the options (the touch script) */ .seg { touch-action: pan-y; } :is(.ac-filter, .code-h .seg) { touch-action: auto; } .seg > .glide { transition: transform .34s var(--spring), width .34s var(--spring), height .34s var(--spring), opacity .18s, scale .25s var(--spring); } .seg.press > .glide { scale: .94; } .seg button { -webkit-user-select: none; user-select: none; } /* Sliders: a tall, easy to hit input around a thin track that fills up to the thumb */ :is(.fx-grid input[type="range"], .bright input) { height: 32px; margin: 0; background: none; box-shadow: none; cursor: pointer; } .fx-grid input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--text) calc(13px + (100% - 26px) * var(--p, 0)), var(--s3) 0); } .fx-grid input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--s3); } .fx-grid input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--text); } .bright input::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #000, var(--pure, #fff)); box-shadow: inset 0 0 0 1px var(--line-2); } .bright input::-moz-range-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #000, var(--pure, #fff)); } :is(.fx-grid input[type="range"], .bright input)::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .3); transition: transform .25s var(--spring); } .bright input::-webkit-slider-thumb { margin-top: -8px; } :is(.fx-grid input[type="range"], .bright input)::-moz-range-thumb { width: 26px; height: 26px; } :is(.fx-grid input[type="range"], .bright input):active::-webkit-slider-thumb { transform: scale(1.15); } html[data-theme="light"] .fx-grid input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 .5px rgba(20, 22, 22, .18), 0 3px 8px rgba(20, 22, 22, .2); } /* ---------- Settings sheet ---------- */ /* Its title stays put while the sheet scrolls; opened from the profile sheet, a back arrow leads there again */ #settings .sheet-head { position: sticky; z-index: 3; top: -26px; gap: 6px; margin: -26px -20px 4px; padding: 22px 12px 10px 14px; background: var(--s1); } #settings .sheet-head h2 { flex: 1; } #settings.from-me #setBack { display: grid; } #settings:not(.from-me) .sheet-head { padding-left: 20px; } .set-back .icon { transform: rotate(180deg); } /* Each setting's options run the sheet's width under its label, every option the same size */ #settings .set-row { flex-direction: column; align-items: stretch; gap: 12px; } #settings .seg { width: 100%; } #settings .seg button { flex: 1; height: 34px; font-size: 13px; } .presets { gap: 10px; } /* Travel's where / when / who popover */ .tr-pop { position: fixed; z-index: 41; top: auto; right: 0; bottom: 0; left: 0 !important; width: auto !important; max-width: none; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 26px 10px calc(10px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, .7); opacity: 1; filter: none; transform: translateY(100%); visibility: hidden; transition: transform .36s var(--sheet), visibility 0s .36s; } .tr-pop.open { transform: none; visibility: visible; transition: transform .5s var(--sheet), visibility 0s; } .tr-pop.hop { animation: none; } /* Typing a place: the panel takes the whole visible screen, down to the keyboard's top edge, with its field up top and the matches right under it (--vvt / --vvh follow the visual viewport, see the travel script) */ .tr-pop.full { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); max-height: none; display: flex; flex-direction: column; padding: calc(8px + env(safe-area-inset-top)) 10px 0; overflow: hidden; border-width: 0; border-radius: 0; box-shadow: 0 0 0 100vmax var(--s1); /* fills the strip behind iOS's see-through keyboard, so the page doesn't show there */ } html[data-theme="light"] .tr-pop.full { box-shadow: 0 0 0 100vmax #fff; } .tr-pop.full::before { display: none; } .fld .sel.fancy select { display: block; } .fld .sel-btn, .fld .sel .menu { display: none; } /* the list dissolves into the keyboard instead of cutting a row in half */ .tr-pop.full .tr-list { padding-bottom: 32px; -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); } .tr-pop.swap > .tr-q { animation: none; } .tr-q { flex: none; display: flex; align-items: center; gap: 4px; padding-bottom: 6px; } .tr-q > .icon-btn { width: 44px; height: 44px; flex: none; color: var(--text); } .tr-q label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 16px; border-radius: 99px; background: var(--s2); } .tr-ql { flex: none; font-size: 13px; font-weight: 600; color: var(--text-3); } .tr-q input { flex: 1; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 16px; color: var(--text); background: none; border: 0; outline: 0; } .tr-q input::placeholder { color: var(--text-3); } .tr-clear { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--text-3); } .tr-clear .icon { width: 15px; height: 15px; } .tr-q input:placeholder-shown + .tr-clear { visibility: hidden; } .tr-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(12px + env(safe-area-inset-bottom)); } html[data-theme="light"] .tr-q label { background: rgba(20, 22, 22, .06); } /* Cart */ .scrim { transition: opacity .35s; } .drawer { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: calc(100dvh - 44px); padding-bottom: env(safe-area-inset-bottom); border-width: 1px 0 0; border-radius: 28px 28px 0 0; transform: translateY(100%); transition: transform .36s var(--sheet), visibility 0s .36s; } .drawer.open { transform: none; transition: transform .5s var(--sheet), visibility 0s; } .dr-head { padding: 26px 12px 8px 20px; } /* The sheet closes by its grabber, a swipe down or the scrim, so the X goes */ #drClose { display: none; } .dr-items { flex: 0 1 auto; min-height: 0; padding: 0 10px; overscroll-behavior: contain; } .dr-empty { padding: 36px 24px 44px; } .dr-sum { padding: 14px 20px 16px; } /* Search, settings, a card's or a stay's detail: the panel rises while the page behind dims */ .overlay { display: flex; align-items: flex-end; padding: 0 !important; visibility: hidden; transition: background-color .3s, backdrop-filter .3s, visibility 0s .36s; } .overlay:not(.open) { background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .overlay.open { visibility: visible; animation: none; transition: background-color .3s, backdrop-filter .3s, visibility 0s; } .overlay > :is(.palette, .cl-dlg) { position: relative; width: 100%; max-width: none; border-width: 1px 0 0; border-radius: 28px 28px 0 0; transform: translateY(100%); transition: transform .36s var(--sheet); animation: none !important; } .overlay.open > :is(.palette, .cl-dlg) { transform: none; transition-duration: .5s; } #overlay .palette { padding: 14px 0 env(safe-area-inset-bottom); } #overlay .palette-in kbd { display: none; } .palette-list { max-height: 58dvh; overscroll-behavior: contain; } #settings .sheet { max-height: 90dvh; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); } .presets { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cl-dlg { height: 92dvh; } /* One grabber for every sheet */ :is(.dd > .menu, .tr-pop, .drawer, .overlay > .palette, .cl-dlg)::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 99px; background: var(--text-3); opacity: .45; pointer-events: none; } .cl-dlg::before { background: #fff; opacity: .55; } /* While a sheet is open the page behind it stays put */ html:has(.dd.open, .tr-pop.open, .drawer.open, .overlay.open) body { overflow: hidden; } } /* ================= First-visit tour: wallet to doorstep in seven steps, each with a small looping demo ================= */ @media (min-width: 761px) { #tour { align-items: center; padding: 16px; } } .ob { position: relative; max-width: 560px; padding: 8px; } .ob-scene { position: relative; display: grid; height: 292px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; touch-action: pan-y; } html[data-theme="light"] .ob-scene { background: var(--s2); box-shadow: none; } .ob-skip { position: absolute; z-index: 4; top: 12px; right: 12px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: var(--text-2); background: var(--s2); transition: color .15s, background-color .15s, opacity .25s; } .ob-skip:hover { color: var(--text); background: var(--s3); } html[data-theme="light"] .ob-skip { background: #fff; box-shadow: var(--ring); } .ob-skip.gone { opacity: 0; pointer-events: none; } /* Scenes and their copy: all stacked in one cell, so the panel is as tall as the tallest and never jumps */ .ob-sc, .ob-t { grid-area: 1 / 1; opacity: 0; visibility: hidden; filter: blur(6px); transition: opacity .3s, filter .3s, transform .5s var(--ease), visibility 0s .3s; } .ob-sc.on, .ob-t.on { opacity: 1; visibility: visible; filter: none; transform: none; transition: opacity .4s .06s, filter .4s .06s, transform .6s .06s var(--ease), visibility 0s; } .ob-sc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; padding: 20px; } .ob-copy { display: grid; padding: 22px 14px 4px; } .ob-t h2 { margin: 12px 0 0; font-size: 23px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; } .ob-t p { margin: 8px 0 0; max-width: 470px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; } .ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 14px 10px; } .ob-dots { display: flex; align-items: center; gap: 6px; } .ob-dots button { position: relative; width: 6px; height: 6px; border-radius: 99px; background: var(--line-2); transition: width .5s var(--spring), background-color .3s; } .ob-dots button::after { content: ""; position: absolute; inset: -9px -4px; } .ob-dots button.done { background: var(--text-3); } .ob-dots button.on { width: 24px; background: var(--text); } .ob-nav { display: flex; gap: 8px; } .ob-nav .btn-ghost { transition: opacity .25s, background-color .15s; } .ob-nav .btn-ghost.gone { opacity: 0; pointer-events: none; } #obNext .icon { transition: transform .3s var(--spring); } #obNext:hover .icon { transform: translateX(2px); } /* The pretend pointer that walks through each demo */ .ob-cur { position: absolute; z-index: 3; top: 0; left: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; transition: transform .8s var(--ease), opacity .3s; } .ob-cur.on { opacity: 1; } .ob-cur.jump { transition: none; } .ob-cur svg { width: 100%; height: 100%; fill: var(--text); stroke: var(--bg); stroke-width: 1.4; stroke-linejoin: round; transition: scale .16s var(--ease); transform-origin: 20% 20%; } html[data-theme="light"] .ob-cur svg { stroke: #fff; } .ob-cur.tap svg { scale: .78; } .ob-cur::before { content: ""; position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--text); opacity: 0; scale: .3; } .ob-cur.tap::before { animation: obring .5s var(--ease); } @keyframes obring { 0% { opacity: .7; scale: .3; } 100% { opacity: 0; scale: 1.4; } } .ob .press { scale: .96; } .ob-sc :is(.ob-conn, .ob-wr, .ob-tl button, .ob-paste, .ob-paybtn, .ob-ok) { transition: scale .2s var(--spring), background-color .2s, color .2s, box-shadow .2s; } /* A panel inside a scene, styled like the app's own */ .ob-card { background: var(--s1); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); } html[data-theme="light"] .ob-card { background: #fff; box-shadow: var(--ring), var(--lift); } .ob-pop { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(4px); transition: opacity .3s, transform .5s var(--spring), filter .3s; } .ob-pop.in { opacity: 1; transform: none; filter: none; } /* 1 · Welcome: stores and tokens circling SP3ND */ .ob-orbit { position: relative; width: 236px; height: 236px; display: grid; place-items: center; } .ob-ring { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); } .ob-ring.r1 { inset: 46px; } .ob-ring.r2 { inset: 0; } .ob-spin { position: absolute; inset: 0; animation: obspin 60s linear infinite; } .ob-spin.rev { animation-direction: reverse; animation-duration: 44s; } .ob-o { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))); } .ob-o > span { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; rotate: calc(-1 * var(--a)); animation: obspinr 60s linear infinite, obin .6s var(--spring) both; animation-delay: 0s, calc(var(--k) * 70ms + .2s); } .ob-spin.rev .ob-o > span { animation-name: obspinf, obin; animation-duration: 44s, .6s; } .ob-o svg { width: 58%; height: 58%; } .ob-o .m-ebay { box-shadow: inset 0 0 0 1px var(--line); } .ob-o .ob-gen { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); } .ob-o .ob-gen svg { fill: currentColor; } @keyframes obspin { to { rotate: 360deg; } } @keyframes obspinr { to { transform: rotate(-360deg); } } @keyframes obspinf { to { transform: rotate(360deg); } } @keyframes obin { from { opacity: 0; scale: .3; } } .ob-core { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); animation: obin .7s var(--spring) both; } html[data-theme="light"] .ob-core { background: #fff; box-shadow: var(--ring), var(--lift); } .ob-core img { width: 38px; } html[data-theme="light"] .ob-sc img.ob-logo { filter: brightness(0); opacity: .9; } /* 2 · Connect: the button, the wallet picker, then the balance */ .ob-w { width: min(372px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .ob-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 10px 0 16px; } .ob-top .ob-logo { height: 15px; } .ob-conn { display: grid; place-items: center; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--cta); color: var(--cta-ink); font-size: 13px; font-weight: 600; pointer-events: none; } .ob-conn .icon { width: 15px; height: 15px; } .ob-conn .spinner { width: 15px; height: 15px; } .ob-conn[data-state="done"] { background: var(--s2); color: var(--text); padding: 0 12px 0 4px; font-family: var(--mono); font-weight: 500; font-size: 12px; } .ob-conn .avatar { width: 28px; height: 28px; } .ob-conn .avatar .icon { width: 14px; height: 14px; } .ob-slot { display: grid; } .ob-slot > * { grid-area: 1 / 1; } .ob-pick { padding: 6px; } .ob-pick small.h { display: block; padding: 8px 10px 6px; font-size: 12px; color: var(--text-3); } .ob-wr { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px 0 8px; border-radius: 12px; font-size: 14px; } .ob-wr.hot { background: var(--s2); } .ob-wr > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--c); color: #fff; font: 700 13px/1 var(--font); font-style: normal; } .ob-wr b { flex: 1; font-weight: 550; } .ob-wr small { font-size: 12px; color: var(--text-3); } .ob-wr .states { width: 18px; color: var(--text-3); } .ob-wr .icon, .ob-wr .spinner { width: 16px; height: 16px; } .ob-wr [data-s="done"] { color: var(--text); } .ob-bal { display: flex; align-items: center; gap: 12px; align-self: start; padding: 14px 16px; } .ob-bal .tk { width: 36px; height: 36px; } .ob-bal > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; } .ob-bal small { font-size: 12px; color: var(--text-3); } .ob-bal b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .ob-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--s2); font-size: 12px; font-weight: 500; color: var(--text-2); } .ob-tag .icon { width: 13px; height: 13px; stroke-width: 2.2; } /* 3 · Paste: the link field, then the product lands in the cart */ .ob-l { width: min(400px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .ob-lb { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 6px 0 10px; border-radius: 99px; } .ob-lead { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--s2); color: var(--text-3); } .ob-lead .mk { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; } .ob-lead .mk svg { width: 70%; height: 70%; } .ob-url { position: relative; flex: 1; min-width: 0; height: 20px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-url > span { position: absolute; inset: 0; transition: opacity .25s; overflow: hidden; text-overflow: ellipsis; } .ob-url .ph { color: var(--text-3); } .ob-url .val { opacity: 0; color: var(--text); } .ob-lb.has .ob-url .ph { opacity: 0; } .ob-lb.has .ob-url .val { opacity: 1; } .ob-lb.busy .ob-url .val { opacity: 0; } .ob-url .busy { opacity: 0; } .ob-lb.busy .ob-url .busy { opacity: 1; } .ob-paste { display: grid; place-items: center; flex: none; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--s2); font-size: 13px; font-weight: 500; color: var(--text-2); transition: opacity .2s; } .ob-lb.has .ob-paste { opacity: 0; } .ob-go { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--cta); color: var(--cta-ink); } .ob-go .icon { width: 18px; height: 18px; stroke-width: 2; } .ob-prod { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; } .ob-img { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--paper); overflow: hidden; } .ob-img img { width: 86%; height: 86%; object-fit: contain; } .ob-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ob-pt b { font-size: 14px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-pt small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .ob-pt small .mk { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; } .ob-pt small .mk svg { width: 70%; height: 70%; } .ob-prod > b { font-size: 15px; font-weight: 600; } .ob-added { justify-self: center; } .ob-added .n { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--cta); color: var(--cta-ink); font-size: 11px; font-weight: 700; } /* 4 · Ship: the address form fills in, then folds into a saved address */ .ob-ads { width: min(380px, 100%); } .ob-ads > * { align-self: center; } .ob-ad { padding: 14px; display: grid; gap: 8px; } .ob-ad-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; font-size: 13.5px; font-weight: 600; } .ob-ad-h .ob-tag { gap: 5px; } .ob-ad-h .ob-tag .icon { width: 12px; height: 12px; color: var(--text-3); } .ob-fs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; } .ob-f { grid-column: 1 / -1; display: flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; transition: box-shadow .2s; } .ob-f.half { grid-column: auto; } .ob-f.has { color: var(--text); } .ob-f.focus { box-shadow: inset 0 0 0 2px var(--focus); } .ob-f.focus::after { content: ""; flex: none; width: 1.5px; height: 16px; margin-left: 1px; background: var(--text); animation: obcaret 1s steps(1) infinite; } @keyframes obcaret { 50% { opacity: 0; } } .ob-save { width: 100%; height: 38px; margin-top: 2px; font-size: 13.5px; pointer-events: none; } .ob-save .spinner, .ob-save .icon { width: 15px; height: 15px; } .ob-save .icon { stroke-width: 2.2; } .ob-save .states > * { gap: 7px; } .ob-saved { padding: 14px; display: grid; gap: 12px; } .ob-saved-r { display: flex; align-items: center; gap: 12px; } .ob-saved-r > i:first-child { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--s2); color: var(--text); } .ob-saved-r > i:first-child .icon { width: 18px; height: 18px; } .ob-saved-r > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ob-saved-r b { font-size: 14px; font-weight: 600; } .ob-saved-r small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-saved-r .rd { margin-left: 0; box-shadow: inset 0 0 0 5px var(--text); } .ob-saved-t { display: flex; flex-wrap: wrap; gap: 6px; } /* 5 · Choose: token, address, the whole bill up front */ .ob-co { width: min(380px, 100%); padding: 16px; display: grid; gap: 14px; } .ob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ob-row > small { font-size: 12.5px; color: var(--text-3); } .ob-tl { position: relative; display: flex; padding: 3px; border-radius: 99px; background: var(--s2); } .ob-tl > .glide { border-radius: 99px; background: var(--s3); } html[data-theme="light"] .ob-tl > .glide { background: #fff; box-shadow: var(--ring), 0 2px 6px -2px rgba(20, 22, 22, .12); } .ob-tl button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--text-3); pointer-events: none; transition: color .25s, scale .2s var(--spring); } .ob-tl button.sel { color: var(--text); } .ob-tl .tk { width: 22px; height: 22px; } .ob-addr { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; } .ob-addr .icon { width: 15px; height: 15px; color: var(--text-2); } .ob-addr small { color: var(--text-3); } .ob-sum { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; } .ob-sum > div { display: flex; justify-content: space-between; color: var(--text-2); } .ob-sum .tot { margin-top: 4px; align-items: baseline; color: var(--text); font-weight: 600; } .ob-sum .tot b { font-size: 22px; letter-spacing: -0.02em; } .ob-sum .tot b i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 5px; } /* 6 · Sign: one approval in the wallet */ .ob-s { position: relative; width: min(380px, 100%); display: grid; gap: 14px; } .ob-ord { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; transition: opacity .35s, scale .5s var(--spring), filter .35s; } .ob-s.sig .ob-ord { opacity: .35; scale: .95; filter: blur(2px); } .ob-ord .ob-pt small .icon { width: 12px; height: 12px; } .ob-ord-t { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .ob-ord-t small { font-size: 12px; color: var(--text-3); } .ob-ord-t b { font-size: 14px; font-weight: 600; white-space: nowrap; } .ob-wal { position: absolute; z-index: 2; left: 50%; top: -16px; width: 290px; margin-left: -145px; padding: 14px; } .ob-paybtn [data-s="idle"] { gap: .3em; } .ob-wal-h { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 550; } .ob-wal-h > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #ab9ff2; color: #fff; font: 700 11px/1 var(--font); font-style: normal; } .ob-wal-h small { margin-left: auto; font: 500 11.5px/1 var(--mono); color: var(--text-3); } .ob-wal-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .ob-wal-r > span:first-child { display: flex; flex-direction: column; gap: 2px; } .ob-wal-r small { font-size: 11.5px; color: var(--text-3); } .ob-wal-r b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; } .ob-ok { height: 36px; padding: 0 16px; display: grid; place-items: center; border-radius: 10px; background: var(--cta); color: var(--cta-ink); font-size: 13px; font-weight: 600; } .ob-paybtn { position: relative; width: 100%; height: 52px; overflow: hidden; isolation: isolate; font-size: 15px; pointer-events: none; } .ob-paybtn .bar { position: absolute; inset: 0; z-index: -1; background: var(--cta-ink); opacity: .1; transform-origin: left; transform: scaleX(0); } .ob-paybtn .spinner { width: 16px; height: 16px; } .ob-paybtn .icon { width: 17px; height: 17px; stroke-width: 2.2; } /* 7 · Track: four steps, then the points land */ .ob-tr { width: min(400px, 100%); padding: 14px 16px 18px; } .ob-tr-h { display: flex; align-items: center; gap: 12px; } .ob-tr-h .ob-img { width: 44px; height: 44px; border-radius: 10px; } .ob-tr-h .states { font-size: 12px; font-weight: 600; } .ob-tr-h .states > * { height: 26px; padding: 0 10px; border-radius: 99px; background: var(--s2); } .ob-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0 0; padding: 0; list-style: none; } .ob-steps::before, .ob-steps::after { content: ""; position: absolute; top: 6px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; background: var(--line-2); } .ob-steps::after { background: var(--text); transform-origin: left; transform: scaleX(calc(var(--p, 0) / 3)); transition: transform .8s var(--ease); } .ob-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 12px; color: var(--text-3); transition: color .3s; } .ob-steps li i { width: 14px; height: 14px; border-radius: 50%; background: var(--s1); box-shadow: inset 0 0 0 2px var(--line-2); transition: background-color .3s .3s, box-shadow .3s .3s, scale .4s .3s var(--spring); } html[data-theme="light"] .ob-steps li:not(.on) i { background: #fff; } .ob-steps li.on { color: var(--text); } .ob-steps li.on i { background: var(--text); box-shadow: none; scale: 1.15; } .ob-earn { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .ob-earn .ob-tag b { color: var(--text); font-weight: 600; } @media (max-width: 760px) { .ob { padding: 22px 8px calc(6px + env(safe-area-inset-bottom)); } .ob-scene { height: 268px; } .ob-sc { padding: 14px; } .ob-lb { gap: 8px; } .ob-paste { padding: 0 10px; } .ob-skip { top: 10px; right: 10px; } .ob-copy { padding: 18px 10px 2px; } .ob-t h2 { font-size: 21px; } .ob-t p { font-size: 14px; } .ob-foot { padding: 16px 10px 8px; } .ob-orbit { scale: .86; } .ob-co { padding: 12px 14px; gap: 10px; } .ob-sum { gap: 5px; padding-top: 10px; font-size: 13px; } .ob-sum .tot { margin-top: 2px; } .ob-sum .tot b { font-size: 19px; } .ob-tl button { height: 28px; } .ob-ad { padding: 12px; gap: 7px; } .ob-f, .ob-save { height: 36px; } } @media (prefers-reduced-motion: reduce) { .ob-cur { display: none; } }