tag instead - CSS stays locked by default. */ html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;overscroll-behavior-y:none} body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#07080C;color:#E2E8F0;overflow-x:clip;line-height:1.6;max-width:100vw} a{color:inherit;text-decoration:none} ::selection{background:rgba(245,158,11,0.3);color:#fff} /* Keyboard focus - amber ring, invisible to mouse users */ :focus-visible{outline:2px solid rgba(251,191,36,0.7);outline-offset:2px} /* Touch: freeze only the MOTION of the seller headline sweep - the gradient and its glow bloom stay exactly as designed (a static filter costs nothing; the 60fps repaint+filter of the moving sweep was a top heat source at the bottom) */ @media (hover:none){ .seller-inner h2 .glow-text{animation:none} } /* Below-fold sections render only when approaching the viewport - big mobile scroll/heat win, pixel-identical visuals (offscreen animations don't paint). .seller REMOVED from the list (2026-08-03, Alex's "scroll past the site" bug): its 520px placeholder vs the real vh-clamped scene height made the document end JUMP when the finale rendered at the very bottom - lazy-rendering the section that DEFINES the page end (inside the sticky curtain) is a footgun. */ .latest-guides,.why{content-visibility:auto} .latest-guides{contain-intrinsic-size:auto 560px} .why{contain-intrinsic-size:auto 640px} /* Living CTA glow - one breathing value drives every hover bloom */ @property --bloom{syntax:'';inherits:false;initial-value:0} @keyframes ctaBreath{0%,100%{--bloom:0}50%{--bloom:1}} /* Data discipline - numbers never jitter as they tick */ .bid-amt,.t-num,.t-n,.hd-num,.wn-val,.a-metric-val,.fb-amount,.time-val{font-variant-numeric:tabular-nums} h1,h2,h3,.hero h1,.sec-head h2,.sold-title,.ticker-title,.why h2,.seller-left h2{font-family:'Sora',sans-serif} /* ============ MESH GRADIENT BACKGROUND ============ */ .cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict; background: /* LANTERN TEST (2026-08-03): the source moves from the ceiling to the stage-edge lamp under the How-it-works cue - ceiling layers fall to a faint ambience, an under-glow rises from the viewport bottom, and the vertical ramp flips (light now lives BELOW, dark above). */ radial-gradient(ellipse 120% 92% at 50% 28%,transparent 64%,rgba(0,0,0,0.30) 100%), radial-gradient(ellipse 50% 44% at 50% -8%,rgba(251,191,36,0.055),transparent 62%), radial-gradient(ellipse 94% 68% at 50% -12%,rgba(222,228,240,0.05),transparent 68%), radial-gradient(ellipse 58% 46% at 50% 102%,rgba(251,191,36,0.12),transparent 66%), radial-gradient(ellipse 44% 34% at 88% 110%,rgba(13,148,136,0.06),transparent 70%), linear-gradient(180deg,#08090F 0%,#0B0C12 50%,#0F1119 100%); } .mesh-blob{display:none} /* Scene lighting: light is directed, not carried. Scenes below get their own fixed stage lights (VIP lot, trading floor, finale) - no cursor lantern. */ /* micro-dust canvas removed 2026-08-03 - battery cost, no visible payoff */ /* ?iosfx=clip test rules: root clip off (suspected iOS viewport collapser); the wide marquee layers get clipped at their own sections instead */ html.iosfx-clip,html.iosfx-clip body{overflow-x:visible!important} html.iosfx-clip .ticker-section,html.iosfx-clip .live-ticker,html.iosfx-clip .trust-ticker,html.iosfx-clip .lg-scroll-wrap{overflow-x:clip} /* Film grain in the light - true noise texture (feTurbulence) jittering like film stock; exists only inside the house-beam mask */ .lgrain{ position:absolute;left:0;right:0;bottom:0;height:78vh;pointer-events:none;contain:paint; /* gold tint baked into the noise via feColorMatrix (== sepia .55 saturate 1.5 brightness 1.05) - computed once on the 160px tile, zero per-frame filter cost */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.897 0.297 0.098 0 0 0.150 0.933 0.079 0 0 0.084 0.094 0.756 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:screen;opacity:0.17; -webkit-mask-image:radial-gradient(ellipse 62% 72% at 50% 110%,#000,transparent 72%); mask-image:radial-gradient(ellipse 62% 72% at 50% 110%,#000,transparent 72%); animation:grainJitter 0.9s steps(1) infinite; } @keyframes grainJitter{ 0%{background-position:0 0} 12.5%{background-position:-24px 18px} 25%{background-position:14px -30px} 37.5%{background-position:-32px -8px} 50%{background-position:26px 22px} 62.5%{background-position:-10px 32px} 75%{background-position:30px -14px} 87.5%{background-position:-20px -26px} 100%{background-position:0 0} } .lgrain.p2,.lgrain.p3,.lgrain.p4{display:none} /* desktop uses one jittering layer */ /* Mobile: flip-book grain - 4 pre-rasterized phase layers cycled by opacity. Same texture, same 8.9/s rhythm, same blend - but ZERO re-rasterization (the background-position jitter repaint was the power-save stutter source) */ @media (hover:none){ .lgrain{opacity:0.18;animation:none} .lgrain.p2,.lgrain.p3,.lgrain.p4{display:block} .lgrain.p1{animation:gfA .45s steps(1) infinite} .lgrain.p2{background-position:-24px 18px;animation:gfB .45s steps(1) infinite} .lgrain.p3{background-position:14px -30px;animation:gfC .45s steps(1) infinite} .lgrain.p4{background-position:26px 22px;animation:gfD .45s steps(1) infinite} .scene-grain{animation-duration:1.35s} /* while the finger scrolls, micro-motion sleeps - scroll stays pure compositor (h1 gradient dropped from the list: перелив v2 is opacity-only/composited, costs nothing during scroll) */ html.is-scrolling .lgrain, html.is-scrolling .hl-grain, html.is-scrolling .scene-grain, html.is-scrolling .hero-featured::before, html.is-scrolling .hero-featured::after, /* testimonial marquee sleeps while the finger scrolls; the live bar keeps running - per-scroll A/B (2026-07-20) to see if its pause was the win */ html.is-scrolling .ticker-track{animation-play-state:paused} } @keyframes gfA{0%,24.99%{opacity:.18}25%,100%{opacity:0}} @keyframes gfB{0%,24.99%{opacity:0}25%,49.99%{opacity:.18}50%,100%{opacity:0}} @keyframes gfC{0%,49.99%{opacity:0}50%,74.99%{opacity:.18}75%,100%{opacity:0}} @keyframes gfD{0%,74.99%{opacity:0}75%,99.99%{opacity:.18}100%{opacity:0}} /* ===== Micro-motion sleeps during scroll — DESKTOP + mobile (2026-08-29) ===== The mobile-only version above kept scroll on the pure compositor by pausing grain/sweeps while the finger moved. On desktop nothing paused, so on a Mac (Retina = 4x paint area, ProMotion = tight frame budget) every always-on decoration — grain background-position jitter, the in-hero title sweep, the seller gradient-text, the hot-badge box-shadow pulse, CTA shimmer, marquees — kept repainting IN LOCKSTEP with the scroll-driven hero→floor curtain, and they fought over the same frames = the stutter Alex sees. While the wheel/ trackpad is moving (html.is-scrolling, cleared ~180ms after it stops) these sleep so the scroll + curtain own the whole budget. Invisible at rest and during the gesture (the eye tracks the scroll, not the micro-motion). The curtain's OWN scroll-driven animations (.floor-curtain/.floor-cover/ .hem-glow and the .auctions crtSettle) are deliberately NOT listed — they ARE the scroll and must keep running. */ html.is-scrolling .lgrain, html.is-scrolling .hl-grain, html.is-scrolling .scene-grain, html.is-scrolling .hero h1 .line-2, /* mobile base-gradient pan (re-raster) - must sleep in scroll */ html.is-scrolling .hero h1 .line-2::before, html.is-scrolling .hero h1 .line-2::after, html.is-scrolling .seller-inner h2 .glow-text, html.is-scrolling .hero-featured::before, html.is-scrolling .hero-featured::after, html.is-scrolling .featured-hot-badge, html.is-scrolling .featured-hot-badge .dot, html.is-scrolling .shimmer, html.is-scrolling .ticker-track{animation-play-state:paused} /* .live-ticker-track deliberately NOT in the scroll-pause list (Alex 2026-09-02: the running line must keep moving while scrolling). It is a transform-only marquee = compositor-cheap; its freeze read as a glitch, not a perf win. */ @media (prefers-reduced-motion:reduce){.lgrain{display:none}} /* ===== Safari perf gates (html.ua-safari set in ) - cursor rings + grain jitter are the two WebKit CPU hogs; grain texture stays as a static layer, hover face-light (.a-card:hover::before) still works without JS ===== */ html.ua-safari .a-card::after, html.ua-safari .featured-card::after, html.ua-safari .spot-card::after{display:none} /* Safari grain (desktop + iOS): don't freeze it — run the opacity-only flip-book instead of the grainJitter background-position repaint. That repaint is the WebKit CPU hog the gate existed for; the flip-book (4 pre-rasterized phase layers cross- faded by opacity) is pure compositor, zero re-raster — the exact touch-safe pattern mobile and the burger menu (.eb-mw-grain, nav.css) already run. So grain animates EVERYWHERE (Chrome desktop keeps its richer grainJitter below) with no WebKit cost. (2026-09-19, Alex: grain must always animate on mobile AND desktop, never frozen.) */ html.ua-safari .lgrain{opacity:0.18;animation:none} html.ua-safari .lgrain.p2,html.ua-safari .lgrain.p3,html.ua-safari .lgrain.p4{display:block} html.ua-safari .lgrain.p1{animation:gfA .45s steps(1) infinite} html.ua-safari .lgrain.p2{background-position:-24px 18px;animation:gfB .45s steps(1) infinite} html.ua-safari .lgrain.p3{background-position:14px -30px;animation:gfC .45s steps(1) infinite} html.ua-safari .lgrain.p4{background-position:26px 22px;animation:gfD .45s steps(1) infinite} /* .scene-grain has no flip-book variant (single grainJitter layer, large blended VIP light) and is frozen on ALL phones anyway — leave it static under Safari. */ html.ua-safari .scene-grain{animation:none} /* ===== Perf diagnostic kill-switches (?perf=...) ===== */ html.perf-off-ticker .ticker-track, html.perf-off-ticker .live-ticker-track{animation:none!important;will-change:auto!important} html.perf-off-curtain .curtain-under{position:static!important} html.perf-off-curtain .curtain-top::after{display:none!important} html.perf-off-rings .a-card::after, html.perf-off-rings .featured-card::after, html.perf-off-rings .spot-card::after, html.perf-off-rings .a-card::before{display:none!important} html.perf-off-grain .lgrain, html.perf-off-grain .scene-grain, html.perf-off-grain .dust{display:none!important} /* shimmer: the always-on CTA sheen - second remaining animation in the seller zone */ html.perf-off-shimmer .shimmer{display:none!important} /* guides: the whole strip off - covers its scroll-snap container too (native Mac trackpad capture) */ html.perf-off-guides .latest-guides{display:none!important} /* cv: content-visibility churn test - why/seller are exactly the reported lag zone */ html.perf-off-cv .latest-guides, html.perf-off-cv .ticker-section, html.perf-off-cv .why, html.perf-off-cv .seller{content-visibility:visible!important} /* nuke split into orthogonal axes - the culprit is provably inside their union (nuke fixes the iMac lag) */ html.perf-off-wc *{will-change:auto!important} html.perf-off-anim *,html.perf-off-anim *::before,html.perf-off-anim *::after{animation:none!important} html.perf-off-bf *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html.perf-off-filter *,html.perf-off-filter *::before,html.perf-off-filter *::after{filter:none!important} html.perf-off-blend *,html.perf-off-blend *::before,html.perf-off-blend *::after{mix-blend-mode:normal!important} /* nuke: kill EVERY animation/transition/filter/blend on the page - if still laggy, it's not the render effects at all */ html.perf-off-nuke *,html.perf-off-nuke *::before,html.perf-off-nuke *::after{ animation:none!important;transition:none!important; mix-blend-mode:normal!important;filter:none!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; will-change:auto!important; } @media (prefers-reduced-motion:reduce){.dust{display:none}.scene-grain{display:none}.hero-featured::before,.hero-featured::after{animation:none}.cta-primary:hover,.cs-buy:hover,.sell-btn-wrap:hover .sell-btn,.place-bid:hover,.featured-place-bid:hover{animation:none}} .mesh-1{width:800px;height:800px;background:radial-gradient(circle,rgba(245,158,11,0.15),transparent 70%);top:-15%;right:-5%;transform:translate(40px,-25px)} .mesh-2{width:600px;height:600px;background:radial-gradient(circle,rgba(13,148,136,0.12),transparent 70%);bottom:-10%;left:-5%;transform:translate(-30px,20px)} .mesh-3{width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,0.08),transparent 70%);top:40%;left:30%;transform:translate(30px,25px)} .mesh-4{width:350px;height:350px;background:radial-gradient(circle,rgba(13,148,136,0.1),transparent 70%);top:15%;left:60%;transform:translate(-20px,15px)} .grid-lines{display:none} .diag-pattern{display:none} .grain{display:none} /* ============ SCROLL ANIMATIONS ============ */ .reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);will-change:opacity,transform} /* Once revealed the element is static forever - drop the compositor hint so we don't keep 20+ permanent GPU layers alive. Cumulative composited-layer memory was the fingered culprit for the desktop-Mac/iMac scroll stalls (see perf-off-wc / perf-off-nuke diagnostics). The entrance still composites: the opacity+transform transition auto-promotes for its 0.8s and releases after. */ .reveal.visible{opacity:1;transform:translateY(0);will-change:auto} .reveal-d1{transition-delay:0.12s}.reveal-d2{transition-delay:0.24s}.reveal-d3{transition-delay:0.36s} .reveal-d4{transition-delay:0.48s}.reveal-d5{transition-delay:0.6s} /* Hide featured card content until loaded to prevent flash of placeholder */ .featured-card .featured-body { visibility: hidden; } .featured-card .featured-img img { visibility: hidden; } .featured-card.loaded .featured-body { visibility: visible; } .featured-card.loaded .featured-img img { visibility: visible; } /* SKELETON for featured-card while loading - soft golden pulse matching brand. Hides the hardcoded placeholder badge/timer while not loaded so the card reads cleanly as "loading", not "half-broken". */ .featured-card:not(.loaded) .featured-badge-type, .featured-card:not(.loaded) .featured-timer-overlay, .featured-card:not(.loaded) .featured-hot-badge { visibility: hidden; } .featured-card:not(.loaded) { /* Soft static base glow - pulse comes from the drifting highlights, not the border */ box-shadow: inset 0 0 60px rgba(245,158,11,0.018), 0 0 0 1px rgba(245,158,11,0.06), 0 0 50px rgba(245,158,11,0.025); } .featured-card:not(.loaded) .featured-img { background: rgba(255,255,255,0.025); position: relative; overflow: hidden; } .featured-card:not(.loaded) .featured-img::before { content: ""; position: absolute; top:0; bottom:0; left:-40%; width:60%; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(245,158,11,0.18) 0%, rgba(245,158,11,0.08) 35%, transparent 70%); filter: blur(14px); animation: goldDrift 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; mix-blend-mode: screen; pointer-events: none; } .featured-card:not(.loaded) .featured-body::before { content: ""; position: absolute; inset: 18px 22px 22px; z-index: 1; background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) 0 0/72% 22px no-repeat, linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)) 0 30px/45% 12px no-repeat, linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)) 0 60px/30% 40px no-repeat, linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)) 35% 60px/30% 40px no-repeat, linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)) 70% 60px/30% 40px no-repeat, linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.045)) 0 120px/40% 28px no-repeat, linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.045)) 55% 120px/45% 38px no-repeat; border-radius: 4px; pointer-events: none; } .featured-card:not(.loaded) .featured-body::after { content: ""; position: absolute; top:0; bottom:0; left:-40%; width:60%; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.06) 35%, transparent 70%); filter: blur(12px); /* Slight phase offset so body wave trails the image wave by ~30% - feels like one continuous flow */ animation: goldDrift 4.6s cubic-bezier(0.45, 0, 0.55, 1) -1.4s infinite; mix-blend-mode: screen; pointer-events: none; } .featured-card:not(.loaded) .featured-body { position: relative; visibility: visible; overflow: hidden; } .featured-card:not(.loaded) .featured-body > * { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .featured-card:not(.loaded) .featured-img::before, .featured-card:not(.loaded) .featured-body::after { animation: none; opacity: 0.3; } } /* ============ NAVIGATION ============ */ nav{ position:fixed;top:0;width:100%;z-index:1000; height:60px;padding:0 32px; display:flex;justify-content:space-between;align-items:center; background:rgba(7,8,12,0.92); contain:layout style paint; border-bottom:1px solid rgba(245,158,11,0.04); transition:background 0.4s, border-color 0.4s, box-shadow 0.4s; } nav.scrolled{background:rgba(7,8,12,0.96);border-bottom-color:rgba(245,158,11,0.1);box-shadow:0 8px 24px -8px rgba(0,0,0,0.55)} .logo{display:flex;align-items:center;gap:10px;cursor:pointer} .logo-text{font-family:'Sora',sans-serif;font-size:19px;font-weight:900;letter-spacing:-0.5px;text-transform:lowercase} .logo-text .logo-e{color:#F1F5F9} .logo-text .logo-x{color:#FBBF24} .logo-text .logo-rest{color:#F1F5F9} .nav-center{display:flex;gap:36px} .nav-center a{font-size:13px;font-weight:500;color:#9CA3AF;transition:color 0.3s} .nav-center a:hover{color:#FBBF24} .nav-right{display:flex;align-items:center;gap:12px} /* Sign In - living key (canon §4): the same gold key material as the page's CTAs (mnav-cta/spot-cta), nav-sized. Unified across ALL pages 2026-07-21 (was graphite here, flat gold on how-it-works/pricing, ghost pill on terms). */ .nav-sign{ padding:9px 20px;border-radius:8px;font-size:13px;font-weight:700; font-family:'Sora',sans-serif; color:#07080C;text-decoration:none;display:inline-block; background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%); border:none;cursor:pointer;letter-spacing:0.3px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(180,83,9,0.55),0 2px 6px -1px rgba(0,0,0,0.5),0 2px 10px rgba(245,158,11,0.15); transition:background 0.3s, transform 0.3s, box-shadow 0.3s; } .nav-sign:hover{ background:linear-gradient(135deg,#FCD34D 0%,#FBBF24 100%); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(180,83,9,0.5),0 4px 12px -2px rgba(0,0,0,0.5),0 4px 18px rgba(245,158,11,0.22); } .nav-sign:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 2px 6px rgba(0,0,0,0.25),0 1px 3px rgba(0,0,0,0.4); } .nav-chat-icon:hover{background:rgba(255,255,255,0.08)!important;border-color:rgba(255,255,255,0.12)!important;color:#FBBF24!important} /* ============ LIVE TICKER BAR ============ */ .live-ticker-bar{ position:fixed;top:60px;left:0;width:100%;z-index:999; height:32px; background:rgba(7,8,12,0.95); border-bottom:1px solid rgba(245,158,11,0.06); overflow:hidden; display:flex;align-items:center; contain:layout style paint; } .live-ticker-track{ display:flex;gap:0;width:max-content; animation:tickerScroll 22s linear infinite; /* fallback only - _tickerSpeedSync (JS) measures the real half width and locks the duration to the mobile 80px/s pace */ white-space:nowrap; will-change:transform; } .live-ticker-track:hover{animation-play-state:paused} /* Tap anywhere that's not a listing link = pause/resume (mobile has no hover). Slight dim while paused so the tap visibly answered. */ .live-ticker-track.paused{animation-play-state:paused} .live-ticker-track.paused .ticker-item{opacity:0.75} /* Touch: the WAAPI conveyor (_tickerRecycler v2, near the tap-pause handler) drives the motion. The one-layer CSS sweep is a ~10.5k device-px composited layer at DPR3 and WebKit's tile management blanks items near the left edge. */ @media (hover:none){.live-ticker-track{animation:none;will-change:auto}} @keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* Conveyor mode (touch): each item is its own small always-running compositor animation; the track is just a full-width stage. Applied by JS. */ .live-ticker-track.conveyor{width:100%;height:100%;position:relative} .live-ticker-track.conveyor .ticker-item{position:absolute;left:0;top:0} .ticker-item{ display:inline-flex;align-items:center;gap:6px; padding:0 24px; font-size:12px;color:#9CA3AF; border-right:1px solid rgba(245,158,11,0.06); height:32px;line-height:32px; flex-shrink:0; } .ticker-item .t-user{color:#FBBF24;font-weight:600} .ticker-item .t-project{color:#E5E7EB;font-weight:500} .ticker-item .t-amount{color:#0D9488;font-weight:700;font-family:'JetBrains Mono',monospace} /* Real-listing ticker items are links - same look, tappable */ a.ticker-item{cursor:pointer;text-decoration:none} a.ticker-item:hover .t-project,a.ticker-item:hover .t-user{text-decoration:underline} /* ============ HERO WITH FEATURED AUCTION ============ */ .hero{ position:relative;z-index:1; /* cap the stage height: on tall iMacs the auction floor rises into view instead of dead space; laptops keep the full-screen opening */ min-height:min(100vh,1150px); display:flex;flex-direction:column; justify-content:center;align-items:center; /* fluid side stage-margins - the split never hugs the screen edges */ padding:140px clamp(24px,5vw,80px) 60px; } .hero-light{ /* lantern wash - the broad spill of the stage-edge lamp, risen from below (was the ceiling pool at top:25%) */ position:absolute;top:78%;left:50%;transform:translate(-50%,-50%); width:1200px;height:760px; background:radial-gradient(ellipse,rgba(245,158,11,0.11),transparent 70%); pointer-events:none; } /* the lantern's spill carries the house grain (2026-08-03, Alex: the brow lamp's glow into the banner - as grain, like the burger menu). Same baked gold-tint feTurbulence tile as .lgrain, SAME box as .hero-light, masked to the wash's own ellipse so the noise lives only in the lamp's light and dies to TRUE zero inside the box. Flip-book phases everywhere (opacity cycling, zero re-raster - the touch-safe pattern, same as .lgrain's mobile flipbook); sleeps during touch scroll via html.is-scrolling and reduced-motion only — no ua-safari freeze (the flip-book is WebKit-safe, so it runs on desktop Safari + iOS alike, like the burger menu). */ .hl-grain{ position:absolute;top:78%;left:50%;transform:translate(-50%,-50%); width:1200px;height:760px;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.897 0.297 0.098 0 0 0.150 0.933 0.079 0 0 0.084 0.094 0.756 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:screen;opacity:0; -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000,transparent 70%); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000,transparent 70%); } .hl-grain.p1{animation:hlgA .45s steps(1) infinite} .hl-grain.p2{background-position:-24px 18px;animation:hlgB .45s steps(1) infinite} .hl-grain.p3{background-position:14px -30px;animation:hlgC .45s steps(1) infinite} .hl-grain.p4{background-position:26px 22px;animation:hlgD .45s steps(1) infinite} @keyframes hlgA{0%,24.99%{opacity:.15}25%,100%{opacity:0}} @keyframes hlgB{0%,24.99%{opacity:0}25%,49.99%{opacity:.15}50%,100%{opacity:0}} @keyframes hlgC{0%,49.99%{opacity:0}50%,74.99%{opacity:.15}75%,100%{opacity:0}} @keyframes hlgD{0%,74.99%{opacity:0}75%,99.99%{opacity:.15}100%{opacity:0}} /* No Safari freeze: this lantern grain is the opacity-only flip-book (WebKit-safe, like the burger menu it was modeled on), so it runs on desktop Safari + iOS alike. (2026-09-19, Alex: grain must never be frozen, desktop included.) */ .hero-content{ /* minmax(0,·) lets each column SHRINK below its content (plain 1fr can't - that's how the card used to spill past laptop screens); fluid gap + a wider ceiling keep the split balanced from 1025px up to iMac widths */ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); max-width:min(1560px,90vw);width:100%;align-items:center; } .hero-left,.hero-featured{min-width:0} .hero-left{animation:heroTextIn 1.2s cubic-bezier(0.22,1,0.36,1) both} @keyframes heroTextIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}} /* Slot meter removed 2026-07-14 (Alex) - updateHeroSlots() null-guards, call sites stay */ /* 3.6vw (was 5vw): at laptop widths the old curve hit the 62px cap inside a ~580px column and wrapped the headline into 4 lines - type now tracks the column it lives in (1280→46px, 1440→52px, iMac→66px) */ .hero h1{font-size:clamp(36px,3.6vw,66px);font-weight:800;letter-spacing:-0.04em;line-height:0.98;margin-bottom:24px} .hero h1 .line-1{display:block;color:#F3F4F6} .hero h1 .line-2{ display:inline-block;position:relative; background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 20%,#0D9488 50%,#14B8A6 75%,#F59E0B 100%); background-size:300% 100%;background-position:0% 50%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; /* Sweep v3 - SAME gradient, same 0->100->0 8s ride, compositor-smooth. Animating background-position on clipped text re-rasterizes the glyphs every frame (the iMac 17fps freeze; the old steps(30) cap = ~4fps chop). Instead: base holds the sweep START; ::before/::after (full-line text copies via data-text) hold the SAME gradient parked at the 50%/100% positions and dissolve in sequence - only OPACITY animates. Per-pixel lerp of shifted copies of a linear gradient equals the true pan wherever the gradient is locally linear, so it reads as the original motion. */ } .hero h1 .line-2::before,.hero h1 .line-2::after{ content:attr(data-text);content:attr(data-text) / ''; position:absolute;left:0;right:0;top:0;pointer-events:none; background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 20%,#0D9488 50%,#14B8A6 75%,#F59E0B 100%); background-size:300% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; opacity:0;will-change:opacity; } .hero h1 .line-2::before{background-position:50% 50%;animation:l2SweepMid 8s ease-in-out infinite} .hero h1 .line-2::after{background-position:100% 50%;animation:l2SweepEnd 8s ease-in-out infinite} @keyframes l2SweepMid{0%,100%{opacity:0}25%,75%{opacity:1}} @keyframes l2SweepEnd{0%,25%,75%,100%{opacity:0}50%{opacity:1}} .hero h1 .line-2a,.hero h1 .line-2b,.hero h1 .line-2c{display:block} /* tablet band: the words are display:block (3 stacked lines) - a plain-text overlay can't mirror that forced wrap, so the sweep stays off there and the band keeps the static gradient (the sweep's resting frame) */ @media(min-width:769px) and (max-width:1024px){ .hero h1 .line-2::before,.hero h1 .line-2::after{display:none} } @media(max-width:768px){ /* Fixed 2-line layout on ALL phones (Alex 15.09: "Verified. Auctioned." one line, "Sold." under them - was plain inline, so the break point drifted per screen width). Font scales with vw at the iPhone-16-Pro-Max ratio, so the pair always fits. Sweep v4 (16.09): the 15.09 lock first KILLED the phone перелив (attr() overlay copies can't mirror a forced break), the steps(24) base-pan replacement read as LAG next to the smooth finale (Alex, same day). Now the overlays are back with a literal "\A"-broken copy (white-space:pre) that mirrors the locked 2-line layout exactly - same desktop v3 opacity crossfade, compositor-only, zero glyph re-raster = the true smooth перелив. Keep the copy in sync with the markup tagline if it ever changes! */ .hero h1{font-size:clamp(26px,8.4vw,36px)} .hero h1 .line-2{display:block;white-space:nowrap} .hero h1 .line-2::before,.hero h1 .line-2::after{ content:"Verified. Auctioned.\A Sold."; content:"Verified. Auctioned.\A Sold." / ""; white-space:pre; } .hero h1 .line-2a,.hero h1 .line-2b{display:inline} .hero h1 .line-2c{display:block} } @keyframes heroGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* Stats row: ONE line on all devices (Alex 15.09) - no wrap ever, the number/label fonts shrink fluidly on narrow phones instead. Separators (.hd-sep) removed same day. (Supersedes the 2026-08-06 wrap-centering decision - nothing wraps now.) */ .hero-desc{font-size:15px;color:#9CA3AF;max-width:520px;margin-bottom:36px;line-height:1.8;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:10px 14px} .hero-desc .hd-item{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap} .hero-desc .hd-num{font-family:'Sora','JetBrains Mono',monospace;font-weight:900;font-size:18px;color:#FBBF24;letter-spacing:-0.5px;line-height:1} .hero-desc .hd-label{color:#9CA3AF;font-weight:500;font-size:13px;letter-spacing:0.2px} /* z-index:2 lifts the capsule ABOVE the hiw-cue lantern radiance: the cue's filled opacity animation makes it a stacking context, so its z-index:-1 glow was painting OVER the capsule and washing the carved well warm (Alex 2026-08-03: "свет попадает в полость"). The well stays dark now. */ .hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative;z-index:2} /* Micro-cues: the human door lives inside the hero flow; the AI door is parked in the screen corner (llms.txt discovery, TrustMRR pattern) so it doesn't compete with the conversion path. */ .floor-cue{ display:inline-flex;align-items:center;gap:7px;margin-top:26px; background:none;border:none;cursor:pointer;padding:6px 10px; font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:1.6px;text-decoration:none; opacity:0;animation:fcIn 0.8s ease 1.6s both; } .fc-ai{color:#FBBF24;text-transform:uppercase;transition:color 0.3s} .fc-read{color:#9CA3AF;transition:color 0.3s} .floor-cue:hover .fc-ai,.floor-cue:hover .fc-read{color:#FDE68A} @keyframes fcIn{to{opacity:1}} @media (prefers-reduced-motion:reduce){.floor-cue{animation:none;opacity:1}} .hiw-cue{animation-delay:1.2s;position:relative} /* THE LANTERN (2026-08-03 test) - the cue itself is the light source now: a hot core right under the text + a wide radiance uplighting the poster and spilling down to the floor seam (the .auctions footlight reads as its lower throw). Fades in with the cue at 1.2s = the lamp switching on in the house-lights cue. */ .hiw-cue::before{ /* radiance - both layers fade to TRUE zero inside the box (the halo lesson: residual alpha at a box edge = visible band) */ content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-46%); width:min(1200px,96vw);height:780px;pointer-events:none;z-index:-1; background: radial-gradient(ellipse 50% 46% at 50% 50%,rgba(251,191,36,0.16),rgba(245,158,11,0.06) 48%,transparent 72%), radial-gradient(ellipse 72% 62% at 50% 50%,rgba(222,228,240,0.07),transparent 66%); } /* hot-core ::after removed (Alex: read as a spot, not a lamp) - the gold cue text + the radiance peaking on it ARE the source */ .nav-ai-cue{ display:inline-flex;align-items:center;gap:6px; font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:1.45px;text-decoration:none;white-space:nowrap; padding:6px 8px;margin-left:14px; } .nav-ai-cue:hover .fc-ai,.nav-ai-cue:hover .fc-read{color:#FDE68A} @media (max-width:980px){.nav-ai-cue{display:none}} .cta-primary{ position:relative;display:inline-flex;align-items:center;gap:10px; padding:17px 44px;border-radius:100px; font-size:15px;font-weight:700;color:#07080C; background:linear-gradient(135deg,#F59E0B,#FBBF24); border:none;cursor:pointer;font-family:'Sora',sans-serif; box-shadow:0 0 0 1px rgba(245,158,11,0.3),0 4px 24px rgba(245,158,11,0.25),0 12px 48px rgba(245,158,11,0.1); transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;overflow:hidden; } .cta-primary::after{ content:'';position:absolute;inset:0;border-radius:100px; background:linear-gradient(135deg,rgba(255,255,255,0.25),transparent 50%);pointer-events:none; } .cta-primary .shimmer{ position:absolute;top:0;left:0;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); animation:shimmerSlide 3s ease-in-out infinite; will-change:transform; } @keyframes shimmerSlide{0%,100%{transform:translateX(-260%)}50%{transform:translateX(260%)}} .cta-primary:hover{ transform:translateY(-3px) scale(1.02); animation:ctaBreath 3s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(245,158,11,calc(0.42 + var(--bloom)*0.14)), 0 8px calc(40px + var(--bloom)*14px) rgba(245,158,11,calc(0.26 + var(--bloom)*0.12)), 0 20px calc(64px + var(--bloom)*22px) rgba(251,191,36,calc(0.10 + var(--bloom)*0.08)); } /* Buy/Sell TOGGLE (ported from /how-it-works) - a real switch built from the site's light physics: recessed dark track (well, inset top shadow), raised amber thumb (key: lit top edge, dark drop onto the track floor). It slides to the side you consider and STAYS there (sticky, no auto-return). Arrival = squash-settle + filament flash. Buttons keep their onclick behavior. */ .cta-switch{ position:relative;display:inline-flex;align-items:stretch; padding:5px;gap:4px;border-radius:100px; border:1px solid rgba(245,158,11,0.24); /* same base border as listing cards */ /* concave face v2 (Alex 2026-08-03): a VOLUMETRIC bowl, not flat black. The lantern below casts warm light onto the lower inner curve (amber kiss climbing the wall) while the upper vault sinks into occlusion shadow under the lip - the bowl now has an interior. */ background: radial-gradient(ellipse 80% 90% at 50% 120%,rgba(245,158,11,0.09),rgba(245,158,11,0.025) 45%,transparent 68%), radial-gradient(ellipse 90% 80% at 50% -25%,rgba(0,0,0,0.55),transparent 62%), linear-gradient(180deg,#0a0b10 0%,#0d0e13 55%,#12131a 100%); box-shadow:inset 0 3px 10px rgba(0,0,0,0.65),inset 0 1px 2px rgba(0,0,0,0.5),inset 0 -1px 0 rgba(255,255,255,0.05),0 2px 24px rgba(0,0,0,0.45); touch-action:pan-y; /* horizontal swipes belong to the thumb drag */ transition:border-color 0.35s, --start 1.1s cubic-bezier(0.16,1,0.3,1); --glow-bw:1px;--glow-spread:26; --glow-grad:linear-gradient(115deg,rgba(217,119,6,0.85) 0%,rgba(251,191,36,0.9) 45%,rgba(20,184,166,0.5) 115%); } .cta-switch:hover{border-color:rgba(245,158,11,0.34)} /* THE listing-card ring - the same gold/teal cursor-following arc as .a-card, same JS driver (--active/--near/--start). Plain card border at rest. */ .cta-switch::after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; border:var(--glow-bw) solid transparent; background:var(--glow-grad); opacity:calc(var(--active,0)*(0.25 + 0.62*var(--near,0)));transition:opacity 0.5s; -webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box; -webkit-mask-composite:source-in;mask-composite:intersect; -webkit-mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); } html.ua-safari .cta-switch::after{display:none} .cs-thumb{ /* travel layer - transform only, compositor-owned */ position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 7px); z-index:0;pointer-events:none; transition:transform 0.5s cubic-bezier(0.22,1,0.36,1); } .cta-switch.side-sell .cs-thumb{transform:translateX(calc(100% + 4px))} .cs-thumb::before{ /* the key itself - raised above the well. The amber aura returned (Alex 2026-08-03) once the external lantern wash was lifted off the capsule (z-order fix): now the only light in the bowl is the key's own - physically honest, and the carved well keeps its dark */ content:'';position:absolute;inset:0;border-radius:100px; background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(180,83,9,0.6), 0 4px 10px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,158,11,0.45),0 0 30px rgba(245,158,11,0.5),0 0 64px rgba(245,158,11,0.22); } .cs-thumb::after{ /* filament flash on arrival */ content:'';position:absolute;inset:0;border-radius:100px; background:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(255,255,255,0.06) 60%); opacity:0; } .cs-thumb.snap::before{animation:thumbLand 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.3s} .cs-thumb.snap::after{animation:thumbFlash 0.34s ease-out 0.3s} @keyframes thumbLand{0%{transform:scale(1)}45%{transform:scale(1.03,0.92)}100%{transform:scale(1)}} @keyframes thumbFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}} .cta-switch button{ position:relative;z-index:1;flex:1; display:inline-flex;align-items:center;justify-content:center;gap:11px; padding:16px 30px;border-radius:100px; font-family:'Sora',sans-serif;font-size:15px;font-weight:700;letter-spacing:0.2px; border:none;cursor:pointer;white-space:nowrap;background:transparent; transition:color 0.35s; } .cta-switch button svg{width:19px;height:19px;flex-shrink:0;transition:stroke 0.35s} /* the light starts on BUY (homepage default) */ .cs-buy{color:#07080C} .cs-buy svg{stroke:#07080C} .cs-sell{color:#EDEFF2} .cs-sell svg{stroke:#FBBF24} /* the light moved to SELL */ .cta-switch.side-sell .cs-buy{color:#EDEFF2} .cta-switch.side-sell .cs-buy svg{stroke:#FBBF24} .cta-switch.side-sell .cs-sell{color:#07080C} .cta-switch.side-sell .cs-sell svg{stroke:#07080C} @media (prefers-reduced-motion:reduce){ .cs-thumb{transition:none} .cs-thumb.snap::before,.cs-thumb.snap::after{animation:none} } .hero-proof{display:flex;align-items:center;gap:12px} .proof-avatars{display:flex} .proof-av{ width:28px;height:28px;border-radius:50%; border:2px solid #07080C;margin-left:-8px; overflow:hidden; } .proof-av:first-child{margin-left:0} .proof-av img{width:100%;height:100%;object-fit:cover} .proof-text{font-size:12px;color:#9CA3AF} .proof-text strong{color:#E5E7EB;font-weight:600} /* ===== FEATURED AUCTION CARD IN HERO ===== */ /* VIP/featured slot RETIRED on ALL breakpoints (2026-07-21, Alex) - was desktop-only since d05a957 (floor-first hero), now mobile matches the desktop look: poster only, the floor right under it. Styles/markup/populate-JS kept for a possible revival. */ .hero-featured{display:none;position:relative;animation:heroTextIn 1.2s cubic-bezier(0.22,1,0.36,1) 0.2s both} /* SCENE 1 - the VIP lot: living light seeps out from BENEATH the listing. Two layers breathe on different periods (7s / 11s, counter-phase) so the combined glow never repeats - it reads as alive, not looped. */ .hero-featured::before{ content:'';position:absolute;left:-14%;right:-14%;top:34%;bottom:-26%;z-index:-1;pointer-events:none; background:radial-gradient(ellipse 52% 42% at 50% 62%,rgba(251,191,36,0.17),rgba(245,158,11,0.065) 48%,transparent 74%); animation:vipBreath 7s ease-in-out infinite; } .hero-featured::after{ content:'';position:absolute;left:-6%;right:-6%;top:58%;bottom:-14%;z-index:-1;pointer-events:none; background:radial-gradient(ellipse 58% 46% at 50% 50%,rgba(252,224,150,0.13),transparent 70%); animation:vipBreath 11s ease-in-out infinite reverse; } @keyframes vipBreath{ 0%,100%{opacity:0.68;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} } .scene-grain{ position:absolute;inset:20% -8% -20% -8%;z-index:0;pointer-events:none; /* gold tint baked into the noise via feColorMatrix (== sepia .55 saturate 1.5 brightness 1.05) - computed once on the 160px tile, zero per-frame filter cost */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.897 0.297 0.098 0 0 0.150 0.933 0.079 0 0 0.084 0.094 0.756 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:screen;opacity:0.14; -webkit-mask-image:radial-gradient(ellipse 60% 52% at 50% 66%,#000,transparent 74%); mask-image:radial-gradient(ellipse 60% 52% at 50% 66%,#000,transparent 74%); animation:grainJitter 0.9s steps(1) infinite; } .featured-card{ border-radius:12px;overflow:hidden; background:radial-gradient(ellipse 260px 170px at 100% 100%,rgba(245,158,11,0.07) 0%,transparent 65%),linear-gradient(180deg,#16171f 0%,#0d0e14 100%); border:1px solid rgba(245,158,11,0.28); position:relative; box-shadow: inset 0 1px 0 rgba(251,191,36,0.18), 0 2px 4px rgba(0,0,0,0.5), 0 24px 48px -10px rgba(0,0,0,0.6), 0 56px 110px -20px rgba(0,0,0,0.55), 0 0 80px rgba(245,158,11,0.06); --glow-bw:1px;--glow-spread:26; --glow-grad:linear-gradient(115deg,rgba(217,119,6,0.85) 0%,rgba(251,191,36,0.9) 45%,rgba(20,184,166,0.5) 115%); transition:transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s, border-color 0.5s, --start 1.1s cubic-bezier(0.16,1,0.3,1); } .featured-card::before{ content:'';position:absolute;inset:-1px;border-radius:16px; background:linear-gradient(135deg,rgba(245,158,11,0.2),transparent 40%,transparent 60%,rgba(13,148,136,0.15)); z-index:0;pointer-events:none; } .featured-card:hover{transform:translateY(-6px);box-shadow:0 0 100px rgba(245,158,11,0.08),0 50px 140px rgba(0,0,0,0.6)} /* Cursor-following gold glow ring - same system as .a-card (driven by JS --active/--near/--start) */ .featured-card::after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; border:var(--glow-bw) solid transparent; background:var(--glow-grad); opacity:calc(var(--active,0)*(0.25 + 0.62*var(--near,0)));transition:opacity 0.5s; -webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box; -webkit-mask-composite:source-in;mask-composite:intersect; -webkit-mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); } .featured-img{width:100%;height:clamp(220px,16vw,300px);position:relative;overflow:hidden;background:#0d0e14;margin-bottom:-1px} /* photo scales with the wider iMac column */ .featured-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.8s;-webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)} .featured-card:hover .featured-img img{transform:scale(1.05)} .featured-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:70%;background:linear-gradient(to top,rgba(7,8,12,0.95),transparent)} .featured-hot-badge{ position:absolute;top:16px;left:16px;z-index:2; display:flex;align-items:center;gap:6px; padding:6px 14px;border-radius:100px; background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.2); font-size:11px;font-weight:800;color:#FCA5A5; text-transform:uppercase;letter-spacing:0.5px; animation:hotPulse 2s ease-in-out infinite; } @keyframes hotPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.2)}50%{box-shadow:0 0 20px 4px rgba(239,68,68,0.1)}} .featured-hot-badge .dot{width:7px;height:7px;border-radius:50%;background:#EF4444;animation:ldPulse 1.5s ease-in-out infinite;box-shadow:0 0 10px rgba(239,68,68,0.5)} @keyframes ldPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:0.6}} .featured-badge-type{ position:absolute;top:16px;right:16px;z-index:2; padding:6px 12px;border-radius:6px; background:rgba(8,9,13,0.82);color:#FBBF24;border:1px solid rgba(245,158,11,0.34); box-shadow:0 3px 10px rgba(0,0,0,0.5),inset 0 1px 0 rgba(251,191,36,0.14); font-family:'JetBrains Mono',monospace; font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px; } .featured-timer-overlay{ position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:10px; } .timer-block{ text-align:center;padding:8px 14px;border-radius:10px; background:rgba(0,0,0,0.85); border:1px solid rgba(245,158,11,0.08);min-width:58px; contain:content; } .timer-block .t-num{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:#FBBF24;line-height:1.2} .timer-block .t-lbl{font-size:8px;color:#9CA3AF;text-transform:uppercase;letter-spacing:1.5px;font-weight:600} .featured-body{padding:18px 22px 22px;position:relative;z-index:1} .featured-title{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:#F3F4F6;letter-spacing:-0.5px;margin-bottom:4px} .featured-subtitle{font-size:12px;color:#9CA3AF;margin-bottom:14px} .featured-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .f-metric{flex:1;padding:8px 10px;border-radius:8px;background:rgba(245,158,11,0.03);border:1px solid rgba(245,158,11,0.06)} .f-metric-val{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#E5E7EB} .f-metric-val.green{color:#0D9488} .f-metric-lbl{font-size:8px;color:#9CA3AF;text-transform:uppercase;letter-spacing:0.8px;margin-top:1px} .featured-bid-row{ display:flex;align-items:center;justify-content:space-between; padding:18px 20px;border-radius:12px; background:rgba(245,158,11,0.02); border:1px solid rgba(245,158,11,0.15); box-shadow:0 4px 24px rgba(245,158,11,0.06),inset 0 1px 0 rgba(245,158,11,0.1); position:relative;overflow:hidden; } .featured-bid-info .fb-label{font-size:9px;color:#9CA3AF;text-transform:uppercase;letter-spacing:1.2px} .featured-bid-info .fb-amount{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:900;letter-spacing:-1.5px;color:#F3F4F6} .featured-bid-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px} .featured-bidders{display:flex;align-items:center;gap:6px} .featured-bidders .fb-avs{display:flex} .featured-bidders .fb-av{ width:24px;height:24px;border-radius:50%;border:2px solid #0A0B10;margin-left:-5px; overflow:hidden; } .featured-bidders .fb-av:first-child{margin-left:0} .featured-bidders .fb-av img{width:100%;height:100%;object-fit:cover} .featured-bidders .fb-count{font-size:11px;color:#9CA3AF;font-weight:600} .featured-place-bid{ padding:12px 28px;border-radius:8px; /* living key (toggle-thumb material): light-from-above gradient body, lit top edge, bronze bottom bevel, dark drop onto the surface */ background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%); border:none;color:#07080C;font-size:14px;font-weight:700; cursor:pointer;font-family:'Sora',sans-serif; transition:background 0.3s, transform 0.3s, box-shadow 0.3s;position:relative;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(180,83,9,0.55),0 3px 9px -1px rgba(0,0,0,0.5),0 2px 12px rgba(245,158,11,0.17); } .featured-place-bid:hover{ background:linear-gradient(135deg,#FCD34D 0%,#FBBF24 100%);transform:translateY(-1px); animation:ctaBreath 3s ease-in-out infinite; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(180,83,9,0.5), 0 6px 16px -2px rgba(0,0,0,0.5), 0 4px calc(20px + var(--bloom)*10px) rgba(245,158,11,calc(0.24 + var(--bloom)*0.12)), 0 0 calc(28px + var(--bloom)*14px) rgba(251,191,36,calc(0.09 + var(--bloom)*0.08)); } .featured-place-bid:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 2px 6px rgba(0,0,0,0.25),0 1px 3px rgba(0,0,0,0.4)} /* SHORT laptop screens (height, not width, is the constraint): compact the stage so the whole VIP lot fits above the fold - photo yields first, then the breathing room; type stays intact. NOTE: must live AFTER the featured base rules - media queries don't add specificity, source order decides. */ @media (min-width:1025px) and (max-height:820px){ .hero{padding-top:112px;padding-bottom:36px} .featured-img{height:clamp(140px,22vh,200px)} .featured-body{padding:14px 20px 18px} .featured-subtitle{margin-bottom:10px} .featured-metrics{margin-bottom:12px} .hero h1{margin-bottom:18px} .hero-desc{margin-bottom:26px} } /* ============ DOUBLE TICKER TESTIMONIALS ============ */ .ticker-section{position:relative;z-index:1;padding:60px 0 80px;overflow:hidden;max-width:100vw} .ticker-label{ text-align:center;font-family:'Sora',sans-serif;font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:4px;color:#F59E0B;margin-bottom:12px; } .ticker-title{text-align:center;font-size:32px;font-weight:800;letter-spacing:-1.5px;margin-bottom:40px} .ticker-row{overflow:hidden;margin-bottom:12px; mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%); } .ticker-track{display:flex;gap:14px;width:max-content;will-change:transform;contain:layout style} .ticker-track.left{animation:tickL 60s linear infinite} .ticker-track.right{animation:tickR 55s linear infinite} .ticker-track:hover{animation-play-state:paused} @keyframes tickL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes tickR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}} .t-item{ display:flex;align-items:center;gap:12px; padding:14px 20px;border-radius:12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); min-width:360px;flex-shrink:0; transition:border-color 0.3s, background 0.3s; } .t-item:hover{border-color:rgba(245,158,11,0.12);background:rgba(245,158,11,0.03)} .t-ava{ width:38px;height:38px;border-radius:50%;flex-shrink:0; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.3); } .t-ava img{width:100%;height:100%;object-fit:cover} .t-body{flex:1} .t-quote{font-size:12.5px;color:#9CA3AF;line-height:1.5} .t-quote b{color:#E5E7EB;font-weight:600} .t-who{font-size:11px;color:#9CA3AF;font-weight:600;margin-top:2px} /* ============ BENTO GRID AUCTIONS ============ */ .auctions{ position:relative;z-index:1; padding:40px 32px 100px; max-width:1360px;margin:0 auto; /* NB: the floor light pool lives on .floor-cover (full-bleed), NOT here - painting it on this max-width box clipped the light at 1360px = dark side bands on wide screens (Alex 2026-08-05: "чёрные полосы по бокам, как будто блок в рамке") */ } /* Stage ramp - the auction floor opens with the same amber→teal hairline the curtain closes the page with (bookend). Footlight glow fades to TRUE zero inside its box. */ .auctions::before{ /* stage edge */ content:'';position:absolute;top:0;left:10%;right:10%;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,#F59E0B,#14B8A6,transparent); } .auctions::after{ /* footlight under the edge - behind content, above the floor */ content:'';position:absolute;top:1px;left:0;right:0;height:120px;pointer-events:none;z-index:-1; background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(245,158,11,0.095) 0%,rgba(245,158,11,0.035) 45%,transparent 68%); } /* ===== FLOOR CURTAIN (2026-07-21) - mirror of the page-end curtain (.curtain-zone, the "collecting dust?" reveal): the hero poster stands still (sticky) while the auction floor rides up over it; the amber→teal stage edge is the riding hem (it was already designed as that hem's bookend). Pure CSS sticky, zero JS. .floor-cover carries the opaque curtain paper full-bleed (.auctions itself is max-width-centered and would leave the poster peeking at the sides); body-color paper = zero seam against the sections below. The hero releases behind the opaque cover when the wrapper ends - never visibly. */ .floor-curtain{position:relative} .floor-curtain .hero{position:sticky;top:0;z-index:0} .floor-cover{position:relative;z-index:1; /* opaque curtain paper + the auctions floor light pool (moved off max-width .auctions so the light is full-bleed and can't cut at the content column edge) */ background:radial-gradient(ellipse 88% 64% at 50% 10%,rgba(226,232,240,0.085),transparent 70%),#07080C} .hem-glow{ /* v6/v7: the light the hem CARRIES - picked up from the stage-edge lantern as the hem wades through its pool (crtHemBloom), dissolved into the resting footlight at docking. Sits under the section content (DOM-before .auctions, no z-index), sole owner of its opacity = compositor-clean. Zero footprint at rest and after docking. v7: brightened 0.16 -> 0.28 (v6 was felt by nobody) + taller throw. */ position:absolute;top:0;left:0;right:0;height:240px;pointer-events:none; opacity:0; background:radial-gradient(ellipse 62% 100% at 50% 0%,rgba(245,158,11,0.28),rgba(245,158,11,0.09) 45%,transparent 70%); } html.perf-off-curtain .floor-curtain .hero{position:static!important} /* --- Light board v3: the SPOTLIGHT CROSSFADE (Alex) --- At rest the beam is on the poster and the floor waits in shadow; scrolling hands the light over - the poster sinks into dusk while the lots come up lit. Four layers, one progress (curve shaping v4 2026-08-29 - see @keyframes below): 1) .floor-cover::after - the floor's shade, 0.42 dark at rest -> clear; 2) .hero::after - the poster's dusk veil, 0 -> full dark at ~87%; 3) .floor-cover::before - the hem's contact shadow, grows in with scroll (NOT resting on the CTA buttons at load); 4) .hero recede - drift up + shrink, depth parallax. Driver: scroll-driven CSS animations (animation-timeline:scroll) - they run ON THE COMPOSITOR, pixel-locked to the scroll (the v2 JS-var transform trailed the compositor-pinned sticky by a frame = the swim Alex flagged). JS only measures --crtRange (poster flow height) once + on resize/fonts. Fallback (no scroll-timeline): the JS --curtainP writer drives the veils only - opacity lag is imperceptible; the recede stays off there. */ .floor-cover::before{ /* hem contact shadow - grows with the pass (v5: deeper recede = the slab rides higher above the poster -> longer, darker cast) */ content:'';position:absolute;bottom:100%;left:0;right:0;height:130px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(0,0,0,0.62)); opacity:calc(var(--curtainP,0)); } .floor-curtain .hero::after{ /* the dusk veil - light leaving the materials. v4 (2026-08-29, "смазка"): a bottom-up gradient instead of the flat fill - the poster dies from the hem upward, tying the fade to the riding curtain (flat read as a dimmer switch, not a light handoff). */ content:'';position:absolute;inset:0;pointer-events:none;z-index:5; background:linear-gradient(180deg,rgba(7,8,12,0.78) 0%,#07080C 72%); opacity:calc(var(--curtainP,0)*1.15);will-change:opacity; } .floor-cover::after{ /* the floor's shade v2 - beam FALLOFF, not a flat veil (flat read as disabled UI). At the seam the poster's light spills over the hem = near-full brightness (sec-head stays readable); the dark deepens with distance from the beam, capped ~0.45 effective. Same animated opacity. */ content:'';position:absolute;inset:0;pointer-events:none;z-index:5; background:linear-gradient(180deg,transparent 0,rgba(4,5,10,0.28) 300px,rgba(4,5,10,0.60) 780px,rgba(4,5,10,0.60) 100%); /* fallback pacing matches the 75% early light-up (min() clamps at zero) */ opacity:calc((1 - min(1, var(--curtainP,0)*1.3333))*0.42);will-change:opacity; } @supports (animation-timeline: scroll()) { .floor-curtain .hero{ animation:crtRecede linear both; animation-timeline:scroll(root);animation-range:0 var(--crtRange,480px); transform-origin:50% 0; } .floor-curtain .hero::after{ animation:crtVeil linear both; animation-timeline:scroll(root);animation-range:0 var(--crtRange,480px); } .floor-cover::before{ animation:crtShadow linear both; animation-timeline:scroll(root);animation-range:0 var(--crtRange,480px); } .floor-cover::after{ animation:crtFloorLight linear both; /* the floor completes its light-up at 75% of the pass - the visitor gets a fully readable marketplace BEFORE the theatrics finish (UX balance) */ animation-timeline:scroll(root);animation-range:0 calc(var(--crtRange,480px)*0.75); } .hem-glow{ animation:crtHemBloom linear both; animation-timeline:scroll(root);animation-range:0 var(--crtRange,480px); } } /* Curve shaping v4 (2026-08-29, "смазка"): every layer was LINEAR from the first scrolled pixel - no run-up, no follow-through, and a murky mid-pass valley (poster half-dead + floor half-lit at once). Now the light HANDS OVER: - veil back-loaded: a dead toe for the first ~20% of the pass (touching the wheel no longer starts killing the poster), full dark only near coverage; - floor light front-loaded: the lots take the light in the first half; - hem penumbra front-loaded: the moving edge never travels bare. Depth & suspension v5 (2026-08-29, same session - "профессиональнее"): the pass gets MASS via differential velocity. - recede deepened -46px -> -112px (~23% of scroll speed): the poster now visibly sinks away while the floor rides over - before, it read as a static wall being papered over; - crtSettle (desktop, on .auctions children): the floor's cargo sags ~28px into the slab mid-pass and catches up by the end - suspension damping. v6: explicit 0% + floorIn went opacity-only -> crtSettle is the SOLE transform animation on these elements = stays on the compositor (two animations sharing 'transform' forced main-thread and caused card jitter); - per-keyframe easing: v4's piecewise-linear corners read as gear changes when scrubbed; C1-smooth now. Recede stays linear (scrub honesty). */ @keyframes crtRecede{from{transform:none}to{transform:translateY(-112px) scale(0.945)}} @keyframes crtVeil{ 0%{opacity:0;animation-timing-function:cubic-bezier(0.55,0,0.85,0.55)} 22%{opacity:0.05;animation-timing-function:cubic-bezier(0.35,0,0.65,1)} 55%{opacity:0.38;animation-timing-function:cubic-bezier(0.35,0,0.55,1)} 100%{opacity:1.15}} @keyframes crtShadow{ 0%{opacity:0;animation-timing-function:cubic-bezier(0.2,0.5,0.45,1)} 30%{opacity:0.8;animation-timing-function:cubic-bezier(0.35,0,0.65,1)} 100%{opacity:1}} @keyframes crtFloorLight{ 0%{opacity:0.42;animation-timing-function:cubic-bezier(0.3,0.4,0.55,1)} 50%{opacity:0.12;animation-timing-function:cubic-bezier(0.4,0,0.7,1)} 100%{opacity:0}} @keyframes crtSettle{ 0%{transform:translateY(0);animation-timing-function:cubic-bezier(0.3,0,0.6,1)} 30%{transform:translateY(28px);animation-timing-function:cubic-bezier(0.35,0,0.25,1)} 100%{transform:translateY(0)}} /* v7 (2026-08-29, идея Alex "повзаимодействовать с лампой"): the hem WADES THROUGH the lantern. .hero-light is the stage-edge lantern at the poster's foot (top:78%) - before v7 the rising opaque cover simply guillotined its lower throw. Now the light TRANSFERS across the hem in three beats: 1) crtLampCling - the lantern pool drifts toward the seam and CONCENTRATES (smaller pool = denser light) while the poster recedes away above it: the lamp lingers at the stage edge longer than the poster; 2) crtHemBloom - the hem starts glowing the moment it enters the pool (~18%), carries the picked-up light down the floor, peaks at ~78%; 3) the carried light dissolves into the resting footlight at docking. Transform-only on the lamp (lampWarm owns its opacity) - compositor-clean. */ @keyframes crtLampCling{ 0%{transform:translate(-50%,-50%);animation-timing-function:cubic-bezier(0.3,0,0.45,1)} 60%{transform:translate(-50%,-44%) scale(0.72);animation-timing-function:cubic-bezier(0.4,0,0.6,1)} 100%{transform:translate(-50%,-40%) scale(0.58)}} @keyframes crtHemBloom{ 0%{opacity:0;animation-timing-function:cubic-bezier(0.35,0,0.6,0.8)} 18%{opacity:0.22;animation-timing-function:cubic-bezier(0.3,0,0.5,1)} 60%{opacity:0.85;animation-timing-function:cubic-bezier(0.4,0,0.5,1)} 78%{opacity:1;animation-timing-function:cubic-bezier(0.5,0,0.7,1)} 100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .floor-curtain .hero{animation:none!important;transform:none!important} } html.perf-off-curtain .floor-curtain .hero{animation:none!important;transform:none!important} html.perf-off-curtain .floor-curtain .hero::after, html.perf-off-curtain .floor-cover::before, html.perf-off-curtain .floor-cover::after, html.perf-off-curtain .hem-glow{display:none!important} /* ===== Seam variant B (?seam=b) - theatrical light change: hero light falls into a darkness valley at the seam, then a new ceiling light rises over the auction floor. Overrides the stage-ramp pseudos; plain URL keeps variant A. ===== */ html.seam-b .auctions::before{ /* valley - the blacks deepen between the acts (behind content) */ top:-70px;left:0;right:0;height:150px;z-index:-1; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.45) 40%,rgba(0,0,0,0.45) 60%,transparent 100%); } html.seam-b .auctions::after{ /* the new light comes up on the floor */ top:60px;height:260px; background:radial-gradient(ellipse 46% 70% at 50% 0%,rgba(226,232,240,0.10) 0%,rgba(251,191,36,0.035) 45%,transparent 70%); } /* ===== Seam variant C (?seam=c) - emergence from shadow: a soft veil drapes the top of the floor and the first lots surface out of it on scroll. ===== */ html.seam-c .auctions::before{ /* shadow veil - behind content */ top:0;left:0;right:0;height:240px;z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.26) 45%,transparent 100%); } html.seam-c .auctions::after{background:none} /* the ramp footlight is off in this variant */ /* ===== Lot emergence v3 minimal (Alex 2026-07-17) - quiet fade + short rise, same spirit as the original 07-13 version but softer (20px, not 36). Stagger (--lot-d) is a diagonal wave computed in JS from real grid position (not nth-child) and cleared after entrance so hover transitions stay instant. Sheen/scale from v2 removed - too loud for the floor. ===== */ .a-card.dynamic:not(.skel){opacity:0;transform:translateY(20px)} .a-card.dynamic.sc-in{ opacity:1;transform:none; /* keep the ring/hover transitions alive alongside the emergence */ transition:opacity .55s ease,transform .7s cubic-bezier(0.22,1,0.36,1),border-color 0.5s,box-shadow 0.5s,--start 1.1s cubic-bezier(0.16,1,0.3,1); transition-delay:var(--lot-d,0ms),var(--lot-d,0ms),0s,0s,0s; } @media (prefers-reduced-motion:reduce){ .a-card.dynamic:not(.skel){opacity:1;transform:none} } .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px} .sec-head h2{font-size:36px;font-weight:800;letter-spacing:-1.5px;line-height:1.1} /* (LIVE pill removed 2026-07-13 - the slot meter in the right slot carries the live state) */ .slots-badge{ padding:6px 14px;border-radius:100px;font-size:12px;font-weight:700; color:#F59E0B;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.12); } .bento-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:auto; gap:16px; } .bento-grid > .a-card:not(.dynamic){display:none!important} .bento-lg{grid-column:span 2;grid-row:span 2} .bento-md{grid-column:span 1;grid-row:span 1} .bento-sm{grid-column:span 1;grid-row:span 1} /* ============ SKELETON - soft golden iridescent pulse ============ Brand-colored gentle glow that flows diagonally across loading cards. Slower than a typical "wipe" (2.8s vs 1.4s) so it reads as "premium / slowly breathing" rather than "frantic loading". Zero layout shift on swap. */ .a-card.skel{ background:#1A1F26; border:1px solid rgba(245,158,11,0.06); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; pointer-events:none; /* Subtle base tint of brand color */ box-shadow:inset 0 0 40px rgba(245,158,11,0.015); } .a-card.skel::before{ content:""; position:absolute; top:0; bottom:0; left:-50%; width:60%; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.06) 35%, transparent 70%); filter:blur(12px); animation:goldDrift 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; mix-blend-mode:screen; pointer-events:none; } /* transform-based sweep: compositor-only (animating `left` forced layout + re-blur every frame - the blurred, blended layer was a first-load jank source, worst on WebKit) */ @keyframes goldDrift{ 0% { transform:translateX(0); opacity:0; } 15% { opacity:0.9; } 85% { opacity:0.9; } 100% { transform:translateX(267%); opacity:0; } } .a-card.skel .skel-img, .a-card.skel .skel-row{ background:rgba(255,255,255,0.04); border-radius:6px; position:relative; z-index:1; } .a-card.skel.bento-lg .skel-img{height:280px} .a-card.skel.bento-md .skel-img{height:170px} .a-card.skel.bento-sm .skel-img{height:120px} .a-card.skel .skel-title{height:18px;width:72%;margin-top:4px} .a-card.skel.bento-lg .skel-title{height:22px} .a-card.skel .skel-bid{height:26px;width:48%} .a-card.skel.bento-lg .skel-bid{height:30px} .a-card.skel.bento-sm .skel-bid{height:20px} .a-card.skel .skel-timer{height:14px;width:60%} .spot-card .spot-skel{padding:24px;display:flex;flex-direction:column;gap:14px;height:100%;min-height:400px;justify-content:center;position:relative;overflow:hidden;border-radius:14px;box-shadow:inset 0 0 60px rgba(245,158,11,0.02)} .spot-card .spot-skel::before{ content:""; position:absolute; top:0; bottom:0; left:-50%; width:60%; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.06) 35%, transparent 70%); filter:blur(12px); animation:goldDrift 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; mix-blend-mode:screen; pointer-events:none; } .spot-skel .skel-row{background:rgba(255,255,255,0.04);border-radius:6px;position:relative;z-index:1} .spot-skel .skel-spot-title{height:24px;width:65%} .spot-skel .skel-spot-desc{height:14px;width:90%} .spot-skel .skel-spot-cta{height:38px;width:50%;margin-top:12px} @media (prefers-reduced-motion: reduce){ .a-card.skel::before, .spot-card .spot-skel::before{animation:none;opacity:0.3} } /* ============ AD ROW - BELOW BENTO GRID ============ */ .spot-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px} .spot-card{ border-radius:10px;overflow:hidden; background:radial-gradient(ellipse 200px 120px at 100% 100%,rgba(245,158,11,0.05) 0%,transparent 65%),linear-gradient(180deg,#12131a 0%,#0c0d12 100%); border:1px solid rgba(255,255,255,0.07); /* outline experiment - see .a-card */ box-shadow:inset 0 1px 0 rgba(251,191,36,0.10),0 1px 2px rgba(0,0,0,0.45),0 8px 20px -8px rgba(0,0,0,0.45); transition:border-color 0.5s, box-shadow 0.5s, transform 0.5s, --start 1.1s cubic-bezier(0.16,1,0.3,1); position:relative; display:flex;flex-direction:column; padding:0;gap:0; --glow-bw:1px;--glow-spread:26; --glow-grad:linear-gradient(115deg,rgba(217,119,6,0.85) 0%,rgba(251,191,36,0.9) 45%,rgba(20,184,166,0.5) 115%); } .spot-card:hover{ transform:translateY(-4px); border-color:rgba(245,158,11,0.28); box-shadow:inset 0 1px 0 rgba(251,191,36,0.16),0 2px 4px rgba(0,0,0,0.35),0 20px 44px -10px rgba(0,0,0,0.55),0 0 50px rgba(245,158,11,0.05); } /* gold cursor ring - same system as .a-card (JS --active/--near/--start) */ .spot-card::after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; border:var(--glow-bw) solid transparent; background:var(--glow-grad); opacity:calc(var(--active,0)*(0.25 + 0.62*var(--near,0)));transition:opacity 0.5s; -webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box; -webkit-mask-composite:source-in;mask-composite:intersect; -webkit-mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); } .spot-photo-area{ position:relative;width:100%;height:320px;flex-shrink:0;overflow:hidden; background:#0d0e14;margin:0 0 -1px;padding:0;line-height:0; } /* photo dissolves into the card body - mask ON the img (photo-locked, can't detach on hover-scale; the frame-anchored fade was the "зазор" bug, see 2c) */ .spot-photo-area img{width:100%;height:100%;object-fit:cover;display:block;margin:0;padding:0;border:none;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)} .spot-photo-placeholder{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(245,158,11,0.06),rgba(20,184,166,0.04),rgba(7,8,12,0.8)); } /* badges = solid dark plates (7b language: readable over any photo), not pills */ .spot-badge{ position:absolute;top:12px;left:12px;z-index:2; padding:4px 9px;border-radius:5px; background:rgba(8,9,13,0.82);border:1px solid rgba(245,158,11,0.34); font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#FCD34D; letter-spacing:1.6px;text-transform:uppercase; box-shadow:0 3px 9px rgba(0,0,0,0.45); } .spot-category-badge{ position:absolute;top:12px;right:12px;z-index:2; padding:4px 9px;border-radius:5px; background:rgba(8,9,13,0.82);border:1px solid rgba(13,148,136,0.38); font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#2DD4BF; letter-spacing:1.4px;text-transform:uppercase; box-shadow:0 3px 9px rgba(0,0,0,0.45); } .spot-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:10px;border-top:none;margin-top:0} .spot-company{font-size:11px;font-weight:700;color:#FBBF24;text-transform:uppercase;letter-spacing:0.8px} .spot-headline{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:#F3F4F6;line-height:1.3;letter-spacing:-0.3px} .spot-desc{font-size:13px;color:#9CA3AF;line-height:1.5} .spot-services{display:flex;flex-wrap:wrap;gap:6px} .spot-service-tag{ padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#D1D5DB; } .spot-stats{display:flex;gap:16px;flex-wrap:wrap} .spot-stat{font-size:12px;color:#9CA3AF} .spot-stat span{font-weight:700;color:#E2E8F0} .spot-social{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .spot-social a{ display:inline-flex;align-items:center;gap:5px; font-size:12px;color:#9CA3AF;text-decoration:none; padding:4px 10px;border-radius:6px; border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02); transition:all 0.2s; } .spot-social a:hover{color:#E2E8F0;border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.05)} .spot-cta{ /* living key (canon §4) */ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 20px;border-radius:8px;cursor:pointer; background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%); border:none; color:#07080C;font-weight:700;font-size:14px;font-family:'Sora',sans-serif; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(180,83,9,0.55),0 3px 8px -1px rgba(0,0,0,0.5),0 2px 10px rgba(245,158,11,0.15); transition:background 0.3s, transform 0.3s, box-shadow 0.3s;align-self:flex-start; } .spot-cta:hover{ background:linear-gradient(135deg,#FCD34D 0%,#FBBF24 100%);transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(180,83,9,0.5),0 5px 14px -2px rgba(0,0,0,0.5),0 4px 18px rgba(245,158,11,0.22); } .spot-cta:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 2px 6px rgba(0,0,0,0.25),0 1px 3px rgba(0,0,0,0.4); } .spot-dots{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:auto;padding-top:8px} .spot-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.15);cursor:pointer;transition:all 0.3s} .spot-dot.active{width:18px;border-radius:3px;background:#FBBF24} .spot-card .spot-inner{opacity:1;transition:opacity 0.4s ease} .spot-card .spot-inner.fading{opacity:0} #spotCarousel{min-height:720px} .spot-nav-arrows{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%);padding:0 8px;z-index:5} .spot-nav-arrow{ width:32px;height:32px;border-radius:50%; background:rgba(7,8,12,0.6);border:1px solid rgba(255,255,255,0.1); display:flex;align-items:center;justify-content:center; cursor:pointer;pointer-events:all;transition:all 0.2s;color:#9CA3AF; opacity:0; } .spot-card:hover .spot-nav-arrow{opacity:1} .spot-nav-arrow:hover{background:rgba(245,158,11,0.15);border-color:rgba(245,158,11,0.3);color:#FBBF24} .spot-pause-indicator{ position:absolute;top:12px;right:52px; padding:2px 8px;border-radius:100px; background:rgba(7,8,12,0.6);border:1px solid rgba(255,255,255,0.08); font-size:9px;color:#9CA3AF;letter-spacing:0.5px; opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:5; } .spot-pause-indicator.visible{opacity:1} .spot-pitch{font-size:12px;color:#9CA3AF;text-align:center;margin-top:4px} .spot-pitch a{color:#FBBF24;text-decoration:none;font-weight:600} .spot-pitch a:hover{text-decoration:underline} .spot-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:100%;min-height:400px;padding:40px;text-align:center} .spot-placeholder-icon{width:64px;height:64px;border-radius:16px;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.12);display:flex;align-items:center;justify-content:center} .spot-placeholder-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:#E2E8F0;letter-spacing:-0.3px} .spot-placeholder-sub{font-size:13px;color:#9CA3AF;max-width:260px;line-height:1.5} .spot-placeholder-cta{ padding:10px 24px;border-radius:8px;cursor:pointer; background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(251,191,36,0.06)); border:1px solid rgba(245,158,11,0.2); color:#FBBF24;font-weight:700;font-size:14px; text-decoration:none;display:inline-block; transition:all 0.3s; } .spot-placeholder-cta:hover{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(251,191,36,0.12));transform:translateY(-1px)} @media(max-width:1024px){.spot-row{grid-template-columns:1fr}} @media(max-width:768px){.spot-row{grid-template-columns:1fr;margin-top:8px}} .a-card{ border-radius:10px;overflow:hidden; background:radial-gradient(ellipse 220px 140px at 100% 100%,rgba(245,158,11,0.07) 0%,transparent 65%),linear-gradient(180deg,#14151c 0%,#0d0e14 100%); /* outline experiment 2026-08-03: resting border is a quiet neutral hairline - gold belongs to the cursor arc (::after) and the hover border only */ border:1px solid rgba(255,255,255,0.07); transition:transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.5s, box-shadow 0.5s, --start 1.1s cubic-bezier(0.16,1,0.3,1); cursor:pointer;position:relative; --glow-bw:1px;--glow-spread:26; --glow-grad:linear-gradient(115deg,rgba(217,119,6,0.85) 0%,rgba(251,191,36,0.9) 45%,rgba(20,184,166,0.5) 115%); box-shadow: inset 0 1px 0 rgba(251,191,36,0.16),inset 0 0 40px rgba(245,158,11,0.02), 0 1px 2px rgba(0,0,0,0.5), 0 10px 24px -6px rgba(0,0,0,0.55), 0 24px 48px -12px rgba(0,0,0,0.4); } .a-card:nth-child(1){--accent:rgba(251,191,36,0.14)} .a-card:nth-child(2){--accent:rgba(20,184,166,0.14)} .a-card:nth-child(3){--accent:rgba(139,92,246,0.14)} .a-card:nth-child(4){--accent:rgba(59,130,246,0.14)} .a-card:nth-child(5){--accent:rgba(239,68,68,0.14)} .a-card:nth-child(6){--accent:rgba(245,158,11,0.14)} .a-card:nth-child(7){--accent:rgba(16,185,129,0.14)} .a-card:nth-child(8){--accent:rgba(236,72,153,0.14)} .a-card:nth-child(9){--accent:rgba(99,102,241,0.14)} .a-card:nth-child(10){--accent:rgba(14,165,233,0.14)} .a-card:nth-child(11){--accent:rgba(249,115,22,0.14)} .a-card:nth-child(12){--accent:rgba(20,184,166,0.14)} .a-card:nth-child(13){--accent:rgba(168,85,247,0.14)} .a-card.empty{--accent:rgba(255,255,255,0.06)} .a-card::before{ content:'';position:absolute;inset:-1px;border-radius:10px; background:linear-gradient(160deg,rgba(251,191,36,0.1),transparent 40%,transparent 60%,rgba(245,158,11,0.06)); opacity:calc(var(--near,0)*0.65);transition:opacity 0.3s;z-index:0;pointer-events:none; } .a-card:hover{ transform:translateY(-8px); /* rim carries the amber now - flat border stays as a quiet base + fallback */ border-color:rgba(245,158,11,0.16); box-shadow: inset 0 1px 0 rgba(251,191,36,0.22), 0 2px 4px rgba(0,0,0,0.35), 0 24px 48px -8px rgba(0,0,0,0.6), 0 48px 90px -16px rgba(0,0,0,0.5), 0 12px 36px -14px rgba(251,191,36,0.12); /* warm spill BENEATH (VIP-underglow family), was omni 60px */ } .a-card:hover::before{opacity:1} @property --start{syntax:'';inherits:true;initial-value:0} .a-card::after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; border:var(--glow-bw) solid transparent; background:var(--glow-grad); opacity:calc(var(--active,0)*(0.25 + 0.62*var(--near,0)));transition:opacity 0.5s; -webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box; -webkit-mask-composite:source-in;mask-composite:intersect; -webkit-mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start,0) - var(--glow-spread))*1deg),#00000000 0deg,rgba(255,255,255,0.92),#00000000 calc(var(--glow-spread)*2deg)); } @media(prefers-reduced-motion:reduce){.a-card{transition:transform 0.5s,border-color 0.5s,box-shadow 0.5s}} /* Hover rim (2026-09-02, flipped same day): directional 1px light ring on the SAME rail as the cursor arc (::after). Light comes from BENEATH - the lot's own living underglow answering the hover, same family as the VIP featured scene ("light seeps out from beneath the listing"): bottom edge catches most light, sides fall off warm->bronze, the top carries a faint teal whisper. Opacity-only = compositor-cheap; the softened flat border on .a-card:hover stays as the no-mask-composite fallback. Injected by buildListingCard - skel/empty cells don't get one; frozen on SOLD below. */ .a-card-halo{ position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3; border:1px solid transparent; background:linear-gradient(0deg,rgba(252,211,77,0.65) 0%,rgba(245,158,11,0.3) 30%,rgba(180,83,9,0.14) 62%,rgba(13,148,136,0.2) 100%) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box; -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box; mask-composite:exclude; opacity:0;transition:opacity 0.45s; } .a-card:hover .a-card-halo{opacity:1} /* SOLD = frozen: no living underglow, no amber border - a closed deal answers hover with the same neutral brightening as the timer/key it sits beside. */ .sold-card .a-card-halo{display:none} .a-card.sold-card:hover{border-color:rgba(255,255,255,0.14)} .a-card-img{width:100%;position:relative;overflow:hidden;background:#0f1016;margin-bottom:-1px} /* Light play: photo sits in a lit frame - top catches light, bottom falls to shade */ .a-card-img::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),inset 0 -26px 34px -20px rgba(0,0,0,0.55); } /* Floating chips cast shadows onto the photo below them */ .img-badge,.img-verified,.a-card-img::after{box-shadow:0 3px 9px rgba(0,0,0,0.45)} .bento-lg .a-card-img{height:280px} .bento-md .a-card-img{height:170px} .bento-sm .a-card-img{height:120px} .a-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.22,1,0.36,1);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)} .a-card:hover .a-card-img img{transform:scale(1.06)} /* LOT plates - auction-house numbering, counts only live cards */ .bento-grid{counter-reset:lot} .a-card.dynamic{counter-increment:lot} .a-card-img::after{ content:'LOT ' counter(lot,decimal-leading-zero); position:absolute;bottom:12px;left:12px;z-index:2; font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.6px; color:#FDE68A;background:rgba(8,9,13,0.78); border:1px solid rgba(245,158,11,0.3); padding:4px 9px;border-radius:4px;line-height:1; } /* ===== MOBILE LOT STORIES DOCK ===== Bottom strip of round lot thumbnails (real screenshots, or initial + type color as fallback) - the stories pattern every mobile user already knows. Gold gradient ring + slight scale marks the lot currently on screen; its caption swaps from name to current bid. Tap = hop to lot, strip swipes. */ .lot-dock{ position:fixed;left:0;right:0;bottom:0;z-index:850; transform:translateY(120%); display:none; padding:10px 0 max(10px, env(safe-area-inset-bottom)); background:rgba(8,9,13,0.9); border-top:1px solid rgba(245,158,11,0.14); box-shadow:0 -14px 34px rgba(0,0,0,0.45),inset 0 1px 0 rgba(251,191,36,0.05); -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4); transition:transform 0.45s cubic-bezier(0.22,1,0.36,1); } .lot-dock.visible{transform:translateY(0)} .sd-strip{ display:flex;gap:12px;align-items:flex-start; overflow-x:auto;scrollbar-width:none; padding:2px 16px 0; } .sd-strip::-webkit-scrollbar{display:none} .sd-item{ flex-shrink:0;width:56px; display:flex;flex-direction:column;align-items:center;gap:4px; background:none;border:none;padding:0;cursor:pointer; -webkit-tap-highlight-color:transparent; } .sd-thumb{ width:46px;height:46px;border-radius:50%;padding:2px; background:rgba(255,255,255,0.10); transition:transform 0.25s,background 0.25s,box-shadow 0.25s; } .sd-thumb img,.sd-initial{ display:flex;align-items:center;justify-content:center; width:100%;height:100%;border-radius:50%;object-fit:cover; background:#12141c;border:2px solid #0a0b10;box-sizing:border-box; } .sd-initial{ font-family:'Sora',sans-serif;font-size:17px;font-weight:800; } .sd-item.active .sd-thumb{ background:linear-gradient(135deg,#F59E0B,#FBBF24 55%,#14B8A6); transform:scale(1.12); box-shadow:0 0 16px rgba(245,158,11,0.35); } .sd-name{ max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:9px;font-weight:600;color:#9CA3AF;line-height:1.2; } .sd-item.active .sd-name{color:#E2E8F0} .sd-bid{ height:12px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700; color:#FBBF24;line-height:1.2;opacity:0;transition:opacity 0.25s; } .sd-item.active .sd-bid{opacity:1} /* Landed-on-lot flash so the tap has a visible destination */ .a-card.lot-flash{outline:2px solid rgba(251,191,36,0.6);outline-offset:3px} @media(max-width:768px){ .lot-dock.ready{display:block} } /* ===== VIEW TOGGLE (grid <-> compact; mobile + desktop >=1025, tablet hidden) ===== Design-code switch: recessed dark track, sliding gold living-key thumb - same material family as the hero Buy/Sell switch. No pill outlines. */ .view-toggle{ position:relative;display:none;flex-shrink:0; padding:3px;border-radius:8px; background:linear-gradient(180deg,rgba(0,0,0,0.34),rgba(0,0,0,0.16)); border:1px solid rgba(255,255,255,0.07);border-top-color:rgba(0,0,0,0.4); box-shadow:inset 0 2px 5px rgba(0,0,0,0.35),inset 0 -1px 0 rgba(255,255,255,0.03); } .vt-thumb{ position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px); border-radius:6px; background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(180,83,9,0.55),0 2px 6px rgba(0,0,0,0.4); transition:transform 0.3s cubic-bezier(0.22,1,0.36,1); } .view-toggle.on-showcase .vt-thumb{transform:translateX(100%)} .vt-btn{ position:relative;z-index:1;background:none;border:none; padding:7px 13px;color:#9CA3AF;line-height:0; cursor:pointer;transition:color 0.3s; } .vt-btn.active{color:#07080C} @media(max-width:768px){ .view-toggle{display:inline-flex} /* (sec-head row layout lives in the final mobile block - cascade order) */ } /* ===== WATCH STAR ===== */ .watch-btn{ width:34px;height:34px;border-radius:50%;padding:0; background:rgba(8,9,13,0.72);border:1px solid rgba(255,255,255,0.14); display:flex;align-items:center;justify-content:center; color:#9CA3AF;cursor:pointer;transition:all 0.2s;flex-shrink:0; } .watch-btn svg{width:16px;height:16px} .watch-btn.watched{color:#FBBF24;border-color:rgba(245,158,11,0.5);box-shadow:0 0 10px rgba(245,158,11,0.25)} .watch-btn.watched svg{fill:currentColor} .a-card-img .watch-btn{position:absolute;right:10px;bottom:10px;z-index:3} /* ===== WATCH BAR ===== */ .watch-bar{ display:flex;align-items:center;gap:8px; overflow-x:auto;scrollbar-width:none; padding:10px 2px;margin:2px 0 14px; } .watch-bar::-webkit-scrollbar{display:none} .wb-label{ flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700; letter-spacing:1.6px;color:#FBBF24; } .wb-chip{ flex-shrink:0;display:inline-flex;align-items:center;gap:8px; padding:8px 11px;border-radius:100px; background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.25); cursor:pointer; } .wb-chip.ended{opacity:0.5;cursor:default} .wb-name{font-size:12px;font-weight:600;color:#E2E8F0;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wb-timer{font-family:'JetBrains Mono',monospace;font-size:10px;color:#5EEAD4} .wb-chip.ended .wb-timer{color:#9CA3AF} .wb-x{background:none;border:none;color:#9CA3AF;font-size:15px;cursor:pointer;padding:0 2px;line-height:1} /* ===== SHOWCASE (mobile + desktop >=1025) ===== Equal cells - the whole set visible in ~2 screens (one on desktop), every lot the same size. Tapping a live cell goes STRAIGHT to its auction page (Alex 2026-07-21; the quick-look sheet layer is retired from this path). */ .lot-showcase{display:none;margin:12px 0 24px} @media(max-width:768px){ body.sc-active .bento-grid{display:none} body.sc-active #slot14Container{display:none} body.sc-active .lot-dock{display:none !important} body.sc-active .lot-catalog{display:none !important} body.sc-active .now-block{display:none !important} body.sc-active .lot-showcase{display:block} } .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .sc-cell{ display:block;text-decoration:none;color:inherit; border-radius:12px;overflow:hidden;text-align:left;padding:0;cursor:pointer; background:linear-gradient(180deg,#12131a,#0c0d12); border:1px solid rgba(245,158,11,0.16); box-shadow:inset 0 1px 0 rgba(251,191,36,0.06),0 6px 16px -6px rgba(0,0,0,0.5); } .sc-cell:active{transform:scale(0.97)} /* View-switch deal-in: lots land on the floor with a small stagger whenever the Grid/Compact view flips (opacity/transform only - compositor). */ @keyframes cellDealIn{from{opacity:0;transform:translateY(14px) scale(0.97)}to{opacity:1;transform:none}} .view-anim > *{animation:cellDealIn 0.38s cubic-bezier(0.22,1,0.36,1) both;animation-delay:calc(var(--ci,0)*24ms)} @media (prefers-reduced-motion:reduce){.view-anim > *{animation:none}} .sc-img{position:relative;height:98px;background-size:cover;background-position:center top} .sc-img.noimg{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(245,158,11,0.07),transparent 70%),#0A0B11} .sc-init{font-family:'Sora',sans-serif;font-size:30px;font-weight:800;opacity:0.85} .sc-plate{ position:absolute;top:6px;left:6px; font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700;letter-spacing:1.2px; color:#FDE68A;background:rgba(8,9,13,0.8);border:1px solid rgba(245,158,11,0.3); padding:3px 6px;border-radius:3px;line-height:1; } .sc-body{padding:9px 10px 11px} .sc-name{font-family:'Sora',sans-serif;font-size:12px;font-weight:700;color:#E2E8F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sc-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px;gap:6px} .sc-bid{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#FBBF24} .sc-timer{font-family:'JetBrains Mono',monospace;font-size:9px;color:#5EEAD4;white-space:nowrap} .sc-timer.urgent{color:#F87171} /* SOLD + open-slot cells: the compact view shows the WHOLE floor (nothing hidden, no holes) - sold cells frozen, open slots invite a listing */ .sc-cell.sc-sold{cursor:default} .sc-sold .sc-img{filter:grayscale(1) brightness(0.75)} .sc-plate.sc-plate-sold{color:#E5E7EB;border-color:rgba(255,255,255,0.28);background:rgba(8,9,13,0.85)} .sc-sold .sc-bid{color:#9CA3AF} .sc-soldtag{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.2px;color:#9CA3AF} .sc-cell.sc-open{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; text-align:center;text-decoration:none;padding:14px;min-height:174px; border-style:dashed;border-color:rgba(245,158,11,0.25);background:rgba(245,158,11,0.02); } .sc-open-label{font-size:8px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:1.2px} .sc-open-count{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:800;color:#CBD5E1;letter-spacing:-0.5px} .sc-open-cta{font-size:11px;font-weight:700;color:#FBBF24} /* Quick-look sheet */ .ql-wrap{position:fixed;inset:0;z-index:1200;display:none} .ql-wrap.open{display:block} .ql-back{ position:absolute;inset:0;background:rgba(3,4,7,0.6); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transition:opacity 0.3s; } .ql-wrap.shown .ql-back{opacity:1} .ql-sheet{ position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto; border-radius:18px 18px 0 0; background:#0D0E15;border-top:1px solid rgba(245,158,11,0.25); box-shadow:0 -18px 50px rgba(0,0,0,0.6); transform:translateY(100%);transition:transform 0.38s cubic-bezier(0.22,1,0.36,1); padding-bottom:max(20px, env(safe-area-inset-bottom)); } .ql-wrap.shown .ql-sheet{transform:translateY(0)} .ql-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,0.18);margin:10px auto 4px} .ql-head{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 10px} .ql-nav{ width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12); color:#FDE68A;font-size:22px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0 0 3px; } .ql-nav[disabled]{opacity:0.25} .ql-counter{ font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.6px; color:#FDE68A;background:rgba(8,9,13,0.72);border:1px solid rgba(245,158,11,0.3); padding:6px 11px;border-radius:4px; } .ql-img{ position:relative;height:200px;margin:0 14px;border-radius:12px;overflow:hidden; background-size:cover;background-position:center top;border:1px solid rgba(245,158,11,0.18); } .ql-img.noimg{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(245,158,11,0.08),transparent 70%),#0A0B11} .ql-init{font-family:'Sora',sans-serif;font-size:56px;font-weight:800;opacity:0.85} .ql-img .watch-btn{position:absolute;right:10px;bottom:10px;z-index:2} .ql-info{padding:14px 18px 8px} .ql-name{ font-family:'Sora',sans-serif;font-size:20px;font-weight:800;letter-spacing:-0.3px; color:#F1F5F9;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2; } .ql-type{ font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700; letter-spacing:1.3px;text-transform:uppercase; padding:3px 8px;border-radius:4px; background:rgba(8,9,13,0.7);border:1px solid rgba(245,158,11,0.3); } .ql-metrics{margin-top:5px;font-size:12px;color:#9CA3AF} .ql-bidrow{margin-top:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .ql-bid{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:#FBBF24;letter-spacing:-0.5px} .ql-sub{font-size:11px;color:#9CA3AF} .ql-timer{font-family:'JetBrains Mono',monospace;font-size:12px;color:#5EEAD4} .ql-timer.urgent{color:#F87171} .ql-cta{ display:flex;align-items:center;justify-content:center;gap:6px; margin-top:14px;padding:14px;border-radius:8px; background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%); color:#07080C;font-family:'Sora',sans-serif;font-size:14px;font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(180,83,9,0.55),0 3px 9px -1px rgba(0,0,0,0.5); } .ql-hint{margin:10px 0 4px;text-align:center;font-size:9px;letter-spacing:1.2px;color:#9CA3AF} .img-badge{ position:absolute;top:14px;left:14px;z-index:2; padding:5px 11px;border-radius:5px; background:rgba(8,9,13,0.8);border:1px solid rgba(245,158,11,0.28);color:#FDE68A; font-family:'JetBrains Mono',monospace; font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px; } .img-badge.saas{color:#FBBF24;border-color:rgba(245,158,11,0.36)} .img-badge.ecom{color:#5EEAD4;border-color:rgba(13,148,136,0.42)} .img-badge.crypto{color:#FCD34D;border-color:rgba(251,191,36,0.42)} .img-badge.app{color:#7DD3FC;border-color:rgba(14,165,233,0.42)} .img-verified{ position:absolute;top:14px;right:14px;z-index:2; padding:3px 10px;border-radius:100px; background:rgba(13,148,136,0.15);border:1px solid rgba(13,148,136,0.15); font-size:10px;font-weight:700;color:#5EEAD4; } /* Card body timer - the classic Days/Hrs/Min blocks (previous design), now living opposite the revenue line instead of overlaying the photo (where it collided with the watch star). */ .body-timer-blocks{display:flex;gap:4px;flex-shrink:0} .body-timer-blocks .t-block{ text-align:center;padding:5px 8px;border-radius:8px; background:rgba(0,0,0,0.6); border:1px solid rgba(245,158,11,0.1);min-width:36px; } .body-timer-blocks .t-block .t-n{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#FBBF24;line-height:1.2} .body-timer-blocks .t-block .t-l{font-size:7px;color:#9CA3AF;text-transform:uppercase;letter-spacing:1.2px;font-weight:600} .body-timer-blocks.urgent .t-block{border-color:rgba(239,68,68,0.15)} .body-timer-blocks.urgent .t-block .t-n{color:#F87171} .a-card-body{padding:20px 22px 22px;position:relative;z-index:1} .bento-sm .a-card-body{padding:14px 16px 16px} /* Column cards (2026-09-02): the card is a flex column, the body fills it, and the bid well rides margin-top:auto (inline) - so the well + foot sit on ONE baseline in every card, with or without tech-stack rows. Skel and empty cells keep their own layout; sold cards mirror live cards 1:1. */ .a-card.dynamic:not(.skel):not(.empty),.a-card.sold-card{display:flex;flex-direction:column} .a-card.dynamic:not(.skel):not(.empty) .a-card-img,.a-card.sold-card .a-card-img{flex-shrink:0} .a-card.dynamic:not(.skel):not(.empty) .a-card-body,.a-card.sold-card .a-card-body{display:flex;flex-direction:column;flex:1;min-height:0} .a-card-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:#F3F4F6;letter-spacing:-0.3px;margin-bottom:12px} .bento-lg .a-card-title{font-size:20px;margin-bottom:16px} .bento-sm .a-card-title{font-size:14px;margin-bottom:8px} .a-card-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px} .bento-sm .a-card-metrics{margin-bottom:10px;gap:6px} .a-metric{padding:10px 12px;border-radius:8px;background:rgba(245,158,11,0.02);border:1px solid rgba(245,158,11,0.04)} .bento-sm .a-metric{padding:6px 8px} .a-metric-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#E5E7EB} .bento-sm .a-metric-val{font-size:12px} .a-metric-val.green{color:#0D9488} .a-metric-lbl{font-size:9px;color:#9CA3AF;text-transform:uppercase;letter-spacing:1.2px;margin-top:1px} .bento-sm .a-metric-lbl{font-size:8px} .a-card-bid{ padding:16px;border-radius:10px; background:linear-gradient(180deg,rgba(0,0,0,0.30),rgba(0,0,0,0.14)); border:1px solid rgba(255,255,255,0.04);border-top-color:rgba(0,0,0,0.5); box-shadow:inset 0 2px 6px rgba(0,0,0,0.4),inset 0 -1px 0 rgba(255,255,255,0.04); margin-bottom:16px; } .bento-sm .a-card-bid{padding:10px 12px;margin-bottom:10px} .bid-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px} .bid-current .bid-lbl{font-size:9px;color:#9CA3AF;text-transform:uppercase;letter-spacing:1.2px} .bid-current .bid-amt{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:900;letter-spacing:-1px;color:#F3F4F6} .bento-lg .bid-current .bid-amt{font-size:30px} .bento-sm .bid-current .bid-amt{font-size:20px} .bid-start{font-size:11px;color:#374151;text-decoration:line-through;padding-bottom:6px} .bid-bar{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,0.04);overflow:hidden;position:relative} .bid-fill{height:100%;width:100%;border-radius:2px;background:linear-gradient(90deg,#F59E0B,#0D9488);transform-origin:left;transition:transform 1.2s cubic-bezier(0.22,1,0.36,1)} .bid-bar-labels{display:flex;justify-content:space-between;margin-top:5px} .bid-bar-labels span{font-size:9px;color:#9CA3AF;font-weight:500} .bid-bar-labels .met{color:#0D9488} .a-card-foot{display:flex;justify-content:space-between;align-items:center} .foot-bidders{display:flex;align-items:center;gap:8px} .f-avatars{display:flex} .f-av{ width:24px;height:24px;border-radius:50%;border:2px solid #0A0B10;margin-left:-5px; overflow:hidden; } .f-av:first-child{margin-left:0} .f-av img{width:100%;height:100%;object-fit:cover} .f-bid-n{font-size:11px;color:#9CA3AF;font-weight:600} .place-bid{ padding:10px 22px;border-radius:8px; background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%); /* living-key body */ border:none;color:#07080C;font-size:13px;font-weight:700; cursor:pointer;transition:all 0.3s;font-family:'Sora',sans-serif; overflow:hidden;position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(180,83,9,0.55),0 3px 8px -1px rgba(0,0,0,0.5),0 2px 10px rgba(245,158,11,0.15); } .place-bid:hover{ background:linear-gradient(135deg,#FCD34D 0%,#FBBF24 100%);transform:translateY(-1px); animation:ctaBreath 3s ease-in-out infinite; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(180,83,9,0.5), 0 5px 14px -2px rgba(0,0,0,0.5), 0 4px calc(18px + var(--bloom)*10px) rgba(245,158,11,calc(0.22 + var(--bloom)*0.12)), 0 0 calc(26px + var(--bloom)*14px) rgba(251,191,36,calc(0.08 + var(--bloom)*0.08)); } .place-bid:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 2px 6px rgba(0,0,0,0.25),0 1px 3px rgba(0,0,0,0.4); } .bento-sm .place-bid{padding:7px 14px;font-size:11px} .a-card.empty{ background:transparent; min-height:200px;border-style:dashed;border-color:rgba(245,158,11,0.06); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; } .a-card.empty:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,0.14)} /* invitation, not a lot - no amber */ .a-card.empty::before{display:none} .empty-diamond{font-size:24px;opacity:0.2;margin-bottom:4px;color:#F59E0B} /* SOLD slot - the flagged sold lot is the REAL buildListingCard output, 1:1 a live card, frozen by CSS only: gray-filtered photo + dead gray Bid key + a restrained mono SOLD plate (LOT-plate family, teal = closed deal). The container empty cell goes transparent - the card carries its own chrome; the slot countdown + list-CTA ride in a slim note panel on top. */ .a-card.empty:has(.sold-card){ padding:0;gap:8px;min-height:0; border:none;background:transparent;box-shadow:none; align-items:stretch;justify-content:flex-start; } /* The frozen card fills its slot cell edge-to-edge - same footprint as the live cards beside it (they get this from grid stretch; the nested sold card is a flex child of the transparent wrapper, so it needs the grow itself). */ .a-card.empty > .sold-card{flex:1 1 auto;width:100%} /* Frozen touches - everything else stays exactly as a live card */ .sold-card .a-card-img img{filter:grayscale(1) brightness(0.75)} .sold-card .place-bid{ background:linear-gradient(135deg,#3F4451 0%,#2B2F3A 100%); color:#9CA3AF;cursor:default; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 -1px 0 rgba(0,0,0,0.4),0 1px 3px rgba(0,0,0,0.4); animation:none; } .sold-card .watch-btn{display:none} .sold-card .body-timer-blocks .t-block{border-color:rgba(255,255,255,0.08)} .sold-card .body-timer-blocks .t-block .t-n{color:#9CA3AF} /* SOLD plate - design-code material: a solid physical panel (dark panels are never translucent), LOT-plate family type. Teal = closed deal; cool-dark body (its own light temperature vs the amber cards), teal-lit top edge (light is brightness) + contact/ambient shadows falling down like every raised part. Faint bloom on the letters - a lit brass sign, not a tag. */ .sold-plate{ position:absolute;top:10px;right:10px;z-index:2; font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.6px; color:#5EEAD4;text-shadow:0 0 14px rgba(94,234,212,0.3); background:linear-gradient(180deg,#131719 0%,#0c0f12 100%); border:1px solid rgba(13,148,136,0.45); padding:4px 9px;border-radius:4px;line-height:1; box-shadow:inset 0 1px 0 rgba(94,234,212,0.2),0 1px 2px rgba(0,0,0,0.5),0 3px 9px rgba(0,0,0,0.45); } .empty-txt{font-size:12px;color:#9CA3AF;font-weight:500} .empty-time{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:800;color:#9CA3AF;letter-spacing:-0.5px} /* ============ LATEST GUIDES ============ */ .latest-guides{position:relative;z-index:1;padding:80px 32px 100px;max-width:1360px;margin:0 auto} .lg-header{text-align:center;margin-bottom:40px} .lg-label{ font-family:'Sora',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:4px; color:#FBBF24;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px; } .lg-label svg{width:16px;height:16px} .lg-title{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-1.5px;margin-bottom:10px;line-height:1.15} .lg-title span{color:#FBBF24} .lg-subtitle{font-size:15px;color:#9CA3AF;max-width:520px;margin:0 auto} .lg-scroll-wrap{ position:relative; mask-image:linear-gradient(90deg,transparent 0%,black 4%,black 96%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 4%,black 96%,transparent 100%); } .lg-scroll{ display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:4px 16px 20px;scrollbar-width:none;-ms-overflow-style:none; } .lg-scroll::-webkit-scrollbar{display:none} .lg-card{ min-width:300px;max-width:320px;flex-shrink:0;scroll-snap-align:start; border-radius:10px;overflow:hidden; background:radial-gradient(ellipse 200px 120px at 100% 100%,rgba(245,158,11,0.04) 0%,transparent 65%),linear-gradient(180deg,#12131a 0%,#0c0d12 100%); border:1px solid rgba(255,255,255,0.06); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 1px 2px rgba(0,0,0,0.45),0 8px 20px -8px rgba(0,0,0,0.45); transition:transform 0.4s, border-color 0.4s, box-shadow 0.4s;display:flex;flex-direction:column; text-decoration:none;color:inherit;position:relative; } .lg-card:hover{border-color:rgba(245,158,11,0.22);transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 2px 4px rgba(0,0,0,0.3),0 20px 48px -10px rgba(0,0,0,0.55)} .lg-card-top{padding:20px 20px 0;flex:1;display:flex;flex-direction:column} .lg-tag{ display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px; padding:3px 8px;border-radius:100px;margin-bottom:12px;width:fit-content; } .lg-tag.review{color:#8B5CF6;background:rgba(139,92,246,0.1)} .lg-tag.guide{color:#14B8A6;background:rgba(20,184,166,0.1)} .lg-tag.comparison{color:#F59E0B;background:rgba(245,158,11,0.1)} .lg-tag.buyer{color:#3B82F6;background:rgba(59,130,246,0.1)} .lg-tag.fees{color:#F43F5E;background:rgba(244,63,94,0.1)} .lg-card-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;line-height:1.35;color:#E2E8F0;margin-bottom:8px} .lg-card-desc{font-size:12px;color:#9CA3AF;line-height:1.55;flex:1} .lg-card-footer{ padding:14px 20px;border-top:1px solid rgba(255,255,255,0.03); display:flex;align-items:center;justify-content:space-between; } .lg-read{font-size:11px;color:#9CA3AF} .lg-arrow{font-size:13px;font-weight:700;color:#FBBF24;transition:transform 0.3s} .lg-card:hover .lg-arrow{transform:translateX(4px)} .lg-cta{text-align:center;margin-top:32px} .lg-cta a{ display:inline-block; font-family:'Sora',sans-serif;font-size:13px;font-weight:500; color:#9CA3AF;padding:0; border:none;background:none; transition:color 0.3s;text-decoration:none;letter-spacing:0.3px; } .lg-cta a:hover{color:#FBBF24} @media(max-width:600px){.lg-card{min-width:270px;max-width:280px}} /* ============ WHY SECTION ============ */ .why{position:relative;z-index:1;padding:100px 32px;max-width:1140px;margin:0 auto} .why .sec-label{ text-align:center;font-family:'Sora',sans-serif;font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:4px;color:#F59E0B;margin-bottom:16px; } .why h2{ text-align:center;font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-0.035em; margin-bottom:64px;line-height:1.1; } .why-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} /* Borderless, lit from beneath (2026-09-20): the retired flat 4-side amber border is gone (DESIGN.md 3: "Never a flat 4-side amber hover border" - the auction cards moved to the underglow rim long ago; the why-cards were the last stragglers). The plate is revealed only by a lit top edge + a faint living underglow at rest; on hover the canonized 1px underglow ring (::after, same recipe as .a-card-halo) blooms from BENEATH with a warm floor spill. Light does the reveal - no drawn border anywhere. 01/02/03 kept. */ .why-card{ padding:40px 32px;border-radius:10px; background: radial-gradient(ellipse 62% 48% at 50% 116%,rgba(245,158,11,0.06) 0%,transparent 70%), linear-gradient(180deg,rgba(20,21,29,0.60) 0%,rgba(10,11,16,0.22) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 1px 2px rgba(0,0,0,0.4),0 18px 40px -20px rgba(0,0,0,0.5); position:relative;overflow:hidden;transition:transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s; } .why-card:hover{ transform:translateY(-6px); box-shadow: inset 0 1px 0 rgba(251,191,36,0.16), 0 2px 4px rgba(0,0,0,0.35), 0 28px 56px -14px rgba(0,0,0,0.6), 0 14px 40px -14px rgba(251,191,36,0.14); /* warm spill BENEATH (VIP-underglow family) */ } /* Hover underglow ring on the perimeter rail (masked to 1px), lit from BENEATH: bottom catches most light -> warm sides -> bronze -> faint teal whisper on top. Same family/recipe as .a-card-halo. Opacity-only = compositor-cheap. */ .why-card::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; border:1px solid transparent; background:linear-gradient(0deg,rgba(252,211,77,0.60) 0%,rgba(245,158,11,0.28) 32%,rgba(180,83,9,0.12) 64%,rgba(13,148,136,0.18) 100%) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box; -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box; mask-composite:exclude; opacity:0;transition:opacity 0.45s; } .why-card:hover::after{opacity:1} .why-card .big-num{ position:absolute;top:-12px;right:20px; font-family:'Sora',sans-serif;font-size:80px;font-weight:800;line-height:1; background:linear-gradient(180deg,rgba(245,158,11,0.08),transparent); -webkit-background-clip:text;-webkit-text-fill-color:transparent;pointer-events:none; } .why-card h3{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;color:#F3F4F6;margin-bottom:10px;letter-spacing:-0.3px} .why-card p{font-size:14px;color:#9CA3AF;line-height:1.8} .why-card .why-number{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.04)} .why-card .why-number .wn-val{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:900;letter-spacing:-1px} .wn-val.c1{color:#FBBF24}.wn-val.c2{color:#14B8A6}.wn-val.c3{color:#F59E0B} .why-card .why-number .wn-lbl{font-size:11px;color:#9CA3AF;margin-top:2px} .why-card .why-checklist{ margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.04); display:flex;flex-direction:column;gap:6px; } .why-card .why-checklist .wc-item{ display:flex;align-items:center;gap:10px; font-family:'Sora',sans-serif;font-size:15px;font-weight:700; color:#E2E8F0;letter-spacing:-0.2px; } .why-card .why-checklist .wc-item svg{ width:16px;height:16px;flex-shrink:0;color:#14B8A6; padding:3px;border-radius:50%; background:rgba(20,184,166,0.12); box-sizing:content-box; } .why-card .why-checklist .wc-lbl{ font-size:11px;color:#9CA3AF;margin-top:6px;letter-spacing:0.04em; } /* ============ SELLER CTA ============ */ /* Vertical padding tracks the viewport: the whole end scene (seller + the 4-column footer) must fit ONE screen under the lifting curtain - the taller structured footer ate the slack fixed paddings relied on. */ .seller{position:relative;z-index:1;padding:clamp(48px,11vh,120px) 32px clamp(56px,13vh,140px);overflow:hidden;background:#05060A} /* SCENE 3 - the finale: a single spotlight falls on the closing headline */ .seller-bg{ position:absolute;inset:0; background: radial-gradient(ellipse 46% 42% at 50% 0%,rgba(251,191,36,0.14),transparent 66%), radial-gradient(ellipse 70% 55% at 50% 6%,rgba(226,232,240,0.07),transparent 70%), radial-gradient(ellipse 50% 40% at 50% 50%,rgba(251,191,36,0.055),transparent); } .seller-blob1{display:none} .seller-blob2{display:none} /* seller's old top hairline removed - the rainbow line now rides the curtain hem */ .seller-inner{ max-width:900px;margin:0 auto;text-align:center; position:relative;z-index:1; } .seller-inner h2{ font-size:clamp(40px,6vw,72px);font-weight:800;letter-spacing:-0.04em;line-height:1.05; margin-bottom:clamp(24px,5.5vh,48px);color:#F1F5F9; position:relative; /* the 80/160px text-shadows (+ the glow-text drop-shadow) were re-blurred on every gradient step - at Retina each step cost ~100ms. All glow now lives on the static ::before halo below: painted once, never repaints. */ } .seller-inner h2::before{ content:'';position:absolute;inset:-30px -70px;z-index:-1;pointer-events:none; /* fade hits TRUE zero at 62% - alpha at the box edges is exactly 0, no visible seam (the previous 78% stop left residual alpha at the box top = a faint band over the hem) */ background:radial-gradient(ellipse 50% 65% at 50% 55%,rgba(251,191,36,0.10) 0%,rgba(251,191,36,0.035) 40%,transparent 62%); } .seller-inner h2 .glow-text{ background:linear-gradient(135deg,#F59E0B,#FBBF24,#14B8A6); background-size:200% auto; -webkit-background-clip:text;-webkit-text-fill-color:transparent; /* steps(): glyph re-raster ~4x/sec instead of 60 - and with no filter attached, each step is now just a cheap text paint */ animation:heroGradient 6s steps(24) infinite; } @keyframes btnBorderSpin{ 0%{--angle:0deg} 100%{--angle:360deg} } @property --angle{ syntax:''; initial-value:0deg; inherits:false; } .sell-btn-wrap{ display:inline-block;border-radius:100px; transition:transform 0.4s; } .sell-btn{ position:relative;display:inline-flex;align-items:center; padding:17px 44px;border-radius:100px; font-size:15px;font-weight:700;color:#07080C; background:linear-gradient(135deg,#F59E0B,#FBBF24); border:none;cursor:pointer;font-family:'Sora',sans-serif; box-shadow:0 0 0 1px rgba(245,158,11,0.3),0 4px 24px rgba(245,158,11,0.25),0 12px 48px rgba(245,158,11,0.1); transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;overflow:hidden; } .sell-btn::after{ content:'';position:absolute;inset:0;border-radius:100px; background:linear-gradient(135deg,rgba(255,255,255,0.25),transparent 50%);pointer-events:none; } .sell-btn .shimmer{ position:absolute;top:0;left:0;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); animation:shimmerSlide 3s ease-in-out infinite; will-change:transform; } .sell-btn-wrap:hover .sell-btn{ color:#07080C; transform:translateY(-3px) scale(1.02); animation:ctaBreath 3s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(245,158,11,calc(0.42 + var(--bloom)*0.14)), 0 8px calc(40px + var(--bloom)*14px) rgba(245,158,11,calc(0.26 + var(--bloom)*0.12)), 0 20px calc(64px + var(--bloom)*22px) rgba(251,191,36,calc(0.10 + var(--bloom)*0.08)); } /* ============ FOOTER ============ */ /* ============ CURTAIN REVEAL ============ Everything above the amber–teal hairline is the curtain: on the final stretch of scroll it lifts, revealing the seller CTA and the footer that stand still beneath. Pure CSS sticky - zero JS, zero runtime cost. */ .curtain-zone{position:relative} .curtain-top{ position:relative;z-index:1; background:linear-gradient(180deg,#08090D 0%,#050609 100%); } .curtain-top::after{ /* the hem - the rainbow hairline rides the lifting edge */ content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,#F59E0B,#14B8A6,transparent); } /* Opaque end-scene paper: the fixed cosmos (lantern under-glow + flipped ramp) must not shine through the finale/footer - the page ends in the dark it always ended in. Matches the seller's #05060A = zero seam. */ /* --crt-peek (2026-09-16 v2, Alex: "collecting dust заезжает выше экрана, положение меняется между проходами"): finale taller than the viewport + bottom:0 = sticky pins its TOP above the screen, and HOW MUCH depends on the browser bar state at that moment (down-pass collapses the bar, a short second down-pass doesn't) - that's the wandering headline. The curtain JS measures the shortfall against the small (bars-visible) viewport and hands it here as a NEGATIVE bottom: the finale now pins TOP-at-screen-top, the overflow waits below the fold and scrolls in naturally at the zone's end. 0px on every viewport that fits = desktop untouched. (The v1 no-stick position:static fallback killed the curtain-lift - Alex: "эффект верни".) */ .curtain-under{position:sticky;bottom:var(--crt-peek,0px);z-index:0;background:#05060A} /* Revealed scene: simple sequenced fades, top to bottom (headline → CTA → footer), reversible. Armed by JS (.curtain-anim) so nothing hides without it. */ .curtain-anim .seller-inner h2, .curtain-anim .seller-inner a.reveal, .curtain-anim footer{opacity:0;transition:opacity .6s ease} .curtain-anim.open .seller-inner h2{opacity:1} .curtain-anim.open .seller-inner a.reveal{opacity:1;transition-delay:.25s} .curtain-anim.open footer{opacity:1;transition-delay:.45s} footer{ position:relative;z-index:1; border-top:1px solid rgba(245,158,11,0.04); padding:clamp(22px,4vh,40px) 32px clamp(18px,3.5vh,32px); display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px; max-width:1360px;margin:0 auto; font-size:12px;color:#4B5563; /* deliberately subdued - darkened further 2026-07-14 (Alex: "не кричал") */ } .ft-logo{font-family:'Sora',sans-serif;font-weight:800;font-size:14px;color:#6B7280;margin-bottom:10px} .ft-brand p{line-height:1.65;max-width:280px;margin:0} .ft-head{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#6B7280;margin-bottom:10px} footer a{display:block;color:#4B5563;margin:0 0 7px;transition:color 0.3s} footer a:hover{color:#FBBF24} /* ===== FLOOR-FIRST HERO v2 (2026-07-21) - compact centered poster flowing straight into the auction floor: one center axis, tight seam, the stage-ramp light carries the handoff. VIP lot concept retired (Alex) - no special lot material; the floor is equal until the grid-view variants land. Desktop-only overrides (>=1025px), zero markup changes - tablet/mobile untouched. Must sit AFTER the .auctions/.sec-head base rules (equal specificity, source order). */ @media (min-width:1025px){ .hero{min-height:0;padding-top:140px;padding-bottom:36px} .hero-content{grid-template-columns:minmax(0,1fr);gap:0;max-width:900px;justify-items:center} .hero-left{display:flex;flex-direction:column;align-items:center;text-align:center} .hero h1{font-size:clamp(40px,4.2vw,68px);margin-bottom:26px} /* triad on ONE line under the title (the split stacked it in the narrow column); plain inline words - the sweep overlays anchor to the BLOCK .line-2, and the inter-word spaces are real text nodes in the markup */ .hero h1 .line-2{display:block} .hero h1 .line-2a,.hero h1 .line-2b,.hero h1 .line-2c{display:inline} .hero-desc{justify-content:center;max-width:none;margin-bottom:30px} .hero-actions{justify-content:center} /* the seam: floor opens right under the poster. Header stays left-aligned, the mobile Grid/Compact switcher now fills the right slot (2026-07-21; the parked catalog/stage views from 9e4679b are a separate track). */ .auctions{padding-top:28px} .sec-head{margin-bottom:30px} .view-toggle{display:inline-flex} /* Compact showcase on desktop: same equal-cells idea, more columns; grid + 14th slot hide while active (mirrors the mobile sc-active rules) */ body.sc-active .bento-grid{display:none} body.sc-active #slot14Container{display:none} body.sc-active .lot-showcase{display:block} /* fixed 5 columns: 14 slot cells + the sponsored tile = 15 = three clean rows, every tile the same size, zero holes (auto-fill left ragged rows) */ .sc-grid{grid-template-columns:repeat(5,1fr);gap:12px} .sc-img{height:112px} .sc-cell:hover{border-color:rgba(245,158,11,0.4)} .sc-cell.sc-sold:hover,.sc-cell.sc-open:hover{border-color:rgba(245,158,11,0.35)} /* sponsored carousel as a native tile: same frame as every cell, its own chrome stripped, SPONSORED badge kept (honest, just not alien) */ .sc-cell.sc-spotcell{padding:0;overflow:hidden;display:flex} .sc-spotcell .spot-card{width:100%;border:none;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#12131a,#0c0d12)} .sc-spotcell #spotCarousel{min-height:0} .sc-spotcell .spot-photo-area{height:112px} .sc-spotcell .spot-badge,.sc-spotcell .spot-category-badge{top:6px;padding:3px 6px;font-size:7px;letter-spacing:1.2px} .sc-spotcell .spot-badge{left:6px} .sc-spotcell .spot-category-badge{right:6px} .sc-spotcell .spot-body{padding:9px 10px 11px;gap:5px} .sc-spotcell .spot-company{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sc-spotcell .spot-headline{font-size:12px;line-height:1.3;letter-spacing:-0.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .sc-spotcell .spot-desc,.sc-spotcell .spot-services,.sc-spotcell .spot-stats, .sc-spotcell .spot-social,.sc-spotcell .spot-pitch,.sc-spotcell .spot-dots, .sc-spotcell .spot-nav-arrows{display:none} .sc-spotcell .spot-cta{padding:6px 12px;font-size:10px;border-radius:6px} .sc-spotcell .spot-card:hover{transform:none} /* Quick-look: width-capped centered sheet instead of the full-width phone one */ .ql-sheet{left:calc(50% - 280px);right:auto;width:560px} /* footlight reaches a touch higher to catch the poster's light at the ramp */ .auctions::after{height:140px;background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(245,158,11,0.085) 0%,rgba(245,158,11,0.03) 45%,transparent 68%)} /* HOUSE LIGHTS - the hall lights up FOR the visitor (~1.6s, every load, all on existing layers): warm lamp over the poster -> headline steps out -> triad, board, CTA -> the stage ramp ignites from center and the footlight comes up over the floor. Lot emergence (sc-in) lands after by nature. */ .hero-light{animation:lampWarm 1.1s ease-out 0.1s both} .hero-left{animation:none} .hero h1{animation:posterStep 0.9s cubic-bezier(0.22,1,0.36,1) 0.35s both} .hero-desc{animation:posterStep 0.9s cubic-bezier(0.22,1,0.36,1) 0.55s both} .hero-actions{animation:posterStep 0.9s cubic-bezier(0.22,1,0.36,1) 0.7s both} .auctions::before{animation:rampIgnite 0.7s ease-out 0.45s both} .auctions::after{animation:lampWarm 0.9s ease-out 0.55s both} /* the floor's CONTENT waits for the lamp. Heading, lot grid and ad row hold dark until the ramp/footlight are up, then rise into the lit floor as one unit - right after the footlight, causality preserved. Tail compressed 1.15/1.25/1.35s -> 0.45/0.55/0.65s (2026-08-29: time-to-product; the old tail held the marketplace hostage to the theatre for a full extra second). It used to pop in early on its own IntersectionObserver emergence, out of step with the house lights (Alex 2026-08-06: auctions should appear only after the lamp lights up). ::before/::after are excluded — they ARE the floor lighting up and keep their own cues above. */ .auctions > *{animation:auctionsFloorIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.65s both} /* SUSPENSION (v5 2026-08-29): the floor's cargo (heading, grid, ad row) sags ~28px into the slab mid-pass and catches up by the end - the slab stops feeling like a rigid plate bolted to the scroll. Lives on the CHILDREN (the ramp/footlight pseudos must ride rigid with the hem, so .auctions itself stays untransformed). Combined shorthand: a separate rule would REPLACE auctionsFloorIn (same specificity, one property). v6: floorIn is opacity-only, crtSettle owns transform alone -> both compositor-clean. */ @supports (animation-timeline: scroll()){ .auctions > *{ animation:auctionsFloorIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.65s both, crtSettle linear both; animation-timeline:auto,scroll(root); animation-range:normal,0 var(--crtRange,480px); } html.perf-off-curtain .auctions > *{ animation:auctionsFloorIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.65s both; animation-timeline:auto;animation-range:normal; } /* v7: the lantern clings to the seam and concentrates while the hem wades through it (see crtLampCling). Combined shorthand - lampWarm owns opacity (load), crtLampCling owns transform (scroll): both composited. */ .hero-light{ animation:lampWarm 1.1s ease-out 0.1s both, crtLampCling linear both; animation-timeline:auto,scroll(root); animation-range:normal,0 var(--crtRange,480px); } html.perf-off-curtain .hero-light{ animation:lampWarm 1.1s ease-out 0.1s both; animation-timeline:auto;animation-range:normal; } } } @keyframes lampWarm{from{opacity:0}to{opacity:1}} @keyframes posterStep{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes rampIgnite{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}} /* v6 2026-08-29: opacity-ONLY. The 18px translate made floorIn a SECOND transform animation on the same elements as crtSettle -> Chrome demoted the pair off the compositor -> per-frame main-thread recalc trailing the compositor-pinned cover = the card jitter Alex flagged (same class as the v2 JS-var swim). The load rise is still carried by each card's own sc-in emergence stagger. */ @keyframes auctionsFloorIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .hero-light,.hero h1,.hero-desc,.hero-actions,.auctions::before,.auctions::after,.auctions > *{animation:none!important} .hero h1 .line-2{animation:none!important} /* static resting frame */ .hero h1 .line-2::before,.hero h1 .line-2::after{animation:none!important;opacity:0!important} /* sweep off, base gradient stays */ .hl-grain{animation:none!important} .hl-grain.p1{opacity:.15} } /* short laptops: tighten the poster so the floor's first row is clearly in view */ @media (min-width:1025px) and (max-height:820px){ .hero{padding-top:112px;padding-bottom:28px} .hero-desc{margin-bottom:24px} } /* ============ RESPONSIVE ============ */ @media(max-width:1024px){ /* no featured card below the poster anymore - drop the 100vh stage cap so the floor opens right under the hero, desktop-style */ .hero{min-height:0} .hero-content{grid-template-columns:1fr;text-align:center;gap:40px} .hero-left{display:flex;flex-direction:column;align-items:center} .hero-actions{justify-content:center} .bento-grid{grid-template-columns:repeat(2,1fr)} .bento-lg{grid-column:span 2} .seller-inner{text-align:center} } @media(max-width:768px){ nav{padding:0 16px} .nav-center{display:none} .hero{padding:120px 16px 36px} /* tight seam to the floor (was 60px bottom) */ .auctions{padding:28px 16px 80px} /* was 40px top - mirrors the desktop seam */ .bento-grid{grid-template-columns:1fr} .bento-lg{grid-column:span 1;grid-row:span 1} .bento-lg .a-card-img{height:200px} .why{padding:60px 16px} /* finale trimmed 80/80 -> 64/40 (2026-09-16): together with --crt-peek this lets seller+footer fit the bars-visible phone viewport at full scroll - the last piece of the wandering "collecting dust" headline. Physics note: the headline's resting height at page end = viewport minus EVERYTHING from the headline down (top padding cancels out) - only below-headline slack can lift it clear of the fixed nav+ticker chrome (~92px). */ .seller{padding:64px 16px 40px} .seller-inner h2{margin-bottom:24px} /* was clamp -> ~36 on phones */ .sec-head{flex-direction:column;gap:12px;align-items:flex-start} footer{grid-template-columns:1fr 1fr;gap:22px 20px} /* row gap 28->22: finale height budget (see .seller trim) */ .ft-brand{grid-column:1/-1} .t-item{min-width:300px} .ticker-section{padding:40px 0 60px} .featured-bid-row{flex-direction:column;gap:16px;align-items:stretch} .featured-bid-right{align-items:center} .cta-switch button{padding:13px 22px;font-size:13.5px;gap:8px} .cta-switch button svg{width:17px;height:17px} } /* ===== HAMBURGER MENU BUTTON (hidden on desktop) ===== */ .hamburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;background:none;border:none;z-index:1010;position:relative} .hamburger .hb-line{position:absolute;width:18px;height:1.5px;background:#9CA3AF;border-radius:1px;transition:all 0.3s ease} .hamburger .hb-line:nth-child(1){transform:translateY(-4px)} .hamburger .hb-line:nth-child(2){opacity:1} .hamburger .hb-line:nth-child(3){transform:translateY(4px)} .hamburger.active .hb-line{background:#FBBF24} .hamburger.active .hb-line:nth-child(1){transform:rotate(45deg)} .hamburger.active .hb-line:nth-child(2){opacity:0} .hamburger.active .hb-line:nth-child(3){transform:rotate(-45deg)} @media(max-width:768px){ .hamburger{display:flex} /* guests: the burger carries Sign In - no duplicate button in the bar. Logged-in users: auth JS turns .nav-sign into the avatar and re-shows it via inline display (inline wins over this rule). */ .nav-sign{display:none} } @media(max-width:480px){ .hero h1{letter-spacing:-0.02em} .featured-bid-info .fb-amount{font-size:24px} .featured-timer-overlay{gap:6px} .timer-block{padding:6px 10px;min-width:48px} .timer-block .t-num{font-size:18px} .t-item{min-width:280px;padding:10px 14px} /* Featured metrics: stack on very small screens */ .featured-metrics{flex-direction:column;gap:6px} /* Touch targets: ensure minimum 44px height */ .place-bid{padding:12px 22px;min-height:44px} .featured-place-bid{padding:14px 28px;min-height:44px} .nav-sign{display:none} /* Footer: tighter phone padding (links are block items in the column grid); 24/16 (was 32/28) - finale height budget, see the .seller trim note */ footer{padding:24px 16px 16px} /* Seller section heading */ .seller-inner h2{letter-spacing:-0.02em} /* Hero description: ensure readability */ .hero-desc{gap:8px 10px} /* fluid: the whole 3-bullet row must fit ONE line down to the smallest phones */ .hero-desc .hd-num{font-size:clamp(12px,4.2vw,16px)} .hero-desc .hd-label{font-size:clamp(9.5px,3.1vw,12px)} /* Auction cards: reduce card image height further */ .a-card-img{height:160px!important} .bento-sm .a-card-body{padding:12px 14px 14px} /* Ad row photo area height */ .spot-photo-area{height:200px} /* Ticker title */ .ticker-title{font-size:24px;padding:0 16px} /* Section headings */ .sec-head h2{font-size:26px} /* Latest guides: smaller cards */ .lg-card{min-width:260px;max-width:270px} .lg-title{font-size:24px} } /* iOS auto-zoom fix - Safari zooms inputs <16px font-size on focus */ @media (max-width:768px){ input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="search"],input[type="url"],input:not([type]),textarea,select,.form-input{font-size:16px} } /* ===== FEATURED PODIUM (mobile) ===== Keep the card's structure, upgrade its stage presence: stronger golden frame + outer glow, the under-card living light turned up so it reads on a phone, metric chips in one scrollable row (no more tall stack), bid row back to a single line. Desktop untouched. (After all mobile rules - cascade wins over the column layouts at 768/480.) */ @media(max-width:768px){ .featured-card{ border-color:rgba(245,158,11,0.42); box-shadow: inset 0 1px 0 rgba(251,191,36,0.22), 0 2px 4px rgba(0,0,0,0.5), 0 18px 40px -12px rgba(0,0,0,0.6), 0 0 44px rgba(245,158,11,0.13); } /* Living light under the podium - visible on phones, same breath */ .hero-featured::before{background:radial-gradient(ellipse 60% 46% at 50% 62%,rgba(251,191,36,0.22),rgba(245,158,11,0.08) 48%,transparent 76%)} .hero-featured::after{background:radial-gradient(ellipse 64% 50% at 50% 50%,rgba(252,224,150,0.16),transparent 72%)} .featured-subtitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .featured-metrics{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px} .featured-metrics::-webkit-scrollbar{display:none} .f-metric{flex:0 0 auto;padding:8px 12px;background:rgba(245,158,11,0.05);border-color:rgba(245,158,11,0.14)} .featured-bid-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px} .featured-bid-right{align-items:flex-end} .featured-card:hover{transform:none} /* "Live Auctions" heading + view switch in one row */ .sec-head{flex-direction:row;align-items:center;justify-content:space-between;gap:12px} /* Compact lot cards: tighter photo + body so a whole card fits one screen */ .bento-md .a-card-img{height:140px!important} .bento-md .a-card-body{padding:13px 14px 14px} .bento-md .a-card-title{font-size:15px;margin-bottom:8px} /* Perf: freeze the VIP scene's breathing light + animated grain on phones - large blurred/blended layers repainting every frame were the scroll-lag band between the hero and the grid. Static glow/grain keeps the look. Dock loses backdrop-filter (the #1 mobile scroll killer) - solid panel. */ .hero-featured::before,.hero-featured::after{animation:none} .scene-grain{animation:none;opacity:0.1} .lgrain{animation:none} /* .hl-grain flip-book keeps running on phones - opacity-only phase cycling is the touch-safe pattern (same as .lgrain's mobile flipbook); it also sleeps during scroll via html.is-scrolling */ .lot-dock{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,9,13,0.97)} /* Cold-start: below-fold sections (double-ticker testimonials, guides strip, why) skip layout+paint until scrolled near - big first-load saver. .seller REMOVED again (2026-09-16, Alex: "collecting dust заезжает выше экрана") - same footgun as the documented 2026-08-03 lesson up top: the 640px placeholder vs the real ~340px scene inflates the sticky finale until it renders, so the document end (and the pinned curtain-under) JUMPS ~300px right as the user arrives at the bottom. */ .latest-guides,.ticker-section,.why{content-visibility:auto;contain-intrinsic-size:auto 640px} }
New auctions going live - browse now
Every listing is manually reviewed
Built-in Escrow.com - every deal protected
Zero commission - sellers keep 100%
5-day time-boxed auctions
New auctions going live - browse now
Every listing is manually reviewed
Built-in Escrow.com - every deal protected
Zero commission - sellers keep 100%
5-day time-boxed auctions

