.trust-safety { /* Same dark-panel recipe as final-cta/legal-page/testimonials' fade-in -- one shared black across the site instead of each section inventing its own near-black tint. */ background: radial-gradient(120% 100% at 20% 0%, var(--panel-dark) 0%, var(--ink) 60%); color: #fff; padding: 110px 32px; } .trust-safety-inner { max-width: 1180px; display: flex; align-items: center; gap: 64px; flex-wrap: wrap; } .trust-safety-copy { flex: 1 1 440px; min-width: 300px; } .trust-safety-copy h2 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 18px 0 0; } .trust-safety-copy > p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 18px 0 0; max-width: 520px; } .trust-safety-stats { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; } .trust-safety-visual { flex: 1 1 380px; min-width: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; min-height: 300px; } .trust-safety-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(var(--accent-rgb), .22); } .ring-1 { width: 220px; height: 220px; animation: trustPulseRotate 22s linear infinite; } .ring-2 { width: 280px; height: 280px; border-color: rgba(var(--accent-rgb), .12); animation: trustPulseRotateReverse 28s linear infinite; } @keyframes trustPulseRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes trustPulseRotateReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* The 3D shield render replaces the old flat icon card -- tappable, and wired (see js/behaviors/trust-safety-alert.js) to flip the caption below into an alert state and flash a red glow around the whole viewport, demonstrating the section's "SPOT connects the right people immediately" claim rather than just illustrating it. */ .trust-shield { position: relative; z-index: 2; display: block; background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1); } .trust-shield:hover { transform: scale(1.04); } .trust-shield:active { transform: scale(.97); } .trust-shield:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } .trust-shield-img { display: block; width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5)); transition: filter .3s ease; } .trust-shield.is-alert .trust-shield-img { filter: drop-shadow(0 0 28px rgba(255, 95, 87, .65)) drop-shadow(0 18px 34px rgba(0, 0, 0, .5)); animation: trustShieldPulse 1.1s ease-in-out infinite; } @keyframes trustShieldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .trust-shield-caption { position: relative; z-index: 2; margin-top: 18px; text-align: center; } .trust-shield-title { font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--green); transition: color .2s ease; } .trust-shield.is-alert ~ .trust-shield-caption .trust-shield-title { color: var(--red-2); } .trust-shield-sub { font-size: 13px; color: rgba(255, 255, 255, .62); margin-top: 8px; line-height: 1.5; max-width: 260px; } /* Page-level alert overlay -- appended to by js/behaviors/trust-safety-alert.js so `fixed` tracks the whole viewport no matter where in the page the shield sits. Styled here since it only ever exists alongside this section's interaction. */ .safety-alert-glow { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 0 rgba(255, 95, 87, 0); transition: opacity .35s ease, box-shadow .35s ease; } .safety-alert-glow.is-active { opacity: 1; box-shadow: inset 0 0 60px 10px rgba(255, 95, 87, .55), inset 0 0 140px 40px rgba(226, 59, 44, .3); animation: safetyAlertGlowPulse 1.6s ease-in-out infinite; } @keyframes safetyAlertGlowPulse { 0%, 100% { box-shadow: inset 0 0 60px 10px rgba(255, 95, 87, .55), inset 0 0 140px 40px rgba(226, 59, 44, .3); } 50% { box-shadow: inset 0 0 90px 20px rgba(255, 95, 87, .75), inset 0 0 180px 60px rgba(226, 59, 44, .42); } } @media (prefers-reduced-motion: reduce) { .trust-safety-ring { animation: none; } .trust-shield.is-alert .trust-shield-img { animation: none; } .safety-alert-glow.is-active { animation: none; } } @media (max-width: 900px) { .trust-safety { padding: 72px 20px; } .trust-safety-inner { gap: 40px; } } @media (max-width: 580px) { .trust-safety { padding: 56px 14px; } .ring-1 { width: 170px; height: 170px; } .ring-2 { width: 220px; height: 220px; } .trust-safety-card { width: 200px; padding: 22px 18px; } .trust-safety-stats { gap: 14px 20px; } }