/* ═══════════════════════════════════════════════════ DROPB.IT – HOMEPAGE CLONE ═══════════════════════════════════════════════════ */ /* ── Font stack: system font is used immediately while Google Fonts loads asynchronously — no FOIT (flash of invisible text). Once Plus Jakarta Sans arrives, the browser swaps it in. ── */ @font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial'), local('-apple-system'), local('BlinkMacSystemFont'); ascent-override: 96%; descent-override: 23%; line-gap-override: 0%; size-adjust: 103%; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Never allow sideways page scroll — a single overflowing rail or pill must not shove whole sections off the right edge on mobile. IMPORTANT: keep the guard on ONLY. Putting overflow-x: hidden on BOTH html and body makes mobile browsers treat as the scroll container and the page stops scrolling vertically (it gets "stuck where it is" on phones). */ html { overflow-x: clip; } @supports not (overflow: clip) { html { overflow-x: hidden; } } img, svg, video { max-width: 100%; } :root { --blue: #4F6EF7; --blue-dark: #3a56e0; --blue-light:#EEF1FE; --navy: #0f1c4d; --navy2: #162040; --text: #111827; --text-muted:#6b7280; --text-light:#9ca3af; --border: #e5e7eb; --white: #ffffff; --yellow: #facc15; --green: #22c55e; --radius: 14px; --shadow: 0 4px 24px rgba(79,110,247,.10); --shadow-lg: 0 8px 40px rgba(79,110,247,.14); } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text); background: #fff; line-height: 1.6; font-size: 15px; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* section gutters: container owns the padding, sections own none — avoids the old double-padding that pushed inner grids off the right edge */ .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; width: 100%; min-width: 0; } .safe-section .container, .selling-section .container, .buyers-section .container, .pay-section .container { padding-left: 24px; padding-right: 24px; } /* every grid child may shrink — long words / pills never force overflow */ .safe-cards > *, .safe-badges > *, .selling-inner > *, .selling-features > *, .buyers-grid > * { min-width: 0; } /* ── Buttons ── */ .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; padding: 15px 26px; border-radius: 50px; border: none; cursor: pointer; transition: background .2s, transform .15s; } .btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); } .btn-primary.btn-sm { padding: 12px 22px; font-size: 13px; } .btn-primary.btn-xs { padding: 10px 18px; font-size: 12px; } .btn-primary.btn-white { background: #fff; color: var(--blue); } .btn-primary.btn-white:hover { background: #f0f2ff; } .btn-outline { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--text); font-weight: 600; font-size: 14px; padding: 15px 26px; border-radius: 50px; border: 1.5px solid var(--border); cursor: pointer; transition: border-color .2s, transform .15s; } .btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } .btn-ghost { display: inline-flex; align-items: center; color: rgba(255,255,255,.75); font-weight: 500; font-size: 14px; padding: 15px 4px; background: none; border: none; cursor: pointer; transition: color .2s; } .btn-ghost:hover { color: #fff; } /* ── Badges ── */ .badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 50px; } .badge-featured { background: #ede9fe; color: #7c3aed; } .badge-sale { background: #fee2e2; color: #dc2626; } .badge-new { background: #dcfce7; color: #16a34a; } .badge-toprated { background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 6px 14px; border-radius: 50px; } .badge-featured2 { background: #1A56DB; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 6px 14px; border-radius: 50px; } /* ── Text utility ── */ .text-blue { color: var(--blue); } .text-yellow { color: var(--yellow); } /* ═══════════════════════════════════════ NAVBAR — transparent over light-blue hero (matches screenshot) ═══════════════════════════════════════ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 400; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid transparent; box-shadow: none; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; } /* glass only once user scrolls */ .navbar.scrolled { background: rgba(255, 255, 255, 0.65); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border-bottom-color: rgba(255, 255, 255, 0.65); box-shadow: 0 8px 32px rgba(31, 100, 255, 0.10); } /* header overlays the hero gradient, so no offset needed */ body { padding-top: 0; } :root { --header-h: 68px; } /* solid fallback where backdrop-filter is unsupported */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .navbar.scrolled { background: rgba(245, 249, 255, 0.97); } } .nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; height: 68px; display: flex; align-items: center; gap: 36px; /* Prevent any child overflowing the viewport width */ min-width: 0; overflow: hidden; } .logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; } .logo-icon { display: flex; align-items: center; } .logo-name { font-weight: 800; font-size: 28px; letter-spacing: -0.03em; line-height: 1; } .logo-drop { color: #0A172E; } .logo-hub { color: #1F64FF; } .logo--white .logo-name { color: #fff; } .logo-dot { color: var(--blue); } /* ── Logo.png image lockup (navbar + drawer) ── Logo.png has a baked-in white background, so multiply blend makes the white disappear on the pale-blue hero and white panel */ .logo-img { display: block; height: 40px; width: auto; mix-blend-mode: multiply; } .mmenu-head .logo-img { height: 40px; } @media (max-width: 600px) { .logo-img { height: 38px; } } .nav-links { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: center; } .nav-links a { font-size: 15px; font-weight: 500; color: #66788F; transition: color .2s; letter-spacing: -0.01em; } .nav-links a:hover { color: #1F64FF; } .nav-links a.active, .nav-links a.is-active, .nav-links a[aria-current="page"] { color: #1F64FF; font-weight: 700; position: relative; } .nav-links a.active::after, .nav-links a.is-active::after, .nav-links a[aria-current="page"]::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; border-radius: 2px; background: #1F64FF; } .nav-links--sm a { font-size: 13px; } .nav-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; flex-shrink: 0; } .nav-signin { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: #66788F; transition: color .2s; white-space: nowrap; letter-spacing: -0.01em; } .nav-signin:hover { color: #1F64FF; } .nav-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(31,100,255,.12); margin-right: 2px; border: none; cursor: pointer; } .cart-badge { position: absolute; top: -4px; right: -6px; background: #1F64FF; color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; border: 1.5px solid #fff; } /* ── CART DROPDOWN (matches reference card) ── */ .cart-wrap { position: relative; } .cart-dropdown { /* position:fixed escapes .nav-inner's overflow:hidden clip (the dropdown hangs below the 68px header). The navbar is pinned to the viewport top, so anchoring to the viewport lands it exactly under the cart button. */ position: fixed; top: calc(var(--header-h) + 10px); right: max(12px, calc((100vw - 1400px) / 2 + 28px)); width: min(430px, calc(100vw - 24px)); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid rgba(255,255,255,.8); border-radius: 22px; box-shadow: 0 24px 70px rgba(15,28,77,.18); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .25s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility 0s .3s; z-index: 600; /* card never taller than the viewport: header + bottom breathing room */ display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 40px); max-height: calc(100dvh - var(--header-h) - 40px); } .cart-wrap.open .cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1); } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid rgba(15,28,77,.07); flex-shrink: 0; } .cart-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #0A172E; } .cart-count-pill { background: linear-gradient(135deg, #1F64FF, #38AEEF); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 6px 14px; border-radius: 999px; } .cart-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: #66788F; cursor: pointer; font-size: 15px; } .cart-close:hover { background: rgba(31,100,255,.08); color: #0A172E; } .cart-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 12px; } .cart-item { display: flex; gap: 12px; background: #fff; border: 1px solid #E3ECFA; border-radius: 16px; padding: 12px; box-shadow: 0 6px 20px rgba(31,100,255,.07); } .cart-thumb { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: #101418; } .cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-info { flex: 1; min-width: 0; } .cart-name { font-size: 13.5px; font-weight: 700; color: #0A172E; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-store { font-size: 12px; color: #8A97AB; margin-bottom: 8px; } .cart-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .qty-pill { display: inline-flex; align-items: center; gap: 12px; background: #F1F6FF; border-radius: 10px; padding: 5px 10px; } .qty-pill button { border: none; background: none; font-size: 15px; color: #0A172E; cursor: pointer; line-height: 1; padding: 0 2px; } .qty-pill span { font-size: 13px; font-weight: 700; } .cart-price { font-size: 14px; font-weight: 800; color: #1F64FF; } .cart-trash { border: none; background: none; color: #A5B1C2; cursor: pointer; align-self: flex-start; padding: 2px; } .cart-trash:hover { color: #E11D48; } .cart-foot { flex-shrink:0; padding:18px 16px 16px; background:#fff; border-top:1px solid rgba(15,28,77,.07); } .cart-subtotal { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .cart-subtotal span { color:#64748b; font-size:16px; font-weight:500; } .cart-subtotal strong { font-size:22px; line-height:1; font-weight:800; letter-spacing:-.04em; color:#0A172E; } .cart-currency-lines { display:block; margin-top:5px; color:#64748b; font-size:11px; font-weight:700; letter-spacing:0; line-height:1.45; } .cart-price .cart-currency-lines { font-size:10px; text-align:right; } .cart-escrow { display:block; margin:0 0 14px; padding:13px 14px; font-size:13px; font-weight:500; line-height:1.45; color:#2563d9; border:1.5px solid #d7e4fb; border-radius:16px; background:#f6f9ff; } .cart-actions { display:flex; gap:10px; } .cart-btn-ghost, .cart-btn-checkout { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 10px 12px; border-radius: 16px; font-size: 14px; } .cart-btn-ghost { border:1.5px solid #dfe7f4; color:#5d6d85; font-weight:700; transition:border-color .2s,color .2s,background .2s; } .cart-btn-ghost:hover { border-color: #C4D3EF; color: #0A172E; background: #F6F9FF; } .cart-btn-checkout { background:#2563eb; color:#fff; font-weight:800; box-shadow:0 8px 18px rgba(37,99,235,.20); transition:background .2s,transform .2s; } .cart-btn-checkout:hover { background: #184FE0; } .cart-btn-ghost svg, .cart-btn-checkout svg { flex-shrink: 0; } @media (max-width: 600px) { .cart-dropdown { position: fixed; top: var(--header-h); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - var(--header-h) - 16px); } .cart-actions { flex-direction: row; gap: 8px; } .cart-foot { padding: 12px 14px 14px; } .cart-subtotal { margin-bottom: 10px; } .cart-subtotal span { font-size: 14px; } .cart-subtotal strong { font-size: 22px; } .cart-escrow { padding: 10px 12px; font-size: 12px; margin-bottom: 10px; } .cart-btn-ghost, .cart-btn-checkout { flex: 1; min-height: 40px; padding: 9px 10px; font-size: 13px; border-radius: 12px; } } /* "Start Selling" bright royal-blue pill */ .btn-sell { display: inline-flex; align-items: center; gap: 10px; background: #1F64FF; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; padding: 12px 24px; border-radius: 999px; border: none; cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s; line-height: 1; } .btn-sell:hover { background: #184FE0; transform: translateY(-1px); } .btn-sell-arrow { flex-shrink: 0; } /* hero-wrapper: pale blue gradient for hero (header is now fixed, so wrapper fills viewport minus header) */ .hero-wrapper { background: radial-gradient(900px 420px at 15% 60%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 60%), radial-gradient(900px 420px at 85% 70%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #F5F9FF 0%, #E8F1FC 34%, #DDEAFB 66%, #D2E5FA 100%); position: relative; overflow: clip; height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--header-h); } /* animated aurora blobs drifting over the hero gradient */ .hero-wrapper::before, .hero-wrapper::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } .hero-wrapper::before { width: 560px; height: 560px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(56,174,245,.35) 0%, rgba(56,174,245,0) 70%); animation: heroDrift1 14s ease-in-out infinite alternate; } .hero-wrapper::after { width: 620px; height: 620px; right: -180px; bottom: -200px; background: radial-gradient(circle, rgba(31,100,255,.30) 0%, rgba(31,100,255,0) 70%); animation: heroDrift2 18s ease-in-out infinite alternate; } /* put hero content above the blurred blobs; navbar & drawer stay fixed */ .hero-wrapper > .hero { position: relative; z-index: 1; } .hero-wrapper > .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 400; } .hero-wrapper > .mmenu { position: fixed; inset: 0; z-index: 500; } @keyframes heroDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(90px,60px) scale(1.15); } } @keyframes heroDrift2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-80px,-50px) scale(1); } } /* soft animated grid sheen */ .hero-stars { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(31,100,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,100,255,.06) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%); animation: heroGridPan 22s linear infinite; pointer-events: none; } @keyframes heroGridPan { from { background-position: 0 0, 0 0; } to { background-position: 0 44px, 44px 0; } } @media (prefers-reduced-motion: reduce) { .hero-wrapper::before, .hero-wrapper::after, .hero-stars { animation: none; } } .navbar-mini { background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .navbar-mini .nav-inner { height: 46px; } /* ═══════════════════════════════════════ HERO SECTION — compacted to fit inside the 100vh wrapper ═══════════════════════════════════════ */ .hero { padding: 12px 28px 20px; text-align: center; position: relative; overflow: visible; min-height: 0; flex: 1; display: flex; align-items: center; justify-content: center; } .hero-inner { max-width: 1320px; margin: 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; } /* eyebrow pill — white capsule with soft shadow */ .hero-eyebrow-wrap { margin-bottom: 16px; } .hero-eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; border: none; box-shadow: 0 6px 24px rgba(30, 80, 180, .10); border-radius: 50px; padding: 10px 24px; font-size: 12px; font-weight: 500; letter-spacing: .22em; color: #3E4C63; white-space: nowrap; } .eyebrow-dot { width: 9px; height: 9px; background: #2E7CF6; border-radius: 50%; flex-shrink: 0; } /* GIANT heading — fluid size so it always fits the viewport height */ .hero-heading { font-size: clamp(64px, 10.5vh + 3vw, 102px); font-weight: 900; line-height: .98; letter-spacing: -.045em; color: #101C33; margin-bottom: 16px; position: relative; z-index: 2; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; } .hero-heading-blue { display: block; background: linear-gradient(92deg, #1D5BD8 0%, #2E9BF0 55%, #38C6F4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* sub text — tight measure so it wraps into balanced lines */ .hero-sub { font-size: clamp(15px, 1.6vh + .5vw, 21px); color: #7C8AA0; line-height: 1.55; max-width: 700px; margin: 0 auto 24px; font-weight: 400; letter-spacing: -.01em; } /* CTA buttons — screenshot style */ .hero-ctas { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 0; } .btn-browse { display: inline-flex; align-items: center; gap: 10px; background: #1A56DB; color: #fff; font-weight: 700; font-size: 16px; padding: 16px 34px; border-radius: 50px; border: none; cursor: pointer; transition: background .2s, transform .15s; white-space: nowrap; box-shadow: 0 8px 24px rgba(26, 86, 219, .30); } .btn-browse:hover { background: #1443B0; transform: translateY(-1px); } .btn-selling-free { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #1A56DB; font-weight: 600; font-size: 16px; padding: 15px 32px; border-radius: 50px; border: 2px solid #1A56DB; cursor: pointer; transition: background .2s, transform .15s; white-space: nowrap; } .btn-selling-free:hover { background: rgba(26,86,219,.07); transform: translateY(-1px); } /* stats row */ .hero-stats { display: flex; align-items: center; gap: 52px; justify-content: center; } .hero-stat-num { display: block; font-size: 26px; font-weight: 900; color: #0d1f3c; letter-spacing: -.02em; } .hero-stat-label { font-size: 12px; color: #6080a0; font-weight: 500; } /* ── Floating product cards (screenshot style) + slow float animation ── */ .hero-showcase { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .hero-float-card { position: absolute; top: 50%; width: 230px; background: #fff; border-radius: 22px; box-shadow: 0 18px 55px rgba(20, 60, 140, .18); overflow: hidden; border: none; z-index: 10; padding: 12px 12px 14px; will-change: transform; pointer-events: auto; } .hero-float-left { left: -10px; --base-y: -32%; --float-dist: 16px; animation: heroFloatY 7s ease-in-out infinite; } .hero-float-right { right: -10px; --base-y: -6%; --float-dist: -18px; animation: heroFloatY 8.5s ease-in-out -2.5s infinite; } /* smooth crossfade while the 7s rotator swaps the photo */ .hfc-img img { transition: opacity .6s ease, transform .6s ease; } .hfc-img img.hfc-fade { opacity: 0; transform: scale(1.04); } @keyframes heroFloatY { 0%, 100% { transform: translateY(var(--base-y)) translateX(0); } 50% { transform: translateY(calc(var(--base-y) + var(--float-dist))) translateX(0); } } /* soft in-flow bob for tablet / mobile docked cards (no absolute offsets) */ @keyframes heroFloatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .hero-float-card, .hero-float-left, .hero-float-right { animation: none; } } .hfc-img { width: 100%; height: 150px; border-radius: 14px; overflow: hidden; display: block; } .hfc-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .hfc-img--dark { background: #101418; } .hfc-img--light { background: #E3E1DC; } .hfc-info { padding: 10px 4px 2px; } .hfc-name { font-size: 14.5px; font-weight: 500; color: #1A2333; margin-bottom: 8px; line-height: 1.3; } .hfc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hfc-price { font-size: 17px; font-weight: 800; color: #1A56DB; } /* (old CSS-illustration rules removed — hero cards now use real product photos) */ /* ═══════════════════════════════════════ PAY YOUR WAY SECTION ═══════════════════════════════════════ */ .pay-section { background: #edf2f9; padding: 84px 0 96px; text-align: center; overflow: clip; } /* eyebrow pill */ .pay-eyebrow-wrap { margin-bottom: 20px; } .pay-eyebrow-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--blue); background: #fbfcff; border: 1px solid #dfe6f5; padding: 5px 13px; border-radius: 50px; } /* heading */ .pay-heading { font-size: 50px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: #0f172a; margin-bottom: 14px; } .pay-heading-blue { color: #38aef5; } /* sub */ .pay-sub { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 32px; } /* ── Pay tabs ── */ .pay-tabs { display: inline-flex; gap: 14px; background: transparent; border: none; padding: 0; margin-bottom: 44px; } .pay-tab { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 14px; border: 1.5px solid #dfe6f2; background: #fff; font-size: 15px; font-weight: 700; color: #4b5563; cursor: pointer; transition: all .2s; } .pay-tab svg { width: 18px; height: 18px; } .pay-tab--active { background: #2f6bf6; border-color: #2f6bf6; color: #fff; box-shadow: 0 6px 18px rgba(47,107,246,.38); } .pay-tab:not(.pay-tab--active):hover { border-color: var(--blue); color: var(--blue); } /* ── Payment card ── */ .pay-card-wrap { display: flex; justify-content: center; } .pay-card { display: grid; background: #e4dff6; border-radius: 20px; box-shadow: 0 20px 50px rgba(109,86,226,.10); border: none; overflow: hidden; max-width: 1160px; min-height: 500px; width: 100%; text-align: left; } /* ── per-tab panels — inactive panels are display:none; the card's min-height keeps the exact same width & height no matter which tab is active ── */ .pay-tab-panel { display: none; } .pay-tab-panel--active { display: flex; align-items: stretch; } /* LEFT panel */ .pay-card-left { padding: 40px 32px 40px 64px; flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; } /* method header */ .pay-method-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .pay-method-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #ede9fe; flex-shrink: 0; } .pay-method-icon svg { width: 26px; height: 26px; } .pay-method-name { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .pay-method-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #7c3aed; background: #ede9fe; padding: 4px 12px; border-radius: 8px; } .pay-method-desc { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; max-width: 480px; } /* feature bullets */ .pay-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .pay-feature-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #374151; } .pay-feature-item svg { width: 20px; height: 20px; flex-shrink: 0; } /* RIGHT panel — floating white summary card */ .pay-card-right { background: #fff; border-radius: 18px; box-shadow: 0 12px 32px rgba(84,63,205,.12); padding: 24px; margin: 20px; width: 470px; flex-shrink: 0; align-self: center; text-align: left; display: flex; flex-direction: column; } .pay-summary-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .pay-summary-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: #64748b; text-transform: uppercase; } .pay-summary-badge { font-size: 12px; font-weight: 600; color: #8b5cf6; background: #f3e8ff; padding: 5px 12px; border-radius: 50px; } .pay-summary-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; } .pay-sum-row { display: flex; justify-content: space-between; font-size: 15px; color: var(--text-muted); } .pay-sum-row span:last-child { color: var(--text); font-weight: 700; } .pay-summary-sep { height: 1px; background: var(--border); margin-bottom: 18px; } .pay-sum-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 15px; font-weight: 600; color: var(--text); } .pay-sum-total-amount { font-size: 20px; font-weight: 700; color: #2f6bf6; } .pay-escrow-note { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #3f6ad0; background: #f5f8ff; border: 1px solid #dce5fb; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; flex-shrink: 0; } .pay-escrow-note svg { width: 16px; height: 16px; flex-shrink: 0; } .pay-pi-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #fff; font-size: 15px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; transition: opacity .2s, transform .15s; flex-shrink: 0; } .pay-pi-btn:hover { opacity: .9; transform: translateY(-1px); } /* ── per-tab card themes (PayPal / Paystack = light blue like the reference) ── */ .pay-card--paypal, .pay-card--paystack { background: #e3effc; box-shadow: 0 24px 60px rgba(47,107,246,.12); } .pay-method-icon--paypal, .pay-method-icon--paystack { background: #dbeafe; } .pay-method-tag--blue { color: #2f6bf6; background: #dbeafe; } .pay-summary-badge--blue { color: #2f6bf6; background: #dbeafe; } .pay-pi-btn.pay-btn--paypal { background: #2f6bf6; } .pay-pi-btn.pay-btn--paystack { background: #22c3e6; } /* ── keep section-eyebrow, section-heading, section-sub for other sections ── */ .section-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); background: rgba(79,110,247,.1); padding: 4px 12px; border-radius: 50px; margin-bottom: 16px; letter-spacing: .04em; } .section-eyebrow--left { display: flex; } .section-heading { font-size: 46px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; color: var(--text); margin-bottom: 14px; } .section-heading--left { text-align: left; } .section-sub { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 32px; } /* ═══════════════════════════════════════ YOUR MONEY ALWAYS SAFE ═══════════════════════════════════════ */ .safe-section { background: linear-gradient(180deg, #F3F7FF 0%, #E9F0FE 100%); padding: 90px 0 80px; text-align: center; overflow: clip; } /* ── eyebrow pill ── */ .safe-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #C9D9F9; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; padding: 7px 16px; border-radius: 50px; margin-bottom: 26px; box-shadow: 0 2px 12px rgba(79,110,247,.08); } /* ── step cards ── */ .safe-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; margin-bottom: 20px; text-align: left; } .safe-card { position: relative; background: #fff; border: 1px solid #E2EBFB; border-radius: 16px; padding: 22px 20px 24px; transition: box-shadow .7s ease, transform .2s, border-color .7s ease; } .safe-card > * { position: relative; z-index: 1; } /* green highlight layer (fades in/out so the color can "jump" between cards) */ .safe-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(155deg, #E8FBF2 0%, #E9F2FE 100%); opacity: 0; transition: opacity .7s ease; pointer-events: none; } .safe-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .safe-card-top { display: flex; align-items: stretch; justify-content: space-between; margin-bottom: 20px; } .safe-icon { width: 46px; height: 46px; border-radius: 13px; background: #EAF1FE; display: flex; align-items: center; justify-content: center; } .safe-icon--green { background: #DDF6E9; } .safe-num { font-size: 26px; font-weight: 800; line-height: 1; color: #D3DEF4; letter-spacing: .02em; transition: color .7s ease; } .safe-card h4 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 7px; } .safe-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; } /* active card — highlight jumps here (cycled by JS every 5s) */ .safe-card--active { border-color: #9ADCC6; box-shadow: 0 12px 32px rgba(34,197,150,.18); } .safe-card--active::before { opacity: 1; } .safe-card--active:hover { box-shadow: 0 14px 36px rgba(34,197,150,.24); } .safe-card--active .safe-num { color: #B9E7D4; } /* ── trust badge chips ── */ .safe-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .safe-badge { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E2EBFB; border-radius: 12px; padding: 12px 16px; text-align: left; } .safe-badge-icon { width: 34px; height: 34px; border-radius: 50%; background: #EAF1FE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .safe-badge-icon--green { background: #E4F7EE; } .safe-badge h5 { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.3; } .safe-badge span { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--text-light); text-transform: uppercase; } /* ═══════════════════════════════════════ BUYERS LOVE THESE ═══════════════════════════════════════ */ /* BOOST HOW-TO MODAL (homepage). Centered dialog with blurred backdrop — same interaction pattern as the shop wishlist modal (.wl-modal in shop.css), scoped as .boost-modal so the homepage keeps its styles in style.css. Opened by [data-boost-modal-open]; closes on x, backdrop click, or Esc. */ .boost-modal-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 14, 43, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .boost-modal-backdrop.is-open { opacity: 1; pointer-events: auto; } .boost-modal { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 48px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 40px 32px 30px; box-shadow: 0 32px 80px rgba(10, 14, 43, 0.22), 0 2px 8px rgba(10, 14, 43, 0.08); text-align: center; transform: translateY(18px) scale(.97); transition: transform .25s cubic-bezier(.34,1.48,.64,1), opacity .22s ease; opacity: 0; } .boost-modal-backdrop.is-open .boost-modal { transform: translateY(0) scale(1); opacity: 1; } .boost-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e5e9f0; background: #f5f7fa; color: #6b7280; display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; } .boost-modal__close:hover { background: #ffe4e6; color: #e11d48; border-color: #fecdd3; } .boost-modal__icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #eef3ff, #e0eaff); border: 2px solid #c9d9f9; display: grid; place-items: center; margin: 0 auto 16px; } .boost-modal__title { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; } .boost-modal__sub { margin: 0 0 22px; font-size: 14px; color: #6b7280; line-height: 1.6; } .boost-modal__sub b { color: #1f2937; } .boost-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; text-align: left; } .boost-steps li { display: flex; gap: 12px; align-items: flex-start; background: #f6f9ff; border: 1px solid #e3ecfd; border-radius: 14px; padding: 12px 14px; } .boost-steps__num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #2f7cf6, #1e5fd6); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; } .boost-steps li b { display: block; font-size: 13.5px; color: #0f172a; } .boost-steps li div span { display: block; font-size: 12.5px; color: #64748b; margin-top: 2px; line-height: 1.5; } .boost-modal__actions { display: flex; flex-direction: column; gap: 10px; } .boost-modal__btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border-radius: 14px; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s, opacity .15s; } .boost-modal__btn:hover { transform: translateY(-1px); } .boost-modal__btn:active { transform: translateY(0); opacity: .88; } .boost-modal__btn--primary { background: linear-gradient(135deg, #1f64ff, #3b7eff); color: #fff; box-shadow: 0 8px 22px rgba(31, 100, 255, .30); } .boost-modal__btn--primary:hover { box-shadow: 0 12px 30px rgba(31, 100, 255, .40); } .boost-modal__btn--secondary { background: #f5f7fa; color: #1f2937; border: 1px solid #e5e9f0; } .boost-modal__btn--secondary:hover { background: #eef2ff; border-color: #c7d2fe; color: #1f64ff; } .boost-modal__note { margin: 18px 0 0; font-size: 12px; color: #9ca3af; line-height: 1.55; } @media (max-width: 480px) { .boost-modal { padding: 32px 20px 24px; border-radius: 20px; } .boost-modal__title { font-size: 19px; } } .buyers-section { background: #fff; padding: 36px 0 48px; overflow: clip; } /* ── compact layout so the whole TOP RATED grid fits a desktop viewport ── */ .buyers-section .buyers-header { margin-bottom: 16px; } .buyers-section .buyers-heading { font-size: 34px; } .buyers-section .buyers-eyebrow { margin-bottom: 10px; } .buyers-section .buyers-grid { gap: 12px; } .buyers-section .b-media { height: 136px; } .buyers-section .b-media--tumbler { height: 140px; } .buyers-section .b-card--tall { min-height: 0; } .buyers-section .b-info { padding: 10px 14px 12px; } .buyers-section .b-info--wide { padding: 12px 18px; } .buyers-section .b-card--cta { padding: 20px 18px; } .buyers-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 20px; } /* eyebrow pill */ .buyers-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: #E5F0FF; border: 1px solid #D8E7FE; color: #2F6BFF; font-size: 11px; font-weight: 700; letter-spacing: .13em; padding: 8px 16px; border-radius: 50px; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(15,28,77,.06); } .buyers-heading { font-size: 40px; margin-bottom: 0; } /* header right: boost note + button */ .buyers-header-right { display: flex; align-items: center; gap: 14px; } .boost-note { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; text-align: left; } .boost-note-title { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.4; } .boost-note-sub { font-size: 12px; font-weight: 600; color: var(--blue); } .boost-btn { background: #1E6FE8; border-radius: 50px; box-shadow: 0 6px 16px rgba(30,111,232,.28); } .boost-btn:hover { background: #1a5fd0; transform: translateY(-1px); } /* ── grid: 3 equal columns ── */ .buyers-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 14px; } /* explicit placement to match the design: headphones spans rows 1-2 in col 1 · chair & CTA span cols 2-3 */ .buyers-grid > .b-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .buyers-grid > .b-card:nth-child(2) { grid-column: 2; grid-row: 1; } .buyers-grid > .b-card:nth-child(3) { grid-column: 3; grid-row: 1; } .buyers-grid > .b-card:nth-child(4) { grid-column: 1; grid-row: 3; } .buyers-grid > .b-card:nth-child(5) { grid-column: 2 / span 2; grid-row: 2; } .buyers-grid > .b-card:nth-child(6) { grid-column: 2 / span 2; grid-row: 3; } .b-card { background: #fff; border: 1px solid #E7EEFB; border-radius: 16px; overflow: hidden; position: relative; transition: box-shadow .2s, transform .2s; } .b-card:hover { box-shadow: 0 12px 30px rgba(79,110,247,.13); transform: translateY(-3px); } /* badges */ .b-badge { position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; color: #fff; padding: 5px 11px; border-radius: 8px; } .b-badge--orange { background: linear-gradient(135deg, #FB7A45 0%, #F0540E 100%); } .b-badge--blue { background: linear-gradient(135deg, #2F7CF6 0%, #1E5FD6 100%); } .b-badge--static { position: static; } /* media areas */ .b-media { position: relative; height: 176px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .b-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .b-media--headphones { background: linear-gradient(165deg, #F0E4CF 0%, #D9C3A0 100%); } .b-media--backpack { background: linear-gradient(165deg, #46609A 0%, #1D2B4E 100%); } .b-media--camera { background: linear-gradient(165deg, #E2E6ED 0%, #C2CBDA 100%); } .b-media--tumbler { background: linear-gradient(165deg, #F4F7FC 0%, #E1E9F6 100%); height: 180px; } .b-media--chair { background: linear-gradient(165deg, #FFFFFF 0%, #F1F5FB 100%); height: auto; width: 30%; flex-shrink: 0; border-right: 1px solid #EEF2FA; } /* ── dynamic homepage cards (running boosts lead, best sellers fill the rest) ── The tiles are anchors so the whole card links to the product page; grid items are blockified by CSS and .b-card--wide already sets display:flex, so each tile keeps the exact same box as the original design. */ a.b-card { text-decoration: none; color: inherit; display: block; } .b-media--product { background: linear-gradient(165deg, #F4F7FC 0%, #E1E9F6 100%); } /* slot 5 wide card media — same 30% rail as the static chair card */ .b-media--wide { height: auto; width: 30%; flex-shrink: 0; border-right: 1px solid #EEF2FA; } /* tall headphones card — image fills card, info overlaid */ .b-card--tall { min-height: 306px; } .b-card--tall .b-media { position: absolute; inset: 0; height: auto; align-items: stretch; padding-top: 0; } .b-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 44px 16px 16px; text-align: left; background: linear-gradient(180deg, rgba(20,30,60,0) 0%, rgba(20,30,60,.42) 78%); } .b-overlay--soft { padding: 34px 16px 14px; background: linear-gradient(180deg, rgba(20,30,60,0) 0%, rgba(20,30,60,.5) 88%); } .b-cat { font-size: 9px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.72); text-transform: uppercase; margin-bottom: 3px; } /* info areas */ .b-name { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.35; } .b-name--light { color: #fff; font-size: 14px; } .b-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .b-count { font-size: 10.5px; color: var(--text-light); } .b-rating--light .b-count { color: rgba(255,255,255,.7); } .stars { font-size: 12px; color: #F5A623; letter-spacing: 1.5px; } .b-info { padding: 13px 16px 16px; text-align: left; } .b-shop { font-size: 11.5px; color: var(--text-muted); } .b-price { font-size: 15.5px; font-weight: 800; color: var(--blue); } .b-price--light { color: #fff; font-size: 18px; } .b-price--blue { font-size: 19px; color: var(--blue); } .b-old { font-size: 11.5px; color: rgba(255,255,255,.6); text-decoration: line-through; margin-top: 2px; } .b-info-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .b-info-row--push { margin-top: 10px; } .b-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } /* payment pills */ .b-pay-pills { display: flex; gap: 6px; } .b-pay-pills span, .b-pay-pill { font-size: 9.5px; font-weight: 700; padding: 4px 10px; border-radius: 50px; } .b-pay-pills span { background: rgba(255,255,255,.92); color: #1E6FE8; } .b-pay-pills .pill-pi { background: #7C3AED; color: #fff; } .b-pay-pill { background: #EEF3FE; color: #4F6EF7; border: 1px solid #DCE6FB; } /* chair wide card */ .b-card--wide, a.b-card.b-card--wide { display: flex !important; align-items: stretch; } .b-info--wide { flex: 1; display: flex; flex-direction: column; justify-content: center; } .b-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .b-cat-tag { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--text-light); } /* boost CTA card */ .b-card--cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 24px; text-align: center; background: #fff; border: 1.5px dashed #C9D9F9; } .cta-bolt { width: 42px; height: 42px; border-radius: 50%; background: #EEF3FE; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .cta-title { font-size: 15px; font-weight: 700; color: var(--text); } .cta-sub { font-size: 12.5px; color: var(--text-muted); max-width: 270px; margin-bottom: 10px; } /* ── Product visuals (CSS drawings) ── */ .headphone-visual { position: relative; width: 150px; height: 118px; } .hp-band { width: 106px; height: 58px; border: 13px solid #B9BFCB; border-bottom: none; border-radius: 60px 60px 0 0; position: absolute; top: 0; left: 22px; } .hp-cup { width: 44px; height: 56px; background: linear-gradient(180deg, #DDE1E8 0%, #AEB4C0 100%); border-radius: 16px 16px 20px 20px; position: absolute; bottom: 0; box-shadow: inset 0 -8px 14px rgba(0,0,0,.08); } .hp-cup--left { left: 0; } .hp-cup--right { right: 0; } .backpack-visual { position: relative; width: 110px; height: 132px; } .bp-body { width: 100px; height: 122px; background: linear-gradient(160deg, #5A6E9E 0%, #2E4066 100%); border-radius: 26px 26px 18px 18px; position: absolute; bottom: 0; left: 5px; box-shadow: 0 10px 24px rgba(0,0,0,.25); } .bp-flap { width: 100px; height: 42px; background: #24355C; border-radius: 26px 26px 8px 8px; position: absolute; top: 10px; left: 5px; } .bp-strap { width: 3px; height: 34px; background: #8FA2CC; border-radius: 2px; position: absolute; top: 52px; left: 54px; } .camera-visual { position: relative; } .cam2-body { width: 112px; height: 74px; background: linear-gradient(160deg, #F0F2F6 0%, #C6CDD8 100%); border-radius: 14px; box-shadow: 0 12px 26px rgba(15,28,77,.2); } .cam2-lens { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; background: #1B2437; border-radius: 50%; border: 5px solid #39445A; } .chair-visual { display: flex; flex-direction: column; align-items: center; gap: 2px; } .chair-back { width: 64px; height: 64px; background: linear-gradient(160deg, #35558F 0%, #22406F 100%); border-radius: 12px 12px 4px 4px; } .chair-seat { width: 78px; height: 14px; background: #2B4C86; border-radius: 4px; } .chair-leg { width: 7px; height: 26px; background: #8A93A6; border-radius: 3px; } .tumbler-visual { display: flex; align-items: flex-end; gap: 6px; height: 96px; } .tumb { width: 30px; border-radius: 7px 7px 5px 5px; } .tumb--1 { height: 84px; background: linear-gradient(180deg, #4C7DE0, #2E5FC0); } .tumb--2 { height: 74px; background: linear-gradient(180deg, #F98A4B, #E85D1F); } .tumb--3 { height: 88px; background: linear-gradient(180deg, #48B96B, #2E9A50); } .tumb--4 { height: 78px; background: linear-gradient(180deg, #E85FA8, #D6448F); } .tumb--5 { height: 84px; background: linear-gradient(180deg, #F3C93F, #DFAF1E); } /* ═══════════════════════════════════════ START SELLING CTA ═══════════════════════════════════════ */ .selling-section { background: linear-gradient(140deg, #0f1c4d 0%, #1a2b6e 50%, #162040 100%); padding: 80px 0; color: #fff; overflow: clip; } .selling-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .selling-heading { font-size: 46px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; } .selling-sub { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 28px; max-width: 400px; } .selling-ctas { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; } .selling-stats { display: flex; gap: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); } .stat-num { display: block; font-size: 28px; font-weight: 900; color: #fff; } .stat-label { font-size: 13px; color: rgba(255,255,255,.5); font-weight: 500; } .selling-features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .selling-feature { display: flex; gap: 14px; align-items: stretch; } .sf-icon { width: 42px; height: 42px; background: rgba(79,110,247,.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .selling-feature h5 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; } .selling-feature p { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.6; } /* ═══════════════════════════════════════ FOOTER (redesigned) ═══════════════════════════════════════ */ .footer { background: #080f28; color: rgba(255,255,255,.6); position: relative; overflow: hidden; } /* subtle radial glow in background */ .footer::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 300px; background: radial-gradient(ellipse at center, rgba(77,166,255,.10) 0%, transparent 70%); pointer-events: none; } /* glowing top accent line */ .footer-glow-bar { height: 2px; background: linear-gradient(90deg, transparent 0%, #1a6fe8 30%, #0fb8e8 55%, #00d4ff 75%, transparent 100%); opacity: .75; } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 28px 40px; } /* ── Newsletter banner ── */ .footer-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 68px 0 64px; } .fnl-left { flex: 1; } .fnl-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4da6ff; background: rgba(77,166,255,.12); border: 1px solid rgba(77,166,255,.25); padding: 3px 10px; border-radius: 50px; margin-bottom: 12px; } .fnl-heading { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 6px; } .fnl-sub { font-size: 13.5px; color: rgba(255,255,255,.45); line-height: 1.6; max-width: 400px; } .fnl-form { display: flex; gap: 0; flex-shrink: 0; } .fnl-input { width: 260px; padding: 16px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-right: none; border-radius: 50px 0 0 50px; color: #fff; font-size: 13.5px; font-family: inherit; outline: none; transition: border-color .2s, background .2s; } .fnl-input::placeholder { color: rgba(255,255,255,.3); } .fnl-input:focus { background: rgba(255,255,255,.10); border-color: rgba(77,166,255,.5); } .fnl-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(90deg, #1a6fe8, #0fb8e8); color: #fff; font-size: 13.5px; font-weight: 700; font-family: inherit; padding: 16px 26px; border: none; border-radius: 0 50px 50px 0; cursor: pointer; white-space: nowrap; transition: opacity .2s, transform .15s; } .fnl-btn:hover { opacity: .88; transform: translateY(-1px); } /* ── Divider ── */ .footer-divider { height: 1px; background: rgba(255,255,255,.07); margin: 0 0 44px; } /* ── Main columns ── */ .footer-cols { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; } /* Brand column */ .footer-col--brand {} /* Logo.png on the dark footer: white chip keeps the navy wordmark readable */ .footer-logo-img { display: block; height: 40px; width: auto; background: #ffffff; border-radius: 10px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); } .footer-logo { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; } .footer-logo-name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.02em; } .footer-brand-desc { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.7; max-width: 260px; margin-bottom: 20px; } /* payment chips */ .footer-pay-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; } .pay-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); padding: 4px 10px; border-radius: 50px; transition: background .2s; } .pay-chip:hover { background: rgba(255,255,255,.12); color: #fff; } /* social icons */ .footer-socials { display: flex; gap: 10px; } .social-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); transition: background .2s, color .2s, transform .15s; } .social-icon:hover { background: rgba(77,166,255,.18); border-color: rgba(77,166,255,.4); color: #4da6ff; transform: translateY(-2px); } /* Link columns */ .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 18px; } .footer-link-list { list-style: none; display: flex; flex-direction: column; gap: 11px; } .footer-link-list a { font-size: 13.5px; color: rgba(255,255,255,.5); transition: color .2s, padding-left .2s; display: flex; align-items: center; gap: 7px; } .footer-link-list a:hover { color: #fff; padding-left: 4px; } .link-tag { font-size: 9px; font-weight: 700; letter-spacing: .06em; background: linear-gradient(90deg, #1a6fe8, #0fb8e8); color: #fff; padding: 2px 7px; border-radius: 50px; } /* ── Bottom bar ── */ .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; } .footer-copy { font-size: 12.5px; color: rgba(255,255,255,.28); } .footer-badges { display: flex; align-items: center; gap: 20px; } .footer-badge-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255,255,255,.35); font-weight: 500; } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a { font-size: 12.5px; color: rgba(255,255,255,.28); transition: color .2s; } .footer-legal-links a:hover { color: rgba(255,255,255,.7); } /* ═══════════════════════════════════════ HAMBURGER + MOBILE / TABLET DRAWER MENU ═══════════════════════════════════════ */ .nav-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(31,100,255,.18); background: rgba(255,255,255,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(31,100,255,.10); cursor: pointer; flex-shrink: 0; margin-left: 4px; transition: background .2s, transform .15s, box-shadow .2s; } .nav-burger:hover { box-shadow: 0 6px 18px rgba(31,100,255,.16); } .nav-burger:active { transform: scale(.94); } .nav-burger-box { position: relative; width: 22px; height: 16px; display: block; } .nav-burger-line { position: absolute; left: 0; width: 100%; height: 2.2px; border-radius: 2px; background: #0A172E; transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .25s, width .25s, background .2s; } .nav-burger-line:nth-child(1) { top: 0; } .nav-burger-line:nth-child(2) { top: 7px; width: 72%; } .nav-burger-line:nth-child(3) { top: 14px; } .nav-burger:hover .nav-burger-line { background: #1F64FF; } .nav-burger.is-active .nav-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #1F64FF; } .nav-burger.is-active .nav-burger-line:nth-child(2) { opacity: 0; transform: translateX(-8px); } .nav-burger.is-active .nav-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #1F64FF; } .mmenu { position: fixed; inset: 0; z-index: 500; visibility: hidden; pointer-events: none; transition: visibility 0s .55s; /* The closed drawer panel rests at translateX(105%) — without clipping it pokes past the right edge of the viewport and creates a horizontal page scrollbar (most visible on the auth pages on mobile). */ overflow: hidden; overflow: clip; } .mmenu--open { visibility: visible; pointer-events: auto; transition: visibility 0s; } .mmenu-backdrop { position: absolute; inset: 0; background: rgba(10,23,46,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s ease; } .mmenu--open .mmenu-backdrop { opacity: 1; } .mmenu-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 88vw); display: flex; flex-direction: column; background: radial-gradient(480px 320px at 100% 0%, rgba(31,100,255,.14) 0%, rgba(31,100,255,0) 70%), linear-gradient(180deg, #FFFFFF 0%, #F2F7FF 100%); box-shadow: -24px 0 60px rgba(10,23,46,.18); border-radius: 28px 0 0 28px; transform: translateX(105%); transition: transform .55s cubic-bezier(.22,1,.36,1); padding: 22px 26px 28px; overflow-y: auto; } .mmenu--open .mmenu-panel { transform: translateX(0); } .mmenu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(31,100,255,.10); margin-bottom: 20px; flex-shrink: 0; } .mmenu-head .logo-name { font-size: 22px; } .mmenu-close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(31,100,255,.18); background: rgba(31,100,255,.06); color: #0A172E; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .25s, transform .3s; } .mmenu-close:hover { background: rgba(31,100,255,.12); transform: rotate(90deg); } /* ── Links: staggered entrance ── */ .mmenu-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; } .mmenu-link { display: flex; align-items: center; gap: 14px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #0A172E; padding: 15px 16px; border-radius: 14px; opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1), background .2s, color .2s; } .mmenu--open .mmenu-link { opacity: 1; transform: translateY(0); transition-delay: calc(.10s + var(--i) * .06s), calc(.10s + var(--i) * .06s), 0s, 0s; } .mmenu-num { font-size: 11px; font-weight: 700; color: #1F64FF; background: rgba(31,100,255,.10); width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, color .2s; } .mmenu-arrow { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; } .mmenu-link { cursor: pointer; } .mmenu-link--active { background: rgba(31,100,255,.07); color: #1F64FF; } .mmenu-link:hover { background: rgba(31,100,255,.07); color: #1F64FF; } .mmenu-link:hover .mmenu-num { background: #1F64FF; color: #fff; } .mmenu-link:hover .mmenu-arrow { opacity: 1; transform: translateX(0); } /* ── Drawer footer actions ── */ .mmenu-foot { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(31,100,255,.10); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .mmenu-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #1F64FF 0%, #184FE0 100%); color: #fff; font-weight: 700; font-size: 16px; padding: 17px 24px; border-radius: 999px; box-shadow: 0 10px 24px rgba(31,100,255,.30); transition: transform .15s, box-shadow .2s; } .mmenu-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(31,100,255,.36); } .mmenu-signin { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #0A172E; font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; border: 1.5px solid rgba(31,100,255,.22); transition: border-color .2s, color .2s, background .2s; } .mmenu-signin:hover { border-color: #1F64FF; color: #1F64FF; background: rgba(31,100,255,.05); } body.mmenu-locked { overflow: hidden; } /* ── Show burger / hide inline nav on tablet + mobile ── */ @media (max-width: 1100px) { .nav-links { display: none; } .nav-burger { display: inline-flex; } .btn-sell { padding: 13px 22px; font-size: 15px; } } @media (max-width: 600px) { .nav-signin { display: none; } .btn-sell { display: none; } .nav-burger { width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .mmenu-panel, .mmenu-backdrop, .mmenu-link, .nav-burger-line { transition-duration: .01s !important; } .mmenu--open .mmenu-link { transition-delay: 0s !important; } } /* ═══════════════════════════════════════ RESPONSIVE – BASIC ═══════════════════════════════════════ */ @media (max-width: 1100px) { .hero-heading { font-size: 88px; } /* keep the absolute floats clear of the centered copy */ .hero-float-left { left: 8px; } .hero-float-right { right: 8px; } .hero-float-card { width: 210px; } } @media (max-width: 900px) { .hero-heading { font-size: 52px; } .hero-sub { font-size: 17px; max-width: 560px; } .section-heading { font-size: 34px; } .selling-heading { font-size: 34px; } .buyers-heading { font-size: 34px; } /* ── tablet hero: floats stop overlapping, dock into a tidy in-flow row ── */ .hero-wrapper { height: auto; min-height: 0; } .hero { padding: 40px 28px 56px; } .hero-inner { align-items: center; text-align: center; max-width: 720px; } .hero-ctas { flex-wrap: wrap; } .hero-showcase { position: static; inset: auto; display: flex; justify-content: center; align-items: stretch; gap: 18px; margin-top: 36px; width: 100%; pointer-events: auto; } .hero-float-card { position: static; top: auto; left: auto; right: auto; width: min(300px, calc(50% - 9px)); flex: 0 1 300px; transform: none; /* slow gentle drift — left & right staggered so they don't move in sync */ animation: heroFloatSoft 6s ease-in-out infinite; } .hero-float-left { animation-delay: 0s; } .hero-float-right { animation-delay: -3s; } .hero-float-left, .hero-float-right { left: auto; right: auto; } .hfc-img { height: 150px; } .safe-cards { grid-template-columns: 1fr 1fr; } .selling-inner { grid-template-columns: 1fr; gap: 36px; } .selling-features { grid-template-columns: 1fr; } .buyers-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .buyers-grid > .b-card:nth-child(n) { grid-column: auto; grid-row: auto; min-width: 0; } .b-card--tall { min-height: 0; } .b-card--tall .b-media { position: relative; inset: auto; height: 220px; } /* chair card: keep media + info side-by-side on tablet */ .b-card--wide { flex-direction: row; } .b-card--wide .b-media--chair { width: 38%; height: auto; min-height: 220px; border-right: 1px solid #EEF2FA; } .b-card--wide .b-media--wide { width: 38%; height: auto; min-height: 220px; border-right: 1px solid #EEF2FA; } .b-card--wide .b-info--wide { padding: 18px; } /* header stacks neatly instead of squeezing */ .buyers-header { flex-direction: column; align-items: flex-start; } .buyers-header-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-newsletter { flex-direction: column; align-items: flex-start; gap: 28px; } .fnl-form { width: 100%; } .fnl-input { flex: 1; width: auto; } /* ── pay section (tablet & below) ── drop the section's horizontal padding so the container's 24px gutters are the only spacing — the payment card then spans the full container width */ .pay-section { padding: 64px 0 80px; } /* tabs: stretch into an equal-width row across the full width */ .pay-tabs { display: flex; width: 100%; gap: 10px; margin-bottom: 32px; } .pay-tab { flex: 1; justify-content: center; padding: 12px 10px; font-size: 13.5px; gap: 7px; } .pay-card-wrap { padding: 0; } .pay-card { min-height: 0; width: 100%; max-width: 100%; } .pay-tab-panel { flex-direction: column; } .pay-card-left { padding: 28px 24px; } .pay-method-icon { width: 48px; height: 48px; border-radius: 12px; } .pay-method-icon svg { width: 22px; height: 22px; } .pay-method-name { font-size: 20px; } .pay-method-desc { font-size: 14px; } .pay-features-grid { gap: 12px 16px; } .pay-feature-item { font-size: 13px; } .pay-feature-item svg { width: 22px; height: 22px; } .pay-card-right { width: auto; margin: 0 16px 16px; align-self: stretch; padding: 20px; } .pay-sum-row { font-size: 14px; } .pay-heading { font-size: 34px; } /* pay action button: comfortable tap target on tablet */ .pay-pi-btn { padding: 15px; min-height: 52px; font-size: 15px; } .safe-badges { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .nav-links { display: none; } /* ── mobile hero: compact stacked copy, photos below as neat cards ── */ .hero-wrapper { height: auto; min-height: 0; } .hero { padding: 32px 0 52px; display: block; } .hero-inner { max-width: 100%; padding: 0 20px; align-items: center; text-align: center; } .hero-eyebrow-pill { white-space: normal; text-align: center; letter-spacing: .14em; line-height: 1.7; max-width: 100%; } .hero-heading { font-size: clamp(38px, 11.5vw, 46px); } .hero-sub { font-size: 15px; max-width: 100%; } .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin: 0 auto; } .btn-browse, .btn-selling-free { justify-content: center; width: 100%; font-size: 14px; padding: 15px 22px; } .hero-showcase { position: static; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 30px; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; pointer-events: auto; align-items: start; } .hero-float-card { position: static; top: auto; left: auto; right: auto; width: 100%; min-width: 0; transform: none; /* slow gentle drift — side by side, staggered timing */ animation: heroFloatSoft 7s ease-in-out infinite; } .hero-float-left { animation-delay: 0s; } .hero-float-right { animation-delay: -3.5s; } .hero-float-left, .hero-float-right { left: auto; right: auto; } .hfc-img { height: 120px; } .hfc-name { font-size: 12.5px; } .hfc-price { font-size: 15px; } .section-heading { font-size: 28px; } .selling-heading { font-size: 28px; } /* ── escrow + sellers: one centered column, never pushed/cut on the right ── */ .safe-section { padding: 60px 0; } .selling-section { padding: 60px 0; } .safe-section .container, .selling-section .container { padding-left: 20px; padding-right: 20px; } .safe-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .safe-card { width: 100%; max-width: 100%; margin: 0; } .safe-card p { overflow-wrap: anywhere; } .section-sub br { display: none; } .section-sub { max-width: 100%; } .selling-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; width: 100%; max-width: 100%; text-align: left; } .selling-left, .selling-right { min-width: 0; max-width: 100%; } .selling-features { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* ── buyers: clean single column, every card intact & in DOM order ── */ .buyers-section { padding: 56px 0; } .buyers-section .container { padding-left: 20px; padding-right: 20px; } .buyers-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .buyers-header-right { width: 100%; flex-direction: column; align-items: stretch; } .boost-note { width: 100%; } .boost-btn { justify-content: center; width: 100%; } .buyers-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; max-width: 100%; margin: 0 auto; } .buyers-grid > .b-card:nth-child(n) { grid-column: auto; grid-row: auto; min-width: 0; width: 100%; max-width: 100%; margin: 0; } .b-card--tall { min-height: 0; } .b-card--tall .b-media { position: relative; inset: auto; height: 230px; } .b-overlay { padding: 34px 16px 14px; } .b-card--wide { flex-direction: column; } .b-media--chair { width: 100%; height: 260px; min-height: 260px; border-right: none; border-bottom: 1px solid #EEF2FA; border-radius: 0; flex-shrink: 0; } .b-media--chair img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 0; } /* dynamic wide card media stacks full-width on phones */ .b-media--wide { width: 100%; height: 260px; min-height: 260px; border-right: none; border-bottom: 1px solid #EEF2FA; border-radius: 0; flex-shrink: 0; } .b-media--wide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 0; } .b-card--cta { padding: 28px 20px; } .safe-badges { grid-template-columns: 1fr; } /* footer: single column, all left-aligned */ .footer-cols { grid-template-columns: 1fr; } .footer-newsletter { padding: 48px 0 44px; } .fnl-heading { font-size: 20px; } .fnl-form { flex-direction: column; gap: 10px; } .fnl-input { width: 100%; border-radius: 50px; border-right: 1px solid rgba(255,255,255,.12); } .fnl-btn { border-radius: 50px; justify-content: center; } .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; text-align: left; } .footer-badges { justify-content: flex-start; flex-wrap: wrap; gap: 12px; } .footer-legal-links { justify-content: flex-start; flex-wrap: wrap; gap: 14px; } .footer-copy { text-align: left; } .footer-pay-chips { justify-content: flex-start; } .footer-socials { justify-content: flex-start; } .selling-stats { gap: 24px; } .hero-stats { gap: 28px; } } /* ── pay section (mobile) ── */ @media (max-width: 600px) { .pay-section { padding: 52px 0 64px; } .pay-heading { font-size: 26px; } .pay-sub { margin-bottom: 24px; } .pay-sub br { display: none; } /* tabs: compact but still full width, one row of 3 equal buttons */ .pay-tabs { gap: 8px; margin-bottom: 26px; } .pay-tab { padding: 11px 6px; font-size: 12.5px; border-radius: 12px; } .pay-tab svg { width: 15px; height: 15px; } /* card: full width with tighter inner spacing so content can breathe */ .pay-card { border-radius: 16px; } .pay-card-left { padding: 24px 20px; } .pay-method-header { gap: 12px; margin-bottom: 18px; } .pay-method-desc { margin-bottom: 20px; } .pay-features-grid { gap: 10px 12px; } /* summary card: full width inside the card */ .pay-card-right { margin: 0 14px 14px; padding: 18px 16px; } .pay-summary-header { margin-bottom: 18px; } .pay-summary-rows { gap: 12px; } /* pay action button: full width, comfortable tap target */ .pay-pi-btn { padding: 14px; min-height: 52px; font-size: 15px; border-radius: 12px; } .pay-pi-btn svg { width: 17px; height: 17px; } .pay-pi-btn:active { transform: none; opacity: .85; } } /* Mobile: full-width cards — centred, never overflow-right */ @media (max-width: 640px) { .ip-card, .about-card, .blog-card, .seller-card, .b-card, .contact-form-card, .contact-office-card, .help-card, .feature-card, .about-value, .refund-card, .rp-card { min-width: 0; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } .contact-section-mobile-full { grid-column: 1 / -1; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } /* Tighten all section containers to 16px side padding on mobile */ .container, .help-container, .blog-pad, .about-pad, .ip-pad, .ip-section { padding-left: 16px !important; padding-right: 16px !important; } } /* ═══════════════════════════════════════════════════ SCROLL-REVEAL & COUNTER ANIMATIONS ═══════════════════════════════════════════════════ */ /* ── Base reveal state: elements start invisible & shifted ── */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } .reveal.reveal--left { transform: translateX(-40px); } .reveal.reveal--right { transform: translateX(40px); } .reveal.reveal--scale { transform: scale(.92) translateY(20px); } .reveal.reveal--fade { transform: none; } /* ── Visible state (added by JS) ── */ .reveal.is-visible { opacity: 1; transform: none; } /* ── Stagger delays for sibling groups ── */ .reveal-group .reveal:nth-child(1) { transition-delay: 0s; } .reveal-group .reveal:nth-child(2) { transition-delay: .10s; } .reveal-group .reveal:nth-child(3) { transition-delay: .20s; } .reveal-group .reveal:nth-child(4) { transition-delay: .30s; } .reveal-group .reveal:nth-child(5) { transition-delay: .40s; } .reveal-group .reveal:nth-child(6) { transition-delay: .50s; } /* ── Counter number pulse when it finishes ── */ @keyframes counterPop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } } .counter-done { animation: counterPop .4s ease; } /* ── Section heading (no underline animation) ── display:block so the heading always starts on its own line — inline-block made it flow beside inline eyebrow pills */ .reveal-heading { position: relative; display: block; } /* ── Respect reduced-motion preference ── */ @media (prefers-reduced-motion: reduce) { .reveal { transition-duration: .01s !important; transition-delay: 0s !important; } .counter-done { animation: none; } }