/** * why-sqfit.css * Styles exclusively for why-sqfit.html. * Loaded only on that page — zero impact on any other page. * * Overrides the basic .why-* rules from styles.css via cascade * (this file is linked after styles.css in the page ). */ /* ── Design tokens ─────────────────────────────────────────────────────── */ :root { --wsq-primary: #303a99; --wsq-accent: #FF7433; --wsq-dark: #0d1023; --wsq-muted: #6b7280; --wsq-surface: #f9fafb; --wsq-border: #e5e7eb; --wsq-radius: 16px; --wsq-shadow: 0 4px 24px rgba(0,0,0,.07); --wsq-shadow-h: 0 16px 40px rgba(0,0,0,.11); } /* ── Shared typography helpers ─────────────────────────────────────────── */ .wsq-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wsq-accent); margin-bottom: 10px; } .wsq-section-head { margin-bottom: 52px; } .wsq-section-title { font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; color: var(--wsq-dark); margin-bottom: 14px; line-height: 1.25; } .wsq-section-sub { max-width: 620px; margin: 0 auto; font-size: 15.5px; line-height: 1.7; color: var(--wsq-muted); } /* ── HERO ──────────────────────────────────────────────────────────────── */ .wsq-hero { position: relative; background: linear-gradient(135deg, #0d1023 0%, #1a2162 55%, #303a99 100%); padding: 100px 0 90px; overflow: hidden; } /* decorative dot grid */ .wsq-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } /* glowing orb */ .wsq-hero::after { content: ''; position: absolute; top: -80px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,116,51,.22) 0%, transparent 70%); pointer-events: none; } .wsq-hero .container { position: relative; z-index: 1; } .wsq-hero-content { max-width: 680px; } .wsq-hero .wsq-eyebrow { background: rgba(255,116,51,.15); border: 1px solid rgba(255,116,51,.35); padding: 4px 14px; border-radius: 30px; letter-spacing: .1em; } .wsq-hero-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; color: #fff; line-height: 1.15; margin: 16px 0 20px; letter-spacing: -.02em; } .wsq-hero-title .wsq-accent { color: var(--wsq-accent); } .wsq-hero-sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.72); margin-bottom: 0; max-width: 560px; } .wsq-hero-sub strong { color: rgba(255,255,255,.92); } /* center-aligned variant */ .wsq-hero--center .wsq-hero-content { max-width: 760px; margin: 0 auto; text-align: center; } .wsq-hero--center .wsq-hero-sub { margin-left: auto; margin-right: auto; } /* ── STATS BAR ─────────────────────────────────────────────────────────── */ .wsq-stats-bar { background: #fff; border-bottom: 1px solid var(--wsq-border); box-shadow: 0 4px 20px rgba(0,0,0,.06); position: relative; z-index: 2; } .wsq-stats-row { display: flex; align-items: center; justify-content: center; padding: 28px 0; flex-wrap: wrap; } .wsq-stat { display: flex; flex-direction: column; align-items: center; padding: 0 40px; gap: 4px; } .wsq-stat-num { font-size: 28px; font-weight: 800; color: var(--wsq-primary); line-height: 1; font-feature-settings: "tnum"; } .wsq-stat-label { font-size: 12px; font-weight: 500; color: var(--wsq-muted); text-transform: uppercase; letter-spacing: .08em; } .wsq-stat-divider { width: 1px; height: 40px; background: var(--wsq-border); flex-shrink: 0; } /* ── WHY FEATURES SECTION ──────────────────────────────────────────────── */ .why-sqfit { padding: 90px 0 80px; background: var(--wsq-surface); } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .why-card { position: relative; background: #fff; border-radius: var(--wsq-radius); padding: 36px 28px 30px; box-shadow: var(--wsq-shadow); border: 1px solid var(--wsq-border); border-top: 3px solid var(--wsq-accent); overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-top-color .28s ease; } .why-card:hover { transform: translateY(-6px); box-shadow: var(--wsq-shadow-h); border-top-color: var(--wsq-primary); } /* ghost step number */ .wsq-card-num { position: absolute; top: -10px; right: 20px; font-size: 68px; font-weight: 900; color: rgba(48,58,153,.05); line-height: 1; pointer-events: none; user-select: none; letter-spacing: -.04em; } /* icon tile */ .why-icon.wsq-icon-wrap { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,116,51,.12) 0%, rgba(255,116,51,.06) 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: unset; } .why-icon.wsq-icon-wrap svg { width: 24px; height: 24px; color: var(--wsq-accent); stroke: var(--wsq-accent); } .why-card:hover .why-icon.wsq-icon-wrap { background: linear-gradient(135deg, rgba(48,58,153,.14) 0%, rgba(48,58,153,.06) 100%); } .why-card:hover .why-icon.wsq-icon-wrap svg { color: var(--wsq-primary); stroke: var(--wsq-primary); } .why-card h4 { font-size: 16px; font-weight: 700; color: var(--wsq-dark); margin-bottom: 10px; } .why-card p { font-size: 14.5px; line-height: 1.65; color: var(--wsq-muted); margin: 0; } .why-card p strong { color: var(--wsq-dark); } /* ── HOW IT WORKS ──────────────────────────────────────────────────────── */ .wsq-how { padding: 80px 0 90px; background: #fff; } .wsq-steps { display: flex; align-items: flex-start; justify-content: center; margin-top: 12px; } .wsq-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; max-width: 260px; padding: 0 16px; } .wsq-step-num { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--wsq-primary) 0%, #4a56cc 100%); color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(48,58,153,.30); flex-shrink: 0; } .wsq-step-body h5 { font-size: 15.5px; font-weight: 700; color: var(--wsq-dark); margin-bottom: 8px; } .wsq-step-body p { font-size: 14px; color: var(--wsq-muted); line-height: 1.6; margin: 0; } .wsq-step-arrow { color: var(--wsq-border); padding-top: 16px; flex-shrink: 0; } /* ── RESPONSIVE ────────────────────────────────────────────────────────── */ @media (max-width: 992px) { .why-grid { grid-template-columns: repeat(2, 1fr); } .wsq-steps { flex-direction: column; align-items: center; gap: 24px; } .wsq-step-arrow { transform: rotate(90deg); padding: 0; } .wsq-step { max-width: 100%; padding: 0; } .wsq-stat { padding: 0 24px; } } @media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } .wsq-hero { padding: 72px 0 60px; } .wsq-stats-row { flex-wrap: wrap; gap: 20px; padding: 24px 0; } .wsq-stat-divider { display: none; } .wsq-stat { flex: 1 1 calc(50% - 20px); } }