:root { /* blue, white, black — the dark surfaces are black, not navy */ --ink:#0b0b0e; --ink-soft:#2b2b33; --slate:#5c5f6b; --slate-light:#8a8d99; --blue:#1f52ff; --blue-deep:#0b39d6; --blue-wash:#eef2ff; --blue-tint:#f5f7fc; --white:#ffffff; --line:#e6e7ec; --line-soft:#f0f1f5; --amber:#f5a524; --green:#10b981; --green-wash:#e7f8f1; --black:#000000; --mono:"SF Mono","JetBrains Mono",ui-monospace,"Cascadia Code",Menlo,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif; --shadow:0 1px 2px rgba(10,17,48,.04), 0 8px 24px rgba(10,17,48,.06); --shadow-lg:0 12px 40px rgba(10,17,48,.12); } *{box-sizing:border-box} /* The whole app shows and hides things with the `hidden` attribute (auth state, tab panels, loading skeletons, empty states). Any author rule that sets `display` on those elements would otherwise beat the browser's own [hidden]{display:none}, leaving them stuck on screen. */ [hidden]{display:none !important} /* The canvas behind the page. Once html carries a background, body's no longer propagates to it, so overscrolling past the footer (or above the header) shows this instead of white. Both ends of the storefront are black, so the bounce matches rather than flashing a white strip under the footer. */ html{background:var(--black)} html.html-dash{background:var(--blue-tint)} body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5} /* The storefront shell. The page colour sits on .site-main rather than on , so the white ends exactly where the footer starts. With it on the white kept painting behind and below the footer, which is what showed through in the safe area at the bottom of a phone: the footer looked like a black block laid on top of a white page rather than the end of it. The column layout also pins the footer to the bottom on short pages. */ body.site{background:var(--black);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} .site-main{background:var(--white);flex:1 0 auto;min-width:0} body.site>footer{flex-shrink:0} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance} /* viewport-fit=cover lets content reach the physical screen edges, so in landscape on a notched phone the side insets are respected here rather than letting text slide under the rounded corner. */ .wrap{max-width:1240px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left)) 0 max(24px,env(safe-area-inset-right))} /* Chrome that spans a full-width dark bar (header, footer) uses a wider track, so a big monitor does not leave a wall of empty black either side of the menu. Page content keeps the 1240px measure, which stays comfortable to read. */ .wrap-wide{max-width:1760px} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* The height of the sticky header, measured, not guessed: 125px while the category row shows and 64px once it is hidden. Anything that sticks below the header or scrolls to an anchor must offset by this, or it ends up underneath the header instead of below it. */ :root{--nav-h:125px} @media(max-width:1100px){:root{--nav-h:64px}} /* Sticky column below the header, and the matching offset for #anchor jumps. */ .stick-below{position:sticky;top:calc(var(--nav-h) + 16px)} .anchor-below{scroll-margin-top:calc(var(--nav-h) + 24px)} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600} /* ── Announcement ── */ .announce{background:var(--black);color:#c9c9d0;font-size:12.5px;text-align:center;padding:9px 16px} .announce b{color:#fff} .announce a{color:#7f9dff;font-weight:600} /* ── Header (dark) ── */ .nav{position:sticky;top:0;z-index:50;background:var(--black);color:#fff} .nav-in{display:flex;align-items:center;gap:16px;height:70px} /* Giving the logo and the actions an equal flex basis makes the search sit in the true centre of the bar. Auto margins alone only centre it in whatever space is left over, which is off-centre because the two sides differ in width. */ /* min-width:max-content is what keeps the logo readable: with a plain min-width:0 the equal-basis track collapsed the mark to nothing once the search bar wanted more room than the bar had. The two sides stay equal, and so the search stays centred, right up until the logo hits its natural width. */ /* Only where the inline search bar actually exists. Below that the bar becomes a three-part grid instead, and these equal-basis tracks would fight it. */ @media(min-width:1101px){ .nav-in>.logo{flex:1 1 0;min-width:max-content} .nav-in>.nav-actions{flex:1 1 0;justify-content:flex-end;min-width:max-content} } .nav-left{display:none;align-items:center;gap:8px} .logo{font-size:22px;font-weight:800;letter-spacing:-.03em;white-space:nowrap} .logo .a{color:#fff} .logo .b{color:#4f7cff} .search{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid transparent;border-radius:30px;padding:0 6px 0 16px;height:48px;min-width:0} .search:focus-within{box-shadow:0 0 0 3px rgba(31,82,255,.35)} .search svg{color:var(--slate-light);flex-shrink:0} .search input{border:0;outline:0;flex:1;font-size:14.5px;font-family:var(--sans);min-width:0;background:transparent;color:var(--ink)} .search-go{width:40px;height:40px;flex-shrink:0;border:0;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .search-go:hover{background:var(--blue-deep)} .nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto} .icon-btn{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;flex-shrink:0} .icon-btn:hover{background:rgba(255,255,255,.13)} .cart-badge{position:absolute;top:-4px;right:-4px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--black)} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border-radius:11px;padding:11px 18px;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:transform .08s ease} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue-deep)} /* There was no disabled style on .btn at all, only on the auth and licence variants. A saving button therefore looked exactly like a ready one: still fully blue, still inviting a second click on a request already in flight. */ .btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none} .btn:disabled:hover,.btn[disabled]:hover{background:var(--blue)} .btn-ghost:disabled:hover,.btn-ghost[disabled]:hover{background:transparent} .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:#c9d2ea} /* The confirm dialog asks for this on destructive actions and it was never defined, so "Revoke key" and "Delete" rendered as an unstyled button that looked no more serious than Cancel. */ .btn-danger{background:#c8352f;color:#fff;border-color:#c8352f} .btn-danger:hover{background:#a92a25;border-color:#a92a25} .btn-danger:disabled:hover,.btn-danger[disabled]:hover{background:#c8352f} .btn-ink{background:var(--black);color:#fff} .btn-ink:hover{background:#1a1a1a} .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff} .btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.4)} .sign-in{font-weight:600;font-size:14px;color:#c9c9d0;padding:11px 6px;white-space:nowrap} .sign-in:hover{color:#fff} .nav-cats-row{background:var(--black);border-top:1px solid rgba(255,255,255,.08)} .nav-cats-in{display:flex;align-items:center;height:46px;gap:6px} /* The category row sits as one centred group. Centring is done with auto margins rather than justify-content: on a scrollable flex row, centred content that overflows gets clipped at the start with no way to scroll back to it, whereas auto margins simply collapse and the row scrolls normally. */ /* overflow is visible, not auto. Setting overflow on one axis makes the other compute to auto as well, which turns this row into a clipping box: the subcategory flyouts below open downward out of it and were cut off at the row's edge. It wraps instead of scrolling if it ever runs out of room, which loses nothing since below 1100px this row is replaced by the phone menu. */ .cat-links{display:flex;align-items:center;gap:1px;flex-wrap:nowrap;overflow:visible;flex:1;min-width:0} .cat-links>:first-child{margin-left:auto} .cat-links>:last-child{margin-right:auto} /* The authoritative .cat-links a rules live further down, beside .cat-pill. A second set here was silently losing to them, which is why changing the size in this block had no effect on screen at all. */ .cat-links a.cat-free{color:#3ddc97} /* ── Category flyouts ──────────────────────────────────────── Opens on hover and on keyboard focus. The flyout is a sibling of the link inside .cat-item, so moving the pointer down into it keeps the whole item hovered and it stays open. */ .cat-item{position:relative} /* Sized to its own content rather than a fixed 300px, so with every label on one line the panel is exactly as wide as it needs to be. */ .cat-flyout{position:absolute;top:100%;left:0;z-index:150;width:max-content;max-width:min(540px,90vw); background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg); padding:9px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .14s,transform .14s,visibility .14s} .cat-item:hover .cat-flyout,.cat-item:focus-within .cat-flyout{opacity:1;visibility:visible;transform:none} /* The link row is dark; the panel is not, so the colours are restated rather than inherited from .cat-links a. */ /* Black rather than the soft ink used elsewhere: this panel is small text on white and needs the contrast to read as a list of real destinations. */ .cat-flyout a{display:block;font-size:12.5px;font-weight:500;color:var(--black); padding:6px 9px;border-radius:7px;white-space:nowrap} .cat-flyout a:hover{background:var(--blue-tint);color:var(--blue)} .cat-flyout-all{font-weight:700 !important;color:var(--blue) !important; border-bottom:1px solid var(--line-soft);border-radius:7px 7px 0 0;margin-bottom:5px;padding-bottom:8px !important} /* One column, one item per line. Two columns split the list left and right, so reading it meant jumping across the panel instead of straight down. */ .cat-flyout-grid{display:flex;flex-direction:column;gap:0} /* The last few categories sit near the right edge, so their panels open leftward instead of off the screen. */ .cat-item:nth-last-child(-n+3) .cat-flyout{left:auto;right:0} /* ── Phone: expandable category rows ─────────────────────── */ .m-cat{border-radius:11px} .m-cat > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px; padding:10px 12px;border-radius:9px;font-weight:500;font-size:14px;color:var(--ink)} .m-cat > summary::-webkit-details-marker{display:none} .m-cat > summary::after{content:"";margin-left:auto;flex-shrink:0;width:7px;height:7px; border-right:2px solid var(--slate-light);border-bottom:2px solid var(--slate-light); transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease} .m-cat[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)} .m-cat > summary:active{background:var(--blue-tint);color:var(--blue)} .m-sub{display:flex;flex-direction:column;gap:0;padding:0 0 6px 43px} .m-sub a{font-size:13px;font-weight:400;padding:7px 12px;color:var(--slate)} @media(prefers-reduced-motion:reduce){.m-cat > summary::after{transition:none}} .hamburger{display:flex;align-items:center;gap:9px;background:transparent;border:0;color:#fff;font-weight:600;font-size:14px;padding:8px 2px;cursor:pointer} .nav-hide-sm{display:flex} .nav-show-sm{display:none} .nav-hide-cats{display:flex} .nav-show-cats{display:none} /* Tablets and phones share one header: menu and search on the left, the logo centred, cart and account on the right. Three grid tracks with the outer two equal is what actually centres the logo, since the two side groups differ in width and auto margins would only centre it in the leftover space. */ @media(max-width:1100px){ .nav-hide-cats{display:none !important} .nav-show-cats{display:flex !important} .cat-links{display:none} .nav-in{display:grid;grid-template-columns:1fr auto 1fr;gap:10px} .nav-left{justify-self:start} .nav-in>.logo{justify-self:center;min-width:0;overflow:hidden;text-overflow:ellipsis} .nav-in>.nav-actions{justify-self:end;margin-left:0} } @media(max-width:720px){ .nav-hide-sm{display:none !important} .nav-show-sm{display:flex !important} .nav-in{height:62px;gap:8px} .logo{font-size:19px} .nav-left,.nav-actions{gap:6px} .icon-btn{width:42px;height:42px} } /* Narrow phones: the wordmark alone would push the side groups off the edge. */ @media(max-width:400px){ .icon-btn{width:38px;height:38px} .logo{font-size:17px} } /* ── Hero ── */ .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6f8fe 0%,#fff 72%)} .hero-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;z-index:0} .hero-mascot{position:absolute;right:0;top:0;bottom:0;width:46%;max-width:600px;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:1} .mascot-slot{width:74%;aspect-ratio:1;border:2px dashed #c9d6f5;border-radius:26px;background:radial-gradient(closest-side,var(--blue-wash),transparent);display:flex;align-items:center;justify-content:center;opacity:.75} .mascot-slot span{font-family:var(--mono);font-size:12px;color:var(--blue-deep);letter-spacing:.05em} /* 690px rather than 600: the hero paragraph needs the extra measure to sit on two lines. It still clears the mascot, which starts around 644px in from the left on a 1240px page and is decorative anyway. */ .hero-inner{position:relative;z-index:2;max-width:690px;padding:56px 0 62px} .hero-badge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:8px 18px 8px 8px;box-shadow:var(--shadow);font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink)} .hero-badge .bic{width:28px;height:28px;border-radius:9px;background:var(--blue-wash);display:flex;align-items:center;justify-content:center;color:var(--blue)} .hero h1{font-size:60px;font-weight:800;line-height:1.02;margin:22px 0 0} /* The lead is a smaller line above, so "premium code." carries the weight and runs visibly longer than it. Sized in em, so it tracks the h1 through every breakpoint without a second set of rules. Block display fixes the line break rather than leaving it to wrapping. */ .hero h1 .hl-lead{display:block;font-size:.78em;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:.08em} .hero h1 .hl{color:var(--blue);display:block} .hero h1 .dot{color:var(--ink)} /* Desktop runs the whole headline on one line. The size scales with the viewport rather than being fixed, because at a fixed size the line would be long enough to reach the mascot on a narrow desktop: the artwork's left edge sits about 490px in at 901px wide and only moves right from there. */ /* Tablet keeps the stacked headline but scales it, so there is no jump from a fixed 60px at 900px to the single line that starts at 901px. */ @media(min-width:601px) and (max-width:900px){ .hero h1{font-size:clamp(36px,5.4vw,50px)} } @media(min-width:901px){ .hero h1{font-size:clamp(26px,3.2vw,48px);white-space:nowrap} .hero h1 .hl-lead{display:inline;font-size:1em;margin:0 .26em 0 0} .hero h1 .hl{display:inline} } .hero p{font-size:18px;color:var(--slate);max-width:460px;margin:20px 0 30px} /* Selector has to out-specify `.hero p` above (0,1,1), or the 460px cap and 18px size there win on specificity and this never applies. */ .hero p.hero-sub{max-width:none;width:100%;font-size:16.5px;line-height:1.55} /* The mascot is solid above 900px and its left edge sits at roughly 490px in at 901px, creeping right as the screen grows. Below a 1400px screen the paragraph is held to 460px so it always stops short of the artwork, which also settles it at three lines there. Wider than that the mascot has moved far enough right for the full 690px measure and two lines. */ @media(max-width:1400px){.hero p.hero-sub{max-width:460px}} /* position anchors the suggestions panel that drops out of this bar. */ .hero-search{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:40px;box-shadow:var(--shadow-lg);padding:8px 8px 8px 24px;max-width:540px;position:relative} .hero-search input{flex:1;border:0;outline:0;font-size:16px;padding:15px 0;background:transparent;min-width:0;font-family:var(--sans)} .hero-go{width:56px;height:56px;flex-shrink:0;border:0;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .hero-go:hover{background:var(--blue-deep)} .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center} .tags .lbl{font-size:13px;color:var(--slate);font-weight:600;margin-right:2px} .tag{font-size:13px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:24px;font-weight:600} /* On a phone the four tags wrapped differently depending on the exact screen width, sometimes 2 up, sometimes 3. A three column grid makes it the same everywhere: label on its own row, three tags, then the fourth beneath. */ @media(max-width:640px){ .tags{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:stretch} .tags .lbl{grid-column:1/-1;margin:0 0 -2px} .tag{padding:8px 6px;font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } .tag:hover{border-color:var(--blue);color:var(--blue)} /* ── Category chips ── A mouse cannot swipe a rail and the scrollbar is deliberately hidden, so on a wide screen the whole set wraps and centres: every category is reachable and none of them has to be discovered. Narrow screens keep the rail, where the swipe is natural and the vertical space is worth more than the reveal. */ .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:22px 0} .chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 16px;font-weight:600;font-size:13.5px;color:var(--ink-soft);cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease} .chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint);transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,82,255,.10)} .chip .em{width:26px;height:26px;border-radius:8px;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0} /* The rail is gated on being able to swipe, not on width alone: a narrow desktop window is still a mouse, and a mouse cannot move a hidden-scrollbar rail. Anything that cannot hover gets the rail; everything else wraps. */ @media(max-width:900px) and (hover:none){ .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .chips::-webkit-scrollbar{display:none} .chip{flex-shrink:0} /* a lift under a fingertip only shifts the thing being tapped */ .chip:hover{transform:none;box-shadow:none} } @media(prefers-reduced-motion:reduce){ .chip{transition:border-color .16s ease,color .16s ease,background .16s ease} .chip:hover{transform:none} } /* ── Sections ── */ section{padding:52px 0} .band{background:var(--blue-tint);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} /* The "see all" link sits on the heading's own line. A description belongs in .sec-sub underneath, never inside this row, or it would drag the link down and leave it out of line with the heading. */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:20px} .sec-head:has(+.sec-sub){margin-bottom:8px} .sec-sub{color:var(--slate);font-size:15px;margin:0 0 26px;max-width:640px} .sec-head h2{font-size:30px;font-weight:800} .sec-head p{color:var(--slate);font-size:15px;margin:6px 0 0} .see-all{font-weight:700;font-size:14px;color:var(--blue);display:inline-flex;align-items:center;gap:6px} .see-all:hover{gap:9px} .tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap} .tab{font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--slate);cursor:pointer} .tab.on{background:var(--ink);color:#fff;border-color:var(--ink)} .tab:not(.on):hover{border-color:#c9d2ea;color:var(--ink)} /* product grid + card */ .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} @media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.grid{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease, box-shadow .12s ease, border-color .12s} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d4ddf5} .thumb{aspect-ratio:16/10;position:relative;display:flex;align-items:center;justify-content:center} .thumb .file{position:absolute;bottom:10px;left:10px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:6px;backdrop-filter:blur(4px)} .thumb .cat{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.42);padding:4px 8px;border-radius:6px;text-transform:uppercase} /* Placeholder tile when a product has no thumbnail: a white chip on the card's gradient, holding the category icon in the brand blue. */ .thumb .glyph{width:56px;height:56px;border-radius:15px;background:rgba(255,255,255,.92);color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.2)} .card-body{padding:15px 16px 0;flex:1;min-width:0} /* Clamped to two lines so a long title cannot make one card taller than the rest of the row, and reserved at two lines so short titles align too. */ .card-body h3{font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em} /* The title link stretches over the whole card, so the card is clickable while the action buttons stay real, separately clickable controls. */ .card-link{display:block} .card-link::after{content:"";position:absolute;inset:0;z-index:1} .card-meta{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;color:var(--slate);min-width:0} /* The vendor name is the only part allowed to shrink; it truncates rather than wrapping into a squashed column. The rating always keeps its full width. */ .card-meta .by{font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto} .card-meta .sep{flex:0 0 auto;opacity:.5} .rating{display:inline-flex;align-items:center;gap:4px;color:var(--amber);font-size:12.5px;flex:0 0 auto;white-space:nowrap} .rating .c{color:var(--slate-light);font-family:var(--mono)} .card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;margin-top:14px;border-top:1px solid var(--line-soft)} .card-foot .price{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* On a narrow card the extended price is the first thing to go, so the main price and the buttons always stay readable. */ @media(max-width:1150px){.card-foot .price .tier{display:none}} .price{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--ink)} .price .free{color:var(--green)} .tier{font-family:var(--mono);font-size:11px;color:var(--slate-light)} /* Card actions sit above the stretched title link so they stay clickable. */ .card-actions{display:flex;align-items:center;gap:7px;position:relative;z-index:2;flex:0 0 auto} .card-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;flex-shrink:0;transition:background .12s,color .12s,border-color .12s} .card-btn.add{background:var(--blue-wash);color:var(--blue)} .card-btn.add:hover{background:var(--blue);color:#fff} .card-btn.preview{background:#fff;border-color:var(--line);color:var(--slate)} .card-btn.preview:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)} .card{position:relative} .card,.card *{text-decoration:none} .card-link{color:inherit} /* Keyboard focus has to show on the card, not just the invisible stretched link, so tabbing through a grid is followable. */ .card:has(.card-link:focus-visible){outline:2px solid var(--blue);outline-offset:2px} .card-link:focus-visible{outline:none} .card-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* category chips are links */ a.chip{text-decoration:none} /* empty states (no fake items when a section has no data) */ .empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:46px 20px;background:var(--blue-tint);border:1px dashed var(--line);border-radius:16px;color:var(--slate);text-align:center} /* Holds an SVG now rather than an emoji glyph, so no font-size and no opacity: the icons carry their own soft tone and dimming them muddied the blues. */ .empty-ic{line-height:1;display:flex;justify-content:center;margin-bottom:6px} .empty-ic img{width:64px;height:64px;display:block} @media(max-width:640px){.empty-ic img{width:56px;height:56px}} .empty p{font-size:14px;max-width:360px;margin:0} .empty-span2{grid-column:2 / -1} @media(max-width:900px){.empty-span2{grid-column:1/-1}} /* feature card (Picks) */ .picks{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px} @media(max-width:900px){.picks{grid-template-columns:1fr 1fr}} @media(max-width:520px){.picks{grid-template-columns:1fr}} .feature{background:linear-gradient(150deg,#0b0b0e,#1c1c22);color:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;position:relative;overflow:hidden} .feature .badge{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8fb0ff} .feature h3{font-size:26px;font-weight:800;margin-top:10px;line-height:1.1} .feature p{color:#b9c2e4;font-size:14px;margin:12px 0 0;max-width:320px} .feature .row{display:flex;align-items:center;gap:14px;margin-top:22px} .feature .fp{font-family:var(--mono);font-weight:700;font-size:20px} .feature .orb{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(31,82,255,.5),transparent 70%);right:-40px;top:-40px} .feature .badge svg{color:var(--amber)} .feature .fstats{display:flex;gap:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)} .feature .fn{font-family:var(--mono);font-weight:800;font-size:22px;color:#fff;font-variant-numeric:tabular-nums} .feature .fn span{color:#4f7cff} .feature .fl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#8a8f9e;margin-top:2px} .feature .fverified{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:600;color:#3ddc97} /* featured author */ .author{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center} .author-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center;box-shadow:var(--shadow)} .author-cta{width:100%;justify-content:center} .author-card .av{width:76px;height:76px;border-radius:20px;margin:0 auto 14px;background:linear-gradient(135deg,var(--blue),#7aa0ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:800} .author-card h3{font-size:19px;font-weight:800} .author-card .verified{color:var(--blue);font-size:13px;font-weight:600;margin-top:3px} .author-stats{display:flex;justify-content:center;gap:22px;margin:18px 0} .author-stats .n{font-weight:800;font-size:17px} .author-stats .l{font-size:11.5px;color:var(--slate)} /* Three fixed columns inside this already-narrow track squeezed each card to about 205px, which wrapped the vendor name and pushed titles to two lines. auto-fill keeps every card at a readable width and simply shows fewer of them when there is not room. */ .author-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .author-items>*{min-width:0} /* Below the desktop breakpoint the card becomes a banner above the items. Kept as a narrow column it sat beside a two-row grid of cards, so at 1024px a 319px card faced a 744px list and left 425px of empty white next to it. Across the top it is the same information with nothing wasted, and the items get the full width, which fits three across instead of two. */ @media(max-width:1100px){ .author{grid-template-columns:1fr;gap:20px} .author-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;text-align:left;padding:18px 22px} .author-card .av{width:58px;height:58px;border-radius:16px;margin:0;font-size:21px;flex-shrink:0} .author-id{flex:1;min-width:150px} .author-stats{margin:0;justify-content:flex-start;gap:26px;flex-shrink:0} .author-cta{width:auto;flex-shrink:0} } /* Narrow phones: the row has run out of width, so it goes back to a column. */ @media(max-width:600px){ .author-items{grid-template-columns:1fr} .author-card{display:block;text-align:center;padding:24px} .author-card .av{margin:0 auto 14px;width:70px;height:70px;font-size:26px} .author-stats{justify-content:center;margin:16px 0} } /* testimonials */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.quotes{grid-template-columns:1fr}} .quote{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)} .quote .stars{color:var(--amber);font-size:14px} .quote p{font-size:14.5px;color:var(--ink-soft);margin:12px 0 18px;line-height:1.6} .quote .who{display:flex;align-items:center;gap:11px} .quote .who .av{width:40px;height:40px;border-radius:11px;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700} .quote .who .nm{font-weight:700;font-size:13.5px} .quote .who .rl{font-size:12px;color:var(--slate)} /* faq */ .faq{max-width:760px;margin:0 auto} .faq-item{border-bottom:1px solid var(--line)} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;font-weight:700;font-size:16px} .faq-q .pl{color:var(--blue);font-size:20px;transition:transform .2s} .faq-item.open .faq-q .pl{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--slate);font-size:14.5px;line-height:1.65} .faq-item.open .faq-a{max-height:220px;padding:0 4px 20px} /* seller CTA */ .seller{background:linear-gradient(150deg,var(--blue),var(--blue-deep));border-radius:22px;padding:48px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden} .seller h2{font-size:32px;font-weight:800;max-width:520px} .seller p{color:#d5e0ff;margin:12px 0 0;max-width:480px;font-size:15px} .seller .orb{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);right:-60px;bottom:-120px} /* footer */ /* The bottom pad grows by the phone's safe area, so the footer's black runs all the way under the home indicator instead of stopping short and leaving a white band there. env() resolves to 0 on anything without an inset. */ /* ── The CTA that straddles the page/footer seam ── The band carries the page white down to the card. The card's negative bottom margin lifts the footer up under it, so the overlap is the card's lower portion, and z-index keeps the card above the black. */ .foot-cta-band{background:var(--white);position:relative;z-index:2;padding-top:20px} /* Shares the footer columns' 1120px measure, so the card and the footer below line up on the same edges instead of the card running wider. */ .foot-cta{position:relative;z-index:3;max-width:1120px;margin:0 auto -78px; background:linear-gradient(150deg,var(--blue),var(--blue-deep));border-radius:30px;padding:44px 48px;color:#fff; display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;overflow:hidden; box-shadow:0 24px 60px rgba(11,57,214,.28)} .foot-cta .orb{position:absolute;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);right:-70px;bottom:-130px} /* ── 3D depth behind the CTA ── A grid floor laid back in perspective, plus glass tiles tilted on two axes. The lighting is faked with a top-down gradient, a bright inset top edge and a drop shadow, which is what sells them as solid objects rather than flat squares. All of it sits behind the copy. */ .cta3d{position:absolute;inset:0;perspective:900px;pointer-events:none;overflow:hidden;z-index:0} .cta-floor{position:absolute;left:-10%;right:-10%;bottom:-42%;height:85%; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:46px 46px; transform:rotateX(72deg);transform-origin:50% 100%; -webkit-mask-image:linear-gradient(to top,#000,transparent 72%); mask-image:linear-gradient(to top,#000,transparent 72%)} .cta-tile{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff; border-radius:20px;border:1px solid rgba(255,255,255,.30); background:linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.07)); box-shadow:0 20px 38px rgba(3,10,45,.34),inset 0 1.5px 0 rgba(255,255,255,.5); animation:ctafloat 7s ease-in-out infinite} /* Kept inside the gap between the copy and the button, so nothing sits behind the call to action. */ .cta-tile.t1{width:86px;height:86px;right:26%;top:10%;transform:rotateX(16deg) rotateY(-24deg) rotate(-8deg)} .cta-tile.t2{width:62px;height:62px;right:40%;top:54%;transform:rotateX(18deg) rotateY(-20deg) rotate(9deg);animation-delay:-2.3s} .cta-tile.t3{width:52px;height:52px;right:33%;top:62%;transform:rotateX(14deg) rotateY(-26deg) rotate(-14deg);animation-delay:-4.6s} .cta-coin{position:absolute;right:23%;top:62%;width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;font-size:22px;color:#0b39d6; background:linear-gradient(150deg,#fff,#cfdcff); box-shadow:0 16px 32px rgba(3,10,45,.36),inset 0 -3px 6px rgba(11,57,214,.25),inset 0 2px 0 #fff; animation:ctafloat 7s ease-in-out infinite;animation-delay:-1.2s} @keyframes ctafloat{0%,100%{translate:0 0}50%{translate:0 -12px}} @media(prefers-reduced-motion:reduce){.cta-tile,.cta-coin{animation:none}} /* On a stacked card the copy runs the full width, so the props move up into the top-right corner and shrink, and the two that would land behind the text are dropped rather than crowding it. */ /* On a stacked card the copy runs the full width, so the props move up into the top-right corner, shrink, and the two that would land behind the text are dropped. The copy gets matching right padding so the headline stops before them instead of running underneath. */ /* A stacked card has no room for floating props beside the copy: they either crowd the headline or force it onto two lines. On these sizes the depth comes purely from the background instead, a receding grid floor and a large tilted panel, so the text keeps the full width and the card stays short. */ @media(max-width:900px){ .foot-cta-copy{padding-right:0} .cta-tile,.cta-coin{display:none} .cta-floor{bottom:-46%;height:82%;background-size:38px 38px; background-image:linear-gradient(rgba(255,255,255,.20) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.20) 1px,transparent 1px)} .cta3d::after{content:"";position:absolute;right:-18%;top:-30%;width:78%;aspect-ratio:1; border-radius:34%;background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,0) 62%); transform:rotate(24deg)} } .foot-cta-copy{position:relative;z-index:1;min-width:0} /* No max-width: the 19ch cap was breaking the headline onto two lines even though there was room for it in one. The single-line rule is scoped to wide screens with min-width rather than being overridden later, because a plain override further up the file loses to this declaration on source order and the headline then overflows the card. */ .foot-cta h2{font-size:30px;font-weight:800;letter-spacing:-.02em;text-wrap:balance} @media(min-width:901px){.foot-cta h2{text-wrap:nowrap}} .foot-cta p{color:#d5e0ff;margin:12px 0 0;max-width:52ch;font-size:15px;line-height:1.6} .foot-cta-btn{position:relative;background:#fff;color:var(--blue);padding:15px 30px;font-size:15px;flex-shrink:0} .foot-cta-btn:hover{background:#eef2ff} /* margin-top removed on purpose: it let the black body show through as a hard 16px band above the footer, which read as a stray line. The extra top padding clears the CTA card overlapping into this space. */ footer{background:var(--black);color:#9a9aa2;padding:134px 0 calc(28px + env(safe-area-inset-bottom));margin-top:0} /* Full-bleed black, but the columns stay a centred group rather than stretching across the whole of a wide monitor. */ /* Brand block plus four link columns. The brand gets the wider track because it carries the logo and a sentence, not a list. */ .foot-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:30px;max-width:1200px;margin:0 auto} /* Without min-width:0 the brand column cannot shrink below the logo's own width, which steals space from the link columns and pushes the page wide. */ .foot-grid>*{min-width:0} @media(max-width:1080px){ /* Four link columns will not hold their headings on one line much below this, so they drop to two and the brand spans the row above them. */ .foot-grid{grid-template-columns:1fr 1fr;gap:30px 36px} .foot-grid>:first-child{grid-column:1/-1} } @media(max-width:820px){ .foot-cta{padding:26px 22px;border-radius:24px;margin:0 auto -58px;gap:18px} /* Sized to hold the headline on one line right down to a 320px screen: the clamp scales it with the viewport so it never has to wrap. */ .foot-cta h2{font-size:clamp(16px,5.3vw,25px);white-space:nowrap;max-width:none} .foot-cta p{font-size:13.5px;margin-top:9px} .foot-cta-btn{width:auto;align-self:flex-start;padding:13px 26px} footer{padding-top:104px} } /* Phones keep the two columns rather than stacking: four lists in one column is a long scroll past links nobody is reading. The brand spans the row above, so nothing is squeezed by sharing the width. */ @media(max-width:520px){ .foot-grid{grid-template-columns:1fr 1fr;gap:26px 20px} .foot-cta{padding:24px 20px;margin:0 auto -48px;gap:16px} .foot-cta p{font-size:13px;line-height:1.55} footer{padding-top:92px} } /* Narrowest phones: the headings still fit two up, the gap is what gives. */ @media(max-width:360px){ .foot-grid{gap:22px 14px} } /* Stacked on a phone, the copyright and ownership lines centre rather than sitting flush left where the space-between leaves them ragged. */ @media(max-width:640px){ .foot-bottom{flex-direction:column;justify-content:center;text-align:center;gap:10px} } footer .logo .a{color:#fff} footer p.tagline{color:#7a7a82;font-size:13.5px;margin:14px 0 0;max-width:280px;line-height:1.6} footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;font-family:var(--mono)} footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} footer a{color:#9a9aa2;font-size:13.5px} footer a:hover{color:#fff} .foot-bottom{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);gap:16px;flex-wrap:wrap} .foot-bottom .pb{font-size:13px;color:#7a7a82} .foot-bottom .pb b{color:var(--blue);font-weight:700} .slot-note{font-family:var(--mono);font-size:10px;color:var(--slate-light);letter-spacing:.05em} .owned{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6a6a72} /* ── Collapsible mobile search ── */ /* Slides open rather than appearing. The row track animates from 0fr to 1fr, which eases the bar's ACTUAL height. max-height cannot: it needs a ceiling above the real height, so the bar hits full size part way through and the rest of the easing plays out invisibly, which reads as a snap rather than a slide. The content is lifted in as well, so it arrives from behind the header instead of the panel merely growing. */ .mobile-search{background:var(--black);display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .34s cubic-bezier(.22,.8,.28,1),opacity .24s ease} /* Clipping belongs on the child for this to work, and min-width/height:0 is what lets a grid item actually shrink to nothing. */ /* No padding here: at a zero track the box collapses but its padding still renders, so the bar would open from 14px instead of nothing and snap that distance before the slide began. The spacing sits on the form instead, inside the clipped area, where it collapses with everything else. */ /* width:100% is load-bearing. As a grid item, .wrap's own `margin:0 auto` overrides the default stretch, so it sized to its content and centred, which left the bar a narrow strip with black either side. It was a plain block before the animation, where those auto margins did nothing. */ .mobile-search>.wrap{width:100%;overflow:hidden;min-height:0; transform:translateY(-12px);opacity:.4; transition:transform .34s cubic-bezier(.22,.8,.28,1),opacity .28s ease} .mobile-search>.wrap>.search{margin-bottom:14px} .mobile-search.on{grid-template-rows:1fr;opacity:1} .mobile-search.on>.wrap{transform:none;opacity:1} /* Once open the clipping has to go, or the suggestions dropdown hanging below the bar would be cut off at its edge. */ .mobile-search.done>.wrap{overflow:visible} .mobile-search .search{max-width:100%;height:46px} @media(prefers-reduced-motion:reduce){ .mobile-search,.mobile-search>.wrap{transition-duration:.01s} } /* off-canvas mobile menu */ .m-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:60} .m-overlay.on{opacity:1;visibility:visible} .m-menu{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:86vw;background:#fff;z-index:70;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:0 0 60px rgba(0,0,0,.2)} .m-menu.on{transform:none} .m-menu-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)} .m-menu-head .logo{font-size:19px} .m-close{width:40px;height:40px;border:0;background:transparent;color:var(--slate);cursor:pointer;display:flex;align-items:center;justify-content:center} .m-links{flex:1;padding:12px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2px;overflow-y:auto} .m-links a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-weight:500;font-size:14px;color:var(--ink)} .m-links a:hover,.m-links a:active{background:var(--blue-tint);color:var(--blue)} .m-links .mi{width:20px;display:flex;align-items:center;justify-content:center;color:var(--slate);flex-shrink:0} .m-links a:hover .mi,.m-links a:active .mi{color:var(--blue)} .m-links .m-free .mi{color:var(--green)} /* The cross-sell to domzivo.com carries the longest label in the menu and was wrapping onto two lines on every phone. It is a secondary promo, so it takes a smaller type size and a tighter icon, and is pinned to one line at any width, truncating rather than wrapping if a device is narrower still. */ .m-links .m-cross{font-size:12.5px;padding:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--slate);margin-top:4px;border-top:1px solid var(--line-soft);border-radius:0} .m-links .m-cross:hover,.m-links .m-cross:active{background:var(--blue-tint);color:var(--blue)} .m-auth{padding:16px 16px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px} body.menu-lock{overflow:hidden} /* ── Hero on small screens ── */ /* Matched to the 901px point where the headline stops being one line. At 820 it left an 821-900 band where the mascot was still solid but the headline had already stacked and grown, so the copy ran straight into the artwork. */ @media(max-width:900px){ .hero-mascot{opacity:.22;width:80%;max-width:none} } @media(max-width:600px){ .hero-inner{padding:36px 0 40px;max-width:100%} /* Scales with the viewport so the headline keeps clearance on a 320px screen rather than sitting a couple of pixels off the edge at a fixed 36px. */ .hero h1{font-size:clamp(24px,8vw,36px)} .hero p{font-size:16px;margin:16px 0 24px} .hero-search{max-width:100%} .hero-search input{font-size:15px;padding:13px 0} .hero-go{width:50px;height:50px} .hero-badge{font-size:10px} .sec-head h2{font-size:24px} .sec-head{margin-bottom:20px} section{padding:40px 0} .announce{font-size:11px;padding:8px 12px} .wrap{padding:0 18px} .feature .fstats{gap:20px} } /* ═══ Header refinements to match the reference ═══ */ /* Top utility bar */ .topbar{display:block;background:var(--black);border-bottom:1px solid rgba(255,255,255,.07)} .topbar-in{display:flex;align-items:center;justify-content:space-between;height:40px} .tb-left,.tb-right{display:flex;align-items:center;gap:22px} .tb-left span,.tb-left a,.tb-right a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#b0b0ba;font-weight:500;white-space:nowrap} .tb-left span svg,.tb-left a svg,.tb-right a svg{color:#787884} .tb-left span:first-child svg{color:var(--blue)} .tb-right a:hover,.tb-left a:hover{color:#fff} .tb-right a:hover svg,.tb-left a:hover svg{color:var(--blue)} /* The cross-sell to domzivo.com is the one actionable item on the left, so it reads as a link rather than blending into the assurances beside it. */ .tb-cross{color:#cfd4e6 !important;font-weight:600 !important} .tb-cross svg{color:var(--blue) !important} .tb-cross:hover{color:#fff !important;text-decoration:underline} /* Header search: All Categories | input | square button */ /* Centred in the bar rather than left-aligned next to the logo: the auto side margins push it to the middle of whatever space the logo and actions leave. */ /* position anchors the suggestions panel. overflow is visible rather than hidden because that panel hangs below the bar: the button is inset with its own radius further down, so nothing needs clipping to the rounded corners. */ .search{flex:1 1 740px;max-width:740px;margin:0 auto;display:flex;align-items:stretch;background:#fff;border:0;border-radius:11px;height:46px;min-width:0;overflow:visible;position:relative;padding:0} .search:focus-within{box-shadow:0 0 0 3px rgba(31,82,255,.3)} .search-cats{display:flex;align-items:center;gap:6px;padding:0 16px;background:transparent;border:0;border-right:1px solid var(--line);color:var(--ink-soft);font-weight:600;font-size:13.5px;white-space:nowrap;cursor:pointer;flex-shrink:0} .search-cats:hover{color:var(--blue)} .search input{flex:1;border:0;outline:0;font-size:14.5px;padding:0 16px;min-width:0;background:transparent;color:var(--ink);font-family:var(--sans)} .search .search-go{width:56px;flex-shrink:0;border:0;border-radius:0;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .search .search-go:hover{background:var(--blue-deep)} /* The collapsible bar matches the header search height on the same screens. */ .mobile-search .search{padding:0 6px 0 14px;align-items:center;height:42px} .mobile-search .search svg{color:var(--slate-light);flex-shrink:0} .mobile-search .search input{padding:0 8px} /* ============ Page loading line ============ */ /* Sits above everything, including the sticky header and any open menu, so it is never the thing that gets covered up. */ .pgb{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none; opacity:0;transition:opacity .2s ease} .pgb.on{opacity:1} /* scaleX rather than width: it animates on the compositor, so the line stays smooth even while the browser is busy parsing the next page. */ .pgb-fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--blue) 0%,#5b8bff 60%,var(--blue) 100%); box-shadow:0 0 10px rgba(31,82,255,.7),0 0 4px rgba(31,82,255,.5); transition:transform .32s cubic-bezier(.25,.8,.3,1)} /* The last stretch snaps shut, so finishing feels like an arrival. */ .pgb.done .pgb-fill{transition:transform .18s ease-out} .pgb.done{opacity:0;transition:opacity .28s ease .12s} @media(prefers-reduced-motion:reduce){ .pgb-fill{transition:transform .12s linear} .pgb,.pgb.done{transition:opacity .1s linear} } /* ============ Search suggestions ============ */ /* Hangs below the search bar while someone is still typing. */ .sg{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg); overflow:hidden auto;max-height:min(70vh,460px);padding:6px;text-align:left} .sg-head{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--slate-light);padding:9px 11px 6px} .sg-row{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:10px; color:var(--ink);cursor:pointer} /* Both states styled the same, so a mouse and the arrow keys agree on what is about to be opened. */ .sg-row:hover,.sg-row.on{background:var(--blue-tint)} .sg-thumb{width:46px;height:32px;flex-shrink:0;border-radius:7px;object-fit:cover; border:1px solid var(--line-soft);background:var(--blue-tint)} .sg-thumb-none{display:block} .sg-ico{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:var(--blue-wash); color:var(--blue-deep);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700} .sg-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .sg-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The typed part, so it is obvious why a row matched. */ .sg-name b{color:var(--blue);font-weight:800} .sg-meta{font-size:11.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-right{flex-shrink:0;display:flex;align-items:center;gap:9px;font-family:var(--mono); font-size:12.5px;font-weight:700} .sg-free{color:#0a7048;background:var(--green-wash);border-radius:20px;padding:2px 8px;font-size:11px} .sg-rate{color:var(--amber);font-size:11.5px} .sg-rate::before{content:"★ "} .sg-cat .sg-name{font-weight:700} .sg-all{justify-content:center;font-size:12.5px;font-weight:700;color:var(--blue); margin-top:4px;border-top:1px solid var(--line-soft);border-radius:0 0 9px 9px;padding-top:12px} .sg-empty{padding:22px 14px;text-align:center;font-size:13px;color:var(--slate)} @media(max-width:600px){ .sg{max-height:min(60vh,380px)} .sg-thumb{width:40px;height:28px} .sg-right{font-size:11.5px} } /* Category row: icon + label + caret, plus highlighted pills */ .nav-cats-in{gap:2px} /* The visible space between two labels is both paddings plus the gap, so at 16px padding they sat 36px apart and read as a scattered row rather than one menu. Tightened to 24px, which still gives each its own hover target. */ .cat-links{gap:2px} /* Direct children only. Unscoped, these matched the links INSIDE the flyout too, since it is nested in .cat-links: the hover rule painted them #fff on a white panel, so a subcategory disappeared the moment you pointed at it. */ .cat-links > a,.cat-item > a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:#b3b3bd;padding:6px 8px;border-radius:7px;white-space:nowrap} .cat-links > a svg,.cat-item > a svg{color:#8a8f9e} .cat-links > a:hover,.cat-item > a:hover{color:#fff;background:rgba(255,255,255,.07)} .cat-links > a:hover svg,.cat-item > a:hover svg{color:var(--blue)} .cat-links .cv{width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:.4;margin:-3px 0 0 1px} .cat-flex{flex:1} .cat-pill{color:#fff !important;font-weight:700 !important;padding:10px 16px !important} /* Just above the mobile breakpoint the full set would not fit at the larger size, so it tightens rather than starting to scroll. */ /* The full-size row needs about 1305px for all ten items, so the tighter styling has to start above that, not at 1250: between the two the row overflowed at 1280px, one of the most common laptop widths. */ @media(max-width:1320px){ .cat-links > a,.cat-item > a{font-size:12px;padding:6px 7px;gap:5px} .cat-pill{padding:9px 13px !important} } .cat-pill svg{color:#fff !important} .cat-free{background:var(--green)} .cat-free:hover{background:#0fa06f !important} .cat-sell{background:linear-gradient(135deg,#f5a524,#e8890b)} .cat-sell:hover{filter:brightness(1.06)} @media(max-width:1100px){.topbar{display:none}} /* ═══ Hero mascot floating badges ═══ */ .mascot-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center} /* ── Hero background depth ── Light pools behind the artwork, then a grid floor laid back in perspective with a bright horizon line where it meets the page. This is what gives the scene somewhere to sit, instead of the mascot floating on flat white. */ .hero-bg3d{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hb-glow{position:absolute;border-radius:50%;filter:blur(70px)} .hb-glow.g1{width:46%;aspect-ratio:1;right:2%;top:-14%;background:radial-gradient(circle,rgba(47,92,255,.30),transparent 68%)} .hb-glow.g2{width:34%;aspect-ratio:1;right:22%;bottom:-16%;background:radial-gradient(circle,rgba(0,208,255,.22),transparent 66%)} .hb-glow.g3{width:30%;aspect-ratio:1;left:-8%;top:24%;background:radial-gradient(circle,rgba(124,58,237,.14),transparent 68%)} .hb-grid{position:absolute;left:-25%;right:-25%;bottom:0;height:46%; background-image:linear-gradient(rgba(31,82,255,.26) 1px,transparent 1px), linear-gradient(90deg,rgba(31,82,255,.26) 1px,transparent 1px); background-size:64px 64px; transform:perspective(620px) rotateX(74deg);transform-origin:50% 100%; -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 78%); mask-image:linear-gradient(to top,#000 0%,transparent 78%)} /* Confined to the right half, behind the artwork. Run full width it crossed the headline and paragraph as a stray rule. */ .hb-horizon{position:absolute;left:52%;right:0;bottom:34%;height:1px; background:linear-gradient(90deg,transparent,rgba(47,92,255,.40),transparent); box-shadow:0 0 30px 6px rgba(47,92,255,.16)} /* Floating props, rebuilt as glass rather than flat white discs: a graded surface, a lit top edge, a coloured shadow with real falloff, and a slight tilt on two axes so they read as objects in the scene. */ .fb{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3; border-radius:22px;border:1px solid rgba(255,255,255,.85); background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(233,240,255,.72)); box-shadow:0 26px 48px -14px rgba(10,22,80,.30), 0 8px 16px -8px rgba(10,22,80,.20), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 8px rgba(120,150,255,.20); backdrop-filter:blur(9px) saturate(150%);-webkit-backdrop-filter:blur(9px) saturate(150%); animation:fbfloat 8s ease-in-out infinite} @keyframes fbfloat{0%,100%{translate:0 0}50%{translate:0 -14px}} @media(prefers-reduced-motion:reduce){.fb{animation:none}} /* Each tilted differently and offset in the float cycle, so they read as separate objects rather than one rigid set. */ .fb-a,.fb-b,.fb-c,.fb-d{width:64px;height:64px} .fb-a{top:15%;left:5%;color:var(--amber);transform:rotate(-7deg) rotateX(12deg) rotateY(14deg);animation-delay:-1.1s} .fb-b{top:9%;right:7%;color:var(--green);transform:rotate(6deg) rotateX(12deg) rotateY(-14deg);animation-delay:-3.4s} .fb-c{top:46%;left:-2%;color:var(--blue);transform:rotate(-11deg) rotateX(10deg) rotateY(16deg);animation-delay:-5.6s} .fb-d{bottom:19%;right:1%;color:var(--ink);transform:rotate(9deg) rotateX(10deg) rotateY(-16deg);animation-delay:-2.2s} /* The rating pill stays a pill, and reads as the brightest object in the scene. */ /* A soft contact shadow under the mascot, so it sits on the grid floor rather than hovering over it. */ .mascot-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:6%;height:34px;border-radius:50%; background:radial-gradient(ellipse at center,rgba(10,22,80,.26),transparent 70%);filter:blur(10px);z-index:1} .fb-coin{width:88px;height:88px;bottom:10%;left:2%;transform:rotate(-5deg) rotateX(10deg) rotateY(12deg);animation-delay:-4.3s} @media(max-width:900px){.fb{display:none}} /* ═══ Logo image (with text fallback) ═══ */ /* Never shrinks. The search bar asks for a wide flex-basis, and without this the logo was the thing that gave way, collapsing to nothing below 1100px. */ .logo{display:inline-flex;align-items:center;gap:0;flex-shrink:0} /* The mark is a two-line lockup (wordmark over "Powered by Domzivo"), so it needs less height than a single-line wordmark would at the same weight. */ .logo-img{height:32px;width:auto;max-width:100%;aspect-ratio:977/160;display:block;object-fit:contain} .logo-text{display:none;font-size:22px;font-weight:800;letter-spacing:-.03em;white-space:nowrap} .logo-text .a{color:#fff} .logo-text .b{color:#4f7cff} .logo-fallback .logo-img{display:none} .logo-fallback .logo-text{display:inline-block} /* The mark is white, so it only ever sits on the dark header, footer and menu. */ footer .logo-img{height:36px} .m-menu-head .logo-img{height:28px} /* footer + menu logos sit on light/dark grounds; keep the text crisp there */ footer .logo-text .a,.m-menu .logo-text .a{color:inherit} /* ═══ Search button: inset, rounded (not a hard full-height square) ═══ */ .search{padding:5px} .search .search-go{width:40px;height:34px;border-radius:8px;align-self:center} .search .search-go svg{width:16px;height:16px} /* ═══ Category row stays a block; hidden below the desktop breakpoint ═══ */ .nav-cats-row{display:block} /* ═══ Hero mascot image (with placeholder fallback) ═══ */ .mascot-img{width:92%;height:auto;aspect-ratio:699/795;max-height:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 30px 50px rgba(10,17,48,.18))} .mascot-stage .mascot-slot{display:none} .mascot-stage.mascot-fallback .mascot-img{display:none} .mascot-stage.mascot-fallback .mascot-slot{display:flex} /* ═══ Phone and tablet header ═══ */ /* Below the category breakpoint the hamburger takes the far left, so the logo shrinks to leave room for it alongside the cart and account icons, and the search bar comes down in height so it stops dominating the row. */ @media(max-width:1100px){ .nav-in{gap:12px;height:64px} .logo-img{height:27px} /* Tablet only: pull the menu button ahead of the logo, so it balances the inline search bar sitting in the middle of the row. Phones keep it in DOM order, which puts it at the far right beside the cart and account. */ @media(min-width:721px){ #menu-open{order:-1;margin-right:2px} } .search{height:42px;border-radius:10px;padding:5px} .search input{padding:0 12px} .search .search-go{width:38px;height:32px;border-radius:8px} .search .search-go svg{width:16px;height:16px} .search-cats{height:32px;padding-left:10px;font-size:12.5px} } /* ═══ Compress the header icons on very small phones ═══ */ @media(max-width:430px){ .nav-in{gap:8px} .logo-img{height:23px} .logo-text{font-size:18px} .nav-actions{gap:6px} .icon-btn{width:38px;height:38px} .wrap{padding:0 14px} } /* ============ Storefront inner pages ============ */ /* breadcrumbs */ .crumbs{font-size:12.5px;color:var(--slate-light);padding:26px 0 4px;display:flex;flex-wrap:wrap;gap:7px;align-items:center} .crumbs a{color:var(--slate)} .crumbs a:hover{color:var(--blue)} .crumbs span{opacity:.5} /* ---- Browse / category / search ---- */ .browse{padding:8px 0 60px} .browse-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:6px 0 20px} .browse-head h1{font-size:32px;font-weight:800;letter-spacing:-.02em} .browse-sub{color:var(--slate);font-size:14.5px;margin-top:6px} .sortbar{display:flex;align-items:center;gap:9px;flex-shrink:0} .sortlbl{font-size:13px;color:var(--slate);font-weight:600} .sortsel{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;max-width:100%} /* The heading and the search box cannot sit side by side much below a laptop: the box is 340px, so at 700px it leaves the title about 250px and the two collide. 520 was the old breakpoint, from when this row held a small select rather than a search field. */ @media(max-width:820px){ .browse-head{flex-direction:column;align-items:stretch;gap:14px} .browse-head .items-search{flex:1 1 auto;width:100%} } .sortsel:focus{outline:none;border-color:var(--blue)} .filter-cats{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px} .filter-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--ink-soft)} .filter-pill:hover{border-color:var(--blue);color:var(--blue)} .filter-pill.on{background:var(--ink);border-color:var(--ink);color:#fff} .filter-pill.free{color:var(--green)} .filter-pill.free.on{background:var(--green);border-color:var(--green);color:#fff} .filter-pill .fp-n{font-family:var(--mono);font-size:11px;opacity:.7} /* pagination */ .pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px} .page{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:13.5px;color:var(--ink-soft)} .page:hover{border-color:var(--blue);color:var(--blue)} .page.on{background:var(--blue);border-color:var(--blue);color:#fff} .page.nav{color:var(--slate)} /* ---- Product detail ---- */ .pd{padding:8px 0 70px} .pd-hero{padding:4px 0 20px;border-bottom:1px solid var(--line);margin-bottom:24px} .pd-hero h1{font-size:clamp(22px,2.8vw,31px);font-weight:800;letter-spacing:-.025em;line-height:1.2} .pd-meta{display:flex;align-items:center;gap:9px 18px;margin-top:12px;flex-wrap:wrap;font-size:13.5px} .pd-by{display:inline-flex;align-items:center;gap:8px;color:var(--slate)} .pd-by b{color:var(--ink);font-weight:700} .pd-by:hover b{color:var(--blue)} .pd-by-av{width:25px;height:25px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#7aa0ff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800} .pd-rate{display:inline-flex;align-items:center;gap:6px} .pd-rate-n{font-weight:700;color:var(--ink)} .pd-rate-c{color:var(--slate-light);font-size:12.5px} .pd-rate:hover .pd-rate-n{color:var(--blue)} .pd-stat{color:var(--slate);font-family:var(--mono);font-size:12.5px} /* Source order is the phone order: preview, buy, then the detail. Desktop places the same blocks into two columns with a sticky purchase panel. */ .pd-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:30px} .pd-gallery{grid-column:1;grid-row:1;min-width:0} .pd-side{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:14px} .pd-detail{grid-column:1;grid-row:2;min-width:0} .pd-media{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} .pd-media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pd-glyph{width:84px;height:84px;border-radius:22px;background:rgba(255,255,255,.92);color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.25)} /* The two calls to action, under the image rather than over it, sharing the width equally so neither reads as the lesser option. */ .pd-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px} .pd-cta:has(>:only-child){grid-template-columns:1fr} .pd-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:#fff; color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .pd-cta-btn:hover{border-color:#c9d2ea;background:var(--blue-tint)} .pd-cta-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .pd-cta-btn.primary:hover{background:var(--blue-deep);border-color:var(--blue-deep)} .pd-cta-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--slate); background:var(--blue-tint);border:1px solid var(--line);border-radius:20px;padding:1px 7px} /* ── Screenshot viewer ── */ .shotv{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px} .shotv-back{position:absolute;inset:0;background:rgba(6,8,20,.82)} .shotv-panel{position:relative;width:min(1080px,100%);max-height:100%;display:flex;flex-direction:column; background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)} .shotv-head{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:15px 18px;border-bottom:1px solid var(--line-soft);flex-shrink:0} .shotv-head h3{font-size:14.5px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shotv-head h3 span{display:block;font-size:11.5px;font-weight:600;color:var(--slate);letter-spacing:0} .shotv-x{width:38px;height:38px;flex-shrink:0;border:1px solid var(--line);border-radius:10px;background:#fff; color:var(--slate);display:flex;align-items:center;justify-content:center;cursor:pointer} .shotv-x:hover{color:var(--ink);border-color:#c9d2ea} .shotv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px; padding:18px;overflow-y:auto} .shotv-cell{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--blue-tint);cursor:pointer} .shotv-cell:hover{border-color:var(--blue)} .shotv-cell img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover} /* One screenshot, filling whatever height is left. */ .shotv-one{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center; background:#0b0b0e;padding:14px} .shotv-one img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px} .shotv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%; background:rgba(255,255,255,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2} .shotv-nav:hover{background:#fff} .shotv-nav.prev{left:14px} .shotv-nav.next{right:14px} .shotv-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:12px 16px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:12px} .shotv-all{border:0;background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:12px;font-weight:700; padding:7px 13px;border-radius:20px;cursor:pointer} .shotv-all:hover{background:rgba(255,255,255,.28)} @media(max-width:600px){ .shotv{padding:0} .shotv-panel{width:100%;height:100%;max-height:100%;border-radius:0} .shotv-grid{grid-template-columns:1fr 1fr;gap:9px;padding:12px} .shotv-nav{width:38px;height:38px} .shotv-nav.prev{left:6px} .shotv-nav.next{right:6px} .pd-cta-btn{font-size:12.5px;gap:7px;padding:0 10px} } /* ── Item form: media ── */ .pf-thumb{display:flex;gap:16px;align-items:flex-start;margin-top:14px;flex-wrap:wrap} .pf-thumb-box{width:220px;aspect-ratio:16/10;flex-shrink:0;border:1px dashed var(--line);border-radius:12px; background:var(--blue-tint);display:flex;align-items:center;justify-content:center;overflow:hidden} .pf-thumb-box img{width:100%;height:100%;object-fit:cover} .pf-thumb-empty{font-size:12px;color:var(--slate-light)} .pf-thumb-side{display:flex;flex-direction:column;gap:9px;align-items:flex-start} .pf-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;margin:14px 0} .pf-shots:empty{display:none} .pf-shot{position:relative;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--blue-tint);cursor:grab} .pf-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover} .pf-shot figcaption{position:absolute;left:7px;bottom:7px;font-size:10px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:#fff;background:rgba(11,11,14,.72);border-radius:20px;padding:3px 9px} .pf-shot-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:50%; background:rgba(11,11,14,.72);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex; align-items:center;justify-content:center} .pf-shot-x:hover{background:#c8352f} @media(max-width:520px){ .pf-thumb-box{width:100%} .pf-thumb-side{width:100%} .pf-shots{grid-template-columns:1fr 1fr} } /* ============ Framed live preview ============ */ /* The frame has to fill what is left under the bar, so the chain from html down to the iframe all carries a height. */ .html-pv,.pv-body{height:100%} .pv-body{margin:0;background:var(--black);overflow:hidden} .pv{display:flex;flex-direction:column;height:100%} .pv-bar{display:flex;align-items:center;gap:14px;flex-shrink:0;height:60px;padding:0 14px; background:var(--black);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)} .pv-back{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#fff} .pv-back:hover{background:rgba(255,255,255,.14)} .pv-logo{flex-shrink:0;display:flex;align-items:center} .pv-logo .logo-img{height:26px;width:auto;display:block} /* The bar carries the way back, the brand and the way to buy. The item's name and author are on the page a click away, and repeating them here only ate room from the demo. auto margin holds the actions right now that nothing between them is doing the pushing. */ .pv-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto} .pv-price{font-family:var(--mono);font-size:15px;font-weight:800} .pv-buy{padding:9px 18px;font-size:13.5px} .pv-out{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0} .pv-out:hover{background:rgba(255,255,255,.14)} .pv-stage{position:relative;flex:1;min-height:0;background:#fff} .pv-stage iframe{width:100%;height:100%;border:0;display:block} .pv-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;background:#fff;color:var(--slate);font-size:13px} .pv-spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%; animation:pv-spin .8s linear infinite} @keyframes pv-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.pv-spin{animation-duration:2.4s}} /* Sits along the bottom of the frame, so a slow demo is never covered up. */ .pv-hint{position:absolute;left:14px;right:14px;bottom:14px;z-index:3; display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px; box-shadow:var(--shadow-lg);font-size:12.5px} .pv-hint span{flex:1;min-width:180px;color:rgba(255,255,255,.75);line-height:1.55} .pv-hint a{font-weight:700;color:#8fb0ff;white-space:nowrap} .pv-hint a:hover{color:#fff;text-decoration:underline} .pv-hint button{width:28px;height:28px;flex-shrink:0;border:0;border-radius:8px; background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .pv-hint button:hover{background:rgba(255,255,255,.24)} @media(max-width:640px){ .pv-bar{height:54px;gap:10px;padding:0 10px} /* The logo stays: putting the demo on our own page is the whole point, and with the name gone there is room for it. The price is what goes. */ .pv-logo .logo-img{height:22px} .pv-price{display:none} .pv-buy{padding:8px 14px;font-size:12.5px} .pv-back,.pv-out{width:34px;height:34px} } /* ============ Google sign-in ============ */ /* Always on screen, so the option is visible whether or not the server has a client id yet. Our own button is drawn first and Google's replaces it once their script loads; unconfigured, a click says so rather than doing nothing. */ .gsi{display:none;margin-bottom:18px} .gsi.has-google{display:block} /* The auth modal hides this on the steps where Google means nothing, such as the password reset. .gsi.has-google already carries a display, and the UA rule for [hidden] is weaker than a two-class selector, so it needs saying at the same weight or the block stays on screen. Declared after, so it wins. */ .gsi[hidden]{display:none} .gsi-btn{display:flex;justify-content:center;min-height:44px} /* Matched to Google's own button so the swap is not a visible jump. */ .gsi-fallback{display:inline-flex;align-items:center;justify-content:center;gap:10px; width:100%;max-width:400px;height:44px;padding:0 20px;border-radius:30px; border:1px solid #dadce0;background:#fff;color:#3c4043;cursor:pointer; font-family:"Roboto",var(--sans);font-size:14px;font-weight:600;letter-spacing:.2px} .gsi-fallback:hover{background:#f8faff;border-color:#d2e3fc;box-shadow:0 1px 3px rgba(60,64,67,.15)} .gsi-fallback svg{flex-shrink:0} .gsi-btn.is-busy{opacity:.55;pointer-events:none} /* A rule with the word sitting on it, rather than a line and a floating label. */ .gsi-or{display:flex;align-items:center;gap:12px;margin-top:16px; font-size:11.5px;font-weight:600;color:var(--slate-light)} .gsi-or::before,.gsi-or::after{content:"";flex:1;height:1px;background:var(--line)} .authm-form+.gsi,.gsi+.authm-form{margin-top:0} /* ============ Seller level badge ============ */ /* Tone keyed off the level, so renaming one in the admin never restyles it. The step classes are the fallback for a rung the stylesheet has not met yet, which keeps a newly added level from rendering unstyled. */ .lvl{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; letter-spacing:.01em;border-radius:20px;padding:3px 10px 3px 8px;white-space:nowrap; border:1px solid transparent;line-height:1.5} .lvl svg{flex-shrink:0;opacity:.9} .lvl-s1,.lvl-newcomer{background:#f1f2f6;color:#5c5f6b;border-color:#e2e4ec} .lvl-s2,.lvl-rising{background:var(--green-wash);color:#0a7048;border-color:#bfe6d5} .lvl-s3,.lvl-established{background:var(--blue-wash);color:var(--blue-deep);border-color:#cfdcff} .lvl-s4,.lvl-expert{background:#f3ecfe;color:#6d28d9;border-color:#e0d2fb} /* The top rung is the only one on a dark ground, so it reads as the end of the ladder rather than just another colour. */ .lvl-s5,.lvl-signature{background:linear-gradient(135deg,#0b0b0e,#2a2250);color:#fff;border-color:#3a3266} .lvl-s5 svg,.lvl-signature svg{color:#f5a524;opacity:1} /* The seller's own standing, on their dashboard. */ .lvl-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:18px} .lvl-panel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap} .lvl-panel-l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--slate-light);margin-bottom:8px} .lvl-panel-rate{text-align:right} .lvl-panel-rate b{display:block;font-family:var(--mono);font-size:26px;font-weight:800;letter-spacing:-.02em;color:#0a7048} .lvl-panel-rate span{font-size:11.5px;color:var(--slate)} .lvl-panel-next{margin-top:16px} .lvl-bar{height:7px;border-radius:20px;background:var(--blue-tint);border:1px solid var(--line-soft);overflow:hidden} .lvl-bar span{display:block;height:100%;width:0;border-radius:20px; background:linear-gradient(90deg,var(--blue),#5b8bff);transition:width .5s ease} .lvl-panel-next p{font-size:12.5px;color:var(--slate);margin-top:9px;line-height:1.6} .lvl-panel-next b{color:var(--ink)} .lvl-panel-top-note,.lvl-panel-pinned{font-size:12.5px;color:var(--slate);margin-top:14px;line-height:1.6} @media(max-width:560px){ .lvl-panel-rate{text-align:left} .lvl-panel-rate b{font-size:22px} } /* On the item page the badge sits under the store name, where the flat "Author" line used to be. */ .pd-author-id{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start} /* ── Already owned: overview and support renewal ── */ .pd-own{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:16px} .pd-own-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)} .pd-own-tab{padding:15px 10px;border:0;border-bottom:3px solid transparent;background:none; font:inherit;font-size:13.5px;font-weight:700;color:var(--slate);cursor:pointer;margin-bottom:-1px} .pd-own-tab:hover{color:var(--ink)} .pd-own-tab.on{color:var(--blue);border-bottom-color:var(--blue)} .pd-own-sec{padding:18px} .pd-own-sec h3{font-size:13.5px;font-weight:800;margin-bottom:9px} .pd-own-sec p{font-size:13px;color:var(--slate);line-height:1.75} .pd-own-sec a{color:var(--blue);font-weight:600} .pd-own-sec a:hover{text-decoration:underline} /* The support block carries its own ground, so its state reads before the words are. Green while covered, amber once it has lapsed. */ .pd-own-support{padding:18px;background:var(--green-wash);border-top:1px solid #d6efe4} .pd-own-support.is-expired{background:#fdf6e7;border-top-color:#f2e3b4} .pd-own-support-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px} .pd-own-support-head h3{font-size:13.5px;font-weight:800} .pd-own-support-head span{font-size:12.5px;font-weight:700;color:var(--slate)} .is-expired .pd-own-support-head span{color:#8a6b06} .pd-own-support-body{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .pd-own-support-body p{font-size:12.5px;color:var(--slate);line-height:1.7;flex:1;min-width:0} .pd-own-price{flex-shrink:0;font-family:var(--mono);font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .pd-own-price .cur{font-size:13px;vertical-align:9px;font-weight:700;color:var(--slate)} .pd-own-renew{width:100%;justify-content:center;margin-top:14px} .pd-own-help{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--blue)} .pd-own-help:hover{text-decoration:underline} /* Purchase panel */ .pd-buy{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 10px 34px rgba(10,17,48,.07)} .pd-lic{display:flex;flex-direction:column} .pd-lic-row{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;cursor:pointer;margin-bottom:8px} .pd-lic-row:hover{border-color:#c2cff0} .pd-lic-row.on{border-color:var(--blue);background:var(--blue-tint)} .pd-lic-row input{position:absolute;opacity:0;pointer-events:none} .pd-lic-dot{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;background:#fff} .pd-lic-row.on .pd-lic-dot{border-color:var(--blue);border-width:5px} .pd-lic-name{flex:1;font-size:13.5px;font-weight:600} .pd-lic-price{font-family:var(--mono);font-weight:800;font-size:16px} .pd-lic-price .free{color:var(--green)} .pd-lic-grants{list-style:none;margin:0 0 10px;padding:2px 4px 8px;display:flex;flex-direction:column;gap:7px} .pd-lic-grants li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink-soft);line-height:1.45} .pd-lic-grants svg{color:var(--green);flex-shrink:0;margin-top:2px} /* Paid support extension, offered as an add-on beside the licence choice. */ .pd-ext{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px;cursor:pointer;margin-bottom:2px} .pd-ext:hover{border-color:#c2cff0} .pd-ext:has(input:checked){border-color:var(--blue);background:var(--blue-tint)} .pd-ext input{position:absolute;opacity:0;pointer-events:none} .pd-ext-box{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line);background:#fff;flex-shrink:0;margin-top:1px;position:relative} .pd-ext:has(input:checked) .pd-ext-box{background:var(--blue);border-color:var(--blue)} .pd-ext:has(input:checked) .pd-ext-box::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .pd-ext-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pd-ext-t{font-size:13px;font-weight:600;line-height:1.35} .pd-ext-s{font-size:11.5px;color:var(--slate);line-height:1.4} .pd-ext-p{font-family:var(--mono);font-weight:700;font-size:13.5px;flex-shrink:0} /* Tags in the attributes panel, each one a search */ .pd-attr.tags{align-items:flex-start} .pd-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} .pd-tags a{font-size:11.5px;font-weight:500;color:var(--blue);background:var(--blue-wash);padding:3px 9px;border-radius:20px;white-space:nowrap} .pd-tags a:hover{background:var(--blue);color:#fff} .pd-qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line-soft)} .pd-qty label{font-size:13px;font-weight:600} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-left:auto} .qty-btn{width:32px;height:34px;border:0;background:#fff;color:var(--ink-soft);font-size:16px;cursor:pointer;line-height:1} .qty-btn:hover{background:var(--blue-tint);color:var(--blue)} .qty-in{width:44px;height:34px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:inherit;font-size:14px;font-weight:700;-moz-appearance:textfield} .qty-in::-webkit-outer-spin-button,.qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .qty-in:focus{outline:none;background:var(--blue-tint)} .pd-qty-hint{font-size:11.5px;color:var(--slate-light);width:100%} .pd-total{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--slate)} .pd-total-n{font-family:var(--mono);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .pd-add{width:100%;justify-content:center;padding:13px;font-size:15px} .pd-assure{display:flex;flex-direction:column;gap:9px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line-soft)} .pd-assure div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--slate);font-weight:600} .pd-assure svg{color:var(--blue);flex-shrink:0} /* Author + attributes */ /* ── The seller card ── */ .pd-author{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px; display:flex;flex-direction:column;gap:14px} .pd-author-top{display:flex;align-items:center;gap:12px} /* Round, not a rounded square: this is a person, and every other avatar on the site that stands for a person is round too. */ .pd-author .av{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0; background:linear-gradient(135deg,var(--blue),#7aa0ff);color:#fff;display:flex; align-items:center;justify-content:center;font-weight:800;font-size:16px; box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)} .pd-author .av img{width:100%;height:100%;object-fit:cover;display:block} .pd-author-id{min-width:0;flex:1} .pd-author .vn{display:block;font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--ink); text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-author .vn:hover{color:var(--blue)} .pd-author .vl{font-size:13px;color:var(--slate);margin-top:2px} /* Follow. Outlined until you follow, filled after, so the state is legible without reading the label, which at this size there is no room for. */ .pd-follow{display:flex;align-items:center;justify-content:center;width:38px;height:38px; flex-shrink:0;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--slate); cursor:pointer;transition:border-color .14s,color .14s,background .14s} .pd-follow:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-wash)} .pd-follow .ic-on{display:none} .pd-follow.is-on{background:var(--blue);border-color:var(--blue);color:#fff} .pd-follow.is-on:hover{background:var(--blue-deep);border-color:var(--blue-deep)} .pd-follow.is-on .ic-add{display:none} .pd-follow.is-on .ic-on{display:block} .pd-follow:disabled{opacity:.55;cursor:default} .pd-portfolio{display:flex;align-items:center;justify-content:center;gap:9px;width:100%; padding:12px 16px;border:1px solid var(--line);border-radius:11px;background:#fff; font-size:14px;font-weight:700;color:var(--ink);text-decoration:none; transition:border-color .14s,color .14s,background .14s} .pd-portfolio:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)} .pd-portfolio svg{flex-shrink:0} .pd-attrs{background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 16px} .pd-attr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px} .pd-attr:last-child{border-bottom:none} .pd-attr span{color:var(--slate)} .pd-attr b{font-weight:600;color:var(--ink);text-align:right} .pd-attr a{color:var(--blue)} /* Tabs */ .pd-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;scrollbar-width:none} .pd-tabs::-webkit-scrollbar{display:none} .pd-tab{display:inline-flex;align-items:center;gap:7px;padding:12px 16px;font-size:14px;font-weight:700;color:var(--slate); background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap} .pd-tab:hover{color:var(--blue)} .pd-tab.on{color:var(--blue);border-bottom-color:var(--blue)} .pd-tab-n{font-family:var(--mono);font-size:11px;background:var(--blue-wash);color:var(--blue);padding:2px 7px;border-radius:20px} .pd-desc{color:var(--ink-soft);font-size:15px;line-height:1.75} .pd-desc p{margin-bottom:13px} .pd-desc p:last-child{margin-bottom:0} .pd-rating{display:flex;gap:26px;align-items:center;background:var(--blue-tint);border:1px solid var(--line-soft);border-radius:16px;padding:22px;flex-wrap:wrap} .pd-rating-big{text-align:center;flex-shrink:0} .pd-rating-big .rn{font-size:42px;font-weight:800;line-height:1} .pd-rating-big .rstars{color:var(--amber);font-size:15px;margin:6px 0 2px} .pd-rating-big .rc{font-size:12px;color:var(--slate)} .pd-rating-note{color:var(--slate);font-size:14px;line-height:1.6;flex:1;min-width:180px} /* Comments */ .cm-intro{font-size:14px;color:var(--slate);line-height:1.6;margin-bottom:16px} .cm-write{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:20px} .cm-write textarea{resize:vertical;min-height:76px} .cm-write-actions{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap} .btn-sm{padding:8px 15px;font-size:13px} /* Quantity in the licence dialog: it applies to whichever licence is picked, so it sits in the footer with the button rather than on one of the cards. */ .tierm-qty{display:flex;align-items:center;gap:10px;margin-right:auto} .tierm-qty label{font-size:12.5px;font-weight:600;color:var(--slate)} @media(max-width:600px){ .tierm-foot{flex-wrap:wrap;gap:10px} .tierm-qty{margin-right:0;width:100%;justify-content:space-between} .tierm-foot .btn-primary{width:100%;justify-content:center;order:3} .tierm-details{order:2} } /* Comments are a public Q&A with the author, not a flat stream, so each thread is one card and the author's answer is the thing the eye should land on. Previously threads were divided by a hairline only, replies were marked by a 2px rule that all but vanished on a phone, and .by-author was emitted by the JS with no style behind it, so the answer people came to read looked exactly like every other line. */ /* One bordered container of hairline-separated rows, not a stack of cards. Cards gave every comment its own padding, radius, shadow and gap, which is what made each one read as a big block. Flat rows put the words first. */ .cm-list{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff} .cm-thread{display:block} .cm-thread + .cm-thread{border-top:1px solid var(--line)} .cm-item{display:flex;gap:12px;padding:13px 15px;background:var(--blue-tint)} .cm-item + .cm-item{border-top:1px solid var(--line-soft)} /* Replies step in and sit on white, so the question that opened the thread is the tinted one and the answers under it read as subordinate. */ .cm-item.reply{background:#fff;padding-left:32px} /* Square, like the reference. A circle plus a pill badge plus a rounded card was three different rounded shapes competing inside 40px. */ .cm-av{width:40px;height:40px;border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:15px;background:#c9ccd6;color:#fff} .cm-av.au{background:var(--blue);color:#fff} .cm-main{flex:1;min-width:0} /* Name and badge left, time hard right, as in the reference. */ .cm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cm-name{font-weight:700;font-size:13.5px;color:var(--blue)} .cm-badge{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:2px;text-transform:uppercase; letter-spacing:.03em;line-height:1.35} .cm-badge.author{background:#8a8d99;color:#fff} .cm-badge.buyer{background:var(--ink);color:#fff} .cm-when{font-size:11.5px;color:var(--slate-light);margin-left:auto} .cm-body{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin-top:5px;white-space:pre-wrap;word-break:break-word} .cm-reply-btn{margin-top:7px;background:none;border:0;padding:0;font-size:12.5px;font-weight:600; color:var(--slate);cursor:pointer} .cm-reply-btn:hover{color:var(--blue);text-decoration:underline} .cm-reply-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .cm-reply-box{margin-top:12px} .cm-reply-box textarea{resize:vertical} /* ── Product detail: features, specs, docs, changelog ──────── Every one of these renders only when the seller filled it in, so an older item simply shows what it always showed. */ .pd-features{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px} .pd-features li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)} .pd-features li::before{content:"";position:absolute;left:4px;top:.5em;width:7px;height:7px;border-radius:50%; background:var(--blue)} /* Requirements and the file list, now in the sidebar card rather than the bottom of the description. They keep the row rhythm of the .pd-attr lines above them and open on demand, so the card gains two lines instead of two sections. */ .pd-spec-fold{border-bottom:1px solid var(--line-soft);font-size:12.5px} .pd-spec-fold:last-of-type{border-bottom:none} .pd-spec-fold > summary{display:flex;align-items:center;gap:6px;padding:11px 0; cursor:pointer;list-style:none;color:var(--slate);user-select:none} .pd-spec-fold > summary::-webkit-details-marker{display:none} /* The disclosure arrow, drawn rather than relying on the default marker so it sits on the right and turns with the state. */ .pd-spec-fold > summary::after{content:"";margin-left:auto;width:7px;height:7px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease} .pd-spec-fold[open] > summary::after{transform:rotate(225deg) translate(-1px,-1px)} .pd-spec-fold > summary:hover{color:var(--ink)} .pd-spec-fold > summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px} .pd-spec-n{font-size:11px;font-weight:700;color:var(--ink-soft);background:var(--blue-tint); border-radius:20px;padding:1px 7px} .pd-spec-fold > :not(summary){padding-bottom:12px} /* Label and value on one row, so the list reads as a spec sheet. Narrow column, so the label is capped tighter than it was in the wide one. */ .spec-dl{margin:0;display:flex;flex-direction:column;gap:7px} .spec-dl > div{display:flex;gap:10px;font-size:12px;line-height:1.45} .spec-dl dt{flex:0 0 42%;max-width:104px;font-weight:700;color:var(--ink);margin:0;word-break:break-word} .spec-dl dd{flex:1;min-width:0;margin:0;color:var(--slate);word-break:break-word;text-align:right} .spec-files{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:5px} .spec-files li{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--blue-tint); border:1px solid var(--line);border-radius:20px;padding:3px 9px} .pd-docs{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:13.5px;font-weight:700; color:var(--blue);text-decoration:none} .pd-docs:hover{text-decoration:underline} .pd-docs svg{flex-shrink:0} .chg-log{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0} .chg-log li{padding:16px 0;border-bottom:1px solid var(--line-soft)} .chg-log li:first-child{padding-top:0} .chg-log li:last-child{border-bottom:none} .chg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px} .chg-v{font-size:12.5px;font-weight:800;color:var(--blue);background:var(--blue-wash); border-radius:5px;padding:3px 9px} .chg-d{font-size:12px;color:var(--slate-light)} .chg-b{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin:0;white-space:pre-wrap;word-break:break-word} /* ── Category tree ─────────────────────────────────────────── A bordered, scrolling list with children indented under their parent, so the structure is visible while choosing. This replaced a category dropdown plus a second dropdown that only appeared once the first was answered, which hid the hierarchy entirely. */ /* Tinted rather than outlined. It sits inside a panel that is already a bordered box, so its own border drew a second rectangle 14px inside the first. The tint still marks it as a region that scrolls, without the double frame. */ .cat-tree{border:0;border-radius:10px;background:var(--blue-tint); max-height:260px;overflow-y:auto;padding:6px;scrollbar-width:thin} .cat-tree::-webkit-scrollbar{width:9px} .cat-tree::-webkit-scrollbar-thumb{background:#d3d9ea;border-radius:20px;border:2px solid var(--blue-tint)} .cat-tree-loading{font-size:12.5px;color:var(--slate-light);margin:0;padding:8px} .cat-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px; font-size:13px;color:var(--black);cursor:pointer} /* White on the tinted tree, not tint on white: the tree carries the tint now, so a tinted hover would have been the row painting itself its own background. */ .cat-row:hover{background:#fff} /* Indented, and a shade lighter, so a child reads as belonging to the row above it without needing a connector line in a list this small. */ .cat-row.is-child{padding-left:30px;font-size:12.5px;color:var(--ink-soft)} .cat-row input{width:15px;height:15px;flex-shrink:0;accent-color:var(--blue);cursor:pointer;margin:0} .cat-row:has(input:checked){background:#fff;box-shadow:inset 0 0 0 1px #c6d2ff} .cat-row:has(input:checked) span{font-weight:700;color:var(--blue)} .cat-row input:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* The package card while the item is still unsaved, and the nudge once it is saved but has no file yet. */ .pf-locked{color:var(--slate-light);line-height:1.55} .pf-missing{color:#b42318;line-height:1.55;margin-top:10px} /* ── Product form: repeating rows ────────────────────────── */ .req-list,.chg-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px} .req-row{display:flex;gap:9px;align-items:center} .req-row .auth-input:first-child{flex:0 0 34%} .req-row .auth-input:nth-child(2){flex:1;min-width:0} .chg-row{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff} .chg-row-top{display:flex;gap:9px;align-items:center;margin-bottom:9px} .chg-row-top .auth-input:first-child{flex:0 0 30%} .chg-row-top .auth-input:nth-child(2){flex:1;min-width:0} /* A plain remove control that keeps a real tap target without looking like a second action competing with Save. */ .icon-x{flex-shrink:0;width:34px;height:34px;border-radius:9px;border:1px solid var(--line); background:#fff;color:var(--slate-light);font-size:19px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s} .icon-x:hover{color:#b42318;border-color:#f3d0cc} .chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin-bottom:14px} .chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);cursor:pointer} .chk input{width:16px;height:16px;flex-shrink:0;accent-color:var(--blue);cursor:pointer} @media(max-width:600px){ /* Label over value: side by side left about eight characters for each. */ .req-row{flex-wrap:wrap} .req-row .auth-input:first-child,.req-row .auth-input:nth-child(2){flex:1 1 100%} .req-row .icon-x{margin-left:auto} .chg-row-top{flex-wrap:wrap} .chg-row-top .auth-input:first-child,.chg-row-top .auth-input:nth-child(2){flex:1 1 calc(50% - 22px)} /* Stacked on a narrow screen, so the value returns to the left edge under its label rather than staying flush right where it would look detached. */ .spec-dl > div{flex-direction:column;gap:2px} .spec-dl dt{flex:none;max-width:none} .spec-dl dd{text-align:left} } .pd-related{margin-top:56px} @media(max-width:900px){ .pd-grid{grid-template-columns:1fr;gap:24px} .pd-gallery,.pd-side,.pd-detail{grid-column:1;grid-row:auto} .pd-side{position:static} .pd-hero{padding-bottom:16px;margin-bottom:18px} .pd-media{aspect-ratio:16/10;border-radius:14px} .pd-rating{gap:18px;padding:18px} .pd-rating-big .rn{font-size:34px} } @media(max-width:520px){ .pd-meta{gap:8px 14px;font-size:12.5px} .pd-thumb{width:62px;height:44px} .pd-buy{padding:15px;border-radius:14px} .pd-tab{padding:11px 12px;font-size:13px} /* The connector shifts in with the smaller avatar rather than collapsing to an indent, so a reply still reads as a reply on the narrowest phone. */ .cm-item{gap:10px;padding:11px 12px} .cm-item.reply{padding-left:24px} .cm-av{width:34px;height:34px;font-size:13px} /* Wraps under the name rather than squeezing it, which on a narrow phone left about four characters for a username. */ .cm-when{margin-left:0;width:100%} .pd-live{bottom:12px;padding:9px 16px;font-size:12.5px} } /* ---- Vendor storefront ---- */ .vend{padding:8px 0 60px} /* ── The profile header, as one card ────────────────────────── Cover, then the identity block under it with the avatar straddling the join, then the counts as the card's own footer. One object, so "who this is" reads as one thing rather than three stacked panels. */ .vend-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden; margin:8px 0 26px;box-shadow:var(--shadow)} .vend-cover{height:190px;background:var(--blue-tint);position:relative} .vend-cover img{width:100%;height:100%;object-fit:cover;display:block} /* No cover uploaded. A flat tint reads as an image that failed, so the empty state is a deliberate pattern in the brand's own colours. */ .vend-cover-art{position:absolute;inset:0; background: radial-gradient(circle at 18% 130%,rgba(31,82,255,.30),transparent 46%), radial-gradient(circle at 82% -20%,rgba(16,185,129,.24),transparent 44%), repeating-linear-gradient(115deg,rgba(255,255,255,.5) 0 2px,transparent 2px 22px), linear-gradient(120deg,#0d1330,#1d2a63 55%,#12306b)} .vend-id{display:flex;align-items:flex-start;gap:20px;padding:0 26px 20px;position:relative} /* Pulled up over the cover, with a white ring so it reads as sitting on top of the photo rather than being cut out of it. */ .av.lg{width:112px;height:112px;border-radius:50%;overflow:hidden;flex-shrink:0;margin-top:-52px; background:linear-gradient(135deg,var(--blue),#7aa0ff);color:#fff;display:flex; align-items:center;justify-content:center;font-weight:800;font-size:36px; box-shadow:0 0 0 5px #fff,0 6px 18px rgba(10,17,48,.18)} .av.lg img{width:100%;height:100%;object-fit:cover;display:block} .vend-id-main{flex:1;min-width:0;padding-top:14px} .vend-id h1{font-size:27px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0} .vend-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:9px} .vend-lvl{font-size:13px;font-weight:700;color:var(--blue);background:var(--blue-wash); border-radius:20px;padding:4px 12px} .vend-meta{font-size:13.5px;color:var(--slate);margin:10px 0 0} .vend-bio{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:11px 0 0;max-width:70ch} .vend-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .vend-actions .btn{padding:10px 18px;font-size:14px} .vend-follow .ic-on{display:none} .vend-follow.is-on{background:var(--blue);border-color:var(--blue);color:#fff} .vend-follow.is-on:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff} .vend-follow.is-on .ic-add{display:none} .vend-follow.is-on .ic-on{display:block} .vend-score{flex-shrink:0;padding-top:16px;text-align:right} .vend-stars{display:flex;align-items:center;gap:2px;justify-content:flex-end} .vend-stars svg{color:var(--line)} .vend-stars svg.on{color:var(--amber)} .vend-stars span{font-size:13px;color:var(--slate);margin-left:7px;white-space:nowrap} .vend-stars.none{font-size:13px;color:var(--slate-light)} /* Counts, not tabs to pages that do not exist. Only the one that leads somewhere is a link, and it says so by being one. */ .vend-tabs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);background:var(--blue-tint)} .vend-tab{display:flex;align-items:baseline;gap:6px;padding:13px 22px;font-size:13.5px; color:var(--slate);text-decoration:none;border-right:1px solid var(--line)} .vend-tab b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} /* Items and Sales are buttons now, since they switch a pane rather than navigate. A button brings its own background, border and font, so those are reset back to the shared tab look. */ button.vend-tab{background:none;border:0;border-right:1px solid var(--line);font:inherit;font-size:13.5px;cursor:pointer;color:var(--slate)} button.vend-tab:hover{background:#fff;color:var(--blue)} button.vend-tab:hover b{color:var(--blue)} .vend-tab.is-on{background:#fff} button.vend-tab.is-on b{color:var(--blue)} /* The sold count under a card in the Sales view. Sits with the card rather than inside it, so the card partial stays the one shared thing it is. */ .vend-sold-wrap{display:flex;flex-direction:column;gap:8px} .vend-sold{display:flex;align-items:baseline;justify-content:center;gap:5px;padding:7px 10px; border:1px solid var(--line);border-radius:10px;background:var(--blue-tint)} .vend-sold b{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} .vend-sold span{font-size:12px;color:var(--slate)} /* ── Body: portfolio beside a rail ── */ .vend-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start} .vend-main{min-width:0} .vend-side{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:14px} .vend-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px} .vend-box h2{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0 0 13px} .vend-box-note{font-size:11.5px;line-height:1.6;color:var(--slate-light);margin:13px 0 0} .vend-feat{display:flex;flex-direction:column} .vend-feat-row{display:flex;align-items:center;gap:11px;padding:9px 0;text-decoration:none; border-bottom:1px solid var(--line-soft)} .vend-feat-row:last-child{border-bottom:0;padding-bottom:0} .vend-feat-th{width:46px;height:34px;border-radius:7px;overflow:hidden;flex-shrink:0; background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center} .vend-feat-th img{width:100%;height:100%;object-fit:cover;display:block} .vend-feat-t{min-width:0;display:flex;flex-direction:column;gap:2px} .vend-feat-t .n{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vend-feat-row:hover .n{color:var(--blue)} .vend-feat-t .p{font-size:12px;font-weight:700;color:var(--slate)} .vend-ask{text-align:center} .vend-ask p{font-size:13px;line-height:1.6;color:var(--slate);margin:0 0 14px} .vend-ask .btn{width:100%;justify-content:center} /* Store settings: where Contact author points. */ .set-contact{margin-top:6px;padding-top:20px;border-top:1px solid var(--line-soft)} .set-contact-head strong{display:block;font-size:14px;color:var(--ink);margin-bottom:5px} .set-contact-head p{font-size:12.5px;line-height:1.6;color:var(--slate);margin:0 0 16px} /* The channel picker sits beside its value, and stacks on a narrow screen. */ .set-contact-row{display:grid;grid-template-columns:170px 1fr;gap:14px 16px;align-items:start} @media (max-width:640px){.set-contact-row{grid-template-columns:1fr}} @media(max-width:980px){ .vend-body{grid-template-columns:1fr} .vend-side{position:static} } @media(max-width:760px){ /* The avatar stops straddling the cover and the header stacks: at this width a 112px circle beside the name leaves the name nowhere to go. */ .vend-cover{height:130px} .vend-id{flex-direction:column;align-items:flex-start;gap:0;padding:0 18px 18px} .av.lg{width:82px;height:82px;font-size:28px;margin-top:-38px} .vend-id-main{padding-top:12px;width:100%} .vend-id h1{font-size:22px} .vend-score{padding-top:12px;text-align:left;width:100%} .vend-stars{justify-content:flex-start;margin-top:10px} .vend-actions .btn{flex:1 1 auto;justify-content:center} .vend-tab{padding:11px 15px;font-size:12.5px} .vend-tab b{font-size:14.5px} } @media(max-width:520px){ /* Edge to edge, the same as the cart and the checkout. A cover photo is the one thing on this site that most wants the full width, and 24px of page padding either side of it on a 360px phone is 13% of the screen spent on nothing. The card squares off against the glass; the parts that are text keep their own inset so nothing touches the edge. */ .vend{padding-top:0} .vend .wrap{padding-left:0;padding-right:0} .vend-card{border-radius:0;border-left:0;border-right:0;margin-top:0;box-shadow:none} .vend-cover{height:104px} .av.lg{width:70px;height:70px;font-size:24px;margin-top:-32px;box-shadow:0 0 0 4px #fff,0 6px 18px rgba(10,17,48,.18)} .vend-id{padding:0 14px 15px} .vend-id h1{font-size:20px} .vend-bio{font-size:13.5px} .vend-tab{flex:1 1 auto;justify-content:center;padding:10px 8px;border-right:0; border-top:1px solid var(--line)} /* The grid and the rail are content, not chrome, so they keep a gutter. */ .vend-main,.vend-side{padding:0 14px} .vend-box{padding:15px;border-radius:12px} } /* ---- 404 ---- */ .nf{padding:80px 0} .nf-inner{text-align:center;max-width:460px;margin:0 auto} .nf-code{font-family:var(--mono);font-size:64px;font-weight:800;color:var(--blue);letter-spacing:-.02em} .nf-inner h1{font-size:26px;font-weight:800;margin:6px 0 10px} .nf-inner p{color:var(--slate);margin-bottom:24px} .nf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* The removed-item page. A mark instead of the big 404 numeral: this visitor followed a real link to a real item, so shouting an error code at them is the wrong tone. */ .nf-mark{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;background:var(--blue-tint);border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center} .nf-inner .nf-sub{font-size:13.5px;line-height:1.65;padding:11px 14px;border-radius:11px;background:var(--blue-tint);border:1px solid var(--line);margin-bottom:24px} /* ---- Sell ---- */ /* ═══════════════════════════════════════════════════════════ BECOME A SELLER (/domzivo/become-a-seller) ═══════════════════════════════════════════════════════════ */ /* One dark section at the top and light everything after it. The hero is the only place the page raises its voice, and what it raises it about is a number, so the number gets its own panel rather than a sentence. */ /* Straight down, and starting on pure black. The navbar above is var(--black), so an angled gradient met it with a seam: black on the left of the join, navy on the right. Beginning at #000 and turning blue on the way down means the header and the hero are one surface with no edge between them. */ .sl-hero{background:linear-gradient(180deg,#000 0%,#05070f 9%,#0c1638 46%,#12276f 100%); color:#fff;padding:64px 0 70px;position:relative;overflow:hidden} /* A faint grid, angled, so the panel has something to sit against without a photograph that has to load and can look broken while it does. */ .sl-hero::before{content:"";position:absolute;inset:-40% -10% auto;height:180%; background:repeating-linear-gradient(64deg,rgba(255,255,255,.045) 0 1px,transparent 1px 46px); pointer-events:none} .sl-hero>.wrap{position:relative} .sl-hero-in{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:center} .sl-hero-copy{min-width:0} .sl-hero .hero-badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16); color:#fff;box-shadow:none} .sl-hero .hero-badge .bic{background:rgba(143,176,255,.16);color:#a9c2ff} .sl-hero h1{font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:18px 0 16px} .sl-hero .hl{color:#8fb0ff} .sl-hero .dot{color:#4a7bff} .sl-hero-copy>p{color:rgba(255,255,255,.7);font-size:16.5px;line-height:1.65;max-width:56ch;margin:0} .sl-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px} .sl-cta .btn{padding:13px 26px;font-size:15px} .sl-btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#fff} .sl-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff} .sl-assure{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:26px 0 0;padding:0} .sl-assure li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:rgba(255,255,255,.62)} .sl-assure svg{color:#3ddc9a;flex-shrink:0} /* The rate panel. Its own object, not a paragraph: a seller scanning this page is looking for one number and this is where it lives. */ .sl-rate{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13); border-radius:18px;padding:26px 24px;backdrop-filter:blur(2px)} .sl-rate-n{font-size:26px;font-weight:800;color:#8fb0ff;line-height:1;letter-spacing:-.03em} .sl-rate-n span{font-size:66px;letter-spacing:-.05em;color:#fff} .sl-rate-l{font-size:14px;color:rgba(255,255,255,.72);margin:10px 0 0;line-height:1.5} .sl-rate-rule{height:1px;background:rgba(255,255,255,.14);margin:18px 0} .sl-rate-s{font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.55);margin:0} .sl-rate-s b{color:#fff;font-weight:700} .sl-rate-stats{display:flex;gap:26px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)} .sl-rate-stats b{display:block;font-size:21px;font-weight:800;color:#fff;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .sl-rate-stats span{font-size:11.5px;color:rgba(255,255,255,.5)} /* ── Sections ── */ .sl-sec{padding:60px 0} .sl-head{max-width:62ch;margin:0 0 30px} .sl-head h2{font-size:29px;font-weight:800;letter-spacing:-.028em;line-height:1.2;margin:0 0 10px} .sl-head p{font-size:15.5px;line-height:1.65;color:var(--slate);margin:0} .sl-head a{color:var(--blue);font-weight:600} .sl-head a:hover{text-decoration:underline} /* ── The calculator ── */ .sl-calc{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden; box-shadow:var(--shadow)} .sl-calc-top{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;padding:20px 24px; background:var(--blue-tint);border-bottom:1px solid var(--line)} .sl-calc-top label{font-size:13px;font-weight:700;color:var(--ink)} .sl-price-in{display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--line); border-radius:11px;padding:0 14px;transition:border-color .13s,box-shadow .13s} .sl-price-in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,82,255,.1)} .sl-price-in span{font-size:17px;font-weight:700;color:var(--slate-light)} .sl-price-in input{width:92px;border:0;background:none;outline:none;padding:11px 0; font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink)} /* The spinners are 20px of chrome that nobody uses and that changes the value by one when a seller means to change it by fifty. */ .sl-price-in input::-webkit-outer-spin-button, .sl-price-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .sl-price-in input[type=number]{-moz-appearance:textfield} .sl-presets{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .sl-preset{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--slate); background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer; transition:border-color .13s,color .13s,background .13s} .sl-preset:hover{border-color:var(--blue);color:var(--blue)} .sl-preset.is-on{background:var(--blue);border-color:var(--blue);color:#fff} .sl-ladder{list-style:none;margin:0;padding:0} .sl-rung{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(90px,1fr) 82px 96px; align-items:center;gap:20px;padding:16px 24px;border-bottom:1px solid var(--line-soft)} .sl-rung:last-child{border-bottom:0} .sl-rung.is-top{background:linear-gradient(90deg,var(--blue-wash),transparent 70%)} .sl-rung-id{display:flex;align-items:center;gap:12px;min-width:0} .sl-rung-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0; background:var(--line);box-shadow:0 0 0 3px var(--line-soft)} .sl-rung.is-start .sl-rung-dot{background:var(--slate-light);box-shadow:0 0 0 3px #e9ebf2} .sl-rung.is-top .sl-rung-dot{background:var(--blue);box-shadow:0 0 0 3px #ccd8ff} .sl-rung-id b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3} .sl-rung-id em{display:block;font-style:normal;font-size:12px;color:var(--slate-light);margin-top:2px} .sl-rung-bar{height:7px;border-radius:20px;background:var(--line-soft);overflow:hidden} .sl-rung-bar span{display:block;height:100%;border-radius:20px; background:linear-gradient(90deg,#7aa0ff,var(--blue))} .sl-rung.is-top .sl-rung-bar span{background:linear-gradient(90deg,var(--blue),var(--blue-deep))} .sl-rung-keep,.sl-rung-take{text-align:right} .sl-rung-keep b,.sl-rung-take b{display:block;font-size:16px;font-weight:800;color:var(--ink); letter-spacing:-.02em;font-variant-numeric:tabular-nums} .sl-rung-take b{color:var(--green);font-family:var(--mono);font-size:17px} .sl-rung-keep em,.sl-rung-take em{display:block;font-style:normal;font-size:11px; color:var(--slate-light);margin-top:1px} .sl-calc-note{font-size:12.5px;line-height:1.65;color:var(--slate-light);margin:0; padding:15px 24px;border-top:1px solid var(--line);background:var(--blue-tint)} .sl-calc-note a{color:var(--blue);font-weight:600} .sl-calc-note a:hover{text-decoration:underline} /* ── What is handled ── */ .sl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .sl-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px} .sl-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px; border-radius:12px;background:var(--blue-wash);color:var(--blue);margin-bottom:14px} .sl-ic svg{width:20px;height:20px} .sl-card h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 7px} .sl-card p{font-size:13.5px;line-height:1.65;color:var(--slate);margin:0} /* ── Steps ── */ /* A rule runs behind the numbers, so four cards read as a sequence rather than as four unrelated boxes that happen to be numbered. */ .sl-steps{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative} .sl-steps::before{content:"";position:absolute;top:19px;left:9%;right:9%;height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px)} .sl-steps li{position:relative} .sl-step-n{display:flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:50%;background:var(--blue);color:#fff;font-family:var(--mono);font-size:14px; font-weight:700;margin-bottom:15px;box-shadow:0 0 0 5px #fff} .sl-steps h3{font-size:15.5px;font-weight:700;margin:0 0 7px} .sl-steps p{font-size:13.5px;line-height:1.65;color:var(--slate);margin:0} /* ── Categories ── */ .sl-cats{display:flex;flex-wrap:wrap;gap:9px} .sl-cat{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line); border-radius:11px;padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--ink); text-decoration:none;transition:border-color .13s,color .13s} .sl-cat:hover{border-color:var(--blue);color:var(--blue)} .sl-cat svg{color:var(--slate-light);flex-shrink:0} .sl-cat:hover svg{color:var(--blue)} .sl-cat span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Payouts ── */ .sl-payouts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center} .sl-pay-copy h2{font-size:29px;font-weight:800;letter-spacing:-.028em;margin:0 0 12px} .sl-pay-copy p{font-size:15.5px;line-height:1.7;color:var(--slate);margin:0 0 16px;max-width:52ch} .sl-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700; color:var(--blue);text-decoration:none} .sl-link:hover{text-decoration:underline} .sl-link svg{transition:transform .16s} .sl-link:hover svg{transform:translateX(3px)} .sl-pay-list{display:flex;flex-direction:column;gap:11px} .sl-pay{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line); border-radius:13px;padding:16px 18px} .sl-pay-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px; flex-shrink:0;border-radius:12px;background:var(--blue-tint);color:var(--blue)} .sl-pay-ic svg{width:20px;height:20px} /* Scoped to the text block, not to every span in the row. `.sl-pay span` also matched .sl-pay-ic, which is a span, and at higher specificity than the class itself, so it replaced the icon box's display:flex with display:block. The centring was being switched off by a rule meant for the caption underneath. */ .sl-pay>div b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)} .sl-pay>div span{display:block;font-size:12.5px;color:var(--slate);margin-top:2px} /* ── FAQ ── */ /* The answers keep their reading measure and the scene takes the space that measure leaves over, rather than the list being stretched to a width nobody can comfortably read. */ .sl-faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:50px;align-items:center} .sl-faq-art{display:flex;justify-content:center} .sl-faq-art img{width:100%;max-width:280px;height:auto;display:block} .sl-faq{display:flex;flex-direction:column;gap:10px;min-width:0} .sl-faq details{background:#fff;border:1px solid var(--line);border-radius:13px} .sl-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 20px;cursor:pointer;list-style:none;font-size:15px;font-weight:700;color:var(--ink)} .sl-faq summary::-webkit-details-marker{display:none} .sl-faq summary:hover{color:var(--blue)} /* Two rules crossed, and the vertical one rotates away on open: a plus turning into a minus, drawn rather than swapped for a second icon. */ .sl-faq-x{position:relative;width:13px;height:13px;flex-shrink:0} .sl-faq-x::before,.sl-faq-x::after{content:"";position:absolute;background:var(--slate-light); border-radius:2px;transition:transform .2s,background .13s} .sl-faq-x::before{top:5.5px;left:0;width:13px;height:2px} .sl-faq-x::after{left:5.5px;top:0;width:2px;height:13px} .sl-faq details[open] .sl-faq-x::after{transform:rotate(90deg)} .sl-faq summary:hover .sl-faq-x::before,.sl-faq summary:hover .sl-faq-x::after{background:var(--blue)} .sl-faq p{font-size:14px;line-height:1.7;color:var(--slate);margin:0;padding:0 20px 18px} /* ── The ask ── */ @media(prefers-reduced-motion:reduce){ .sl-faq-x::before,.sl-faq-x::after,.sl-link svg{transition:none} } @media(max-width:1000px){ /* Below the two-column hero the scene has nothing to sit beside, and a decorative illustration is not worth the width on a narrow screen. */ .sl-faq-wrap{grid-template-columns:1fr;gap:0} .sl-faq-art{display:none} .sl-hero-in{grid-template-columns:1fr;gap:34px} .sl-rate{max-width:460px} .sl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sl-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px} .sl-steps::before{display:none} .sl-payouts{grid-template-columns:1fr;gap:28px} } @media(max-width:700px){ .sl-hero{padding:40px 0 46px} .sl-hero h1{font-size:32px} .sl-hero-copy>p{font-size:15px} .sl-rate{padding:20px 18px} .sl-rate-n span{font-size:54px} /* One straight line at every phone width. Set to never wrap, and sized so the three of them plus their ticks come in under the narrowest screen we support rather than folding the last one onto its own line. */ .sl-assure{flex-wrap:nowrap;justify-content:space-between;gap:6px;margin-top:20px} .sl-assure li{gap:3px;font-size:10px;white-space:nowrap} .sl-assure svg{width:11px;height:11px} .sl-sec{padding:40px 0} .sl-head{margin-bottom:22px} .sl-head h2,.sl-pay-copy h2{font-size:23px} .sl-head p{font-size:14.5px} .sl-grid{grid-template-columns:1fr} .sl-steps{grid-template-columns:1fr;gap:22px} /* Three per line at any phone width. A grid, not wrapping flex: flex packs by content width, so "HTML" and "AI Tools" would sit four to a row while "JavaScript" dropped alone onto the next one. Equal columns give three, always, and the label clips rather than pushing the row apart. */ .sl-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .sl-cat{justify-content:center;gap:4px;padding:9px 5px;font-size:10.5px;border-radius:9px} .sl-cat svg{width:13px;height:13px} .sl-cta .btn{flex:1 1 auto;justify-content:center} /* The calculator stops being a table. Four columns of numbers on a phone is four columns of nothing legible, so each rung becomes its own small block: name on top, then the two figures side by side under it. */ .sl-calc-top{padding:16px;gap:12px} .sl-presets{margin-left:0;width:100%} .sl-preset{flex:1 1 auto;text-align:center} .sl-rung{grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 16px} .sl-rung-id{grid-column:1 / -1} .sl-rung-bar{grid-column:1 / -1;order:3} .sl-rung-keep,.sl-rung-take{text-align:left;order:2} .sl-rung-take{text-align:right} .sl-calc-note{padding:14px 16px} } /* ============ Toasts ============ */ /* Stack up from the bottom right and slide in from off-screen. The stack itself ignores pointer events so it never blocks the page; each toast turns them back on for its own links and close button. */ .toast-stack{position:fixed;right:0;bottom:0;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:10px; padding:0 max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 18px;pointer-events:none;max-width:100%} .toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;width:340px;max-width:calc(100vw - 36px); background:#fff;color:var(--ink);padding:14px 14px 14px 16px;border-radius:14px; box-shadow:0 16px 44px rgba(10,17,48,.16);border:1px solid var(--line); transform:translateX(calc(100% + 24px));opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .24s} .toast.on{transform:translateX(0);opacity:1} .toast-ic{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px} .t-success .toast-ic{background:var(--green-wash);color:#0a7a56} .t-info .toast-ic{background:var(--blue-wash);color:var(--blue)} .t-error .toast-ic{background:#fdeaea;color:#c8352f} .toast-body{flex:1;min-width:0} .toast-title{font-weight:700;font-size:14px;line-height:1.3} .toast-msg{font-size:12.5px;color:var(--slate);margin-top:3px;line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .toast-action{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--blue)} .toast-action:hover{color:var(--blue-deep);text-decoration:underline} .toast-x{width:28px;height:28px;flex-shrink:0;border:0;background:none;color:var(--slate-light);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center} .toast-x:hover{background:var(--blue-tint);color:var(--ink)} @media(max-width:480px){ .toast-stack{left:0;align-items:stretch;padding-left:12px;padding-right:12px} .toast{width:auto;max-width:none} } @media(prefers-reduced-motion:reduce){.toast{transition:opacity .2s;transform:none}} /* ============ Auth pages ============ */ .auth-body{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh} .auth-aside{position:relative;background:linear-gradient(155deg,#000,#0d1b52 55%,#12206b);color:#fff;overflow:hidden;display:flex;align-items:center} .auth-aside .hero-net{position:absolute;inset:0;width:100%;height:100%;opacity:.5} .auth-aside-in{position:relative;z-index:2;padding:56px;max-width:520px} .auth-aside-in h2{font-size:36px;font-weight:800;letter-spacing:-.03em;margin:26px 0 14px;line-height:1.15} .auth-aside-in p{color:rgba(255,255,255,.68);font-size:15.5px;line-height:1.65} .auth-aside-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} .auth-aside-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.8)} .auth-aside-list svg{color:#6ee7b7;flex-shrink:0} .auth-aside-foot{position:absolute;left:56px;bottom:26px;font-size:12px;color:rgba(255,255,255,.4)} /* Code grid backdrop: ruled lines with SDK snippets drifting up behind them. */ .codegrid{position:absolute;inset:0;overflow:hidden;z-index:0} .cg-rule{position:absolute;inset:-1px; background-image:linear-gradient(rgba(120,160,255,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(120,160,255,.09) 1px,transparent 1px); background-size:44px 44px} .cg-stream{position:absolute;left:0;right:0;top:0;padding:26px 30px;font-family:var(--mono);font-size:12px;line-height:2.05; color:rgba(160,190,255,.30);white-space:pre;animation:cgdrift 46s linear infinite;will-change:transform} .cg-line{display:flex;gap:14px} .cg-num{color:rgba(140,170,255,.18);width:16px;text-align:right;flex-shrink:0} .cg-stream code{font-family:inherit} @keyframes cgdrift{from{transform:translateY(0)}to{transform:translateY(-50%)}} .cg-fade{position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,.15) 0%,rgba(4,8,30,.82) 55%,rgba(6,14,54,.94) 100%)} .cg-glow{position:absolute;width:70%;aspect-ratio:1;left:-10%;bottom:-25%;border-radius:50%; background:radial-gradient(circle,rgba(47,92,255,.40),transparent 62%);filter:blur(20px)} @media(prefers-reduced-motion:reduce){.cg-stream{animation:none}} .auth-logo{display:inline-flex;align-items:center;font-weight:800;font-size:24px;letter-spacing:-.02em} .auth-logo .logo-text{display:none} .auth-logo.logo-fallback .auth-logo-img{display:none} .auth-logo.logo-fallback .logo-text{display:inline-block} .auth-logo .a{color:#fff} .auth-logo .b{color:#6f97ff} .auth-logo-img{height:46px;width:auto;aspect-ratio:977/160;display:block;object-fit:contain} .auth-logo.sm{margin-bottom:26px} .auth-logo.sm .auth-logo-img{height:34px} .auth-logo.sm .a{color:var(--ink)} .auth-logo.sm .b{color:var(--blue)} .auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#fff} .auth-card{width:100%;max-width:400px} .auth-head h1{font-size:27px;font-weight:800;letter-spacing:-.02em} .auth-head p{color:var(--slate);font-size:14.5px;margin-top:7px} .auth-info{margin-top:20px;padding:12px 14px;border-radius:11px;background:var(--blue-tint);border:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.55} .auth-form{display:flex;flex-direction:column;gap:15px;margin-top:22px} .auth-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px} .auth-field{display:flex;flex-direction:column;gap:7px} .auth-label{font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:.02em} .auth-label-row{display:flex;align-items:center;justify-content:space-between} .auth-inwrap{position:relative} .auth-input{width:100%;font:inherit;font-size:14.5px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s} .auth-input::placeholder{color:#a9adbb} .auth-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,82,255,.1)} .auth-inwrap .auth-input{padding-right:46px} .auth-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--slate-light);cursor:pointer;background:none;border:none} .auth-eye:hover{color:var(--blue);background:var(--blue-tint)} .auth-otp{text-align:center;font-family:var(--mono);font-size:20px;letter-spacing:.4em} .auth-hint{font-size:11.5px;color:var(--slate-light);line-height:1.5} .auth-btn{width:100%;justify-content:center;padding:14px;font-size:14.5px;margin-top:4px} .auth-btn:disabled{opacity:.6;cursor:not-allowed} .auth-error{padding:11px 14px;border-radius:11px;background:#fdeaea;border:1px solid #f6c9c9;color:#b3261e;font-size:13px;line-height:1.5} .auth-ok{padding:11px 14px;border-radius:11px;background:var(--green-wash);border:1px solid #b8ead6;color:#0a7a56;font-size:13px;line-height:1.5} .auth-note{color:var(--slate);font-size:13.5px;text-align:center} /* Neutral sibling of .auth-error and .auth-ok, for context rather than an outcome: used where a screen has to explain itself before you act, such as the password reset that happens on Domzivo rather than here. */ .auth-callout{padding:11px 14px;border-radius:11px;background:var(--blue-tint);border:1px solid var(--line);margin-bottom:16px} .auth-callout p{margin:0;color:var(--slate);font-size:13px;line-height:1.55} .auth-link{color:var(--blue);font-weight:600;font-size:13.5px;background:none;border:none;cursor:pointer;padding:0} .auth-link:hover{text-decoration:underline} .auth-link.sm{font-size:12px} .auth-alt{margin-top:22px;text-align:center;font-size:13.5px;color:var(--slate)} @media(max-width:900px){.auth-body{grid-template-columns:1fr}.auth-aside{display:none}} /* ============ Account menu in the navbar ============ */ .nav-auth{display:inline-flex;align-items:center;gap:9px} .acct{position:relative} .acct-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:5px 11px 5px 5px;color:#fff;cursor:pointer} .acct-btn:hover{background:rgba(255,255,255,.14)} .acct-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#7aa0ff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;flex-shrink:0} /* An uploaded picture fills the badge and keeps its circle. The image is rounded to match rather than relying on overflow, since these badges are flex containers with no clipping. object-fit stops a non-square photo from stretching. The store settings badge has its own .set-avatar img rule. */ .acct-avatar img,.dash-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} .acct-menu{position:absolute;top:calc(100% + 12px);right:0;width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s,transform .14s,visibility .14s;z-index:120} .acct-menu.on{opacity:1;visibility:visible;transform:translateY(0)} .acct-head{padding:11px 12px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:6px} .acct-name{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acct-email{font-size:11.5px;color:var(--slate-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .acct-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-soft)} .acct-item:hover{background:var(--blue-tint);color:var(--blue)} .acct-item.danger{color:#c8352f} .acct-item.danger:hover{background:#fdeaea;color:#b3261e} .m-user{display:flex;align-items:center;gap:11px;padding:12px;background:var(--blue-tint);border-radius:12px;margin-bottom:12px} .m-user-t{min-width:0} /* ============ Cart + checkout ============ */ .cart-page{padding:8px 0 64px} /* ── Cart ──────────────────────────────────────────────────── One list of lines with a bar on top, and a summary beside it that stays put while the list scrolls. */ .cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start} .cart-main{min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} /* The bar belongs to the list, so the two whole-cart actions sit on the thing they act on rather than floating above the page. */ .cart-bar{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 14px;background:var(--ink)} .cart-bar-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px; font:600 12.5px var(--sans);color:#fff;background:rgba(255,255,255,.12);border:0;cursor:pointer; transition:background .15s} .cart-bar-btn:hover{background:rgba(255,255,255,.2);color:#fff} .cart-bar-btn.danger:hover{background:#c8352f} .cart-lines{display:flex;flex-direction:column} .cl + .cl{border-top:1px solid var(--line)} .cl-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto auto 34px;gap:14px; align-items:start;padding:16px} .cl-thumb{width:88px;height:66px;border-radius:8px;overflow:hidden;background:var(--blue-tint); color:var(--blue);display:flex;align-items:center;justify-content:center} .cl-thumb img{width:100%;height:100%;object-fit:cover;display:block} .cl-main{min-width:0} .cl-name{display:block;font-weight:700;font-size:14.5px;line-height:1.4;color:var(--blue); overflow-wrap:anywhere} .cl-name:hover{text-decoration:underline} .cl-by{font-size:12px;color:var(--slate-light);margin-top:3px} .cl-terms{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:9px;font-size:12.5px;color:var(--slate)} .cl-terms b{color:var(--ink);font-weight:700} .cl-tag{font-size:11px;font-weight:700;color:#0a7a56;background:var(--green-wash); border-radius:20px;padding:1px 9px} .cl-qty{display:flex;flex-direction:column;align-items:center;gap:5px} .cl-qty-l{font-size:11.5px;color:var(--slate-light);font-weight:600} .cl-qty .qty-in{width:58px;height:32px;text-align:center;font-family:var(--mono);font-size:13px; border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)} .cl-qty .qty-in:focus{outline:none;border-color:var(--blue)} .cl-each{font-size:11px;color:var(--slate-light);font-family:var(--mono)} .cl-price{font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink); min-width:82px;text-align:right;line-height:1} /* The sign rides above the digits, so the number itself is what the eye lands on. */ .cl-price sup{font-size:14px;font-weight:700;vertical-align:super;margin-right:1px} .cl-price .free{color:var(--green);font-size:17px} .cl-x{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center; color:var(--slate-light);background:none;border:0;cursor:pointer} .cl-x:hover{color:#c8352f;background:#fdeaea} /* The support add-on, attached under the line it belongs to. */ .cl-ext{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 16px 16px; padding:11px 14px;background:var(--blue-tint);border:1px solid var(--line);border-radius:10px; font-size:12.5px;color:var(--ink-soft);cursor:pointer} .cl-ext input{width:15px;height:15px;flex-shrink:0;accent-color:var(--blue);cursor:pointer;margin:0} .cl-ext b{font-weight:700;color:var(--ink)} .cl-ext-learn{margin-left:auto;font-size:12px;font-weight:600;color:var(--blue);white-space:nowrap} .cl-ext-learn:hover{text-decoration:underline} /* ── Summary ── */ .cart-summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px; position:sticky;top:calc(var(--nav-h) + 16px);text-align:center} .cart-summary h2{font-size:15px;font-weight:700;color:var(--slate);margin-bottom:8px} .cart-total{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1} .cart-total sup{font-size:20px;font-weight:700;vertical-align:super;margin-right:2px} .cart-total-note{font-size:12.5px;color:var(--slate-light);margin:8px 0 0} /* Green, and only here: it is the one button on the page that takes money. */ .cart-checkout{width:100%;justify-content:center;margin-top:18px;background:var(--green);color:#fff; border-color:var(--green);font-size:15px;padding:13px 20px} .cart-checkout:hover{background:#0fa06f;border-color:#0fa06f;color:#fff} .cart-tax{font-size:12px;line-height:1.6;color:var(--slate-light);margin:12px 0 0} .cart-tax a{color:var(--slate);text-decoration:underline;text-underline-offset:2px} /* One line, pushed to the two edges: Secure checkout left, Instant delivery right. Stacked they read as a list of two, which is more weight than a pair of reassurances deserves under the button. */ .cart-assure{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft);text-align:left} .cart-assure div{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--slate); font-weight:600;white-space:nowrap;min-width:0} .cart-assure svg{color:var(--blue);flex-shrink:0} @media(max-width:960px){ .cart-grid{grid-template-columns:1fr} .cart-summary{position:static} } @media(max-width:620px){ /* Flex, not grid. As a grid the price was placed in column 3, which is the 34px remove-button column, so it was squeezed to nothing and never showed. Then two rows, not one. Sharing a single line, the stepper and the price took most of the width and left the title in a column barely wider than a phone number, wrapping it after every second word. The ::after is a zero-height full-width flex item ordered between the two groups, which forces the wrap: thumb, title and the X on top, quantity and price below. The title now gets the whole card, so it runs straight and the seller and licence lines under it stretch instead of folding. */ .cl-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:11px 12px} .cl-row::after{content:'';flex-basis:100%;height:0;order:1} .cl-thumb{order:0;width:58px;height:44px;border-radius:6px;flex-shrink:0} .cl-main{order:0;flex:1 1 0;min-width:0} .cl-x{order:0;width:28px;height:28px;border-radius:7px;flex-shrink:0;margin-left:auto} .cl-qty{order:2;flex:0 0 auto;flex-direction:row;align-items:center;gap:8px} .cl-price{order:3;margin-left:auto;text-align:right;font-size:18px;min-width:0} .cl-price sup{font-size:11px} .cl-price .free{font-size:14px} /* One straight line, cut with an ellipsis. A title long enough to wrap is long enough that its first line already says which item this is, and the full text is one tap away on the item page. */ .cl-name{font-size:13.5px;line-height:1.35;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;overflow-wrap:normal} .cl-by{font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cl-terms{gap:2px 12px;margin-top:5px;font-size:11.5px} .cl-terms span{white-space:nowrap} .cl-qty-l{font-size:11px} .cl-qty .qty-in{width:48px;height:28px;font-size:12.5px} .cl-each{font-size:10.5px} .cl-ext{margin:0 12px 11px;padding:8px 10px;font-size:11.5px;gap:8px;border-radius:8px} .cl-ext-learn{margin-left:0;flex:1 1 100%;font-size:11.5px} .cart-total{font-size:32px} .cart-bar{padding:9px 11px} .cart-bar-btn{padding:6px 11px;font-size:12px} /* Stretched left and right: 24px of page padding each side on a 360px phone is 13% of the screen given to nothing, and the card corners are squared off against the edge so the list uses the full width. */ .cart-page .wrap{padding-left:0;padding-right:0} .cart-main{border-radius:0;border-left:0;border-right:0} .cart-grid{gap:12px} .cart-summary{padding:16px;border-radius:0;border-left:0;border-right:0} .cart-page .crumbs{padding-left:12px;padding-right:12px} .cart-page .empty{margin-left:12px;margin-right:12px} } @media(max-width:900px){.cart-grid{grid-template-columns:1fr}.cart-summary{position:static;order:2}} /* ============ Checkout ============ */ /* Stacked cards down the left, a summary that follows the scroll on the right. Billing sits first because it is the one thing here the buyer may have to leave and fix, and finding that out after picking a card is a worse order to find it out in. */ .co-page{padding:26px 0 66px} .co-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start} .co-col{display:flex;flex-direction:column;gap:16px;min-width:0} .co-col>.auth-error{margin:0} .co-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .co-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 20px;border-bottom:1px solid var(--line)} .co-card-head h2{font-size:17px;font-weight:800;letter-spacing:-.01em} .co-edit{font-size:12.5px;font-weight:700;color:var(--ink-soft);background:var(--line-soft); border:1px solid var(--line);border-radius:8px;padding:5px 13px;flex-shrink:0} .co-edit:hover{background:var(--blue-wash);border-color:#c9d2ea;color:var(--blue)} .co-card-body{padding:18px 20px} .co-note{color:var(--slate);font-size:14px;line-height:1.65} /* ── Billing ── */ .co-bill{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.6;color:var(--ink-soft)} .co-bill b{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px} .co-bill-ph{font-family:var(--mono);font-size:13px;color:var(--slate);margin-top:4px} .co-bill-note{margin-top:13px;font-size:12px;color:var(--slate-light);line-height:1.6} .co-bill-none b{display:block} .co-bill-none span{display:block;font-size:13.5px;color:var(--slate)} .co-bill-none p{margin-top:9px;font-size:13px;color:var(--slate);line-height:1.6} .co-bill-none a{color:var(--blue);font-weight:600} .co-bill-none a:hover{text-decoration:underline} /* Opens with the shape of an address in it rather than a blank card, which reads as a page that failed rather than one that is still loading. */ .co-bill-skel{display:flex;flex-direction:column;gap:8px} .co-bill-skel span{height:12px;border-radius:5px; background:linear-gradient(90deg,var(--line-soft),#e9eaf0,var(--line-soft)); background-size:200% 100%;animation:coskel 1.1s linear infinite} .co-bill-skel span:nth-child(1){width:42%} .co-bill-skel span:nth-child(2){width:64%} .co-bill-skel span:nth-child(3){width:30%} @keyframes coskel{to{background-position:-200% 0}} /* ── Payment method: tabs pick, one panel explains ── */ .co-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .co-tabs::-webkit-scrollbar{display:none} .co-tab{display:flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap; padding:13px 17px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--slate); background:none;border:0;border-bottom:3px solid transparent;cursor:pointer; transition:color .12s,border-color .12s} .co-tab:hover{color:var(--ink)} .co-tab.is-on{color:var(--blue);border-bottom-color:var(--blue)} .co-tab svg{flex-shrink:0} .co-panels{padding:28px 20px 24px} .co-panel{display:none} .co-panel.is-on{display:block} .co-brand{text-align:center;margin-bottom:16px} .co-brand-mark{font-size:23px;font-weight:800;letter-spacing:-.035em;color:var(--ink)} .co-brand-mark b{color:var(--blue);font-weight:800} .co-panel-lead{max-width:520px;margin:0 auto;text-align:center;font-size:14px;line-height:1.65; color:var(--slate)} .co-accepts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:18px} .co-accepts-l{font-size:12.5px;color:var(--slate);margin-right:3px} .pay-logo{display:inline-flex;align-items:center;justify-content:center;height:27px;padding:0 10px; background:#fff;border:1px solid var(--line);border-radius:5px;font-size:10.5px;font-weight:800; color:var(--slate);letter-spacing:.02em} .pay-logo.visa{color:#1a1f71;font-size:12.5px;font-style:italic;letter-spacing:-.03em} .pay-logo.mc{padding:0 12px} .pay-logo.mc i{width:15px;height:15px;border-radius:50%;background:#eb001b} .pay-logo.mc i+i{background:#f79e1b;margin-left:-6px;mix-blend-mode:multiply} .pay-logo.verve{color:#0a8f45;font-size:12px;letter-spacing:-.01em} .pay-logo.coin{font-family:var(--mono);font-size:11px;color:var(--ink)} /* Not brands, just what else the gateway will take, so they read as words. */ .pay-logo.bank,.pay-logo.ussd,.pay-logo.momo{font-weight:600;font-size:11.5px;letter-spacing:0} .pay-logo.more{border:0;background:none;color:var(--slate-light);font-weight:600;font-size:11.5px;padding:0 2px} .co-balance{margin:18px auto 0;max-width:520px;text-align:center;padding:11px 15px;border-radius:10px; background:var(--blue-tint);border:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-soft)} .co-balance b{font-weight:800;color:var(--ink)} .co-balance.ok{background:var(--green-wash);border-color:#c6ecdc;color:#0a6b4b} .co-balance.ok b{color:#0a6b4b} .co-balance.short{background:#fdeaea;border-color:#f6cfcf;color:#a12b26} .co-balance.short b{color:#a12b26} .co-balance a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px} .co-fx{max-width:520px;margin:14px auto 0;text-align:center;font-size:12px;line-height:1.6;color:var(--slate-light)} /* ── Your order ── */ .co-order{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .co-order>summary{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 20px;cursor:pointer;list-style:none} .co-order>summary::-webkit-details-marker{display:none} .co-order>summary:hover .co-order-t{color:var(--blue-deep)} .co-order-t{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;color:var(--blue)} .co-chev{flex-shrink:0;transition:transform .18s} .co-order[open] .co-chev{transform:rotate(90deg)} .co-order-total{font-size:17px;font-weight:800;color:var(--ink)} .co-lines{padding:0 20px;border-top:1px solid var(--line)} .co-line{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 0; border-bottom:1px solid var(--line-soft)} .co-line-m{min-width:0} .col-name{font-weight:600;font-size:14px;line-height:1.45} .col-q{font-family:var(--mono);font-size:12px;color:var(--blue);background:var(--blue-wash); padding:1px 7px;border-radius:20px;margin-left:5px} .col-meta{font-size:12px;color:var(--slate);margin-top:3px} .col-price{font-weight:700;font-size:14.5px;white-space:nowrap} .co-foot{padding:2px 20px 16px} .co-foot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0; font-size:13.5px;color:var(--slate)} .co-foot-row.total{border-top:1px solid var(--line);margin-top:3px;padding-top:13px; font-size:16px;font-weight:800;color:var(--ink)} /* The fee is genuinely zero, which is worth a line rather than a silence: every marketplace the buyer has used before adds one here. */ .co-info{display:inline-flex;align-items:center;vertical-align:-2px;margin-left:3px;padding:0; color:var(--blue);background:none;border:0;cursor:pointer} .co-info:hover{color:var(--blue-deep)} /* The tip hangs off the ROW, not off the icon. Anchored to the icon it was a fixed-width box centred on a 13px target sitting near one edge of the screen, so on a phone half of it was outside the viewport and cut off. Pinned to the row's own left and right edges it can never be wider than the space it has. */ .co-foot-row,.co-sum-row{position:relative} .co-info::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:0;right:0; max-width:330px;padding:9px 12px;border-radius:9px;background:var(--ink);color:#fff; font-size:11.5px;font-weight:500;line-height:1.55;text-align:left; opacity:0;visibility:hidden;transition:opacity .14s;z-index:6;pointer-events:none; box-shadow:0 6px 20px rgba(10,17,48,.22)} .co-info:hover::after,.co-info:focus-visible::after,.co-info.is-open::after{opacity:1;visibility:visible} /* A tap is the only way in on a phone, where there is no hover to give. */ @media(hover:none){.co-info:hover::after{opacity:0;visibility:hidden} .co-info.is-open::after{opacity:1;visibility:visible}} /* ── Summary rail ── */ .co-side{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:12px;min-width:0} .co-sum{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px} .co-sum h2{font-size:17px;font-weight:800;letter-spacing:-.01em;padding-bottom:13px; border-bottom:1px solid var(--line)} .co-sum-lines{display:flex;flex-direction:column} .co-sum-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0; border-bottom:1px solid var(--line-soft);font-size:13.5px} /* One line each, clipped. A summary that wraps is not a summary. */ .co-sum-n{min-width:0;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .co-sum-n b{font-family:var(--mono);font-size:11.5px;color:var(--blue)} .co-sum-p{flex-shrink:0;font-weight:700} .co-sum-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0; font-size:13.5px;color:var(--slate);border-bottom:1px solid var(--line)} .co-sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px; font-size:17px;font-weight:800} .co-sum-amt{font-size:22px;font-weight:800;letter-spacing:-.025em} .co-sum-note{margin-top:6px;font-size:12px;color:var(--slate-light)} /* Green, and only here: it is the one button on the page that takes money. */ .co-pay-btn{width:100%;justify-content:center;margin-top:16px;background:var(--green);color:#fff; border-color:var(--green);font-size:15px;padding:13px 20px} .co-pay-btn:hover{background:#0fa06f;border-color:#0fa06f;color:#fff} .co-pay-btn:disabled{opacity:.65;cursor:default} .co-back{display:block;text-align:center;margin-top:11px;font-size:13px;color:var(--slate); text-decoration:underline;text-underline-offset:2px} .co-back:hover{color:var(--ink)} .co-assure{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px; font-size:12.5px;color:var(--slate)} .co-assure span{display:flex;align-items:center;gap:6px} .co-assure svg{color:var(--green);flex-shrink:0} .co-tax{padding:0 4px;font-size:12px;line-height:1.6;color:var(--slate-light)} .co-tax a{color:var(--slate);text-decoration:underline;text-underline-offset:2px} @media(max-width:900px){ .co-grid{grid-template-columns:1fr} .co-side{position:static} } @media(max-width:620px){ /* Edge to edge, the same as the cart: 24px of page padding each side on a 360px phone is 13% of the screen given to nothing. */ .co-page{padding:14px 0 44px} .co-page .wrap{padding-left:0;padding-right:0} .co-page .crumbs{padding-left:12px;padding-right:12px} .co-page .empty{margin-left:12px;margin-right:12px} .co-card,.co-order,.co-sum{border-radius:0;border-left:0;border-right:0} .co-grid,.co-col{gap:12px} .co-card-head{padding:13px 14px} .co-card-head h2{font-size:15.5px} .co-card-body{padding:14px} .co-tab{padding:11px 13px;font-size:12.5px;gap:6px} .co-panels{padding:20px 14px 18px} .co-brand-mark{font-size:19px} .co-panel-lead{font-size:13px} .co-balance,.co-fx{font-size:12px} .co-order>summary{padding:13px 14px} .co-order-t,.co-order-total{font-size:15px} .co-lines{padding:0 14px} .co-foot{padding:2px 14px 13px} .co-sum{padding:16px 14px} .co-sum-amt{font-size:20px} .co-assure,.co-tax{padding-left:14px;padding-right:14px} .co-assure{font-size:12px} } /* ============ Payment verify ============ */ .verify-page{padding:70px 0} .vf-card{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px 34px;text-align:center;box-shadow:var(--shadow-lg)} .vf-state h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px} .vf-state p{color:var(--slate);font-size:14.5px;line-height:1.65;max-width:400px;margin:0 auto} .vf-spin{width:46px;height:46px;border-radius:50%;border:3px solid var(--blue-wash);border-top-color:var(--blue);margin:0 auto 22px;animation:vfspin .8s linear infinite} @keyframes vfspin{to{transform:rotate(360deg)}} .vf-ic{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px} .vf-ic.ok{background:var(--green-wash);color:var(--green)} .vf-ic.wait{background:#fff5e5;color:var(--amber)} .vf-ic.bad{background:#fdeaea;color:#c8352f} .vf-actions{display:flex;gap:11px;justify-content:center;margin-top:24px;flex-wrap:wrap} .vf-ref{margin-top:26px;font-size:11.5px;color:var(--slate-light)} @media(prefers-reduced-motion:reduce){.vf-spin{animation-duration:2.4s}} /* ============ Account pages ============ */ .acct-page{padding:8px 0 64px} /* The tabs never compress. Flex items shrink by default, so on a phone "My licenses" and "My orders" were squeezed until the label wrapped under its own icon. They now hold their size and the row scrolls sideways instead, so every tab stays on one line at any width. */ .acct-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:26px; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .acct-tabs::-webkit-scrollbar{display:none} .acct-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:700; color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px; flex-shrink:0;white-space:nowrap} .acct-tab svg{flex-shrink:0} .acct-tab:hover{color:var(--blue)} .acct-tab.on{color:var(--blue);border-bottom-color:var(--blue)} /* Tighter on a phone so all three usually fit without needing the scroll. */ @media(max-width:520px){ .acct-tabs{gap:2px} .acct-tab{padding:11px 10px;font-size:13px;gap:6px} } .acct-loading{display:flex;flex-direction:column;gap:12px} .sk-row{height:104px;border-radius:14px;background:linear-gradient(90deg,#f2f4f8 25%,#e9ecf3 37%,#f2f4f8 63%);background-size:400% 100%;animation:sk 1.3s ease infinite} @keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}} @media(prefers-reduced-motion:reduce){.sk-row{animation:none}} /* Placeholder for a figure that has not arrived. Replaces a literal "-", which did not read as loading: it read as "the value is nothing", so the number appearing a moment later looked like a correction. */ .sk-num{display:inline-block;width:2.2em;height:.72em;border-radius:4px;vertical-align:baseline; background:linear-gradient(90deg,#f2f4f8 25%,#e9ecf3 37%,#f2f4f8 63%);background-size:400% 100%; animation:sk 1.3s ease infinite} @media(prefers-reduced-motion:reduce){.sk-num{animation:none}} .lic-list,.ord-list{display:flex;flex-direction:column;gap:12px} .lic-card,.ord-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px} /* A licence: thumbnail, what it is, and what you can do with it, in one row. Desktop and tablet read left to right; phones stack, further down. */ .lic-card{display:flex;align-items:flex-start;gap:16px;padding:16px} .lic-thumb{width:92px;height:69px;flex-shrink:0;border-radius:9px;overflow:hidden; background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center} .lic-thumb img{width:100%;height:100%;object-fit:cover;display:block} .lic-id{flex:1;min-width:0} .lic-name-row{display:flex;align-items:flex-start;gap:9px} .lic-name{font-weight:700;font-size:15px;letter-spacing:-.012em;color:var(--ink); text-decoration:none;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} a.lic-name:hover{color:var(--blue)} .lic-meta{font-size:12px;color:var(--slate);margin-top:4px;text-transform:capitalize;line-height:1.5} /* Support has a state, so it says so in colour rather than making the reader parse "until" against "ended". */ .lic-sup{font-weight:600;color:#0a7a56} .lic-sup.is-over{color:var(--slate-light);font-weight:500} /* The domains a licence is installed on. A domain is not prose, so it opts out of the capitalize the surrounding meta line applies and keeps its own case. */ .lic-installs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;text-transform:none} .lic-installs svg{flex-shrink:0;color:var(--slate-light)} .lic-domain-n{font-family:var(--mono);font-size:11.5px;color:var(--ink);word-break:break-all} .lic-env{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--slate);background:var(--blue-tint);border-radius:20px;padding:1px 6px} /* Seller side: the same information as a block, since a seller is auditing rather than glancing and may be looking at several domains at once. */ .lic-domains{margin-top:8px;display:flex;flex-direction:column;gap:5px} .lic-domains.empty{font-size:11.5px;color:var(--slate-light);font-style:italic;margin-top:7px} .lic-domain{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:12px} .lic-domain svg{flex-shrink:0;color:var(--slate-light)} .lic-domain.off{opacity:.55} .lic-domain.off .lic-domain-n{text-decoration:line-through} .lic-domain-t{color:var(--slate-light);font-size:11px;margin-left:auto;white-space:nowrap} .lic-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px; text-transform:capitalize;flex-shrink:0;white-space:nowrap} .lic-badge.s-active,.lic-badge.s-completed,.lic-badge.s-published,.lic-badge.s-approved,.lic-badge.s-paid,.lic-badge.s-visible{background:var(--green-wash);color:#0a7a56} .lic-badge.s-pending,.lic-badge.s-pending_review{background:#fff5e5;color:#a26a05} .lic-badge.s-draft{background:#f1f3f8;color:var(--slate)} .lic-badge.s-suspended,.lic-badge.s-failed,.lic-badge.s-revoked,.lic-badge.s-refunded,.lic-badge.s-cancelled,.lic-badge.s-rejected,.lic-badge.s-removed{background:#fdeaea;color:#b3261e} /* ── Actions ── */ .lic-side{display:flex;align-items:flex-start;gap:8px;flex-shrink:0} .lic-side .btn{padding:10px 16px;font-size:13.5px} .lic-ask{white-space:nowrap} .lic-ask:disabled{opacity:.5;cursor:not-allowed} /* One button, one menu: getting the file and getting the code are the same errand, and they were competing for room as two controls plus a strip. */ .lic-dl{position:relative} .lic-dl-btn{gap:6px} .lic-caret{transition:transform .16s;margin-left:-1px} .lic-dl-btn[aria-expanded="true"] .lic-caret{transform:rotate(180deg)} .lic-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:236px; background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px; box-shadow:0 12px 32px rgba(10,17,48,.16)} .lic-menu-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left; font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);background:none;border:0; padding:9px 10px;border-radius:8px;cursor:pointer} .lic-menu-i svg{width:16px;height:16px;flex-shrink:0;color:var(--slate-light)} .lic-menu-i:hover{background:var(--blue-tint);color:var(--blue)} .lic-menu-i:hover svg{color:var(--blue)} .lic-menu-i.is-off{color:var(--slate-light);cursor:default} .lic-menu-i.is-off:hover{background:none;color:var(--slate-light)} .lic-menu-code{display:flex;align-items:center;gap:8px;margin-top:5px;padding:8px 10px; border-top:1px solid var(--line-soft)} .lic-menu-code code{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;font-weight:700; color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Masked, the dots are spacing rather than characters to read. */ .lic-menu-code code.is-masked{color:var(--slate-light);letter-spacing:.14em} .lic-eye{flex-shrink:0;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--blue); background:none;border:0;padding:4px 7px;cursor:pointer;border-radius:6px} .lic-eye:hover{background:var(--blue-wash)} .lic-eye:focus-visible{outline:2px solid var(--blue);outline-offset:1px} /* Tablet: the row holds, but the buttons stack so a long title keeps its width. */ @media(max-width:900px){ .lic-side{flex-direction:column;align-items:stretch} .lic-side .btn{justify-content:center} .lic-menu{min-width:214px} } /* Phone: stacked. A three-part row inside 312px gives the title about 90px, and at that width every real item name is four lines of two words. */ @media(max-width:700px){ .lic-card{flex-wrap:wrap;gap:12px;padding:14px} .lic-thumb{width:64px;height:48px} .lic-id{flex:1 1 0} .lic-name{font-size:13.5px} .lic-meta{font-size:11.5px} .lic-side{flex:1 1 100%;flex-direction:row;align-items:stretch;gap:8px} .lic-dl{flex:1} .lic-dl-btn{width:100%;justify-content:center} .lic-ask{flex:1;justify-content:center} .lic-side .btn{padding:10px 12px;font-size:12.5px} /* Anchored to the left edge of the card rather than the button, so a menu under a half-width button still has room for its longest label. */ .lic-menu{left:0;right:auto;min-width:0;width:calc(200% + 8px)} } /* Tighter than a licence card. An order is a receipt: a number, a date, a line per item and a total. It was carrying the padding and type size of something you read, when it is something you glance at to check a figure. Roughly a quarter of the height has come out without changing what is on it. */ .ord-card{padding:14px 16px} .ord-list{gap:10px} .ord-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding-bottom:10px;border-bottom:1px solid var(--line-soft)} .ord-num{font-weight:800;font-size:13px} .ord-date{font-size:11.5px;color:var(--slate);margin-top:2px} .ord-items{padding:2px 0} .ord-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0; font-size:12.5px;color:var(--ink-soft)} .ord-tier{font-size:10.5px;color:var(--slate);text-transform:capitalize;background:var(--blue-wash); padding:1px 6px;border-radius:20px;margin-left:5px} .ord-foot{display:flex;align-items:center;justify-content:space-between;padding-top:9px; border-top:1px solid var(--line-soft);font-size:13px;font-weight:700} .ord-total{font-size:14.5px;font-weight:800} @media(max-width:700px){ .ord-card{padding:12px 13px} .ord-item{font-size:12px;padding:5px 0} } /* ============ Product reviews ============ */ .rv-bars{display:flex;flex-direction:column;gap:5px;margin-bottom:10px} .rv-bar-row{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--slate)} .rv-bar-l{width:9px;font-weight:700;color:var(--ink-soft)} .rv-bar{flex:1;height:7px;background:#e8ebf2;border-radius:20px;overflow:hidden} .rv-bar-fill{display:block;height:100%;background:var(--amber);border-radius:20px} .rv-bar-n{width:26px;text-align:right;font-family:var(--mono)} .rv-verified-note{font-size:12.5px;color:var(--slate-light)} .rv-write{margin-top:22px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px} .rv-write h3{font-size:16px;font-weight:800;margin-bottom:6px} .rv-stars-pick{display:flex;align-items:center;gap:4px;margin:16px 0 12px;flex-wrap:wrap} .rv-star{font-size:27px;line-height:1;color:#d8dbe4;background:none;border:none;cursor:pointer;padding:0 2px;transition:color .1s} .rv-star.on{color:var(--amber)} .rv-pick-label{margin-left:10px;font-size:13px;font-weight:600;color:var(--slate)} .rv-write textarea{resize:vertical;min-height:96px} .rv-write-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .rv-signin{margin-top:20px;padding:14px 16px;background:var(--blue-tint);border:1px solid var(--line);border-radius:12px;font-size:13.5px;color:var(--slate)} .rv-empty{margin-top:20px;padding:26px;text-align:center;font-size:13.5px;color:var(--slate);background:var(--blue-tint);border-radius:14px} .rv-list{display:flex;flex-direction:column;gap:2px;margin-top:22px} .rv-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-soft)} .rv-item:last-child{border-bottom:none} .rv-av{width:38px;height:38px;border-radius:50%;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0} .rv-main{flex:1;min-width:0} .rv-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .rv-name{font-weight:700;font-size:14px} .rv-badge{font-size:10.5px;font-weight:700;color:#0a7a56;background:var(--green-wash);padding:2px 8px;border-radius:20px} .rv-date{font-size:12px;color:var(--slate-light);margin-left:auto} .rv-rating{margin-top:5px;font-size:13px} .rv-body{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-soft);white-space:pre-wrap} @media(max-width:520px){.rv-date{margin-left:0;width:100%}} /* ============ Seller dashboard ============ */ .dash-body{display:flex;min-height:100vh;background:var(--blue-tint)} /* 208 rather than 250. The longest label here is "Store settings", about 88px at this size, so 250 was carrying roughly 60px of empty gutter down the whole height of the page and taking it straight off the content beside it. */ .dash-side{width:208px;flex-shrink:0;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:16px 11px;position:sticky;top:0;height:100vh;overflow-y:auto} .dash-side-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 15px} .dash-side-head .logo-img{height:28px} /* Fallback text, if the image ever fails to load on this dark ground. */ .dash-side-head .logo-text .a{color:#fff} .dash-side-head .logo-text .b{color:#6f97ff} .dash-side-close{display:none;color:rgba(255,255,255,.6)} .dash-store{display:flex;align-items:center;gap:9px;padding:10px;background:rgba(255,255,255,.06);border-radius:11px;margin-bottom:15px} .dash-store-av{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#7aa0ff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;overflow:hidden} /* Rounded to 10px rather than a circle, matching the badge it sits in. */ .dash-store-av img{width:100%;height:100%;object-fit:cover;display:block} .dash-store-t{min-width:0} .dash-store-n{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dash-store-s{font-size:11px;color:#7ef0c0;text-transform:capitalize;margin-top:1px} .dash-nav-label{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:0 8px 7px} .dash-nav{display:flex;flex-direction:column;gap:2px;flex:1} .dash-link{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;font-size:13px;font-weight:600;color:rgba(255,255,255,.62);white-space:nowrap} .dash-link svg{flex-shrink:0;opacity:.8} .dash-link:hover{background:rgba(255,255,255,.07);color:#fff} .dash-link.on{background:var(--blue);color:#fff} .dash-link.on svg{opacity:1} .dash-link.danger{color:#ff9ba0} .dash-link.danger:hover{background:rgba(229,72,77,.14);color:#ff8b8f} .dash-side-foot{display:flex;flex-direction:column;gap:2px;padding-top:14px;margin-top:10px;border-top:1px solid rgba(255,255,255,.08)} .dash-main{flex:1;min-width:0;display:flex;flex-direction:column} /* Kept compact: this bar is sticky, so every pixel here is taken away from the content for the whole scroll, not just at the top. */ .dash-top{display:flex;align-items:center;gap:16px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .dash-burger{display:none;background:var(--blue-tint);color:var(--ink)} .dash-title{flex:1;min-width:0} .dash-title h1{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25} .dash-title p{font-size:12.5px;color:var(--slate);margin-top:2px;line-height:1.35} .dash-top-actions{display:flex;align-items:center;gap:10px} /* padding:0 matters: this is a