/* * Sender Registry — Public marketing site (Phase 4, Brick 3). * * Deliberately a SEPARATE stylesheet from tokens.css/base.css/ * components.css, which serve the toggleable customer/admin app * surfaces. This page is a fixed dark identity by design (confirmed * with Chris, 14 Jul 2026) - it does not read the light/dark theme * toggle at all, so it can't share the same custom-property scaffolding * that's built around switching. * * Typeface: Archivo (Google Fonts, free) throughout, one family with * real weight/size contrast rather than a display+body pair - "precise, * evidence-led, technical-but-human" per PRODUCT.md's own brand-voice * words, and not on impeccable's reflex-reject list (Inter, Space * Grotesk, DM Sans, IBM Plex, Fraunces etc. were all deliberately * avoided). * * Color strategy: Committed, not Restrained - the deep navy/charcoal IS * the surface majority (per the mandatory Landing Page PRD Attachment's * own design language), with one electric-blue accent (the exact same * --accent value already used in the authenticated product's dark * theme, §tokens.css, so the mark carries through consistently) and red * reserved only for genuine risk states inside product-visual * recreations, never as a general marketing accent. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap'); :root { --lp-bg: #0B1220; --lp-bg-alt: #101826; --lp-surface: #151E2E; --lp-surface-raised: #1B2537; --lp-border: #26324A; --lp-border-strong: #34435F; --lp-text: #EDF1F7; --lp-text-muted: #9AA7BD; --lp-text-dim: #6B7890; --lp-accent: #5B90FF; --lp-accent-dim: #3E6BCF; --lp-accent-tint: color-mix(in srgb, var(--lp-accent) 14%, var(--lp-bg)); --lp-risk-critical: #C0362C; --lp-risk-high: #C0362C; --lp-risk-caution: #B8790C; --lp-risk-low: #1F7A4D; --lp-radius-sm: 6px; --lp-radius-md: 12px; --lp-radius-lg: 20px; --lp-space-1: 8px; --lp-space-2: 16px; --lp-space-3: 24px; --lp-space-4: 40px; --lp-space-5: 64px; --lp-space-6: 104px; /* Semantic z-index scale - never an arbitrary 999/9999 */ --lp-z-sticky: 100; --lp-z-drawer: 200; --lp-z-modal-backdrop: 300; --lp-z-modal: 310; --lp-z-toast: 400; } /* Ambient page background (18 Jul 2026) - dark at the top, easing to a lighter navy toward the bottom, plus a quiet accent bloom/ray burst behind the hero. Deliberately plain layered gradients only - no mask/mask-composite and no conic-gradient rotation, since both were the specific techniques that failed to render live in Safari during the abandoned dashboard "glow" pilot (see CLAUDE.md, 17 Jul 2026). The ray layer is erased back to solid colour outside a central ellipse by the layer painted above it, rather than masked - same visual result, ordinary gradient compositing only. Reuses the existing --lp-bg -> --lp-surface-raised ramp rather than inventing a parallel set of tokens. */ /* Dark base on the root element so a short page (e.g. /lookup) or Safari overscroll never flashes white below the content (27 Jul 2026). The flex column + margin-top:auto on the footer keeps the footer pinned to the bottom on short pages, so it reads identically to every full-length page (no lighter gradient band showing beneath a mid-page footer). */ html { background: var(--lp-bg); } .lp { min-height: 100vh; display: flex; flex-direction: column; /* Top treatment (vignette + rays) is anchored to the top at a fixed height; the bottom treatment (accent glow + lift to surface-raised) is anchored to the BOTTOM at a fixed height, over a uniform dark base. Anchoring both to fixed pixel heights (not 100% of body height) means the footer area reads identically on a short page like /lookup and a long page like the homepage - previously the 100%-height layers compressed on short pages into a visible lighter band (27 Jul 2026). */ background: radial-gradient(65% 55% at 50% 0%, transparent 0%, var(--lp-bg) 72%), repeating-conic-gradient(from 210deg at 50% 0%, color-mix(in srgb, var(--lp-accent) 10%, transparent) 0deg 2.5deg, transparent 2.5deg 12deg), radial-gradient(70% 300px at 50% 100%, color-mix(in srgb, var(--lp-accent) 13%, transparent) 0%, transparent 75%), linear-gradient(0deg, var(--lp-surface-raised) 0%, var(--lp-bg-alt) 42%, transparent 100%); background-repeat: no-repeat; background-size: 100% 900px, 100% 900px, 100% 620px, 100% 620px; background-position: top, top, bottom, bottom; background-color: var(--lp-bg); color: var(--lp-text); font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .lp * { box-sizing: border-box; } .lp h1, .lp h2, .lp h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; margin: 0; } .lp p { text-wrap: pretty; } .lp h1 { font-size: clamp(2.25rem, 3.2vw + 1.4rem, 4.5rem); } .lp h2 { font-size: clamp(1.75rem, 1.8vw + 1.2rem, 2.75rem); } .lp h3 { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem); } .lp-body-lg { font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem); color: var(--lp-text-muted); max-width: 62ch; line-height: 1.6; } .lp-body { font-size: 1rem; color: var(--lp-text-muted); max-width: 68ch; line-height: 1.65; } /* Opt-in: let prose fill its container instead of its own reading measure. .lp-body-lg (62ch at ~20px) and .lp-body (68ch at 16px) render at roughly 620px and 544px, so a heading, a card row or the intro paragraph above them all sit wider and the text reads as indented. On a section already capped at 820px the container IS the measure, so this aligns everything without letting a line run the full 1240px. No effect on mobile, where the container is already narrower than either max-width. */ .lp-prose-full .lp-body, .lp-prose-full .lp-body-lg { max-width: none; } .lp-container { max-width: 1240px; margin: 0 auto; padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 4vw, 64px); } .lp-section { padding-top: var(--lp-space-6); padding-bottom: var(--lp-space-6); } .lp-section--tight { padding-top: var(--lp-space-5); padding-bottom: var(--lp-space-5); } /* Translucent, not opaque (18 Jul 2026) - lets the page-level ambient gradient on .lp keep showing through every section rather than being blocked by a flat fill, while still giving alternating sections a quietly different tone. */ .lp-section--alt { background: color-mix(in srgb, var(--lp-bg-alt) 55%, transparent); } .lp-eyebrow-free { /* Deliberately not a repeated tiny-uppercase-tracked label on every section (impeccable's own ban on that as default scaffolding) - used at most once or twice across the whole page, and only where it's carrying real information (e.g. "Free, no signup"), never as decorative section grammar. */ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--lp-accent); background: var(--lp-accent-tint); border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent); border-radius: 999px; padding: 6px 14px; } /* ---------- Buttons ---------- */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 15px; border-radius: var(--lp-radius-sm); padding: 13px 26px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease-out, border-color 0.2s ease-out; min-height: 44px; } .lp-btn:hover { transform: translateY(-1px); } .lp-btn:active { transform: translateY(0); } /* Thin persistent glow ring (18 Jul 2026) - a crisp 1px ring right at the edge plus a soft bloom bleeding outward, static rather than animated (buttons appear on almost every screen; a pulsing glow on all of them at once would be the "too OTT" outcome Chris flagged for the connecting lines, just applied to a different element). */ .lp-btn--primary { background: var(--lp-accent); color: #05070C; box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-accent) 70%, transparent), 0 0 18px -3px color-mix(in srgb, var(--lp-accent) 60%, transparent); } .lp-btn--primary:hover { background: #6E9DFF; box-shadow: 0 0 0 1px var(--lp-accent), 0 0 22px -2px color-mix(in srgb, var(--lp-accent) 70%, transparent); } .lp-btn--secondary { background: transparent; color: var(--lp-text); border-color: var(--lp-border-strong); box-shadow: 0 0 0 1px transparent; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out; } .lp-btn--secondary:hover { border-color: var(--lp-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-accent) 50%, transparent), 0 0 16px -4px color-mix(in srgb, var(--lp-accent) 55%, transparent); } .lp-btn--ghost { background: transparent; color: var(--lp-accent); padding-left: 4px; padding-right: 4px; min-height: auto; } .lp-btn--ghost:hover { color: #6E9DFF; } .lp-btn--platform { background: transparent; color: var(--lp-text); border-color: var(--lp-border-strong); justify-content: flex-start; gap: 12px; padding: 10px 22px 10px 18px; } .lp-btn--platform:hover { border-color: var(--lp-accent); } .lp-btn--platform svg { flex-shrink: 0; } .lp-btn--platform-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; } .lp-btn--platform-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--lp-text-dim); } .lp-btn--platform-label { font-size: 15px; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .lp-btn { transition: none; } .lp-btn:hover { transform: none; } } /* ---------- Header / nav ---------- */ .lp-header { position: sticky; top: 0; z-index: var(--lp-z-sticky); background: color-mix(in srgb, var(--lp-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lp-border); } .lp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-3); padding-top: 16px; padding-bottom: 16px; } .lp-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-text); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } .lp-logo img { width: 30px; height: 30px; } .lp-nav { display: flex; align-items: center; gap: var(--lp-space-4); } .lp-nav-links { display: flex; align-items: center; gap: var(--lp-space-3); list-style: none; margin: 0; padding: 0; } .lp-nav-links a { color: var(--lp-text-muted); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: color 0.15s ease-out; } .lp-nav-links a:hover { color: var(--lp-text); } .lp-nav-cta { display: flex; align-items: center; gap: 12px; } .lp-nav-toggle { display: none; background: none; border: 1px solid var(--lp-border-strong); border-radius: var(--lp-radius-sm); width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--lp-text); cursor: pointer; } .lp-drawer { position: fixed; inset: 0; z-index: var(--lp-z-drawer); background: var(--lp-bg); display: flex; flex-direction: column; padding: 24px; gap: var(--lp-space-2); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); /* Full-viewport drawer: scroll when the content (e.g. the expanded Intelligence submenu) is taller than the screen, so nothing is unreachable on a short phone. */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lp-drawer.is-open { transform: translateX(0); } .lp-drawer-close { align-self: flex-end; background: none; border: 1px solid var(--lp-border-strong); border-radius: var(--lp-radius-sm); width: 44px; height: 44px; color: var(--lp-text); cursor: pointer; } .lp-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: var(--lp-space-3); } .lp-drawer nav a { color: var(--lp-text); text-decoration: none; font-size: 20px; font-weight: 700; padding: 14px 4px; border-bottom: 1px solid var(--lp-border); } @media (prefers-reduced-motion: reduce) { .lp-drawer { transition: none; } } @media (max-width: 880px) { .lp-nav-links, .lp-nav-cta { display: none; } .lp-nav-toggle { display: inline-flex; } } /* iPad landscape only (touch-primary, 1000-1366px - excludes phones via the width floor and excludes desktop/laptop via hover/pointer, regardless of window width). At these widths the full desktop nav doesn't fit on one line and every multi-word label (even the logo) wraps mid-word - trim the header CTA area to reclaim room rather than shrinking type. Mobile drawer keeps its own "Get started free". */ @media (hover: none) and (pointer: coarse) and (min-width: 1000px) and (max-width: 1366px) { .lp-logo, .lp-nav-links a { white-space: nowrap; } .lp-nav-links { gap: 18px; } .lp-nav-cta .lp-btn--primary { display: none; } .lp-nav-cta .lp-btn--secondary { background: transparent; border-color: transparent; color: var(--lp-text-muted); padding-left: 4px; padding-right: 4px; min-height: auto; } .lp-nav-cta .lp-btn--secondary:hover { border-color: transparent; color: var(--lp-text); } } /* ---------- Device frames (product visuals) ---------- */ .lp-visual-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 3vw, 48px); flex-wrap: wrap; } .device-frame { position: relative; flex-shrink: 0; } /* iPhone: fixed aspect ratio bezel, screen content fills the inset area at the correct proportion rather than a stretched/guessed crop. Refined 21 Jul 2026 (real device frame revamp, mobile-magic.php's "looks a little fake" feedback) - the ratio itself (roughly 393/852, an iPhone 15/16 Pro's own logical points) was already accurate; what actually read as fake was a thick flat-black bezel and a large corner radius eating into the visible screen, which makes any modern edge- to-edge iPhone look stubby rather than tall and slim. Thinner bezel (10px, was 14px) + a titanium gradient/highlight instead of flat black is the real fix, not a different ratio number. */ .device-frame--iphone { width: clamp(210px, 22vw, 270px); aspect-ratio: 393 / 852; background: linear-gradient(155deg, #4a4d54 0%, #1c1e22 45%, #08090C 100%); border-radius: 52px; padding: 10px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6), inset 0 0 0 1.5px rgba(255,255,255,0.14), inset 0 1.5px 3px rgba(255,255,255,0.18); } .device-frame--iphone::before { /* Dynamic Island - sized/positioned against real iPhone 15/16 Pro proportions (~126x37pt on a 393pt-wide screen, ~32%/4.3%), not a generic wide notch band. */ content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 32%; height: 26px; background: #000; border-radius: 16px; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); } .device-frame--iphone::after { /* The Dynamic Island's own camera dot - small, deliberately subtle. */ content: ''; position: absolute; top: 29px; left: calc(50% + 22px); width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #445269 0%, #0a0e18 75%); z-index: 4; } .device-frame--iphone .device-screen { width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: linear-gradient(155deg, var(--lp-surface-raised) 0%, var(--lp-surface) 100%); position: relative; } /* Shared status bar + home indicator chrome (partials/iphone-chrome.php) - every .device-frame--iphone mockup includes this once, so "this is a real phone screen" reads consistently across all of them rather than only the ones a given task happened to touch. */ .device-status-bar { position: absolute; top: 16px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 5; pointer-events: none; } .device-status-time { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.94); letter-spacing: -0.01em; } .device-status-icons { display: flex; align-items: center; gap: 5px; } .device-home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 112px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.55); z-index: 5; } /* iMac: widescreen bezel + a simple stand, matching a real desktop's proportions rather than a generic rectangle. */ .device-frame--imac { width: clamp(240px, 34vw, 560px); max-width: 100%; } .device-frame--imac .device-screen-wrap { aspect-ratio: 16 / 10; background: #0C0D10; border-radius: 18px; padding: 14px 14px 20px; box-shadow: 0 40px 90px -24px rgba(0,0,0,0.65); } .device-frame--imac .device-screen { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(155deg, var(--lp-surface-raised) 0%, var(--lp-surface) 100%); } .device-frame--imac .device-stand { width: 22%; height: 34px; background: linear-gradient(180deg, #14161B, #0C0D10); margin: 0 auto; clip-path: polygon(38% 0%, 62% 0%, 82% 100%, 18% 100%); } .device-frame--imac .device-base { width: 42%; height: 8px; background: #14161B; margin: 0 auto; border-radius: 999px; } /* Free-standing: the UI panel itself, no chrome, a soft shadow lifting it off the page - for visuals the spec calls out as not needing a device (e.g. a Registry Record or evidence panel shown edge-to-edge). */ .device-frame--free .device-screen { border-radius: var(--lp-radius-md); overflow: hidden; background: linear-gradient(155deg, var(--lp-surface-raised) 0%, var(--lp-surface) 100%); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 1px var(--lp-border); /* height:100% is a no-op in the normal case (percentage heights against an auto-sized block parent resolve to auto) - it only takes effect where a parent grid row explicitly stretches this card's height, e.g. Campaign Replay next to the taller Threat DNA card (18 Jul 2026, Chris's own side-by-side comparison). */ height: 100%; } /* ===== App-accurate phone mockup screens (mobile Lite look) ===== * (22 Aug 2026) Six phone-mockup screens ported from the approved * sr-landing-mockups-preview.html reference so the marketing site's * phones show the real Mobile (Lite) app UI instead of generic cards. * Every class below is lpm- prefixed (landing phone mockup) so nothing * here can collide with this file's existing, more generic class names * (its own unrelated .lp-badge etc. patterns). Screen content sits * inside the existing .device-frame--iphone/.device-screen frame and * the shared partials/iphone-chrome.php status bar/home indicator - * this block only adds the content that goes inside them, it does not * touch the frame rules above. * * Risk colours use the app's real 4-tier palette (--lpm-risk-*), * deliberately separate from the 2-tone --lp-risk-* pair already * declared in :root above (--lp-risk-high === --lp-risk-critical * there; these mockups need all four tiers visually distinct to match * the real app). * * Sizing: fixed px values tuned to read across the frame's own * clamp(210px, 22vw, 270px) width range - the same approach already * used by this file's other .device-frame--iphone screen content * (mobile-magic.php's existing mockups), not a transform-scale/JS * hack. */ :root { --lpm-risk-critical: #E5484D; --lpm-risk-high: #F0873C; --lpm-risk-caution: #E7B23B; --lpm-risk-low: #33C27F; } /* shared app chrome: topbar + scrollable body + bottom tab bar (screens: hero verdict, assessments feed, verify verdict) */ .lpm-screen { position:relative; height:100%; display:flex; flex-direction:column; padding-top:38px; } .lpm-topbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 14px 10px; } .lpm-brand { display:flex; align-items:center; gap:6px; min-width:0; } .lpm-logo { width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dim)); display:grid; place-items:center; flex-shrink:0; } .lpm-brand b { font-size:12.5px; font-weight:700; letter-spacing:-0.01em; color: var(--lp-text); white-space:nowrap; } .lpm-lite { font-size:7px; font-weight:700; letter-spacing:.14em; color: var(--lp-accent); border:1px solid color-mix(in srgb, var(--lp-accent) 45%, transparent); padding:1px 5px; border-radius:999px; flex-shrink:0; } .lpm-av { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, #7AA0F7, var(--lp-accent)); display:grid; place-items:center; font-size:9px; font-weight:700; color:#0B1220; flex-shrink:0; } .lpm-body { flex:1 1 auto; overflow:hidden; padding:0 14px; position:relative; } .lpm-h1 { font-size:17px; font-weight:700; letter-spacing:-0.02em; margin:2px 1px 1px; color: var(--lp-text); } .lpm-h2 { font-size:10.5px; color: var(--lp-text-muted); margin:0 1px 12px; } /* assessments-feed cards */ .lpm-card { background:linear-gradient(180deg, var(--lp-surface-raised), var(--lp-surface)); border:1px solid var(--lp-border); border-radius:14px; padding:11px 12px; margin-bottom:9px; } .lpm-rt { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; gap:8px; } .lpm-chip { font-size:8px; font-weight:700; letter-spacing:.08em; padding:3px 7px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; flex-shrink:0; } .lpm-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .lpm-chip--critical { color: var(--lpm-risk-critical); background: color-mix(in srgb, var(--lpm-risk-critical) 16%, transparent); } .lpm-chip--critical .lpm-dot { background: var(--lpm-risk-critical); } .lpm-chip--high { color: var(--lpm-risk-high); background: color-mix(in srgb, var(--lpm-risk-high) 16%, transparent); } .lpm-chip--high .lpm-dot { background: var(--lpm-risk-high); } .lpm-chip--caution { color: var(--lpm-risk-caution); background: color-mix(in srgb, var(--lpm-risk-caution) 16%, transparent); } .lpm-chip--caution .lpm-dot { background: var(--lpm-risk-caution); } .lpm-chip--low { color: var(--lpm-risk-low); background: color-mix(in srgb, var(--lpm-risk-low) 16%, transparent); } .lpm-chip--low .lpm-dot { background: var(--lpm-risk-low); } .lpm-date { font-size:9px; color: var(--lp-text-dim); flex-shrink:0; } .lpm-subj { font-size:12px; font-weight:600; line-height:1.3; margin-bottom:4px; color: var(--lp-text); } .lpm-why { font-size:10px; color: var(--lp-text-muted); line-height:1.45; margin-bottom:9px; } .lpm-mr { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--lp-border); padding-top:7px; gap:8px; } .lpm-net { font-size:8px; font-weight:600; letter-spacing:.06em; color: var(--lp-text-muted); border:1px solid var(--lp-border); padding:2px 6px; border-radius:5px; flex-shrink:0; } .lpm-ref { font-size:9px; color: var(--lp-text-dim); } /* bottom tab bar */ .lpm-tabbar { flex:0 0 auto; display:flex; justify-content:space-around; padding:8px 6px 22px; border-top:1px solid var(--lp-border); background: color-mix(in srgb, var(--lp-bg) 70%, transparent); } .lpm-tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:8.5px; font-weight:600; color: var(--lp-text-dim); } .lpm-tab svg { width:18px; height:18px; } .lpm-tab--on { color: var(--lp-accent); } /* verdict hero + supporting rows (hero + verify screens) */ .lpm-vhero { border-radius:14px; padding:13px; margin-bottom:11px; border:1px solid; } .lpm-vhero--critical { background:linear-gradient(180deg, color-mix(in srgb, var(--lpm-risk-critical) 20%, transparent), transparent); border-color: color-mix(in srgb, var(--lpm-risk-critical) 42%, transparent); } .lpm-vhero--high { background:linear-gradient(180deg, color-mix(in srgb, var(--lpm-risk-high) 18%, transparent), transparent); border-color: color-mix(in srgb, var(--lpm-risk-high) 42%, transparent); } .lpm-vhero--low { background:linear-gradient(180deg, color-mix(in srgb, var(--lpm-risk-low) 16%, transparent), transparent); border-color: color-mix(in srgb, var(--lpm-risk-low) 42%, transparent); } .lpm-vhl { font-size:17px; font-weight:800; letter-spacing:.02em; display:flex; align-items:center; gap:7px; color: var(--lp-text); } .lpm-vsc { display:flex; gap:16px; margin-top:9px; } .lpm-vm-n { font-size:15px; font-weight:700; color: var(--lp-text); } .lpm-vm-l { font-size:8px; color: var(--lp-text-muted); letter-spacing:.05em; text-transform:uppercase; } .lpm-act { background: var(--lp-surface); border:1px solid var(--lp-border); border-left:3px solid var(--lpm-risk-critical); border-radius:11px; padding:10px 11px; margin-bottom:11px; } .lpm-act--high { border-left-color: var(--lpm-risk-high); } .lpm-act--low { border-left-color: var(--lpm-risk-low); } .lpm-act-k { font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; color: var(--lpm-risk-critical); } .lpm-act--high .lpm-act-k { color: var(--lpm-risk-high); } .lpm-act--low .lpm-act-k { color: var(--lpm-risk-low); } .lpm-act-v { font-size:11.5px; line-height:1.45; font-weight:500; color: var(--lp-text); } .lpm-kv { display:flex; justify-content:space-between; align-items:center; font-size:10.5px; padding:6px 0; border-bottom:1px solid var(--lp-border); gap:8px; } .lpm-kv:last-child { border-bottom:none; } .lpm-kv-k { color: var(--lp-text-muted); flex-shrink:0; } .lpm-kv-v { font-weight:600; color: var(--lp-text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lpm-kv-v--good { color: var(--lpm-risk-low); } .lpm-kv-v--bad { color: var(--lpm-risk-critical); } .lpm-ev { background: var(--lp-surface); border:1px solid var(--lp-border); border-radius:10px; padding:9px 10px; margin-bottom:7px; display:flex; justify-content:space-between; align-items:center; gap:8px; } .lpm-ev-t { font-size:10.5px; font-weight:600; color: var(--lp-text); } .lpm-ev-p { color: var(--lp-accent); font-size:13px; flex-shrink:0; } /* lock screen push notification */ .lpm-lock { position:relative; height:100%; background: radial-gradient(120% 80% at 50% 0%, #1a2740, #0a1220 70%); display:flex; flex-direction:column; align-items:center; padding-top:70px; } .lpm-lock-time { font-size:58px; font-weight:300; letter-spacing:-2px; line-height:.9; color:#fff; } .lpm-lock-day { font-size:12px; color: rgba(255,255,255,.75); margin-top:4px; font-weight:500; } .lpm-notif { margin-top:auto; margin-bottom:64px; width:88%; background: rgba(30,40,58,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:11px 12px; display:flex; gap:10px; } .lpm-notif-icon { width:34px; height:34px; border-radius:9px; background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dim)); display:grid; place-items:center; flex:0 0 auto; } .lpm-notif-body { flex:1; min-width:0; } .lpm-notif-name { display:flex; justify-content:space-between; gap:6px; font-size:8.5px; font-weight:700; letter-spacing:.06em; color: rgba(255,255,255,.6); } .lpm-notif-head { font-size:12px; font-weight:700; margin:3px 0 2px; color:#fff; } .lpm-notif-text { font-size:10.5px; color: rgba(255,255,255,.8); line-height:1.35; } /* QR scanner */ .lpm-scan { position:relative; height:100%; background:#05070c; display:flex; flex-direction:column; align-items:center; overflow:hidden; } .lpm-scan-cam { position:absolute; inset:0; background: linear-gradient(160deg, #1b2436, #0a0f18 60%, #05070c); } .lpm-scan-hint { position:relative; margin-top:64px; font-size:11px; color: rgba(255,255,255,.85); font-weight:500; } .lpm-frame { position:relative; margin-top:26px; width:150px; height:150px; border-radius:22px; } .lpm-frame span { position:absolute; width:26px; height:26px; border:3px solid var(--lp-accent); } .lpm-frame .lpm-tl { top:0; left:0; border-right:0; border-bottom:0; border-radius:12px 0 0 0; } .lpm-frame .lpm-tr { top:0; right:0; border-left:0; border-bottom:0; border-radius:0 12px 0 0; } .lpm-frame .lpm-bl { bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 12px; } .lpm-frame .lpm-br { bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 12px 0; } .lpm-qr { position:absolute; inset:26px; background:#fff; border-radius:8px; display:grid; place-items:center; } .lpm-qr svg { width:88px; height:88px; } .lpm-safe { position:relative; margin-top:auto; margin-bottom:70px; background: color-mix(in srgb, var(--lpm-risk-low) 22%, #0a0f18); border:1px solid color-mix(in srgb, var(--lpm-risk-low) 55%, transparent); color: var(--lpm-risk-low); font-size:11px; font-weight:700; padding:9px 16px; border-radius:999px; display:flex; align-items:center; gap:7px; } /* share sheet */ .lpm-shb { position:relative; height:100%; background: linear-gradient(160deg, var(--lp-surface-raised), var(--lp-surface)); display:flex; flex-direction:column; } .lpm-msg { padding:56px 14px 14px; color: var(--lp-text-muted); font-size:10.5px; line-height:1.5; opacity:.6; } .lpm-msg .lpm-lnk { color: var(--lp-accent); text-decoration:underline; word-break:break-all; } .lpm-sheet { margin-top:auto; background: var(--lp-surface-raised); border-top-left-radius:22px; border-top-right-radius:22px; border-top:1px solid var(--lp-border); padding:14px 14px 30px; box-shadow: 0 -14px 40px rgba(0,0,0,.4); } .lpm-sheet-title { font-size:11px; font-weight:600; color: var(--lp-text-muted); text-align:center; margin-bottom:14px; } .lpm-apps { display:flex; gap:14px; justify-content:space-around; } .lpm-app { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:8px; color: var(--lp-text-muted); } .lpm-app-icon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; } .lpm-app--selected .lpm-app-icon { background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dim)); box-shadow: 0 0 0 2px var(--lp-accent), 0 8px 18px rgba(91,144,255,.5); } .lpm-app--selected span { color: var(--lp-accent); font-weight:700; } /* Mail-reply screen (checking address, 24 Aug 2026). The customer who forwards to a checking address has no account and no app: what they get back is an email. So this mockup is a mail client rather than the Lite app, and every string on it is what the product actually generates (VerifyAddressIngest::sendResultReply + SenderVerification:: impersonationResult), not invented marketing copy. The verdict itself reuses .lpm-vhero/.lpm-act so the risk treatment is identical to every other mockup on this page; .lpv-hero only resizes it for the narrower headline this screen carries. */ /* This screen carries a full mail reply, more content than the app-screen mockups the shared clamp(210px, 22vw, 270px) was tuned for, so at the 210px floor its last third (the action block, the link, the co-branding footer) clipped out of .lpv-body's overflow:hidden. Measured, not eyeballed: 158px of overflow at a 375px viewport. Raising only THIS frame's minimum to 250px fits it at every width and leaves every other .device-frame--iphone mockup on the page exactly as it was. */ .lpv-frame { width: min(270px, 100%); } .lpv-screen { position:relative; height:100%; display:flex; flex-direction:column; padding-top:38px; } .lpv-nav { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:2px 12px 8px; border-bottom:1px solid var(--lp-border); } .lpv-back { display:flex; align-items:center; gap:2px; font-size:11px; font-weight:500; color: var(--lp-accent); } .lpv-nav-acts { display:flex; gap:12px; color: var(--lp-text-dim); } .lpv-body { flex:1 1 auto; overflow:hidden; padding:10px 13px 0; } .lpv-subj { font-size:12.5px; font-weight:700; line-height:1.3; letter-spacing:-0.01em; color: var(--lp-text); margin:0 0 9px; } .lpv-from { display:flex; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--lp-border); margin-bottom:10px; } .lpv-av { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dim)); display:grid; place-items:center; flex:0 0 auto; } .lpv-who { min-width:0; flex:1 1 auto; } .lpv-name { font-size:11px; font-weight:700; color: var(--lp-text); } .lpv-addr { font-size:8.5px; color: var(--lp-text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lpv-time { font-size:8.5px; color: var(--lp-text-dim); flex:0 0 auto; align-self:flex-start; padding-top:2px; } .lpv-lead { font-size:9.5px; color: var(--lp-text-muted); margin:0 0 9px; } .lpv-hero { padding:10px 11px; margin-bottom:9px; } .lpv-hero .lpm-vhl { font-size:13.5px; line-height:1.25; letter-spacing:-0.01em; display:block; margin-top:7px; } .lpv-para { font-size:9.5px; line-height:1.5; color: var(--lp-text); margin:0 0 9px; } .lpv-act { padding:9px 10px; margin-bottom:9px; } .lpv-link { font-size:9.5px; color: var(--lp-accent); text-decoration:underline; } .lpv-foot { font-size:8.5px; line-height:1.45; color: var(--lp-text-dim); border-top:1px solid var(--lp-border); margin-top:9px; padding-top:8px; } /* Animated glow-border card (18 Jul 2026, fixed same day). A deliberately proven-safe technique: a double background (padding-box fill + border-box gradient) animated purely via background-position, the same family of properties confirmed working live in Safari during the dashboard "glow" pilot. Explicitly NOT mask-composite/`:has()`/ conic rotation - those were the specific techniques that rendered as no visible change at all in that pilot (CLAUDE.md, 17 Jul 2026). Selector is deliberately `.device-screen.lp-glow-card` PLUS `.lp-card.lp-glow-card` (both two classes), not `.lp-glow-card` alone - the device-frame variant rules above (`.device-frame--free .device-screen` etc.) are themselves two-class compound selectors, equal-or-higher specificity than a single class, so a bare `.lp-glow-card` had its own background/box-shadow silently overridden by them every time - the animation was genuinely running, there was just nothing left for it to animate. First live-tested symptom: "no moving lines" on both desktop and mobile, no console error, no deploy/ cache issue - a pure cascade bug, confirmed by comparing against the live server's own CSS/HTML (byte-identical to local, ruling out a stale upload). Real second bug, found 18 Jul 2026 fixing the save-contact block: the fix above only ever added the `.device-screen.lp-glow-card` variant, never restoring a `.lp-card.lp-glow-card` one - so every plain `.lp-card` this class was later added to (Trust, Pricing, Try It Yourself, the Developers page cards, Save Your Contact) silently never had the glow at all, all the way back to when the compound-selector fix first shipped. Not caught earlier because nobody had zoomed in on one of those specific cards until now. Fixed by listing both compound selectors together rather than replacing one with the other - general lesson: renaming a shared class's selector to fix a specificity clash for one use case can silently orphan every OTHER use case of that same class if the old bare selector covered more than one element type. Opt-in via this class on top of a card/device-screen, not a default - reserved for the handful of feature panels this treatment is meant to lift, per Chris's own "not too OTT" steer on the connecting-line effect below. */ .device-screen.lp-glow-card, .lp-card.lp-glow-card { position: relative; border: 1px solid transparent; background: linear-gradient(155deg, var(--lp-surface-raised) 0%, var(--lp-surface) 100%) padding-box, linear-gradient(100deg, transparent 15%, var(--lp-accent) 50%, transparent 85%) border-box; background-size: 100% 100%, 220% 220%; background-position: 0 0, 0% 50%; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 28px -4px color-mix(in srgb, var(--lp-accent) 55%, transparent); animation: lp-border-glow 5s ease-in-out infinite; } @keyframes lp-border-glow { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } } @media (prefers-reduced-motion: reduce) { .device-screen.lp-glow-card { animation: none; background-position: 0 0, 50% 50%; } } /* Traveling highlight along a thin line (18 Jul 2026, widened same day alongside the glow-card fix above for better real-world visibility - 2px read as basically invisible against the dark surface). Same background-position-animation family as the glow-border above, used sparingly (Campaign Replay's timeline connector) rather than as general section-divider decoration, per Chris's explicit "not too OTT" steer. */ .lp-timeline-line { position: absolute; width: 3px; background: var(--lp-border-strong); overflow: hidden; border-radius: 2px; } .lp-timeline-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--lp-accent) 40%, var(--lp-accent) 55%, transparent 90%); background-size: 100% 240%; animation: lp-line-travel 3s ease-in-out infinite; } @keyframes lp-line-travel { 0% { background-position: 0 -140%; } 100% { background-position: 0 140%; } } @media (prefers-reduced-motion: reduce) { .lp-timeline-line::after { animation: none; background-position: 0 0; } } @media (prefers-reduced-motion: no-preference) { .device-frame { animation: lp-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } } @keyframes lp-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Cards, badges, misc ---------- */ .lp-card { /* Diagonal two-stop fill rather than a flat colour (18 Jul 2026) - a quiet internal fade so cards read as lit rather than flat panels, matching the ambient page background above. */ background: linear-gradient(155deg, var(--lp-surface-raised) 0%, var(--lp-surface) 100%); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md); padding: var(--lp-space-3); } /* Bounded, scrollable news-story list (public /news) so a long run of published stories does not push the footer off the bottom of the page. The scrollbar only appears once the list actually overflows (overflow-y: auto), and every story stays in the DOM - so this is SEO-neutral: crawlers still see all the story links. */ .lp-news-list { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; max-height: 70vh; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--lp-border-strong) transparent; /* Fade the top and bottom edges so the box reads as scrollable on touch devices, where iOS hides the overlay scrollbar until an active drag. -webkit- prefix is required for iOS Safari. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%); } .lp-news-list::-webkit-scrollbar { width: 8px; } .lp-news-list::-webkit-scrollbar-track { background: transparent; } .lp-news-list::-webkit-scrollbar-thumb { background: var(--lp-border-strong); border-radius: 4px; } .lp-news-list::-webkit-scrollbar-thumb:hover { background: var(--lp-accent); } .lp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--lp-surface-raised); color: var(--lp-text-muted); border: 1px solid var(--lp-border-strong); } .lp-badge--critical { background: color-mix(in srgb, var(--lp-risk-critical) 20%, var(--lp-surface)); color: #FF8A80; border-color: color-mix(in srgb, var(--lp-risk-critical) 45%, transparent); } .lp-badge--low { background: color-mix(in srgb, var(--lp-risk-low) 20%, var(--lp-surface)); color: #6FDBA0; border-color: color-mix(in srgb, var(--lp-risk-low) 45%, transparent); } .lp-badge--caution { background: color-mix(in srgb, var(--lp-risk-caution) 20%, var(--lp-surface)); color: #E0A63E; border-color: color-mix(in srgb, var(--lp-risk-caution) 45%, transparent); } .lp-badge--accent { background: var(--lp-accent-tint); color: var(--lp-accent); border-color: color-mix(in srgb, var(--lp-accent) 40%, transparent); } .lp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lp-space-4); align-items: center; } .lp-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--lp-space-3); } .lp-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--lp-space-3); } /* Capability-coverage section (16 Jul 2026) - column ratios moved here from inline styles on purpose: an inline style attribute always wins over a stylesheet rule, media query or not, so the mobile overrides below could never actually take effect while these lived inline. */ .lp-capability-coverage-grid { grid-template-columns: 0.85fr 1.15fr; } .lp-capability-grid { grid-template-columns: 1fr 1fr; } .lp-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } @media (max-width: 900px) { .lp-grid-2 { grid-template-columns: 1fr; } .lp-hero-grid { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .lp-footer { margin-top: auto; border-top: 1px solid var(--lp-border); padding-top: var(--lp-space-4); padding-bottom: var(--lp-space-4); } /* Content links on public pages. An unstyled defaults to browser blue (visited: purple), which reads as broken on the dark surface. A card used as a link takes the white body colour (it is a content tile, not an inline link); a genuine inline text link takes the electric-blue accent (27 Jul 2026). */ a.lp-card { color: var(--lp-text); } .lp-section a:not([class]) { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 2px; } .lp-section a:not([class]):hover { color: var(--lp-text); } .lp-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--lp-space-3); } .lp-footer-grid h4 { font-size: 13px; color: var(--lp-text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; } .lp-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .lp-footer-grid a { color: var(--lp-text-muted); text-decoration: none; font-size: 14px; } .lp-footer-grid a:hover { color: var(--lp-text); } .lp-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--lp-space-2); margin-top: var(--lp-space-4); padding-top: var(--lp-space-2); border-top: 1px solid var(--lp-border); color: var(--lp-text-dim); font-size: 13px; } .lp-social { display: flex; gap: 10px; } .lp-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--lp-surface); border: 1px solid var(--lp-border-strong); color: var(--lp-text-muted); transition: color 0.15s ease-out, border-color 0.15s ease-out; } .lp-social a:hover, .lp-social a:focus-visible { color: var(--lp-accent); border-color: var(--lp-accent); } @media (max-width: 780px) { .lp-footer-grid { grid-template-columns: 1fr 1fr; } .lp-footer-grid > div:first-child { grid-column: 1 / -1; } } /* ---------- Auth (sign-in) ---------- */ .lp-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--lp-accent) 12%, transparent), transparent 45%), var(--lp-bg); } /* Same accent-ring treatment as the featured ("Most popular") pricing tier in sections/pricing.php - reused deliberately so sign-in reads as part of the same premium visual language, not a one-off card style. */ .lp-auth-card { width: 100%; max-width: 400px; background: var(--lp-surface); border: 1px solid var(--lp-accent); border-radius: var(--lp-radius-md); box-shadow: 0 0 0 1px var(--lp-accent), 0 30px 60px -20px rgba(0, 0, 0, 0.55); padding: var(--lp-space-4) var(--lp-space-3); } .lp-auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--lp-text); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; margin-bottom: var(--lp-space-3); } .lp-auth-logo img { width: 28px; height: 28px; } .lp-auth-card h1 { font-size: 22px; text-align: center; } .lp-auth-subtitle { font-size: 14px; color: var(--lp-text-muted); text-align: center; margin: 8px 0 var(--lp-space-3); } .lp-form-group { margin-bottom: 16px; } .lp-form-label { display: block; font-size: 13px; font-weight: 600; color: var(--lp-text); margin-bottom: 6px; } .lp-input { display: block; width: 100%; padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--lp-text); background: var(--lp-surface-raised); border: 1px solid var(--lp-border-strong); border-radius: var(--lp-radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .lp-input:focus { outline: none; border-color: var(--lp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent) 22%, transparent); } .lp-form-error { background: color-mix(in srgb, var(--lp-risk-high) 16%, var(--lp-surface)); border: 1px solid color-mix(in srgb, var(--lp-risk-high) 45%, transparent); color: #FF8A80; border-radius: var(--lp-radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; } .lp-auth-footnote { text-align: center; font-size: 13px; color: var(--lp-text-muted); margin-top: var(--lp-space-3); } .lp-auth-footnote a { color: var(--lp-accent); text-decoration: none; font-weight: 600; } .lp-auth-footnote a:hover { color: #6E9DFF; } /* ---------- Modal (region/currency + learn-more, shared component) ---------- */ .lp-modal-backdrop { position: fixed; inset: 0; z-index: var(--lp-z-modal-backdrop); background: rgba(5, 7, 12, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease-out; } .lp-modal-backdrop.is-open { opacity: 1; pointer-events: auto; } .lp-modal { position: relative; z-index: var(--lp-z-modal); background: var(--lp-surface-raised); border: 1px solid var(--lp-border-strong); border-radius: var(--lp-radius-lg); max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; padding: var(--lp-space-3); transform: translateY(12px) scale(0.98); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .lp-modal--wide { max-width: 640px; } .lp-modal-backdrop.is-open .lp-modal { transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .lp-modal-backdrop, .lp-modal { transition: none; } } .lp-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px; background: var(--lp-surface); border: 1px solid var(--lp-border-strong); color: var(--lp-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .lp-modal-close:hover { color: var(--lp-text); } .lp-modal h3 { margin-bottom: 8px; } .lp-modal-options { display: flex; flex-direction: column; gap: 10px; margin-top: var(--lp-space-2); } .lp-modal-option { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--lp-surface); border: 1px solid var(--lp-border-strong); border-radius: var(--lp-radius-md); padding: 14px 16px; cursor: pointer; color: var(--lp-text); } .lp-modal-option:hover, .lp-modal-option:focus-visible { border-color: var(--lp-accent); } .lp-modal-option strong { font-size: 15px; } .lp-modal-option span { font-size: 13px; color: var(--lp-text-muted); } @media (max-width: 700px) { .lp-visual-row { flex-direction: column; align-items: center; } /* In the News list, iPhone fix (14 Aug 2026): the nested max-height scroll box + edge-fade + scrollbar padding reads as a cramped, off-centre, clipped region on a phone. On mobile just let the list flow with the page (the whole page scrolls naturally); the scroll box stays on desktop where it keeps the footer reachable. */ .lp-news-list { max-height: none; overflow-y: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; } /* iPhone cosmetic fixes, 16 Jul 2026 - Chris live-tested on a real iPhone and caught both of these: hero CTAs sat left-anchored instead of centred once each button wraps to its own row, and the "What Sender Registry investigates" capability list stayed a fixed 2-column grid too wide for the viewport, forcing a horizontal swipe that distorted the whole section. */ .lp-hero-ctas { justify-content: center; } .lp-capability-coverage-grid { grid-template-columns: 1fr; } .lp-capability-grid { grid-template-columns: 1fr; } /* Developer/API card content cropped on mobile, found live-testing 18 Jul 2026. Root cause: .device-frame--imac's width floors at 240px on a narrow viewport, and its screen-wrap forces a fixed 16/10 aspect-ratio - at 240px wide that's only ~150px tall, nowhere near enough for this card's actual content (a code block, two badges, and a paragraph, real text this device-frame variant's only other potential use cases don't carry). overflow:hidden on .device-screen then silently clipped whatever didn't fit, rather than erroring - "1 ELEVATED" and the paragraph below it were simply cut off. Fixed by letting height follow content on mobile instead of a fixed ratio, and widening the frame a little so text wraps to fewer lines in the first place. */ .device-frame--imac { width: 100%; } .device-frame--imac .device-screen-wrap { aspect-ratio: auto; } .device-frame--imac .device-screen { height: auto; } /* Compare-plans table: the "?" info button was wrapping onto its own line, or sitting right at the scrollable table's edge, for longer row labels ("Business Watch (Supplier/Executive/Brand/Lookalike)" etc.) - found live-testing on a real phone, 18 Jul 2026. Smaller label text and a smaller button both reduce how often a label's last line runs out of room for the button next to it. */ .lp-compare-label { font-size: 12px; padding: 11px 6px; } .lp-row-info-btn { width: 14px; height: 14px; margin-left: 4px; font-size: 9px; } } /* Base values match this cell's original inline style exactly - moved to a class (18 Jul 2026) specifically so the mobile media query above can override font-size/padding; an inline style on the element itself would have beaten any class-based media query regardless of specifity. */ .lp-compare-label { padding: 13px 8px; font-size: 13.5px; color: var(--lp-text-muted); text-align: left; } /* Compare-plans row info tooltips (16 Jul 2026) - a tiny "?" per row, click reveals a short plain-English description. Deliberately a lighter mechanism than the existing learn-more modal (.lp-modal) - two or three sentences don't need a full-screen takeover. */ .lp-row-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--lp-border-strong); background: transparent; color: var(--lp-text-dim); font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0; } /* Sibling of .lp-row-info-btn: the "?" explains the row in place, this one goes to the page. Same 16px circle so the pair reads as one control, and deliberately not a linked label, which was the only underlined text in a table of ~25 plain rows and read as a mistake. */ .lp-row-link-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--lp-border-strong); background: transparent; color: var(--lp-text-dim); vertical-align: middle; text-decoration: none; transition: color .15s, border-color .15s; } .lp-row-link-btn:hover, .lp-row-link-btn:focus-visible { border-color: var(--lp-accent); color: var(--lp-accent); } .lp-row-info-btn:hover, .lp-row-info-btn:focus-visible { border-color: var(--lp-accent); color: var(--lp-accent); } .lp-row-info-bubble { position: fixed; z-index: var(--lp-z-toast); max-width: 260px; padding: 10px 12px; border-radius: var(--lp-radius-sm); background: var(--lp-surface-raised); border: 1px solid var(--lp-border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); font-size: 12.5px; line-height: 1.4; color: var(--lp-text-muted); text-align: left; } /* Save-contact block (18 Jul 2026) - QR-to-scan by default (desktop/ laptop: a visitor there needs their phone as a second device anyway), swapped for a direct tap-to-add on any touch-primary device (phone or iPad), since a touch device already IS the "second device" and can't usefully scan its own screen. `hover:none`/`pointer:coarse` rather than a width breakpoint - the same distinction already relied on for the iPad-landscape header fix - since iPad landscape is often as wide as a small laptop but has the identical self-scan problem as a phone. Both blocks stay in the DOM always; this is a plain CSS swap so it still works with JavaScript disabled. */ .save-contact-tap { display: none; } @media (hover: none) and (pointer: coarse) { .save-contact-scan { display: none; } .save-contact-tap { display: block; } } /* Nav "Intelligence" dropdown + mobile drawer group (27 Jul 2026, Public Lookup Slice 3). Desktop opens on hover (CSS) and click/keyboard (JS); mobile drawer shows an expandable "Intelligence" heading. Brand tokens only, no new colours. landing.css is not service-worker cached, so no sw.js bump needed. */ .lp-nav-dropdown { position: relative; } .lp-nav-dropdown-trigger { /* A