/* ReviewBird Tools — Velocity Benchmark Tool */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); /* ── Brand tokens ─────────────────────────────────────────────── */ #rb-velocity-benchmark, #rb-velocity-benchmark .rb-vb-wrapper { --rb-deep-purple: #3B0078; --rb-bright-purple: #6115BF; --rb-turquoise: #09B8BD; --rb-lime: #7EDA3B; --rb-negative: #CC3366; --rb-bg: #F6F7F9; --rb-card-bg: #ffffff; --rb-text: #1A1A2E; --rb-text-muted: #6B7280; --rb-border: #E5E7EB; --rb-shadow-sm: 0 2px 8px rgba(59,0,120,.08), 0 1px 3px rgba(0,0,0,.06); --rb-shadow-md: 0 8px 24px rgba(59,0,120,.12), 0 2px 8px rgba(0,0,0,.08); --rb-shadow-lg: 0 20px 48px rgba(59,0,120,.18), 0 8px 16px rgba(0,0,0,.10); --rb-radius-sm: 12px; --rb-radius-md: 24px; --rb-radius-lg: 24px; --rb-radius-xl: 32px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--rb-text); } /* ── Reset isolation ──────────────────────────────────────────── */ :where(#rb-velocity-benchmark) *, :where(#rb-velocity-benchmark) *::before, :where(#rb-velocity-benchmark) *::after { box-sizing: border-box; } :where(#rb-velocity-benchmark) h1,:where(#rb-velocity-benchmark) h2, :where(#rb-velocity-benchmark) h3,:where(#rb-velocity-benchmark) h4 { font-family: 'Poppins', -apple-system, sans-serif; font-weight: 700; line-height: 1.2; margin: 0; padding: 0; color: var(--rb-text); background: none; border: none; letter-spacing: normal; text-transform: none; } :where(#rb-velocity-benchmark) p { margin: 0; padding: 0; font-family: 'Poppins', -apple-system, sans-serif; } :where(#rb-velocity-benchmark) ul, :where(#rb-velocity-benchmark) ol { list-style: none; margin: 0; padding: 0; } :where(#rb-velocity-benchmark) li { margin: 0; padding: 0; background: transparent; border: 0; } :where(#rb-velocity-benchmark) li::before,:where(#rb-velocity-benchmark) li::after { content: none; } :where(#rb-velocity-benchmark) a { color: inherit; text-decoration: none !important; background: transparent; } :where(#rb-velocity-benchmark) svg { display: block; overflow: visible; } /* ── Wrapper, orbs, cards ─────────────────────────────────────── */ .rb-vb-wrapper { position: relative; overflow: visible; background: transparent; padding: 28px 18px 28px; margin: 72px 0 0; } @media (min-width: 641px) { .rb-vb-wrapper { padding: 52px 40px 40px; margin-top: 88px; } } /* Faded background panel: a rounded "card" whose left/right edges melt into the page (no hard rectangle on wide screens) while the top/bottom stay crisp so the card edge is clearly visible under the menu. The orb glows live here too, so everything fades together. Cards sit above this layer, unaffected. */ .rb-vb-wrapper::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: var(--rb-radius-xl); background: radial-gradient(480px 480px at 6% -10%, rgba(97,21,191,.22), transparent 62%), radial-gradient(420px 420px at 96% 112%, rgba(9,184,189,.18), transparent 62%), var(--rb-bg); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%); } .rb-vb-wrapper .rb-orb { display: none; } /* Soft bottom finish: the panel (incl. the turquoise orb glow) fades into the page instead of ending in a hard cut above the footer. */ .rb-vb-wrapper::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 140px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 92%); } /* Keep cards clear of a sticky site header when scrolled/anchored to. */ #rb-velocity-benchmark .rb-card, #rb-velocity-benchmark #rb-vb-loading, #rb-velocity-benchmark .rb-vb-results { scroll-margin-top: 130px; } .rb-vb-wrapper .rb-card { position: relative; z-index: 1; background: var(--rb-card-bg); border-radius: var(--rb-radius-md); box-shadow: var(--rb-shadow-md); padding: 20px 18px; margin-bottom: 20px; } @media (min-width: 641px) { .rb-vb-wrapper .rb-card { padding: 28px 32px; } } /* ── Utilities ────────────────────────────────────────────────── */ .rb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .rb-subheadline { font-size: 16px; line-height: 1.6; color: var(--rb-text-muted); margin: 0 0 20px; max-width: 680px; } .rb-trust-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 24px; font-size: 13px; font-weight: 500; color: #4B5563; } .rb-trust-item { display: inline-flex; align-items: center; gap: 6px; } .rb-trust-ic { flex-shrink: 0; } .rb-trust-ic--check { color: #16A34A; } .rb-trust-ic--lock { color: #4B5563; } .rb-trust-flag { font-size: 14px; line-height: 1; } .rb-field-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--rb-text); margin: 0 0 8px; } .rb-card-heading { position: relative; z-index: 1; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--rb-deep-purple); margin: 0 0 10px; } @media (min-width: 641px) { .rb-card-heading { font-size: 28px; } } .rb-step-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--rb-text-muted); background: #EBEBF0; border-radius: 20px; padding: 5px 12px; margin-bottom: 16px; } .rb-step-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; flex-shrink: 0; animation: rb-vb-dot-pulse 1.9s ease-out infinite; } @keyframes rb-vb-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .rb-step-badge-done { color: #16A34A; background: rgba(34,197,94,.12); } .rb-step-badge-done svg { background: #22C55E; border-radius: 50%; padding: 2px; color: #fff; width: 16px; height: 16px; flex-shrink: 0; } .rb-section-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rb-text-muted); margin-bottom: 14px; } .rb-section-label svg { color: var(--rb-bright-purple); } /* ── Search input & autocomplete ──────────────────────────────── */ .rb-combobox-wrapper { position: relative; } .rb-input-row { display: flex; align-items: center; gap: 12px; border: 2px solid var(--rb-border); border-radius: var(--rb-radius-lg); padding: 14px 18px; background: #fff; transition: border-color .2s, box-shadow .2s; overflow: hidden; } .rb-input-row:focus-within { border-color: var(--rb-text); box-shadow: 0 0 0 4px rgba(26,26,46,.10); } .rb-input-icon { color: var(--rb-text-muted); flex-shrink: 0; } .rb-search-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--rb-text); outline: none; } .rb-search-input::placeholder { color: var(--rb-text-muted); font-weight: 400; } .rb-spinner { display: none; width: 18px; height: 18px; border: 2px solid var(--rb-border); border-top-color: var(--rb-bright-purple); border-radius: 50%; animation: rb-vb-spin .7s linear infinite; flex-shrink: 0; } @keyframes rb-vb-spin { to { transform: rotate(360deg); } } /* Override the site theme, which paints every