/* * LeadProof — landing site stylesheet. * * One file for three pages: the landing page, the pricing page and the privacy * policy. They share a header, a footer and a token set, so splitting them would * mean keeping three copies of the same header in step by hand. * * The palette is the extension's own, not a second one invented for the web: * `--lp-indigo` is `--lp-accent` from `src/ui/tokens.css`, and the green, amber * and red are the verified / risky / invalid status colours the product already * uses to label a lead. A site whose subject is evidence should not describe a * "verified" badge in a different green from the one the badge is. * * Theme: `data-lp-theme` on is the resolved theme ("light" or "dark"). * `data-lp-theme-choice` records what the user picked, which may be "auto". * script.js owns both; nothing here reads prefers-color-scheme directly, so the * toggle wins in every direction. */ :root { --lp-bg: #fbfbfe; --lp-surface: #ffffff; --lp-surface-soft: rgba(255, 255, 255, 0.78); --lp-text: #14161f; --lp-heading: #0d0f1a; --lp-muted: #565f77; --lp-soft: #eef0fd; --lp-border: rgba(30, 38, 92, 0.14); --lp-blue: #3a4fd8; --lp-blue-deep: #2a399f; --lp-sky: #5f79f2; --lp-navy: #101426; --lp-red: #d33a2f; --lp-orange: #e08a1e; --lp-green: #12996b; /* * A second green, for green *text*. The icon green is 3.62:1 on white — fine * for a check mark, which only has to clear 3:1 as a graphic, and a WCAG AA * failure the moment the same colour carries a word. Every place the palette * says "yes" in words uses this one instead. */ --lp-green-text: #0b6b47; --lp-link: #3143bd; --lp-link-hover: #2a399f; --lp-shadow: 0 24px 70px rgba(24, 30, 80, 0.13); --lp-shadow-soft: 0 16px 40px rgba(24, 30, 80, 0.09); --lp-radius: 16px; --lp-radius-sm: 10px; --lp-container: 1120px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } .lp-page { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 16% 4%, rgba(58, 79, 216, 0.08), transparent 24rem), radial-gradient(circle at 78% 6%, rgba(18, 153, 107, 0.07), transparent 24rem), linear-gradient(180deg, #fbfbfe 0%, #ffffff 34%, #fbfbfe 100%); color: var(--lp-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .lp-page[data-lp-theme='dark'] { --lp-bg: #0a0b14; --lp-surface: #141624; --lp-surface-soft: rgba(20, 22, 36, 0.78); --lp-text: #e8eaf4; --lp-heading: #f4f5fb; --lp-muted: #9aa1bd; --lp-soft: #1b1e33; --lp-border: rgba(160, 168, 214, 0.18); --lp-blue: #8b9bf5; --lp-blue-deep: #a7b3f8; --lp-green-text: #58d3a6; --lp-link: #9aa9f8; --lp-link-hover: #bcc5fb; --lp-shadow: 0 24px 70px rgba(0, 0, 0, 0.34); --lp-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.24); background: radial-gradient(circle at 16% 4%, rgba(90, 108, 240, 0.2), transparent 24rem), radial-gradient(circle at 78% 6%, rgba(18, 153, 107, 0.12), transparent 24rem), linear-gradient(180deg, #0a0b14 0%, #101227 42%, #0a0b14 100%); } .lp-page a { color: inherit; text-decoration: none; } .lp-page img, .lp-page svg { display: block; } .lp-page :focus-visible { outline: 3px solid var(--lp-blue); outline-offset: 3px; border-radius: 6px; } .lp-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .lp-container { width: min(calc(100% - 48px), var(--lp-container)); margin-inline: auto; } /* Reachable by keyboard, invisible until it has focus. */ .lp-skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 20px; border-radius: 10px; color: #ffffff; background: var(--lp-blue); font-weight: 800; transition: top 0.2s ease; } .lp-skip:focus { top: 16px; } /* Present to a screen reader, absent from the page. Used for a table caption that names the table for assistive tech without repeating the heading above it. */ .lp-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ header */ .lp-header { position: sticky; top: 0; z-index: 30; width: 100%; min-height: 78px; background: rgba(251, 251, 254, 0.82); backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgba(30, 38, 92, 0.08); } .lp-page[data-lp-theme='dark'] .lp-header { background: rgba(10, 11, 20, 0.8); box-shadow: 0 1px 0 rgba(160, 168, 214, 0.12); } .lp-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 22px; } .lp-brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; } .lp-brand img { width: 38px; height: 38px; border-radius: 9px; } .lp-brand-name { display: flex; flex-direction: column; line-height: 1.15; } .lp-brand-name strong { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: var(--lp-heading); } .lp-brand-name small { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lp-muted); } .lp-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 800; color: var(--lp-heading); } /* * Padded to a ~41px touch target rather than left at the 21px the text occupies. * The nav survives down to 900px and an iPad Pro in portrait is 1024, so this row * is touched about as often as it is clicked. The underline moves with it: at * `bottom: 1px` inside the padded box it sits the same 9px under the text that * `bottom: -9px` gave when the box was the text. */ .lp-nav a { position: relative; padding: 10px 0; transition: color 0.2s ease, transform 0.2s ease; } .lp-nav a:hover, .lp-nav a.is-active { color: var(--lp-blue); transform: translateY(-1px); } .lp-nav a::after { position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 999px; background: var(--lp-blue); opacity: 0; transform: scaleX(0.35); transition: opacity 0.2s ease, transform 0.2s ease; content: ''; } .lp-nav a.is-active::after { opacity: 1; transform: scaleX(1); } .lp-header-actions { display: flex; align-items: center; gap: 12px; } .lp-icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 999px; color: var(--lp-blue); background: transparent; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .lp-icon-button:hover { transform: translateY(-1px); background: var(--lp-soft); } .lp-icon-button svg { width: 22px; height: 22px; } /* * The hamburger only exists below the nav's breakpoint. Hiding it with a media * query rather than JS means it is never briefly visible on a wide screen. */ .lp-menu-toggle { display: none; } .lp-mobile-nav { display: none; } /* ------------------------------------------------------------------ buttons */ .lp-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 9px; font-weight: 800; font-size: 15px; line-height: 1; text-align: center; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .lp-button svg { width: 21px; height: 21px; flex: 0 0 auto; } .lp-page .lp-button-primary { color: #ffffff; background: linear-gradient(135deg, var(--lp-blue-deep), var(--lp-sky)); box-shadow: 0 16px 30px rgba(58, 79, 216, 0.26); } .lp-page .lp-button-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 38px rgba(58, 79, 216, 0.32); } .lp-page[data-lp-theme='dark'] .lp-button-primary { color: #0d0f1a; background: linear-gradient(135deg, #8b9bf5, #b3bdfa); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4); } .lp-button-secondary, .lp-button-outline { color: var(--lp-blue); background: rgba(255, 255, 255, 0.72); border-color: rgba(58, 79, 216, 0.4); } .lp-button-secondary:hover, .lp-button-outline:hover { transform: translateY(-2px); border-color: rgba(58, 79, 216, 0.7); box-shadow: var(--lp-shadow-soft); } .lp-page[data-lp-theme='dark'] .lp-button-secondary, .lp-page[data-lp-theme='dark'] .lp-button-outline { color: #e9f1ff; background: rgba(20, 22, 36, 0.8); border-color: rgba(139, 155, 245, 0.5); } .lp-header-cta { min-height: 44px; padding-inline: 18px; } /* --------------------------------------------------------------------- hero */ .lp-hero { position: relative; padding: 68px 0 84px; } .lp-hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 22%, rgba(58, 79, 216, 0.1), transparent 20rem), radial-gradient(circle at 82% 18%, rgba(211, 58, 47, 0.07), transparent 18rem); } .lp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; } .lp-hero-copy { min-width: 0; } .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border: 1px solid rgba(58, 79, 216, 0.24); border-radius: 999px; background: rgba(58, 79, 216, 0.08); color: var(--lp-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .lp-eyebrow svg { width: 15px; height: 15px; } .lp-hero h1 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 56px); font-weight: 900; line-height: 1.06; letter-spacing: -0.03em; color: var(--lp-heading); } .lp-hero h1 span { background: linear-gradient(112deg, var(--lp-blue) 8%, var(--lp-green) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-hero-text { max-width: 560px; margin: 0 0 30px; font-size: 17px; line-height: 1.65; color: var(--lp-muted); } .lp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .lp-trust-list { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--lp-muted); } .lp-trust-list li { display: inline-flex; align-items: center; gap: 8px; } .lp-trust-list svg { width: 18px; height: 18px; color: var(--lp-green); } .lp-shot { position: relative; margin: 0; padding: 10px; border: 1px solid var(--lp-border); border-radius: 20px; background: var(--lp-surface); box-shadow: var(--lp-shadow); animation: lp-float 9s ease-in-out infinite; } .lp-shot img { width: 100%; height: auto; border-radius: 12px; } .lp-shot figcaption { padding: 12px 8px 4px; font-size: 13px; font-weight: 600; text-align: center; color: var(--lp-muted); } @keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ----------------------------------------------------------------- sections */ .lp-section { padding: 78px 0; } .lp-section-tight { padding: 58px 0; } .lp-section-heading { max-width: 720px; margin: 0 auto 46px; text-align: center; } .lp-section-heading h1, .lp-section-heading h2 { margin: 0 0 14px; font-size: clamp(27px, 3.4vw, 38px); font-weight: 900; line-height: 1.15; letter-spacing: -0.025em; color: var(--lp-heading); } .lp-section-heading > p:not(.lp-section-kicker):not(.lp-eyebrow) { margin: 0; font-size: 16px; line-height: 1.7; color: var(--lp-muted); } /* The pricing page leads with this block, so its heading is the page h1. */ .lp-heading-display h1, .lp-heading-display h2 { font-size: clamp(34px, 4.6vw, 48px); } .lp-section-kicker { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: rgba(58, 79, 216, 0.09); color: var(--lp-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* ----------------------------------------------------------------- features */ .lp-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .lp-card { padding: 26px 24px; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .lp-card:hover { transform: translateY(-4px); border-color: rgba(58, 79, 216, 0.3); box-shadow: var(--lp-shadow); } .lp-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--lp-heading); } .lp-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--lp-muted); } .lp-card-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 13px; background: rgba(58, 79, 216, 0.1); color: var(--lp-blue); } .lp-card-icon svg { width: 24px; height: 24px; } .lp-icon-red { background: rgba(211, 58, 47, 0.1); color: var(--lp-red); } .lp-icon-orange { background: rgba(224, 138, 30, 0.13); color: #d0620f; } .lp-icon-green { background: rgba(18, 153, 107, 0.12); color: var(--lp-green); } .lp-page[data-lp-theme='dark'] .lp-icon-orange { color: var(--lp-orange); } /* -------------------------------------------------------------- how it works */ .lp-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } /* The connecting rule sits behind the cards and stops short of both ends. */ .lp-steps::before { position: absolute; top: 46px; left: 16%; right: 16%; height: 2px; background: linear-gradient( 90deg, rgba(58, 79, 216, 0.05), rgba(58, 79, 216, 0.32), rgba(58, 79, 216, 0.05) ); content: ''; } .lp-step { position: relative; padding: 26px 24px; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); text-align: center; } .lp-step-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 15px; background: linear-gradient(135deg, var(--lp-blue-deep), var(--lp-sky)); color: #ffffff; } .lp-step-icon svg { width: 26px; height: 26px; } .lp-step-number { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-blue); } .lp-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--lp-heading); } .lp-step p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--lp-muted); } /* --------------------------------------------------------------- gallery */ .lp-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .lp-gallery-item { margin: 0; padding: 10px 10px 0; border: 1px solid var(--lp-border); border-radius: 18px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .lp-gallery-item:hover { transform: translateY(-4px); border-color: rgba(58, 79, 216, 0.3); box-shadow: var(--lp-shadow); } .lp-gallery-item img { width: 100%; height: auto; border: 1px solid var(--lp-border); border-radius: 11px; } .lp-gallery-item figcaption { padding: 16px 12px 18px; font-size: 14px; line-height: 1.6; color: var(--lp-muted); } .lp-gallery-item figcaption strong { display: block; margin-bottom: 3px; font-size: 15px; font-weight: 800; color: var(--lp-heading); } /* ------------------------------------------------------------------ privacy */ .lp-proof { padding: 40px; border: 1px solid var(--lp-border); border-radius: 22px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); } .lp-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .lp-proof-item { padding: 22px; border: 1px dashed rgba(58, 79, 216, 0.3); border-radius: var(--lp-radius-sm); background: rgba(58, 79, 216, 0.045); } .lp-page[data-lp-theme='dark'] .lp-proof-item { background: rgba(139, 155, 245, 0.07); } .lp-proof-item h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: var(--lp-heading); } .lp-proof-item h3 svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--lp-blue); } .lp-proof-item p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--lp-muted); } .lp-proof-note { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--lp-border); font-size: 14.5px; line-height: 1.7; color: var(--lp-muted); } /* ---------------------------------------------------------------------- pro */ .lp-pro-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 44px; align-items: center; padding: 40px; border: 1px solid var(--lp-border); border-radius: 24px; background: linear-gradient(135deg, rgba(58, 79, 216, 0.07), rgba(18, 153, 107, 0.05)); box-shadow: var(--lp-shadow-soft); } .lp-page[data-lp-theme='dark'] .lp-pro-showcase { background: linear-gradient(135deg, rgba(139, 155, 245, 0.1), rgba(18, 153, 107, 0.06)); } /* * An inline-block pill in the stylesheet this began as, which had no icon in it. * This one does, and an unsized in an inline-block box expands to fill the * width it is given — the pill became a blue oval the height of the column with * the label crushed into its base. Flex plus an explicit icon size, matching how * `.lp-eyebrow` already carries its own. */ .lp-pro-kicker { display: inline-flex; gap: 7px; align-items: center; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: var(--lp-blue); color: #ffffff; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .lp-pro-kicker svg { flex: none; width: 14px; height: 14px; } .lp-page[data-lp-theme='dark'] .lp-pro-kicker { color: #0d0f1a; } .lp-pro-copy h3 { margin: 0 0 14px; font-size: clamp(23px, 2.8vw, 30px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; color: var(--lp-heading); } .lp-pro-copy > p:not(.lp-pro-kicker) { margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--lp-muted); } .lp-pro-list { display: grid; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; } .lp-pro-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.6; color: var(--lp-muted); } .lp-pro-list svg { width: 20px; height: 20px; margin-top: 1px; color: var(--lp-green); } .lp-pro-list strong { display: block; color: var(--lp-heading); font-weight: 800; } .lp-pro-panel { padding: 20px; border: 1px solid var(--lp-border); border-radius: 18px; background: var(--lp-surface); box-shadow: var(--lp-shadow); } .lp-pro-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--lp-border); } .lp-pro-panel-header span { font-size: 14px; font-weight: 800; color: var(--lp-heading); } .lp-pro-panel-header strong { padding: 4px 10px; border-radius: 999px; background: var(--lp-blue); color: #ffffff; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .lp-page[data-lp-theme='dark'] .lp-pro-panel-header strong { color: #0d0f1a; } .lp-pro-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--lp-border); } .lp-pro-row:last-child { border-bottom: 0; padding-bottom: 2px; } .lp-pro-row strong { display: block; font-size: 14px; font-weight: 800; color: var(--lp-heading); } .lp-pro-row small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--lp-muted); } .lp-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--lp-soft); font-size: 11.5px; font-weight: 800; } .lp-seg span { padding: 5px 9px; border-radius: 6px; color: var(--lp-muted); white-space: nowrap; } .lp-seg span.is-on { background: var(--lp-surface); color: var(--lp-blue); box-shadow: 0 1px 3px rgba(24, 30, 80, 0.14); } .lp-toggle { display: inline-grid; place-items: center end; width: 42px; height: 24px; padding: 3px; border-radius: 999px; background: rgba(18, 153, 107, 0.9); font-size: 0; } .lp-toggle::after { width: 18px; height: 18px; border-radius: 999px; background: #ffffff; content: ''; } .lp-chip-input { padding: 6px 11px; border: 1px solid var(--lp-border); border-radius: 8px; background: var(--lp-soft); color: var(--lp-heading); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; } /* ------------------------------------------------------------------ pricing */ .lp-price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .lp-price-card { position: relative; display: flex; flex-direction: column; padding: 30px 24px; border: 1px solid var(--lp-border); border-radius: 20px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .lp-price-card:hover { transform: translateY(-4px); border-color: rgba(58, 79, 216, 0.32); box-shadow: var(--lp-shadow); } .lp-price-free .lp-plan-label { background: rgba(18, 153, 107, 0.13); color: #0f7a54; } .lp-page[data-lp-theme='dark'] .lp-price-free .lp-plan-label { background: rgba(18, 153, 107, 0.22); color: #5fdcac; } .lp-price-free { background: linear-gradient(180deg, rgba(58, 79, 216, 0.05), transparent 60%), var(--lp-surface); } .lp-price-featured { border-color: rgba(58, 79, 216, 0.55); box-shadow: 0 26px 60px rgba(58, 79, 216, 0.2); transform: translateY(-8px); } .lp-price-featured:hover { transform: translateY(-12px); } .lp-price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--lp-blue-deep), var(--lp-sky)); color: #ffffff; font-size: 11px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px rgba(58, 79, 216, 0.3); } .lp-plan-label { display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(58, 79, 216, 0.1); color: var(--lp-blue); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .lp-price-card h3 { margin: 0 0 8px; font-size: 21px; font-weight: 900; letter-spacing: -0.02em; color: var(--lp-heading); } .lp-price-card-top p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--lp-muted); min-height: 44px; } /* * The price block, stacked: struck price, amount, discount pill, billing note — * each on its own line, the way the reference cards read. * * `min-height` rather than four cards each finding their own height. Only the * yearly cycle carries a real discount, so only it has a struck price and a * pill; without a reserved floor the other three cards would start their feature * list 50px higher and the row would look broken rather than honest. */ .lp-price-block { min-height: 158px; margin-bottom: 22px; padding-top: 22px; border-top: 1px solid var(--lp-border); } .lp-price-was { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--lp-muted); text-decoration: line-through; } .lp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; } .lp-price strong { font-size: 46px; font-weight: 900; letter-spacing: -0.035em; line-height: 1; color: var(--lp-blue); } /* Free is not a price to sell, so it is not painted in the selling colour. */ .lp-price-free .lp-price strong { color: var(--lp-heading); } .lp-price > span { font-size: 18px; font-weight: 800; color: var(--lp-heading); } .lp-discount-badge { display: inline-block; margin: 0 0 10px; padding: 6px 13px; border-radius: 8px; background: rgba(18, 153, 107, 0.13); color: #0f7a54; font-size: 12.5px; font-weight: 900; letter-spacing: 0.05em; } .lp-page[data-lp-theme='dark'] .lp-discount-badge { background: rgba(18, 153, 107, 0.22); color: #5fdcac; } .lp-price-sub { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--lp-muted); } .lp-price-card ul { display: grid; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; flex: 1 1 auto; } .lp-price-card li { display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.55; color: var(--lp-text); } .lp-price-card li svg { width: 19px; height: 19px; margin-top: 1px; color: var(--lp-blue); } .lp-price-card .lp-button { width: 100%; } /* * The payment footnote under the plan cards. * * This was a full-width centred flex row, which put the lock icon hard against * the left edge of the section and the text centred in the ~1000px of space left * over — the two read as unrelated things rather than one note. Constraining the * whole note and left-aligning it puts the icon back beside the sentence it * belongs to, and the surface makes it a deliberate footnote instead of loose * text under a card row. */ .lp-secure-note { display: flex; align-items: flex-start; gap: 12px; max-width: 700px; margin: 34px auto 0; padding: 16px 20px; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm); background: var(--lp-surface); font-size: 13.5px; font-weight: 600; line-height: 1.65; color: var(--lp-muted); text-align: left; } .lp-secure-note a { color: var(--lp-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .lp-secure-note a:hover { color: var(--lp-link-hover); } .lp-secure-note a { color: var(--lp-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .lp-secure-note a:hover { color: var(--lp-link-hover); } /* `margin-top` nudges the lock onto the optical centre of the first line. */ .lp-secure-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--lp-green); } /* ---------------------------------------------------------- comparison table */ /* * A horizontally scrolling table is invisible as an affordance: the right-hand * column is simply absent, and nothing on screen says it is reachable. The hint * appears only below the width at which the table actually overflows. */ .lp-table-hint { display: none; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--lp-muted); } .lp-table-hint svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--lp-blue); } .lp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lp-border); border-radius: 18px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); } .lp-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; } .lp-table th, .lp-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--lp-border); vertical-align: top; } .lp-table thead th { position: sticky; top: 0; background: var(--lp-soft); color: var(--lp-heading); font-size: 13px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .lp-table tbody th { font-weight: 800; color: var(--lp-heading); width: 34%; } .lp-table td { color: var(--lp-muted); } .lp-table tbody tr:last-child th, .lp-table tbody tr:last-child td { border-bottom: 0; } .lp-table tbody tr:hover th, .lp-table tbody tr:hover td { background: rgba(58, 79, 216, 0.04); } .lp-page[data-lp-theme='dark'] .lp-table tbody tr:hover th, .lp-page[data-lp-theme='dark'] .lp-table tbody tr:hover td { background: rgba(139, 155, 245, 0.06); } .lp-yes, .lp-no { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; } .lp-yes { color: var(--lp-green-text); } .lp-no { color: var(--lp-muted); } .lp-yes svg, .lp-no svg { width: 17px; height: 17px; flex: 0 0 auto; } /* -------------------------------------------------------------- callout card */ .lp-callout { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px 34px; border: 1px solid var(--lp-border); border-radius: 20px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); } /* A callout that follows a grid of cards rather than opening a section. */ .lp-callout-after { margin-top: 28px; } .lp-callout-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 17px; background: rgba(58, 79, 216, 0.1); color: var(--lp-blue); } .lp-callout-icon svg { width: 30px; height: 30px; } .lp-callout h2 { margin: 0 0 8px; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--lp-heading); } .lp-callout p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--lp-muted); } .lp-callout a:not(.lp-button) { color: var(--lp-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .lp-callout a:not(.lp-button):hover { color: var(--lp-link-hover); } /* --------------------------------------------------------------- limits list */ .lp-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .lp-limits li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; align-items: start; padding: 19px 22px; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm); background: var(--lp-surface); font-size: 14.5px; line-height: 1.6; color: var(--lp-muted); } .lp-limits svg { width: 20px; height: 20px; margin-top: 1px; color: var(--lp-orange); } .lp-limits strong { display: block; margin-bottom: 3px; color: var(--lp-heading); font-weight: 800; } /* ----------------------------------------------------------------------- faq */ .lp-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .lp-faq-item { padding: 4px 22px; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); } .lp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 0; font-size: 15.5px; font-weight: 800; color: var(--lp-heading); cursor: pointer; list-style: none; } .lp-faq-item summary::-webkit-details-marker { display: none; } .lp-faq-item summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lp-blue); transition: transform 0.25s ease; } .lp-faq-item[open] summary svg { transform: rotate(180deg); } .lp-faq-item p { margin: 0 0 19px; font-size: 14.5px; line-height: 1.72; color: var(--lp-muted); } .lp-faq-item p a, .lp-prose a { color: var(--lp-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .lp-faq-item p a:hover, .lp-prose a:hover { color: var(--lp-link-hover); } .lp-faq-item code, .lp-prose code { padding: 2px 7px; border: 1px solid var(--lp-border); border-radius: 6px; background: var(--lp-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; } /* -------------------------------------------------------- policy / long-form */ .lp-doc-main { padding: 46px 0 78px; } .lp-doc-hero { position: relative; padding: 40px; margin-bottom: 34px; border: 1px solid var(--lp-border); border-radius: 24px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); overflow: hidden; } .lp-doc-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, rgba(58, 79, 216, 0.1), transparent 16rem), radial-gradient(circle at 6% 88%, rgba(224, 138, 30, 0.09), transparent 14rem); pointer-events: none; content: ''; } .lp-doc-hero > * { position: relative; } .lp-doc-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; } .lp-doc-eyebrow img { width: 34px; height: 34px; border-radius: 9px; } .lp-doc-eyebrow span { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-blue); } .lp-doc-hero h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 42px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--lp-heading); } .lp-doc-hero > p:not(.lp-doc-eyebrow) { max-width: 640px; margin: 0 0 22px; font-size: 16px; line-height: 1.7; color: var(--lp-muted); } .lp-pill-row { display: flex; flex-wrap: wrap; gap: 10px; } .lp-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--lp-border); border-radius: 999px; background: var(--lp-soft); color: var(--lp-heading); font-size: 12.5px; font-weight: 700; } .lp-pill svg { width: 15px; height: 15px; color: var(--lp-green); } .lp-doc-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; } .lp-doc-aside { position: sticky; top: 100px; padding: 26px 24px; border: 1px solid var(--lp-border); border-radius: 18px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); } .lp-doc-aside h2 { margin: 0 0 12px; font-size: 15px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lp-heading); } .lp-doc-aside p { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--lp-muted); } .lp-doc-toc { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; } .lp-doc-toc a { display: block; padding: 8px 11px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--lp-muted); transition: background 0.2s ease, color 0.2s ease; } .lp-doc-toc a:hover, .lp-doc-toc a.is-active { background: rgba(58, 79, 216, 0.09); color: var(--lp-blue); } .lp-doc-stack { display: grid; gap: 20px; min-width: 0; } .lp-prose { padding: 30px 32px; border: 1px solid var(--lp-border); border-radius: 18px; background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); scroll-margin-top: 100px; } .lp-prose h2 { margin: 0 0 14px; font-size: 21px; font-weight: 900; letter-spacing: -0.02em; color: var(--lp-heading); } .lp-prose h3 { margin: 24px 0 10px; font-size: 16px; font-weight: 800; color: var(--lp-heading); } .lp-prose p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--lp-muted); } .lp-prose p:last-child, .lp-prose ul:last-child { margin-bottom: 0; } .lp-prose ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 9px; } .lp-prose li { font-size: 15px; line-height: 1.7; color: var(--lp-muted); } .lp-prose strong { color: var(--lp-heading); } .lp-prose-accent { border-left: 4px solid var(--lp-blue); } /* ------------------------------------------------------------------- footer */ .lp-footer { position: relative; margin-top: 40px; padding: 56px 0 26px; border-top: 1px solid var(--lp-border); background: rgba(255, 255, 255, 0.6); } .lp-page[data-lp-theme='dark'] .lp-footer { background: rgba(10, 11, 20, 0.6); } .lp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } .lp-footer-brand p { max-width: 300px; margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--lp-muted); } .lp-footer h2 { margin: 0 0 8px; font-size: 13px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-heading); } /* * `gap: 0` with padding on the links rather than a gap between them. At 14px a * footer link is 21px tall, and a 21px target with a 10px gap is a miss waiting * to happen on any touch screen — which above 900px includes every iPad. The * padding makes each row ~39px and clickable across its whole width; the * on-screen rhythm barely changes. */ .lp-footer-links { display: grid; gap: 0; align-content: start; } .lp-footer-links a { padding: 9px 0; } .lp-footer a { font-size: 14px; font-weight: 600; color: var(--lp-muted); transition: color 0.2s ease; } .lp-footer a:hover { color: var(--lp-blue); } .lp-footer-install a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--lp-border); border-radius: 12px; background: var(--lp-surface); font-size: 13.5px; font-weight: 700; color: var(--lp-heading); } .lp-footer-install a:hover { border-color: rgba(58, 79, 216, 0.4); color: var(--lp-heading); } .lp-footer-install svg { width: 28px; height: 28px; flex: 0 0 auto; } /* * Two flex children rather than one sentence with a `·` in it. Written inline, * the separator strands at the end of whichever line the wrap lands on; as a gap * it simply becomes a line break when there is no room beside it. */ .lp-copyright { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--lp-border); font-size: 13px; text-align: center; color: var(--lp-muted); } .lp-copyright a { color: var(--lp-muted); text-decoration: underline; text-underline-offset: 3px; } /* * The contact address is a direct child of the flex row, not a link inside a * sentence, so WCAG 2.5.5's inline exception does not cover it and its 21px * text height is the whole target. Padded to ~37px. */ .lp-copyright > a { padding: 8px 0; } .lp-scroll-top { position: fixed; right: 22px; bottom: 22px; z-index: 25; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; color: #ffffff; background: linear-gradient(135deg, var(--lp-blue-deep), var(--lp-sky)); box-shadow: 0 14px 30px rgba(58, 79, 216, 0.32); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } .lp-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .lp-scroll-top svg { width: 21px; height: 21px; } /* ------------------------------------------------------------- reveal on scroll */ [data-lp-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-lp-reveal].is-visible { opacity: 1; transform: none; } /* --------------------------------------------------------------- responsive */ @media (max-width: 1080px) { .lp-nav { gap: 24px; } .lp-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-price-featured, .lp-price-featured:hover { transform: none; } .lp-pro-showcase { grid-template-columns: 1fr; } .lp-doc-grid { grid-template-columns: 1fr; } .lp-doc-aside { position: static; } } @media (max-width: 900px) { .lp-nav { display: none; } .lp-menu-toggle { display: inline-grid; } /* * Opened by script.js flipping [hidden]. It is a plain block in the flow under * the header rather than an overlay, so the page behind it never has to be * scroll-locked and nothing can end up trapped underneath it. */ .lp-mobile-nav { display: block; border-top: 1px solid var(--lp-border); background: var(--lp-surface); box-shadow: var(--lp-shadow-soft); } .lp-mobile-nav[hidden] { display: none; } .lp-mobile-nav ul { display: grid; gap: 4px; margin: 0; padding: 14px 0 20px; list-style: none; } .lp-mobile-nav a { display: block; padding: 13px 14px; border-radius: 10px; font-size: 15px; font-weight: 800; color: var(--lp-heading); } .lp-mobile-nav a:hover { background: var(--lp-soft); color: var(--lp-blue); } .lp-mobile-nav .lp-button { width: 100%; margin-top: 8px; } .lp-header-cta { display: none; } .lp-hero { padding-top: 34px; } .lp-hero-grid { grid-template-columns: 1fr; gap: 44px; } .lp-hero-copy { max-width: 680px; margin-inline: auto; text-align: center; } .lp-hero-text { margin-inline: auto; } .lp-actions, .lp-trust-list { justify-content: center; } /* * Six cards drop to two columns here. The three-card rows do NOT: two columns * of three leaves one card alone in half a row, and spanning it full-width * makes the last step look like the important one. They stay three-across * until there is genuinely no room, at 720px, and then go straight to one. */ .lp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-callout { grid-template-columns: 1fr; text-align: left; } .lp-callout .lp-button { width: 100%; max-width: 340px; } .lp-proof, .lp-pro-showcase, .lp-doc-hero { padding: 28px 24px; } .lp-shot { animation: none; } } /* * The point at which three cards across genuinely stop fitting. Everything that * was still multi-column above this goes to one, in one place, so the ladder is * readable rather than scattered through three blocks. */ @media (max-width: 720px) { .lp-steps, .lp-proof-grid, .lp-faq-grid { grid-template-columns: 1fr; } .lp-steps::before { display: none; } } @media (max-width: 620px) { /* Uppercase labels at 11px read fine on a monitor and small in the hand. */ .lp-plan-label, .lp-price-badge, .lp-pro-kicker, .lp-pro-panel-header strong { font-size: 12px; } .lp-eyebrow, .lp-section-kicker { font-size: 12.5px; } .lp-table-hint { display: flex; } .lp-container { width: min(calc(100% - 32px), var(--lp-container)); } .lp-section { padding: 56px 0; } .lp-brand-name small { display: none; } .lp-feature-grid, .lp-price-grid, .lp-gallery, .lp-limits, .lp-footer-grid { grid-template-columns: 1fr; } .lp-price-card-top p { min-height: 0; } .lp-actions .lp-button { width: 100%; } .lp-prose { padding: 24px 20px; } .lp-secure-note { padding: 14px 16px; } .lp-doc-main { padding-top: 30px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } [data-lp-reveal] { opacity: 1; transform: none; } } @media print { .lp-header, .lp-footer, .lp-scroll-top, .lp-doc-aside { display: none; } .lp-doc-grid { grid-template-columns: 1fr; } .lp-prose, .lp-doc-hero { border: 0; box-shadow: none; padding-inline: 0; } } /* ========================================================================== Alternating section tone PDFCraft's stylesheet, which this one began as, had one section background. LeadProof's landing page is longer and its sections are more alike in shape, so without a tonal alternation the page reads as one undifferentiated column of cards. The tint is deliberately very light — it separates, it does not decorate. ========================================================================== */ .lp-section-alt { background: var(--lp-soft); border-block: 1px solid var(--lp-border); } .lp-page[data-lp-theme='dark'] .lp-section-alt { background: rgba(139, 155, 245, 0.05); } /* ========================================================================== The hero pipeline The graph in the hero is the extension's real `ScanStage` union, in the order the type declares it — eight stages, read from `src/types/domain.ts`, with the on-screen wording taken from `STAGE_LABEL` in `src/popup/ScanProgress.tsx`. The fan out at "Reading pages" and the join at "Building evidence" are the real shape of the pipeline: people and addresses are extracted independently from the pages that were read, and it is the evidence stage that decides whether a given person and a given address belong together. It exists because a still screenshot cannot show a sequence, and the sequence is the product. It is not a progress bar: the same rule the extension holds itself to — never show a percentage you cannot compute — applies here, so the animation advances stage by stage and shows no completion figure at all. Two presentations of one state. The SVG graph is the desktop view; below 760px it is replaced by a vertical list of the same eight stages, because an SVG that keeps its aspect ratio at phone width renders its labels at six pixels. Both read `data-lp-state` written onto each node by `script.js`, so there is one driver and no second copy of the logic. ========================================================================== */ .lp-pipeline { margin: 0; padding: 18px 18px 14px; background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); } .lp-pipeline__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--lp-border); } .lp-pipeline__title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-muted); } .lp-pipeline__live { display: inline-flex; gap: 8px; align-items: center; padding: 4px 11px 4px 9px; font-size: 0.78rem; font-weight: 600; color: var(--lp-blue); background: rgba(58, 79, 216, 0.08); border: 1px solid rgba(58, 79, 216, 0.2); border-radius: 999px; font-variant-numeric: tabular-nums; } .lp-pipeline__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-blue); } /* * The only thing on the page that pulses. It marks the stage currently running, * which is the one fact the animation exists to carry; anything else that moved * would compete with it. */ @media (prefers-reduced-motion: no-preference) { .lp-pipeline__dot { animation: lp-pulse 1.8s ease-in-out infinite; } } @keyframes lp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.72); } } .lp-pipeline__canvas { display: block; width: 100%; height: auto; margin-top: 6px; } /* --- the graph's own parts ------------------------------------------------ */ .lp-pipeline__phase { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; fill: var(--lp-muted); text-transform: uppercase; } .lp-pipeline__edge { fill: none; stroke: var(--lp-border); stroke-width: 2; } /* * An edge is "live" once the stage it leads into has been reached. Drawing it in * the accent colour rather than animating a travelling dot along it keeps the * whole figure legible in a screenshot, which is where most people will meet it. */ .lp-pipeline__edge[data-lp-state='done'] { stroke: var(--lp-blue); stroke-opacity: 0.55; } .lp-pipeline__ring { fill: var(--lp-surface); stroke: var(--lp-border); stroke-width: 2; transition: fill 420ms ease, stroke 420ms ease; } .lp-pipeline__num { font-size: 13px; font-weight: 700; fill: var(--lp-muted); text-anchor: middle; font-variant-numeric: tabular-nums; transition: fill 420ms ease; } .lp-pipeline__label { font-size: 12.5px; font-weight: 600; fill: var(--lp-muted); text-anchor: middle; transition: fill 420ms ease; } .lp-pipeline__node[data-lp-state='done'] .lp-pipeline__ring { fill: var(--lp-blue); stroke: var(--lp-blue); } .lp-pipeline__node[data-lp-state='done'] .lp-pipeline__num { fill: #ffffff; } .lp-pipeline__node[data-lp-state='done'] .lp-pipeline__label { fill: var(--lp-heading); } .lp-pipeline__node[data-lp-state='active'] .lp-pipeline__ring { fill: var(--lp-surface); stroke: var(--lp-green); stroke-width: 3; } .lp-pipeline__node[data-lp-state='active'] .lp-pipeline__num, .lp-pipeline__node[data-lp-state='active'] .lp-pipeline__label { fill: var(--lp-green-text); } /* --- the phone list ------------------------------------------------------- */ .lp-pipeline__list { display: none; margin: 14px 0 0; padding: 0; list-style: none; } .lp-pipeline__step { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 7px 0; color: var(--lp-muted); font-size: 0.92rem; font-weight: 600; } /* The rail between the markers, drawn on every step but the last. */ .lp-pipeline__step:not(:last-child)::before { content: ''; position: absolute; top: 28px; left: 12.5px; width: 2px; height: calc(100% - 22px); background: var(--lp-border); } .lp-pipeline__marker { display: grid; place-items: center; width: 27px; height: 27px; /* 0.68rem put these at 10.88px, which is under the 11px floor the rest of the site holds to. They are ordinals rather than prose, but they are still digits somebody may try to read on a phone. */ font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lp-muted); background: var(--lp-surface); border: 2px solid var(--lp-border); border-radius: 50%; transition: background 420ms ease, border-color 420ms ease, color 420ms ease; } .lp-pipeline__step[data-lp-state='done'] { color: var(--lp-heading); } .lp-pipeline__step[data-lp-state='done'] .lp-pipeline__marker { color: #ffffff; background: var(--lp-blue); border-color: var(--lp-blue); } .lp-pipeline__step[data-lp-state='active'] { color: var(--lp-green-text); } .lp-pipeline__step[data-lp-state='active'] .lp-pipeline__marker { color: var(--lp-green-text); border-color: var(--lp-green); } .lp-pipeline__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--lp-border); font-size: 0.78rem; color: var(--lp-muted); } .lp-pipeline__key { display: inline-flex; gap: 7px; align-items: center; } .lp-pipeline__swatch { width: 10px; height: 10px; border: 2px solid var(--lp-border); border-radius: 50%; } .lp-pipeline__swatch[data-lp-state='done'] { background: var(--lp-blue); border-color: var(--lp-blue); } .lp-pipeline__swatch[data-lp-state='active'] { border-color: var(--lp-green); } @media (max-width: 760px) { /* * `.lp-page svg { display: block }` near the top of this file is two classes * deep and beats a bare `.lp-pipeline__canvas` whatever the order, so both * presentations rendered at once on a phone. Matched here rather than loosened * there: that rule is doing a real job for every other icon on the site. */ .lp-page .lp-pipeline__canvas { display: none; } .lp-pipeline__list { display: block; } } /* ========================================================================== The evidence panel A reproduction of the extension's own "Why this lead?" drawer, in HTML rather than as a screenshot, so it stays legible at every width and in both themes — and so the arithmetic in it can be read by a screen reader as a table, which is what it is. The figures are one real lead from the seeded scan the store screenshots are captured from; `assets/2-evidence.png` is the same lead in the product. ========================================================================== */ .lp-evidence { overflow: hidden; background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); } .lp-evidence__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--lp-border); } .lp-evidence__who { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--lp-heading); } .lp-evidence__role { margin: 2px 0 0; font-size: 0.88rem; color: var(--lp-muted); } .lp-evidence__mail { margin: 8px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--lp-blue); word-break: break-all; } .lp-evidence__badge { display: inline-flex; gap: 6px; align-items: center; padding: 4px 11px; font-size: 0.78rem; font-weight: 700; color: var(--lp-green-text); background: rgba(18, 153, 107, 0.12); border: 1px solid rgba(18, 153, 107, 0.22); border-radius: 999px; } .lp-evidence__badge svg { width: 14px; height: 14px; } .lp-evidence__score { display: flex; gap: 14px; align-items: baseline; padding: 16px 20px; background: var(--lp-soft); border-bottom: 1px solid var(--lp-border); } .lp-evidence__score strong { font-size: 1.9rem; font-weight: 800; color: var(--lp-heading); font-variant-numeric: tabular-nums; line-height: 1; } .lp-evidence__score span { font-size: 0.88rem; font-weight: 600; color: var(--lp-muted); } .lp-evidence__table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .lp-evidence__table th, .lp-evidence__table td { padding: 9px 20px; text-align: left; border-bottom: 1px solid var(--lp-border); } .lp-evidence__table th { font-weight: 600; color: var(--lp-text); } .lp-evidence__table td { width: 1%; color: var(--lp-green-text); font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .lp-evidence__table tr:last-child th, .lp-evidence__table tr:last-child td { border-bottom: 0; } .lp-evidence__sum { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; padding: 13px 20px; background: var(--lp-soft); border-top: 1px solid var(--lp-border); font-size: 0.84rem; font-weight: 600; color: var(--lp-muted); } .lp-evidence__sum b { color: var(--lp-heading); font-variant-numeric: tabular-nums; } @media (max-width: 620px) { .lp-evidence__table th, .lp-evidence__table td { padding-inline: 14px; } .lp-evidence__head, .lp-evidence__score, .lp-evidence__sum { padding-inline: 14px; } } /* * A comparison-table value that is a quantity rather than a yes. * * The six rows where Free and Pro differ in degree used to carry the same green * tick as the yes/no rows, which put a tick of approval beside "7 days" and "20" * in the Free column — the weaker of the two numbers presented as though it had * passed something. The number says it on its own. */ .lp-figure { font-weight: 700; color: var(--lp-heading); font-variant-numeric: tabular-nums; } /* ========================================================================== Phones The breakpoints above this were inherited and they do the structural work — columns collapsing, the nav becoming a sheet. What they do not do is treat a phone as a phone: controls sized for a fingertip, vertical rhythm that is not a desktop's rhythm scaled down, and a hero that is legible in the first screenful rather than after a scroll. Everything here is additive and lives at the end of the file, so it wins on order without anything above needing to be edited. ========================================================================== */ @media (max-width: 900px) { /* * WCAG 2.5.5 asks for 44×44. The header's icon buttons were 38, which is a * miss you feel rather than measure — the theme toggle and the menu sit at the * top right corner where the thumb is least accurate. */ .lp-page .lp-icon-button { width: 44px; height: 44px; } /* * Footer links were 17px tall: the text box and nothing else, stacked four to a * column, which on a phone is four mis-taps in a row. The padding is negative * on the inline axis so the column still lines up with the heading above it. */ .lp-footer-links a { display: flex; align-items: center; min-height: 44px; margin-inline: -8px; padding-inline: 8px; border-radius: 8px; } .lp-page .lp-button { min-height: 46px; } /* The brand lock-up is a link home, and 38px is the height of its own icon. */ .lp-header .lp-brand, .lp-footer .lp-brand { min-height: 44px; } /* * The policy's table of contents is eleven links in a column — the densest list * of tap targets on the site, and the one most likely to be read on a phone. */ .lp-doc-toc a { display: flex; align-items: center; min-height: 44px; } } @media (max-width: 620px) { /* * A slightly tighter gutter. 48px of it on a 390px screen is 12% of the width * spent on nothing, which is generous on a desktop and expensive here. */ .lp-container { width: calc(100% - 36px); } .lp-section { padding-block: 56px; } .lp-section-tight { padding-block: 40px; } .lp-hero { padding-top: 26px; } .lp-hero-grid { gap: 34px; } /* * `clamp()` in the base rule bottoms out too high for a 360px screen, where the * headline is the whole first impression and a word breaking mid-phrase is what * it makes. Balanced wrapping keeps the two lines close to even. */ .lp-hero h1 { font-size: clamp(30px, 8.7vw, 38px); line-height: 1.1; text-wrap: balance; } .lp-hero-text { font-size: 16px; } .lp-section-heading h2 { text-wrap: balance; } /* * Stacked rather than side by side. Two buttons sharing a 340px row leaves each * of them too narrow for its label, and the second wraps to two lines while the * first does not — which reads as a mistake. */ /* * One full-width column. `justify-content: center` from the breakpoint above * centres the *track*, and an auto-sized track is as wide as its widest label — * which is how two stacked buttons ended up 204px wide in a 354px column. The * track has to be told to fill before the button inside it can. */ .lp-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-content: stretch; } .lp-actions .lp-button { width: 100%; } /* * Left as a centred wrapping row. A two-column grid sizes its tracks to the * widest item in each, so three items of very different lengths produced one * 188px column beside a 93px one — visibly lopsided. Wrapping puts whatever * fits on each line and centres what is left over. */ .lp-trust-list { gap: 10px 18px; justify-content: center; } .lp-gallery { grid-template-columns: 1fr; } .lp-pipeline { padding: 14px 14px 12px; } .lp-card { padding: 22px 20px; } .lp-price-card { padding: 24px 22px; } /* The four figures in a price block are the reason somebody is on this page. */ .lp-price strong { font-size: 40px; } .lp-footer-grid { grid-template-columns: 1fr; gap: 28px; } .lp-copyright { flex-direction: column; gap: 10px; text-align: center; } /* * The back-to-top button overlapped the last card's action on a narrow screen, * because the page has no side gutter left to put it in at this width. */ .lp-scroll-top { right: 14px; bottom: 14px; } } /* ========================================================================== The four distinctions Its own block rather than another `.lp-feature-grid`, because it has four items and that grid is three across — the fourth card sat alone with two empty slots beside it, which reads as something that failed to load rather than as a layout. The card is the pair. Two words and the sign between them carry the whole argument, so they get the size and the weight; the sentence underneath is support and is sized as support. ========================================================================== */ .lp-distinctions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } .lp-distinction { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) { .lp-distinction:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow); } } .lp-distinction__icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--lp-blue); background: rgba(58, 79, 216, 0.1); border-radius: 12px; } .lp-distinction__icon svg { width: 21px; height: 21px; } .lp-distinction__icon.lp-icon-green { color: var(--lp-green-text); background: rgba(18, 153, 107, 0.12); } .lp-distinction__icon.lp-icon-orange { color: #8a5a00; background: rgba(224, 138, 30, 0.13); } .lp-page[data-lp-theme='dark'] .lp-distinction__icon.lp-icon-orange { color: #e0a83c; } .lp-distinction__icon.lp-icon-red { color: var(--lp-red); background: rgba(211, 58, 47, 0.1); } /* * `flex-wrap` rather than `white-space: nowrap`: "Verified ≠ Deliverable" is the * longest pair and it has to be allowed to break onto two lines in a 250px column * instead of forcing the column wider than its three siblings. */ .lp-distinction__pair { display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: baseline; margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.25; color: var(--lp-heading); letter-spacing: -0.01em; } /* The sign is the argument, so it is the one thing in the card wearing the accent. */ .lp-distinction__pair i { font-size: 1.2em; font-style: normal; font-weight: 700; color: var(--lp-blue); } .lp-distinction__body { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--lp-muted); } .lp-distinction__body code { font-size: 0.92em; } @media (max-width: 1080px) { .lp-distinctions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .lp-distinctions { grid-template-columns: minmax(0, 1fr); gap: 14px; } .lp-distinction { padding: 20px 18px; } } /* ========================================================================== The refusals Six cards, three across, so the rows fill. What they did not have was a reason to look at any one of them: every card carried the same red prohibition glyph, which made the icon column a texture instead of a signpost. Each card now takes the icon of its own subject — a person, a mail server, an address, a gauge, the web, an envelope — and a single small struck badge in the corner marks it as something the product refuses. The badge is what repeats; the icon is what distinguishes. ========================================================================== */ .lp-refusals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } .lp-refusal { padding: 26px 24px; background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) { .lp-refusal:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow); } } .lp-refusal__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; color: var(--lp-muted); background: var(--lp-soft); border-radius: 13px; } .lp-refusal__icon > svg { width: 22px; height: 22px; } /* * The refusal marker. Offset so it breaks the chip's corner rather than sitting * inside it — a badge fully contained in the chip reads as part of the icon, and * the whole job of this element is to say that the icon is negated. * * The ring is `--lp-surface` because that is what the badge actually sits on: the * chip is inside the card, and the card is a surface even though the section * behind it is tinted. Matching the section instead would put a visible halo * around every badge. */ .lp-refusal__no { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 19px; height: 19px; color: #ffffff; background: var(--lp-red); border: 2px solid var(--lp-surface); border-radius: 50%; } .lp-refusal__no svg { width: 10px; height: 10px; stroke-width: 3.4; } .lp-refusal h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; color: var(--lp-heading); } .lp-refusal p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--lp-muted); } .lp-refusal p code { font-size: 0.92em; } @media (max-width: 900px) { .lp-refusals { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .lp-refusals { grid-template-columns: minmax(0, 1fr); gap: 14px; } .lp-refusal { padding: 22px 20px; } }