Online Businesses Verified. Auctioned. Sold.

14listings at a time 5-dayauctions 0%commission

How it works?

Live Auctions

Currently live on the auction floor — text version
  • WriteVoice — Mobile App · Productivity. AI dictation that lives in your keyboard - speak naturally on iPhone, Mac or web, and get cleaned-up, ready-to-send text in the tone of the app you're in. Starting at $7,000 · ends 2026-10-01.
  • truthping — SaaS · AI/ML. Market Monitoring for Polymarket & Kalshi. Starting at $500 · ends 2026-10-01.
  • SkyMed — SaaS · AI/ML. A B2B SaaS blueprint for autonomous medical drone logistics and emergency cold-chain delivery. Starting at $25,000 · ends 2026-09-26.
  • Nexora — AI Tools & Agents. Functional Chromium-based Windows AI browser with custom UI, productivity features and transferable source-code assets. Current bid $60,000 (1 bid) · ends 2026-10-01.
  • QA Genie Studio — SaaS · AI/ML. AI-powered QA workflow platform for generating, managing, executing, and reporting software tests. Starting at $100,000 · ends 2026-09-28.
  • WebClarity.AI — Chrome Extension. A website-inspection suite in one lightweight cross-browser extension. Starting at $5,000 · ends 2026-09-28.
  • Vex VPN. High-speed VPN right inside Telegram. Starting at $5,000 · ends 2026-10-01.
  • DodgePrint — SaaS · Entertainment. DodgePrint is a multi‑channel SaaS platform for managing product listings, orders, and analytics on Etsy, Amazon, TikTok, and Shopify. Starting at $1,000,000 · ends 2026-10-01.
  • Speechyou — API/Developer Tool · Social. AI transcription software that records meetings, converts audio to text, and translates in seconds. Current bid $12,500 (2 bids) · ends 2026-09-26.
  • VidSave — Mobile App · Social. Save and manage your favorite videos in one secure and easy-to-use place. Current bid $6,000 (1 bid) · ends 2026-09-28.

