/* ───────────────────────────────────────────────────────────────────── FedSift landing page — mobile-first, zero JS, single stylesheet. Performance contract: • LCP < 1.5s, CLS < 0.05 — no layout shift, hero text + CTA in first paint • 0 KB JS — smooth-scroll via CSS, FAQ via
, no framework runtime • All typography uses the system stack (no Google Fonts FOIT) • Critical CSS is small enough to inline in later if needed Hosting note: served as a static file from Nginx; gzip + cache headers should be set in the Nginx server block (see deploy/README.md). ───────────────────────────────────────────────────────────────────── */ /* ── Reset + base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } :root { /* Palette — soft tech blues, easy WCAG AA contrast on white */ --c-bg: #ffffff; --c-fg: #0b1220; --c-muted: #4b5563; --c-faint: #9ca3af; --c-line: #e5e7eb; --c-card: #f9fafb; --c-primary: #0d6efd; --c-primary-hover: #0b5ed7; --c-accent: #2ed8b6; /* Spacing scale (1rem = 16px) */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --radius: 10px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(13,18,32,0.08); --shadow-lg: 0 20px 60px rgba(13,18,32,0.12); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: clamp(15px, 1vw + 13px, 17px); line-height: 1.6; color: var(--c-fg); background: var(--c-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Honor user's motion preference (a11y + SEO best practice) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } img, picture, iframe { max-width: 100%; display: block; } a { color: var(--c-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Skip-link — visible only on keyboard focus */ .skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 8px 14px; background: var(--c-fg); color: #fff; border-radius: 6px; z-index: 999; } /* ── Layout ───────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); } /* ── Header ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(6px); border-bottom: 1px solid var(--c-line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); } .brand { font-size: 1.15rem; font-weight: 700; color: var(--c-fg); letter-spacing: -0.01em; } .site-header nav { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center; } .site-header nav a { color: var(--c-muted); font-size: .92rem; font-weight: 500; } .site-header nav a:hover { color: var(--c-fg); } .site-header nav a.nav-cta { color: var(--c-primary); font-weight: 600; } @media (max-width: 640px) { .site-header nav { gap: var(--sp-4); } .site-header nav a:not(.nav-cta) { display: none; } } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 12px 20px; border-radius: var(--radius); font-weight: 600; font-size: .98rem; text-decoration: none; min-height: 44px; /* WCAG / Apple HIG touch target */ cursor: pointer; border: 1px solid transparent; transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--c-primary-hover); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--c-fg); border-color: var(--c-line); } .btn-ghost:hover { background: var(--c-card); } .btn-block { display: flex; width: 100%; } .btn-lg { padding: 16px 28px; font-size: 1.05rem; } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { padding-block: clamp(var(--sp-12), 8vw, var(--sp-24)); background: radial-gradient(1200px 600px at 50% -200px, rgba(13,110,253,0.07), transparent 60%), linear-gradient(180deg, var(--c-bg) 0%, var(--c-card) 100%); } .hero-inner { text-align: center; } .hero h1 { font-size: clamp(2rem, 5vw + 1rem, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--sp-4); color: var(--c-fg); max-width: 22ch; margin-inline: auto; } .hero .lede { font-size: clamp(1.05rem, 1.2vw + .8rem, 1.25rem); color: var(--c-muted); max-width: 56ch; margin: 0 auto var(--sp-8); } .hero .cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-4); } .hero .hero-foot { color: var(--c-faint); font-size: .85rem; margin: var(--sp-6) 0 0; } /* ── Section base ─────────────────────────────────────────────────────── */ main section { padding-block: clamp(var(--sp-12), 7vw, var(--sp-16)); } main section h2 { font-size: clamp(1.6rem, 2.2vw + .8rem, 2.25rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--sp-8); text-align: center; } /* ── Features grid ────────────────────────────────────────────────────── */ .feature-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .feature { padding: var(--sp-6); background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); } .feature h3 { margin: 0 0 var(--sp-2); font-size: 1.15rem; letter-spacing: -0.01em; } .feature p { margin: 0; color: var(--c-muted); font-size: .95rem; line-height: 1.55; } /* Group eyebrow label above each Find / Decide / Run grid */ .feature-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: .8rem; font-weight: 700; color: var(--c-primary); margin: var(--sp-12) 0 var(--sp-4); } .features > .container > .feature-eyebrow:first-of-type { margin-top: var(--sp-8); } /* Signature card — subtle accent so Recompete Radar still leads the eye */ .feature-hero { position: relative; border-color: var(--c-primary); box-shadow: var(--shadow-md); background: linear-gradient(180deg, #fff 0%, var(--c-card) 100%); } .feature-tag { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: .68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-primary); background: rgba(13,110,253,0.10); padding: 2px var(--sp-2); border-radius: 999px; } /* ── See it in action (video + screenshot gallery) ────────────────────── */ .see-it { background: var(--c-card); } .see-it .how-lede { margin-top: -1rem; } /* Empty-state for the video slot before a Loom/YouTube embed is pasted */ .video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); color: #cbd5e1; background: radial-gradient(600px 300px at 50% 40%, rgba(13,110,253,0.18), transparent 70%), #0b1220; text-align: center; padding: var(--sp-6); } .video-placeholder .play { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); font-size: 1.4rem; color: #fff; padding-left: 4px; /* optically center the ▶ glyph */ } .video-placeholder-title { font-weight: 600; color: #e5e7eb; font-size: 1.05rem; } .video-placeholder small { color: var(--c-faint); font-size: .82rem; } /* Screenshot gallery */ .shot-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: var(--sp-12); } .shot { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; /* matches the 1280×800 capture guidance */ object-fit: cover; display: block; } .shot figcaption { padding: var(--sp-3) var(--sp-4); font-size: .88rem; color: var(--c-muted); border-top: 1px solid var(--c-line); } /* Empty-state shown until a real screenshot replaces the placeholder div */ .shot-placeholder { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--c-faint); background: repeating-linear-gradient( -45deg, var(--c-card), var(--c-card) 12px, #f1f3f5 12px, #f1f3f5 24px); } /* ── How it works (Loom embed) ────────────────────────────────────────── */ .how { background: var(--c-card); } .how-lede { text-align: center; color: var(--c-muted); max-width: 64ch; margin: -2rem auto var(--sp-8); } .video-wrap { position: relative; aspect-ratio: 16 / 9; /* prevents CLS — slot reserved before iframe loads */ max-width: 880px; margin-inline: auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Pricing ──────────────────────────────────────────────────────────── */ .pricing-lede { margin: -1rem auto var(--sp-8); max-width: 60ch; text-align: center; } .plan-card { position: relative; max-width: 460px; margin-inline: auto; padding: var(--sp-8); border: 1px solid var(--c-primary); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); text-align: center; } /* Beta ribbon across the top of the plan card */ .beta-banner { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(90deg, var(--c-primary), #5b9bff); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: 0.03em; padding: var(--sp-2); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .plan-card .plan-name { margin-top: var(--sp-8); } /* "$0 during beta" headline keeps using .plan-price/.amount/.period below */ .plan-price .period { font-weight: 600; } /* "At launch, choose a plan" future-price block */ .price-then { margin: var(--sp-2) 0 var(--sp-3); font-size: .82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-faint); font-weight: 600; } .price-options { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-6); } @media (max-width: 420px) { .price-options { grid-template-columns: 1fr; } } .price-opt { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-card); text-align: left; } .price-opt--best { border-color: var(--c-primary); background: linear-gradient(180deg, rgba(13,110,253,0.06), transparent); } .opt-head { display: flex; align-items: center; gap: var(--sp-2); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); } .opt-badge { font-size: .66rem; font-weight: 700; letter-spacing: 0.02em; color: #0a7d5a; background: rgba(46,216,182,0.18); padding: 1px var(--sp-2); border-radius: 999px; text-transform: none; } .opt-amount { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-fg); } .opt-per { font-size: .85rem; font-weight: 600; color: var(--c-muted); } .opt-sub { font-size: .78rem; color: var(--c-faint); } .plan-name { text-transform: uppercase; letter-spacing: 0.08em; font-size: .78rem; color: var(--c-primary); font-weight: 700; margin-bottom: var(--sp-3); } .plan-price { display: flex; justify-content: center; align-items: baseline; gap: var(--sp-1); margin-bottom: var(--sp-6); } .plan-price .amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; } .plan-price .period { color: var(--c-muted); font-size: 1rem; } .plan-features { list-style: none; padding: 0; margin: 0 0 var(--sp-8); text-align: left; } .plan-features li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); font-size: .95rem; color: var(--c-fg); position: relative; padding-left: var(--sp-6); } .plan-features li::before { content: "✓"; position: absolute; left: 0; top: var(--sp-2); color: var(--c-accent); font-weight: 800; } .plan-features li:last-child { border-bottom: none; } .plan-foot { margin: var(--sp-4) 0 0; color: var(--c-faint); font-size: .85rem; } /* ── FAQ (pure-CSS accordion via
) ───────────────────────────── */ .faq details { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: var(--sp-3); overflow: hidden; } .faq summary { padding: var(--sp-4) var(--sp-6); cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; position: relative; user-select: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: var(--sp-6); top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--c-muted); transition: transform .15s ease; } .faq details[open] summary::after { content: "−"; } .faq details p { padding: 0 var(--sp-6) var(--sp-6); margin: 0; color: var(--c-muted); line-height: 1.65; } /* ── Final CTA ────────────────────────────────────────────────────────── */ .cta-footer { text-align: center; background: radial-gradient(800px 400px at 50% 50%, rgba(13,110,253,0.08), transparent 60%); } .cta-footer h2 { letter-spacing: -0.02em; } .cta-footer p { color: var(--c-muted); max-width: 52ch; margin: 0 auto var(--sp-6); } /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--c-line); padding-block: var(--sp-8); font-size: .9rem; color: var(--c-muted); } .footer-inner { display: flex; gap: var(--sp-6); flex-wrap: wrap; justify-content: space-between; align-items: center; } .site-footer nav { display: flex; gap: var(--sp-6); flex-wrap: wrap; } .site-footer a { color: var(--c-muted); } .site-footer a:hover { color: var(--c-fg); } .muted { color: var(--c-faint); }