/* WLFI design system — Bitnnock brand tokens */ body:has(.pw-home), body.pw-app-site { --wlfi-bg:#13100d;--wlfi-bg-secondary:#1c1712;--wlfi-bg-tertiary:#221c15; --wlfi-border:rgba(255,255,255,.08);--wlfi-border-secondary:rgba(255,255,255,.06); --wlfi-text:#fff;--wlfi-text-secondary:#a1a1a6;--wlfi-text-tertiary:#a1a1a6;--wlfi-text-quaternary:#8e8e93; --wlfi-brand:#ecc46c;--wlfi-brand-dim:rgba(236,196,108,.12);--wlfi-brand-border:rgba(236,196,108,.28); --wlfi-brand-text:#f1dc9d;--wlfi-green:#00C853; --wlfi-btn-bg:#e8e8e8;--wlfi-btn-text:#000; --wlfi-font:Sora,system-ui,sans-serif; --wlfi-wrap:min(980px,calc(100% - 2rem)); --wlfi-ease:cubic-bezier(.22,1,.36,1); } .pw-home{ position:relative;min-height:100vh;background:transparent;color:var(--wlfi-text); font-family:var(--wlfi-font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:clip; } .pw-home *,.pw-home *::before,.pw-home *::after{box-sizing:border-box} .pw-home h1,.pw-home h2,.pw-home h3,.pw-home h4,.pw-home h5,.pw-home p,.pw-home ul,.pw-home blockquote{margin:0;padding:0} .pw-home ul{list-style:none} .pw-home :focus-visible, body.pw-app-site :focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:3px} body:has(.pw-home), html:has(body .pw-home){ background:var(--wlfi-bg)!important;color:var(--wlfi-text)!important;padding:0!important;margin:0!important; max-width:none!important;width:100%!important;font-family:var(--wlfi-font)!important;overflow-x:clip; } body:has(.pw-home) .page-wrapper, body.pw-app-site, html:has(body.pw-app-site), body.pw-app-site .page-wrapper, body.pw-app-site .body-bg, body.pw-app-site .schwab-main-wrapper, body.pw-app-site .schwab-content-area{ background:transparent!important;color:var(--wlfi-text)!important;padding:0!important;margin:0!important; max-width:none!important;width:100%!important;font-family:var(--wlfi-font)!important;overflow-x:clip; } body:has(.pw-home) .schwab-main-wrapper .breadcrumb-area, body:has(.pw-home) .schwab-main-wrapper .breadcrumb-wrapper, body:has(.pw-home) .schwab-main-wrapper .inner-hero.breadcrumb-area, body:has(.pw-home) .schwab-main-wrapper .schwab-bottom-menu-section, body:has(.pw-home) .page-wrapper>.header, body:has(.pw-home) .page-wrapper>.navbar, body:has(.pw-home) .page-wrapper>.header-section, body:has(.pw-home) .page-wrapper>.navbar-area, body:has(.pw-home) .header-bottom-area{display:none!important} body:has(.pw-home) .scroll-to-top{display:none!important} .wlfi-wrap{width:var(--wlfi-wrap);margin-inline:auto} .wlfi-anchor{display:block;height:0;scroll-margin-top:104px} .wlfi-page-gradient{position:absolute;top:0;left:0;z-index:0;width:100%;min-height:244px;pointer-events:none; background:radial-gradient(ellipse 80% 100% at 50% -20%,rgba(255,255,255,.07),transparent 70%), radial-gradient(ellipse 50% 40% at 80% 0%,rgba(236,196,108,.08),transparent 60%)} /* z-index:7 (not the old 1) matters: `main` establishes its own stacking context here (position + explicit z-index), which traps every section inside it - including their own individual z-index:7 vs the Living Ledger canvas (.bn-market-flow__visual, z-index:6) - into a purely LOCAL comparison against each other. The canvas is main's own sibling, compared against main as a whole, not against main's descendants. At the old z-index:1, main (and everything in it) lost to the canvas (6) wholesale, so every section's own z-index:7 was silently inert: the canvas painted over all of them via mix-blend-mode:screen regardless, which read as every section's background randomly drifting/flashing over time, worst right after any repaint (e.g. on hover). Raising main itself above the canvas is what actually lets its children's opaque backgrounds occlude it. */ .pw-home main{position:relative;z-index:7} .pw-home [id]{scroll-margin-top:104px} /* Typography — gradient headings inherit from plasma-home.css on .pw-home */ .wlfi-heading-md{font-size:clamp(1.75rem,4vw,3rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-align:center} .wlfi-heading-md--left{text-align:left} .wlfi-heading-sm{font-size:clamp(1.125rem,2.5vw,1.25rem);font-weight:600;text-align:center} .wlfi-heading-sm--icon{display:inline-flex;align-items:center;justify-content:center;gap:.5rem} .wlfi-heading-sm--icon svg{color:var(--wlfi-brand);opacity:.8} .wlfi-subheading{margin-top:.5rem;max-width:640px;font-size:1rem;font-weight:400;line-height:1.65;color:var(--wlfi-text-secondary)!important;text-align:center;margin-inline:auto} .wlfi-subheading--left{text-align:left;margin-inline:0} .wlfi-section-head{margin-bottom:clamp(2rem,5vw,3rem)} /* Buttons — WLFI primary/secondary pills */ .wlfi-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:999px; font-family:var(--wlfi-font);font-size:1rem;font-weight:600;text-decoration:none!important;border:1px solid transparent; cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--wlfi-ease);white-space:nowrap;line-height:1} .wlfi-btn--lg{min-height:44px;padding:0 1rem} .pw-home .wlfi-btn--primary{border-color:rgba(255,255,255,.18)!important;color:var(--wlfi-btn-text)!important; background:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,0)),var(--wlfi-btn-bg)!important; box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)} .pw-home .wlfi-btn--primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.4)} body.pw-app-site .wlfi-btn--primary{border-color:var(--wlfi-brand)!important;color:#000!important; background:linear-gradient(135deg,var(--wlfi-brand),#f1dc9d)!important; box-shadow:0 4px 16px rgba(236,196,108,.25)!important} body.pw-app-site .wlfi-btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(236,196,108,.32)!important} .wlfi-btn--secondary{border-color:var(--wlfi-border)!important;color:var(--wlfi-text)!important;background:rgba(255,255,255,.03)!important; box-shadow:0 1px 2px rgba(0,0,0,.3)} .wlfi-btn--secondary:hover { border-color: rgba(255,255,255,.16) !important; } .wlfi-link{font-size:.875rem;font-weight:600;color:var(--wlfi-text-secondary)!important;text-decoration:none!important;transition:color .2s} .wlfi-link--brand{color:var(--wlfi-brand)!important} .wlfi-link:hover{color:var(--wlfi-text)!important} /* Hero */ .wlfi-hero{display:flex;flex-direction:column;align-items:center;padding:clamp(2.5rem,8vh,4rem) 1rem clamp(3rem,8vh,5rem)} .wlfi-hero__inner{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%} .wlfi-hero__head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:800px} .wlfi-hero__title{font-size:clamp(2.25rem,6.5vw,3.75rem);font-weight:600;line-height:1.05;letter-spacing:-.03em;margin:0} .wlfi-hero__title-stack{display:flex;flex-direction:column;align-items:center;gap:1rem} .wlfi-hero__title-main{display:block;text-align:center;color:#f5f5f7;-webkit-text-fill-color:currentColor;background:none;background-image:none;background-clip:border-box;-webkit-background-clip:border-box} .wlfi-hero__title .wlfi-pill{font-size:.8125rem!important;line-height:1!important;letter-spacing:0!important;font-weight:500!important;text-transform:none!important} /* Neutral by default - only .wlfi-pill--open/--answered/--reply/--closed (plasma-app.css) and similar semantic modifiers should carry color; an unmodified pill isn't a "live/brand" indicator so it shouldn't default to the gold brand tint. Was border/background/color from --wlfi-brand-*. */ .wlfi-pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--wlfi-text-secondary)!important; text-decoration:none!important;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s} .wlfi-pill:hover { /* No color/border-color shift on hover (would tint a status pill like --closed gold on top of its own red) - just the lift. */ transform: translateY(-1px); } .wlfi-pill__text{font-weight:600;color:inherit!important} .wlfi-pill__arrow{flex-shrink:0;color:var(--wlfi-brand);transition:transform .2s} .wlfi-pill:hover .wlfi-pill__arrow{transform:translateX(2px)} @media(max-width:480px){ .wlfi-hero__title .wlfi-pill{font-size:.75rem!important;padding:.45rem .85rem} } .wlfi-hero__subtitle{margin-top:.5rem;max-width:640px;font-size:1rem;font-weight:400;line-height:1.65;color:var(--wlfi-text-secondary)!important;text-align:center} .wlfi-hero__actions{display:flex;flex-direction:column;gap:.5rem;width:100%;margin-top:1.5rem} .wlfi-hero__actions .wlfi-btn{width:100%} @media(min-width:640px){ .wlfi-hero__actions{flex-direction:row;justify-content:center;width:auto} .wlfi-hero__actions .wlfi-btn{width:auto;min-width:160px} } /* Terminal — advanced WLFI-style demo */ .wlfi-terminal-wrap{position:relative;width:100%;max-width:672px} .wlfi-terminal__glow{position:absolute;inset:-1px;border-radius:18px;background:linear-gradient(135deg,rgba(236,196,108,.35),transparent 40%,rgba(0,200,83,.2));opacity:.45;filter:blur(20px);z-index:0;transition:opacity .4s,transform .4s} .wlfi-terminal-wrap:has(.wlfi-terminal.is-running) .wlfi-terminal__glow{opacity:.85;transform:scale(1.02);animation:wlfiTermGlow 2s ease-in-out infinite alternate} @keyframes wlfiTermGlow{from{opacity:.55}to{opacity:.95}} .wlfi-terminal{position:relative;z-index:1;display:flex;flex-direction:column;overflow:hidden;width:100%;height:340px; border-radius:16px;border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-secondary);cursor:pointer; box-shadow:0 24px 64px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .3s,box-shadow .3s,transform .3s var(--wlfi-ease)} .wlfi-terminal:hover{border-color:rgba(236,196,108,.25);transform:translateY(-2px)} .wlfi-terminal.is-running{border-color:rgba(236,196,108,.4);box-shadow:0 28px 72px rgba(236,196,108,.12),0 24px 64px rgba(0,0,0,.55)} .wlfi-terminal__chrome{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-bottom:1px solid var(--wlfi-border-secondary);background:rgba(19, 16, 13, .35)} .wlfi-terminal__dots{display:flex;gap:6px;flex-shrink:0} .wlfi-terminal__dot{width:10px;height:10px;border-radius:50%;background:#3f3f3f;transition:transform .2s,box-shadow .2s} .wlfi-terminal__dot--r{background:#ff5f57}.wlfi-terminal__dot--y{background:#febc2e}.wlfi-terminal__dot--g{background:#28c840} .wlfi-terminal.is-running .wlfi-terminal__dot--g{animation:wlfiDotPulse 1.2s ease-in-out infinite} @keyframes wlfiDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(40,200,64,.5)}50%{box-shadow:0 0 0 4px rgba(40,200,64,0)}} .wlfi-terminal__title{flex:1;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;color:var(--wlfi-text-tertiary);letter-spacing:.04em;text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wlfi-terminal__status{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .5rem;border-radius:999px;border:1px solid var(--wlfi-border);color:var(--wlfi-text-quaternary);transition:color .3s,border-color .3s,background .3s} .wlfi-terminal.is-running .wlfi-terminal__status{color:var(--wlfi-brand);border-color:var(--wlfi-brand-border);background:var(--wlfi-brand-dim)} .wlfi-terminal.is-done .wlfi-terminal__status{color:var(--wlfi-green);border-color:rgba(0,200,83,.35);background:rgba(0,200,83,.08)} .wlfi-terminal__screen{position:relative;display:flex;flex:1;flex-direction:column;justify-content:flex-end;overflow:hidden;overflow-y:auto;padding:.75rem 1rem;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(236,196,108,.04),transparent 70%)} .wlfi-terminal__fade{pointer-events:none;position:absolute;inset:0 0 auto 0;height:5rem;z-index:2; background:linear-gradient(to bottom,var(--wlfi-bg-secondary),transparent)} .wlfi-terminal__scanline{pointer-events:none;position:absolute;inset:0;z-index:1;opacity:.04; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.15) 2px,rgba(255,255,255,.15) 3px)} .wlfi-terminal.is-running .wlfi-terminal__scanline{animation:wlfiScan 8s linear infinite;opacity:.06} @keyframes wlfiScan{0%{transform:translateY(0)}100%{transform:translateY(4px)}} .wlfi-terminal__pre{margin:0;width:100%;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.75rem;line-height:1.35rem;white-space:pre-wrap;position:relative;z-index:3} .wlfi-terminal__code{display:block;color:var(--wlfi-text-quaternary);min-height:8.5rem} .wlfi-terminal__code .c-dim{color:var(--wlfi-text-quaternary)} .wlfi-terminal__code .c-brand{color:var(--wlfi-brand)} .wlfi-terminal__code .c-hi{color:var(--wlfi-text-secondary)} .wlfi-terminal__code .c-green{color:var(--wlfi-green)} .wlfi-terminal__code .c-warn{color:#febc2e} .wlfi-terminal__code .c-cursor{display:inline-block;width:7px;height:14px;margin-left:2px;background:var(--wlfi-brand);vertical-align:text-bottom;animation:wlfiBlink .85s step-end infinite} @keyframes wlfiBlink{0%,100%{opacity:1}50%{opacity:0}} .wlfi-terminal__progress{height:2px;background:rgba(255,255,255,.06);overflow:hidden;opacity:0;transition:opacity .2s} .wlfi-terminal.is-running .wlfi-terminal__progress{opacity:1} .wlfi-terminal__progress-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wlfi-brand),var(--wlfi-green));transition:width .15s linear} .wlfi-terminal__run{width:100%;padding:.5rem 1rem;border:none;border-top:1px solid var(--wlfi-border-secondary); background:rgba(19, 16, 13, .25);color:var(--wlfi-text-quaternary);font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px;letter-spacing:.08em;text-transform:lowercase;text-align:center;cursor:pointer;transition:color .2s,background .2s} .wlfi-terminal.is-running .wlfi-terminal__run { color:var(--wlfi-brand);background:rgba(236,196,108,.06) } .wlfi-terminal__run:hover { color: var(--wlfi-brand); } .wlfi-hero__chips .wlfi-chip{transition:border-color .2s,background .2s} .wlfi-hero__chips .wlfi-chip:hover { border-color: var(--wlfi-brand-border); } @media(prefers-reduced-motion:reduce){ .wlfi-terminal__scanline,.wlfi-terminal__glow,.wlfi-terminal__dot--g{animation:none!important} .wlfi-terminal-wrap:has(.wlfi-terminal.is-running) .wlfi-terminal__glow{animation:none} } /* Partners marquee */ .wlfi-partners{padding:0 1rem clamp(1.5rem,3vw,2rem)} .wlfi-partners__head{max-width:42rem;margin-inline:auto;text-align:center;margin-bottom:clamp(1rem,2.5vw,1.5rem)!important} /* A separate rule elsewhere (.pw-home .wlfi-partners .wlfi-heading-sm) scales this specific heading up to a clamp(2rem,5vw,56px) hero-style size and wraps its long copy ("Global payment methods traders trust") across 2 lines - but the shared .wlfi-heading-sm--icon rule keeps the svg at its small 18px inline-icon size and centers it against the *whole* row's cross-axis, which was fine for the single-line, 18-20px headings that pattern was designed for. Against a 2-line 56px heading the small icon just gets stranded between the lines, too small to read as an inline prefix either way. Stacking icon-above-text (like the eyebrow label used above "Live marketplace feed") sidesteps both problems at once: each row centers itself independently, so there's no cross-axis mismatch regardless of how many lines the heading wraps to at any breakpoint. */ .wlfi-partners .wlfi-heading-sm--icon{display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;margin-inline:auto;margin-bottom:.75rem} .wlfi-partners .wlfi-heading-sm--icon svg{flex-shrink:0} .wlfi-partners .wlfi-section-head .wlfi-subheading{max-width:42rem;margin-inline:auto;width:auto!important;margin-top:.5rem;letter-spacing:normal;line-height:1.55} .wlfi-partners__lead{margin:.5rem auto 1.25rem;font-size:.95rem;color:var(--wlfi-muted,#9ca3af);max-width:42rem;text-align:center} .wlfi-marquee{position:relative;overflow:hidden;width:100%;max-width:1152px;margin:1rem auto 0;touch-action:pan-y;-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)} .wlfi-marquee__fade{position:absolute;top:0;bottom:0;z-index:2;width:6rem;pointer-events:none} .wlfi-marquee__fade--l{left:0;background:linear-gradient(to right,var(--wlfi-bg),transparent)} .wlfi-marquee__fade--r{right:0;background:linear-gradient(to left,var(--wlfi-bg),transparent)} .wlfi-marquee__track{display:flex;align-items:center;flex-wrap:nowrap;gap:.75rem;width:max-content;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate3d(0,0,0);animation:wlfiMarquee 75s linear infinite;-webkit-animation:wlfiMarquee 75s linear infinite} /* Chip, not bare text - background/border/icon give each item a visual boundary instead of names just floating in space, and a legible resting point for the pause-on-hover interaction below. */ .wlfi-marquee__item{ display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto; padding:.5rem .9rem;border-radius:999px; border:1px solid var(--wlfi-brand-border,rgba(236,196,108,.28)); background:var(--wlfi-brand-dim,rgba(236,196,108,.08)); font-size:.8125rem;font-weight:500;color:var(--wlfi-text-secondary);letter-spacing:.02em;white-space:nowrap; transition:border-color .2s,background .2s,color .2s; } .wlfi-marquee__item-icon{flex-shrink:0;color:var(--wlfi-brand);opacity:.9} /* Pausing on hover/focus turns "text scrolling past you forever" into something you can actually stop and read - focus-within so keyboard users tabbing past a chip (unlikely target today, but these are plain s with no link) get the same pause a mouse hover gets. */ .wlfi-marquee:hover .wlfi-marquee__track, .wlfi-marquee:focus-within .wlfi-marquee__track{animation-play-state:paused} .wlfi-marquee__item:hover{ border-color:var(--wlfi-brand-glow,rgba(236,196,108,.5)); background:rgba(236,196,108,.14); color:var(--wlfi-text); } @keyframes wlfiMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @-webkit-keyframes wlfiMarquee{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}} .wlfi-partners.is-inview .wlfi-marquee__track,.wlfi-partners.is-visible .wlfi-marquee__track{animation:wlfiMarquee 75s linear infinite!important;-webkit-animation:wlfiMarquee 75s linear infinite!important;animation-play-state:running!important;-webkit-animation-play-state:running!important} .wlfi-partners.is-inview .wlfi-marquee:hover .wlfi-marquee__track,.wlfi-partners.is-visible .wlfi-marquee:hover .wlfi-marquee__track,.wlfi-partners.is-inview .wlfi-marquee:focus-within .wlfi-marquee__track,.wlfi-partners.is-visible .wlfi-marquee:focus-within .wlfi-marquee__track{animation-play-state:paused!important} @media(max-width:767px){ .wlfi-marquee__fade{width:2.5rem} .wlfi-marquee__track{gap:.625rem;animation-duration:55s;-webkit-animation-duration:55s} .wlfi-marquee__item{padding:.4375rem .75rem;font-size:.75rem} .wlfi-partners.is-inview .wlfi-marquee__track,.wlfi-partners.is-visible .wlfi-marquee__track{animation-duration:55s!important;-webkit-animation-duration:55s!important} } @media(prefers-reduced-motion:reduce){ .wlfi-marquee__track{animation:none!important;-webkit-animation:none!important;flex-wrap:wrap;justify-content:center;width:100%;gap:.625rem;transform:none!important} .wlfi-token-visual__ring{animation:none} } /* Unlock / trade finder */ .wlfi-unlock{padding:clamp(2rem,4vw,3rem) clamp(1rem,3vw,1.5rem)} .pw-trade-finder{padding:clamp(2rem,4vw,3rem) clamp(1rem,3vw,1.5rem)} .pw-trade-finder__inner{width:min(980px,calc(100% - clamp(1rem,3vw,1.5rem) * 2));margin-inline:auto} .pw-trade-finder .wlfi-section-head{max-width:42rem;margin-inline:auto;text-align:center} .pw-trade-finder .wlfi-section-head .wlfi-subheading{max-width:42rem;margin-inline:auto;width:auto!important;margin-top:.5rem;letter-spacing:normal;line-height:1.55} .pw-trade-finder .pw-form-panel{margin-top:clamp(1.25rem,3vw,1.75rem)} .wlfi-unlock__grid{display:grid;gap:clamp(2rem,5vw,3rem);align-items:center} .wlfi-unlock__copy{max-width:560px;margin-inline:auto;text-align:center} .wlfi-unlock__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem} .wlfi-unlock__actions .wlfi-btn{width:100%} .wlfi-unlock__visual{display:flex;justify-content:center;align-items:center;min-height:280px} .wlfi-divider{height:1px;background:var(--wlfi-border);margin:clamp(2rem,4vw,3rem) 0} .wlfi-unlock__footer-label{font-size:.875rem;color:var(--wlfi-text-secondary)!important;text-align:center;margin-bottom:1rem} .wlfi-unlock__footer-row{display:flex;flex-direction:column;align-items:center;gap:1rem} .wlfi-networks{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem} .wlfi-network{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:6px; border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-secondary);color:var(--wlfi-brand)!important; font-size:.75rem;font-weight:700;text-decoration:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .2s,background .2s} .wlfi-network:hover { border-color: var(--wlfi-brand-border); } .wlfi-token-visual{position:relative;width:240px;height:240px} .wlfi-token-visual__ring{position:absolute;inset:10%;border-radius:50%;border:1px solid var(--wlfi-border);animation:wlfiSpin 20s linear infinite} .wlfi-token-visual__core{position:absolute;inset:28%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%; border:1px solid var(--wlfi-brand-border);background:radial-gradient(circle,rgba(236,196,108,.15),var(--wlfi-bg-secondary))} .wlfi-token-visual__code{font-size:1.5rem;font-weight:700;color:var(--wlfi-brand)!important} .wlfi-token-visual__label{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--wlfi-text-tertiary);margin-top:.25rem} .wlfi-token-visual__orbit{position:absolute;top:50%;left:50%;padding:.25rem .5rem;border-radius:999px;border:1px solid var(--wlfi-border); background:var(--wlfi-bg-secondary);font-size:.625rem;font-weight:600;color:var(--wlfi-text-secondary); transform:rotate(calc(var(--i)*90deg)) translateY(-120px) rotate(calc(var(--i)*-90deg))} @keyframes wlfiSpin{to{transform:rotate(360deg)}} /* Form */ .wlfi-form{margin-top:1.5rem;text-align:left} .wlfi-form__row{display:grid;gap:.75rem;margin-bottom:.75rem} .wlfi-form__row--2{grid-template-columns:1fr} .wlfi-form__row--pay{grid-template-columns:1fr} .wlfi-field--wide{grid-column:1/-1} .wlfi-label{display:block;font-size:.8125rem;font-weight:500;color:var(--wlfi-text-secondary)!important;margin-bottom:.375rem} .wlfi-label__opt{font-weight:400;color:var(--wlfi-text-tertiary)} .pw-home .select2-container{width:100%!important;display:block!important} .wlfi-input,.pw-home .select2-container--default .select2-selection--single{ width:100%!important;height:44px;border-radius:6px!important;border:1px solid var(--wlfi-border-secondary)!important; background:var(--wlfi-bg-secondary)!important;color:var(--wlfi-text)!important;font-family:var(--wlfi-font)!important; font-size:.9375rem!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;transition:border-color .2s!important} .wlfi-input.amount{line-height:44px;padding:0 .75rem;background:var(--wlfi-bg-secondary)!important;border:1px solid var(--wlfi-border-secondary)!important;border-radius:6px!important;color:var(--wlfi-text)!important} .wlfi-input:focus,.pw-home .select2-container--open .select2-selection--single{border-color:rgba(236,196,108,.35)!important;outline:none!important} .pw-home .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px!important;padding-left:.75rem!important;color:var(--wlfi-text)!important} .pw-home .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px!important} .pw-home .select2-dropdown{background:var(--wlfi-bg-secondary, #1c1712)!important;border:1px solid var(--wlfi-border)!important;border-radius:6px!important} .pw-home .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:rgba(236,196,108,.12)!important;color:var(--wlfi-brand)!important} /* Product cards */ .wlfi-products{padding:clamp(2rem,4vw,3rem) 1rem} .wlfi-products__grid{display:grid;gap:1.5rem;grid-template-columns:1fr;max-width:1152px;margin-inline:auto} .wlfi-card{position:relative;display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--wlfi-border);background:linear-gradient(165deg,var(--wlfi-bg-tertiary),var(--wlfi-bg-secondary) 60%);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .wlfi-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 32px -16px rgba(0,0,0,.5)} .wlfi-card__top{display:flex;padding:1.75rem 1.5rem 0} .wlfi-card__name{font-size:1.0625rem;font-weight:700;color:var(--wlfi-text)!important;margin:1.25rem 0 0;line-height:1.3} @media (prefers-reduced-motion:reduce){.wlfi-card{transition:none}.wlfi-card:hover{transform:none}} .wlfi-dot{width:8px;height:8px;border-radius:50%;background:#3f3f3f} .wlfi-dot--r{background:#ff5f57}.wlfi-dot--y{background:#febc2e}.wlfi-dot--g{background:#28c840} .wlfi-card__body{margin-top:auto;padding:.75rem 1.5rem 1.75rem;display:flex;flex-direction:column;gap:1rem} /* .pw-home prefix (not just .wlfi-card__text) is load-bearing here, not decoration - a sitewide "readable text" pass in custom.css forces every .pw-home p to color:var(--bn-readable-text) (white) !important at a higher specificity than a bare single class, which was silently overriding this intended muted color with white the entire time this card style has existed. */ .pw-home .wlfi-card__text{font-size:clamp(.9375rem,2vw,1.0625rem);font-weight:500;line-height:1.65;color:var(--wlfi-text-tertiary)!important;margin:0} .wlfi-card__actions{display:flex;flex-wrap:wrap;gap:.5rem} /* Product-preview mockups (trade status / offer row / wallet balances) - replaced icon-in-gradient-badge treatments on all 3 non-terminal cards. That pattern (soft colored glow behind a generic glyph, plus a small colored pill of throwaway "proof" copy under the paragraph) is about as recognizable an "AI-generated SaaS template" tell as exists, and unlike an icon, doesn't show a visitor anything about what the product actually looks like. These are static, representative snapshots of real product surfaces (a trade card, a live offer row, a wallet balance list) - the same idea as the Live order book card's terminal, applied consistently instead of being a one-off. Every text rule here is prefixed .pw-home for the same specificity reason as .wlfi-card__text above - a sitewide rule forces .pw-home p/span to white otherwise. */ .wlfi-card__mockup{width:100%;max-width:320px;padding:1rem 1.125rem;border-radius:10px;border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-secondary);text-align:left} .wlfi-card__mockup-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem} .pw-home .wlfi-card__mockup-id{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.75rem;color:var(--wlfi-text-quaternary)!important} .wlfi-card__mockup-status{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:5px;font-size:.6875rem;font-weight:600;white-space:nowrap} .wlfi-card__mockup-status::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0} .wlfi-card__mockup-status--locked{background:rgba(0,200,83,.12)} .pw-home .wlfi-card__mockup-status--locked{color:#3ddb82!important} .wlfi-card__mockup-status--locked::before{background:#3ddb82} .pw-home .wlfi-card__mockup-swap{display:flex;align-items:center;gap:.5rem;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.9375rem;font-weight:600;color:var(--wlfi-text-secondary)!important;margin-bottom:.75rem} .wlfi-card__mockup-swap svg{color:var(--wlfi-text-quaternary);flex-shrink:0} .wlfi-card__mockup-track{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:.625rem} .wlfi-card__mockup-track-fill{height:100%;width:62%;background:linear-gradient(90deg,#3ddb82,rgba(61,219,130,.5));border-radius:2px} .pw-home .wlfi-card__mockup-caption{font-size:.75rem;color:var(--wlfi-text-quaternary)!important;margin:0!important;line-height:1.5} .pw-home .wlfi-card__mockup-rating{font-size:.75rem;color:var(--wlfi-text-quaternary)!important} .pw-home .wlfi-card__mockup-rate{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.0625rem;font-weight:700;color:var(--wlfi-text-secondary)!important;margin-bottom:.5rem;display:block} .wlfi-card__mockup--wallet{display:flex;flex-direction:column;gap:.625rem} .wlfi-card__mockup-asset{display:flex;align-items:center;justify-content:space-between;font-size:.875rem} .pw-home .wlfi-card__mockup-asset-name{font-weight:600;color:var(--wlfi-text-secondary)!important} .pw-home .wlfi-card__mockup-asset-bal{font-family:ui-monospace,'SF Mono',Menlo,monospace;color:var(--wlfi-text-quaternary)!important} .wlfi-card__mini-term{width:100%;max-width:320px;border-radius:6px;border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-secondary);overflow:hidden;text-align:left} .wlfi-card__mini-term-bar{display:flex;gap:6px;padding:.625rem .875rem;border-bottom:1px solid var(--wlfi-border-secondary)} .wlfi-card__mini-term-bar span{width:8px;height:8px;border-radius:50%;background:#3f3f3f} /* Real traffic-light colors (the bar above defaults every dot to the same neutral gray) - and the green one gets a slow pulse since it's the one that conventionally reads as "running/live", reinforcing the card's own "Live order book" name instead of just sitting there as decoration. */ .wlfi-card__mini-term-bar .wlfi-dot--r{background:#ff5f57} .wlfi-card__mini-term-bar .wlfi-dot--y{background:#febc2e} .wlfi-card__mini-term-bar .wlfi-dot--g{background:#28c840;animation:wlfiTermDotPulse 2.4s ease-in-out infinite} @keyframes wlfiTermDotPulse{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion:reduce){.wlfi-card__mini-term-bar .wlfi-dot--g{animation:none}} .wlfi-card__mini-term-body{margin:0;padding:.875rem 1rem;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.6875rem;line-height:1.6;color:var(--wlfi-text-quaternary)} .wlfi-card__mini-term-body .c-brand{color:var(--wlfi-brand)} .wlfi-card__mini-term-body .c-hi{color:var(--wlfi-text-secondary)} .wlfi-card__mini-term-body .c-dim{color:var(--wlfi-text-quaternary)} /* Tools */ .wlfi-tools{position:relative;padding:clamp(2rem,4vw,3rem) 1rem;overflow:hidden;border-radius:12px;margin:0 1rem clamp(1.25rem,3vw,2rem); border:1px solid var(--wlfi-border-secondary);background:linear-gradient(to bottom,var(--wlfi-bg),var(--wlfi-bg-secondary),rgba(236,196,108,.04))} .wlfi-tools__glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(236,196,108,.08),transparent 70%);pointer-events:none} .wlfi-tools__grid{display:grid;gap:1rem;grid-template-columns:1fr;position:relative;z-index:1} .wlfi-tool{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem;border-radius:6px;border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-secondary);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)} .wlfi-tool__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:8px;border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-secondary)} .wlfi-tool__icon--buy svg{color:var(--wlfi-green)} .wlfi-tool__icon--sell svg{color:var(--wlfi-brand)} .wlfi-tool__copy{flex:1;min-width:0} .wlfi-tool__title{font-size:1rem;font-weight:600;color:var(--wlfi-text)!important;margin-bottom:.375rem} .wlfi-tool__desc{font-size:.875rem;line-height:1.65;color:var(--wlfi-text-secondary)!important;margin-bottom:.75rem} /* Live offers */ .wlfi-offers{padding:clamp(2rem,4vw,3rem) clamp(1rem,3vw,1.5rem);border-top:1px solid var(--wlfi-border)} .wlfi-offers--alt{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%)} .wlfi-offers .bn-ads-widget .row{margin:0} .wlfi-offers .bn-ads-widget .col-lg-12{padding:0;max-width:100%} .bn-ads-tabs.is-collapsed .bn-ads-tabs__item--extra{display:none} .bn-ads-tabs:not(.is-collapsed){flex-wrap:wrap;row-gap:4px} .bn-ads-tabs__footer{display:flex;justify-content:center;margin:0 0 1rem} .bn-ads-tabs__toggle{min-width:min(100%,240px)} .bn-ads-tabs__item{flex-shrink:0;margin:0;padding:0;list-style:none} .bn-ads-tabs__link{display:inline-flex;align-items:center;gap:.4375rem;padding:8px 14px;border-radius:9999px;border:0!important;background:transparent!important;color:#a8a29e!important;font-family:Sora,system-ui,sans-serif;font-size:13px;font-weight:600;text-decoration:none!important;transition:color .2s,background .2s;cursor:pointer} .bn-ads-tabs__link:hover { color: #fff !important; } .bn-ads-tabs__link.active{color:#000!important;background:linear-gradient(135deg,#ecc46c,#f1dc9d)!important;box-shadow:0 4px 16px rgba(236,196,108,.28)!important} .bn-ads-panels{margin-top:0} .bn-ads-panel{display:none;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);overflow:hidden} .bn-ads-panel.is-active{display:block} .bn-ads-tabs__link{border:0;background:transparent;font:inherit} .bn-ads-loading{display:flex;justify-content:center;align-items:center;min-height:280px;background:transparent} .bn-ads-loading i{font-size:28px;color:#ecc46c} .bn-ads-more-wrap{display:flex;justify-content:center;margin-top:1.25rem} .bn-ads-widget .p2p-dash__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid transparent;font-family:Sora,system-ui,sans-serif;font-size:.875rem;font-weight:600;text-decoration:none!important;cursor:pointer;transition:background .2s,border-color .2s,transform .15s} .bn-ads-widget .p2p-dash__btn--primary{background:linear-gradient(135deg,#ecc46c,#f1dc9d);color:#000!important;border-color:#ecc46c} .bn-ads-widget .p2p-dash__btn--ghost{background:transparent;border-color:rgba(255,255,255,.12);color:#fff!important} .bn-ads-widget .p2p-dash__btn--ghost:hover { border-color: rgba(236,196,108,.4); } .bn-ads-widget .p2p-dash__btn--sm{min-height:34px;padding:0 12px;font-size:.8125rem} .bn-ads-widget .bn-market-ads__action-btn, .bn-ads-widget .btn--base, .bn-ads-widget a.btn--base, .bn-ads-widget button.btn--base{display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap!important;word-break:keep-all!important;min-width:4.5rem;min-height:34px;flex-shrink:0} .bn-ads-widget .custom--table thead th, .bn-ads-widget .custom--table tbody td, .bn-ads-widget .bn-market-ads__table thead th, .bn-ads-widget .bn-market-ads__table tbody td{vertical-align:middle} .bn-ads-widget .custom--table thead th:last-child, .bn-ads-widget .table thead th:last-child, .bn-ads-widget .bn-market-ads__table thead th:last-child{width:1%;white-space:nowrap;text-align:center!important} .bn-ads-widget .custom--table tbody td:last-child, .bn-ads-widget .table tbody td:last-child, .bn-ads-widget .bn-market-ads__table tbody td.bn-market-ads__action{width:1%;white-space:nowrap;word-break:normal!important;overflow-wrap:normal!important;text-align:center!important;vertical-align:middle} @media(max-width:991px){ .bn-ads-widget .table-responsive--md tr td:last-child{display:flex;justify-content:flex-end;align-items:center;min-height:3rem} .bn-ads-widget .table-responsive--md tr td:last-child .btn--base, .bn-ads-widget .table-responsive--md tr td:last-child button.btn--base{margin-left:auto} } /* Unified live marketplace hub (highlights + buy/sell tables) */ .pw-marketplace-hub{ padding:clamp(2.5rem,5vw,4rem) clamp(1rem,3vw,1.5rem); border-top:1px solid var(--wlfi-border); background:radial-gradient(ellipse 80% 45% at 50% 0%,rgba(236,196,108,.07),transparent 68%),#13100d; } .pw-marketplace-hub__inner{display:flex;flex-direction:column;gap:0;width:min(1080px,calc(100% - clamp(1rem,3vw,1.5rem) * 2));margin-inline:auto} .pw-marketplace-hub__head{margin-bottom:clamp(1.75rem,3.5vw,2.25rem)} .pw-marketplace-hub__highlights{ display:grid;gap:.875rem;grid-template-columns:1fr; margin-bottom:clamp(2rem,4vw,2.75rem); } .pw-marketplace-hub__highlight{ display:flex;align-items:flex-start;gap:.875rem; padding:1.125rem 1.25rem;border-radius:12px; border:1px solid var(--wlfi-border);background:var(--wlfi-bg-secondary); } .pw-marketplace-hub__highlight-icon{ flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; width:2.5rem;height:2.5rem;border-radius:10px; border:1px solid var(--wlfi-brand-border);background:var(--wlfi-brand-dim); } .pw-marketplace-hub__highlight-icon svg, .pw-marketplace-hub__highlight-icon img{width:1.375rem;height:1.375rem;flex-shrink:0;display:block} .pw-marketplace-hub__highlight-icon svg{color:var(--wlfi-brand)} .pw-marketplace-hub__highlight-title{ margin:0 0 .35rem;font-size:1rem;font-weight:600;line-height:1.3;color:var(--wlfi-text)!important; } .pw-marketplace-hub__highlight-text{ margin:0;font-size:.875rem;line-height:1.55;color:var(--wlfi-text-secondary)!important; } .pw-marketplace-hub__block{ padding-top:clamp(1.75rem,3.5vw,2.25rem); border-top:1px solid var(--wlfi-border); } .pw-marketplace-hub__block:first-of-type{border-top:none;padding-top:0} .pw-marketplace-hub__block--sell{ background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%); border-radius:12px; margin-top:.25rem; padding-inline:clamp(.75rem,2vw,1.25rem); padding-bottom:clamp(.75rem,2vw,1.25rem); } .pw-marketplace-hub__block-head{margin-bottom:1.25rem;text-align:left;max-width:none;margin-inline:0} .pw-marketplace-hub__block-title{font-size:clamp(1.25rem,2.8vw,1.65rem)!important;margin-bottom:.5rem!important} .pw-marketplace-hub__block-head .wlfi-subheading{text-align:left;margin-inline:0;max-width:42rem;color:#e8e8ed!important} /* Coin tabs + listings panel (contact wlfi-offers + homepage marketplace). This always renders as a single-column stack with the coin tabs as one horizontal, scrollable row across the top - at every viewport width, not just mobile. A persistent narrow vertical rail of 10+ coin pills next to the table (the old desktop-only ".bn-ads-tabs--vertical" treatment) ate a lot of dead vertical space and looked stranded once the tab count grew past a handful of coins, so the "row across the top" layout that already worked well on mobile is now used unconditionally instead of being swapped out for a column rail above 991px. */ :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-widget--sidebar .bn-ads-widget__layout{ display:grid;grid-template-columns:minmax(0,1fr);gap:.875rem } :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-widget__coins{position:static;display:flex;flex-direction:column;gap:.5rem;min-width:0;width:100%} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-widget__coins-label{ margin:0;padding:0 .25rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#86868b } :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-tabs--vertical{ display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:4px; margin:0;padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;list-style:none } :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-tabs--vertical::-webkit-scrollbar{display:none} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-tabs--vertical .bn-ads-tabs__item{width:auto;flex-shrink:0;margin:0;padding:0} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-tabs--vertical .bn-ads-tabs__link{ width:auto;white-space:nowrap;justify-content:center;min-height:42px;padding:.5rem .85rem;border-radius:10px;font-size:.8125rem } :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-tabs__browse{ display:block;width:100%;padding:.45rem .35rem;text-align:left;font-size:.6875rem;font-weight:600;line-height:1.35; color:#a1a1a6!important;text-decoration:none!important;transition:color .2s } :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-tabs__browse:hover{color:#fff!important} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-widget__listings{min-width:0;overflow:visible} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-panels{margin:0} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-panel{ border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(19, 16, 13, .35);overflow:visible } :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads-card{border:0;background:transparent!important;box-shadow:none!important} :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .card-body{padding:0!important} :is(.pw-marketplace-hub, .wlfi-offers) .bn-data-table-wrap{ overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-gutter:stable } :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__table{font-size:.875rem} :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__table thead th{ padding:.8rem 1rem;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:#86868b!important;background:rgba(255,255,255,.03)!important;border-bottom:1px solid rgba(255,255,255,.08)!important } :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__table tbody td{ padding:.9rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);color:#e8e8ed;vertical-align:middle } :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__table tbody tr:last-child td{border-bottom:none} :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__table td a.text--base{color:#fff!important;font-weight:600;text-decoration:none!important} :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__table td a.text--base:hover{color:#f1dc9d!important} :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__table .badge{ margin-top:.25rem;font-size:.625rem;font-weight:600;padding:.15rem .45rem;border-radius:999px;border:0 } :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-cell--rate b{font-variant-numeric:tabular-nums;color:#fff;font-weight:600} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-cell--payment{color:#d4d4d8;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :is(.pw-marketplace-hub, .wlfi-offers) .bn-ads-more-wrap{justify-content:center;margin-top:1.25rem;grid-column:1/-1} /* Offer row polish (table view of marketplace_ads_list.blade.php). Unscoped to .pw-marketplace-hub/.wlfi-offers on purpose - .bn-market-ads__table is only ever rendered by that one partial (basic + elite), and it's also reused as-is on the full "Browse offers" page (bn-market__panel wrapper, not the homepage hub), so these need to apply everywhere it renders, not just the homepage embed. */ /* Trader identity: small initial-letter avatar + stacked name/trust badges, instead of a bare username with badges crammed underneath via mt-1. Shared with the mobile/tablet card view (.bn-data-card) below 992px - same component, same markup (bn-trader-cell/__info/__badges), reused as-is in bn-data-card__who so identity reads consistently regardless of whether the offer is rendered as a table row or a card. */ :is(.bn-market-ads__table, .bn-data-card) .bn-trader-cell{display:flex;align-items:center;gap:.625rem;min-width:0} :is(.bn-market-ads__table, .bn-data-card) .bn-trader-avatar{ flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; width:2rem;height:2rem;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1; background:linear-gradient(135deg,rgba(236,196,108,.3),rgba(236,196,108,.08)); border:1px solid rgba(236,196,108,.35);color:#f1dc9d } /* Real uploaded profile photo instead of the initial-letter fallback above - same circle size/border so the row/card layout doesn't shift depending on which a given trader has; object-fit:cover crops non-square uploads sanely instead of squashing them. */ :is(.bn-market-ads__table, .bn-data-card) .bn-trader-avatar--photo{ display:block;object-fit:cover;background:#000 } /* Presence dot anchored to the avatar corner - same online/away/offline traffic-light convention as the public profile page (.bn-trd-profile__presence-dot in plasma-app.css), just scaled down to fit this list context's smaller 2rem avatar. Server-computed via getUserPresenceStatus() in marketplace_ads_list.blade.php, matching the "Online now" marketplace filter so a visitor can see *why* a row qualifies for that filter, not just take it on faith. */ :is(.bn-market-ads__table, .bn-data-card) .bn-trader-avatar-wrap{position:relative;flex-shrink:0;display:inline-flex} :is(.bn-market-ads__table, .bn-data-card) .bn-trader-presence-dot{ position:absolute;right:-2px;bottom:-2px;width:.5rem;height:.5rem;border-radius:999px; border:2px solid var(--bn-surface,#1c1712);z-index:2 } :is(.bn-market-ads__table, .bn-data-card) .bn-trader-presence-dot--online{background:#00C853} :is(.bn-market-ads__table, .bn-data-card) .bn-trader-presence-dot--away{background:#f59e0b} :is(.bn-market-ads__table, .bn-data-card) .bn-trader-presence-dot--offline{background:#6b7280} /* Verified (email+phone) checkmark next to the username - mirrors the "Verified only" filter for the same show-your-work reason as the presence dot above. */ :is(.bn-market-ads__table, .bn-data-card) .bn-trader-verified-icon{color:#4dabf7;font-size:.85em;margin-left:.25em;vertical-align:-1px} :is(.bn-market-ads__table, .bn-data-card) .bn-trader-cell__info{min-width:0;display:flex;flex-direction:column;gap:.3rem} /* Long usernames get a clean single-line ellipsis instead of an ugly mid-word wrap once the avatar eats into the available width. */ :is(.bn-market-ads__table, .bn-data-card) .bn-trader-cell__info a.text--base{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :is(.bn-market-ads__table, .bn-data-card) .bn-trader-cell__badges{display:flex;flex-wrap:wrap;gap:.3rem} :is(.bn-market-ads__table, .bn-data-card) .bn-trader-cell__badges .badge{margin:0} /* Payment/Speed glyphs - generic icons (no per-gateway icon map exists); purely a scan aid, hidden from a11y tree. Shared with .bn-data-card. */ :is(.bn-market-ads__table, .bn-data-card) .bn-ads-cell__payment-icon{margin-right:.4rem;font-size:.85em;color:#86868b;vertical-align:-1px} /* The rate is the one number every trader compares first when scanning the list - give it real visual weight (bigger, accent-colored, own line) instead of the same 13-14px white text every other cell uses, with the fiat/crypto pair demoted to a small muted caption underneath it. Shared with .bn-data-card's header-row rate block for the same reason. */ :is(.bn-market-ads__table, .bn-data-card) .bn-ads-cell__rate-value{display:block;font-size:1rem;font-weight:700;color:var(--bitnnock-gold,#ecc46c);font-variant-numeric:tabular-nums;line-height:1.3} :is(.bn-market-ads__table, .bn-data-card) .bn-ads-cell__rate-pair{display:block;font-size:.6875rem;font-weight:600;color:#86868b;text-transform:uppercase;letter-spacing:.04em;margin-top:.1rem} /* Subtle row hover for scanability once a tab has more than one offer. The matching bottom corner radius keeps a hovered last row from painting a square corner over the panel's own rounded corner (.bn-ads-panel is border-radius:14px and overflow:visible, so it won't clip this itself). */ .bn-market-ads__table tbody tr{transition:background-color .15s ease} .bn-market-ads__table tbody tr:hover{background-color:rgba(255,255,255,.03)} .bn-market-ads__table tbody tr:last-child td:first-child{border-bottom-left-radius:14px} .bn-market-ads__table tbody tr:last-child td:last-child{border-bottom-right-radius:14px} /* Primary action button: a touch of gold elevation instead of sitting perfectly flat, plus an immediate, interruptible hover/press lift. */ .bn-market-ads__action-btn{transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 2px 10px rgba(236,196,108,.22)} .bn-market-ads__action-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(236,196,108,.32)} .bn-market-ads__action-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(236,196,108,.22)} @media (prefers-reduced-motion: reduce){ .bn-market-ads__table tbody tr, .bn-market-ads__action-btn{transition:none} .bn-market-ads__action-btn:hover{transform:none} } /* Save/bookmark toggle (marketplace-favorites): a compact secondary icon button that sits beside the primary Buy/Sell action, on both the mobile card and desktop table row. .bn-market-ads__action-row replaces the old direct-child layout so the primary button's width:100% (below) doesn't fight a second flex sibling - it now grows within the row instead. */ .bn-market-ads__action-row{display:flex;align-items:center;gap:8px;width:100%;justify-content:center} /* .bn-market-ads__action-row nested twice: beats ".bn-marketplace-ads .bn-data-card__actions .bn-market-ads__action-btn" (width:100%, 3 classes) further up this file with an unambiguous 4-class selector, regardless of source order, so the primary action button shares the row with .bn-save-ad-btn instead of forcing it out. */ .bn-marketplace-ads .bn-market-ads__action .bn-market-ads__action-row .bn-market-ads__action-btn, .bn-trd-ads-action .bn-market-ads__action-row .p2p-dash__btn{flex:1 1 auto;width:auto;min-width:0} .bn-save-ad-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:38px;border-radius:9999px;border:1px solid var(--bn-border);background:rgba(19,16,13,.4);color:var(--bn-muted);font-size:15px;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s,transform .2s} .bn-save-ad-btn:hover{color:var(--bn-gold);border-color:var(--bn-gold)} .bn-save-ad-btn:active{transform:scale(.94)} .bn-save-ad-btn.is-saved{background:var(--bn-gold);border-color:var(--bn-gold);color:#1c1712!important} .bn-save-ad-btn.is-busy{opacity:.6;cursor:wait} .bn-save-ad-btn:focus-visible{outline:2px solid var(--bn-gold);outline-offset:2px} @media (prefers-reduced-motion: reduce){ .bn-save-ad-btn{transition:none} } :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__action .p2p-dash__btn, :is(.pw-marketplace-hub, .wlfi-offers) .bn-market-ads__action .btn--base{ min-width:4.75rem;min-height:36px;padding-inline:1rem;border-radius:999px;font-size:.8125rem;font-weight:600 } :is(.pw-marketplace-hub, .wlfi-offers) .bn-data-card{ border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(19, 16, 13, .35);padding:1.05rem 1.1rem } :is(.pw-marketplace-hub, .wlfi-offers) .bn-data-card__title{color:#fff!important;font-weight:600} :is(.pw-marketplace-hub, .wlfi-offers) .bn-data-card__rate strong{color:#fff;font-variant-numeric:tabular-nums} /* Mobile/tablet offer card polish (card view of marketplace_ads_list.blade.php, shown below 992px - see bn-table-scroll.css's .bn-responsive-data toggle). Unscoped to .pw-marketplace-hub/.wlfi-offers on purpose, same reasoning as the table polish above: .bn-marketplace-ads is only ever rendered by that one partial (basic + elite) and needs to look right on the full "Browse offers" page too, not just the homepage embed. */ /* Identity (left) + rate (right) sit in one row; rate is right-aligned so its value/pair stack lines up under the "RATE" label above it instead of hugging the card's center. Extra gap under the "SELLER"/"BUYER" label before the (now taller, avatar-height) identity row below it. */ .bn-marketplace-ads .bn-data-card__rate{display:flex;flex-direction:column;align-items:flex-end;text-align:right} .bn-marketplace-ads .bn-data-card__who > .bn-data-card__label{margin-bottom:.5rem} /* Field grid: Payment + Speed pair up (both are reliably short - Speed is always "N Minutes" or "No trades yet"), while Limits always claims the full row via --full. Real payment method names run up to ~25 characters (e.g. "Digicel Money / Flow Cash"), so Payment never pairs safely in a half column below - it only ever renders single-column at true phone widths anyway (≤767px, see bn-table-scroll.css), where this pairing collapses to the same stacked order without any width risk. */ .bn-marketplace-ads .bn-data-card__field--full{grid-column:1/-1} /* Primary action fills the full card width - one unmissable next step per offer, matching the table view's equally prominent action button rather than a small pill-sized link stranded on the left with dead space beside it. */ .bn-marketplace-ads .bn-data-card__actions{display:flex} .bn-marketplace-ads .bn-data-card__actions .bn-market-ads__action-btn{ flex:1 1 auto;width:100%;min-height:44px;font-size:.875rem } @media(min-width:640px){ .pw-marketplace-hub__highlights{grid-template-columns:repeat(2,1fr)} } @media(min-width:992px){ .pw-marketplace-hub__highlights{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} /* NOTE: custom.css carries higher-specificity !important rules for this same table (width/min-width, th/td text-align, the Avg-column hide below) that win over the declarations here - keep both files in sync when adjusting column widths/visibility for this table. min-width is a defensive floor only (see custom.css comment); the real fit comes from the Avg column being dropped + the 5 remaining columns' shares below, verified to comfortably fit at 894px (the actual container width at the 992px breakpoint boundary, the tightest real case). */ :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table{ width:100%;min-width:50rem;table-layout:fixed } /* Column shares are sized to actual content, not split evenly: Limits ("500.00 - 100,000.00 USD") is consistently the longest string in the row and needs the most room. Buyer carries a 2rem avatar + gap before the username text even starts, so it needs more than a bare-text column would. The Avg. column (trade speed / "No trades yet") is hidden in this embed - see custom.css - it's the least essential stat for a homepage teaser (the full detail is one click away via "Browse all offers"), and dropping it is what gives the other 5 columns - especially Buyer's username and the primary Action button - enough room to never truncate or scroll off-screen down to the 992px breakpoint floor. */ :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table th:nth-child(1), :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table td:nth-child(1){width:26%} :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table th:nth-child(2), :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table td:nth-child(2){width:17%} :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table th:nth-child(3), :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table td:nth-child(3){width:13%} :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table th:nth-child(4), :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table td:nth-child(4){width:28%} /* The action button renders centered in its cell (see the unconditional .bn-ads-widget last-child text-align:center rule above), so its header needs to be centered too - left-aligning "ACTION" over a centered button read as misplaced/mismatched. */ :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table th:last-child{width:16%;min-width:5.5rem;white-space:nowrap;text-align:center!important} :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table td.bn-market-ads__action{width:16%;min-width:5.5rem;white-space:nowrap} :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table tbody td{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0 } :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table tbody td:first-child, :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table tbody td.bn-market-ads__action, :is(.pw-marketplace-hub, .wlfi-offers) .bn-marketplace-ads--embed .bn-market-ads__table tbody td.bn-ads-cell--limits{ /* Limits gets to wrap instead of ellipsis-truncating too - the 28% column share above already comfortably fits real values, this is just a safety net so an unusually long range degrades to two lines instead of silently hiding digits behind "...". */ overflow:visible;white-space:normal;max-width:none } } /* Homepage buy/sell offers — wider content rail, no double inset padding. `.wlfi-offers` is deliberately left out of the homepage "floating slab" rule in custom.css (margin-inset/border-radius/border/box-shadow would fight this wider table layout), but that rule is also where every other homepage section gets its background painted (--bn-panel-gradient, #1c1712 - intentionally a shade lighter than the #13100d page tone, to read as a raised card). Being skipped for layout reasons meant these two sections were *also* skipped for background, so they sat at the plain page tone instead - a real, visible hard seam at the boundary with whichever section comes right before/after (confirmed: the flat #13100d/#1c1712 line is pixel-exact and full-width, not animation noise). Matching just the background here, without pulling in the rest of the floating-slab treatment, closes that seam while keeping the wider rail. */ .pw-home .pw-marketplace .wlfi-offers[data-pw-section]:not(#buy-sell):not(#live-terminal){ padding-inline:clamp(1rem,3vw,1.5rem);overflow:visible; background:transparent!important;background-image:none!important } .pw-home .pw-marketplace .wlfi-offers .wlfi-wrap{ --wlfi-wrap:min(1120px,calc(100% - clamp(1rem,3vw,1.5rem) * 2)); width:var(--wlfi-wrap);max-width:1120px } .pw-home .pw-marketplace .wlfi-offers .bn-responsive-data [data-label]::before{ display:none!important;content:none!important } .pw-home .pw-marketplace .wlfi-offers .bn-responsive-data [data-label]{ position:static;padding-left:0!important;text-align:inherit!important } /* Reviews */ .wlfi-governance{padding:clamp(2rem,4vw,3rem) clamp(1rem,3vw,1.5rem);border-top:1px solid var(--wlfi-border)} .wlfi-governance__grid{display:grid;gap:clamp(2rem,4vw,3rem);align-items:center} .wlfi-governance__copy{max-width:480px;margin-inline:auto;text-align:center} .wlfi-governance__panel{display:flex;justify-content:center} .wlfi-review{position:relative;margin:0;padding:1.25rem 1.5rem;border-radius:6px;border:1px solid var(--wlfi-border);background:var(--wlfi-bg-secondary); font-size:.9375rem;line-height:1.65;color:var(--wlfi-text)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);max-width:420px} .wlfi-review__quote{display:block;margin-bottom:.75rem;color:var(--wlfi-brand);opacity:.35} .wlfi-review footer{display:block;margin-top:.875rem;font-size:.8125rem;color:var(--wlfi-brand)!important;font-weight:500} /* FAQ */ .wlfi-faq-section{padding:clamp(2rem,4vw,3rem) clamp(1rem,3vw,1.5rem);border-top:1px solid var(--wlfi-border)} .wlfi-faq-layout{display:grid;gap:clamp(2rem,4vw,3rem)} .wlfi-faq{display:flex;flex-direction:column;gap:.5rem} .wlfi-faq__item{border-radius:6px;border:1px solid var(--wlfi-border);background:var(--wlfi-bg-secondary);overflow:hidden} .wlfi-faq__item.is-open{border-color:rgba(236,196,108,.25)} .wlfi-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.125rem; background:transparent;border:none;color:var(--wlfi-text)!important;font-family:var(--wlfi-font);font-size:.9375rem;font-weight:500;text-align:left;cursor:pointer} .wlfi-faq__q::after{content:'+';font-size:1.25rem;color:var(--wlfi-text-tertiary);transition:transform .2s} .wlfi-faq__item.is-open .wlfi-faq__q::after{transform:rotate(45deg);color:var(--wlfi-brand)} .wlfi-faq__a{padding:0 1.125rem 1rem} .wlfi-faq__a[hidden]{display:none} .wlfi-faq__a p{font-size:.9375rem;color:var(--wlfi-text-secondary)!important;line-height:1.7;margin:0} /* Homepage marketplace FAQ — match contact/CMS faq section (override pw-home card chrome) */ .pw-home .pw-marketplace .wlfi-faq-section{ padding:clamp(3rem,7vw,5rem) clamp(1rem,3vw,1.5rem)!important; border-top:1px solid var(--wlfi-border)!important } .pw-home .pw-marketplace .wlfi-faq-section .wlfi-section-head{ max-width:640px;margin:0 0 2.5rem;text-align:left } .pw-home .pw-marketplace .wlfi-faq-section .wlfi-section-head h2{ font-size:clamp(1.75rem,4vw,2.75rem)!important;font-weight:600;letter-spacing:-.02em; color:var(--wlfi-text)!important;text-align:left!important;text-shadow:none!important; margin:0 0 .75rem;line-height:1.2 } .pw-home .pw-marketplace .wlfi-faq-section .wlfi-section-head p{ font-size:1rem;line-height:1.65;color:var(--wlfi-text-secondary)!important;text-align:left;margin:0 } .pw-home .pw-marketplace .wlfi-faq__item{ border-radius:8px!important;border:1px solid var(--wlfi-border)!important; background:var(--wlfi-bg-secondary)!important;box-shadow:none!important; transform:none!important;transition:border-color .2s!important } .pw-home .pw-marketplace .wlfi-faq__item:hover { transform: none !important; box-shadow: none !important; border-color: var(--wlfi-border) !important; } .pw-home .pw-marketplace .wlfi-faq__item.is-open{border-color:rgba(236,196,108,.35)!important;background:var(--wlfi-bg-secondary)!important} .pw-home .pw-marketplace .wlfi-faq__q{ font-size:.9375rem!important;font-weight:500!important;color:var(--wlfi-text)!important; padding:1rem 1.125rem!important } .pw-home .pw-marketplace .wlfi-faq__q::after{color:var(--wlfi-text-tertiary)!important} .pw-home .pw-marketplace .wlfi-faq__item.is-open .wlfi-faq__q::after{color:var(--wlfi-brand)!important} .pw-home .pw-marketplace .wlfi-faq__a p{ font-size:.9375rem!important;font-weight:400!important;color:var(--wlfi-text-secondary)!important;line-height:1.7!important } /* Join CTA */ .wlfi-join{padding:clamp(2.5rem,5vw,3.5rem) clamp(1rem,3vw,1.5rem);border-top:1px solid var(--wlfi-border); background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(236,196,108,.08),transparent 65%)} .wlfi-join__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem} .wlfi-join__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;width:100%} .wlfi-join__actions .wlfi-btn{width:100%} /* Responsive */ @media(min-width:640px){ .wlfi-form__row--2{grid-template-columns:1fr 1fr} .wlfi-form__row--pay{grid-template-columns:1.5fr 1fr} .wlfi-unlock__actions{flex-direction:row} .wlfi-unlock__actions .wlfi-btn{width:auto} .wlfi-unlock__footer-row{flex-direction:row;justify-content:space-between} .wlfi-tools__grid{grid-template-columns:1fr 1fr} .wlfi-join__actions{flex-direction:row;justify-content:center;width:auto} .wlfi-join__actions .wlfi-btn{width:auto} } @media(min-width:1024px){ .wlfi-unlock__grid{grid-template-columns:1fr 1fr;text-align:left} .wlfi-unlock__copy{margin-inline:0;text-align:left} .wlfi-heading-md--left,.wlfi-subheading--left{text-align:left;margin-inline:0} .wlfi-products__grid{grid-template-columns:1fr 1fr} .wlfi-governance__grid{grid-template-columns:1fr 1fr} .wlfi-governance__copy{margin-inline:0;text-align:left} .wlfi-faq-layout:not(.wlfi-faq-layout--full){grid-template-columns:1fr 1.2fr;align-items:start} } .wlfi-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--wlfi-border);background:rgba(255,255,255,.03);font-size:.75rem;color:var(--wlfi-text-secondary)} .wlfi-ico{flex-shrink:0;color:var(--wlfi-brand);opacity:.85} .wlfi-hero__chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem} .wlfi-stats{padding:1.5rem 1rem} .wlfi-stats__grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);text-align:center} .wlfi-stat{display:flex;flex-direction:column;align-items:center;gap:.375rem} .wlfi-stat__icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;border:1px solid var(--wlfi-brand-border);background:var(--wlfi-brand-dim);color:var(--wlfi-brand);margin-bottom:.125rem} .wlfi-stat strong{display:block;font-size:clamp(1.25rem,3vw,1.75rem);color:var(--wlfi-brand)} .wlfi-stat span{font-size:.8125rem;color:var(--wlfi-text-tertiary)} .wlfi-overview-strip{padding:0 1rem clamp(1.25rem,2.5vw,1.75rem);border-bottom:1px solid var(--wlfi-border)} .wlfi-overview-strip__grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)} .wlfi-overview-strip__item{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.875rem;border-radius:8px;border:1px solid var(--wlfi-border);background:var(--wlfi-bg-secondary);text-align:center} .wlfi-overview-strip__icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--wlfi-brand);font-size:1rem} .wlfi-overview-strip__label{font-size:.75rem;font-weight:600;color:var(--wlfi-text-secondary)!important;line-height:1.4} .wlfi-choose{padding:clamp(2rem,4vw,3rem) 1rem;border-top:1px solid var(--wlfi-border)} .wlfi-choose__grid{display:grid;gap:1rem;grid-template-columns:1fr} .wlfi-choose__item{padding:1.25rem;border-radius:8px;border:1px solid var(--wlfi-border);background:var(--wlfi-bg-secondary);transition:border-color .25s,transform .25s var(--wlfi-ease)} .wlfi-choose__item:hover{border-color:var(--wlfi-brand-border);transform:translateY(-2px)} .wlfi-choose__icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-bottom:.75rem;border-radius:10px;border:1px solid var(--wlfi-brand-border);background:var(--wlfi-brand-dim)} .wlfi-choose__icon img{width:1.75rem;height:1.75rem;object-fit:contain} .wlfi-choose__item h4{margin:0 0 .375rem;font-size:1rem;color:var(--wlfi-text)!important} .wlfi-choose__item p{margin:0;font-size:.875rem;line-height:1.6;color:var(--wlfi-text-secondary)!important} .wlfi-offer-inline{padding:clamp(2rem,5vw,3rem) 1rem;border-top:1px solid var(--wlfi-border);background:linear-gradient(135deg,rgba(236,196,108,.06),transparent 55%)} .wlfi-offer-inline__inner{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center} .wlfi-offer-inline__title{margin:0;font-size:clamp(1.25rem,3vw,1.75rem);font-weight:600;color:var(--wlfi-text)!important} .wlfi-offer-inline__sub{margin:0;font-size:.9375rem;color:var(--wlfi-text-secondary)!important;max-width:560px} .wlfi-testimonial-mini{display:flex;flex-direction:column;gap:1rem} .wlfi-review p{margin:0 0 .75rem;font-size:.9375rem;line-height:1.65;color:var(--wlfi-text-secondary)!important} .wlfi-review footer{font-size:.8125rem;font-weight:600;color:var(--wlfi-brand)!important;font-style:normal} .wlfi-review--stack{padding-top:1rem;border-top:1px solid var(--wlfi-border)} /* Reveal targets inner wrap — section shells stay visible (avoids empty scroll gaps) */ [data-wlfi-reveal]{opacity:1;transform:none} .pw-home section[data-wlfi-reveal] > .wlfi-wrap, .pw-home .wlfi-overview-strip[data-wlfi-reveal] > .wlfi-wrap, .pw-home .wlfi-partners[data-wlfi-reveal] > .wlfi-wrap{ opacity:0;transform:translateY(20px); transition:opacity .75s var(--wlfi-ease),transform .75s var(--wlfi-ease); } .pw-home section[data-wlfi-reveal].is-visible > .wlfi-wrap, .pw-home .wlfi-overview-strip[data-wlfi-reveal].is-visible > .wlfi-wrap, .pw-home .wlfi-partners[data-wlfi-reveal].is-visible > .wlfi-wrap, [data-wlfi-reveal].is-visible{opacity:1;transform:none} @media(min-width:768px){.wlfi-overview-strip__grid{grid-template-columns:repeat(4,1fr)}.wlfi-choose__grid{grid-template-columns:repeat(3,1fr)}.wlfi-offer-inline__inner{flex-direction:row;justify-content:space-between;text-align:left}} @media(prefers-reduced-motion:reduce){[data-wlfi-reveal]{opacity:1;transform:none;transition:none}} .wlfi-search{margin-top:1.5rem} .wlfi-search__field{display:flex;flex-direction:column;gap:.375rem;min-width:0;justify-content:flex-end} .wlfi-search__label{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:500;color:var(--wlfi-text-secondary)!important} .wlfi-search__label-icon{flex-shrink:0;color:var(--wlfi-brand);opacity:.85} .wlfi-search__row{display:grid;gap:.75rem;grid-template-columns:1fr;margin-bottom:.75rem;align-items:end} .wlfi-search__row--adv{grid-template-columns:1fr;margin-bottom:0;align-items:end} .wlfi-search__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,0)),var(--wlfi-btn-bg);color:#000;font-weight:600;cursor:pointer;font-family:var(--wlfi-font)} /* Genuinely last in the form on every viewport now (see pw_trade_finder.blade.php for why) - full-width like any other primary mobile CTA by default; on wider screens it drops the stretched 100% width in favor of a comfortably-sized, end-aligned button so it doesn't look like an odd, oversized bar the width of the whole form. */ .wlfi-search__submit{display:flex;justify-content:center;margin-top:.25rem} /* Buy/Sell toggle - see pw_trade_finder.blade.php for why the original