Snapshot of the live 5-day auctions above (refreshed every few minutes). Machine-readable feed: auctions.json (CC BY 4.0). Bidding is free after one-time verification; sellers pay a flat $199 listing fee, 0% commission. Pre-revenue projects are accepted.

From the Blog
Helpful Guides
Manifesto
The ExitBid Format, Explained
A temporary market instead of a passive listing - 14 slots, five days, open bids, 0%.
11 min →
Valuation
Is My App Worth Anything?
Calculators say zero for pre-revenue apps. Buyers don't. Three signals - and a free way to see real bids.
8 min →
Buyer Logic
Who Buys Pre-Revenue Apps?
Distribution specialists, portfolio operators, head-start buyers, niche insiders - and why they pay.
8 min →
Seller Guide
The Distribution Wall
Why good apps die with zero users: building and distribution are different jobs - and the three doors out.
9 min →
Price Bands
How Much Is a Vibe-Coded App Worth?
Documented deals: $500-$4,500 for working pre-revenue apps. The bands and what moves you up one.
7 min →
Fee Guide
Broker Fees Compared 2026
From $199 flat to $45,000. Side-by-side math at $50K, $100K, $300K - what you actually keep.
12 min →
Pricing
Asking Price Is a Guess
Businesses sell for ~85% of asking on average. An exit bid is the price the market will actually pay.
7 min →
Market Analysis
Marketplace Comparison 2026
Flippa, Acquire.com, Empire Flippers, ExitBid - fees, buyers, timeline compared.
15 min →
See all guides
Why exitbid

Verified. Auctioned. Sold.

01

Only 14 at a Time

Every listing gets full buyer attention. If it's here - people will see it.

0
Listings buried in a feed
02

Manually Reviewed

Every business is reviewed by a human before going live. No blind listings.

Revenue
Ownership
Traffic
Reviewed per listing
03

Secure Escrow

Built-in Escrow.com protection available for every deal.

$0
Ever held by ExitBid
escrow.com

Got a project
collecting dust?